#10527 closed enhancement (fixed)
claro theme
Reported by: | bill | Owned by: | bill |
---|---|---|---|
Priority: | high | Milestone: | 1.5 |
Component: | Dijit | Version: | 1.4.0 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description (last modified by )
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.
Change History (142)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
(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.
comment:3 Changed 11 years ago by
(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.
comment:4 Changed 11 years ago by
comment:5 Changed 11 years ago by
comment:6 Changed 11 years ago by
comment:7 Changed 11 years ago by
(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.
comment:8 Changed 11 years ago by
comment:9 Changed 11 years ago by
comment:10 Changed 11 years ago by
comment:11 Changed 11 years ago by
comment:12 Changed 11 years ago by
(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.
comment:13 Changed 11 years ago by
comment:14 Changed 11 years ago by
comment:15 Changed 11 years ago by
(In [21193]) Rename "RichTextEditable?" to "dijitEditor". Refs #10527 !strict.
comment:16 Changed 11 years ago by
comment:17 Changed 11 years ago by
comment:18 Changed 11 years ago by
comment:19 Changed 11 years ago by
comment:21 Changed 11 years ago by
comment:22 Changed 11 years ago by
(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.
comment:23 Changed 11 years ago by
comment:24 Changed 11 years ago by
comment:26 Changed 11 years ago by
comment:27 Changed 11 years ago by
comment:28 Changed 11 years ago by
comment:29 Changed 11 years ago by
(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.
comment:30 Changed 11 years ago by
comment:31 Changed 11 years ago by
comment:32 Changed 11 years ago by
comment:33 Changed 11 years ago by
comment:34 Changed 11 years ago by
comment:35 Changed 11 years ago by
comment:36 Changed 11 years ago by
(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.
comment:37 Changed 11 years ago by
comment:38 Changed 11 years ago by
comment:39 Changed 11 years ago by
comment:40 Changed 11 years ago by
comment:41 follow-up: 47 Changed 11 years ago by
comment:43 Changed 11 years ago by
comment:45 Changed 11 years ago by
comment:46 Changed 11 years ago by
comment:47 Changed 11 years ago by
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.
comment:48 Changed 11 years ago by
(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.
comment:49 Changed 11 years ago by
comment:50 Changed 11 years ago by
comment:51 Changed 11 years ago by
comment:52 Changed 11 years ago by
comment:53 Changed 11 years ago by
comment:54 Changed 11 years ago by
comment:55 Changed 11 years ago by
comment:56 Changed 11 years ago by
comment:57 Changed 11 years ago by
comment:59 Changed 11 years ago by
comment:60 Changed 11 years ago by
(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.
comment:61 Changed 11 years ago by
comment:62 Changed 11 years ago by
(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.
comment:63 Changed 11 years ago by
comment:64 Changed 11 years ago by
comment:65 Changed 11 years ago by
comment:66 Changed 11 years ago by
comment:67 Changed 11 years ago by
comment:68 Changed 11 years ago by
comment:69 Changed 11 years ago by
comment:70 Changed 11 years ago by
comment:77 Changed 11 years ago by
comment:78 Changed 11 years ago by
comment:79 Changed 11 years ago by
comment:80 Changed 11 years ago by
comment:81 Changed 11 years ago by
comment:82 Changed 11 years ago by
Description: | modified (diff) |
---|---|
Summary: | lucid theme → claro theme |
comment:83 Changed 11 years ago by
comment:84 Changed 11 years ago by
comment:85 Changed 11 years ago by
comment:86 Changed 11 years ago by
comment:87 Changed 11 years ago by
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.
comment:88 Changed 11 years ago by
Rich text editor toolbar icons no longer appear in theme tester and various editor tests.
comment:90 Changed 11 years ago by
Tree leaf items have [-] collapse image, rather than parent/child connectors.
comment:91 Changed 11 years ago by
Scroll Left/Right? buttons on Sliding TabContainer? appear to be floating 2-3px above the container contents, leaving a gap.
comment:93 Changed 11 years ago by
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
comment:94 Changed 11 years ago by
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?
comment:95 Changed 11 years ago by
http://bugs.dojotoolkit.org/ticket/10959 tracks the ColorPicker? zoom bug on webkit
comment:96 Changed 11 years ago by
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.
comment:98 Changed 11 years ago by
comment:100 Changed 11 years ago by
comment:101 Changed 11 years ago by
comment:102 Changed 11 years ago by
comment:104 Changed 11 years ago by
comment:107 Changed 11 years ago by
comment:109 Changed 11 years ago by
comment:110 Changed 11 years ago by
comment:112 Changed 11 years ago by
comment:113 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:114 Changed 11 years ago by
comment:115 Changed 11 years ago by
(In [22000]) refs #10527: added ExpandoPane? claro theme support for now just use a tundra image due to lack of compatible images in claro
comment:117 Changed 11 years ago by
comment:118 Changed 11 years ago by
comment:119 Changed 11 years ago by
comment:120 Changed 11 years ago by
(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
(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.