[UPDT] Multiselect design

horilla_widgets/templates/horilla_widgets/horilla_multiselect_widget.html

@@ -62,9 +62,9 @@
 
   .avatars {
     display: flex;
-    padding: 10px;
+    padding: 8px 10px 8px 10px;
   }
-  
+
   .avatars__item {
     background-color: #596376;
     border: 2px solid white;
@@ -82,35 +82,35 @@
     overflow: hidden;
     margin-left: -10px;
   }
-  
+
   .avatars__item:first-child {
     z-index: 5;
   }
-  
+
   .avatars__item:nth-child(2) {
     z-index: 4;
   }
-  
+
   .avatars__item:nth-child(3) {
     z-index: 3;
   }
-  
+
   .avatars__item:nth-child(4) {
     z-index: 2;
   }
-  
+
   .avatars__item:nth-child(5) {
     z-index: 1;
   }
-  
+
   .avatars__item:last-child {
     z-index: 0;
   }
-  
+
   .avatars__item img {
     width: 100%;
   }
-  
+
   .avatars:hover .avatars__item {
     margin-right: 10px;
   }
@@ -119,10 +119,23 @@
   }
   #slectContainer{{self.attrs.id}} .select2-container .select2-selection{
     padding: 5px !important;
-    height: 50px !important;
+    max-height: 70px !important;
     overflow: hidden;
     overflow-y: scroll;
   }
+  .custom-scroll{
+    overflow-x: scroll
+  }
+  .custom-scroll::-webkit-scrollbar{
+    background-color: #cacaca;
+    height: 4px;
+    border-radius: 6px;
+
+  }
+  .custom-scroll::-webkit-scrollbar-thumb{
+    background-color: #888;
+    border-radius: 6px;
+  }
 </style>
 <div id="slectContainer{{self.attrs.id}}">
   <select name="{{field_name}}" id="{{self.attrs.id}}" class="w-100" multiple>
@@ -131,17 +144,32 @@
     {% endfor %}
   </select>
 </div>
-  <div class="d-flex justify-content-between">
-  <div class="avatars" id="avatarsContainer">
-    
-  </div>
+<div class="d-flex justify-content-between custom-scroll">
+  <div class="avatars" id="avatarsContainer"></div>
+</div>
+<span
+  style="
+    cursor: pointer;
+    padding: 10px;
+    display: flex;
+    justify-content: right;
+    color: orangered;
+  "
+>
   <span
-    style="cursor: pointer;padding: 10px;"
     data-toggle="oh-modal-toggle"
     data-target="#filterChoose"
-    >Filter and filterChoose</span
+    title="Filter and Choose {{field.label}}"
+    style="
+      justify-content: right;
+      align-items: center;
+      display: flex;
+      width: 50px;
+    "
   >
-</div>
+    <ion-icon name="filter-circle"></ion-icon> Filter
+  </span>
+</span>
 <div
   class="oh-modal"
   id="filterChoose"
@@ -159,7 +187,10 @@
         <ion-icon name="close-outline"></ion-icon>
       </button>
     </div>
-    <div class="oh-modal__dialog-body" id="filterChooseModalBody{{self.attrs.id}}">
+    <div
+      class="oh-modal__dialog-body"
+      id="filterChooseModalBody{{self.attrs.id}}"
+    >
       <div class="oh-wrapper">
         <!-- Nav -->
         {% include "horilla_widgets/multiselect_components/nav.html" %}
@@ -170,7 +201,10 @@
         <!-- Pagination -->
         {% include "horilla_widgets/multiselect_components/pagination.html" %}
         <div class="d-flex flex-row-reverse">
-          <button class="oh-btn oh-btn--secondary oh-btn--shadow pr-3 pl-3" onclick="event.stopPropagation();event.preventDefault;$('#filterChoose').toggleClass('oh-modal--show');">
+          <button
+            class="oh-btn oh-btn--secondary oh-btn--shadow pr-3 pl-3"
+            onclick="event.stopPropagation();event.preventDefault;$('#filterChoose').toggleClass('oh-modal--show');"
+          >
             Add
           </button>
         </div>