diff --git a/server/documents/elements/button.html.eco b/server/documents/elements/button.html.eco index e1a9c5b9d..018d734b2 100755 --- a/server/documents/elements/button.html.eco +++ b/server/documents/elements/button.html.eco @@ -267,7 +267,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Sizes

-

A button can have different sizes:

+

A button can have different sizes

Mini
@@ -296,7 +296,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Colors

-

A button can have different colors:

+

A button can have different colors

Black
Yellow
Green
diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index 224495515..ffa58547e 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -58,64 +58,26 @@ themes : ['Default']
Male
Female
-
Unknown
+
+
Converting Select Elements
+

You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder

+
+
+ +

Search Selection

@@ -179,6 +141,76 @@ themes : ['Default']
+
+ +
+ +
+
diff --git a/server/files/javascript/dropdown.js b/server/files/javascript/dropdown.js index c2930ce97..d67fe7325 100755 --- a/server/files/javascript/dropdown.js +++ b/server/files/javascript/dropdown.js @@ -8,7 +8,7 @@ semantic.dropdown.ready = function() { $examples = $('.example'), $hoverDropdown = $examples.filter('.hover').find('.ui.dropdown'), $buttonDropdown = $examples.filter('.button.example').find('.ui.dropdown'), - $dropdown = $examples.filter('.dropdown').find('.ui.dropdown:not(.simple)'), + $dropdown = $examples.filter('.dropdown').find('> .ui.dropdown:not(.simple)'), $transition = $examples.filter('.transition').find('.ui.dropdown'), $transitionButton = $examples.filter('.transition').find('.ui.button').first(), // alias diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 048adc55e..c3da37f17 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -173,6 +173,9 @@ a:hover { #example .code .active.ui.modal { display: none !important; } +#example .existing.code { + display: none; +} #example #menu .item .item { font-size: 0.875rem; diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 3889c78b5..50d15c8a3 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -1100,7 +1100,7 @@ .ui.basic.black.buttons .button:hover, .ui.basic.black.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important; - color: @blackHover; + color: @blackHover !important; } .ui.basic.black.buttons .button:active, .ui.basic.black.button:active { @@ -1179,7 +1179,7 @@ .ui.basic.blue.buttons .button:hover, .ui.basic.blue.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important; - color: @blueHover; + color: @blueHover !important; } .ui.basic.blue.buttons .button:active, .ui.basic.blue.button:active { @@ -1256,7 +1256,7 @@ .ui.basic.green.buttons .button:hover, .ui.basic.green.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important; - color: @greenHover; + color: @greenHover !important; } .ui.basic.green.buttons .button:active, .ui.basic.green.button:active { @@ -1332,7 +1332,7 @@ .ui.basic.orange.buttons .button:hover, .ui.basic.orange.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important; - color: @orangeHover; + color: @orangeHover !important; } .ui.basic.orange.buttons .button:active, .ui.basic.orange.button:active { @@ -1408,7 +1408,7 @@ .ui.basic.pink.buttons .button:hover, .ui.basic.pink.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important; - color: @pinkHover; + color: @pinkHover !important; } .ui.basic.pink.buttons .button:active, .ui.basic.pink.button:active { @@ -1484,7 +1484,7 @@ .ui.basic.purple.buttons .button:hover, .ui.basic.purple.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important; - color: @purpleHover; + color: @purpleHover !important; } .ui.basic.purple.buttons .button:active, .ui.basic.purple.button:active { @@ -1560,7 +1560,7 @@ .ui.basic.red.buttons .button:hover, .ui.basic.red.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important; - color: @redHover; + color: @redHover !important; } .ui.basic.red.buttons .button:active, .ui.basic.red.button:active { @@ -1637,7 +1637,7 @@ .ui.basic.teal.buttons .button:hover, .ui.basic.teal.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important; - color: @tealHover; + color: @tealHover !important; } .ui.basic.teal.buttons .button:active, .ui.basic.teal.button:active { @@ -1714,7 +1714,7 @@ .ui.basic.yellow.buttons .button:hover, .ui.basic.yellow.button:hover { box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important; - color: @yellowHover; + color: @yellowHover !important; } .ui.basic.yellow.buttons .button:active, .ui.basic.yellow.button:active { diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 08347c98b..8a1842790 100755 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -67,6 +67,7 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.debug('Initializing dropdown', settings); + module.setup.layout(); module.save.defaults(); module.set.selected(); @@ -74,7 +75,6 @@ $.fn.dropdown = function(parameters) { if(hasTouch) { module.bind.touchEvents(); } - module.setup.layout(); module.bind.mouseEvents(); module.bind.keyboardEvents(); @@ -103,18 +103,8 @@ $.fn.dropdown = function(parameters) { setup: { layout: function() { - var - html - ; if( $module.is('select') ) { - module.debug('Dropdown initialized on a select, generating html'); - $module - .hide() - ; - $('
') - .addClass( $module.attr('class') ) - ; - $menu = $(settings.templates.select( module.get.selectValues() )); + module.setup.select(); } if( module.is.search() && !module.is.searchable() ) { $search = $('') @@ -128,6 +118,9 @@ $.fn.dropdown = function(parameters) { .val('') .attr('tabindex', 0) ; + $menu + .attr('tabindex', -1) + ; } else { module.debug('Simple selection dropdown initialized'); @@ -135,11 +128,38 @@ $.fn.dropdown = function(parameters) { $module .attr('tabindex', 0) ; + $menu + .attr('tabindex', -1) + ; } } + }, + select: function() { + module.debug('Dropdown initialized on a select, generating html'); + // redefine module as wrapped element + $input = $module; + $module = $('
') + .attr('class', $input.attr('class') ) + .addClass(className.selection) + .html( settings.templates.select(module.get.selectValues())) + .insertBefore($input) + ; + $input + .removeAttr('class') + .prependTo($module) + ; + module.refresh(); } }, + refresh: function() { + $item = $module.find(selector.item); + $text = $module.find(selector.text); + $search = $module.find(selector.search); + $input = $module.find(selector.input); + $menu = $module.children(selector.menu); + }, + bind: { keyboardEvents: function() { module.debug('Binding keyboard events'); @@ -321,9 +341,15 @@ $.fn.dropdown = function(parameters) { $nextItem, newIndex ; + // default to activated choice if no selection present + if(!hasSelectedItem) { + $selectedItem = $item.filter('.' + className.active).eq(0); + hasSelectedItem = ($selectedItem.size() > 0); + } // close shortcuts if(pressedKey == keys.escape) { module.verbose('Escape key pressed, closing dropdown'); + $search.blur(); module.hide(); } // result shortcuts @@ -385,12 +411,12 @@ $.fn.dropdown = function(parameters) { }, test: { toggle: function(event) { - if( module.determine.inMenu(event, module.toggle) ) { + if( module.determine.eventInMenu(event, module.toggle) ) { event.preventDefault(); } }, touch: function(event) { - module.determine.inMenu(event, function() { + module.determine.eventInMenu(event, function() { if(event.type == 'touchstart') { module.timer = setTimeout(module.hide, settings.delay.touch); } @@ -401,7 +427,7 @@ $.fn.dropdown = function(parameters) { event.stopPropagation(); }, hide: function(event) { - module.determine.inModule(event, module.hide); + module.determine.eventInModule(event, module.hide); } }, @@ -487,7 +513,7 @@ $.fn.dropdown = function(parameters) { module.error(error.action, settings.action); } }, - inModule: function(event, callback) { + eventInModule: function(event, callback) { callback = callback || function(){}; if( $(event.target).closest($module).size() === 0 ) { module.verbose('Triggering event', callback); @@ -499,7 +525,7 @@ $.fn.dropdown = function(parameters) { return false; } }, - inMenu: function(event, callback) { + eventInMenu: function(event, callback) { callback = callback || function(){}; if( $(event.target).closest($menu).size() === 0 ) { module.verbose('Triggering event', callback); @@ -611,20 +637,29 @@ $.fn.dropdown = function(parameters) { }, selectValues: function() { var - options = {} + select = { + values : {} + } ; $module .find('option') .each(function() { var name = $(this).html(), - value = $(this).attr('value') || name + value = ( $(this).attr('value') !== undefined ) + ? $(this).attr('value') + : name ; - options[value] = name; + if(value === '') { + select.placeholder = name; + } + else { + select.values[value] = name; + } }) ; - module.debug('Retrieved values from select', options); - return options; + module.debug('Retrieved values from select', select); + return select; }, item: function(value, strict) { var @@ -725,6 +760,7 @@ $.fn.dropdown = function(parameters) { hasActive = ($item && $item.size() > 0), edgeTolerance = 5, offset, + itemHeight, itemOffset, menuOffset, menuScroll, @@ -734,6 +770,7 @@ $.fn.dropdown = function(parameters) { ; if($item && hasActive) { menuHeight = $menu.height(); + itemHeight = $item.height(); menuScroll = $menu.scrollTop(); menuOffset = $menu.offset().top; itemOffset = $item.offset().top; @@ -785,7 +822,9 @@ $.fn.dropdown = function(parameters) { } }, active: function() { - $module.addClass(className.active); + $module + .addClass(className.active) + ; }, visible: function() { $module.addClass(className.visible); @@ -802,10 +841,13 @@ $.fn.dropdown = function(parameters) { : $selectedItem.text() ; $item + .removeClass(className.filtered) .removeClass(className.active) + .removeClass(className.selected) ; $selectedItem .addClass(className.active) + .addClass(className.selected) ; module.set.text(selectedText); } @@ -934,7 +976,6 @@ $.fn.dropdown = function(parameters) { duration : settings.duration, queue : true, complete : function() { - $item.removeClass(className.filtered); $.proxy(callback, element)(); } }) @@ -1277,12 +1318,21 @@ $.fn.dropdown.settings = { }; $.fn.dropdown.settings.templates = { - select: function(values) { + select: function(select) { var - html = '' + placeholder = select.placeholder || false, + values = select.values || {}, + html = '' ; + html += ''; + if(select.placeholder) { + html += '
' + placeholder + '
'; + } + else { + html += '
'; + } html += '
'; - $.each(values, function(value, name) { + $.each(select.values, function(value, name) { html += '
' + name + '
'; }); html += '
'; diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index d4972fd5a..c9072be5b 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -192,7 +192,6 @@ ---------------*/ /* Displays like a select box */ - .ui.selection.dropdown { cursor: pointer; word-wrap: break-word; @@ -216,23 +215,39 @@ z-index: @selectionZIndex; } +select.ui.dropdown { + height: 38px; + padding: 0em; + margin: 0em; + visibility: hidden; +} .ui.selection.dropdown > input[type="hidden"], .ui.selection.dropdown > select { - display: none; + display: none !important; } .ui.selection.dropdown > .text { margin-right: @selectionTextIconDistance; } .ui.selection.dropdown > .search.icon, +.ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon { position: absolute; top: auto; margin: 0em; + width: auto; right: @selectionHorizontalPadding; opacity: @selectionIconOpacity; transition: @selectionIconTransition; } +/* Remove Selection */ +.ui.selection.dropdown > .delete.icon { + opacity: 0.6; +} +.ui.selection.dropdown > .delete.icon:hover { + opacity: 1; +} + /* Search Selection Input */ .ui.selection > input.search { cursor: pointer; @@ -267,6 +282,7 @@ width: auto; margin: 0px -1px; min-width: ~"calc(100% + 2px)"; + outline: none; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before {