claro theme

[bill]

Meta ticket to mark the checkins for the claro theme.

There will also be individual tickets for the functional enhancements to some of the individual widgets like ColorPalette, but can use this ticket for all style changes.

[bill]

(In [21062]) Add border around InlineEditBox? in display mode when it's hovered over, except on IE6 due to screen jumping problems. I just made the default border black; individual themes can override it. Code from Wen Dong (IBM, CCLA).

Fixes #6451, refs #10527.

[bill]

(In [21083]) Use keyline (border) on InlineEditBox hover for IE6 too, for accessibility reasons, despite the minor screen jump. Refs #6451, #10527.

Could use border:white (or whatever the page background color is) in non-hover mode, to prevent the screen jump, but decided to keep it simple as it's just an IE6 issue.

[bill]

(In [21102]) Lucid style changes for ColorPalette: each color swatch now has a white inner border and then a gray (black when hovered) outer border. Previously there was just one gray/black border, which made the hover effect for dark colors imperceptible.

Modifed ColorPalette image files (7x11.png, 4x5.png) to remove border, and instead do border via individual cell <img> nodes. Also shrank each color swatch by 1px on each side to make room for white border.

Made modification across all themes since the clearer hover effect seems like an improvement rather than just a style change. Lucid still needs some theme specific styling though, specifically the palette background color and border colors for each cell.

Refs #10527.

[bill]

(In [21138]) Use _CssStateMixin to get dijitMenuActive for menu items in addition to dijitMenuHover. The former is needed by lucid. Refs #10613, #10527 !strict.

[bill]

(In [21139]) Hover/active/focus CSS classes for Slider.domNode, slider handle, and increment/decrement arrows. Needed by lucid. Refs #10527 !strict.

[bill]

(In [21147]) Disabled CSS class is handled by _CssStateMixin, we don't need an addClass() call in Menu. Refs #10613, #10527 !strict.

[bill]

(In [21162]) AccordionContainer infrastructure changes to support lucid theme. Lucid needs a wrapper <div> around each accordion pane, so this checkin basically reinstates the AccordionPane widget of old, but as a (hopefully) completely hidden widget.

Unit tests (including some new ones) are all passing, but there might be issues with child.getParent() returning the hidden AccordionInnerContainer (aka AccordionPane) widget, or with sizing of nested layout widgets.

Also, this revision maintains AccordionButton as a separate widget, although that's only for backwards compatibility reasons; maybe it's better to just have a single AccordionInnerContainer widget similar to TitlePane.

The original lucid code didn't have a AccordionInnerContainer widget, but rather just created a wrapper <div>. I promoted it to a helper widget in order to get automatic hover/selected class setting via _CssStateMixin.

Refs #10527 !strict.

[bill]

(In [21163]) Snapshot of lucid CSS directory tree. Doesn't work (completely) yet since it's missing accompanying changes to templates and JS code, plus it needs the updates of CSS class names due to _CssStateMixin.

Refs #10527 !strict.

[bill]

(In [21164]) CSS class name changes related to _CssStateMixin (-hover --> Hover, -selected --> Selected)

Refs #10527 !strict.

[bill]

(In [21172]) Applying modified version of fix from lucid branch for hover effect on calendar day nodes. Fixes #9820, refs #10527 !strict.

[bill]

(In [21177]) Fix size calc for margins, thanks Xiang, refs #10527 !strict.

[bill]

(In [21184]) ComboButton: lucid needs hover/active CSS change on <td> containing the <button>, rather than just the dijitButtonContentsHover class on the <button> itself. Thanks Wei, refs #10527 !strict.

It's a little confusing because both the left and right part of a ComboButton have the dijitButtonNode class (since they are both buttons), but only the left part gets dijitButtonHover, whereas the right part gets dijitDownArrowButtonHover. Maybe they should both have distinct names, or both have the same name, but I'll leave it this way for now.

[bill]

(In [21185]) Lucid theme updates to match _CssStateMixin, and some other miscellaneous fixes. Thanks Wei, refs #10527.

[bill]

(In [21192]) Lucid editor updates (adding classes to some nodes), and conversion to use _CssStateMixin. Refs #10527 !strict.

[bill]

(In [21193]) Rename "RichTextEditable?" to "dijitEditor". Refs #10527 !strict.

[bill]

(In [21194]) Put all editor rules into Editor.css. Refs #10527 !strict.

[bill]

(In [21241]) Remove border-div around the editor; the editor supplies it's own border. Refs #10527.

[bill]

(In [21242]) Changes for Calendar to use _CssStateMixin. There are still template changes though (not checked into trunk yet). Refs #10527 !strict.

[bill]

(In [21243]) Allow greater visibility of ProgressBar text in high-contrast mode. (Rule was previously in lucid/, but moving to dijit.css.) Refs #10527.

[bill]

(In [21244]) Remove unused InlineEditBox rules. Refs #10527.

[bill]

(In [21245]) Simplify selectors. AFAICT there's no need for special selectors for IE6, or to differentiate between a focused tab and a checked tab (because focusing a tab selects it). Still needs work on hover styling of left/right scroll buttons. Refs #10527.

[bill]

(In [21246]) Simplify CSS for left/right scroll buttons and menu button, particularly to not use multiple selectors on one node, which doesn't work on IE6. Todo in the future: rename tabStripButton to something like dijitTabStripButton, and probably remove the dijitTab baseClass from that widget. Refs #10527 !strict.

[bill]

(In [21256]) Apply "dijitTextBox" additional base class to TextBox based widgets: ValidationTextBox, NumberTextBox, CurrencyTextBox, and Spinner. Might apply it to Textarea/SimpleTextArea too in the future.

Refs #10527 !strict.

[bill]

(In [21257]) Lucid version of mail demo, currently for testing purposes (ie, it's doesn't look right yet). Refs #10527 !strict.

[bill]

(In [21261]) Just removing extra newline, refs #10527 !strict.

[bill]

(In [21262]) Prevent style change on mouse down style change on selected accordion pane. Refs #10527.

[bill]

(In [21263]) Copying BorderContainer changes from lucid branch. Refs #10527.

[bill]

(In [21264]) Support for Dialog action bar (gray bar at bottom of dialog holding buttons). Refs #10527.

[bill]

(In [21266]) CSS drop shadows for widgets that popup:

• Add CSS drop shadow on dijitPopup wrapper node, for widgets displayed via dijit.popup(), except for TooltipDialog (since it's not rectangular). Modified dijit.popup so wrapper node so it gets a class like dijitTooltipDialogPopup (depending on the widget it contains).
• Add CSS drop shadow for Dialog and Tooltip/TooltipDialog
• Remove lucid Dialog template change; it doesn't seem to be needed after all.

Refs #10527 !strict.

[bill]

(In [21268]) In progress work on Calendar from lucid branch, working except for padding on IE6. Refs #10527.

[bill]

(In [21269]) Remove custom styling on menu sidebar and the menus that it pops up. Refs #10527.

[bill]

(In [21270]) Remove tree grid lines since the hovered and selected style obscures the vertical lines. Refs #10527.

[bill]

(In [21271]) Remove unneeded rule since I just removed the grid lines, refs #10527.

[bill]

(In [21281]) Select CSS, still in progress (some issues on IE), refs #10527.

[bill]

(In [21284]) Fix tear-down problem where _Container.removeChild(child) tries to do a child.domNode.parentNode.removeChild(child), where in this case parentNode is the wrapper AccordionPane widget. Don't destroy wrapper widget until after _Container.removeChild() runs. Refs #10527 !strict.

[bill]

(In [21286]) Simplify CSS for TimePicker?, making it work better on IE6 and removing the need for !important rules. Main change is to stop using "transparent" for a border color since IE6 doesn't support that. Refs #10527.

[bill]

(In [21287]) Remove some !important rules that don't seem to be necessary. Should avoid !important whenever possible as it makes it harder for apps to override the theme. Refs #10527.

[Jared Jurkiewicz]

(In [21290]) Fixing test case breakage caused by removal of editor instance used in a test. refs #10527

[bill]

(In [21301]) Avoid unnecessary contentBox() which apparently avoids strange sizing bug on IE, fixes #10707, refs #10527 !strict.

[bill]

(In [21302]) Simplification, avoiding transparent borders and therefore avoiding IE specific rules. Refs #10527.

[bill]

(In [21313]) Use <div> rather than deprecated <textarea> tag for Editor markup, so that hover effect works. Refs #10527.

[bill]

(In [21314]) add missing imports, refs #10527.

[bill]

(In [21315]) Simplification of .foo.bar type selectors that don't work on IE6. Refs #10527.

[bill]

(In [21317]) Removing commented out rules, refs #10527.

[bill]

(In [21319]) Move TitlePane a11y rules to dijit.css and make a few other simplifications. Refs #10527.

[bill]

(In [21321]) Move TimePicker a11y rules to dijit.css, and simplify them. Refs #10527.

[davidmark]

Replying to bill:

(In [21313]) Use <div> rather than deprecated <textarea> tag for Editor markup, so that hover effect works. Refs #10527.

Deprecated TEXTAREA? Perhaps you are referring to HTML5? Most browsers in use today don't do anything with HTML5 (but all of them know what to do with a TEXTAREA).

The static content for an editor enhancement is a TEXTAREA element. Anything else is a serious accessibility issue.

[bill]

(In [21325]) Remove a11y rules for setting a gray background-color on half of the Slider groove. AFAICT, coloring the groove isn't required for a11y support, and the background-color setting has no effect in high contrast mode anyway, because in high-contrast mode backgrounds are disabled. Refs #10527.

[bill]

(In [21327]) Fixes for lucid Select menu, and also moving CSS to hide Menu's icon column into dijit.css. That CSS is needed for all themes, since Select doesn't support an icon, except by manually embedding an <img> tag. Refs #10527.

[bill]

(In [21328]) float:right is already in dijit.css, not needed here. Refs #10527.

[bill]

(In [21329]) Need !important on a11y Checkbox width/height setting so it overrides the lucid width/height setting. Refs #10527.

[bill]

(In [21330]) Fixes for disabled Buttons and RTL ComboButton's, refs #10527.

[bill]

(In [21331]) Fix border position on error icon for ValidationTextBox in RTL mode. Refs #10527.

[bill]

(In [21334]) Stop border color change on hover of focused Textbox. Refs #10527.

[bill]

(In [21341]) Remove a11y rules, the width/height should be auto (and it is auto), as set by dijit.css. Refs #10527.

[bill]

(In [21342]) None of this CSS is necessary and it actually breaks ColorPalette. Removing it until we get an official lucid version that works. Refs #10527.

[bill]

(In [21350]) Fix borders of BorderContainer panes: put a border on top level DOMNode of pane widgets, except for TabContainer and AccordionContainer, both of which implement their border not on their top level domNode but on their child nodes. Refs #10527.

[bill]

(In [21357]) Get RTL tabs working in lucid, refs #10527.

[bill]

(In [21394]) Test file updates to match template changes for ScrollingTabControllerButton widget. Refs #10527.

[bill]

(In [21395]) Test file updates to match template changes for ScrollingTabControllerButton widget. Refs #10527.

Also, selecting a pane from the menu no longer focuses on the tab label. I think this is OK since keyboard users will never use the menu anyway, but I needed to remove menu --> tab label focus test. Refs #10727.

[bill]

(In [21426]) Fix IE AccordionContainer rendering bugs exposed by changes in [21162], refs #10527.

[bill]

(In [21427]) AccordionContainer update from Jason, in particular separating each pane with a small margin, unlike the other themes where the panes abut each other. I'm suspicious there's an off-by-one pixel problem, where an AccordionContainer inside another layout widget is 1px too short, but if that bug exists it's not really noticeable to me.

Refs #10527.

[bill]

(In [21428]) TabContainer styling update from Jason. Refs #10527.

[bill]

(In [21429]) TabContainer styling update from Jason. Refs #10527.

[bill]

(In [21430]) Fix width of border between validation icon and <input> in RTL mode. Refs #10527.

[bill]

(In [21497]) Various lucid layout widget fixes, including shortening of selectors. Refs #10527 !strict.

[bill]

(In [21498]) test_TabContainer.html needs more time to load CSS (when theme=... specified) or else the tabs render wrong on chrome. Refs #10527.

[bill]

(In [21502]) Handle when DropDownButton expands ColorPalette past it's natural width, in RTL mode. Refs #10527.

[bill]

(In [21562]) Cleanup of lucid layout/ themes, including sprites for icons and gradient backgrounds, and removal of unused images. Refs #10527

[bill]

(In [21563]) Cleanup of layout/ CSS (no style changes, just shortening files, consolidating common rules, removing !important clauses, etc.) Refs #10527.

[bill]

(In [21567]) Progress bar animation. Refs #10527.

[bill]

(In [21584]) Calendar update to use sprites. Refs #10527.

[bill]

(In [21585]) Calendar update to use sprites. Refs #10527.

[bill]

(In [21586]) Button update to use sprites, etc. Refs #10527.

[bill]

(In [21587]) remove unused images, refs #10527

[bill]

(In [21588]) fixing typo, refs #10527

[bill]

(In [21606]) latest changes from lucid branch, including removal of browser specific rules as well as fixing style for disabled dates, refs #10527, #10850.

[bill]

(In [21634]) Menu template changes needed to support claro (nee lucid) theme, refs #10527. Other themes are unaffected.

[bill]

(In [21643]) Use _CssStateMixin for ComboBox? menu to get hover etc. indication. Refs #10527 !strict.

[bill]

(In [21670]) Icon changes from claro (nee lucid) theme work, refs #10527.

[bill]

(In [21682]) Use separate class names for up/down arrow so that hover effect works on IE6 (which doesn't support .foo.bar type selectors), refs #10527 !strict.

[bill]

(In [21747]) Rename lucid to claro, and copy over latest files, refs #10527.

[bill]

(In [21749]) More rename of lucid to claro, refs #10527.

Note that many of the dojox/ projects are referencing old image files in lucid that have since been replaced by sprites, so they need to be updated.

[bill]

(In [21751]) make focus on splitters in mondrian example on webkit more visible, trying to avoid getting bug reports on it. refs #10527.

[Jared Jurkiewicz]

(In [21752]) Fixing missing images due to lucid->claro rename. refs #10527

[Chris Mitchell]

ColorPicker? boxes don't scale properly with browser zoom. Run theme tester, select Color Picker pane on left side. Zoom in/out. Seen on webkit browsers.

[Chris Mitchell]

Rich text editor toolbar icons no longer appear in theme tester and various editor tests.

[Chris Mitchell]

No thumb image for vert slider in theme tester.

[Chris Mitchell]

Tree leaf items have [-] collapse image, rather than parent/child connectors.

[Chris Mitchell]

Scroll Left/Right? buttons on Sliding TabContainer? appear to be floating 2-3px above the container contents, leaving a gap.

[bill]

(In [21756]) fix case sensitivity problem, refs #10527

[bill]

Chris, thanks for the reports. Please file separate tickets for problems though as any comments in here are likely to be lost.

Specific notes:

• [21756] fixes the problem with editor icons
• the thumb for the vertical slider is visible, it's just very faint until you hover over it, but feel free to file a separate ticket asking for more contrast
• please file a ticket for the ColorPicker problem. not sure if we can fix it though, looks like a bug in webkit's zoom feature
• I can't reproduce that TabContainer problem, but please file a ticket w/details
• Tree problem noted

[Chris Mitchell]

with the latest updates, only the Tree and ColorPicker? problem remains. The thumb on vert slider now appears just fine, as well as the editor icons. I'[ll open a separate ticket for the ColorPicker?. The theme is really looking nice! Will the default theme for the theme tester be changed to claro?

[Chris Mitchell]

​http://bugs.dojotoolkit.org/ticket/10959 tracks the ColorPicker? zoom bug on webkit

[bill]

Thanks. I'll change the default theme for themeTester.html and the test files too I think. but as per a dojo-contributors meeting from a month ago I agreed to wait to change test files until "right before the release", so that people are likely catch any tundra regressions.

[bill]

(In [21759]) add claro to themeTester.html, refs #10527

[bill]

(In [21806]) Fix regression from [21642] where last accordion button wasn't completely visible, refs #10527.

[bill]

(In [21831]) various TabContainer fixes, refs #10527

[bill]

(In [21832]) fix so no [-] icon shows up next to leaf nodes, refs #10527

[bill]

(In [21833]) implement loading image and error image for ContentPane, refs #10527.

[bill]

(In [21834]) rendering problems for long labels on vertical slider, refs #10527.

[bill]

(In [21835]) tweak ToggleButton padding, refs #10527.

[bill]

(In [21847]) Fix display of text in ComboBox in high contrast mode, on IE6, and adjust the left text alignment in input box and drop down menu. Refs #10527.

[bill]

(In [21848]) Updated images. Refs #10527.

[bill]

(In [21852]) openOnClick=true for Tree, refs #10527.

[bill]

(In [21853]) point all themes to master copy of editor icons in dijit/icons, refs #10527.

[bill]

(In [21854]) various claro fixes, refs #10527

[bill]

(In [21860]) fix for Select border on IE8, plus updated images, refs #10527

[bill]

(In [21879]) Claro grid CSS, and refactoring of all the CSS files to be more sane.

Remaining issue: use increased padding rather than transparent border, for IE6's benefit. This will require some grid JS changes to get alignment correct, as it does manual calculations.

Refs #10527

[bill]

(In [21886]) fixed width of columns in test file, refs #10527

[bill]

(In [21893]) Proper fix for problem where Select's bottom and right borders weren't visible on IE8. Since there are borders on both the <td> (white border) and the <table> (blue border), need to set border-collapse: separate. Refs #10527, #11008.

[bill]

(In [21915]) Lots of claro updates, including DnD avatar support. There are still some open issues, like the sizing test failures, but this checkin at least gets the final piece implemented (the DnD avatars), so I'm going to mark the claro ticket as closed. Fixes #10527, #10956.

[bill]

(In [21999]) remove unused file and unneeded !important, refs #10527.

[liucougar]

(In [22000]) refs #10527: added ExpandoPane? claro theme support for now just use a tundra image due to lack of compatible images in claro

[bill]

(In [22003]) claro updates, refs #10527

[bill]

(In [22025]) Don't set rounded corners or box-shadow on dijitButtonNode as it affects the arrows on ComboBox and Spinner. Just set it for the actual Button widgets. Refs #10527.

[bill]

(In [22026]) Don't set padding on dijitButtonNode as it affects the arrows on ComboBox and Spinner. Just set it for the actual Button widgets. Refs #10527.

[bill]

(In [22027]) Seems that the background and border settings for dijitButtonNode are only useful for the actual Button widgets. Refs #10527.

[bill]

(In [22043]) Changes for easier testing of themes:

• change ComboBox? --> FilteringSelect, to be able to test display of validation icon
• added a few placeHolders (hint strings), specifically to DateTextBox and FilteringSelect
• add dialog with action bar (only currently working for Claro)
• add dialog with loading animation (that happens every time the dialog is opened)
• added "Dialogs" MenuBar item to make it easier to display Dialogs

Refs #10527, #3286, #11034.

[bill]

(In [22099]) Use commonIcons, and fix weird icon in File menu. Refs #10527.

[liucougar]

(In [22119]) refs #10527: typo in image file name

[bill]

(In [22134]) fix for button border color, refs #10527

[bill]

(In [22135]) Avoid problem were multiple MenuItems in the Dialog Menu get selected state, because Dialog tries to restore focus to a closed Menu. Refs #10527

[bill]

(In [22159]) Make selectors more consistent, refs #10527.

[bill]

(In [22189]) enhanced grid updates, refs #10527.

[bill]

(In [22197]) fix background behind connector on IE6, refs #10527

[bill]

(In [22238]) doc updates, refs #10527

[bill]

(In [22247]) Test file for claro grid, plus some CSS updates, refs #10527.

[bill]

(In [22279]) patch from Xiang to fix toolbar jiggle on IE8 when hovering over ComboButton in test_Toolbar.html?dir=rtl, thanks, refs #10527

[bill]

(In [22285]) fix so bottom border of MenuBar shows up correctly in IE7 in high-contrast mode, refs #10527

[bill]

(In [22286]) tweak code to avoid double border between Menu and parent MenuBar/ComboBox, refs #10527

[bill]

(In [22294]) RTL versions of common icons (mostly the same, but a few are flipped, like the tree folder icons), refs #10527

[Douglas Hays]

(In [22297]) References #10527 [22286]. The menu is still 1px offscreen causing the _autoComplete_mouse.html test to file. Adjust isVisible method to allow the border to be offscreen as long as the content is visible.

[bill]

(In [22367]) Fix for IE7 where widening doesn't work properly, refs #10527.

[bill]

(In [22368]) updates to make width expansion work on IE in RTL mode, refs #10527

[bill]

(In [22369]) a11y fix for colorpalette so that hover state is visible, refs #10527

[bill]

(In [22443]) By default, page background is white w/no image. No reason to set it explicitly in claro as that will only interfere with user custom settings. Also, it was interfering with the background-image setting in the dijitTests.css. Refs #10527.

[bill]

(In [22477]) make disabled menu match disabled button more closely, refs #10527

[Adam Peller]

(In [23372]) repair artwork. Refs #10527

[bill]

(In [23872]) fix value passed to FilteringSelect, refs #10527 ([22043]).

[Adam Peller]

In [26930]:

Mondrian example was missing 'center' region. refs #10527