mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
✨ Click on library to change color
This commit is contained in:
parent
01f38d5cea
commit
7c1b3d1b85
2 changed files with 26 additions and 10 deletions
|
@ -165,7 +165,7 @@
|
||||||
(assoc-in [:workspace-local :picked-shift?] shift?)))))
|
(assoc-in [:workspace-local :picked-shift?] shift?)))))
|
||||||
|
|
||||||
|
|
||||||
(defn change-fill-selected [color]
|
(defn change-fill-selected [color id file-id]
|
||||||
(ptk/reify ::change-fill-selected
|
(ptk/reify ::change-fill-selected
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state s]
|
(watch [_ state s]
|
||||||
|
@ -174,14 +174,17 @@
|
||||||
is-text? #(= :text (:type (get objects %)))
|
is-text? #(= :text (:type (get objects %)))
|
||||||
text-ids (filter is-text? ids)
|
text-ids (filter is-text? ids)
|
||||||
shape-ids (filter (comp not is-text?) ids)
|
shape-ids (filter (comp not is-text?) ids)
|
||||||
update-fn (fn [shape] (assoc shape :fill-color color))
|
update-fn (fn [shape] (assoc shape
|
||||||
|
:fill-color color
|
||||||
|
:fill-color-ref-id id
|
||||||
|
:fill-color-ref-file file-id))
|
||||||
editor (get-in state [:workspace-local :editor])
|
editor (get-in state [:workspace-local :editor])
|
||||||
converted-attrs {:fill color}]
|
converted-attrs {:fill color}]
|
||||||
(rx/from (conj
|
(rx/from (conj
|
||||||
(map #(dwt/update-text-attrs {:id % :editor editor :attrs converted-attrs}) text-ids)
|
(map #(dwt/update-text-attrs {:id % :editor editor :attrs converted-attrs}) text-ids)
|
||||||
(dwc/update-shapes shape-ids update-fn)))))))
|
(dwc/update-shapes shape-ids update-fn)))))))
|
||||||
|
|
||||||
(defn change-stroke-selected [color]
|
(defn change-stroke-selected [color id file-id]
|
||||||
(ptk/reify ::change-stroke-selected
|
(ptk/reify ::change-stroke-selected
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state s]
|
(watch [_ state s]
|
||||||
|
@ -189,7 +192,9 @@
|
||||||
update-fn (fn [s]
|
update-fn (fn [s]
|
||||||
(cond-> s
|
(cond-> s
|
||||||
true
|
true
|
||||||
(assoc :stroke-color color)
|
(assoc :stroke-color color
|
||||||
|
:stroke-color-ref-id id
|
||||||
|
:stroke-color-ref-file file-id)
|
||||||
|
|
||||||
(= (:stroke-style s) :none)
|
(= (:stroke-style s) :none)
|
||||||
(assoc :stroke-style "solid"
|
(assoc :stroke-style "solid"
|
||||||
|
@ -201,8 +206,8 @@
|
||||||
(let [handle-change-color (fn [color _ shift?]
|
(let [handle-change-color (fn [color _ shift?]
|
||||||
(st/emit!
|
(st/emit!
|
||||||
(if shift?
|
(if shift?
|
||||||
(change-stroke-selected color)
|
(change-stroke-selected color nil nil)
|
||||||
(change-fill-selected color))
|
(change-fill-selected color nil nil))
|
||||||
(md/hide-modal)))]
|
(md/hide-modal)))]
|
||||||
(ptk/reify ::start-picker
|
(ptk/reify ::start-picker
|
||||||
ptk/UpdateEvent
|
ptk/UpdateEvent
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
[app.config :as cfg]
|
[app.config :as cfg]
|
||||||
[app.main.data.workspace :as dw]
|
[app.main.data.workspace :as dw]
|
||||||
[app.main.data.workspace.libraries :as dwl]
|
[app.main.data.workspace.libraries :as dwl]
|
||||||
|
[app.main.data.colors :as dc]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||||
|
@ -124,7 +125,7 @@
|
||||||
|
|
||||||
|
|
||||||
(mf/defc color-item
|
(mf/defc color-item
|
||||||
[{:keys [color local? locale] :as props}]
|
[{:keys [color local? locale file-id] :as props}]
|
||||||
(let [rename? (= (:color-for-rename @refs/workspace-local) (:id color))
|
(let [rename? (= (:color-for-rename @refs/workspace-local) (:id color))
|
||||||
id (:id color)
|
id (:id color)
|
||||||
input-ref (mf/use-ref)
|
input-ref (mf/use-ref)
|
||||||
|
@ -133,6 +134,12 @@
|
||||||
:left nil
|
:left nil
|
||||||
:editing rename?})
|
:editing rename?})
|
||||||
|
|
||||||
|
click-color
|
||||||
|
(fn [event]
|
||||||
|
(if (kbd/shift? event)
|
||||||
|
(st/emit! (dc/change-stroke-selected (:value color) id (if local? nil file-id)))
|
||||||
|
(st/emit! (dc/change-fill-selected (:value color) id (if local? nil file-id)))))
|
||||||
|
|
||||||
rename-color
|
rename-color
|
||||||
(fn [name]
|
(fn [name]
|
||||||
(st/emit! (dwl/update-color (assoc color :name name))))
|
(st/emit! (dwl/update-color (assoc color :name name))))
|
||||||
|
@ -147,8 +154,9 @@
|
||||||
|
|
||||||
rename-color-clicked
|
rename-color-clicked
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(dom/prevent-default event)
|
(when local?
|
||||||
(swap! state assoc :editing true))
|
(dom/prevent-default event)
|
||||||
|
(swap! state assoc :editing true)))
|
||||||
|
|
||||||
input-blur
|
input-blur
|
||||||
(fn [event]
|
(fn [event]
|
||||||
|
@ -206,7 +214,8 @@
|
||||||
:auto-focus true
|
:auto-focus true
|
||||||
:default-value (:name color "")}]
|
:default-value (:name color "")}]
|
||||||
[:div.name-block
|
[:div.name-block
|
||||||
{:on-double-click rename-color-clicked}
|
{:on-double-click rename-color-clicked
|
||||||
|
:on-click click-color}
|
||||||
(:name color)
|
(:name color)
|
||||||
(when-not (= (:name color) (:value color))
|
(when-not (= (:name color) (:value color))
|
||||||
[:span (:value color)])])
|
[:span (:value color)])])
|
||||||
|
@ -250,6 +259,7 @@
|
||||||
(for [color colors]
|
(for [color colors]
|
||||||
[:& color-item {:key (:id color)
|
[:& color-item {:key (:id color)
|
||||||
:color color
|
:color color
|
||||||
|
:file-id file-id
|
||||||
:local? local?
|
:local? local?
|
||||||
:locale locale}])]]))
|
:locale locale}])]]))
|
||||||
|
|
||||||
|
@ -407,6 +417,7 @@
|
||||||
{:key (:id file)
|
{:key (:id file)
|
||||||
:file file
|
:file file
|
||||||
:local? false
|
:local? false
|
||||||
|
:locale locale
|
||||||
:open? false
|
:open? false
|
||||||
:filters @filters}])]))
|
:filters @filters}])]))
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue