[IMP] dashboard: improve chart icon hover and tooltip behavior

src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.scss

@@ -5,15 +5,26 @@
 
   .o-dashboard-chart-select {
     cursor: default;
+    > div {
+      height: 28px;
+    }
 
     .o-chart-dashboard-item {
-      opacity: 0.3;
+      filter: grayscale(1);
 
       &.active,
       &:hover,
       &:target {
+        filter: grayscale(0);
+        color: $os-gray-900 !important;
         background: $os-button-active-bg;
       }
+      .o-chart-preview {
+        stroke-width: 2px;
+        transform: scale(1.1);
+        width: 16px;
+        height: 16px;
+      }
     }
   }
 }

src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.ts

@@ -16,9 +16,9 @@ interface Props {
 interface MenuItem {
   id: string;
   label: string;
-  iconClass: string;
+  class: string;
   onClick: () => void;
-  isSelected?: boolean;
+  preview?: string;
 }
 
 export class ChartDashboardMenu extends Component<Props, SpreadsheetChildEnv> {
@@ -64,21 +64,11 @@ export class ChartDashboardMenu extends Component<Props, SpreadsheetChildEnv> {
     if (definition.type === "scorecard") {
       return undefined;
     }
-
-    if (this.props.chartId === this.fullScreenFigureStore.fullScreenFigure?.id) {
-      return {
-        id: "fullScreenChart",
-        label: _t("Exit Full Screen"),
-        iconClass: "fa fa-compress",
-        onClick: () => {
-          this.fullScreenFigureStore.toggleFullScreenChart(figureId);
-        },
-      };
-    }
+    const isFullScreen = this.props.chartId === this.fullScreenFigureStore.fullScreenFigure?.id;
     return {
       id: "fullScreenChart",
-      label: _t("Full Screen"),
-      iconClass: "fa fa-expand",
+      label: _t(isFullScreen ? "Exit Full Screen" : "Full Screen"),
+      class: `text-muted fa ${isFullScreen ? "fa-compress" : "fa-expand"}`,
       onClick: () => {
         this.fullScreenFigureStore.toggleFullScreenChart(figureId);
       },

src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.xml

@@ -1,18 +1,19 @@
 <templates>
   <t t-name="o-spreadsheet-ChartDashboardMenu">
     <div class="o-dashboard-chart-select position-absolute top-0 end-0" t-on-click.stop="">
-      <div class="d-flex flex-row px-1" t-att-style="backgroundColor">
+      <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
         <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
-          <button
-            t-attf-class=" {{item.iconClass}} {{item.isSelected ? 'active' : ''}}"
-            class="o-chart-dashboard-item btn mt-1 me-1 p-1 "
+          <div
+            t-attf-class=" {{item.class}}"
+            class="o-chart-dashboard-item btn border-0 lh-1 p-1 d-flex align-items-center justify-content-center"
             t-att-title="item.label"
             t-on-click="item.onClick"
-            t-att-data-id="item.id"
-          />
+            t-att-data-id="item.id">
+            <t t-if="item.preview" t-call="{{item.preview}}"/>
+          </div>
         </t>
         <button
-          class="o-chart-dashboard-item btn mt-1 p-1 fa fa-ellipsis-v"
+          class="o-chart-dashboard-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
           t-on-click="openContextMenu"
         />
       </div>

src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu_store.ts

@@ -2,6 +2,7 @@ import { ChartDefinition, ChartType, UID } from "../../../..";
 import { chartRegistry, chartSubtypeRegistry } from "../../../../registries/chart_types";
 import { Get } from "../../../../store_engine";
 import { SpreadsheetStore } from "../../../../stores";
+import { _t } from "../../../../translation";
 
 export class ChartDashboardMenuStore extends SpreadsheetStore {
   mutators = ["reset"] as const;
@@ -21,10 +22,10 @@ export class ChartDashboardMenuStore extends SpreadsheetStore {
       const item = chartSubtypeRegistry.get(type);
       return {
         id: item.chartType,
-        label: item.displayName,
+        label: _t("Show as %s chart", item.displayName.toLowerCase()),
         onClick: () => this.updateType(item.chartType),
-        isSelected: item.chartType === this.getters.getChartDefinition(this.chartId).type,
-        iconClass: this.getIconClasses(item.chartType),
+        class: item.chartType === definition.type ? "active" : "",
+        preview: item.preview,
       };
     });
   }
@@ -62,17 +63,4 @@ export class ChartDashboardMenuStore extends SpreadsheetStore {
       sheetId: this.getters.getActiveSheetId(),
     });
   }
-
-  private getIconClasses(type: ChartType) {
-    if (type.includes("bar")) {
-      return "fa fa-bar-chart";
-    }
-    if (type.includes("line")) {
-      return "fa fa-line-chart";
-    }
-    if (type.includes("pie")) {
-      return "fa fa-pie-chart";
-    }
-    return "";
-  }
 }

src/components/full_screen_chart/full_screen_chart.xml

@@ -5,13 +5,13 @@
       t-if="chartId"
       t-on-click="exitFullScreen">
       <button
-        class="o-exit top-0 end-0 position-absolute o-button primary m-1"
+        class="o-exit top-0 end-0 position-absolute o-button primary m-1 shadow"
         t-on-click="exitFullScreen">
         Exit fullscreen
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-chart o-figure position-relative"
+          class="o-fullscreen-chart o-figure position-relative border rounded shadow"
           tabindex="1"
           t-ref="fullScreenChart"
           t-on-click.stop=""