diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 67228608a..a5cc77eb8 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -58,24 +58,19 @@ ---------------*/ /* Text Color */ -.ui.menu .item, -.ui.menu .item > a:not(.button) { +.ui.menu .item { color: @menuTextColor; } -.ui.menu .item .item, -.ui.menu .item .item > a:not(.button) { +.ui.menu .item .item { color: @subMenuTextColor; } + /* Hover */ .ui.menu .item .menu a.item:hover, .ui.menu .item .menu .link.item:hover { color: @darkTextColor; } -/* Hover */ -.ui.menu .item .menu a.item:hover, -.ui.menu .item .menu .link.item:hover { - color: rgba(0, 0, 0, 0.85); -} + /* Active */ .ui.menu .active.item { color: @selectedTextColor; @@ -254,10 +249,7 @@ .ui.vertical.menu .header.item { background: @headerBackground; margin: 0em; - font-size: @headerFontSize; text-transform: @headerTextTransform; -} -.ui.vertical.menu .header.item { font-weight: @headerWeight; } @@ -291,37 +283,6 @@ margin: 0px !important; } -/* Dropdown Menu Item */ -.ui.menu .dropdown .menu .item { - width: 100%; - cursor: pointer; - color: @dropdownTextColor; -} - -/* Hover */ -.ui.menu .dropdown .menu .item:hover { - background: @hoverBackground; - color: @darkTextColor; -} - -/* Pressed */ -.ui.menu .dropdown .menu .item:active { - background: @downBackground; -} - -/* Active */ -.ui.menu .dropdown.item .menu .active.item { - box-shadow: none !important; -} - -/* Dropdown Menu Item Content */ -.ui.menu .dropdown .menu .item .icon { - float: none; - margin: 0em 0.75em 0em 0em; -} -.ui.menu .dropdown .menu .item:before { - display: none; -} /* Secondary Menu Dropdown */ .ui.secondary.menu > .menu > .active.dropdown.item { @@ -513,6 +474,7 @@ margin: @labelAndIconMargin; } + /*--- Border ---*/ .ui.vertical.menu .item:before { position: absolute; @@ -718,6 +680,12 @@ margin: 1px 0px 0px 1px; } +/* Coupling with accordion */ +.ui.accordion.menu .item .title > i.dropdown.icon { + float: @dropdownIconFloat; + margin-left: @dropdownIconDistance; +} + /*-------------- Pagination diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less index 5a117d53c..e4d76c782 100755 --- a/src/definitions/elements/icon.less +++ b/src/definitions/elements/icon.less @@ -83,6 +83,7 @@ i.icon { ---------------*/ i.icon.loading { + height: 1em; animation: icon-loading @loadingDuration linear infinite; } @keyframes icon-loading { diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less index de73c39b7..05366821a 100755 --- a/src/definitions/modules/accordion.less +++ b/src/definitions/modules/accordion.less @@ -60,6 +60,7 @@ height: @iconHeight; margin: @iconMargin; transition: @iconTransition; + vertical-align: @iconVerticalAlign; } diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index e52f0fd8c..2a554e1ad 100755 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -72,6 +72,7 @@ $.fn.dropdown = function(parameters) { module.bind.touchEvents(); } module.bind.mouseEvents(); + module.bind.keyboardEvents(); module.instantiate(); }, @@ -95,6 +96,15 @@ $.fn.dropdown = function(parameters) { }, bind: { + keyboardEvents: function() { + module.debug('Binding keyboard events'); + $module + .on('keydown' + eventNamespace, module.handleKeyboard) + ; + $module + .on('focus' + eventNamespace, module.show) + ; + }, touchEvents: function() { module.debug('Touch device detected binding touch events'); $module @@ -158,6 +168,69 @@ $.fn.dropdown = function(parameters) { } }, + handleKeyboard: function(event) { + var + $selectedItem = $item.filter('.' + className.selected), + pressedKey = event.which, + keys = { + enter : 13, + escape : 27, + upArrow : 38, + downArrow : 40 + }, + selectedClass = className.selected, + currentIndex = $item.index( $selectedItem ), + hasSelectedItem = ($selectedItem.size() > 0), + resultSize = $item.size(), + newIndex + ; + // close shortcuts + if(pressedKey == keys.escape) { + module.verbose('Escape key pressed, closing dropdown'); + module.hide(); + } + // result shortcuts + if(module.is.visible()) { + if(pressedKey == keys.enter && hasSelectedItem) { + module.verbose('Enter key pressed, choosing selected item'); + $.proxy(module.event.item.click, $item.filter('.' + selectedClass) )(event); + event.preventDefault(); + return false; + } + else if(pressedKey == keys.upArrow) { + module.verbose('Up key pressed, changing active item'); + newIndex = (currentIndex - 1 < 0) + ? currentIndex + : currentIndex - 1 + ; + $item + .removeClass(selectedClass) + .eq(newIndex) + .addClass(selectedClass) + ; + event.preventDefault(); + } + else if(pressedKey == keys.downArrow) { + module.verbose('Down key pressed, changing active item'); + newIndex = (currentIndex + 1 >= resultSize) + ? currentIndex + : currentIndex + 1 + ; + $item + .removeClass(selectedClass) + .eq(newIndex) + .addClass(selectedClass) + ; + event.preventDefault(); + } + } + else { + if(pressedKey == keys.enter) { + module.show(); + } + } + }, + event: { test: { toggle: function(event) { @@ -533,8 +606,8 @@ $.fn.dropdown = function(parameters) { }, animated: function($subMenu) { return ($subMenu) - ? $subMenu.is(':animated') || $subMenu.transition('is animating') - : $menu.is(':animated') || $menu.transition('is animating') + ? $subMenu.is(':animated') || $subMenu.transition && $subMenu.transition('is animating') + : $menu.is(':animated') || $menu.transition && $menu.transition('is animating') ; }, visible: function($subMenu) { @@ -955,6 +1028,7 @@ $.fn.dropdown.settings = { placeholder : 'default', disabled : 'disabled', visible : 'visible', + selected : 'selected', selection : 'selection' } diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 0faed30b6..0f58d0d5a 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -199,6 +199,10 @@ /* Matches selection dropdown height to input height */ border-top: 1px solid transparent; } +.ui.selection.dropdown.active { + transform: rotateZ(0deg); + z-index: 10; +} .ui.selection.dropdown select { display: none; } diff --git a/src/themes/packages/default/collections/menu.variables b/src/themes/packages/default/collections/menu.variables index d396c7155..c10e1423f 100755 --- a/src/themes/packages/default/collections/menu.variables +++ b/src/themes/packages/default/collections/menu.variables @@ -84,7 +84,6 @@ @headerBackground: rgba(0, 0, 0, 0.04); @headerWeight: bold; @headerTextTransform: normal; -@headerFontSize: 1rem; /*-------------- Couplings @@ -127,7 +126,11 @@ @dropdownBackground: #FFFFFF; @dropdownMenuOffset: 1px; @dropdownPointingDistance: 0.75em; + @dropdownTextColor: @textColor; +@dropdownTextColorHover: @darkTextColor; +@dropdownIconMargin: 0em 0em 0em 1em; + @dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor; @dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor; diff --git a/src/themes/packages/default/modules/accordion.variables b/src/themes/packages/default/modules/accordion.variables index afebe0180..a5f8d2587 100644 --- a/src/themes/packages/default/modules/accordion.variables +++ b/src/themes/packages/default/modules/accordion.variables @@ -21,6 +21,7 @@ transform 0.2s ease, opacity 0.2s ease ; +@iconVerticalAlign: top; /* Child Accordion */ @childAccordionMargin: 1em 0em 0em; diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index 3bb23aa30..b76f5c543 100644 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -20,6 +20,7 @@ /* Icon */ @dropdownIconMargin: 0em 0em 0em 1em; +/* Sub Menu Pointer Icon */ @dropdownSubMenuIconFloat: right; @dropdownSubMenuIconMargin: 0em 0em 0em 0.5em; @@ -74,7 +75,7 @@ @selectionBackground: @white; @selectionDisplay: inline-block; @selectionVerticalPadding: 0.65em; -@selectionHorizontalPadding: 1em; +@selectionHorizontalPadding: 1.1em; @selectionTextColor: @textColor; @selectionBoxShadow: 0px 0px 0px 1px @borderColor; @selectionBorderRadius: @borderRadius;