[REF] side panel: use title props

Currently, the title of a `Section` component is a title slot. We are using a slot to translate the title: a props like `title="'My title'"` wouldn't work since this props is javascript expression, while text content inside xml elements are extracted and translated. But since the introduction of the `.translate` modifier, we can use a props! It's much more natural (props vs slot) and explicit (`.translate`) closes #5052 Task: 4226704 Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>
odoo · Oct 14, 2024 · 1dd59ba · 1dd59ba
1 parent e9ce3aa
commit 1dd59ba
Show file tree

Hide file tree

Showing 32 changed files with 190 additions and 129 deletions.
diff --git a/src/components/side_panel/chart/building_blocks/data_series/data_series.xml b/src/components/side_panel/chart/building_blocks/data_series/data_series.xml
@@ -1,7 +1,6 @@
 <templates>
   <t t-name="o-spreadsheet.ChartDataSeries">
-    <Section class="'o-data-series'">
-      <t t-set-slot="title" t-esc="title"/>
+    <Section class="'o-data-series'" title="title">
       <SelectionInput
         ranges="ranges"
         required="true"

diff --git a/src/components/side_panel/chart/building_blocks/general_design/general_design_editor.xml b/src/components/side_panel/chart/building_blocks/general_design/general_design_editor.xml
@@ -1,11 +1,9 @@
 <templates>
   <t t-name="o-spreadsheet-GeneralDesignEditor">
     <t t-set="chart_title">Chart title</t>
-    <SidePanelCollapsible collapsedAtInit="false">
-      <t t-set-slot="title">General</t>
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="General">
       <t t-set-slot="content">
-        <Section class="'o-chart-background-color pt-0 pb-0'">
-          <t t-set-slot="title">Background color</t>
+        <Section class="'o-chart-background-color pt-0 pb-0'" title.translate="Background color">
           <RoundColorPicker
             currentColor="props.definition.background"
             onColorPicked.bind="updateBackgroundColor"

diff --git a/src/components/side_panel/chart/building_blocks/label_range/label_range.xml b/src/components/side_panel/chart/building_blocks/label_range/label_range.xml
@@ -1,7 +1,6 @@
 <templates>
   <t t-name="o-spreadsheet.ChartLabelRange">
-    <Section class="'o-data-labels'">
-      <t t-set-slot="title" t-esc="props.title"/>
+    <Section class="'o-data-labels'" title="props.title">
       <SelectionInput
         ranges="[props.range]"
         isInvalid="props.isInvalid"

diff --git a/src/components/side_panel/chart/building_blocks/title/title.xml b/src/components/side_panel/chart/building_blocks/title/title.xml
@@ -1,11 +1,11 @@
 <templates>
   <t t-name="o-spreadsheet.ChartTitle">
     <t t-set="placeholder">Add a title</t>
-    <Section class="'o-chart-title'">
-      <t t-set-slot="title">
-        <t t-if="props.name" t-esc="props.name"/>
-        <t t-else="">Title</t>
-      </t>
+    <t t-set="title">
+      <t t-if="props.name" t-esc="props.name"/>
+      <t t-else="">Title</t>
+    </t>
+    <Section class="'o-chart-title'" title="title.toString()">
       <input
         type="text"
         class="o-input"

diff --git a/src/components/side_panel/chart/chart_type_picker/chart_type_picker.xml b/src/components/side_panel/chart/chart_type_picker/chart_type_picker.xml
@@ -1,8 +1,7 @@
 <templates>
   <t t-name="o-spreadsheet-ChartTypePicker">
     <t t-set="selectedChartProperties" t-value="getSelectedChartSubtypeProperties()"/>
-    <Section>
-      <t t-set-slot="title">Chart type</t>
+    <Section title.translate="Chart type">
       <div class="position-relative">
         <select
           class="o-input o-type-selector"

diff --git a/src/components/side_panel/chart/chart_with_axis/design_panel.xml b/src/components/side_panel/chart/chart_with_axis/design_panel.xml
@@ -5,8 +5,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
+        <Section class="'pt-0'" title.translate="Legend position">
           <select
             t-att-value="props.definition.legendPosition ?? 'top'"
             class="o-input"
@@ -18,8 +17,7 @@
             <option value="right">Right</option>
           </select>
         </Section>
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Values</t>
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -29,8 +27,7 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Data series</t>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Data series">
       <t t-set-slot="content">
         <Section class="'pt-0 pb-0'">
           <select
@@ -45,35 +42,37 @@
               />
             </t>
           </select>
-          <Section class="'px-0'">
+          <Section class="'px-0'" title.translate="Series color">
             <div class="d-flex align-items-center">
-              <t t-set-slot="title">Series color</t>
               <RoundColorPicker
                 currentColor="getDataSerieColor()"
                 onColorPicked.bind="updateDataSeriesColor"
               />
             </div>
           </Section>
-          <Section class="'pt-0 px-0 o-vertical-axis-selection'" t-if="canHaveTwoVerticalAxis">
-            <t t-set-slot="title">Vertical axis</t>
+          <Section
+            class="'pt-0 px-0 o-vertical-axis-selection'"
+            t-if="canHaveTwoVerticalAxis"
+            title.translate="Vertical axis">
             <RadioSelection
               choices="axisChoices"
               selectedValue="getDataSerieAxis()"
               name="'axis'"
               onChange.bind="updateDataSeriesAxis"
             />
           </Section>
-          <Section class="'pt-0 px-0'">
-            <t t-set-slot="title">Series name</t>
+          <Section class="'pt-0 px-0'" title.translate="Series name">
             <input
               class="o-input o-serie-label-editor"
               type="text"
               t-att-value="getDataSerieLabel()"
               t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
             />
           </Section>
-          <Section class="'pt-0 px-0 o-show-trend-line'" t-if="!props.definition.horizontal">
-            <t t-set-slot="title">Trend line</t>
+          <Section
+            class="'pt-0 px-0 o-show-trend-line'"
+            t-if="!props.definition.horizontal"
+            title.translate="Trend line">
             <t t-set="showTrendLineLabel">Show trend line</t>
             <t t-set="trend" t-value="getTrendLineConfiguration()"/>
             <t t-set="trendType" t-value="getTrendType(trend)"/>
@@ -123,8 +122,7 @@
         </Section>
       </t>
     </SidePanelCollapsible>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Axes</t>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"

diff --git a/src/components/side_panel/chart/combo_chart/combo_chart_design_panel.xml b/src/components/side_panel/chart/combo_chart/combo_chart_design_panel.xml
@@ -5,8 +5,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
+        <Section class="'pt-0'" title.translate="Legend position">
           <select
             t-att-value="props.definition.legendPosition ?? 'top'"
             class="o-input"
@@ -18,8 +17,7 @@
             <option value="right">Right</option>
           </select>
         </Section>
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Values</t>
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
             label="showValuesLabel"
@@ -29,8 +27,7 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Data series</t>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Data series">
       <t t-set-slot="content">
         <Section class="'pt-0 pb-0'">
           <select
@@ -45,44 +42,45 @@
               />
             </t>
           </select>
-          <Section class="'px-0'">
+          <Section class="'px-0'" title.translate="Series color">
             <div class="d-flex align-items-center">
-              <t t-set-slot="title">Series color</t>
               <RoundColorPicker
                 currentColor="getDataSerieColor()"
                 onColorPicked.bind="updateDataSeriesColor"
               />
             </div>
           </Section>
-          <Section class="'pt-0 px-0 o-vertical-axis-selection'" t-if="canHaveTwoVerticalAxis">
-            <t t-set-slot="title">Vertical axis</t>
+          <Section
+            class="'pt-0 px-0 o-vertical-axis-selection'"
+            t-if="canHaveTwoVerticalAxis"
+            title.translate="Vertical axis">
             <RadioSelection
               choices="axisChoices"
               selectedValue="getDataSerieAxis()"
               name="'axis'"
               onChange.bind="updateDataSeriesAxis"
             />
           </Section>
-          <Section class="'pt-0 px-0 o-series-type-selection'">
-            <t t-set-slot="title">Serie type</t>
+          <Section class="'pt-0 px-0 o-series-type-selection'" title.translate="Serie type">
             <RadioSelection
               choices="seriesTypeChoices"
               selectedValue="getDataSeriesType()"
               name="'seriesType'"
               onChange.bind="updateDataSeriesType"
             />
           </Section>
-          <Section class="'pt-0 px-0'">
-            <t t-set-slot="title">Series name</t>
+          <Section class="'pt-0 px-0'" title.translate="Series name">
             <input
               class="o-input o-serie-label-editor"
               type="text"
               t-att-value="getDataSerieLabel()"
               t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
             />
           </Section>
-          <Section class="'pt-0 px-0 o-show-trend-line'" t-if="!props.definition.horizontal">
-            <t t-set-slot="title">Trend line</t>
+          <Section
+            class="'pt-0 px-0 o-show-trend-line'"
+            t-if="!props.definition.horizontal"
+            title.translate="Trend line">
             <t t-set="showTrendLineLabel">Show trend line</t>
             <t t-set="trend" t-value="getTrendLineConfiguration()"/>
             <t t-set="trendType" t-value="getTrendType(trend)"/>
@@ -132,8 +130,7 @@
         </Section>
       </t>
     </SidePanelCollapsible>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Axes</t>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"

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
@@ -5,11 +5,9 @@
       definition="props.definition"
       updateChart="props.updateChart"
     />
-    <SidePanelCollapsible collapsedAtInit="false">
-      <t t-set-slot="title">Gauge Design</t>
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="Gauge Design">
       <t t-set-slot="content">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Range</t>
+        <Section class="'pt-0'" title.translate="Range">
           <div class="o-subsection-left">
             <input
               type="text"
@@ -32,8 +30,7 @@
           </div>
         </Section>
 
-        <Section>
-          <t t-set-slot="title">Thresholds</t>
+        <Section title.translate="Thresholds">
           <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
             <t t-set="sectionRule" t-value="state.sectionRule"/>
           </t>

diff --git a/src/components/side_panel/chart/pie_chart/pie_chart_design_panel.xml b/src/components/side_panel/chart/pie_chart/pie_chart_design_panel.xml
@@ -5,8 +5,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
+        <Section class="'pt-0'" title.translate="Legend position">
           <select
             t-att-value="props.definition.legendPosition ?? 'top'"
             class="o-input"
@@ -18,8 +17,7 @@
             <option value="right">Right</option>
           </select>
         </Section>
-        <Section>
-          <t t-set-slot="title">Values</t>
+        <Section title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"

diff --git a/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_config_panel.xml b/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_config_panel.xml
@@ -1,8 +1,7 @@
 <templates>
   <t t-name="o-spreadsheet-ScorecardChartConfigPanel">
     <div>
-      <Section class="'o-data-series'">
-        <t t-set-slot="title">Key value</t>
+      <Section class="'o-data-series'" title.translate="Key value">
         <SelectionInput
           ranges="[this.getKeyValueRange()]"
           isInvalid="isKeyValueInvalid"
@@ -12,8 +11,7 @@
           onSelectionConfirmed="() => this.updateKeyValueRange()"
         />
       </Section>
-      <Section class="'o-data-labels'">
-        <t t-set-slot="title">Baseline configuration</t>
+      <Section class="'o-data-labels'" title.translate="Baseline configuration">
         <div class="o-section-subtitle">Value</div>
         <SelectionInput
           ranges="[this.getBaselineRange()]"

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
@@ -7,8 +7,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'">
-          <t t-set-slot="title">Number formatting</t>
+        <Section class="'pt-1'" title.translate="Number formatting">
           <Checkbox
             name="'humanizeNumbers'"
             label="humanizeNumbersLabel"
@@ -18,11 +17,9 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="false">
-      <t t-set-slot="title">Baseline</t>
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="Baseline">
       <t t-set-slot="content">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Baseline description</t>
+        <Section class="'pt-0'" title.translate="Baseline description">
           <input
             type="text"
             t-att-value="translate(props.definition.baselineDescr)"
@@ -31,8 +28,7 @@
             placeholder="Baseline description"
           />
         </Section>
-        <Section class="'o-chart-baseline-color'">
-          <t t-set-slot="title" t-esc="colorsSectionTitle"/>
+        <Section class="'o-chart-baseline-color'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="props.definition.baselineColorUp"