Merge pull request #11401 from jibees/some-buu-design-updates

🚧 BUU: some design updates + one small code fix

app/views/admin/products_v3/_filters.html.haml

@@ -4,10 +4,10 @@
       = text_field_tag :search_term, search_term, placeholder: t('.search_products')
   .producers
     .label= t('.producers.label')
-    = select_tag :producer_id, options_for_select(producer_options, producer_id), include_blank: t('.all_producers')
+    = select_tag :producer_id, options_for_select(producer_options, producer_id), include_blank: t('.all_producers'), "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
   .categories
     .label= t('.categories.label')
-    = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories')
+    = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories'),  "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
   .submit
     .search-button
       = button_tag t(".search"), class: "secondary icon-search"

app/webpacker/controllers/products_controller.js

@@ -30,7 +30,7 @@ export default class extends ApplicationController {
   };
 
   getLoadingController = () => {
-    return (this.loadongController = this.application.getControllerForElementAndIdentifier(
+    return (this.loadingController ||= this.application.getControllerForElementAndIdentifier(
       this.loadingTarget,
       "loading"
     ));

app/webpacker/css/admin/products_v3.scss

@@ -11,6 +11,10 @@
     position: static;
   }
 
+  #products-content .container {
+    padding: 0;
+  }
+
   // Hopefully these rules will be moved to component(s).
   table.products {
     table-layout: fixed; // Column widths are based solely on col definitions (not content). This allows more efficient rendering.
@@ -90,8 +94,7 @@
     }
   }
 
-  #sort,
-  #filters {
+  #sort {
     margin-bottom: 1em;
     display: flex;
     justify-content: space-between;
@@ -111,8 +114,12 @@
   }
 
   #filters {
-    gap: 20px;
-    align-items: flex-end;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 20px;
+    align-items: end;
+    margin-bottom: 20px;
 
     .producers,
     .categories {
@@ -123,16 +130,15 @@
     }
 
     .query {
-      flex-grow: 1;
+      grid-column: 1 / span 3;
     }
 
     .producers,
     .categories {
-      flex-grow: 0;
     }
 
     .submit {
-      flex-grow: 0;
+      grid-column: 6 / span 1;
     }
 
     .query {

app/webpacker/css/admin_v3/all.scss

@@ -125,7 +125,7 @@
 @import "v3_overrides"; // admin_v3
 
 @import "~tom-select/src/scss/tom-select.default";
-@import "../admin/components/tom_select";
+@import "components/tom_select"; // admin_v3
 
 @import "app/components/help_modal_component/help_modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";

app/webpacker/css/admin_v3/components/tom_select.scss

@@ -0,0 +1,67 @@
+.ts-wrapper.single,
+.ts-wrapper.multi {
+  min-height: 40px;
+
+  &.input-active {
+    .ts-control {
+      border-color: $lighter-grey;
+
+      input {
+        &::placeholder {
+          color: $light-grey;
+        }
+      }
+    }
+  }
+
+  .ts-control {
+    box-shadow: none;
+    border-color: $lighter-grey;
+    background-color: $lighter-grey;
+    background-image: none;
+    @include border-radius($border-radius);
+
+    input {
+      &::placeholder {
+        color: $near-black;
+      }
+    }
+  }
+
+  .ts-dropdown {
+    @include border-radius($border-radius);
+    border: none;
+    box-shadow: none;
+    color: $near-black;
+
+    .option {
+      &.selected {
+        border-left: 2px solid $orient;
+      }
+
+      &.active {
+        background-color: $lighter-grey;
+        color: $near-black;
+      }
+    }
+  }
+}
+
+.plugin-dropdown_input .dropdown-input {
+  border-color: $lighter-grey;
+
+  &:focus {
+    border-color: $orient;
+  }
+}
+
+// For the "single" tom_select, be as clause as native select boxes
+// without too many options
+.ts-wrapper.single {
+  max-height: 40px;
+  max-width: 100%;
+
+  &.input-active .ts-control {
+    cursor: pointer;
+  }
+}