mirror of
https://github.com/penpot/penpot.git
synced 2025-04-12 15:01:28 -05:00
♻️ Refactor in color picker and options
This commit is contained in:
alonso.torres
parent
fe08810340
commit
fd18a6a6d0
9 changed files with 95 additions and 247 deletions
frontend
|
|
@ -317,7 +317,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
& .sketch-picker {
|
||||
& .sketch-picker, .chrome-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
(defonce ^:private default-square-params
|
||||
{:size 16
|
||||
:color {:value "#59B9E2"
|
||||
:opacity 0.9}})
|
||||
:opacity 0.2}})
|
||||
|
||||
(defonce ^:private default-layout-params
|
||||
{:size 12
|
||||
|
|
|
|||
|
|
@ -10,19 +10,23 @@
|
|||
[uxbox.main.store :as st]
|
||||
[goog.object :as gobj]
|
||||
[rumext.alpha :as mf]
|
||||
["react-color/lib/components/sketch/Sketch" :as sketch]))
|
||||
[uxbox.util.color :refer [hex->rgb]]
|
||||
["react-color/lib/components/chrome/Chrome" :as pickerskin]))
|
||||
|
||||
(mf/defc colorpicker
|
||||
[{:keys [on-change value colors] :as props}]
|
||||
(let [local-value (mf/use-state value)
|
||||
on-change-complete #(do
|
||||
(reset! local-value %)
|
||||
(on-change (gobj/get % "hex")))]
|
||||
[{:keys [on-change value opacity colors] :as props}]
|
||||
(let [hex-value (mf/use-state (or value "#FFFFFF"))
|
||||
alpha-value (mf/use-state (or opacity 1))
|
||||
[r g b] (hex->rgb @hex-value)
|
||||
on-change-complete #(let [hex (gobj/get % "hex")
|
||||
opacity (-> % (gobj/get "rgb") (gobj/get "a"))]
|
||||
(reset! hex-value hex)
|
||||
(reset! alpha-value opacity)
|
||||
(on-change hex opacity))]
|
||||
|
||||
[:> sketch/default {:color @local-value
|
||||
:disableAlpha true
|
||||
[:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value}
|
||||
:presetColors colors
|
||||
:onChangeComplete on-change-complete
|
||||
:onChange on-change-complete
|
||||
:style {:box-shadow "none"}}]))
|
||||
|
||||
(def most-used-colors
|
||||
|
|
|
|||
|
|
@ -14,11 +14,12 @@
|
|||
;; --- Color Picker Modal
|
||||
|
||||
(mf/defc colorpicker-modal
|
||||
[{:keys [x y default value page on-change] :as props}]
|
||||
[{:keys [x y default value opacity page on-change] :as props}]
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str (- x 260) "px")
|
||||
:top (str (- y 50) "px")}}
|
||||
[:& cp/colorpicker {:value (or value default)
|
||||
:opacity (or opacity 1)
|
||||
:colors (into-array @cp/most-used-colors)
|
||||
:on-change on-change}]])
|
||||
|
||||
|
|
|
|||
|
|
@ -10,15 +10,10 @@
|
|||
(ns uxbox.main.ui.workspace.sidebar.options.fill
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
[uxbox.util.object :as obj]
|
||||
[uxbox.util.math :as math]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]))
|
||||
|
||||
(defn- fill-menu-memo-equals?
|
||||
|
|
@ -36,70 +31,14 @@
|
|||
{::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
|
||||
[{:keys [shape] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
|
||||
on-color-change
|
||||
(fn [color]
|
||||
(st/emit! (udw/update-shape (:id shape) {:fill-color color})))
|
||||
|
||||
on-color-input-change
|
||||
(fn [event]
|
||||
(let [input (dom/get-target event)
|
||||
value (dom/get-value input)]
|
||||
(when (dom/valid? input)
|
||||
(on-color-change value))))
|
||||
|
||||
on-opacity-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 1)
|
||||
(/ 100))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:fill-opacity value}))))
|
||||
|
||||
show-color-picker
|
||||
(fn [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
props {:x x :y y
|
||||
:on-change on-color-change
|
||||
:default "#ffffff"
|
||||
:value (:fill-color shape)
|
||||
:transparent? true}]
|
||||
(modal/show! colorpicker-modal props)))]
|
||||
|
||||
color {:value (:fill-color shape)
|
||||
:opacity (:fill-opacity shape)}
|
||||
handle-change-color (fn [value opacity]
|
||||
(let [change {:fill-color value
|
||||
:fill-opacity opacity}]
|
||||
(st/emit! (udw/update-shape (:id shape) change))))]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.fill")]
|
||||
[:div.element-set-content
|
||||
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color (:fill-color shape)}
|
||||
:on-click show-color-picker}]
|
||||
|
||||
[:div.color-info
|
||||
[:input {:default-value (:fill-color shape)
|
||||
:ref (fn [el]
|
||||
(when el
|
||||
(set! (.-value el) (:fill-color shape))))
|
||||
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
|
||||
:on-change on-color-input-change}]]
|
||||
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text {:type "number"
|
||||
:value (str (-> (:fill-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:on-change on-opacity-change
|
||||
:min "0"
|
||||
:max "100"}]]
|
||||
|
||||
[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value (str (-> (:fill-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:step "1"
|
||||
:on-change on-opacity-change}]]]]))
|
||||
[:& color-row {:value color
|
||||
:on-change handle-change-color}]]]))
|
||||
|
|
|
|||
|
|
@ -102,6 +102,12 @@
|
|||
(assoc-in [:params :size] size)
|
||||
(assoc-in [:params :item-length] item-length)))))
|
||||
|
||||
handle-change-color
|
||||
(fn [value opacity]
|
||||
(emit-changes! #(-> %
|
||||
(assoc-in [:params :color :value] value)
|
||||
(assoc-in [:params :color :opacity] opacity))))
|
||||
|
||||
handle-use-default
|
||||
(fn []
|
||||
(emit-changes! #(hash-map :params ((:type grid) default-grid-params))))
|
||||
|
|
@ -200,7 +206,7 @@
|
|||
:on-change (handle-change :params :margin)}]])
|
||||
|
||||
[:& color-row {:value (:color params)
|
||||
:on-change (handle-change :params :color)}]
|
||||
:on-change handle-change-color}]
|
||||
[:div.row-flex
|
||||
[:button.btn-options {:disabled is-default
|
||||
:on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")]
|
||||
|
|
|
|||
|
|
@ -24,41 +24,53 @@
|
|||
:y y
|
||||
:on-change handle-change-color
|
||||
:value (:value color)
|
||||
:opacity (:opacity color)
|
||||
:transparent? true}]
|
||||
(modal/show! colorpicker-modal props))))
|
||||
|
||||
(defn opacity->string [opacity]
|
||||
(str (-> opacity
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round))))
|
||||
(if (and opacity (not= opacity ""))
|
||||
(str (-> opacity
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
""))
|
||||
|
||||
(defn string->opacity [opacity-str]
|
||||
(-> opacity-str
|
||||
(d/parse-integer 1)
|
||||
(/ 100)))
|
||||
(when (and opacity-str (not= "" opacity-str))
|
||||
(-> opacity-str
|
||||
(d/parse-integer 1)
|
||||
(/ 100))))
|
||||
|
||||
(mf/defc color-row [{:keys [value on-change]}]
|
||||
(let [value (or value {:value "#FFFFFF" :opacity 1})
|
||||
state (mf/use-state value)
|
||||
change-color (fn [color]
|
||||
(let [update-color (fn [state] (assoc state :value color))]
|
||||
(swap! state update-color)
|
||||
(when on-change (on-change (update-color @state)))))
|
||||
(let [default-value {:value "#000000" :opacity 1}
|
||||
|
||||
change-opacity (fn [opacity]
|
||||
(let [update-opacity (fn [state] (assoc state :opacity opacity))]
|
||||
(swap! state update-opacity)
|
||||
(when on-change (on-change (update-opacity @state)))))
|
||||
parse-value (fn [value]
|
||||
(-> (merge default-value value)
|
||||
(update :value #(or % "#000000"))
|
||||
(update :opacity #(or % 1))))
|
||||
|
||||
handle-pick-color (fn [color]
|
||||
(change-color color))
|
||||
state (mf/use-state (parse-value value))
|
||||
|
||||
change-color (fn [new-value]
|
||||
(let [{:keys [value opacity]} @state]
|
||||
(swap! state assoc :value new-value)
|
||||
(when on-change (on-change new-value opacity))))
|
||||
|
||||
change-opacity (fn [new-opacity]
|
||||
(let [{:keys [value opacity]} @state]
|
||||
(swap! state assoc :opacity new-opacity)
|
||||
(when (and new-opacity on-change) (on-change value new-opacity))))
|
||||
|
||||
handle-pick-color (fn [color opacity]
|
||||
(reset! state {:value color :opacity opacity})
|
||||
(when on-change (on-change color opacity)))
|
||||
|
||||
handle-input-color-change (fn [event]
|
||||
(let [target (dom/get-target event)
|
||||
value (dom/get-value target)]
|
||||
(when (dom/valid? target)
|
||||
(change-color value))))
|
||||
(change-color (str "#" value)))))
|
||||
handle-opacity-change (fn [event]
|
||||
(-> event
|
||||
dom/get-target
|
||||
|
|
@ -68,7 +80,7 @@
|
|||
|
||||
(mf/use-effect
|
||||
(mf/deps value)
|
||||
#(reset! state value))
|
||||
#(reset! state (parse-value value)))
|
||||
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th
|
||||
|
|
@ -76,8 +88,8 @@
|
|||
:on-click (color-picker-callback @state handle-pick-color)}]
|
||||
|
||||
[:div.color-info
|
||||
[:input {:value (-> @state :value)
|
||||
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
|
||||
[:input {:value (-> @state :value (subs 1))
|
||||
:pattern "^[0-9a-fA-F]{0,6}$"
|
||||
:on-change handle-input-color-change}]]
|
||||
|
||||
[:div.input-element.percentail
|
||||
|
|
@ -87,7 +99,7 @@
|
|||
:min "0"
|
||||
:max "100"}]]
|
||||
|
||||
[:input.slidebar {:type "range"
|
||||
#_[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value (-> @state :opacity opacity->string)
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.object :as obj]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
[uxbox.util.math :as math]))
|
||||
[uxbox.util.math :as math]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]))
|
||||
|
||||
(defn- stroke-menu-memo-equals?
|
||||
[np op]
|
||||
|
|
@ -75,35 +76,13 @@
|
|||
(fn [event]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-style :none})))
|
||||
|
||||
on-stroke-opacity-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0)
|
||||
(/ 100))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
|
||||
current-stroke-color {:value (:stroke-color shape)
|
||||
:opacity (:stroke-opacity shape)}
|
||||
|
||||
on-color-change
|
||||
(fn [color]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-color color})))
|
||||
|
||||
on-color-input-change
|
||||
(fn [event]
|
||||
(let [input (dom/get-target event)
|
||||
value (dom/get-value input)]
|
||||
(when (dom/valid? input)
|
||||
(on-color-change value))))
|
||||
|
||||
show-color-picker
|
||||
(fn [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
props {:x x :y y
|
||||
:default "#ffffff"
|
||||
:value (:stroke-color shape)
|
||||
:on-change on-color-change
|
||||
:transparent? true}]
|
||||
(modal/show! colorpicker-modal props)))]
|
||||
handle-change-stroke-color
|
||||
(fn [value opacity]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-color value
|
||||
:stroke-opacity opacity})))]
|
||||
|
||||
(if (not= :none (:stroke-style shape :none))
|
||||
[:div.element-set
|
||||
|
|
@ -112,39 +91,9 @@
|
|||
[:div.add-page {:on-click on-del-stroke} i/minus]]
|
||||
|
||||
[:div.element-set-content
|
||||
|
||||
;; Stroke Color
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th {:style {:background-color (:stroke-color shape)}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:input {:default-value (:stroke-color shape)
|
||||
:ref (fn [el]
|
||||
(when el
|
||||
(set! (.-value el) (:stroke-color shape))))
|
||||
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
|
||||
:on-change on-color-input-change}]]
|
||||
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text {:placeholder ""
|
||||
:value (str (-> (:stroke-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:type "number"
|
||||
:on-change on-stroke-opacity-change
|
||||
:min "0"
|
||||
:max "100"}]]
|
||||
|
||||
[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value (str (-> (:stroke-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:step "1"
|
||||
:on-change on-stroke-opacity-change}]]
|
||||
[:& color-row {:value current-stroke-color
|
||||
:on-change handle-change-stroke-color}]
|
||||
|
||||
;; Stroke Width, Alignment & Style
|
||||
[:div.row-flex
|
||||
|
|
|
|||
|
|
@ -18,12 +18,10 @@
|
|||
[uxbox.main.data.workspace.texts :as dwt]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.fonts :as fonts]
|
||||
[uxbox.util.math :as math]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
["slate" :refer [Transforms]]))
|
||||
|
||||
|
|
@ -186,85 +184,24 @@
|
|||
|
||||
(mf/defc text-fill-options
|
||||
[{:keys [editor shape] :as props}]
|
||||
(let [{:keys [fill opacity]
|
||||
:or {fill "#000000"
|
||||
opacity 1}}
|
||||
(dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:fill :opacity]})
|
||||
(let [text-color (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:fill :opacity]})
|
||||
|
||||
opacity (math/round (* opacity 100))
|
||||
current-color {:value (:fill text-color)
|
||||
:opacity (:opacity text-color)}
|
||||
|
||||
on-color-change
|
||||
(fn [color]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:fill color}})))
|
||||
handle-change-color
|
||||
(fn [value opacity]
|
||||
(st/emit! (dwt/update-text-attrs {:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:fill value
|
||||
:opacity opacity}})))]
|
||||
|
||||
on-color-input-change
|
||||
(fn [event]
|
||||
(let [input (dom/get-target event)
|
||||
value (dom/get-value input)]
|
||||
(when (dom/valid? input)
|
||||
(on-color-change value))))
|
||||
|
||||
on-opacity-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when (str/numeric? value)
|
||||
(let [value (-> (d/parse-integer value 1)
|
||||
(/ 100))]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:opacity value}}))))))
|
||||
|
||||
show-color-picker
|
||||
(fn [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
props {:x x :y y
|
||||
:on-change on-color-change
|
||||
:default "#ffffff"
|
||||
:value fill
|
||||
:transparent? true}]
|
||||
(modal/show! colorpicker-modal props)))]
|
||||
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color fill}
|
||||
:on-click show-color-picker
|
||||
}]
|
||||
|
||||
[:div.color-info
|
||||
[:input {:default-value fill
|
||||
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
|
||||
:ref (fn [el]
|
||||
(when el
|
||||
(set! (.-value el) fill)))
|
||||
:on-change on-color-input-change
|
||||
}]]
|
||||
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text {:type "number"
|
||||
:ref (fn [el]
|
||||
(when el
|
||||
(set! (.-value el) opacity)))
|
||||
:default-value opacity
|
||||
:on-change on-opacity-change
|
||||
:min "0"
|
||||
:max "100"}]]
|
||||
|
||||
[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value opacity
|
||||
:step "1"
|
||||
:on-change on-opacity-change
|
||||
}]]))
|
||||
[:& color-row {:value current-color
|
||||
:on-change handle-change-color}]
|
||||
))
|
||||
|
||||
(mf/defc spacing-options
|
||||
[{:keys [editor shape locale] :as props}]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue