github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-13 02:42:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Toggle color library visibility from the colorpicker shortcut button (#10129)

Browse Source 
* ♻️ Transform a show button to a toggle button on colorpicker

* 🎉 Add test

* 🎉 Add aria-pressed to toggle palette button
This commit is contained in:
Eva Marco 2026-06-12 13:30:57 +02:00 committed by GitHub
parent 68d4238277
commit c66ee1803f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 49 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/playwright/ui/specs/colorpicker.spec.js
View File

@ -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();
});

14
frontend/src/app/main/data/workspace/colors.cljs
View File

@ -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

6
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View File

@ -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*

9
frontend/src/app/main/ui/workspace/palette.cljs
View File

@ -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

8
frontend/translations/en.po
View File

@ -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)"

8
frontend/translations/es.po
View File

@ -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)"