GNOME Bugzilla – Bug 668881
layout issues in panel
Last modified: 2012-02-27 16:53:04 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)
* 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.
(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?
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.
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.
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.
Created attachment 207987 [details] [review] wacom: align the navigation button box to the end of their row
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.
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.
Created attachment 207990 [details] [review] wacom: split the styli controls into a separate GtkGrid Like we did for the tablet page.
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
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
Created attachment 208248 [details] [review] wacom: Swap nav button and label for tablet
Created attachment 208249 [details] [review] wacom: Swap nav button and label for stylus
Created attachment 208250 [details] [review] wacom: Make tablet button box right aligned
Created attachment 208251 [details] [review] wacom: Make display-link right aligned
Created attachment 208252 [details] [review] wacom: Reorder the widgets as per mockup
Created attachment 208253 [details] [review] wacom: Remove right-hand margin from nav button
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