[IMP] topbar: improve toolbar and topbar composer

This commits improves the usability of the toolbar:
- The composer is now in a new line to have more space for tools
- Tools button have a bit more padding/margin
- Added Insert Chart/Pivot/Function buttons in the toolbar

Task: 5231006

Author: hokolomopo

src/actions/insert_actions.ts

@@ -211,37 +211,38 @@ export const insertTable: ActionSpec = {
   icon: "o-spreadsheet-Icon.PAINT_TABLE",
 };
 
-export const insertFunction: ActionSpec = {
-  name: _t("Function"),
-  icon: "o-spreadsheet-Icon.FORMULA",
-};
-
 export const insertFunctionSum: ActionSpec = {
+  id: "insert_function_sum",
   name: _t("SUM"),
   execute: (env) => env.startCellEdition(`=SUM(`),
 };
 
 export const insertFunctionAverage: ActionSpec = {
+  id: "insert_function_average",
   name: _t("AVERAGE"),
   execute: (env) => env.startCellEdition(`=AVERAGE(`),
 };
 
 export const insertFunctionCount: ActionSpec = {
+  id: "insert_function_count",
   name: _t("COUNT"),
   execute: (env) => env.startCellEdition(`=COUNT(`),
 };
 
 export const insertFunctionMax: ActionSpec = {
+  id: "insert_function_max",
   name: _t("MAX"),
   execute: (env) => env.startCellEdition(`=MAX(`),
 };
 
 export const insertFunctionMin: ActionSpec = {
+  id: "insert_function_min",
   name: _t("MIN"),
   execute: (env) => env.startCellEdition(`=MIN(`),
 };
 
-export const categorieFunctionAll: ActionSpec = {
+export const categoryFunctionAll: ActionSpec = {
+  id: "category_function_all",
   name: _t("All"),
   children: [allFunctionListMenuBuilder],
 };
@@ -273,6 +274,20 @@ export const categoriesFunctionListMenuBuilder: ActionBuilder = () => {
   });
 };
 
+export const insertFunction: ActionSpec = {
+  name: _t("Function"),
+  icon: "o-spreadsheet-Icon.FORMULA",
+  children: [
+    insertFunctionSum,
+    insertFunctionAverage,
+    insertFunctionCount,
+    insertFunctionMax,
+    { ...insertFunctionMin, separator: true },
+    categoryFunctionAll,
+    categoriesFunctionListMenuBuilder,
+  ],
+};
+
 export const insertLink: ActionSpec = {
   name: _t("Link"),
   execute: ACTIONS.INSERT_LINK,

src/components/action_button/action_button.css

@@ -3,11 +3,17 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 2px 1px;
-    padding: 0px 1px;
+    margin: 2px 2px;
+    padding: 0px 4px;
     border-radius: 2px;
     min-width: 22px;
+
+    .o-caret-down {
+      margin-left: 4px;
+      width: fit-content;
+    }
   }
+
   .o-disabled {
     opacity: 0.6;
     cursor: default;

src/components/icons/icons.xml

@@ -587,7 +587,7 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_DOWN">
-    <div class="o-icon fa-small">
+    <div class="o-icon fa-small o-caret-down">
       <i class="fa fa-caret-down"/>
     </div>
   </t>

src/components/top_bar/number_formats_tool/number_formats_tool.ts renamed to src/components/top_bar/menu_button_tool/menu_button_tool.ts

@@ -1,7 +1,6 @@
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component, useRef, useState } from "@odoo/owl";
-import { Action, createAction } from "../../../actions/action";
-import { formatNumberMenuItemSpec } from "../../../registries/menus";
+import { Action, ActionSpec, createAction } from "../../../actions/action";
 import { Rect } from "../../../types";
 import { ActionButton } from "../../action_button/action_button";
 import { getBoundingRectAsPOJO } from "../../helpers/dom_helpers";
@@ -10,18 +9,18 @@ import { MenuPopover } from "../../menu_popover/menu_popover";
 
 interface Props {
   class: string;
+  action: ActionSpec;
 }
 
 interface State {
   menuItems: Action[];
   anchorRect: Rect;
 }
 
-export class NumberFormatsTool extends Component<Props, SpreadsheetChildEnv> {
-  static template = "o-spreadsheet-NumberFormatsTool";
+export class MenuButtonTool extends Component<Props, SpreadsheetChildEnv> {
+  static template = "o-spreadsheet-MenuButtonTool";
   static components = { MenuPopover, ActionButton };
-  static props = { class: String };
-  formatNumberMenuItemSpec = formatNumberMenuItemSpec;
+  static props = { class: String, action: Object };
   topBarToolStore!: ToolBarDropdownStore;
 
   buttonRef = useRef("buttonRef");
@@ -38,7 +37,7 @@ export class NumberFormatsTool extends Component<Props, SpreadsheetChildEnv> {
     if (this.isActive) {
       this.topBarToolStore.closeDropdowns();
     } else {
-      const menu = createAction(this.formatNumberMenuItemSpec);
+      const menu = createAction(this.props.action);
       this.state.menuItems = menu.children(this.env).sort((a, b) => a.sequence - b.sequence);
       this.state.anchorRect = getBoundingRectAsPOJO(this.buttonRef.el!);
       this.topBarToolStore.openDropdown();
@@ -48,4 +47,8 @@ export class NumberFormatsTool extends Component<Props, SpreadsheetChildEnv> {
   get isActive() {
     return this.topBarToolStore.isActive;
   }
+
+  onClose() {
+    this.topBarToolStore.closeDropdowns();
+  }
 }

src/components/top_bar/number_formats_tool/number_formats_tool.xml renamed to src/components/top_bar/menu_button_tool/menu_button_tool.xml

@@ -1,7 +1,7 @@
 <templates>
-  <div t-name="o-spreadsheet-NumberFormatsTool" t-ref="buttonRef" t-on-click.stop="">
+  <div t-name="o-spreadsheet-MenuButtonTool" t-ref="buttonRef" t-on-click.stop="">
     <ActionButton
-      action="formatNumberMenuItemSpec"
+      action="props.action"
       hasTriangleDownIcon="true"
       onClick.bind="toggleMenu"
       class="props.class"
@@ -10,7 +10,7 @@
       t-if="isActive"
       anchorRect="state.anchorRect"
       menuItems="state.menuItems"
-      onClose="() => {}"
+      onClose.bind="onClose"
       popoverPositioning="'bottom-left'"
     />
   </div>

src/components/top_bar/top_bar.css

@@ -1,10 +1,4 @@
 .o-spreadsheet {
-  @media (max-width: 1200px) {
-    .o-topbar-responsive {
-      flex-direction: column !important;
-    }
-  }
-
   @media (max-width: 768px) {
     .topbar-banner span {
       overflow: auto;
@@ -21,8 +15,8 @@
   .o-topbar-divider {
     border-right: 1px solid var(--os-separator-color);
     width: 0;
-    margin: 0 6px;
-    height: 30px;
+    margin: 0 4px;
+    height: 100%;
   }
 
   .o-toolbar-button {
@@ -93,11 +87,17 @@
 
     .o-toolbar-button {
       height: 35px;
-      width: 31px;
+      min-width: 31px;
       .o-toolbar-button.o-mobile-disabled * {
         color: var(--os-disabled-text-color);
         cursor: not-allowed;
       }
     }
   }
+
+  .o-topbar-tools-popover {
+    .o-topbar-divider {
+      height: 30px;
+    }
+  }
 }

src/components/top_bar/top_bar.xml

@@ -25,23 +25,19 @@
         </div>
       </div>
       <!-- Toolbar and Cell Content -->
-      <div
-        class="d-flex o-topbar-responsive"
-        t-att-class="{'o-topbar-responsive': !env.model.getters.isReadonly()}"
-        t-ref="toolBarContainer">
-        <div
-          class="o-topbar-toolbar d-flex"
-          t-att-class="{'flex-shrink-0': env.model.getters.isReadonly()}">
+      <div class="d-flex" t-if="env.model.getters.isReadonly()">
+        <div class="o-readonly-toolbar d-flex align-items-center flex-shrink-0 text-muted px-3">
+          <span>
+            <i class="fa fa-eye"/>
+            Readonly Access
+          </span>
+        </div>
+        <TopBarComposer t-if="!env.isSmall"/>
+      </div>
+      <t t-else="">
+        <div class="o-topbar-toolbar d-flex" t-ref="toolBarContainer">
           <!-- Toolbar -->
-          <div
-            t-if="env.model.getters.isReadonly()"
-            class="o-readonly-toolbar d-flex align-items-center text-muted">
-            <span>
-              <i class="fa fa-eye"/>
-              Readonly Access
-            </span>
-          </div>
-          <div t-else="" class="o-toolbar-tools d-flex ms-4 flex-grow-1" t-ref="toolBar">
+          <div class="o-toolbar-tools d-flex ms-3 flex-grow-1" t-ref="toolBar">
             <div
               class="d-flex tool-container"
               t-foreach="toolsCategories"
@@ -69,7 +65,7 @@
           </div>
         </div>
         <TopBarComposer t-if="!env.isSmall"/>
-      </div>
+      </t>
       <div
         t-if="this.fingerprints.isEnabled"
         class="topbar-banner irregularity-map d-flex align-items-center justify-content-between">
@@ -104,7 +100,7 @@
       popoverPositioning="'bottom-left'"
     />
     <Popover t-if="state.toolsPopoverState.isOpen" t-props="toolsPopoverProps">
-      <div class="d-flex px-2 py-1 flex-wrap align-items-center bg-white">
+      <div class="o-topbar-tools-popover d-flex px-2 py-1 flex-wrap align-items-center bg-white">
         <t
           t-foreach="state.invisibleToolsCategories"
           t-as="category"