Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
I've been working on the look and feel of tabs in the Pushbutton template, attached screenshot is my progress so far. Just wanted to get some reactions to know if I'm heading in the right direction with this design.
Still to do:
Spacing on secondary tabs (start point, between tabs, and in tabs)
Fill colour on white primary tabs (maybe), very light blue, to differentiate them from white secondary tabs.
Comment | File | Size | Author |
---|---|---|---|
#7 | tabs.jpg | 43.06 KB | Robert Castelo |
#6 | pushbutton-tabs.zip | 5.77 KB | Robert Castelo |
#4 | 03.jpg | 19.89 KB | Robert Castelo |
#3 | 02.jpg | 19.17 KB | Robert Castelo |
#2 | 01.jpg | 19.97 KB | Robert Castelo |
Comments
Comment #1
JonBob CreditAttribution: JonBob commentedThe top row looks fantastic. I have reservations, though, about the secondary tabs.
The idea of the "tab" UI element is to evoke the concept of file folder tabs, which are attached to the content they represent. By inverting the second row of tabs, you make it look like both the rows are attached to the line in between them, rather than the content. I'd investigate using a solid bar of color for the secondary tabs with the current selection hilighted, ala the http://www.apple.com/ interface.
Comment #2
Robert Castelo CreditAttribution: Robert Castelo commentedGood point about secondary row, but I'd like to avoid making it into a coloured block, as this will look too heavy when balanced against the rest of the design.
So the design objectives are:
Attached are a few screenshots with a few ideas, let me know which you prefer, if any.
Comment #3
Robert Castelo CreditAttribution: Robert Castelo commentedversion 2
Comment #4
Robert Castelo CreditAttribution: Robert Castelo commentedversion 3
Comment #5
JonBob CreditAttribution: JonBob commentedBoth are nice. The first looks more "button-like" to me, which I suppose is the point of the theme. :-) I prefer it.
Comment #6
Robert Castelo CreditAttribution: Robert Castelo commentedAttached is a patch to style tabs in Pushbutton.
The tab style has been designed to fit in with the rest of the theme (see screenshot in next post).
Comment #7
Robert Castelo CreditAttribution: Robert Castelo commentedScreenshot of new tab style.
Comment #8
Dries CreditAttribution: Dries commentedCommitted to HEAD. Cool stuff.
Comment #9
laird CreditAttribution: laird commentedI'm not a fan of the ">" between the secondary tabs -- I think that
[*] Settings > Default Workflow > Automatic
looks too much like a "breadcrumb" path (e.g. "Home » Projects » Drupal project » Drupal » Issues » Pushbutton Tabs").
If the secondary tabs looked like a row of radio buttons, with one selected and the others unselected, that would be more clear, IMO, since selecting from a list of radio buttons is a standard GUI element. I think that this would be a simple matter of changing the graphics from ">"'s to empty boxes, so that the second row in your example might look like:
[*] Settings [ ] Default Workflow [ ] Automatic
Comment #10
(not verified) CreditAttribution: commented