Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-24 07:46:13 -05:00
Code Issues Activity

♻️ Refactor color-row component to new style

Browse source
This commit is contained in:
Andrey Antukh 2025-01-29 18:38:31 +01:00
parent 7809f2c7e4
commit 930ad359dd
8 changed files with 68 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
View file

@ -17,7 +17,7 @@
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -153,7 +153,8 @@
:on-focus handle-focus-stop-offset :on-focus handle-focus-stop-offset
:on-blur handle-blur-stop-offset}]] :on-blur handle-blur-stop-offset}]]
[:& color-row ;; FIXME: memoize color
[:> color-row*
{:disable-gradient true {:disable-gradient true
:disable-picker true :disable-picker true
:color {:color color :color {:color color

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View file

@ -16,7 +16,7 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -58,12 +58,11 @@
prev-colors-ref (mf/use-ref nil) prev-colors-ref (mf/use-ref nil)
initial-color-keys initial-color-keys
(mf/use-memo (mf/with-memo []
#(->> (concat colors library-colors) (->> (concat colors library-colors)
(reduce (reduce (fn [result color]
(fn [result color] (assoc result color (dm/str (uuid/next))))
(assoc result color (dm/str (uuid/next)))) {})))
{})))
color-keys* (mf/use-var initial-color-keys) color-keys* (mf/use-var initial-color-keys)
@ -138,7 +137,7 @@
(let [lib-colors (cond->> library-colors (not @expand-lib-color) (take 3)) (let [lib-colors (cond->> library-colors (not @expand-lib-color) (take 3))
lib-colors (concat lib-colors colors)] lib-colors (concat lib-colors colors)]
(for [[index color] (d/enumerate lib-colors)] (for [[index color] (d/enumerate lib-colors)]
[:& color-row [:> color-row*
{:key (get @color-keys* color) {:key (get @color-keys* color)
:color color :color color
:index index :index index
@ -155,7 +154,7 @@
[:div {:class (stl/css :selected-color-group)} [:div {:class (stl/css :selected-color-group)}
(for [[index color] (d/enumerate (cond->> colors (not @expand-color) (take 3)))] (for [[index color] (d/enumerate (cond->> colors (not @expand-color) (take 3)))]
[:& color-row [:> color-row*
{:key (get @color-keys* color) {:key (get @color-keys* color)
:color color :color color
:index index :index index

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -17,7 +17,7 @@
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -168,18 +168,18 @@
(seq fills) (seq fills)
[:& h/sortable-container {} [:& h/sortable-container {}
(for [[index value] (d/enumerate (:fills values []))] (for [[index value] (d/enumerate (:fills values []))]
[:& color-row {:color (ctc/fill->shape-color value) [:> color-row* {:color (ctc/fill->shape-color value)
:key index :key index
:index index :index index
:title (tr "workspace.options.fill") :title (tr "workspace.options.fill")
:on-change (on-change index) :on-change (on-change index)
:on-reorder (on-reorder index) :on-reorder (on-reorder index)
:on-detach (on-detach index) :on-detach (on-detach index)
:on-remove (on-remove index) :on-remove (on-remove index)
:disable-drag disable-drag :disable-drag disable-drag
:on-focus on-focus :on-focus on-focus
:select-on-focus (not @disable-drag) :select-on-focus (not @disable-drag)
:on-blur on-blur}])]) :on-blur on-blur}])])
(when (or (= type :frame) (when (or (= type :frame)
(and (= type :multiple) (some? (:hide-fill-on-export values)))) (and (= type :multiple) (some? (:hide-fill-on-export values))))

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -19,7 +19,7 @@
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -196,12 +196,12 @@
(when (= :square type) (when (= :square type)
[:div {:class (stl/css :square-row)} [:div {:class (stl/css :square-row)}
[:div {:class (stl/css :advanced-row)} [:div {:class (stl/css :advanced-row)}
[:& color-row {:color (:color params) [:> color-row* {:color (:color params)
:title (tr "workspace.options.grid.params.color") :title (tr "workspace.options.grid.params.color")
:disable-gradient true :disable-gradient true
:disable-image true :disable-image true
:on-change handle-change-color :on-change handle-change-color
:on-detach handle-detach-color}] :on-detach handle-detach-color}]
[:button {:class (stl/css-case :show-more-options true [:button {:class (stl/css-case :show-more-options true
:selected show-more-options?) :selected show-more-options?)
:on-click toggle-more-options} :on-click toggle-more-options}
@ -237,12 +237,12 @@
:on-change (handle-change :params :type)}]] :on-change (handle-change :params :type)}]]
[:div {:class (stl/css :color-wrapper)} [:div {:class (stl/css :color-wrapper)}
[:& color-row {:color (:color params) [:> color-row* {:color (:color params)
:title (tr "workspace.options.grid.params.color") :title (tr "workspace.options.grid.params.color")
:disable-gradient true :disable-gradient true
:disable-image true :disable-image true
:on-change handle-change-color :on-change handle-change-color
:on-detach handle-detach-color}]]] :on-detach handle-detach-color}]]]
[:div {:class (stl/css :advanced-row)} [:div {:class (stl/css :advanced-row)}
[:div {:class (stl/css :height) [:div {:class (stl/css :height)

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -24,7 +24,7 @@
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l] [okulary.core :as l]
@ -235,17 +235,19 @@
:on-change (update-attr index :offset-y basic-offset-y-ref) :on-change (update-attr index :offset-y basic-offset-y-ref)
:on-blur on-blur :on-blur on-blur
:value (:offset-y value)}]] :value (:offset-y value)}]]
[:& color-row {:color (if (string? (:color value))
;; Support for old format colors ;; FIXME: memoize color
{:color (:color value) :opacity (:opacity value)} [:> color-row* {:color (if (string? (:color value))
(:color value)) ;; Support for old format colors
:title (tr "workspace.options.shadow-options.color") {:color (:color value) :opacity (:opacity value)}
:disable-gradient true (:color value))
:disable-image true :title (tr "workspace.options.shadow-options.color")
:on-change update-color :disable-gradient true
:on-detach detach-color :disable-image true
:on-open manage-on-open :on-change update-color
:on-close manage-on-close}]]])]])) :on-detach detach-color
:on-open manage-on-open
:on-close manage-on-close}]]])]]))
(mf/defc shadow-menu (mf/defc shadow-menu
{::mf/wrap-props false} {::mf/wrap-props false}

6
frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
View file

@ -15,7 +15,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -38,7 +38,9 @@
:title (tr "workspace.options.canvas-background") :title (tr "workspace.options.canvas-background")
:class (stl/css :title-spacing-page)}]] :class (stl/css :title-spacing-page)}]]
[:div {:class (stl/css :element-content)} [:div {:class (stl/css :element-content)}
[:& color-row
;; FIXME: memoize color
[:> color-row*
{:disable-gradient true {:disable-gradient true
:disable-opacity true :disable-opacity true
:disable-image true :disable-image true

2
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -44,7 +44,7 @@
[v] [v]
(if (= v :multiple) nil v)) (if (= v :multiple) nil v))
(mf/defc color-row (mf/defc color-row*
[{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden [{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden
on-change on-reorder on-detach on-open on-close on-remove on-change on-reorder on-detach on-open on-close on-remove
disable-drag on-focus on-blur select-only select-on-focus]}] disable-drag on-focus on-blur select-only select-on-focus]}]

23
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
View file

@ -14,7 +14,7 @@
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -148,16 +148,17 @@
[:& reorder-handler {:ref dref}]) [:& reorder-handler {:ref dref}])
;; Stroke Color ;; Stroke Color
[:& color-row {:color (ctc/stroke->shape-color stroke) ;; FIXME: memorize stroke color
:index index [:> color-row* {:color (ctc/stroke->shape-color stroke)
:title title :index index
:on-change on-color-change-refactor :title title
:on-detach on-color-detach :on-change on-color-change-refactor
:on-remove on-remove :on-detach on-color-detach
:disable-drag disable-drag :on-remove on-remove
:on-focus on-focus :disable-drag disable-drag
:select-on-focus select-on-focus :on-focus on-focus
:on-blur on-blur}] :select-on-focus select-on-focus
:on-blur on-blur}]
;; Stroke Width, Alignment & Style ;; Stroke Width, Alignment & Style
[:div {:class (stl/css :stroke-options)} [:div {:class (stl/css :stroke-options)}