diff --git a/CHANGES.md b/CHANGES.md
index 70ac184d5..27d52286d 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -43,6 +43,7 @@
- Toolbar keeps toggling on and off on spacebar press [Taiga #7654](https://github.com/penpot/penpot/pull/7654)
- Fix toolbar keeps hiding when click outside workspace [Taiga #7776](https://tree.taiga.io/project/penpot/issue/7776)
- Fix open overlay relative to a frame [Taiga #7563](https://tree.taiga.io/project/penpot/issue/7563)
+- Workspace-palette items stay hidden when opening with keyboard-shortcut [Taiga #7489](https://tree.taiga.io/project/penpot/issue/7489)
## 2.0.3
diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js
index c8f0c49cc..c227f09b6 100644
--- a/frontend/playwright/ui/pages/WorkspacePage.js
+++ b/frontend/playwright/ui/pages/WorkspacePage.js
@@ -53,6 +53,7 @@ export class WorkspacePage extends BaseWebSocketPage {
this.selectionRect = page.getByTestId("workspace-selection-rect");
this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar");
this.librariesModal = page.getByTestId("libraries-modal");
+ this.togglePalettesVisibility = page.getByTestId("toggle-palettes-visibility");
}
async goToWorkspace({ fileId = WorkspacePage.anyFileId, pageId = WorkspacePage.anyPageId } = {}) {
@@ -173,4 +174,9 @@ export class WorkspacePage extends BaseWebSocketPage {
.getByRole("button", { name: "Color Palette (Alt+P)" })
.click(clickOptions);
}
+
+ async clickTogglePalettesVisibility(clickOptions = {}) {
+ await this.togglePalettesVisibility
+ .click(clickOptions);
+ }
}
diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js
index 3682ecf68..086b7de19 100644
--- a/frontend/playwright/ui/specs/workspace.spec.js
+++ b/frontend/playwright/ui/specs/workspace.spec.js
@@ -120,3 +120,14 @@ test("User adds a library and its automatically selected in the color palette",
await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible();
});
+
+test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard-shortcut", async ({ page }) => {
+ const workspacePage = new WorkspacePage(page);
+ await workspacePage.setupEmptyFile();
+ await workspacePage.goToWorkspace();
+
+ await workspacePage.clickTogglePalettesVisibility();
+ await workspacePage.page.keyboard.press("Alt+t");
+
+ await expect(workspacePage.palette.getByText("There are no typography styles in your library yet")).toBeVisible();
+});
diff --git a/frontend/src/app/main/data/workspace/layout.cljs b/frontend/src/app/main/data/workspace/layout.cljs
index 157de23f7..6b17a1e7f 100644
--- a/frontend/src/app/main/data/workspace/layout.cljs
+++ b/frontend/src/app/main/data/workspace/layout.cljs
@@ -20,6 +20,7 @@
:comments
:assets
:document-history
+ :hide-palettes
:colorpalette
:element-options
:rulers
@@ -134,7 +135,8 @@
"A map of layout flags that should be persisted in local storage; the
value corresponds to the key that will be used for save the data in
storage object. It should be namespace qualified."
- {:colorpalette :app.main.data.workspace/show-colorpalette?
+ {:hide-palettes :app.main.data.workspace/hide-palettes?
+ :colorpalette :app.main.data.workspace/show-colorpalette?
:textpalette :app.main.data.workspace/show-textpalette?})
(defn load-layout-flags
diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs
index 45a763cca..bd0071602 100644
--- a/frontend/src/app/main/data/workspace/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/shortcuts.cljs
@@ -436,14 +436,16 @@
:command (ds/a-mod "p")
:subsections [:panels]
:fn #(do (r/set-resize-type! :bottom)
- (emit-when-no-readonly (dw/remove-layout-flag :textpalette)
+ (emit-when-no-readonly (dw/remove-layout-flag :hide-palettes)
+ (dw/remove-layout-flag :textpalette)
(toggle-layout-flag :colorpalette)))}
:toggle-textpalette {:tooltip (ds/alt "T")
:command (ds/a-mod "t")
:subsections [:panels]
:fn #(do (r/set-resize-type! :bottom)
- (emit-when-no-readonly (dw/remove-layout-flag :colorpalette)
+ (emit-when-no-readonly (dw/remove-layout-flag :hide-palettes)
+ (dw/remove-layout-flag :colorpalette)
(toggle-layout-flag :textpalette)))}
:hide-ui {:tooltip "\\"
diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index b0d246a99..bf3f262ea 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -50,12 +50,12 @@
[{:keys [layout on-change-palette-size]}]
(let [color-palette? (:colorpalette layout)
text-palette? (:textpalette layout)
+ hide-palettes? (:hide-palettes layout)
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
container (mf/use-ref nil)
- state* (mf/use-state {:show-menu false :hide-palettes false})
+ state* (mf/use-state {:show-menu false})
state (deref state*)
show-menu? (:show-menu state)
- hide-palettes? (:hide-palettes state)
selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
selected-text* (mf/use-state :file)
selected-text (deref selected-text*)
@@ -100,15 +100,19 @@
toggle-palettes
(mf/use-callback
(fn [_]
- (swap! state* update :hide-palettes not)))
+ (r/set-resize-type! :top)
+ (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
+ (st/emit! (-> (dw/toggle-layout-flag :hide-palettes)
+ (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))
on-select-color-palette
(mf/use-fn
(fn [event]
(let [node (dom/get-current-target event)]
(r/set-resize-type! :top)
- (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
- (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
+ (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
+ (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :hide-palettes)
+ (dw/remove-layout-flag :textpalette)
(-> (dw/toggle-layout-flag :colorpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
(dom/blur! node))))
@@ -118,8 +122,9 @@
(fn [event]
(let [node (dom/get-current-target event)]
(r/set-resize-type! :top)
- (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
- (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
+ (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
+ (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :hide-palettes)
+ (dw/remove-layout-flag :colorpalette)
(-> (dw/toggle-layout-flag :textpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
(dom/blur! node))))
@@ -198,5 +203,6 @@
:selected @selected
:width vport-width}]])]]
[:div {:class (stl/css :handler)
- :on-click toggle-palettes}
+ :on-click toggle-palettes
+ :data-testid "toggle-palettes-visibility"}
[:div {:class (stl/css :handler-btn)}]])])]))