[SDK] Need a standard way to make an Icon look disabled

[Ugo Riboni]

[Updated description]

Right now if one wants to use an Icon inside a ListItem.Empty or any other AbstractButton derived class, and disable the item, there is no standard way to make the Icon look disabled without directly affecting its opacity and/or colorization.
Haviing a standard way to do this would help promoting consistency in the UI.

--- UX Solution ---
Agreed. Disabled icons should have 30% opacity by default, but that can be changed by the App developer

–––

Desired solution:

Adjust the opacity to 30% (0.3) for all disabled icons. This will be consistent with our disabled states on buttons.

[Tim Peeters (tpeeters)]

so what you want is a standard look for an Icon with enabled: false?

[Tim Peeters (tpeeters)]

Do you have a use case where you have a colored icon that needs to be desaturated when disabled?

[Ugo Riboni (uriboni)]

Yes to the standard look for disabled Icons.

 No to the example. I want to have in general the ability to use ListItem.Empty+Icon to do the same thing that ListItem.Standard would do, but being able to make the icon smaller.
(sometimes the icons is grayscale, sometimes color)

[Tim Peeters (tpeeters)]

Disabled icons in the standard list items currently have an opacity of 0.5. Do you want to change that to 0.3 as well?

[Zsombor Egri (zsombi)]

Same goes for the Labels too. So in general, we need to set different colors for components when they are disabled.

[Tim Peeters (tpeeters)]

For Icons, you often set the color explicitly (to override the keyColor in the image), so I'm not sure we can use the different palette color for this. Using 0.3 opacity can be done though.

[Tim Peeters (tpeeters)]

@zsombi, for the Labels, please report a separate bug.

[Nekhelesh Ramananthan (nik90)]

@tpeeters Does this also apply to the header icons as well that cannot visually be distinguished between active and disabled icons?

[Tim Peeters (tpeeters)]

@nik90 right, this should also apply to header icons. Actually, with the latest palette update that was taken care of, but I need to make sure that the opacity is not multiplied with 0.3 twice (once from the icon, once from the palette) for disabled header icons.

That also makes me think that perhaps the icon itself should never change its opacity, but the component that uses the icon should set it for all its contents.

[Andrew Hayzen (ahayzen)]

After the recent changes to the UITK we noticed that the enabled property on header actions doesn't work any more and we have to use the visible property. This means that disabled header actions are now hidden from the user until they can be used, heavily reducing their discoverability.

For example (in the music-app), if I press'n'hold over an item in a list it turns into multiselect mode, before in the header you could see the greyed out actions informing the user what could be done once they select an item, such as add to queue, add to playlist etc. Now the user has to perform an extra step of selecting an item in the list to be informed what they can do with it. This slows down the user, reduces their confidence in finding features and causes confusion in trying to find header actions as they appear in much less cases now.

[Tim Peeters (tpeeters)]

The new palette already takes care of the reduced opacity of the icons in the header.

For the Icon component itself, I will not change the opacity automatically, because that may conflict with opacities set in other components that use the Icon, as would be the case with the buttons in the header.

[Tim Peeters (tpeeters)]

(fixed by the new palette)

[Tim Peeters (tpeeters)]

I re-open this bug, because even though for the icon buttons the color is updated when the icon is disabled, icons in the PageHeader currently always have the foregroundColor of the PageHeader so disabled buttons cannot be distinguished from enabled buttons.

[Łukasz Zemczak (sil2100)]

This bug was fixed in the package ubuntu-ui-toolkit 1.3.1938+15.04.20160412 in https://launchpad.net/~ci-train-ppa-service/+archive/ubuntu/stable-phone-overlay

---------------

ubuntu-ui-toolkit (1.3.1938+15.04.20160412) vivid; urgency=medium

  [ Tim Peeters ]
  * Hide the PageStack back button when depth == 1. Fixes LP: #1565811
  * Add header subtitle. Fixes LP: #1399289
  * Reveal the header in gallery when changing the layout to two columns.
    Fixes LP: #1556860
  * Set correct colors for disabled actions in the header.
    Fixes LP: #1393485
  * Disable tst_datepicker.qml to unblock the staging.Fixes LP: #1567840
  * Prevent invisible header from setting the flickable topMargin.
    Fixes LP: #1560419, LP: #1560458, LP: #1566231.

  [ Zsombor Egri ]
  * Move MouseTouchAdaptor into UbuntuToolkit library. Fix adaptor code for
    Xenial. Fixes LP: #1561436

  [ Christian Dywan ]
  * Don't use a separate argument to distinguish touch events. If it's touch,
    it has our overloaded methods. Fixes LP: #1530802
  * Use export_qml_dir.sh in qmlapicheck and runtest Also add Usage to runtest.
    Fixes LP: #1567286.
  * Summary style error results with sections. Fixes LP: #1568804

  [ Andrea Bernabei ]
  * Mouse filter: check if mouse is inside the area on mouse moves and
    setHovered accordingly. Fixes LP: #1566378.

  [ Timo Jyrinki ]
  * Add latest changes for GLES.
  * Add back Provides: qtdeclarative5-ubuntu-ui-toolkit-plugin to resolve
    upgrade issue. Fixes LP: #1568817
  * Fix wrapper script auto-generated by Qt that incorrectly tries to execute
    itself. Fixes LP: #1560000
  * bileto_convert_to_gles: sort and add
    qml-module-ubuntu-performancemetrics-gles.install. Fixes LP: #1569217

  * Add additional Breaks as requested by archive admin.
  * Add latest changes for GLES.

  [ Zolán Balogh ]
  * Fix the UITK test plan script.

  [ CI Train Bot ]
  * Resync trunk. added: examples/ubuntu-ui-toolkit-gallery/po/nb.po

  [ Robert Park ]
  * Inline GLES packaging. added: debian/bileto_convert_to_gles
    debian/control.gles debian/rules.gles

 -- Zoltan Balogh <email address hidden> Tue, 12 Apr 2016 11:12:44 +0000

[Launchpad Janitor (janitor)]

This bug was fixed in the package ubuntu-ui-toolkit - 1.3.1984+16.10.20160527.2

---------------
ubuntu-ui-toolkit (1.3.1984+16.10.20160527.2) yakkety; urgency=medium

  [ Christian Dywan ]
  * Slimmer frame for TextFields: 0.5dp. Fixes LP: #1578190.

  [ Albert Astals Cid ]
  * Add override
    The override specifier (since C++11) specifies that a virtual function
    overrides another virtual function. In a member function declaration or
    definition, override ensures that the function is virtual and is overriding
    a virtual function from the base class.

  [ Tim Peeters ]
  * Fix reference error in PullToRefreshStyle. Fixes LP: #1582843
  * Mark Tab, Tabs, TabBar, PageHeadConfiguration, PageHeadSections,
    PageHeadState, ToolbarButton, ToolbarItems as deprecated in the
    documentation. Fixes LP: #1566735, LP: #1566741.

  [ CI Train Bot ]
  * Resync trunk.

 -- Zoltan Balogh <email address hidden> Fri, 27 May 2016 07:08:44 +0000