Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#14663 closed enhancement (fixed)

TabContainer: simplify button template

Reported by: bill Owned by: bill
Priority: undecided Milestone: 1.8
Component: Dijit Version: 1.7.1
Keywords: Cc:
Blocked By: Blocking:

Description

The TabButton template currently contains four wrapper divs. They were used historically four creating tabs with rounded or slanted borders. However, we aren't using diagonal corners in any of our themes, and with the advent of CSS rounded corners, all the extra divs aren't justified.

Simplify the button template, and fix the CSS of the themes to match.

Change History (4)

comment:1 Changed 8 years ago by bill

Milestone: tbd1.8
Owner: set to bill
Status: newassigned

comment:2 Changed 8 years ago by bill

Resolution: fixed
Status: assignedclosed

In [27642]:

Simplify template of TabButton, removing .dijitTabInner, .dijitTabContent, and the div inside of the .dijitTabContent. The border, padding and background all now go on .dijitTab, and the focus goes to the .tabLabel.

This simplification eliminates the need for a lot of workaround CSS, so the files are much smaller now, and in turn the theme is easier to customize.

Since each tab now just has a single background image, many of the images from soria and nihilo are no longer used, and have been removed. In addition, for soria, needed to modify the image for the selected tab on left and right TabContainers to contain the dark section near the content, and the dual-tone gradient for the remainder of the tab.

IE RTL quirks mode has problems with left/right tabs, but they weren't working before either.

Removed the _rectifyRtlTabList() code for IE7 due to the low usage of IE7, especially of left/right TabContainers in RTL mode on IE7. So, when IE7 displays left/right TabContainers in RTL mode, there's a gap between the tab labels and the tab content.

Fixes #14663 !strict.

comment:3 Changed 7 years ago by bill

In [29565]:

Need to measure tab button's border-box width or margin-box width, not its content-box width. The old code just happened to work before (more or less) because the button didn't have any padding on it's outer node. Fixes #15895, refs #14663 on 1.8/ branch !strict.

comment:4 Changed 7 years ago by bill

In [29566]:

Need to measure tab button's border-box width or margin-box width, not its content-box width. The old code just happened to work before (more or less) because the button didn't have any padding on it's outer node. Fixes #15895, refs #14663 on trunk/ !strict.

Note: See TracTickets for help on using tickets.