diff --git a/frontend/playwright/ui/specs/colorpicker.spec.js b/frontend/playwright/ui/specs/colorpicker.spec.js index 5b6d8253a5..cc772aa3a3 100644 --- a/frontend/playwright/ui/specs/colorpicker.spec.js +++ b/frontend/playwright/ui/specs/colorpicker.spec.js @@ -318,4 +318,18 @@ test("Color picker color list", async ({ page }) => { await expect( colorpicker.getByRole("listitem", { name: "First color" }), ).toBeVisible(); + + //test show and hide color palette + const paletteToggle = workspacePage.page.getByRole('button', { name: 'Toggle color palette' }); + await paletteToggle.click(); + const paletteBar = workspacePage.page.getByRole('region', { name: 'Palette bar' }); + await expect(paletteBar).toBeVisible(); + + // Check that color palette is open by checking the presence of a color swatch in the palette + const paletteSwatch = paletteBar.getByRole('button', { name: 'first color' }); + await expect(paletteSwatch).toBeVisible(); + + // Close the color palette + await paletteToggle.click(); + await expect(paletteSwatch).not.toBeVisible(); }); diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index f399622f54..c145a203b7 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -47,6 +47,20 @@ (let [wglobal (:workspace-global state)] (layout/persist-layout-state! wglobal))))) +(defn toggle-palette + "Toggle the palette tool and change the library it uses" + [selected] + (ptk/reify ::toggle-palette + ptk/WatchEvent + (watch [_ _ _] + (rx/of (layout/toggle-layout-flag :colorpalette) + (mbc/event colorpalette-selected-broadcast-key selected))) + + ptk/EffectEvent + (effect [_ state _] + (let [wglobal (:workspace-global state)] + (layout/persist-layout-state! wglobal))))) + (defn start-picker [] (ptk/reify ::start-picker diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index d69d06a7d5..a304a2c27c 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -193,6 +193,7 @@ [{:keys [state on-select-color on-add-library-color disable-gradient disable-opacity disable-image]}] (let [selected* (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent) selected (deref selected*) + layout (mf/deref refs/workspace-layout) view-mode* (mf/use-state :grid) view-mode (deref view-mode*) @@ -250,7 +251,7 @@ (r/set-resize-type! :bottom) (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") (st/emit! (dw/remove-layout-flag :textpalette) - (-> (mdc/show-palette selected) + (-> (mdc/toggle-palette selected) (vary-meta assoc ::ev/origin "workspace-colorpicker"))))) toggle-view-mode @@ -332,8 +333,9 @@ [:> icon-button* {:variant "ghost" - :aria-label (tr "workspace.libraries.colors.show-color-palette") + :aria-label (tr "workspace.libraries.colors.toggle-color-palette") :on-click toggle-palette + :aria-pressed (boolean (contains? layout :colorpalette)) :icon i/swatches}] [:> icon-button* diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 7892f545d6..11ba417e9b 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -160,10 +160,11 @@ width (obj/get dom "clientWidth")] (swap! state* assoc :width width))) - [:div {:class (stl/css :palette-wrapper) - :id "palette-wrapper" - :style (calculate-palette-style rulers?) - :data-testid "palette"} + [:section {:class (stl/css :palette-wrapper) + :id "palette-wrapper" + :style (calculate-palette-style rulers?) + :aria-label (tr "workspace.toolbar.palette-bar") + :data-testid "palette"} (when-not ^boolean read-only? [:div {:ref parent-ref :class (dm/str size-classname " " (stl/css-case :palettes true diff --git a/frontend/translations/en.po b/frontend/translations/en.po index ad7034181f..455719f29d 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6998,8 +6998,8 @@ msgid "workspace.libraries.colors.add-library-color" msgstr "Add color to library" #: src/app/main/ui/workspace/colorpicker/libraries.cljs -msgid "workspace.libraries.colors.show-color-palette" -msgstr "Show color palette" +msgid "workspace.libraries.colors.toggle-color-palette" +msgstr "Toggle color palette" #: src/app/main/ui/workspace/colorpicker/libraries.cljs msgid "workspace.libraries.colors.empty-recent-colors" @@ -9651,6 +9651,10 @@ msgstr "Assets" msgid "workspace.toolbar.color-palette" msgstr "Color Palette (%s)" +#: src/app/main/ui/workspace/palette.cljs +msgid "workspace.toolbar.palette-bar" +msgstr "Palette bar" + #: src/app/main/ui/workspace/right_header.cljs:214, src/app/main/ui/workspace/right_header.cljs:215 msgid "workspace.toolbar.comments" msgstr "Comments (%s)" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c2a31d5670..d48f64a9e9 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6830,8 +6830,8 @@ msgid "workspace.libraries.colors.add-library-color" msgstr "Añadir color a la biblioteca del archivo" #: src/app/main/ui/workspace/colorpicker/libraries.cljs -msgid "workspace.libraries.colors.show-color-palette" -msgstr "Mostrar paleta de colores" +msgid "workspace.libraries.colors.toggle-color-palette" +msgstr "Mostrar/Ocultar paleta de colores" #: src/app/main/ui/workspace/colorpicker/libraries.cljs msgid "workspace.libraries.colors.empty-recent-colors" @@ -9324,6 +9324,10 @@ msgstr "Recursos" msgid "workspace.toolbar.color-palette" msgstr "Paleta de colores (%s)" +#: src/app/main/ui/workspace/palette.cljs +msgid "workspace.toolbar.palette-bar" +msgstr "Barra de paletas" + #: src/app/main/ui/workspace/right_header.cljs:214, src/app/main/ui/workspace/right_header.cljs:215 msgid "workspace.toolbar.comments" msgstr "Comentarios (%s)"