johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

💄 Add cosmetic improvements to workspace palette component

Browse Source
This commit is contained in:
Andrey Antukh
2025-12-03 09:38:23 +01:00
parent 9123d199b7
commit 5ef06685fc
2 changed files with 45 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@
[app.main.ui.workspace.coordinates :as coordinates] [app.main.ui.workspace.coordinates :as coordinates]
[app.main.ui.workspace.libraries] [app.main.ui.workspace.libraries]
[app.main.ui.workspace.nudge] [app.main.ui.workspace.nudge]
[app.main.ui.workspace.palette :refer [palette]] [app.main.ui.workspace.palette :refer [palette*]]
[app.main.ui.workspace.plugins] [app.main.ui.workspace.plugins]
[app.main.ui.workspace.sidebar :refer [sidebar*]] [app.main.ui.workspace.sidebar :refer [sidebar*]]
[app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -84,8 +84,8 @@
node-ref (use-resize-observer on-resize)] node-ref (use-resize-observer on-resize)]
[:* [:*
(when (not ^boolean hide-ui?) (when (not ^boolean hide-ui?)
[:& palette {:layout layout [:> palette* {:layout layout
:on-change-palette-size on-resize-palette}]) :on-change-size on-resize-palette}])
[:section [:section
{:key (dm/str "workspace-" page-id) {:key (dm/str "workspace-" page-id)

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

@@ -33,10 +33,11 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def viewport (def ^:private ref:viewport
(l/derived :vport refs/workspace-local)) (l/derived :vport refs/workspace-local))
(defn calculate-palette-padding [rulers?] (defn- calculate-palette-style
[rulers?]
(let [left-sidebar (dom/get-element "left-sidebar-aside") (let [left-sidebar (dom/get-element "left-sidebar-aside")
left-sidebar-size (-> (dom/get-data left-sidebar "left-sidebar-width") left-sidebar-size (-> (dom/get-data left-sidebar "left-sidebar-width")
(d/parse-integer)) (d/parse-integer))
@@ -48,36 +49,46 @@
#js {"paddingLeft" (dm/str calculate-padding-left "px") #js {"paddingLeft" (dm/str calculate-padding-left "px")
"paddingRight" "322px"})) "paddingRight" "322px"}))
(mf/defc palette (mf/defc palette*
[{:keys [layout on-change-palette-size]}] [{:keys [layout on-change-size]}]
(let [color-palette? (:colorpalette layout) (let [color-palette? (:colorpalette layout)
text-palette? (:textpalette layout) text-palette? (:textpalette layout)
hide-palettes? (:hide-palettes 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})
state (deref state*)
show-menu? (:show-menu state)
selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
selected-text* (mf/use-state :file)
selected-text (deref selected-text*)
on-select (mf/use-fn #(reset! selected %))
rulers? (mf/deref refs/rulers?)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
vport (mf/deref viewport) read-only? (mf/use-ctx ctx/workspace-read-only?)
vport-width (:width vport) container (mf/use-ref nil)
state* (mf/use-state #(-> {:show-menu false}))
state (deref state*)
show-menu? (:show-menu state)
selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
selected-text* (mf/use-state :file)
selected-text (deref selected-text*)
on-select (mf/use-fn #(reset! selected %))
rulers? (mf/deref refs/rulers?)
vport (mf/deref ref:viewport)
vport-width (get vport :width)
{:keys [on-pointer-down
on-lost-pointer-capture
on-pointer-move
parent-ref
size]}
(r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-size)
on-resize on-resize
(mf/use-callback (mf/use-fn
(fn [_] (fn [_]
(let [dom (mf/ref-val container) (let [dom (mf/ref-val container)
width (obj/get dom "clientWidth")] width (obj/get dom "clientWidth")]
(swap! state* assoc :width width)))) (swap! state* assoc :width width))))
on-close-menu on-close-menu
(mf/use-callback (mf/use-fn
(fn [_] (fn [_]
(swap! state* assoc :show-menu false))) (swap! state* assoc :show-menu false)))
@@ -100,7 +111,7 @@
(reset! selected-text* (:id lib))))) (reset! selected-text* (:id lib)))))
toggle-palettes toggle-palettes
(mf/use-callback (mf/use-fn
(fn [_] (fn [_]
(r/set-resize-type! :top) (r/set-resize-type! :top)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -131,7 +142,9 @@
(vary-meta assoc ::ev/origin "workspace-left-toolbar")))) (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
(dom/blur! node)))) (dom/blur! node))))
any-palette? (or color-palette? text-palette?) any-palette?
(or color-palette? text-palette?)
size-classname size-classname
(cond (cond
(<= size 64) (stl/css :small-palette) (<= size 64) (stl/css :small-palette)
@@ -142,16 +155,16 @@
(let [key1 (events/listen js/window "resize" on-resize)] (let [key1 (events/listen js/window "resize" on-resize)]
#(events/unlistenByKey key1))) #(events/unlistenByKey key1)))
(mf/use-layout-effect (mf/with-layout-effect []
#(let [dom (mf/ref-val parent-ref) (let [dom (mf/ref-val parent-ref)
width (obj/get dom "clientWidth")] width (obj/get dom "clientWidth")]
(swap! state* assoc :width width))) (swap! state* assoc :width width)))
[:div {:class (stl/css :palette-wrapper) [:div {:class (stl/css :palette-wrapper)
:id "palette-wrapper" :id "palette-wrapper"
:style (calculate-palette-padding rulers?) :style (calculate-palette-style rulers?)
:data-testid "palette"} :data-testid "palette"}
(when-not workspace-read-only? (when-not ^boolean read-only?
[:div {:ref parent-ref [:div {:ref parent-ref
:class (dm/str size-classname " " (stl/css-case :palettes true :class (dm/str size-classname " " (stl/css-case :palettes true
:wide any-palette? :wide any-palette?