3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add performance oriented refactor to color palette context menu

Browse source
This commit is contained in:
Andrey Antukh 2025-01-16 21:04:57 +01:00
parent 068dd5f4bc
commit de2475cca6
2 changed files with 79 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

78
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
View file

@ -11,24 +11,51 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.components.color-bullet :as cb] [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc color-palette-ctx-menu (def ^:private xf:sample-colors
[{:keys [show-menu? close-menu on-select-palette selected]}] (comp (map val)
(take 7)))
(defn- extract-colors
[{:keys [data] :as file}]
(let [colors (into [] xf:sample-colors (:colors data))]
(-> file
(assoc :colors colors)
(dissoc :data))))
(mf/defc color-palette-ctx-menu*
[{:keys [show on-close on-select selected]}]
(let [recent-colors (mf/deref refs/recent-colors) (let [recent-colors (mf/deref refs/recent-colors)
file-colors (mf/deref refs/workspace-file-colors) libraries (mf/deref refs/libraries)
shared-libs (mf/deref refs/libraries)]
[:& dropdown {:show show-menu? file-id (mf/use-ctx ctx/current-file-id)
:on-close close-menu} local-colors (mf/with-memo [libraries file-id]
(let [colors (dm/get-in libraries [file-id :data :colors])]
(into [] xf:sample-colors colors)))
libraries (mf/with-memo [libraries file-id]
(->> (dissoc libraries file-id)
(vals)
(mapv extract-colors)))
recent-colors (mf/with-memo [recent-colors]
(->> (reverse recent-colors)
(take 7)
(map-indexed (fn [index color]
(assoc color ::id (dm/str index))))
(vec)))]
[:& dropdown {:show show :on-close on-close}
[:ul {:class (stl/css :palette-menu)} [:ul {:class (stl/css :palette-menu)}
(for [{:keys [data id] :as library} (vals shared-libs)] (for [{:keys [id colors] :as library} libraries]
(let [colors (-> data :colors vals)]
[:li {:class (stl/css-case :palette-library true [:li {:class (stl/css-case :palette-library true
:selected (= selected id)) :selected (= selected id))
:key (dm/str "library-" id) :key (dm/str "library-" id)
:on-click on-select-palette :on-click on-select
:data-palette (dm/str id)} :data-palette (dm/str id)}
[:div {:class (stl/css :option-wrapper)} [:div {:class (stl/css :option-wrapper)}
[:div {:class (stl/css :library-name)} [:div {:class (stl/css :library-name)}
@ -41,15 +68,16 @@
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick])] i/tick])]
[:div {:class (stl/css :color-sample) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style {:--bullet-size "20px"}}
(for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))] (for [color colors]
[:& cb/color-bullet {:key (dm/str "color-" i) [:& cb/color-bullet {:key (dm/str (:id color))
:mini true :mini true
:color {:color color :id id :gradient gradient}}])]]])) :color color}])]]])
[:li {:class (stl/css-case :file-library true [:li {:class (stl/css-case
:file-library true
:selected (= selected :file)) :selected (= selected :file))
:on-click on-select-palette :on-click on-select
:data-palette "file"} :data-palette "file"}
[:div {:class (stl/css :option-wrapper)} [:div {:class (stl/css :option-wrapper)}
@ -59,21 +87,22 @@
[:span {:class (stl/css :lib-name)} [:span {:class (stl/css :lib-name)}
(dm/str (tr "workspace.libraries.colors.file-library"))] (dm/str (tr "workspace.libraries.colors.file-library"))]
[:span {:class (stl/css :lib-num)} [:span {:class (stl/css :lib-num)}
(dm/str "(" (count file-colors) ")")]] (dm/str "(" (count local-colors) ")")]]
(when (= selected :file) (when (= selected :file)
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick])] i/tick])]
[:div {:class (stl/css :color-sample) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style {:--bullet-size "20px"}}
(for [[i color] (map-indexed vector (take 7 (vals file-colors)))] (for [color local-colors]
[:& cb/color-bullet {:key (dm/str "color-" i) [:& cb/color-bullet {:key (dm/str (:id color))
:mini true :mini true
:color color}])]]] :color color}])]]]
[:li {:class (stl/css :recent-colors true [:li {:class (stl/css
:recent-colors true
:selected (= selected :recent)) :selected (= selected :recent))
:on-click on-select-palette :on-click on-select
:data-palette "recent"} :data-palette "recent"}
[:div {:class (stl/css :option-wrapper)} [:div {:class (stl/css :option-wrapper)}
[:div {:class (stl/css :library-name)} [:div {:class (stl/css :library-name)}
@ -87,8 +116,9 @@
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick])] i/tick])]
[:div {:class (stl/css :color-sample) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style {:--bullet-size "20px"}}
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))]
[:& cb/color-bullet {:key (str "color-" idx) (for [color recent-colors]
[:& cb/color-bullet {:key (dm/str (::id color))
:mini true :mini true
:color color}])]]]]])) :color color}])]]]]]))

8
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -20,7 +20,7 @@
[app.main.ui.hooks.resize :as r] [app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.color-palette :refer [color-palette*]] [app.main.ui.workspace.color-palette :refer [color-palette*]]
[app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu]] [app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu*]]
[app.main.ui.workspace.text-palette :refer [text-palette]] [app.main.ui.workspace.text-palette :refer [text-palette]]
[app.main.ui.workspace.text-palette-ctx-menu :refer [text-palette-ctx-menu]] [app.main.ui.workspace.text-palette-ctx-menu :refer [text-palette-ctx-menu]]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -196,9 +196,9 @@
:width vport-width}]]) :width vport-width}]])
(when color-palette? (when color-palette?
[:* [:*
[:& color-palette-ctx-menu {:show-menu? show-menu? [:> color-palette-ctx-menu* {:show show-menu?
:close-menu on-close-menu :on-close on-close-menu
:on-select-palette on-select-palette :on-select on-select-palette
:selected @selected}] :selected @selected}]
[:> color-palette* {:size size [:> color-palette* {:size size
:selected @selected :selected @selected