[FIX] side_panel: unify font weight across side panels

The font weight of this side panel was previously inconsistent with other side panels. This commit introduces a new class o-fw-bold to ensure consistency in font weight across side panels. closes #5100 Task: 4194259 X-original-commit: 187843e Signed-off-by: Adrien Minne (adrm) <[email protected]>
odoo · Oct 16, 2024 · 030ca5d · 030ca5d
1 parent 615a8e8
commit 030ca5d
Show file tree

Hide file tree

Showing 13 changed files with 28 additions and 27 deletions.
diff --git a/src/components/side_panel/components/collapsible/side_panel_collapsible.ts b/src/components/side_panel/components/collapsible/side_panel_collapsible.ts
@@ -4,7 +4,6 @@ import { css } from "../../../helpers";
 css/* scss */ `
   .o_side_panel_collapsible_title {
     font-size: 16px;
-    font-weight: bold;
     cursor: pointer;
     padding: 6px 0px 6px 6px !important;
 

diff --git a/src/components/side_panel/components/collapsible/side_panel_collapsible.xml b/src/components/side_panel/components/collapsible/side_panel_collapsible.xml
@@ -1,7 +1,7 @@
 <templates>
   <t t-name="o-spreadsheet-SidePanelCollapsible">
     <div class="" t-att-class="props.class">
-      <div class="o_side_panel_collapsible_title d-flex align-items-center">
+      <div class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center">
         <div
           t-att-id="'btn-collapse-'+currentId"
           t-att-class="{ 'collapsed': props.collapsedAtInit }"

diff --git a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.ts b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.ts
@@ -47,7 +47,6 @@ css/* scss */ `
       width: 142px;
       .o-cf-preview-description-rule {
         margin-bottom: 4px;
-        font-weight: 600;
         max-height: 2.8em;
         line-height: 1.4em;
       }

diff --git a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml
@@ -29,7 +29,7 @@
         </t>
         <div class="o-cf-preview-description">
           <div class="o-cf-preview-ruletype">
-            <div class="o-cf-preview-description-rule text-truncate">
+            <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
               <t t-esc="getDescription(cf)"/>
             </div>
           </div>

diff --git a/src/components/side_panel/custom_currency/custom_currency.xml b/src/components/side_panel/custom_currency/custom_currency.xml
@@ -60,7 +60,7 @@
           <table>
             <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
               <tr>
-                <td class="pe-3 fw-bolder" t-esc="example.label"/>
+                <td class="pe-3 o-fw-bold" t-esc="example.label"/>
                 <td t-esc="example.value"/>
               </tr>
             </t>

diff --git a/src/components/side_panel/data_validation/dv_preview/dv_preview.xml b/src/components/side_panel/data_validation/dv_preview/dv_preview.xml
@@ -3,7 +3,7 @@
     <div class="o-dv-preview p-3" t-on-click="props.onClick" t-ref="dvPreview">
       <div class="d-flex justify-content-between">
         <div class="o-dv-container d-flex flex-column">
-          <div class="o-dv-preview-description fw-bold text-truncate" t-esc="descriptionString"/>
+          <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
           <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
         </div>
         <div

diff --git a/...components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml b/...components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml
@@ -12,9 +12,9 @@
             t-if="props.onNameUpdated"
             value="props.dimension.displayName"
             onChange.bind="updateName"
-            class="'fw-bold'"
+            class="'o-fw-bold'"
           />
-          <span t-else="1" class="fw-bold" t-esc="props.dimension.displayName"/>
+          <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
         </div>
         <div class="d-flex flex-rows">
           <t t-slot="upper-right-icons"/>

diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml
@@ -1,8 +1,8 @@
 <templates>
   <t t-name="o-spreadsheet-PivotLayoutConfigurator">
-    <div class="o_side_panel_section pivot-dimensions o-section" t-ref="pivot-dimensions">
+    <div class="pivot-dimensions o-section" t-ref="pivot-dimensions">
       <div
-        class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
+        class="o-fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
         Columns
         <AddDimensionButton
           onFieldPicked.bind="addColumnDimension"
@@ -27,7 +27,7 @@
         </div>
       </t>
       <div
-        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
+        class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
         t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
         Rows
         <AddDimensionButton
@@ -53,7 +53,7 @@
         </div>
       </t>
       <div
-        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
+        class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
         Measures
         <AddDimensionButton onFieldPicked.bind="addMeasureDimension" fields="props.measureFields">
           <div

diff --git a/src/components/side_panel/settings/settings_panel.xml b/src/components/side_panel/settings/settings_panel.xml
@@ -14,19 +14,19 @@
         </select>
         <div class="o-locale-preview mt-4 p-3 rounded">
           <div>
-            <span class="fw-bold me-1">Number:</span>
+            <span class="o-fw-bold me-1">Number:</span>
             <span t-esc="numberFormatPreview"/>
           </div>
           <div>
-            <span class="fw-bold me-1">Date:</span>
+            <span class="o-fw-bold me-1">Date:</span>
             <span t-esc="dateFormatPreview"/>
           </div>
           <div>
-            <span class="fw-bold me-1">Date time:</span>
+            <span class="o-fw-bold me-1">Date time:</span>
             <span t-esc="dateTimeFormatPreview"/>
           </div>
           <div>
-            <span class="fw-bold me-1">First day of week:</span>
+            <span class="o-fw-bold me-1">First day of week:</span>
             <span t-esc="firstDayOfWeek"/>
           </div>
         </div>

diff --git a/src/components/side_panel/side_panel/side_panel.ts b/src/components/side_panel/side_panel/side_panel.ts
@@ -19,10 +19,9 @@ css/* scss */ `
     user-select: none;
     color: ${TEXT_BODY};
 
-    .o-heading-3 {
+    .o-sidePanelTitle {
       line-height: 20px;
       font-size: 16px;
-      font-weight: 600;
     }
 
     .o-sidePanelHeader {
@@ -107,6 +106,10 @@ css/* scss */ `
       }
     }
   }
+
+  .o-fw-bold {
+    font-weight: 500;
+  }
 `;
 
 export class SidePanel extends Component<{}, SpreadsheetChildEnv> {

diff --git a/src/components/side_panel/side_panel/side_panel.xml b/src/components/side_panel/side_panel/side_panel.xml
@@ -2,7 +2,7 @@
   <t t-name="o-spreadsheet-SidePanel">
     <div class="o-sidePanel" t-if="sidePanelStore.isOpen">
       <div class="o-sidePanelHeader">
-        <div class="o-sidePanelTitle o-heading-3" t-esc="getTitle()"/>
+        <div class="o-sidePanelTitle o-fw-bold" t-esc="getTitle()"/>
         <div class="o-sidePanelClose" t-on-click="close">✕</div>
       </div>
       <div class="o-sidePanelBody-container d-flex flex-grow-1 ">

diff --git a/.../conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap b/.../conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap
@@ -67,7 +67,7 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
                 class="o-cf-preview-ruletype"
               >
                 <div
-                  class="o-cf-preview-description-rule text-truncate"
+                  class="o-cf-preview-description-rule o-fw-bold text-truncate"
                 >
                   Is equal to 2
                 </div>
@@ -154,7 +154,7 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
                 class="o-cf-preview-ruletype"
               >
                 <div
-                  class="o-cf-preview-description-rule text-truncate"
+                  class="o-cf-preview-description-rule o-fw-bold text-truncate"
                 >
                   Color scale
                 </div>

diff --git a/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap b/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap
@@ -8,7 +8,7 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
     class="o-sidePanelHeader"
   >
     <div
-      class="o-sidePanelTitle o-heading-3"
+      class="o-sidePanelTitle o-fw-bold"
     >
       Pivot #1
     </div>
@@ -141,10 +141,10 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
           </div>
           
           <div
-            class="o_side_panel_section pivot-dimensions o-section"
+            class="pivot-dimensions o-section"
           >
             <div
-              class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title"
+              class="o-fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title"
             >
                Columns 
               <button
@@ -158,7 +158,7 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
             
             
             <div
-              class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
+              class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
             >
                Rows 
               <button
@@ -172,7 +172,7 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
             
             
             <div
-              class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure"
+              class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure"
             >
                Measures 
               <button
@@ -222,7 +222,7 @@ exports[`Spreadsheet pivot side panel It should display only the selection input
     class="o-sidePanelHeader"
   >
     <div
-      class="o-sidePanelTitle o-heading-3"
+      class="o-sidePanelTitle o-fw-bold"
     >
       Pivot #1
     </div>