Skip to content

Commit

Permalink
Merge pull request #1158 from s-eckard/master
Browse files Browse the repository at this point in the history 
Design rework for filters, checked options and grouped options
  • Loading branch information
@davidstutz
davidstutz committed Nov 23, 2020
2 parents 5283318 + 45fc165 commit 1866604
Show file tree
Hide file tree
Showing 8 changed files with 369 additions and 49 deletions.
64 changes: 55 additions & 9 deletions dist/css/bootstrap-multiselect.css
View file
Expand Up @@ -68,20 +68,66 @@ span.multiselect-native-select select {
.multiselect-container .multiselect-reset .input-group {
width: 93%;
}
.multiselect-container > .multiselect-option.dropdown-item,
.multiselect-container .multiselect-filter > .fa-search {
z-index: 1;
padding-left: 0.75rem;
}
.multiselect-container .multiselect-filter > input.multiselect-search {
border: none;
border-bottom: 1px solid lightgrey;
padding-left: 2rem;
margin-left: -1.625rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.multiselect-container .multiselect-filter > input.multiselect-search:focus {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.multiselect-container .multiselect-filter > .multiselect-moz-clear-filter {
margin-left: -1.5rem;
display: none;
}
.multiselect-container .multiselect-option.multiselect-group-option-indented {
padding-left: 1.75rem;
}
.multiselect-container .multiselect-option,
.multiselect-container .multiselect-group,
.multiselect-container .multiselect-all {
padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}
.multiselect-container .multiselect-option.dropdown-item,
.multiselect-container .multiselect-group.dropdown-item,
.multiselect-container > .multiselect-option.dropdown-toggle,
.multiselect-container .multiselect-group.dropdown-toggle {
.multiselect-container .multiselect-all.dropdown-item,
.multiselect-container .multiselect-option.dropdown-toggle,
.multiselect-container .multiselect-group.dropdown-toggle,
.multiselect-container .multiselect-all.dropdown-toggle {
cursor: pointer;
}
.multiselect-container > .multiselect-option > span,
.multiselect-container .multiselect-group > span {
padding: 3px 20px;
}
.multiselect-container > .multiselect-option > span > .form-check-label,
.multiselect-container .multiselect-group > span > .form-check-label {
.multiselect-container .multiselect-option .form-check-label,
.multiselect-container .multiselect-group .form-check-label,
.multiselect-container .multiselect-all .form-check-label {
cursor: pointer;
}
.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),
.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),
.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),
.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active,
.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,
.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active {
background-color: lightgrey;
color: black;
}
.multiselect-container .multiselect-option .form-check,
.multiselect-container .multiselect-group .form-check,
.multiselect-container .multiselect-all .form-check {
padding: 0 5px 0 20px;
}
.multiselect-container .multiselect-option:focus,
.multiselect-container .multiselect-group:focus,
.multiselect-container .multiselect-all:focus {
outline: none;
}
.form-inline .multiselect-container span.form-check {
padding: 3px 20px 3px 40px;
}
2 changes: 1 addition & 1 deletion dist/css/bootstrap-multiselect.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 50 additions & 17 deletions dist/js/bootstrap-multiselect.js
View file
Expand Up @@ -438,11 +438,11 @@
includeResetOption: false,
includeResetDivider: false,
resetText: 'Reset',
indentGroupOptions: true,
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
popupContainer: '<div class="multiselect-container dropdown-menu"></div>',
filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><div class="input-group-prepend"><i class="input-group-text fas fa-search"></i></div><input class="form-control multiselect-search" type="text" /></div></div>',
filterClearBtn: '<div class="input-group-append"><button class="multiselect-clear-filter input-group-text" type="button"><i class="fas fa-times"></i></button></div>',
filter: '<div class="multiselect-filter d-flex align-items-center"><i class="fas fa-sm fa-search text-muted"></i><input type="search" class="multiselect-search form-control" /></div>',
option: '<button class="multiselect-option dropdown-item"></button>',
divider: '<div class="dropdown-divider"></div>',
optionGroup: '<button class="multiselect-group dropdown-item"></button>',
Expand Down Expand Up @@ -559,7 +559,7 @@
this.createDivider();
}
else {
this.createOptionValue(element);
this.createOptionValue(element, false);
}

}
Expand Down Expand Up @@ -711,17 +711,17 @@
}
else if (!$target.is('input')) {
var $checkbox = $target.closest('.multiselect-option, .multiselect-all').find('.form-check-input');
if($checkbox.length > 0) {
if ($checkbox.length > 0) {
$checkbox.prop('checked', !$checkbox.prop('checked'));
$checkbox.change();
}
else if(this.options.enableClickableOptGroups && this.options.multiple && !$target.hasClass("caret-container")) {
else if (this.options.enableClickableOptGroups && this.options.multiple && !$target.hasClass("caret-container")) {
var groupItem = $target;
if(!groupItem.hasClass("multiselect-group")){
if (!groupItem.hasClass("multiselect-group")) {
groupItem = $target.closest('.multiselect-group');
}
$checkbox = groupItem.find(".form-check-input");
if($checkbox.length > 0) {
if ($checkbox.length > 0) {
$checkbox.prop('checked', !$checkbox.prop('checked'));
$checkbox.change();
}
Expand All @@ -744,7 +744,7 @@

//Keyboard support.
this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function (event) {
if ($('input[type="text"]', this.$container).is(':focus')) {
if ($('input.multiselect-search', this.$container).is(':focus')) {
return;
}

Expand Down Expand Up @@ -774,8 +774,8 @@
}

// keyCode 13 = Enter
if(event.keyCode === 13) {
setTimeout(function() {
if (event.keyCode === 13) {
setTimeout(function () {
$current.focus();
}, 0);
}
Expand Down Expand Up @@ -906,7 +906,7 @@
*
* @param {jQuery} element
*/
createOptionValue: function (element) {
createOptionValue: function (element, isGroupOption) {
var $element = $(element);
if ($element.is(':selected')) {
$element.prop('selected', true);
Expand All @@ -922,6 +922,10 @@
var $option = $(this.options.templates.option);
$option.addClass(classes);

if (isGroupOption && this.options.indentGroupOptions) {
$option.addClass("multiselect-group-option-indented")
}

// Hide all children items when collapseOptGroupsByDefault is true
if (this.options.collapseOptGroupsByDefault && $(element).parent().prop("tagName").toLowerCase() === "optgroup") {
$option.addClass("multiselect-collapsible-hidden");
Expand Down Expand Up @@ -1008,7 +1012,7 @@
this.$popupContainer.append($groupOption);

$("option", group).each($.proxy(function ($, group) {
this.createOptionValue(group);
this.createOptionValue(group, true);
}, this));
},

Expand Down Expand Up @@ -1090,10 +1094,20 @@
this.$filter = $(this.options.templates.filter);
$('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);

// Adds optional filter clear button
if (this.options.includeFilterClearBtn) {
var clearBtn = $(this.options.templates.filterClearBtn);
clearBtn.on('click', $.proxy(function (event) {
// Handles optional filter clear button
if (!this.options.includeFilterClearBtn) {
this.$filter.find(".multiselect-search").attr("type", "text");

// Remove clear button if the old design of the filter with input groups and separated clear button is used
this.$filter.find(".multiselect-clear-filter").remove();
}
else {
// Firefox does not support a clear button in search inputs right now therefore it must be added manually
if (this.isFirefox() && this.$filter.find(".multiselect-clear-filter").length === 0) {
this.$filter.append("<i class='fas fa-times text-muted multiselect-clear-filter multiselect-moz-clear-filter'></i>");
}

this.$filter.find(".multiselect-clear-filter").on('click', $.proxy(function (event) {
clearTimeout(this.searchTimeout);

this.query = '';
Expand All @@ -1107,7 +1121,6 @@
}

}, this));
this.$filter.find('.input-group').append(clearBtn);
}

this.$popupContainer.prepend(this.$filter);
Expand All @@ -1120,6 +1133,15 @@
event.preventDefault();
}

if (this.isFirefox() && this.options.includeFilterClearBtn) {
if (event.target.value) {
this.$filter.find(".multiselect-moz-clear-filter").show();
}
else {
this.$filter.find(".multiselect-moz-clear-filter").hide();
}
}

// This is useful to catch "keydown" events after the browser has updated the control.
clearTimeout(this.searchTimeout);

Expand Down Expand Up @@ -1772,6 +1794,17 @@
setAllSelectedText: function (allSelectedText) {
this.options.allSelectedText = allSelectedText;
this.updateButtonText();
},

isFirefox: function () {
var firefoxIdentifier = 'firefox';
var valueNotFoundIndex = -1;

if (navigator && navigator.userAgent) {
return navigator.userAgent.toLocaleLowerCase().indexOf(firefoxIdentifier) > valueNotFoundIndex;
}

return false;
}
};

Expand Down
2 changes: 1 addition & 1 deletion dist/js/bootstrap-multiselect.min.js
View file

Large diffs are not rendered by default.

55 changes: 49 additions & 6 deletions dist/less/bootstrap-multiselect.less
View file
Expand Up @@ -75,18 +75,61 @@ span.multiselect-native-select select{
}
}

> .multiselect-option, .multiselect-group {
.multiselect-filter {
> .fa-search {
z-index: 1;
padding-left: 0.75rem;
}

> input.multiselect-search {
border: none;
border-bottom: 1px solid lightgrey;
padding-left: 2rem;
margin-left: -1.625rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

&:focus {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;;
}
}

> .multiselect-moz-clear-filter {
margin-left: -1.5rem;
display: none;
}
}

.multiselect-option.multiselect-group-option-indented {
padding-left: 1.75rem;
}

.multiselect-option, .multiselect-group, .multiselect-all {
padding: 0.25rem 0.25rem 0.25rem 0.75rem;

&.dropdown-item,
&.dropdown-toggle {
cursor: pointer;
}

> span {
padding: 3px 20px;
.form-check-label {
cursor: pointer;
}
}

.multiselect-option, .multiselect-group, .multiselect-all {
&.active:not(.multiselect-active-item-fallback), &:not(.multiselect-active-item-fallback):active {
background-color: lightgrey;
color: black;
}

> .form-check-label {
cursor: pointer;
}
.form-check {
padding: 0 5px 0 20px;
}

&:focus {
outline: none;
}
}
}
Expand Down

0 comments on commit 1866604

Please sign in to comment.