From 3fdd729be04d934d17acdf2520314bc220402e0d Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Fri, 22 Nov 2024 13:07:47 +0000 Subject: [PATCH] [FIX] composer: topbar composer z-index MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The topbar composer has a big z-index, so its formula assistant is displayed above the rest. But this z-index is useless when the composer is not focused. In fact, it causes problems in further versions where we end up with grid popovers being displayed below the composer. Also the css to color the border blue when the composer is focused wasn't working. closes odoo/o-spreadsheet#5330 Task: 4246966 X-original-commit: b6a0772f6caae3c36fb8b4fc600fe5dc2a82f7d1 Signed-off-by: Adrien Minne (adrm) Signed-off-by: Rémi Rahir (rar) --- src/components/composer/top_bar_composer/top_bar_composer.ts | 2 +- tests/spreadsheet/spreadsheet_component.test.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/composer/top_bar_composer/top_bar_composer.ts b/src/components/composer/top_bar_composer/top_bar_composer.ts index 2039efa57e..6011aad0db 100644 --- a/src/components/composer/top_bar_composer/top_bar_composer.ts +++ b/src/components/composer/top_bar_composer/top_bar_composer.ts @@ -28,7 +28,6 @@ css/* scss */ ` height: fit-content; margin-top: -1px; border: 1px solid; - z-index: ${ComponentsImportance.TopBarComposer}; font-family: ${DEFAULT_FONT}; .o-composer:empty:not(:focus):not(.active)::before { @@ -92,6 +91,7 @@ export class TopBarComposer extends Component { } return cssPropertiesToCss({ "border-color": SELECTION_BORDER_COLOR, + "z-index": String(ComponentsImportance.TopBarComposer), }); } diff --git a/tests/spreadsheet/spreadsheet_component.test.ts b/tests/spreadsheet/spreadsheet_component.test.ts index 37669f1fb5..fdf72fe4d7 100644 --- a/tests/spreadsheet/spreadsheet_component.test.ts +++ b/tests/spreadsheet/spreadsheet_component.test.ts @@ -208,7 +208,10 @@ describe("Simple Spreadsheet Component", () => { const gridComposerZIndex = getZIndex("div.o-grid-composer"); const highlighZIndex = getZIndex(".o-highlight"); - await typeInComposerTopBar("=SUM(A1,A2)"); + const inactiveTopBarComposerZIndex = getZIndex(".o-topbar-composer .o-composer-container"); + expect(inactiveTopBarComposerZIndex).toBe(0); + + await simulateClick(".o-topbar-composer .o-composer"); const topBarComposerZIndex = getZIndex(".o-topbar-composer"); createChart(model, { type: "bar" }, "thisIsAnId");