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

Bug #1393485 reported by Ugo Riboni
12
This bug affects 2 people
Affects Status Importance Assigned to Milestone
Canonical System Image
Fix Released
High
Zoltan Balogh
Ubuntu UX
Fix Committed
High
Femma
ubuntu-ui-toolkit (Ubuntu)
Fix Released
High
Tim Peeters
ubuntu-ui-toolkit (Ubuntu RTM)
Fix Released
High
Tim Peeters

Bug Description

[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.

Tags: design-sync

Related branches

Tim Peeters (tpeeters)
Changed in ubuntu-ui-toolkit:
status: New → Incomplete
tags: added: design-sync
Revision history for this message
Tim Peeters (tpeeters) wrote :

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

Changed in ubuntu-ux:
importance: Undecided → High
assignee: nobody → Giorgio Venturi (giorgio-venturi)
description: updated
Changed in ubuntu-ux:
status: New → Fix Committed
description: updated
Revision history for this message
Tim Peeters (tpeeters) wrote :

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

Revision history for this message
Ugo Riboni (uriboni) wrote :

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)
Changed in ubuntu-ui-toolkit:
status: Incomplete → Triaged
assignee: nobody → Tim Peeters (tpeeters)
importance: Undecided → Medium
Zoltan Balogh (bzoltan)
Changed in ubuntu-ui-toolkit (Ubuntu):
assignee: nobody → Tim Peeters (tpeeters)
importance: Undecided → Medium
status: New → Triaged
Zoltan Balogh (bzoltan)
no longer affects: ubuntu-ui-toolkit
summary: - Need a standard way to make an Icon look disabled
+ [SDK] Need a standard way to make an Icon look disabled
Revision history for this message
Tim Peeters (tpeeters) wrote :

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?

Changed in ubuntu-ux:
assignee: Giorgio Venturi (giorgio-venturi) → nobody
assignee: nobody → Jouni Helminen (jounihelminen)
Changed in ubuntu-ux:
assignee: Jouni Helminen (jounihelminen) → nobody
assignee: nobody → Jamie Young (jamiedawsonyoung)
description: updated
Revision history for this message
Zsombor Egri (zsombi) wrote :

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

Revision history for this message
Tim Peeters (tpeeters) wrote :

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.

Revision history for this message
Tim Peeters (tpeeters) wrote :

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

Changed in ubuntu-ui-toolkit (Ubuntu):
status: Triaged → In Progress
Revision history for this message
Nekhelesh Ramananthan (nik90) wrote :

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

Revision history for this message
Tim Peeters (tpeeters) wrote :

@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.

Revision history for this message
Andrew Hayzen (ahayzen) wrote :

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.

Revision history for this message
Tim Peeters (tpeeters) wrote :

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.

Revision history for this message
Tim Peeters (tpeeters) wrote :

(fixed by the new palette)

Changed in ubuntu-ui-toolkit (Ubuntu):
status: In Progress → Fix Released
Changed in ubuntu-ux:
assignee: Jamie Young (jamiedawsonyoung) → Femma (femma)
Revision history for this message
Tim Peeters (tpeeters) wrote :

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.

Changed in ubuntu-ui-toolkit (Ubuntu):
status: Fix Released → In Progress
Tim Peeters (tpeeters)
Changed in ubuntu-ui-toolkit (Ubuntu):
importance: Medium → High
Tim Peeters (tpeeters)
Changed in ubuntu-ui-toolkit (Ubuntu):
status: In Progress → Fix Committed
Changed in canonical-devices-system-image:
assignee: nobody → Zoltan Balogh (bzoltan)
importance: Undecided → High
milestone: none → 11
Changed in canonical-devices-system-image:
status: New → In Progress
Changed in ubuntu-ui-toolkit (Ubuntu RTM):
status: New → Fix Committed
importance: Undecided → High
Revision history for this message
Łukasz Zemczak (sil2100) wrote :

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

Changed in ubuntu-ui-toolkit (Ubuntu RTM):
status: Fix Committed → Fix Released
Changed in canonical-devices-system-image:
status: In Progress → Fix Committed
Tim Peeters (tpeeters)
Changed in ubuntu-ui-toolkit (Ubuntu RTM):
assignee: nobody → Tim Peeters (tpeeters)
Revision history for this message
Launchpad Janitor (janitor) wrote :

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

Changed in ubuntu-ui-toolkit (Ubuntu):
status: Fix Committed → Fix Released
Changed in canonical-devices-system-image:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.