diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 84d519832..710cadd19 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -3,6 +3,7 @@ ### Version 2.2.0 - Feb 15, 2016 **Major Enhancements** +- **Dropdown** - Added new setting for search selection `hideAdditions` this will remove showing user additions inside the menu, making for a more intuitive adding process - **Icons** - 50+ new icons+ are included. Icons now use the latest Font Awesome `4.5.0` Icons. Thanks @BreadMaker for the PR and @davegandy for the font! - **Progress** - Progress now uses a polling interval for updates. Rapidly updating the progress bar over a period quicker than the animation duration (for example with xhr `onprogress` events say every 50ms) will now appear smooth as butter. - **Modules** - Added new setting `silent` to all modules which allows you to disable **all** console output including errors. This can be useful for preventing known errors, like a popup which cannot place itself on screen, or `sticky` content which initializes before it is visible #3713 diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index cbd04499d..fe0b0810c 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -191,6 +191,9 @@ $.fn.dropdown = function(parameters) { .addClass(className.addition) .addClass(className.item) ; + if(settings.hideAdditions) { + $userChoice.addClass(className.hidden); + } $userChoices = ($userChoices === undefined) ? $userChoice : $userChoices.add($userChoice) @@ -235,6 +238,7 @@ $.fn.dropdown = function(parameters) { module.remove.selectedItem(); $item .not(selector.unselectable) + .not(selector.addition + selector.hidden) .eq(0) .addClass(className.selected) ; @@ -614,7 +618,14 @@ $.fn.dropdown = function(parameters) { module.select.firstUnfiltered(); if( module.has.allResultsFiltered() ) { if( settings.onNoResults.call(element, searchTerm) ) { - if(!settings.allowAdditions) { + if(settings.allowAdditions) { + if(settings.hideAdditions) { + module.verbose('User addition with no menu, setting empty style'); + module.set.empty(); + module.hideMenu(); + } + } + else { module.verbose('All items filtered, showing message', searchTerm); module.add.message(message.noResults); } @@ -625,6 +636,7 @@ $.fn.dropdown = function(parameters) { } } else { + module.remove.empty(); module.remove.message(); } if(settings.allowAdditions) { @@ -2030,6 +2042,9 @@ $.fn.dropdown = function(parameters) { $text.removeClass(className.filtered); } }, + empty: function() { + $module.addClass(className.empty); + }, loading: function() { $module.addClass(className.loading); }, @@ -2434,9 +2449,6 @@ $.fn.dropdown = function(parameters) { $addition.remove(); return; } - $item - .removeClass(className.selected) - ; if(hasUserSuggestion) { html = settings.templates.addition( module.add.variables(message.addResult, value) ); $addition @@ -2444,7 +2456,6 @@ $.fn.dropdown = function(parameters) { .attr('data-' + metadata.value, value) .attr('data-' + metadata.text, value) .removeClass(className.filtered) - .addClass(className.selected) ; module.verbose('Replacing user suggestion with new value', $addition); } @@ -2452,10 +2463,16 @@ $.fn.dropdown = function(parameters) { $addition = module.create.userChoice(value); $addition .prependTo($menu) - .addClass(className.selected) ; module.verbose('Adding item choice to menu corresponding with user choice addition', $addition); } + if(!settings.hideAdditions || module.is.allFiltered()) { + $addition + .addClass(className.selected) + .siblings() + .removeClass(className.selected) + ; + } }, variables: function(message, term) { var @@ -2528,6 +2545,9 @@ $.fn.dropdown = function(parameters) { activeLabel: function() { $module.find(selector.label).removeClass(className.active); }, + empty: function() { + $module.removeClass(className.empty); + }, loading: function() { $module.removeClass(className.loading); }, @@ -2554,6 +2574,7 @@ $.fn.dropdown = function(parameters) { else { $item.removeClass(className.filtered); } + module.remove.empty(); }, optionValue: function(value) { var @@ -2778,7 +2799,10 @@ $.fn.dropdown = function(parameters) { return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections); }, allResultsFiltered: function() { - return ($item.filter(selector.unselectable).length === $item.length); + let + $normalResults = $item.not(selector.addition) + ; + return ($normalResults.filter(selector.unselectable).length === $normalResults.length); }, query: function() { return (module.get.query() !== ''); @@ -3293,7 +3317,9 @@ $.fn.dropdown.settings = { sortSelect : false, // sort selection on init forceSelection : true, // force a choice on blur with search selection + allowAdditions : false, // whether multiple select should allow user added values + hideAdditions : true, // whether or not to hide special message prompting a user they can enter a value maxSelections : false, // When set to a number limits the number of selections to this count useLabels : true, // whether multiple select should filter currently active selections from choices @@ -3308,7 +3334,7 @@ $.fn.dropdown.settings = { transition : 'auto', // auto transition will slide down or up based on direction duration : 200, // duration of transition - glyphWidth : 1.0714, // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width + glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width // label settings on multi-select label: { @@ -3397,6 +3423,7 @@ $.fn.dropdown.settings = { selector : { addition : '.addition', dropdown : '.ui.dropdown', + hidden : '.hidden', icon : '> .dropdown.icon', input : '> input[type="hidden"], > select', item : '.item', @@ -3416,6 +3443,7 @@ $.fn.dropdown.settings = { addition : 'addition', animating : 'animating', disabled : 'disabled', + empty : 'empty', dropdown : 'ui dropdown', filtered : 'filtered', hidden : 'hidden transition', diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index b90bc57c5..c969de9c9 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -462,6 +462,11 @@ select.ui.dropdown { word-wrap: normal; } +/* User Item */ +.ui.selection.dropdown .menu > .hidden.addition.item { + display: none; +} + /* Hover */ .ui.selection.dropdown:hover { border-color: @selectionHoverBorderColor; @@ -517,6 +522,16 @@ select.ui.dropdown { border-bottom-right-radius: @selectionVisibleConnectingBorder !important; } +/* Empty Connecting Border */ +.ui.active.empty.selection.dropdown { + border-radius: @selectionBorderRadius !important; + box-shadow: @selectionBoxShadow !important; +} +.ui.active.empty.selection.dropdown .menu { + border: none !important; + box-shadow: none !important; +} + /*-------------- Searchable ---------------*/ @@ -649,6 +664,9 @@ select.ui.dropdown { margin: @multipleSelectionChildMargin; line-height: @multipleSelectionChildLineHeight; } +.ui.multiple.dropdown > .label ~ input.search { + margin-left: @multipleSelectionSearchAfterLabelDistance; +} .ui.multiple.dropdown > .label ~ .text { display: none; } diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index f0c848572..edcbab8fe 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -257,7 +257,9 @@ /* Dropdown Icon */ @multipleSelectionDropdownIconMargin: 0em -@labelHorizontalPadding 0em 0em; -@multipleSelectionDropdownIconPadding: 0.5em; +@multipleSelectionDropdownIconPadding: ''; + +@multipleSelectionSearchAfterLabelDistance: @relative2px; /* Selection Label */ @labelSize: @relativeMedium;