Merge pull request #1234 from s-eckard/master

Improve caret of option groups
davidstutz · Jul 9, 2022 · 7d36773 · 7d36773
2 parents dedc507 + fea9937
commit 7d36773
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 57 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 Apache License, Version 2.0:
 
-Copyright (c) 2012 - 2021 David Stutz
+Copyright (c) 2012 - 2022 David Stutz
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 this file except in compliance with the License. You may obtain a copy of the
@@ -13,7 +13,7 @@ specific language governing permissions and limitations under the License.
 
 BSD 3-Clause License:
 
-Copyright (c) 2012 - 2021 David Stutz
+Copyright (c) 2012 - 2022 David Stutz
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,

diff --git a/README.md b/README.md
@@ -18,15 +18,15 @@ Also check out [Bootstrap Strength Meter](https://github.com/davidstutz/bootstra
 
 **Apache License, Version 2.0**
 
-Copyright (c) 2012 - 2021 [David Stutz](https://davidstutz.de/)
+Copyright (c) 2012 - 2022 [David Stutz](https://davidstutz.de/)
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
 
 **BSD 3-Clause License**
 
-Copyright (c) 2012 - 2021 [David Stutz](https://davidstutz.de/)
+Copyright (c) 2012 - 2022 [David Stutz](https://davidstutz.de/)
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

diff --git a/dist/css/bootstrap-multiselect.css b/dist/css/bootstrap-multiselect.css
@@ -2,7 +2,7 @@
  * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
  *
  * Apache License, Version 2.0:
- * Copyright (c) 2012 - 2021 David Stutz
+ * Copyright (c) 2012 - 2022 David Stutz
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
@@ -15,7 +15,7 @@
  * under the License.
  *
  * BSD 3-Clause License:
- * Copyright (c) 2012 - 2021 David Stutz
+ * Copyright (c) 2012 - 2022 David Stutz
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -92,8 +92,20 @@ span.multiselect-native-select select {
   margin-left: -1.5rem;
   display: none;
 }
+.multiselect-container .multiselect-option.multiselect-group-option-indented-full {
+  padding-left: 2.6rem;
+}
 .multiselect-container .multiselect-option.multiselect-group-option-indented {
-  padding-left: 1.75rem;
+  padding-left: 1.8rem;
+}
+.multiselect-container .multiselect-group {
+  cursor: pointer;
+}
+.multiselect-container .multiselect-group.closed .dropdown-toggle::after {
+  transform: rotate(-90deg);
+}
+.multiselect-container .multiselect-group .caret-container ~ .form-check {
+  margin-left: 0.5rem;
 }
 .multiselect-container .multiselect-option,
 .multiselect-container .multiselect-group,
@@ -144,11 +156,11 @@ span.multiselect-native-select select {
   padding: 3px 20px 3px 40px;
 }
 .input-group.input-group-sm > .multiselect-native-select .multiselect {
-  padding: .25rem .5rem;
-  font-size: .875rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1.5;
   padding-right: 1.75rem;
-  height: calc(4em);
+  height: calc(1.5em + 0.5rem + 2px);
 }
 .input-group > .multiselect-native-select {
   flex: 1 1 auto;

diff --git a/dist/css/bootstrap-multiselect.min.css b/dist/css/bootstrap-multiselect.min.css
diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js
@@ -2,7 +2,7 @@
  * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
  *
  * Apache License, Version 2.0:
- * Copyright (c) 2012 - 2021 David Stutz
+ * Copyright (c) 2012 - 2022 David Stutz
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
@@ -15,7 +15,7 @@
  * under the License.
  *
  * BSD 3-Clause License:
- * Copyright (c) 2012 - 2021 David Stutz
+ * Copyright (c) 2012 - 2022 David Stutz
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -909,24 +909,26 @@
             }
 
             if (this.options.enableCollapsibleOptGroups) {
-                $(".multiselect-group .caret-container", this.$popupContainer).off("click");
-                $(".multiselect-group .caret-container", this.$popupContainer).on("click", $.proxy(function (event) {
+                let clickableSelector = this.options.enableClickableOptGroups 
+                    ? ".multiselect-group .caret-container"
+                    : ".multiselect-group";
+
+                $(clickableSelector, this.$popupContainer).off("click");
+                $(clickableSelector, this.$popupContainer).on("click", $.proxy(function (event) {
                     var $group = $(event.target).closest('.multiselect-group');
-                    var $inputs = $group.nextUntil(".multiselect-group")
-                        .not('.multiselect-filter-hidden');
+                    var $inputs = $group.nextUntil(".multiselect-group").not('.multiselect-filter-hidden');
 
                     var visible = true;
                     $inputs.each(function () {
                         visible = visible && !$(this).hasClass('multiselect-collapsible-hidden');
                     });
 
                     if (visible) {
-                        $inputs.hide()
-                            .addClass('multiselect-collapsible-hidden');
-                    }
-                    else {
-                        $inputs.show()
-                            .removeClass('multiselect-collapsible-hidden');
+                        $inputs.hide().addClass('multiselect-collapsible-hidden');
+                        $group.get(0).classList.add("closed");
+                    } else {
+                        $inputs.show().removeClass('multiselect-collapsible-hidden');
+                        $group.get(0).classList.remove("closed");
                     }
                 }, this));
             }
@@ -995,7 +997,12 @@
             $option.addClass(classes);
 
             if (isGroupOption && this.options.indentGroupOptions) {
-                $option.addClass("multiselect-group-option-indented")
+                if (this.options.enableCollapsibleOptGroups) {
+                    $option.addClass("multiselect-group-option-indented-full")
+                } 
+                else {
+                    $option.addClass("multiselect-group-option-indented");
+                }
             }
 
             // Hide all children items when collapseOptGroupsByDefault is true
@@ -1077,7 +1084,7 @@
 
             if (this.options.enableCollapsibleOptGroups) {
                 $groupOption.find('.form-check').addClass('d-inline-block');
-                $groupOption.append('<span class="caret-container dropdown-toggle pl-1"></span>');
+                $groupOption.get(0).insertAdjacentHTML("afterbegin", '<span class="caret-container dropdown-toggle"></span>');
             }
 
             if ($group.is(':disabled')) {

diff --git a/dist/js/bootstrap-multiselect.min.js b/dist/js/bootstrap-multiselect.min.js
diff --git a/dist/less/bootstrap-multiselect.less b/dist/less/bootstrap-multiselect.less
@@ -2,7 +2,7 @@
  * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
  *
  * Apache License, Version 2.0:
- * Copyright (c) 2012 - 2021 David Stutz
+ * Copyright (c) 2012 - 2022 David Stutz
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
@@ -15,7 +15,7 @@
  * under the License.
  *
  * BSD 3-Clause License:
- * Copyright (c) 2012 - 2021 David Stutz
+ * Copyright (c) 2012 - 2022 David Stutz
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -41,12 +41,12 @@
  * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
  * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-span.multiselect-native-select{
-  position:relative
+span.multiselect-native-select {
+  position: relative
 }
 
-span.multiselect-native-select select{
-  border :0 !important;
+span.multiselect-native-select select {
+  border: 0 !important;
   clip: rect(0 0 0 0) !important;
   height: 1px !important;
   margin: -1px -1px -1px -3px !important;
@@ -80,36 +80,57 @@ span.multiselect-native-select select{
   }
 
   .multiselect-filter {
-    > .fa-search {
+    >.fa-search {
       z-index: 1;
       padding-left: 0.75rem;
     }
 
-    > input.multiselect-search {
+    >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;
+      border-bottom-left-radius: 0;
 
       &:focus {
         border-bottom-right-radius: 0.25rem;
-        border-bottom-left-radius:  0.25rem;;
+        border-bottom-left-radius: 0.25rem;
+        ;
       }
     }
 
-    > .multiselect-moz-clear-filter {
+    >.multiselect-moz-clear-filter {
       margin-left: -1.5rem;
       display: none;
     }
   }
 
-  .multiselect-option.multiselect-group-option-indented {
-    padding-left: 1.75rem;
+  .multiselect-option {
+    &.multiselect-group-option-indented-full {
+      padding-left: 2.6rem;
+    }
+
+    &.multiselect-group-option-indented {
+      padding-left: 1.8rem;
+    }
   }
 
-  .multiselect-option, .multiselect-group, .multiselect-all {
+  .multiselect-group {
+    cursor: pointer;
+
+    &.closed .dropdown-toggle::after {
+      transform: rotate(-90deg);
+    }
+
+    .caret-container~.form-check {
+      margin-left: 0.5rem;
+    }
+  }
+
+  .multiselect-option,
+  .multiselect-group,
+  .multiselect-all {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
     &.dropdown-item,
@@ -122,13 +143,18 @@ span.multiselect-native-select select{
     }
   }
 
-  .multiselect-option, .multiselect-group, .multiselect-all {
-    &.active:not(.multiselect-active-item-fallback), &:not(.multiselect-active-item-fallback):active {
+  .multiselect-option,
+  .multiselect-group,
+  .multiselect-all {
+
+    &.active:not(.multiselect-active-item-fallback),
+    &:not(.multiselect-active-item-fallback):active {
       background-color: lightgrey;
       color: black;
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: darkgray !important;
     }
 
@@ -148,20 +174,20 @@ span.multiselect-native-select select{
   }
 }
 
-.input-group  { 
-  &.input-group-sm > .multiselect-native-select .multiselect {
+.input-group {
+  &.input-group-sm>.multiselect-native-select .multiselect {
     padding: .25rem .5rem;
     font-size: .875rem;
     line-height: 1.5;
     padding-right: 1.75rem;
     height: calc(1.5em + .5rem + 2px);
   }
 
-  > .multiselect-native-select {
+  >.multiselect-native-select {
     flex: 1 1 auto;
     width: 1%;
 
-    > div.btn-group {
+    >div.btn-group {
       width: 100%;
     }
 
@@ -175,4 +201,4 @@ span.multiselect-native-select select{
       border-bottom-right-radius: 0;
     }
   }
-}
+}