[IMP] filters: modernize look

Convert the data filter popover to the new style. closes #5287 Task: 4358098 Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Dec 17, 2024 · 10a07d4 · 10a07d4
1 parent 6aeccfb
commit 10a07d4
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 109 deletions.
diff --git a/src/components/filters/filter_menu/filter_menu.ts b/src/components/filters/filter_menu/filter_menu.ts
@@ -1,5 +1,5 @@
 import { Component, onWillUpdateProps, useRef, useState } from "@odoo/owl";
-import { MENU_ITEM_HEIGHT } from "../../../constants";
+import { GRAY_300 } from "../../../constants";
 import { deepEquals, positions, toLowerCase } from "../../../helpers";
 import { fuzzyLookup } from "../../../helpers/search";
 import { interactiveSort } from "../../../helpers/sort";
@@ -20,8 +20,6 @@ const CSS = css/* scss */ `
     .o-filter-menu-item {
       display: flex;
       box-sizing: border-box;
-      height: ${MENU_ITEM_HEIGHT}px;
-      padding: 4px 4px 4px 0px;
       cursor: pointer;
       user-select: none;
 
@@ -30,14 +28,6 @@ const CSS = css/* scss */ `
       }
     }
 
-    input {
-      box-sizing: border-box;
-      margin-bottom: 5px;
-      border: 1px solid #949494;
-      height: 24px;
-      padding-right: 28px;
-    }
-
     .o-search-icon {
       right: 5px;
       top: 3px;
@@ -54,19 +44,12 @@ const CSS = css/* scss */ `
       display: flex;
       flex-direction: row;
       margin-bottom: 4px;
-
-      .o-filter-menu-action-text {
-        cursor: pointer;
-        margin-right: 10px;
-        color: blue;
-        text-decoration: underline;
-      }
     }
 
     .o-filter-menu-list {
       flex: auto;
       overflow-y: auto;
-      border: 1px solid #949494;
+      border: 1px solid ${GRAY_300};
 
       .o-filter-menu-no-values {
         color: #949494;

diff --git a/src/components/filters/filter_menu/filter_menu.xml b/src/components/filters/filter_menu/filter_menu.xml
@@ -3,22 +3,22 @@
     <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
       <t t-if="isSortable">
         <div>
-          <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('asc')">
+          <div class="o-filter-menu-item my-2 mb-3" t-on-click="() => this.sortFilterZone('asc')">
             Sort ascending (A ⟶ Z)
           </div>
-          <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('desc')">
+          <div class="o-filter-menu-item my-2" t-on-click="() => this.sortFilterZone('desc')">
             Sort descending (Z ⟶ A)
           </div>
         </div>
         <div class="o-separator"/>
       </t>
-      <div class="o-filter-menu-actions">
-        <div class="o-filter-menu-action-text" t-on-click="selectAll">Select all</div>
-        <div class="o-filter-menu-action-text" t-on-click="clearAll">Clear</div>
+      <div class="o-filter-menu-actions d-flex">
+        <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
+        <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
       </div>
       <div class="position-relative">
         <input
-          class="w-100"
+          class="w-100 o-input my-2"
           t-ref="filterMenuSearchBar"
           type="text"
           t-model="state.textFilter"
@@ -30,7 +30,7 @@
         </i>
       </div>
       <div
-        class="o-filter-menu-list d-flex flex-column rounded"
+        class="o-filter-menu-list d-flex flex-column"
         t-ref="filterValueList"
         t-on-click="this.clearScrolledToValue"
         t-on-scroll="this.clearScrolledToValue">

diff --git a/src/components/filters/filter_menu_item/filter_menu_value_item.ts b/src/components/filters/filter_menu_item/filter_menu_value_item.ts
@@ -1,6 +1,6 @@
 import { Component, onWillPatch, useRef } from "@odoo/owl";
 import { SpreadsheetChildEnv } from "../../../types";
-import { css } from "../../helpers";
+import { Checkbox } from "../../side_panel/components/checkbox/checkbox";
 
 interface Props {
   value: string;
@@ -11,19 +11,9 @@ interface Props {
   scrolledTo: "top" | "bottom" | undefined;
 }
 
-css/*SCSS*/ `
-  .o-filter-menu-value {
-    padding: 4px;
-    line-height: 20px;
-    height: 28px;
-    .o-filter-menu-value-checked {
-      width: 20px;
-    }
-  }
-`;
-
 export class FilterMenuValueItem extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-FilterMenuValueItem";
+  static components = { Checkbox };
   static props = {
     value: String,
     isChecked: Boolean,

diff --git a/src/components/filters/filter_menu_item/filter_menu_value_item.xml b/src/components/filters/filter_menu_item/filter_menu_value_item.xml
@@ -1,20 +1,22 @@
 <templates>
   <t t-name="o-spreadsheet-FilterMenuValueItem">
     <div
-      t-on-click="this.props.onClick"
       t-on-pointermove="this.props.onMouseMove"
       class="o-filter-menu-item o-filter-menu-value"
       t-ref="menuValueItem"
       t-att-class="{'selected': this.props.isSelected}">
-      <div>
-        <div class="o-filter-menu-value-checked">
-          <span t-if="this.props.isChecked">✓</span>
-        </div>
-      </div>
-      <div class="o-filter-menu-value-text text-truncate">
+      <t t-set="value">
         <t t-if="this.props.value === ''">(Blanks)</t>
         <t t-else="" t-esc="this.props.value"/>
-      </div>
+      </t>
+      <!-- toString because t-set with a body creates a LazyValue instead of a string -->
+      <Checkbox
+        name="value.toString()"
+        value="this.props.isChecked"
+        onChange="this.props.onClick"
+        className="'p-2 w-100 pe-auto text-truncate'"
+        label="value.toString()"
+      />
     </div>
   </t>
 </templates>
diff --git a/tests/table/__snapshots__/filter_menu_component.test.ts.snap b/tests/table/__snapshots__/filter_menu_component.test.ts.snap
@@ -6,12 +6,12 @@ exports[`Filter menu component Filter Tests Filter menu is correctly rendered 1`
 >
   <div>
     <div
-      class="o-filter-menu-item"
+      class="o-filter-menu-item my-2 mb-3"
     >
        Sort ascending (A ⟶ Z) 
     </div>
     <div
-      class="o-filter-menu-item"
+      class="o-filter-menu-item my-2"
     >
        Sort descending (Z ⟶ A) 
     </div>
@@ -21,15 +21,15 @@ exports[`Filter menu component Filter Tests Filter menu is correctly rendered 1`
   />
   
   <div
-    class="o-filter-menu-actions"
+    class="o-filter-menu-actions d-flex"
   >
     <div
-      class="o-filter-menu-action-text"
+      class="o-button-link me-4"
     >
       Select all
     </div>
     <div
-      class="o-filter-menu-action-text"
+      class="o-button-link me-4"
     >
       Clear
     </div>
@@ -38,7 +38,7 @@ exports[`Filter menu component Filter Tests Filter menu is correctly rendered 1`
     class="position-relative"
   >
     <input
-      class="w-100"
+      class="w-100 o-input my-2"
       placeholder="Search..."
       type="text"
     />
@@ -55,67 +55,61 @@ exports[`Filter menu component Filter Tests Filter menu is correctly rendered 1`
     </i>
   </div>
   <div
-    class="o-filter-menu-list d-flex flex-column rounded"
+    class="o-filter-menu-list d-flex flex-column"
   >
     <div
       class="o-filter-menu-item o-filter-menu-value"
     >
-      <div>
-        <div
-          class="o-filter-menu-value-checked"
-        >
-          <span>
-            ✓
-          </span>
-        </div>
-      </div>
-      <div
-        class="o-filter-menu-value-text text-truncate"
+      <!-- toString because t-set with a body creates a LazyValue instead of a string -->
+      <label
+        class="o-checkbox d-flex align-items-center p-2 w-100 pe-auto text-truncate"
+        role="button"
       >
+        <input
+          class="me-2"
+          name="(Blanks)"
+          type="checkbox"
+        />
         (Blanks)
         
-        
-      </div>
+      </label>
+      
     </div>
     <div
       class="o-filter-menu-item o-filter-menu-value"
     >
-      <div>
-        <div
-          class="o-filter-menu-value-checked"
-        >
-          <span>
-            ✓
-          </span>
-        </div>
-      </div>
-      <div
-        class="o-filter-menu-value-text text-truncate"
+      <!-- toString because t-set with a body creates a LazyValue instead of a string -->
+      <label
+        class="o-checkbox d-flex align-items-center p-2 w-100 pe-auto text-truncate"
+        role="button"
       >
-        
+        <input
+          class="me-2"
+          name="1"
+          type="checkbox"
+        />
         1
         
-      </div>
+      </label>
+      
     </div>
     <div
       class="o-filter-menu-item o-filter-menu-value"
     >
-      <div>
-        <div
-          class="o-filter-menu-value-checked"
-        >
-          <span>
-            ✓
-          </span>
-        </div>
-      </div>
-      <div
-        class="o-filter-menu-value-text text-truncate"
+      <!-- toString because t-set with a body creates a LazyValue instead of a string -->
+      <label
+        class="o-checkbox d-flex align-items-center p-2 w-100 pe-auto text-truncate"
+        role="button"
       >
-        
+        <input
+          class="me-2"
+          name="2"
+          type="checkbox"
+        />
         2
         
-      </div>
+      </label>
+      
     </div>