From 073f561ab2a291faf3d2073c66be91dca0bd2fc8 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 11 May 2015 14:47:25 -0400 Subject: [PATCH] #1724 Added support for sub menus to check upward/downward independently of main menu, fix some styling on upward and left menu --- src/definitions/modules/dropdown.js | 76 +++++++++---------- src/definitions/modules/dropdown.less | 30 ++++++-- src/themes/default/modules/dropdown.overrides | 5 -- src/themes/default/modules/dropdown.variables | 14 ++-- 4 files changed, 71 insertions(+), 54 deletions(-) diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 301526fcc..050a619bf 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -345,14 +345,6 @@ $.fn.dropdown = function(parameters) { return true; } } - if(settings.keepOnScreen) { - if(module.is.onScreen()) { - module.remove.upward(); - } - else { - module.set.upward(); - } - } module.animate.show(function() { if( module.can.click() ) { module.bind.intent(); @@ -1252,9 +1244,9 @@ $.fn.dropdown = function(parameters) { : 0 ; }, - transition: function() { + transition: function($subMenu) { return (settings.transition == 'auto') - ? module.is.upward() + ? module.is.upward($subMenu) ? 'slide up' : 'slide down' : settings.transition @@ -1687,9 +1679,7 @@ $.fn.dropdown = function(parameters) { if($item && $menu.length > 0 && hasActive) { itemOffset = $item.position().top; - if(!$menu.hasClass(className.visible)) { - $menu.addClass(className.loading); - } + $menu.addClass(className.loading); menuScroll = $menu.scrollTop(); menuOffset = $menu.offset().top; itemOffset = $item.offset().top; @@ -1760,8 +1750,9 @@ $.fn.dropdown = function(parameters) { $nextValue.addClass(className.selected); } }, - upward: function() { - $module.addClass(className.upward); + upward: function($menu) { + var $element = $menu || $module; + $element.addClass(className.upward); }, value: function(value, text, $selected) { var @@ -2042,8 +2033,9 @@ $.fn.dropdown = function(parameters) { activeLabel: function() { $module.find(selector.label).removeClass(className.active); }, - upward: function() { - $module.removeClass(className.upward); + upward: function($menu) { + var $element = $menu || $module; + $element.removeClass(className.upward); }, visible: function() { $module.removeClass(className.visible); @@ -2258,22 +2250,20 @@ $.fn.dropdown = function(parameters) { hidden: function($subMenu) { return !module.is.visible($subMenu); }, - onScreen: function() { + onScreen: function($subMenu) { var - isVisible, - height + $currentMenu = $subMenu || $menu, + onScreen ; - if(!$menu.hasClass(className.visible)) { - $menu.addClass(className.loading); - } - if($.fn.visibility !== undefined) { - isVisible = $menu.visibility('bottom visible'); - } - else { - - } - $menu.removeClass(className.loading); - return isVisible; + $currentMenu.addClass(className.loading); + onScreen = ($.fn.visibility !== undefined) + ? $currentMenu.visibility('bottom visible') + : $('body').scrollTop() + $(window).height() >= $currentMenu.offset().top + $currentMenu.height() + ; + console.log(onScreen, $currentMenu); + module.debug('Checking if menu can fit on screen', onScreen, $menu); + $currentMenu.removeClass(className.loading); + return onScreen; }, inObject: function(needle, object) { var @@ -2317,8 +2307,9 @@ $.fn.dropdown = function(parameters) { userValue: function(value) { return ($.inArray(value, module.get.userValues()) !== -1); }, - upward: function() { - return ($module.hasClass(className.upward)); + upward: function($menu) { + var $element = $menu || $module; + return $element.hasClass(className.upward); }, visible: function($subMenu) { return ($subMenu) @@ -2348,16 +2339,25 @@ $.fn.dropdown = function(parameters) { module.hideOthers(); module.set.active(); }, - transition = module.get.transition() + transition ; callback = $.isFunction(callback) ? callback : function(){} ; - if(module.is.selection()) { + module.verbose('Doing menu show animation', $currentMenu); + if(settings.keepOnScreen) { + if(module.is.onScreen($subMenu)) { + module.remove.upward($subMenu); + } + else { + module.set.upward($subMenu); + } + } + transition = module.get.transition($subMenu); + if( module.is.selection() ) { module.set.scrollPosition(module.get.selectedItem(), true); } - module.verbose('Doing menu show animation', $currentMenu); if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) { if(transition == 'none') { start(); @@ -2399,7 +2399,7 @@ $.fn.dropdown = function(parameters) { module.focusSearch(); module.remove.active(); }, - transition = module.get.transition() + transition = module.get.transition($subMenu) ; callback = $.isFunction(callback) ? callback @@ -2652,7 +2652,7 @@ $.fn.dropdown.settings = { on : 'click', // what event should show menu action on item selection action : 'activate', // action on item selection (nothing, activate, select, combo, hide, function(){}) - keepOnScreen : true, + keepOnScreen : true, // Whether dropdown should check whether it is on screen before showing match : 'both', // what to match against with search selection (both, text, or label) fullTextSearch : false, // search anywhere in value diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 58f039dc6..1c57974d7 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -760,7 +760,9 @@ select.ui.dropdown { .ui.loading.dropdown > .text { transition: none; } -.ui.dropdown > .loading.menu { + +/* Used To Check Position */ +.ui.dropdown .loading.menu { display: block; visibility: hidden; z-index: @loadingZIndex; @@ -864,6 +866,7 @@ select.ui.dropdown { .ui.dropdown .menu .right.menu { left: 100% !important; right: auto !important; + border-radius: @subMenuBorderRadius !important; } /* Left Flyout Menu */ @@ -871,6 +874,7 @@ select.ui.dropdown { .ui.dropdown .menu .left.menu { left: auto !important; right: 100% !important; + border-radius: @leftSubMenuBorderRadius !important; } .ui.dropdown .item .left.dropdown.icon, @@ -895,6 +899,7 @@ select.ui.dropdown { Upward ---------------*/ +/* Upward Main Menu */ .ui.upward.dropdown > .menu { top: auto; bottom: 100%; @@ -902,6 +907,12 @@ select.ui.dropdown { border-radius: @upwardMenuBorderRadius; } +/* Upward Sub Menu */ +.ui.dropdown .upward.menu { + top: auto !important; + bottom: 0 !important; +} + /* Active Upward */ .ui.simple.upward.active.dropdown, .ui.simple.upward.dropdown:hover { @@ -915,19 +926,26 @@ select.ui.dropdown { .ui.upward.selection.dropdown .menu { border-top-width: @menuBorderWidth !important; border-bottom-width: 0px !important; + box-shadow: @upwardSelectionMenuBoxShadow; } .ui.upward.selection.dropdown:hover { box-shadow: @upwardSelectionHoverBoxShadow; } -.ui.upward.selection.visible.dropdown:hover { - box-shadow: @upwardSelectionVisibleHoverBoxShadow; -} -.ui.active.upward.selection.dropdown, -.ui.visible.upward.selection.dropdown { + +/* Active Upward */ +.ui.active.upward.selection.dropdown { border-radius: @upwardSelectionVisibleBorderRadius !important; } + +/* Visible Upward */ .ui.upward.selection.dropdown.visible { box-shadow: @upwardSelectionVisibleBoxShadow; + border-radius: @upwardSelectionVisibleBorderRadius !important; +} + +/* Visible Hover Upward */ +.ui.upward.selection.visible.dropdown:hover { + box-shadow: @upwardSelectionVisibleHoverBoxShadow; } .ui.upward.selection.visible.dropdown:hover .menu { box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow; diff --git a/src/themes/default/modules/dropdown.overrides b/src/themes/default/modules/dropdown.overrides index 40a1ba16a..729e201d6 100644 --- a/src/themes/default/modules/dropdown.overrides +++ b/src/themes/default/modules/dropdown.overrides @@ -41,11 +41,6 @@ content: "\f0d9"/*rtl:"\f0da"*/; } -/* Upward Dropdown */ -.ui.upward.dropdown > .dropdown.icon:before { - content: "\f0d8"; -} - /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before { content: "\f0da"/*rtl:"\f0d9"*/; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 715d0c449..2d07ad536 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -314,18 +314,22 @@ @scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems); /* Upward */ -@upwardMenuBoxShadow: 0px 0px 4px 0px @borderColor; +@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; +@upwardMenuBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); +@upwardSelectionMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); @upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em; @upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); -@upwardSelectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); -@upwardSelectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05); -@upwardSelectionVisibleHoverMenuBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); -@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; +@upwardSelectionVisibleBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); +@upwardSelectionVisibleHoverBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); +@upwardSelectionVisibleHoverMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); /* Flyout Direction */ @leftMenuDropdownIconFloat: left; @leftMenuDropdownIconMargin: @itemLineHeightOffset @itemElementDistance 0em 0em; +/* Left */ +@leftSubMenuBorderRadius: @borderRadius 0em 0em @borderRadius; + /* Simple */ @simpleTransitionDuration: @defaultDuration; @simpleTransition: opacity @simpleTransitionDuration @defaultEasing;