Created attachment 396 [details]
background left
Created attachment 397 [details]
background right
Created attachment 398 [details]
background 1px
Created attachment 399 [details]
layer button background image (non mouseover)
Give to Josh since he is changing these. A widget which more closely matches that from gnome-disk-utility has been merged: http://git.yoctoproject.org/cgit/cgit.cgi/poky/commit/?id=f76dcdb1cad85dd755ae14d18b3f5f7c67e273ee It can be seen in the screenshot here: https://wiki.yoctoproject.org/wiki/File:ImageButton.png The buttons' mouseover, even though works well, don't match the design (look & feel and spacing). Would you like me to open a new bug so that we could fix this later on? If that is the case, can we anyway add 58px padding between the 'select a machine' drop down and the 'Layers' button? Thanks! (In reply to comment #7) > The buttons' mouseover, even though works well, don't match the design (look & > feel and spacing). I don't see any design for the mouseover state of the button, other than that there are separate icons for the mousover state (and we're using those) can you point me at that? From looking at the 'Hob 1.2 screens inventory document' I can see that I need more padding in the widget. I can also infer from the same document that I should have the text on the buttons be larger than the standard label text and further that the text should possibly bold. I can also play around with this and try and come up with something that matches more closely to the visual design. I'll note that the 'Hob 1.2 screens inventory document' states 'NOT A VISUAL REFERENCE' on every page. I've been using it as inspiration, more than a pixel perfect guide to follow, and trying to match the design 'intent' whilst also trying to ensure that the application looks good across a variety of Linux systems. Perhaps I'm being remiss here? > Would you like me to open a new bug so that we could fix this later on? If that > is the case, can we anyway add 58px padding between the 'select a machine' drop > down and the 'Layers' button? I can certainly add some padding in there. A combination of the way the toolkit works, and how layout has been implemented in Hob means that it likely won't be exactly 58px but I'll play around with the spacing there somewhat. Created attachment 403 [details]
How the 'Layers', 'View Recipes' and 'View Packages' buttons currently look
Created attachment 404 [details]
The 'Layers', 'View Recipes' and 'View Packages' buttons after tweaking text size, padding and position
Created attachment 405 [details]
The 'Layers', 'View Recipes' and 'View Packages' buttons after tweaking text size, padding and position and removing setting of the colour of the secondary text
The three attachments show: "How the 'Layers', 'View Recipes' and 'View Packages' buttons currently look" in attachment #403 [details] "The 'Layers', 'View Recipes' and 'View Packages' buttons after tweaking text size, padding and position" in attachment #404 [details] tweaks the spacing, layout and text size to try and more closely match the design. "The 'Layers', 'View Recipes' and 'View Packages' buttons after tweaking text size, padding and position and removing setting of the colour of the secondary text" in attachment #405 [details] tweaks the spacing, layout and text size to try and more closely match the design per above but also removes the code which lightens the font colour on the secondary text. Some thoughts on these would be appreciated. It's starting looking really good, well done! It would be great if you could adjust spacing according to Mikael design (Yocto - HOB image creator -visual design-v1.1, page 7 - in attachment). I noticed there is no consistency on spacing between main titles, subtitles and dropdown for example. Also can we increase the subtitle font and make it grey (for colours and font sizes please refer to page 6 of the same document)? Thanks! Created attachment 406 [details]
HOB image creator -visual design-v1.1
Hob Visual Design Specifications
By the way, the grey text under 'Layers, View recipes and View packages' as shown in the first example (https://bugzilla.yoctoproject.org/attachment.cgi?id=404) works best. (In reply to comment #13) > It would be great if you could adjust spacing according to Mikael design (Yocto > - HOB image creator -visual design-v1.1, page 7 - in attachment). Aha! Thanks for pointing me at this document! > I noticed > there is no consistency on spacing between main titles, subtitles and dropdown > for example. I shall try and address this as best we can with our current code base. > Also can we increase the subtitle font and make it grey (for > colours and font sizes please refer to page 6 of the same document)? I'm reluctant to set explicit font sizes, as opposed to proportional ones, as it prevents any user settings which increase (or decrease) the text size from taking effect. Created attachment 409 [details]
Layout, spacing and font tweaks
I played around with spacing and fonts a bit this afternoon. The attachment shows the results.
I've stuck to proportional fonts for the reasoning I gave above and also because when I did start using the font sizes in the visual design document I realised the whole layout (which is, as we've discussed, primarily a fixed size layout) is affected.
Please let me know what you think of the proposed tweaks here as a short term improvement.
I think it looks really good, well done! I'll wait to see it on Hob before marking this bug as verified. The buttons works well and the design overall is good. The header background in the design though is the same also below the buttons 'Templates', 'My Images', 'Settings' while in the built on my machine the buttons have a different background colour. Can someone explain me why? Can the background of the header look like in the attachment 'Layout, spacing and font tweaks'? Thanks |
Created attachment 395 [details] Disk utility example These buttons are very similar to the 'Format drive' and 'Benchmark' buttons used by the Gnome 2 Disk Utility application in the 'Hard disk' tab (screenshot in attachment). I also attached the assets to create the highlight box in the background.