From 04f341ce1dcb7df41674e5944eccfd75cf5b702b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 13:37:32 +0200 Subject: [PATCH] :bug: Fix layers tree not expanding towards the bottom edge --- CHANGES.md | 3 ++- frontend/playwright/ui/pages/WorkspacePage.js | 24 +++++++++++-------- frontend/playwright/ui/specs/sidebar.spec.js | 23 ++++++++++++++++++ .../playwright/ui/specs/workspace.spec.js | 17 ++++++++----- .../app/main/ui/components/tab_container.cljs | 1 - .../src/app/main/ui/workspace/sidebar.cljs | 9 ++++--- .../src/app/main/ui/workspace/sidebar.scss | 2 -- .../app/main/ui/workspace/sidebar/layers.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap.cljs | 1 - 9 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 frontend/playwright/ui/specs/sidebar.spec.js diff --git a/CHANGES.md b/CHANGES.md index 5999d5c16..beeea77a4 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,7 +19,8 @@ ### :bug: Bugs fixed -- Fix guides move when board is moved by inputs [Taiga 8010](https://tree.taiga.io/project/penpot/issue/8010) +- Fix layer tree not expanding to the bottom edge [Taiga #7466](https://tree.taiga.io/project/penpot/issue/7466) +- Fix guides move when board is moved by inputs [Taiga #8010](https://tree.taiga.io/project/penpot/issue/8010) - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988) - Fix constraints dropdown when selecting multiple shapes [Taiga #7686](https://tree.taiga.io/project/penpot/issue/7686) - Layout and scrollign fixes for the bottom palette [Taiga #7559](https://tree.taiga.io/project/penpot/issue/7559) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 72e0fa9fd..e2c7b11d8 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -45,10 +45,9 @@ export class WorkspacePage extends BaseWebSocketPage { this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`); this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" }); this.colorpicker = page.getByTestId("colorpicker"); - this.layers = page.getByTestId("layers"); + this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); - this.assets = page.getByTestId("assets"); - this.libraries = page.getByTestId("libraries"); + this.sidebar = page.getByTestId("left-sidebar"); this.closeLibraries = page.getByTestId("close-libraries"); this.librariesModal = page.getByTestId("libraries-modal"); } @@ -102,6 +101,11 @@ export class WorkspacePage extends BaseWebSocketPage { await this.page.mouse.up(); } + async togglePages() { + const pagesToggle = this.page.getByText("Pages"); + await pagesToggle.click(); + } + async clickLeafLayer(name, clickOptions = {}) { const layer = this.layers.getByText(name); await layer.click(clickOptions); @@ -113,15 +117,17 @@ export class WorkspacePage extends BaseWebSocketPage { } async expectSelectedLayer(name) { - await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass(/selected/); + await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass( + /selected/, + ); } async clickAssets(clickOptions = {}) { - await this.assets.click(clickOptions); + await this.sidebar.getByText("Assets").click(clickOptions); } async clickLibraries(clickOptions = {}) { - await this.libraries.click(clickOptions); + await this.sidebar.getByText("Libraries").click(clickOptions); } async clickLibrary(name, clickOptions = {}) { @@ -129,7 +135,7 @@ export class WorkspacePage extends BaseWebSocketPage { .getByTestId("library-item") .filter({ hasText: name }) .getByRole("button") - .click(clickOptions); + .click(clickOptions); } async clickCloseLibraries(clickOptions = {}) { @@ -137,8 +143,6 @@ export class WorkspacePage extends BaseWebSocketPage { } async clickColorPalette(clickOptions = {}) { - await this.palette - .getByRole("button", { name: "Color Palette (Alt+P)" }) - .click(clickOptions); + await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions); } } diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js new file mode 100644 index 000000000..f88fd613c --- /dev/null +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -0,0 +1,23 @@ +import { test, expect } from "@playwright/test"; +import { WorkspacePage } from "../pages/WorkspacePage"; + +test.beforeEach(async ({ page }) => { + await WorkspacePage.init(page); +}); + +test.describe("Layers tab", () => { + test("BUG 7466 - Layers tab height extends to the bottom when 'Pages' is collapsed", async ({ page }) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + + await workspace.goToWorkspace(); + + const { height: heightExpanded } = await workspace.layers.boundingBox(); + await workspace.togglePages(); + const { height: heightCollapsed } = await workspace.layers.boundingBox(); + + console.log(heightExpanded, heightCollapsed); + + expect(heightExpanded > heightCollapsed); + }); +}); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index f391949b4..c0d495b7e 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -44,8 +44,11 @@ test("User adds a library and its automatically selected in the color palette", await workspacePage.setupEmptyFile(); await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); - await workspacePage.mockRPC("get-team-shared-files?team-id=*", "workspace/get-team-shared-libraries-non-empty.json"); - + await workspacePage.mockRPC( + "get-team-shared-files?team-id=*", + "workspace/get-team-shared-libraries-non-empty.json", + ); + await workspacePage.goToWorkspace(); // Add Testing library 1 @@ -54,17 +57,19 @@ test("User adds a library and its automatically selected in the color palette", // Now the get-file call should return a library await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1") - await workspacePage.clickCloseLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); // Remove Testing library 1 await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1") + await workspacePage.clickLibrary("Testing library 1"); await workspacePage.clickCloseLibraries(); - await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible(); + await expect( + workspacePage.palette.getByText("There are no color styles in your library yet"), + ).toBeVisible(); }); diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 1e3b99079..20c79a417 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -59,7 +59,6 @@ [:div {:key (str/concat "tab-" sid) :title tooltip :data-id sid - :data-testid sid :on-click on-click :class (stl/css-case :tab-container-tab-title true diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index d64842075..1aaf88c7b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -38,8 +38,7 @@ (let [options-mode (mf/deref refs/options-mode-global) mode-inspect? (= options-mode :inspect) project (mf/deref refs/workspace-project) - show-pages? (mf/use-state true) - toggle-pages (mf/use-callback #(reset! show-pages? not)) + section (cond (or mode-inspect? (contains? layout :layers)) :layers (contains? layout :assets) :assets) @@ -50,9 +49,12 @@ {on-pointer-down :on-pointer-down on-lost-pointer-capture :on-lost-pointer-capture on-pointer-move :on-pointer-move parent-ref :parent-ref size :size} (use-resize-hook :left-sidebar 275 275 500 :x false :left) - {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages :size} + {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages-opened :size} (use-resize-hook :sitemap 200 38 400 :y false nil) + show-pages? (mf/use-state true) + toggle-pages (mf/use-callback #(reset! show-pages? not)) + size-pages (mf/use-memo (mf/deps show-pages? size-pages-opened) (fn [] (if @show-pages? size-pages-opened 32))) handle-collapse (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) @@ -63,6 +65,7 @@ [:& (mf/provider muc/sidebar) {:value :left} [:aside {:ref parent-ref :id "left-sidebar-aside" + :data-testid "left-sidebar" :data-size (str size) :class (stl/css-case :left-settings-bar true :global/two-row (<= size 300) diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 192a8416e..f70e37e5e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -84,10 +84,8 @@ $width-settings-bar-max: $s-500; .resize-area-horiz { position: absolute; - // top: calc($s-88 + var(--height, 200px)); left: 0; width: 100%; - // height: $s-8; border-bottom: $s-2 solid var(--resize-area-border-color); cursor: ns-resize; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 737f80fdd..ec072f367 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -510,7 +510,7 @@ (mf/use-fn #(st/emit! (dw/toggle-focus-mode)))] - [:div#layers {:class (stl/css :layers) :data-testid "layers"} + [:div#layers {:class (stl/css :layers) :data-testid "layer-tree"} (if (d/not-empty? focus) [:div {:class (stl/css :tool-window-bar)} [:button {:class (stl/css :focus-title) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 39064f7c7..1d9cc9e4d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -205,7 +205,6 @@ (fn [event] (st/emit! (dw/create-page {:file-id file-id :project-id project-id})) (-> event dom/get-current-target dom/blur!))) - size (if show-pages? size 32) read-only? (mf/use-ctx ctx/workspace-read-only?)] [:div {:class (stl/css :sitemap)