[FIX] chart panel: wrongly aligned ColorPicker

Since a component ColorPickerWidget was created, the color picker icon was misaligned with its text in the chart side panels. Fix this issue. closes #2807 Task: 3380585 Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Aug 18, 2023 · 88c53ba · 88c53ba
1 parent af65228
commit 88c53ba
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 64 deletions.
diff --git a/src/components/side_panel/chart/bar_chart/bar_chart_design_panel.xml b/src/components/side_panel/chart/bar_chart/bar_chart_design_panel.xml
@@ -3,15 +3,17 @@
     <div>
       <div class="o-section o-chart-background-color">
         <div class="o-section-title">Background color</div>
-        Select a color...
-        <ColorPickerWidget
-          currentColor="props.definition.background"
-          toggleColorPicker="() => this.toggleColorPicker()"
-          showColorPicker="state.fillColorTool"
-          onColorPicked="(color) => this.updateBackgroundColor(color)"
-          title="env._t('Background Color')"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
+        <div class="d-flex align-items-center">
+          <span class="pe-1">Select a color...</span>
+          <ColorPickerWidget
+            currentColor="props.definition.background"
+            toggleColorPicker="() => this.toggleColorPicker()"
+            showColorPicker="state.fillColorTool"
+            onColorPicked="(color) => this.updateBackgroundColor(color)"
+            title="env._t('Background Color')"
+            icon="'o-spreadsheet-Icon.FILL_COLOR'"
+          />
+        </div>
       </div>
       <div class="o-section o-chart-title">
         <div class="o-section-title">Title</div>

diff --git a/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.xml b/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.xml
@@ -3,15 +3,17 @@
     <div>
       <div class="o-section o-chart-background-color">
         <div class="o-section-title">Background color</div>
-        Select a color...
-        <ColorPickerWidget
-          currentColor="props.definition.background"
-          toggleColorPicker="() => this.toggleMenu('backgroundColor', ev)"
-          showColorPicker="state.openedMenu === 'backgroundColor'"
-          onColorPicked="(color) => this.updateBackgroundColor(color)"
-          title="env._t('Background Color')"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
+        <div class="d-flex align-items-center">
+          <span class="pe-1">Select a color...</span>
+          <ColorPickerWidget
+            currentColor="props.definition.background"
+            toggleColorPicker="() => this.toggleMenu('backgroundColor', ev)"
+            showColorPicker="state.openedMenu === 'backgroundColor'"
+            onColorPicked="(color) => this.updateBackgroundColor(color)"
+            title="env._t('Background Color')"
+            icon="'o-spreadsheet-Icon.FILL_COLOR'"
+          />
+        </div>
       </div>
 
       <div class="o-section o-chart-title">

diff --git a/src/components/side_panel/chart/line_bar_pie_panel/design_panel.xml b/src/components/side_panel/chart/line_bar_pie_panel/design_panel.xml
@@ -3,15 +3,17 @@
     <div>
       <div class="o-section o-chart-background-color">
         <div class="o-section-title">Background color</div>
-        Select a color...
-        <ColorPickerWidget
-          currentColor="props.definition.background"
-          toggleColorPicker="() => this.toggleColorPicker()"
-          showColorPicker="state.fillColorTool"
-          onColorPicked="(color) => this.updateBackgroundColor(color)"
-          title="env._t('Background Color')"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
+        <div class="d-flex align-items-center">
+          <span class="pe-1">Select a color...</span>
+          <ColorPickerWidget
+            currentColor="props.definition.background"
+            toggleColorPicker="() => this.toggleColorPicker()"
+            showColorPicker="state.fillColorTool"
+            onColorPicked="(color) => this.updateBackgroundColor(color)"
+            title="env._t('Background Color')"
+            icon="'o-spreadsheet-Icon.FILL_COLOR'"
+          />
+        </div>
       </div>
       <div class="o-section o-chart-title">
         <div class="o-section-title">Title</div>

diff --git a/src/components/side_panel/chart/line_chart/line_chart_design_panel.xml b/src/components/side_panel/chart/line_chart/line_chart_design_panel.xml
@@ -3,15 +3,17 @@
     <div>
       <div class="o-section o-chart-background-color">
         <div class="o-section-title">Background color</div>
-        Select a color...
-        <ColorPickerWidget
-          currentColor="props.definition.background"
-          toggleColorPicker="() => this.toggleColorPicker()"
-          showColorPicker="state.fillColorTool"
-          onColorPicked="(color) => this.updateBackgroundColor(color)"
-          title="env._t('Background Color')"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
+        <div class="d-flex align-items-center">
+          <span class="pe-1">Select a color...</span>
+          <ColorPickerWidget
+            currentColor="props.definition.background"
+            toggleColorPicker="() => this.toggleColorPicker()"
+            showColorPicker="state.fillColorTool"
+            onColorPicked="(color) => this.updateBackgroundColor(color)"
+            title="env._t('Background Color')"
+            icon="'o-spreadsheet-Icon.FILL_COLOR'"
+          />
+        </div>
       </div>
       <div class="o-section o-chart-title">
         <div class="o-section-title">Title</div>

diff --git a/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.xml b/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.xml
@@ -3,15 +3,17 @@
     <div>
       <div class="o-section o-chart-background-color">
         <div class="o-section-title">Background color</div>
-        Select a color...
-        <ColorPickerWidget
-          currentColor="props.definition.background"
-          toggleColorPicker="() => this.toggleColorPicker('backgroundColor')"
-          showColorPicker="state.openedColorPicker === 'backgroundColor'"
-          onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
-          title="env._t('Background Color')"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
+        <div class="d-flex align-items-center">
+          <span class="pe-1">Select a color...</span>
+          <ColorPickerWidget
+            currentColor="props.definition.background"
+            toggleColorPicker="() => this.toggleColorPicker('backgroundColor')"
+            showColorPicker="state.openedColorPicker === 'backgroundColor'"
+            onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
+            title="env._t('Background Color')"
+            icon="'o-spreadsheet-Icon.FILL_COLOR'"
+          />
+        </div>
       </div>
 
       <div class="o-section o-chart-title">
@@ -36,25 +38,28 @@
     </div>
     <div class="o-section o-chart-baseline-color">
       <div class="o-section-title">Baseline color</div>
-      Color on value increase
-      <ColorPickerWidget
-        currentColor="props.definition.baselineColorUp"
-        toggleColorPicker="() => this.toggleColorPicker('baselineColorUp')"
-        showColorPicker="state.openedColorPicker === 'baselineColorUp'"
-        onColorPicked="(color) => this.setColor(color, 'baselineColorUp')"
-        title="env._t('Color Up')"
-        icon="'o-spreadsheet-Icon.FILL_COLOR'"
-      />
-      <br/>
-      Color on value decrease
-      <ColorPickerWidget
-        currentColor="props.definition.baselineColorDown"
-        toggleColorPicker="() => this.toggleColorPicker('baselineColorDown')"
-        showColorPicker="state.openedColorPicker === 'baselineColorDown'"
-        onColorPicked="(color) => this.setColor(color, 'baselineColorDown')"
-        title="env._t('Color Down')"
-        icon="'o-spreadsheet-Icon.FILL_COLOR'"
-      />
+      <div class="d-flex align-items-center">
+        <span class="pe-1">Color on value increase</span>
+        <ColorPickerWidget
+          currentColor="props.definition.baselineColorUp"
+          toggleColorPicker="() => this.toggleColorPicker('baselineColorUp')"
+          showColorPicker="state.openedColorPicker === 'baselineColorUp'"
+          onColorPicked="(color) => this.setColor(color, 'baselineColorUp')"
+          title="env._t('Color Up')"
+          icon="'o-spreadsheet-Icon.FILL_COLOR'"
+        />
+      </div>
+      <div class="d-flex align-items-center">
+        <span class="pe-1">Color on value decrease</span>
+        <ColorPickerWidget
+          currentColor="props.definition.baselineColorDown"
+          toggleColorPicker="() => this.toggleColorPicker('baselineColorDown')"
+          showColorPicker="state.openedColorPicker === 'baselineColorDown'"
+          onColorPicked="(color) => this.setColor(color, 'baselineColorDown')"
+          title="env._t('Color Down')"
+          icon="'o-spreadsheet-Icon.FILL_COLOR'"
+        />
+      </div>
     </div>
   </t>
 </templates>