3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 12:21:38 +02:00
Code Issues Projects Releases Packages Wiki 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
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] [color-item]
(let [name (:name color-item) (let [name (:name color-item)
path (:path 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) gradient (:gradient color-item)
image (:image color-item) image (:image color-item)
color (:color 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.store :as st]
[app.main.ui.components.color-bullet :as cb] [app.main.ui.components.color-bullet :as cb]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.ds.utilities.swatch :refer [swatch*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.color :as uc] [app.util.color :as uc]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -40,13 +41,15 @@
{::ev/name "use-library-color" {::ev/name "use-library-color"
::ev/origin "color-palette" ::ev/origin "color-palette"
:external-library (not= selected :file)})))))] :external-library (not= selected :file)})))))]
[:div {:class (stl/css-case [:button {:class (stl/css-case
:color-cell true :color-cell true
:is-not-library-color (nil? (:id color)) :is-not-library-color (nil? (:id color))
:no-text (<= size 64)) :no-text (<= size 64))
:title (uc/get-color-name color) :title (uc/get-color-name color)
:on-click select-color} :aria-label (uc/get-color-name color)
[:& cb/color-bullet {:color color}] :type "button"
:on-click select-color}
[:> swatch* {:background color :size "medium"}]
[:& cb/color-name {:color color :size size :origin :palette}]])) [:& cb/color-name {:color color :size size :origin :palette}]]))
(mf/defc palette* (mf/defc palette*

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

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