TabContainer: different look for nested tabs

[drschwartz]

Information architectures often rely on multiple levels of subdivision to organize info. Currently, Tab Container only offers one level of tabs. Tab Container should support an additional layer of non-graphical (no visual tab metaphor) text sub-tabs. Each top-level graphical tab, when selected, would display up to one row of text tabs, with a pipe "|" separator between sub-tabs, immediately below the graphical tab row (see the examples below). Only one sub-tab can be selected at a time.

Note the the 'Jewelry' subtab within the 'Jewelry & Apparel' tab is selected in this example.

[drschwartz]

This should be tagged with 'ibm' 'tab' 'nested' 'sub-tab' and the component should be 'Digit -LnF'

[dante]

This seems like it would be a whole new widget, reusing a TabController and a customized TabController for each Tab. Adding this much complexity to TabContainer might be overkill. A solution would be to make the content of each Tab include it's own "custom TabController and sub-StackContainer" ... the visuals would be the same.

[bill]

I think the description was misphrased a bit.... a developer can implement something that looks the above screenshot using nested TabContainer widgets, but we just need different formatting of the "tabs" in the inner TabContainer.

As to whether that happens automatically whenever you nest TabContainers or whether there's a flag, I'm not sure, but anyway, the idea is that currently nested TabContainers look like a single TabContainer where the labels overflow to multiple lines (like the Control Panel --> System dialog on Windows)

[bill]

Assigning to nonken but I'll help :-).

[nonken]

I'd like to discuss the details of this - even though we had the discussion in the weekly meetings already. My first impression is that having such a functionality would be a great enhancement for Dojo and should be available in any case, no matter how we will implement it.

Iit seems that giving the children tabs of tabs a different look is very drastic behaviour. Following questions come to my mind.

1. What happens with tabs in the third generation? 4rth, 5th, ...? we eventually will face the exact same problem over and over 2. Will this be set with a flag? If so I fear we will get into lots of nested classes again and if not i fear that we take too much control over how a ui with nested tabs has to look like 3. If we find another way, would this be a different styled tabwidget? Isn't that what stack controller does (but then we still need left/right/bottom)? Or a menu bar?

Just my initial thoughs..

[alle]

We can use simple css to customize look on tabs if we can identify tabs of different TabContainers?.
If I understand correctly we already have the solution.

I see 2 different cases:
1 - sub-TabContainer? is identified by an id so solution could be use a
#id_tablist .dijitTab
selector

2 - sub-TabContainer? is identified by its generation (4th, 5th, ...) so solution could be use a
.dijitTabPaneWrapper .dijitTabPaneWrapper .dijitTabPaneWrapper .dijitTabContainerTop-tabs .dijitTab
like selector (number of ".dijitTabPaneWrapper" depends on what generation we want to target)

Mixed cases can be addressed by mixed method
example: second sub-generations under a TabContainer? identified by id
#id .dijitTabPaneWrapper .dijitTabPaneWrapper .dijitTabContainerTop-tabs .dijitTab

[bill]

Yup, that's true, it is possible now for the developer to customize. Inner tabs have the class "dijitTabContainerTop-dijitTabContainerTop" so you could cue off of that, or do either of the two things you suggested.

I think I'm just looking for a simpler way to do it, or to work completely automatically, including having the CSS rules for the nested tabs built in to tundra/nihilo/soria.

[drschwartz]

RE nonken's comments: I don't know if you want to programmatically preclude repeatedly nested tabs (probably not) but such a design would NOT be best practice. It is possible to have nested graphical tabs but the best practice is to have content intervening between the first set of graphical tabs (and their text sub-tabs, if present) and the nested graphical tabs. In general, textual sub-tabs will NOT have their own set of text sub-tabs.

[bill]

I'll check in at least a preliminary version of this. Might need some UI love, and also there's the question of whether it should be controlled by a parameter (nested=true?) or try to work automatically.

[bill]

(In [16029]) Preliminary version of different LnF for nested tabs. May need some UI love.

Also, maybe want to control this by a nested=true parameter (similar to tabStrip=true parameter); currently it triggers automatically for any nested tabs.

There's a quirk in the underline on IE due to the img.dijitTabButtonSpacer; that node should be moved to before the text or after the icon, or preferably removed, if possible.

Also, if you have a ContentPane? than includes a TabContainer? via href, should set padding to 0 to make it look good.

Fixes #7628.

[bill]

(In [16051]) Add nested=true/false parameter to let designer control look of tabs. Refs #7628.

[bill]

(In [16075]) Test_Gui.html cleanup

• use nested=true for tabs in test_Gui.html
• remove TitlePane? as child of TabContainer?; it doesn't make sense.

Note that layoutType is used all over this file but that parameter doesn't exist.

Refs #7628.

[bill]

(In [16076]) More Test_Gui.html cleanup: need doLayout=false on ContentPane? w/the TitlePane? b/c the ContentPane? should not try to size the TitlePane?. Refs #7628.