richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

#1724 Added support for sub menus to check upward/downward independently of main menu, fix some styling on upward and left menu

pull/2300/head
jlukic 9 years ago
parent
58544f6ca3
commit
073f561ab2
4 changed files with 71 additions and 54 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      src/definitions/modules/dropdown.js
  2. 30
      src/definitions/modules/dropdown.less
  3. 5
      src/themes/default/modules/dropdown.overrides
  4. 14
      src/themes/default/modules/dropdown.variables

76
src/definitions/modules/dropdown.js
View File

@ -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

30
src/definitions/modules/dropdown.less
View File

@ -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;

5
src/themes/default/modules/dropdown.overrides
View File

@ -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"*/;

14
src/themes/default/modules/dropdown.variables
View File

@ -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;

Write Preview
Loading…
Cancel
Save