Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-23 05:01:23 -05:00
Code Issues Activity

♻️ Switch swatch component in style bar

Browse source
This commit is contained in:
Xaviju 2025-01-17 12:53:09 +01:00 • committed by Xaviju
parent f1ccb00527
commit 1d22658818
3 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/ds/utilities/swatch.cljs
View file

@ -23,7 +23,7 @@
[color-item]
(let [name (:name color-item)
path (:path color-item)
path-and-name (if path (str path " / " name) name)
path-and-name (if (and path (not (str/empty? path))) (str path " / " name) name)
gradient (:gradient color-item)
image (:image color-item)
color (:color color-item)]

17
frontend/src/app/main/ui/workspace/color_palette.cljs
View file

@ -16,6 +16,7 @@
[app.main.store :as st]
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.context :as ctx]
[app.main.ui.ds.utilities.swatch :refer [swatch*]]
[app.main.ui.icons :as i]
[app.util.color :as uc]
[app.util.dom :as dom]
@ -40,13 +41,15 @@
{::ev/name "use-library-color"
::ev/origin "color-palette"
:external-library (not= selected :file)})))))]
[:div {:class (stl/css-case
:color-cell true
:is-not-library-color (nil? (:id color))
:no-text (<= size 64))
:title (uc/get-color-name color)
:on-click select-color}
[:& cb/color-bullet {:color color}]
[:button {:class (stl/css-case
:color-cell true
:is-not-library-color (nil? (:id color))
:no-text (<= size 64))
:title (uc/get-color-name color)
:aria-label (uc/get-color-name color)
:type "button"
:on-click select-color}
[:> swatch* {:background color :size "medium"}]
[:& cb/color-name {:color color :size size :origin :palette}]]))
(mf/defc palette*

5
frontend/src/app/main/ui/workspace/color_palette.scss
View file

@ -86,6 +86,11 @@
}
.color-cell {
appearance: none;
background: none;
border: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr;