[FIX] ColorPicker: modified add custom color icon

Fixed the positioning of the add custom color icon, replacing the hardcoded version with an SVG icon for improved visual appeal. closes #2496 Task: 3258627 X-original-commit: e95c1f8 Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>
odoo · May 19, 2023 · fffba67 · fffba67
1 parent 2d158b5
commit fffba67
Show file tree

Hide file tree

Showing 7 changed files with 527 additions and 2 deletions.
diff --git a/src/components/color_picker/color_picker.ts b/src/components/color_picker/color_picker.ts
@@ -49,6 +49,18 @@ css/* scss */ `
       grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
       grid-gap: ${ITEM_HORIZONTAL_MARGIN * 2}px;
     }
+    .o-color-picker-toggler {
+      display: flex;
+      .o-color-picker-toggler-sign {
+        margin: auto auto;
+        width: 55%;
+        height: 55%;
+        .o-icon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
     .o-color-picker-line-item {
       width: ${ITEM_EDGE_LENGTH}px;
       height: ${ITEM_EDGE_LENGTH}px;

diff --git a/src/components/color_picker/color_picker.xml b/src/components/color_picker/color_picker.xml
@@ -28,7 +28,9 @@
         </div>
         <div class="colors-grid o-color-picker-toggler" t-on-click.stop="toggleColorPicker">
           <div class="o-color-picker-line-item o-color-picker-toggler">
-            <div align="center">+</div>
+            <div class="o-color-picker-toggler-sign">
+              <t t-call="o-spreadsheet-Icon.PLUS"/>
+            </div>
           </div>
           <div
             t-foreach="env.model.getters.getCustomColors()"

diff --git a/src/components/icons/icons.xml b/src/components/icons/icons.xml
@@ -537,7 +537,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Icon.PLUS" owl="1">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path fill="currentColor" d="M8 0h2v8h8v2h-8v8H8v-8H0V8h8"/>
     </svg>
   </t>

diff --git a/tests/components/__snapshots__/bottom_bar.test.ts.snap b/tests/components/__snapshots__/bottom_bar.test.ts.snap
@@ -142,6 +142,7 @@ exports[`BottomBar component simple rendering 1`] = `
       >
         <svg
           class="o-icon"
+          viewBox="0 0 18 18"
         >
           <path
             d="M8 0h2v8h8v2h-8v8H8v-8H0V8h8"