#10613 closed enhancement (fixed)
_CssStateMixin
Reported by: | bill | Owned by: | bill |
---|---|---|---|
Priority: | high | Milestone: | 1.5 |
Component: | Dijit | Version: | 1.4.0 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
Create new mixin for applying CSS classes to Widget root nodes and subnodes representing mouse state (hover and active), focus state, and other semantic states such as disabled, checked, selected.
Will split off the code from _FormWidget, but change the way that subnodes are handled, applying a class to the subnode itself rather than the widget DOMNode.
This code is needed for lucid as they have lots of hover/active effects on widgets and subnodes within widgets.
It does a few tricky things that per-widget code might not remember to do:
- mouse-up detection needs to be on <body>, not on the specified node, to allow for mouse-down on a node, mouse-move off the node, and then a mouse-up event
- hover and active effects should not be applied if the widget is disabled (or in read-only mode)
Change History (22)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
(In [21117]) Initial conversion of form widgets to use _CssStateMixin. Changes are mostly transparent except for subnodes within widgets, like the up/down arrows of a Spinner, where the active/hover state is now being indicated on the arrow node rather than the widget root node.
Refs #10613 !strict.
comment:3 Changed 11 years ago by
comment:4 Changed 11 years ago by
comment:5 Changed 11 years ago by
comment:6 Changed 11 years ago by
(In [21144]) Convert TabContainer (specifically the tab buttons and the left/right scroll buttons) to use _CssStateMixin. Also fixed some CSS names that didn't contain "dijit":
.dijitTab .closeButton --> .dijitTabCloseButton .dijitTab .closeButton-hover --> .dijitTabCloseButtonHover (close button for individual tab) .dijitTabBtnDisabled --> .dijitTabDisabled (left and right scroll buttons on tab strip) .dijitTab .closeImage --> .dijitTabCloseIcon (icon inside of close button) .dijitTab .closeText --> .dijitTabCloseText (text inside of close button, for a11y)
Refs #10613 !strict.
comment:7 Changed 11 years ago by
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 [21299]) Move onclick --> focus() code from _CssStateMixin back to _FormWidget.
This code was added in to _FormWidget in [11894] and [13893] so that clicking a non-focusable part of a form widget (ValidationTextBox validation icon, or the spinner up/down arrows) would cause the form widget to focus. But, it's inappropriate for bigger widgets, in particular Editor.
Actually I was nervous that it wouldn't even work correctly for ComboButton (which has two focus points), but it seems to.
comment:13 Changed 11 years ago by
comment:14 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:15 Changed 11 years ago by
comment:16 Changed 11 years ago by
(In [21387]) Put onMouseUp --> focus() handling in FormWidget not FormValueWidget, as it was in the 1.4 release.
Otherwise on hrome clicking a button doesn't give it focus, which leads to problems restoring focus when closing a Dialog. (Dialog_menu.html is actually failing because focus is restored to the DateTextBox inside of the dialog, Refs #5434, #6888, #10613. Fixes #10708 !strict.
comment:17 Changed 11 years ago by
(In [21767]) Ctrl-click (an effective right-click on the mac) shouldn't focus a TabButton, or any button. In the case of the TabButton, this behavior was causing the TabButton's close menu to appear on mouse down but then disappear on mouse up. (And thus causing an error in the regression test.) Refs #10613 !strict.
comment:18 Changed 11 years ago by
comment:19 Changed 11 years ago by
(In [22002]) Fix tabbing into TabContainer?, left/right/mouse buttons should not be navigable. [21144] exposed this bug, so check in refs #10613.
comment:20 Changed 11 years ago by
comment:21 Changed 11 years ago by
(In [22187]) Fix a number of TabContainer issues related to close icon:
- no [x] text appears in IE7 or IE quirks high-contrast RTL mode (fixes #11153)
- icon appears on left rather than right in RTL mode
- hover effect broken in tundra, soria, nihilo (regression from [21144], refs #10613)
- height problems mixing closable and unclosable tabs on webkit (fixes #11155, !strict):
- border under unselected tabs also appears under selected tab
- closable tabs are 1px too tall, obscuring that same border
- hovering close button in high-contrast mode causes tab to expand horizontally
The main change was to make the close icon a sibling of the label, rather than nested inside of the closeButton span. This avoids browser bugs on webkit and IE. Also stopped using an <img> tag to display the icon since that has issues with the title/alt attributes on IE6/7.
(In [21116]) New mixin for all widgets that set CSS classes based on thier state, both hover/active/focused state, and semantic state such as disabled, checked, etc.
Code taken from _FormWidget.js, but with some changes:
Refs #10613 !strict.