Unify styles for lists and their buttons
Closed, ResolvedPublic

Description

Implementation

List headers and items:

  • Kirigami/QML:
    • Use a ListSectionHeader for headers
    • Add item action buttons when needed
    • Example:

List buttons:

  • Multiple icon-only buttons with tooltips on the bottom left when there's more than one button:
  • Button with label on the bottom left when there's only one button:

Notes

There is a common and functional alternative that's already been adopted by most of our major peers/competitors: putting the buttons in an inline toolbar at the bottom of the window. Here's how it looks on other platforms:

macOS:

GNOME:

Cinnamon:

ElementaryOS:

This style seems to have emerged as a de-facto standard, probably because it is both aesthetically pleasing and solves the problem of how to visually connect the buttons with their list in a consistent matter.

I think it would be nice if we adopted this pattern too, perhaps as new Kirigami components that extend the QML ListView and GridView, or else something that can be added to them, in which case the list should lose the rounded bottom edge to make it looks like it's connected with the toolbar.

The list's toolbar should be able to accept arbitrary controls, and any buttons added to it should show text unless there isn't enough space, in which case they should fall back to being icons-only.

We should unify the styles for the lists itself too. The list headers and items currently don't all look consistent.

ngraham created this task.Jan 21 2019, 10:53 PM
ngraham updated the task description. (Show Details)

This is definitely an area that needs fixing ++


Moving the "add" button to within the listview frame to signify the link between them definitely makes sense.

I'm not completely sold that we map to "+/-" nicely.

  • With various "install from files" "GHNS" methods we end up putting multiple various ways to add something next to a button to remove a selected item all crammed very close together.
  • With the shortcuts screenshot, we need somewhere to put the "change" button. I don't think we want "change" at the bottom.
  • KDE Connect's equivalent is a button marked refresh, so there's quite a range

The other valid pattern that I think is worth exploring is having a consistent "+" button, but keeping the contexual actions all in line as per the existing VD and activities KCM:

Also rather than cramming and going icon only, I think there's room to make use of the space and stack actions vertically within the list view like this:

that then shares a familiar pattern with the actions in Kirigami's sidebar

@davidedmundson

Yeah I agree that contextual, item-specific actions should continue to be inline the way they currently are for Kirigami ListViews. This probably includes the remove button, where applicable. If the remove button is inline, there's probably enough space to show Add and GHNS buttons and distinguish them with text, perhaps by replacing the word "Get" with "Download" to ensure that people know what the button actually does.

Also +1 on your idea to stack the buttons vertically rather than moving to icons-only buttons.

GB_2 added a subscriber: GB_2.Jan 22 2019, 3:44 PM
This comment was removed by GB_2.
GB_2 added a comment.Apr 17 2019, 1:24 PM

BTW, we should also unify the styles for the lists itself. The list headers and items currently don't all look consistent.

GB_2 renamed this task from Unify styles for Add & Remove buttons on lists to Unify styles for lists and their buttons.Apr 24 2019, 3:50 PM
GB_2 updated the task description. (Show Details)
mglb added a subscriber: mglb.Apr 25 2019, 3:05 PM

Also rather than cramming and going icon only, I think there's room to make use of the space and stack actions vertically within the list view like this:

that then shares a familiar pattern with the actions in Kirigami's sidebar

What about wide lists (e.g. configure web shortcuts above)? The buttons would be unnecessarily wide and waste vertical space which could be used by the list, especially when list view is pretty short.

Possible solution: using vertical stacking for narrow list, and placing buttons in one line when they:

  • are wider than some width
  • would be wide enough when placed in one line
In T10384#182044, @GB_2 wrote:

BTW, we should also unify the styles for the lists itself. The list headers and items currently don't all look consistent.

Two things that I've been working on or spotted recently:

  • Columns with checkboxes/tick marks
  • QTreeView vs QTableView when used as a multi column list
GB_2 updated the task description. (Show Details)Aug 4 2019, 2:50 PM
ndavis added a subscriber: ndavis.Aug 4 2019, 6:09 PM
GB_2 updated the task description. (Show Details)Aug 5 2019, 8:08 AM
GB_2 updated the task description. (Show Details)Sep 13 2019, 1:15 PM
GB_2 updated the task description. (Show Details)
GB_2 updated the task description. (Show Details)Sep 13 2019, 1:26 PM
GB_2 updated the task description. (Show Details)

Well, sort of. We did some porting, but there's still substantial inconsistency between old-fashioned QWidgets lists and more modern QML lists. So I guess it depends on whether you think that's within the scope of this task.

ngraham closed this task as Resolved.Sep 13 2023, 3:41 PM
ngraham claimed this task.

With https://invent.kde.org/frameworks/kirigami/-/merge_requests/1235, we have a path forward here, at least for QML apps.