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 668881 - layout issues in panel
layout issues in panel
Status: RESOLVED FIXED
Product: gnome-control-center
Classification: Core
Component: Wacom
unspecified
Other Linux
: Normal normal
: ---
Assigned To: Peter Hutterer
Control-Center Maintainers
Depends on:
Blocks:
 
 
Reported: 2012-01-27 21:36 UTC by William Jon McCann
Modified: 2012-02-27 16:53 UTC
See Also:
GNOME target: ---
GNOME version: ---


Attachments
screenshot (89.78 KB, image/png)
2012-01-27 21:36 UTC, William Jon McCann
  Details
wacom: split the main page controls in a separate GtkGrid (15.40 KB, patch)
2012-02-19 15:54 UTC, Cosimo Cecchi
committed Details | Review
wacom: align the navigation button box to the end of their row (1.46 KB, patch)
2012-02-19 15:55 UTC, Cosimo Cecchi
committed Details | Review
wacom: redo spacings in the tablet UI page (6.63 KB, patch)
2012-02-19 15:55 UTC, Cosimo Cecchi
committed Details | Review
wacom: realign the lines on the styli images to the controls (13.04 KB, patch)
2012-02-19 15:55 UTC, Cosimo Cecchi
committed Details | Review
wacom: split the styli controls into a separate GtkGrid (22.30 KB, patch)
2012-02-19 15:55 UTC, Cosimo Cecchi
committed Details | Review
another proposed iteration (37.45 KB, image/png)
2012-02-20 17:55 UTC, Cosimo Cecchi
  Details
wacom: Swap nav button and label for tablet (1.66 KB, patch)
2012-02-23 11:47 UTC, Bastien Nocera
committed Details | Review
wacom: Swap nav button and label for stylus (1.54 KB, patch)
2012-02-23 11:47 UTC, Bastien Nocera
committed Details | Review
wacom: Make tablet button box right aligned (4.46 KB, patch)
2012-02-23 11:47 UTC, Bastien Nocera
committed Details | Review
wacom: Make display-link right aligned (1.02 KB, patch)
2012-02-23 11:47 UTC, Bastien Nocera
committed Details | Review
wacom: Reorder the widgets as per mockup (2.34 KB, patch)
2012-02-23 11:47 UTC, Bastien Nocera
committed Details | Review
wacom: Remove right-hand margin from nav button (2.02 KB, patch)
2012-02-23 11:47 UTC, Bastien Nocera
committed Details | Review

Description William Jon McCann 2012-01-27 21:36:15 UTC
Created attachment 206301 [details]
screenshot

Looking at the panel that is shown in the really nice video you guys did. I noticed:

 * Border on top of dialog is greater than on left side
 * Calibrate (or any action button) should not be mixed in with settings. It should be on a row with other action buttons. Probably just below the heading for each section.
 * It seems that the alignment of the heading is wrong when a "n of m" label is missing as in the top section
 * The row spacing in the top section is way too tight
 * The row spacing in the lower section is way too much
 * The row spacing should be the same all the way up and down the page
 * There should be more space (~double normal interrow spacing) between the top and bottom sections (ie above Classic Pen)
Comment 1 William Jon McCann 2012-01-27 21:39:54 UTC
 * The "2 of 3" light text is very weak at the left side. It just hangs out there and is very disconnected from the bold label and the arrows.
Comment 2 Bastien Nocera 2012-01-30 17:01:15 UTC
(In reply to comment #0)
> Created an attachment (id=206301) [details]
> screenshot
> 
> Looking at the panel that is shown in the really nice video you guys did. I
> noticed:
> 
>  * Border on top of dialog is greater than on left side

Done.

>  * Calibrate (or any action button) should not be mixed in with settings. It
> should be on a row with other action buttons. Probably just below the heading
> for each section.

This goes against the mockups.

>  * It seems that the alignment of the heading is wrong when a "n of m" label is
> missing as in the top section

Fixed.

>  * The row spacing in the top section is way too tight

Already increased in master.

>  * The row spacing in the lower section is way too much

The row spacing at the bottom is there so the controls line up with the lines from the drawing.

>  * The row spacing should be the same all the way up and down the page

That's not possible considering that the images on the left are the ones dictating the height of the panel.

>  * There should be more space (~double normal interrow spacing) between the top
> and bottom sections (ie above Classic Pen)

Done.

(In reply to comment #1)
>  * The "2 of 3" light text is very weak at the left side. It just hangs out
> there and is very disconnected from the bold label and the arrows.

Again, that's against the mockups.

I've also fixed a number of other layout problems in the stylus and tablet sections. Please test with a current master version. I'm sure Cosimo can help with that.

Jakub, what's the verdict on the 2 items above that don't match the mockups?
Comment 3 William Jon McCann 2012-01-30 23:43:08 UTC
I think you also need <property name="valign">start</property> on both grids.

The left padding on the bold heading seems wrong to me. It should be zero. If you are trying to separate the columns there is probably a better way to do that. The action buttons look much better just under the heading - I tried it.

In the test program you can see the top left image change position between "1 of 4" and "2 of 4".

The spacing in the button bar (the one with Calibrate) is too large. I think 10 is better.

The button bar should probably be attached to the 1 column and not 2 - and span columns.

"Adjust display resolution" should probably span columns.

The "soft" "firm" etc labels should not be italic.

The 1 of 4 label still feels really odd at the left.
Comment 4 Jakub Steiner 2012-02-06 15:03:25 UTC
I've updated the wires to address some of the issues raised - the action buttons no longer resemble property controls and are left aligned below the device name heading. There was also a random unintended misalignment between the label and control column.

As for the stepper control being on the left of the device name. I wish I could see the actual dialog (still failing to build an uptodate version and an older build of system settings coredumps for me), but it doesn't strike me as odd on the wires. One possible alternative would be to have the control centered below the device graphic so you feel like you are stepping through the images rather than the titles.
Comment 5 Cosimo Cecchi 2012-02-19 15:54:58 UTC
Created attachment 207986 [details] [review]
wacom: split the main page controls in a separate GtkGrid

The effect we want to achieve is to have the model name and button box
padded 16px to the left of the tablet controls below.
Pack all the tablet controls in a separate GtkGrid, so we can just set a
margin on that and offset its contents from the model above.
Comment 6 Cosimo Cecchi 2012-02-19 15:55:04 UTC
Created attachment 207987 [details] [review]
wacom: align the navigation button box to the end of their row
Comment 7 Cosimo Cecchi 2012-02-19 15:55:13 UTC
Created attachment 207988 [details] [review]
wacom: redo spacings in the tablet UI page

Use column and row spacing on the containing GtkGrid instead of setting
margins on each widget.
Comment 8 Cosimo Cecchi 2012-02-19 15:55:17 UTC
Created attachment 207989 [details] [review]
wacom: realign the lines on the styli images to the controls

We want them to line up with a 10px padding between the controls.
Comment 9 Cosimo Cecchi 2012-02-19 15:55:22 UTC
Created attachment 207990 [details] [review]
wacom: split the styli controls into a separate GtkGrid

Like we did for the tablet page.
Comment 10 Bastien Nocera 2012-02-20 10:37:05 UTC
Awesome! Thanks Cosimo!

Attachment 207986 [details] pushed as 41e5537 - wacom: split the main page controls in a separate GtkGrid
Attachment 207987 [details] pushed as d451559 - wacom: align the navigation button box to the end of their row
Attachment 207988 [details] pushed as 4ba7722 - wacom: redo spacings in the tablet UI page
Attachment 207989 [details] pushed as 790bbbd - wacom: realign the lines on the styli images to the controls
Attachment 207990 [details] pushed as 371fef6 - wacom: split the styli controls into a separate GtkGrid
Comment 11 Cosimo Cecchi 2012-02-20 17:55:59 UTC
Created attachment 208052 [details]
another proposed iteration

This is another iteration we discussed today with Jakub and Jon; it consists basically in three changes:
- the tablet/styli name label is moved to be left aligned
- the navigation buttons are moved far on the right side
- the button box at that point needs to be moved as well, below the controls grid and right-aligned
Comment 12 Bastien Nocera 2012-02-23 11:47:25 UTC
Created attachment 208248 [details] [review]
wacom: Swap nav button and label for tablet
Comment 13 Bastien Nocera 2012-02-23 11:47:32 UTC
Created attachment 208249 [details] [review]
wacom: Swap nav button and label for stylus
Comment 14 Bastien Nocera 2012-02-23 11:47:37 UTC
Created attachment 208250 [details] [review]
wacom: Make tablet button box right aligned
Comment 15 Bastien Nocera 2012-02-23 11:47:42 UTC
Created attachment 208251 [details] [review]
wacom: Make display-link right aligned
Comment 16 Bastien Nocera 2012-02-23 11:47:49 UTC
Created attachment 208252 [details] [review]
wacom: Reorder the widgets as per mockup
Comment 17 Bastien Nocera 2012-02-23 11:47:55 UTC
Created attachment 208253 [details] [review]
wacom: Remove right-hand margin from nav button
Comment 18 Bastien Nocera 2012-02-27 16:52:45 UTC
Attachment 208248 [details] pushed as 338fd40 - wacom: Swap nav button and label for tablet
Attachment 208249 [details] pushed as 606fee3 - wacom: Swap nav button and label for stylus
Attachment 208250 [details] pushed as f6d645a - wacom: Make tablet button box right aligned
Attachment 208251 [details] pushed as de46b91 - wacom: Make display-link right aligned
Attachment 208252 [details] pushed as 88f743c - wacom: Reorder the widgets as per mockup
Attachment 208253 [details] pushed as dbef08e - wacom: Remove right-hand margin from nav button