GNOME Bugzilla – Bug 786384
Standardise panel layouts
Last modified: 2021-06-09 16:31:21 UTC
Since the control center switched to the new sidebar layout, people are more likely to quickly switch between panels. This raises the importance of ensuring consistent panel layouts - this will ensure smoother transitions between panels and will make the control center feel more unified. I currently see three main forms of inconsistency: * The heights of the rows in different lists. * Vertical spacing between groups of content and between headings. * Inconsistent widths of content, particularly of lists. Guidelines we could use to resolve these issues: * Standard list widths: * Maximum width - 820px * Minimum width - 460px * Standard row heights: * Rows containing only labels (bluetooth, displays, keyboard, privacy, region & language, sharing) - 48px tall [1] * Rows containing labels and controls (date & time, mouse & touchpad, power, universal access, wi-fi) - 56px tall [2] * Rows containing app icons (search, notifications) - 52px tall [3] * Standard vertical spacing: * 32px above and below panel content (ignore this for online accounts) * 32px spacing between sections (such as different lists) * 12px below headings [1] Requires bluetooth, displays, keyboard to be changed. [2] Requires universal access, mouse & touchpad, colour to be changed. [3] Requires search to be changed (will need smaller icons).
Created attachment 357746 [details] [review] experimental vertical spacing patch This patch adjusts the vertical spacing of most of the panels. I'm mostly attaching it here for feedback. I wasn't able to change displays, because it keeps crashing on me. I wasn't able to do Bluetooth and printers either - I couldn't make sense of them.
Created attachment 357806 [details] [review] patch - harmonise search and notification list rows This patch fixes one of the most glaring inconsistencies in the control center - the fact that app icons appear as different sizes. I'm planning to do more work to harmonise the row layouts throughout the control center, but this changed seemed reasonably standalone.
Created attachment 357807 [details] [review] patch - consistent vertical spacing The same patch as in comment 1, but with an updated commit message.
Created attachment 357823 [details] [review] partial patch - harmonize list box rows This patch harmonizes the layout of a bunch of the list box rows, mainly their heights. Some issues with it: * Wi-Fi panel is incomplete - I couldn't figure out how to adjust the rows there. * Displays - I didn't touch this because it's in flux, and it's crashy. * Bluetooth - as with the other patch, I couldn't figure out where the UI is defined. * Power - is OK to go ahead as it is, but ideally the first row with the strength bar would have a separate height of its own. So would the wi-fi row (since it has two lines of text, it needs extra height). * Date & Time - like power, this would benefit from having separate heights for the rows that have two lines of text. This patch could potentially be merged with the previous one.
Review of attachment 357806 [details] [review]: looks good, thanks for doing this. row width across different panels will need systematic infrastructure somewhere in g-c-c's core, we can tackle that next cycle
Review of attachment 357807 [details] [review]: lgtm
Review of attachment 357823 [details] [review]: ++
Pushing these but I'll leave the bug open for more fixes and eventually for a systematic solution to panel contents width.
Bug 786611 contains the changes for gnome-bluetooth.
Created attachment 358318 [details] [review] printers: Wrap GtkListBox inside a GtkBox In order to vertically align the printers panel content by the same standards as the other panels, we should set the GtkListBox top and bottom margins to 32px. This commit wraps GtkListBox inside a GtkBox to handle the Gtk+ issues discussed in Bug 773459 regarding the background of ListBox margins. This commit can be cleanly reverted once the issue is fixed in Gtk+.
Created attachment 358319 [details] [review] printers: Apply the vertical spacing standard Settings panels are given 32px above and below their content and 32px vertical space between major sections. 12px space is placed below headings.
Review of attachment 358319 [details] [review]: ok
Review of attachment 358318 [details] [review]: sure
Attachment 358318 [details] pushed as 6a6f4b7 - printers: Wrap GtkListBox inside a GtkBox Attachment 358319 [details] pushed as c776ab1 - printers: Apply the vertical spacing standard
Created attachment 362808 [details] more layout guidance Here's some more layout guidance.
GNOME is going to shut down bugzilla.gnome.org in favor of gitlab.gnome.org. As part of that, we are mass-closing older open tickets in bugzilla.gnome.org which have not seen updates for a longer time (resources are unfortunately quite limited so not every ticket can get handled). If you can still reproduce the situation described in this ticket in a recent and supported software version, then please follow https://wiki.gnome.org/GettingInTouch/BugReportingGuidelines and create a new bug report at https://gitlab.gnome.org/GNOME/gnome-control-center/-/issues/ Thank you for your understanding and your help.