Style improvements.

pulibrary · Jul 8, 2022 · 5dad005 · 5dad005
1 parent 016b978
commit 5dad005
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/app/assets/stylesheets/components/select_box.scss b/app/assets/stylesheets/components/select_box.scss
@@ -17,7 +17,24 @@ a span.check-mark {
 	max-height: 400px !important;
 }
 
-.select2-results__group {
+.select2-container--default .select2-results__group {
+  border-top: 1px solid #e5e5e5;
   color: #6c757d;
   font-size: 0.875rem;
+  cursor: pointer !important;
+  &::before {
+    display: inline-block;
+    margin-left: 0.255em;
+    vertical-align: 0.255em;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-bottom: 0;
+    border-left: 0.3em solid transparent;
+    margin-right: 0.3em;
+    transform: rotate(-90deg);
+    &.open {
+      transform: rotate(0deg);
+    }
+  }
 }
diff --git a/app/javascript/figgy/figgy_boot.js b/app/javascript/figgy/figgy_boot.js
@@ -98,6 +98,13 @@ export default class Initializer {
       let id = $(this).closest('.select2-results__options').attr('id');
       let index = $('.select2-results__group').index(this);
       optgroupState[id][index] = !optgroupState[id][index];
+      if(optgroupState[id][index]) {
+        $(this).addClass("open")
+        $(this).removeClass("closed")
+      } else {
+        $(this).addClass("closed")
+        $(this).removeClass("open")
+      }
     })
 
     let optgroupState = {};
@@ -112,6 +119,15 @@ export default class Initializer {
         }
         $.each(groups, (index, v) => {
           optgroupState[id][index] = optgroupState[id][index] || false;
+          if(optgroupState[id][index]) {
+            $(v).siblings().show();
+            $(v).addClass("open")
+            $(v).removeClass("closed")
+          } else {
+            $(v).siblings().hide();
+            $(v).addClass("closed")
+            $(v).removeClass("open")
+          }
           optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide();
         })
         $('.select2-dropdown--below').css('opacity', 1);