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..131f94943 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -45,11 +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.closeLibraries = page.getByTestId("close-libraries"); + this.sidebar = page.getByTestId("left-sidebar"); this.librariesModal = page.getByTestId("libraries-modal"); } @@ -102,6 +100,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 +116,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); + async openLibrariesModal(clickOptions = {}) { + await this.sidebar.getByText("Libraries").click(clickOptions); } async clickLibrary(name, clickOptions = {}) { @@ -129,16 +134,14 @@ export class WorkspacePage extends BaseWebSocketPage { .getByTestId("library-item") .filter({ hasText: name }) .getByRole("button") - .click(clickOptions); + .click(clickOptions); } - async clickCloseLibraries(clickOptions = {}) { - await this.closeLibraries.click(clickOptions); + async closeLibrariesModal(clickOptions = {}) { + await this.librariesModal.getByRole("button", { name: "Close" }).click(clickOptions); } 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..468a661fa --- /dev/null +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -0,0 +1,58 @@ +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); + }); +}); + +test.describe("Assets tab", () => { + test("User adds a library and its automatically selected in the color palette", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + 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.goToWorkspace(); + + // Add Testing library 1 + await workspacePage.clickColorPalette(); + await workspacePage.clickAssets(); + // Now the get-file call should return a library + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); + await workspacePage.openLibrariesModal(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.closeLibrariesModal(); + + await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); + + // Remove Testing library 1 + await workspacePage.openLibrariesModal(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.closeLibrariesModal(); + + await expect( + workspacePage.palette.getByText("There are no color styles in your library yet"), + ).toBeVisible(); + }); +}); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index f391949b4..c96967384 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -39,44 +39,15 @@ test("User draws a rect", async ({ page }) => { await expect(shape).toHaveAttribute("height", "100"); }); -test("User adds a library and its automatically selected in the color palette", async ({ page }) => { - const workspacePage = new WorkspacePage(page); - 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.goToWorkspace(); - - // Add Testing library 1 - await workspacePage.clickColorPalette(); - await workspacePage.clickAssets(); - // 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 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.clickCloseLibraries(); - - await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible(); -}); - - test("User makes a group", async ({ page }) => { const workspacePage = new WorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json"); await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json"); - await workspacePage.goToWorkspace({ - fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", - pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375" + await workspacePage.goToWorkspace({ + fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", + pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375", }); await workspacePage.clickLeafLayer("Rectangle"); await workspacePage.page.keyboard.press("ControlOrMeta+g"); 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/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index d07517c7b..6d5813c0d 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -519,7 +519,7 @@ [:div {:class (stl/css :modal-dialog)} [:button {:class (stl/css :close-btn) :on-click close-dialog - :data-testid "close-libraries"} + :aria-label (tr "labels.close")} close-icon] [:div {:class (stl/css :modal-title)} (tr "workspace.libraries.libraries")] 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)