From 8c89731df6df295adb41ea58f5f9dba8e8eabbb0 Mon Sep 17 00:00:00 2001 From: Dhrutik Patel Date: Mon, 20 Mar 2023 13:21:04 +0000 Subject: [PATCH] [FIX] popover: adjusted z-index for the popovers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously, the Popovers component had a higher z-index value than the Grid Composer component. As a result, Popovers would appear on top of the Composer Assistant. To resolve this issue, a new enum has been introduced called GridPopover. Whenever a call is made from grid_popover.ts, the z-index value will be set to GridPopover enum. Otherwise, the z-index value for Popovers will remain the same i.e. 30. Task-3211697 closes odoo/o-spreadsheet#2206 Signed-off-by: Rémi Rahir (rar) --- src/components/grid_popover/grid_popover.ts | 2 ++ src/components/grid_popover/grid_popover.xml | 3 ++- src/components/popover/popover.ts | 4 +++- src/constants.ts | 5 +++-- tests/components/__snapshots__/grid.test.ts.snap | 2 +- .../link/__snapshots__/link_display.test.ts.snap | 2 +- tests/components/spreadsheet.test.ts | 11 ++++++++--- 7 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/grid_popover/grid_popover.ts b/src/components/grid_popover/grid_popover.ts index feaa187123..9862061671 100644 --- a/src/components/grid_popover/grid_popover.ts +++ b/src/components/grid_popover/grid_popover.ts @@ -1,4 +1,5 @@ import { Component } from "@odoo/owl"; +import { ComponentsImportance } from "../../constants"; import { DOMCoordinates, Position, SpreadsheetChildEnv } from "../../types"; import { ClosedCellPopover, PositionedCellPopover } from "../../types/cell_popovers"; import { Popover } from "../popover/popover"; @@ -12,6 +13,7 @@ interface Props { export class GridPopover extends Component { static template = "o-spreadsheet-GridPopover"; static components = { Popover }; + zIndex = ComponentsImportance.GridPopover; get cellPopover(): PositionedCellPopover | ClosedCellPopover { const popover = this.env.model.getters.getCellPopover(this.props.hoveredCell); diff --git a/src/components/grid_popover/grid_popover.xml b/src/components/grid_popover/grid_popover.xml index c3c82b29a1..f2a84950df 100644 --- a/src/components/grid_popover/grid_popover.xml +++ b/src/components/grid_popover/grid_popover.xml @@ -7,7 +7,8 @@ childHeight="cellPopover.Component.size.height" flipHorizontalOffset="cellPopover.cellWidth" flipVerticalOffset="cellPopover.cellHeight" - onMouseWheel="props.onMouseWheel"> + onMouseWheel="props.onMouseWheel" + zIndex="zIndex"> void; + zIndex: Number; } export class Popover extends Component { @@ -37,6 +38,7 @@ export class Popover extends Component { verticalOffset: 0, marginTop: 0, onMouseWheel: () => {}, + zIndex: ComponentsImportance.Popover, }; private spreadsheetPosition = useSpreadsheetPosition(); @@ -55,7 +57,7 @@ export class Popover extends Component { const shadow = maxHeight !== 0 ? "box-shadow: 1px 2px 5px 2px rgb(51 51 51 / 15%);" : ""; return ` position: absolute; - z-index: ${ComponentsImportance.Popover}; + z-index: ${this.props.zIndex}; ${verticalPosition}px; ${horizontalPosition}px; ${height}px; diff --git a/src/constants.ts b/src/constants.ts index 17d630de20..6e4d1ceaff 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -194,12 +194,13 @@ export enum ComponentsImportance { Highlight = 5, Figure = 10, ScrollBar = 15, + GridPopover = 19, GridComposer = 20, - Dropdown = 25, + Dropdown = 21, ColorPicker = 25, IconPicker = 25, TopBarComposer = 30, - Popover = 30, + Popover = 35, ChartAnchor = 1000, } diff --git a/tests/components/__snapshots__/grid.test.ts.snap b/tests/components/__snapshots__/grid.test.ts.snap index 13bc4c4e73..acea758efe 100644 --- a/tests/components/__snapshots__/grid.test.ts.snap +++ b/tests/components/__snapshots__/grid.test.ts.snap @@ -126,7 +126,7 @@ exports[`error tooltip can display error tooltip 1`] = ` class="o-popover" style=" position: absolute; - z-index: 30; + z-index: 19; top:187px; left:336px; max-height:960px; diff --git a/tests/components/link/__snapshots__/link_display.test.ts.snap b/tests/components/link/__snapshots__/link_display.test.ts.snap index 09fe22ff31..3889629f82 100644 --- a/tests/components/link/__snapshots__/link_display.test.ts.snap +++ b/tests/components/link/__snapshots__/link_display.test.ts.snap @@ -3,7 +3,7 @@ exports[`link display component simple snapshot 1`] = ` "
{ const figureZIndex = getZIndex(".o-figure-wrapper"); const figureAnchorZIndex = getZIndex(".o-fig-anchor"); + setCellContent(model, "A1", "=SUM()"); + await clickCell(model, "A1"); + const gridPopoverZIndex = getZIndex(".o-popover"); + expect(gridZIndex).toBeLessThan(highlighZIndex); expect(highlighZIndex).toBeLessThan(figureZIndex); expect(figureZIndex).toBeLessThan(vScrollbarZIndex); expect(vScrollbarZIndex).toEqual(hScrollbarZIndex); expect(hScrollbarZIndex).toEqual(scrollbarCornerZIndex); - expect(scrollbarCornerZIndex).toBeLessThan(gridComposerZIndex); + expect(scrollbarCornerZIndex).toBeLessThan(gridPopoverZIndex); + expect(gridPopoverZIndex).toBeLessThan(gridComposerZIndex); expect(gridComposerZIndex).toBeLessThan(dropDownZIndex); - expect(dropDownZIndex).toEqual(colorPickerZIndex); + expect(dropDownZIndex).toBeLessThan(colorPickerZIndex); expect(colorPickerZIndex).toBeLessThan(topBarComposerZIndex); - expect(topBarComposerZIndex).toEqual(contextMenuZIndex); + expect(topBarComposerZIndex).toBeLessThan(contextMenuZIndex); expect(contextMenuZIndex).toBeLessThan(figureAnchorZIndex); });