Unify list icon sizes
Open, Needs TriagePublic

Description

We have list items containing icons in multiple places. The size of the icons is not consistent.

Examples from system settings:

Activities KCM:


Implementation uses Kirigami.Units.iconSizes.medium

KWin Scripts KCM:


Implementation uses KPluginSelector (Widgets based)

Baloo KCM:


Implementation uses Kirigami.BasicListItem which uses Kirigami.Units.iconSizes.smallMedium

Krunner KCM:


Implementation uses KPluginSelector (Widgets based)

Mobile wifi KCM:


Implementation uses Kirigami.Units.gridUnit

Accounts KCM with D27681:


Implementation uses Kirigami.Units.iconSizes.large

There are other KCMs that have listviews with icons too, but I focused on those where the list is the central element and thus are quite similar. A similar pattern can also be found in applications.

There are two main sources of inconsistency here. The first is KPluginSelector being widgets-based. A QML port based on Kirigami ListItems is needed anyway for porting all the KCMs.
The second source is that most lists cannot use BasicListItem (which would enforce an icon size) because they use SwipeListItem and build the icon part themselves with varying icon sizes.

Action items:

  • Decide on an icon size for BasicListItem
  • Make a way to combine BasicListItem and SwipeListItem so we can have an enforced icon size + actions
  • Create a QML version of KPluginSelector based on above component
nicolasfella updated the task description. (Show Details)Mar 7 2020, 5:41 PM
GB_2 added a subscriber: GB_2.EditedApr 20 2020, 2:54 PM

I think smallMedium (or maybe medium) generally seems like a good size. Icons in lists don't need to be so big.

Make a way to combine BasicListItem and SwipeListItem so we can have an enforced icon size + actions

Oh my god yes. But guess what: you already can! You can make a BasicListItem the contentItem of a SwipeListItem. I did this in the wallpaper chooser's folder list item delegates. But I would personally prefer a SuperListItem that did everything all by itself.

My two cents: smallMedium for a list item with one line of text/no subtitle, and medium for a list item with a subtitle or otherwise two lines of text.

I like the idea of having a larger icon when there is a subtitle. However when trying to do it for all items with more than one line it leads to a somewhat awkward look with mixed line heights

ndavis added a subscriber: ndavis.Jun 15 2020, 10:09 AM
  • For 2 lines of text with color icons, use 32px.
  • For 1 line of text with monochrome icons, use 22px.
  • For 1 line of text with a logo, maybe use 32px so that the logo is easier to see?

I like the idea of having a larger icon when there is a subtitle. However when trying to do it for all items with more than one line it leads to a somewhat awkward look with mixed line heights

When/why would you need to do something like this?

When you have a list of items where some have a subtitle and some do not, maybe all of the list items should have the same height anyway. Lists of items with different heights is really weird looking.

But probably all of them should have a subtitle, or none of them should.

When you have a list of items where some have a subtitle and some do not, maybe all of the list items should have the same height anyway. Lists of items with different heights is really weird looking.

But probably all of them should have a subtitle, or none of them should.

I definitely don't think we should mix item heights unless there's a specific situation where it really is better. I can't think of any situations like that though.

I tried to patch BasicListItem to have a different icon size automatically when having a subtitle or more than two lines, but it lead to the above result since from within one BasicListItem we cannot make assumptions about the other items in a list.

It should be doable for the subtitle thing if we assume all items in a list either have or don't have a subtitle, but I don't think we can do it automatically according to the line count

This is what KPluginSelector would look like with the proposed 32px icons:

My proposal is to formalize this:

  • As a rule of thumb list items should be consistently one/two lined
  • One-lined items should have smallMedium (22px) icons
  • Two-lined items should have medium (32px) icons
  • If for technical reasons the line count cannot be consistent the developer needs to ensure consistent icon sizes

To implement this I propose:

  • Kirigami.BasicListItem should automatically use medium when a subtitle is set
  • KPluginSelector should use 32px icons instead of 64px
  • hand-rolled list items need case-by-case review

Further notes:

  • KPluginSelector needs a QML equivalent anyway
  • Create higher-level components for common currently hand-rolled list item use cases

Sounds perfectly sensible to me. +1.

sounds good

ngraham added a comment.EditedMay 14 2021, 5:57 PM

BasicListitem now has the reserveSpaceForSubtitle property, which reserve space for a subtitle even when there is no subtitle, which you can use to give some list item subtitles but preserve all the list items having the same height.

rokejulianlockhart added a comment.EditedJan 6 2022, 2:43 PM

Why have so many people proposed static sizes if iconographic configuration is available within "kcm_icons"? Adherence to what has been specified by the user is certainly more consistent behaviour. This is important to me, because I have never desired utilisation of anything but 16-pixels for iconography, because the resolutions of my screens has been minor enough that iconography of more great resolution has been detrimental. Additionally, quick ascertainment of what the colourative/colourful iconography that has been proposed is intending to communicate is not as easy for me as the current iconography.

Consider this to be agreement if what I have described is what has been implemented, but that is not what I have observed within "http://invent.kde.org/frameworks/kirigami/-/merge_requests/296".

I would rather disable iconography altogether, but uninstallation of "breeze-icons" is not possible within Fedora.