[IMP] carousel: add read data view

demo/main.js

@@ -1,6 +1,6 @@
 // Don't remove unused import
 // organize-imports-ignore
-import { demoData, makeLargeDataset } from "./data.js";
+import { demoData, makeLargeDataset, dashboardDemoData } from "./data.js";
 import { makePivotDataset } from "./pivot.js";
 import { currenciesData } from "./currencies.js";
 import { WebsocketTransport } from "./transport.js";
@@ -322,6 +322,8 @@ class Demo extends Component {
       this.stateUpdateMessages = [];
     }
     this.createModel(data || demoData);
+    // ADRM TODO: delete this and the demo data
+    // this.createModel(data || dashboardDemoData);
     // this.createModel(makePivotDataset(10_000));
     // this.createModel(makeLargeDataset(26, 10_000, ["numbers"]));
     //this.createModel(makeLargeDataset(26, 10_000, ["formulasSquished"]));

src/components/dashboard/clickable_cell_store.ts

@@ -112,4 +112,13 @@ export class ClickableCellsStore extends SpreadsheetStore {
 
     return clickableRect;
   }
+
+  // ADRM TODO: that's a very solid and very cool hack to have a getter in a store :)
+  get clickableCellsGetter() {
+    return {
+      get: (position: CellPosition): CellClickableItem | undefined => {
+        return this.getClickableItem(position);
+      },
+    };
+  }
 }

src/components/figures/figure/figure.ts

@@ -52,7 +52,6 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
   private menuState: MenuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
 
   private figureRef = useRef("figure");
-  private figureWrapperRef = useRef("figureWrapper");
   private menuButtonRef = useRef("menuButton");
 
   private borderWidth!: number;
@@ -258,14 +257,6 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
       .menuBuilder(this.props.figureUI.id, this.env);
   }
 
-  editWrapperStyle(properties: CSSProperties) {
-    if (this.figureWrapperRef.el) {
-      for (const property in properties) {
-        this.figureWrapperRef.el.style.setProperty(property, properties[property] || null);
-      }
-    }
-  }
-
   get isFigureResizable(): boolean {
     return (
       this.isSelected &&

src/components/figures/figure/figure.xml

@@ -3,8 +3,7 @@
     <div
       class="o-figure-wrapper os-theme-dependant"
       t-att-class="{'o-figure-selected': isSelected}"
-      t-att-style="wrapperStyle"
-      t-ref="figureWrapper">
+      t-att-style="wrapperStyle">
       <div
         class="o-figure w-100 h-100"
         t-att-class="props.class"
@@ -21,7 +20,6 @@
           t-component="figureRegistry.get(props.figureUI.tag).Component"
           t-key="props.figureUI.id"
           figureUI="props.figureUI"
-          editFigureStyle.bind="editWrapperStyle"
           openContextMenu.bind="openContextMenu"
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">

src/components/figures/figure_carousel/figure_carousel.css

@@ -17,17 +17,10 @@
     z-index: 1;
 
     overflow: hidden;
-    padding-left: 4px; /* Align with MIN_CELL_TEXT_MARGIN */
-
-    border: 1px solid transparent;
-
-    &.o-carousel-header-floating {
-      border: 1px solid var(--os-figure-border-color);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
 
     .o-carousel-title {
       max-width: 60%;
+      font-weight: 500;
     }
 
     .o-carousel-tabs {

src/components/figures/figure_carousel/figure_carousel.ts

@@ -17,10 +17,10 @@ import { getBoundingRectAsPOJO, getRefBoundingRect } from "../../helpers/dom_hel
 import { MenuPopover, MenuState } from "../../menu_popover/menu_popover";
 import { ChartAnimationStore } from "../chart/chartJs/chartjs_animation_store";
 import { ChartDashboardMenu } from "../chart/chart_dashboard_menu/chart_dashboard_menu";
+import { HTMLGrid } from "../html_grid/html_grid";
 
 interface Props {
   figureUI: FigureUI;
-  editFigureStyle?: (properties: CSSProperties) => void;
   isFullScreen?: boolean;
   openContextMenu?: (anchorRect: Rect, onClose?: () => void) => void;
 }
@@ -29,11 +29,10 @@ export class CarouselFigure extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-CarouselFigure";
   static props = {
     figureUI: Object,
-    editFigureStyle: { type: Function, optional: true },
     isFullScreen: { type: Boolean, optional: true },
     openContextMenu: { type: Function, optional: true },
   };
-  static components = { ChartDashboardMenu, MenuPopover };
+  static components = { ChartDashboardMenu, MenuPopover, HTMLGrid };
 
   private carouselTabsRef = useRef("carouselTabs");
   private carouselTabsDropdownRef = useRef("carouselTabsDropdown");
@@ -49,11 +48,6 @@ export class CarouselFigure extends Component<Props, SpreadsheetChildEnv> {
     this.fullScreenFigureStore = useStore(FullScreenFigureStore);
 
     useEffect(() => {
-      if (this.selectedCarouselItem?.type === "carouselDataView") {
-        this.props.editFigureStyle?.({ "pointer-events": "none" });
-      } else {
-        this.props.editFigureStyle?.({ "pointer-events": "auto" });
-      }
       this.updateTabsVisibility();
     });
   }
@@ -105,7 +99,7 @@ export class CarouselFigure extends Component<Props, SpreadsheetChildEnv> {
     }
   }
 
-  get headerStyle(): string {
+  get carouselStyle(): string {
     const cssProperties: CSSProperties = {};
     const backgroundColor = this.env.model.getters.getSpreadsheetTheme().backgroundColor;
     if (this.selectedCarouselItem?.type === "chart") {
@@ -184,25 +178,24 @@ export class CarouselFigure extends Component<Props, SpreadsheetChildEnv> {
   }
 
   toggleFullScreen() {
-    if (this.selectedCarouselItem?.type === "chart") {
-      this.fullScreenFigureStore.toggleFullScreenFigure(this.props.figureUI.id);
-    }
+    this.fullScreenFigureStore.toggleFullScreenFigure(this.props.figureUI.id);
   }
 
   get fullScreenButtonTitle(): string {
     return this.props.isFullScreen ? _t("Exit Full Screen") : _t("Full Screen");
   }
 
-  get visibleCarouselItems(): CarouselItem[] {
-    return this.carousel.items.filter((item) =>
-      item.type === "carouselDataView" && this.props.isFullScreen ? false : true
-    );
-  }
-
   openContextMenu(event: MouseEvent) {
     const target = event.currentTarget as HTMLElement;
     if (target) {
       this.props.openContextMenu?.(getBoundingRectAsPOJO(target));
     }
   }
+
+  onMouseWheel(ev: WheelEvent) {
+    const target = ev.currentTarget as HTMLElement;
+    if (target && target.scrollHeight > target.clientHeight) {
+      ev.stopPropagation();
+    }
+  }
 }

src/components/figures/figure_carousel/figure_carousel.xml

@@ -1,22 +1,23 @@
 <templates>
   <t t-name="o-spreadsheet-CarouselFigure">
-    <div class="o-carousel w-100 h-100 d-flex flex-column" t-on-dblclick="onCarouselDoubleClick">
+    <div
+      class="o-carousel w-100 h-100 d-flex flex-column px-4 py-2"
+      t-att-style="carouselStyle"
+      t-on-dblclick="onCarouselDoubleClick">
       <t t-set="selectedItem" t-value="selectedCarouselItem"/>
-      <div
-        class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pe-1 pe-auto"
-        t-att-class="{
-          'border-bottom': env.isDashboard(),
-          'o-carousel-header-floating': !env.isDashboard() and selectedItem?.type === 'carouselDataView',
-         }"
-        t-att-style="headerStyle">
+      <div class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pt-1 pb-2 pe-auto">
         <div
           class="o-carousel-title text-truncate flex-shrink-0 pe-2"
           t-out="title"
           t-att-title="title"
           t-att-style="titleStyle"
         />
         <div class="o-carousel-tabs d-flex flex-fill justify-content-end" t-ref="carouselTabs">
-          <t t-foreach="visibleCarouselItems" t-as="item" t-key="item_index">
+          <t
+            t-foreach="this.carousel.items"
+            t-as="item"
+            t-key="item_index"
+            t-if="this.carousel.items.length > 1">
             <div
               class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
               t-att-class="{ 'selected': isItemSelected(item) }"
@@ -48,7 +49,6 @@
           t-att-class="{
             'fa-compress': props.isFullScreen,
             'fa-expand': !props.isFullScreen,
-            'invisible': selectedCarouselItem?.type !== 'chart',
           }"
           t-on-click="toggleFullScreen"
         />
@@ -58,6 +58,7 @@
           t-on-click="openContextMenu"
         />
       </div>
+      <div t-if="title" class="w-100 border-bottom"/>
       <div
         t-if="!selectedItem"
         class="o-carousel-empty w-100 flex-fill d-flex align-items-center justify-content-center">
@@ -81,6 +82,12 @@
           t-key="selectedItem.chartId"
         />
       </div>
+      <div
+        t-elif="selectedItem.type === 'carouselDataView' and selectedItem.range"
+        class="my-2 h-100 w-100 overflow-auto"
+        t-on-wheel="onMouseWheel">
+        <HTMLGrid range="selectedItem.range"/>
+      </div>
     </div>
   </t>
 </templates>

src/components/figures/figure_chart/figure_chart.ts

@@ -2,7 +2,7 @@ import { Component } from "@odoo/owl";
 import { chartComponentRegistry } from "../../../registries/chart_component_registry";
 import { ChartType } from "../../../types/chart/chart";
 import { FigureUI } from "../../../types/figure";
-import { CSSProperties, UID } from "../../../types/misc";
+import { UID } from "../../../types/misc";
 import { Rect } from "../../../types/rendering";
 import { SpreadsheetChildEnv } from "../../../types/spreadsheet_env";
 import { ChartDashboardMenu } from "../chart/chart_dashboard_menu/chart_dashboard_menu";
@@ -11,7 +11,6 @@ interface Props {
   // props figure is currently necessary scorecards, we need the chart dimension at render to avoid having to force the
   // style by hand in the useEffect()
   figureUI: FigureUI;
-  editFigureStyle?: (properties: CSSProperties) => void;
   isFullScreen?: boolean;
   openContextMenu?: (anchorRect: Rect, onClose?: () => void) => void;
 }
@@ -20,7 +19,6 @@ export class ChartFigure extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartFigure";
   static props = {
     figureUI: Object,
-    editFigureStyle: { type: Function, optional: true },
     isFullScreen: { type: Boolean, optional: true },
     openContextMenu: { type: Function, optional: true },
   };

src/components/figures/figure_container/figure_container.xml

@@ -3,7 +3,7 @@
     <div class="position-absolute">
       <t t-foreach="containers" t-as="container" t-key="container.type">
         <div
-          class="o-figure-container position-absolute pe-none overflow-hidden"
+          class="o-figure-container position-absolute pe-none"
           t-att-style="container.style"
           t-att-data-id="container.type + 'Container'">
           <div
@@ -23,7 +23,7 @@
       </t>
     </div>
     <div
-      class="o-figure-container position-absolute pe-none overflow-hidden"
+      class="o-figure-container position-absolute pe-none"
       t-if="dnd.horizontalSnap"
       t-att-style="dnd.horizontalSnap.containerStyle"
       t-att-data-id="'HorizontalSnapContainer'">

src/components/figures/figure_image/figure_image.ts

@@ -1,20 +1,18 @@
 import { Component } from "@odoo/owl";
 import { FigureUI } from "../../../types/figure";
-import { CSSProperties, UID } from "../../../types/misc";
+import { UID } from "../../../types/misc";
 import { Rect } from "../../../types/rendering";
 import { SpreadsheetChildEnv } from "../../../types/spreadsheet_env";
 
 interface Props {
   figureUI: FigureUI;
-  editFigureStyle?: (properties: CSSProperties) => void;
   openContextMenu?: (anchorRect: Rect, onClose?: () => void) => void;
 }
 
 export class ImageFigure extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ImageFigure";
   static props = {
     figureUI: Object,
-    editFigureStyle: { type: Function, optional: true },
     openContextMenu: { type: Function, optional: true },
   };
   static components = {};

src/components/figures/html_cell/html_cell.css

@@ -0,0 +1,34 @@
+.o-spreadsheet {
+  .o-html-cell-wrapper {
+    padding: 2px 0;
+
+    &.clickable {
+      cursor: pointer;
+    }
+  }
+
+  .o-html-cell {
+    font-family: Roboto, arial;
+    overflow: hidden;
+    z-index: 0;
+    min-height: 24px;
+    padding: 0 8px;
+
+    .o-html-cell-data-bar {
+      z-index: -1;
+      border-radius: 4px;
+    }
+
+    &.hovered:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.5;
+      background-color: var(--os-hovered-menu-item-color);
+      pointer-events: none;
+    }
+  }
+}