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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

JonBob’s picture

The 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.

Robert Castelo’s picture

FileSize
19.97 KB

Good 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:

  • Associate secondary row options with selected tab in first row.
  • Indicate selected option in secondary row
  • Indicate option links in secondary row

Attached are a few screenshots with a few ideas, let me know which you prefer, if any.

Robert Castelo’s picture

FileSize
19.17 KB

version 2

Robert Castelo’s picture

FileSize
19.89 KB

version 3

JonBob’s picture

Both are nice. The first looks more "button-like" to me, which I suppose is the point of the theme. :-) I prefer it.

Robert Castelo’s picture

FileSize
5.77 KB

Attached 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).

Robert Castelo’s picture

FileSize
43.06 KB

Screenshot of new tab style.

Dries’s picture

Committed to HEAD. Cool stuff.

laird’s picture

I'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

Anonymous’s picture