After an evaluation, GNOME has moved from Bugzilla to GitLab. Learn more about GitLab.
No new issues can be reported in GNOME Bugzilla anymore.
To report an issue in a GNOME project, go to GNOME GitLab.
Do not go to GNOME Gitlab for: Bluefish, Doxygen, GnuCash, GStreamer, java-gnome, LDTP, NetworkManager, Tomboy.
Bug 786384 - Standardise panel layouts
Standardise panel layouts
Status: RESOLVED OBSOLETE
Product: gnome-control-center
Classification: Core
Component: general
git master
Other Linux
: Normal normal
: ---
Assigned To: Control-Center Maintainers
Control-Center Maintainers
Depends on:
Blocks:
 
 
Reported: 2017-08-16 17:38 UTC by Allan Day
Modified: 2021-06-09 16:31 UTC
See Also:
GNOME target: ---
GNOME version: ---


Attachments
experimental vertical spacing patch (31.80 KB, patch)
2017-08-16 17:42 UTC, Allan Day
none Details | Review
patch - harmonise search and notification list rows (3.18 KB, patch)
2017-08-17 11:56 UTC, Allan Day
committed Details | Review
patch - consistent vertical spacing (32.00 KB, patch)
2017-08-17 12:07 UTC, Allan Day
committed Details | Review
partial patch - harmonize list box rows (48.90 KB, patch)
2017-08-17 16:32 UTC, Allan Day
committed Details | Review
printers: Wrap GtkListBox inside a GtkBox (1.96 KB, patch)
2017-08-24 10:48 UTC, Felipe Borges
committed Details | Review
printers: Apply the vertical spacing standard (1.11 KB, patch)
2017-08-24 10:48 UTC, Felipe Borges
committed Details | Review
more layout guidance (47.31 KB, image/png)
2017-11-02 11:24 UTC, Allan Day
  Details

Description Allan Day 2017-08-16 17:38:40 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).
Comment 1 Allan Day 2017-08-16 17:42:25 UTC
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.
Comment 2 Allan Day 2017-08-17 11:56:30 UTC
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.
Comment 3 Allan Day 2017-08-17 12:07:31 UTC
Created attachment 357807 [details] [review]
patch - consistent vertical spacing

The same patch as in comment 1, but with an updated commit message.
Comment 4 Allan Day 2017-08-17 16:32:52 UTC
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.
Comment 5 Rui Matos 2017-08-20 16:37:19 UTC
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
Comment 6 Rui Matos 2017-08-20 16:37:34 UTC
Review of attachment 357807 [details] [review]:

lgtm
Comment 7 Rui Matos 2017-08-20 16:37:50 UTC
Review of attachment 357823 [details] [review]:

++
Comment 8 Rui Matos 2017-08-20 16:41:26 UTC
Pushing these but I'll leave the bug open for more fixes and
eventually for a systematic solution to panel contents width.
Comment 9 Allan Day 2017-08-22 13:43:07 UTC
Bug 786611 contains the changes for gnome-bluetooth.
Comment 10 Felipe Borges 2017-08-24 10:48:46 UTC
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+.
Comment 11 Felipe Borges 2017-08-24 10:48:52 UTC
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.
Comment 12 Rui Matos 2017-08-24 12:57:58 UTC
Review of attachment 358319 [details] [review]:

ok
Comment 13 Rui Matos 2017-08-24 12:58:00 UTC
Review of attachment 358318 [details] [review]:

sure
Comment 14 Felipe Borges 2017-08-24 13:25:08 UTC
Attachment 358318 [details] pushed as 6a6f4b7 - printers: Wrap GtkListBox inside a GtkBox
Attachment 358319 [details] pushed as c776ab1 - printers: Apply the vertical spacing standard
Comment 15 Allan Day 2017-11-02 11:24:28 UTC
Created attachment 362808 [details]
more layout guidance

Here's some more layout guidance.
Comment 16 André Klapper 2021-06-09 16:31:21 UTC
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.