mirror of
https://github.com/penpot/penpot.git
synced 2025-06-09 09:01:39 +02:00
✨ Improve selected colors
This commit is contained in:
parent
1eaf7b2b44
commit
d29aa00155
5 changed files with 55 additions and 52 deletions
|
@ -1,5 +1,11 @@
|
||||||
# CHANGELOG
|
# CHANGELOG
|
||||||
|
|
||||||
|
## 1.19.4
|
||||||
|
|
||||||
|
### :sparkles: New features
|
||||||
|
|
||||||
|
- Improve selected colors [Taiga #5805]( https://tree.taiga.io/project/penpot/us/5805)
|
||||||
|
|
||||||
## 1.19.3
|
## 1.19.3
|
||||||
|
|
||||||
### :sparkles: New features
|
### :sparkles: New features
|
||||||
|
|
|
@ -151,8 +151,8 @@
|
||||||
(mf/defc color-selection-menu
|
(mf/defc color-selection-menu
|
||||||
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
|
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
|
||||||
[{:keys [shapes file-id shared-libs] :as props}]
|
[{:keys [shapes file-id shared-libs] :as props}]
|
||||||
(let [{:keys [all-colors grouped-colors library-colors colors]} (mf/with-memo [shapes file-id shared-libs]
|
(let [{:keys [ grouped-colors library-colors colors]} (mf/with-memo [shapes file-id shared-libs]
|
||||||
(prepare-colors shapes file-id shared-libs))
|
(prepare-colors shapes file-id shared-libs))
|
||||||
expand-lib-color (mf/use-state false)
|
expand-lib-color (mf/use-state false)
|
||||||
expand-color (mf/use-state false)
|
expand-color (mf/use-state false)
|
||||||
|
|
||||||
|
@ -202,13 +202,26 @@
|
||||||
(mf/with-effect [grouped-colors]
|
(mf/with-effect [grouped-colors]
|
||||||
(reset! grouped-colors* grouped-colors))
|
(reset! grouped-colors* grouped-colors))
|
||||||
|
|
||||||
(when (> (count all-colors) 1)
|
[:div.element-set
|
||||||
[:div.element-set
|
[:div.element-set-title
|
||||||
[:div.element-set-title
|
[:span (tr "workspace.options.selection-color")]]
|
||||||
[:span (tr "workspace.options.selection-color")]]
|
[:div.element-set-content
|
||||||
[:div.element-set-content
|
[:div.selected-colors
|
||||||
[:div.selected-colors
|
(for [[index color] (d/enumerate (take 3 library-colors))]
|
||||||
(for [[index color] (d/enumerate (take 3 library-colors))]
|
[:& color-row {:key (dm/str "library-color-" (:color color))
|
||||||
|
:color color
|
||||||
|
:index index
|
||||||
|
:on-detach on-detach
|
||||||
|
:select-only select-only
|
||||||
|
:on-change #(on-change %1 color %2)
|
||||||
|
:on-open on-open
|
||||||
|
:on-close on-close}])
|
||||||
|
(when (and (false? @expand-lib-color) (< 3 (count library-colors)))
|
||||||
|
[:div.expand-colors {:on-click #(reset! expand-lib-color true)}
|
||||||
|
[:span i/actions]
|
||||||
|
[:span.text (tr "workspace.options.more-lib-colors")]])
|
||||||
|
(when @expand-lib-color
|
||||||
|
(for [[index color] (d/enumerate (drop 3 library-colors))]
|
||||||
[:& color-row {:key (dm/str "library-color-" (:color color))
|
[:& color-row {:key (dm/str "library-color-" (:color color))
|
||||||
:color color
|
:color color
|
||||||
:index index
|
:index index
|
||||||
|
@ -216,41 +229,27 @@
|
||||||
:select-only select-only
|
:select-only select-only
|
||||||
:on-change #(on-change %1 color %2)
|
:on-change #(on-change %1 color %2)
|
||||||
:on-open on-open
|
:on-open on-open
|
||||||
:on-close on-close}])
|
:on-close on-close}]))]
|
||||||
(when (and (false? @expand-lib-color) (< 3 (count library-colors)))
|
|
||||||
[:div.expand-colors {:on-click #(reset! expand-lib-color true)}
|
|
||||||
[:span i/actions]
|
|
||||||
[:span.text (tr "workspace.options.more-lib-colors")]])
|
|
||||||
(when @expand-lib-color
|
|
||||||
(for [[index color] (d/enumerate (drop 3 library-colors))]
|
|
||||||
[:& color-row {:key (dm/str "library-color-" (:color color))
|
|
||||||
:color color
|
|
||||||
:index index
|
|
||||||
:on-detach on-detach
|
|
||||||
:select-only select-only
|
|
||||||
:on-change #(on-change %1 color %2)
|
|
||||||
:on-open on-open
|
|
||||||
:on-close on-close}]))]
|
|
||||||
|
|
||||||
[:div.selected-colors
|
[:div.selected-colors
|
||||||
(for [[index color] (d/enumerate (take 3 colors))]
|
(for [[index color] (d/enumerate (take 3 colors))]
|
||||||
[:& color-row {:key (dm/str "color-" index)
|
[:& color-row {:key (dm/str "color-" index)
|
||||||
|
:color color
|
||||||
|
:index index
|
||||||
|
:select-only select-only
|
||||||
|
:on-change #(on-change %1 color %2)
|
||||||
|
:on-open on-open
|
||||||
|
:on-close on-close}])
|
||||||
|
(when (and (false? @expand-color) (< 3 (count colors)))
|
||||||
|
[:div.expand-colors {:on-click #(reset! expand-color true)}
|
||||||
|
[:span i/actions]
|
||||||
|
[:span.text (tr "workspace.options.more-colors")]])
|
||||||
|
(when @expand-color
|
||||||
|
(for [[index color] (d/enumerate (drop 3 colors))]
|
||||||
|
[:& color-row {:key (dm/str "color-" (:color color))
|
||||||
:color color
|
:color color
|
||||||
:index index
|
:index index
|
||||||
:select-only select-only
|
:select-only select-only
|
||||||
:on-change #(on-change %1 color %2)
|
:on-change #(on-change %1 color %2)
|
||||||
:on-open on-open
|
:on-open on-open
|
||||||
:on-close on-close}])
|
:on-close on-close}]))]]]))
|
||||||
(when (and (false? @expand-color) (< 3 (count colors)))
|
|
||||||
[:div.expand-colors {:on-click #(reset! expand-color true)}
|
|
||||||
[:span i/actions]
|
|
||||||
[:span.text (tr "workspace.options.more-colors")]])
|
|
||||||
(when @expand-color
|
|
||||||
(for [[index color] (d/enumerate (drop 3 colors))]
|
|
||||||
[:& color-row {:key (dm/str "color-" (:color color))
|
|
||||||
:color color
|
|
||||||
:index index
|
|
||||||
:select-only select-only
|
|
||||||
:on-change #(on-change %1 color %2)
|
|
||||||
:on-open on-open
|
|
||||||
:on-close on-close}]))]]])))
|
|
||||||
|
|
|
@ -71,11 +71,10 @@
|
||||||
[:& stroke-menu {:ids ids
|
[:& stroke-menu {:ids ids
|
||||||
:type type
|
:type type
|
||||||
:values stroke-values}]
|
:values stroke-values}]
|
||||||
(when (> (count objects) 2)
|
[:& color-selection-menu {:type type
|
||||||
[:& color-selection-menu {:type type
|
:shapes (vals objects)
|
||||||
:shapes (vals objects)
|
:file-id file-id
|
||||||
:file-id file-id
|
:shared-libs shared-libs}]
|
||||||
:shared-libs shared-libs}])
|
|
||||||
[:& shadow-menu {:ids ids
|
[:& shadow-menu {:ids ids
|
||||||
:values (select-keys shape [:shadow])}]
|
:values (select-keys shape [:shadow])}]
|
||||||
[:& blur-menu {:ids ids
|
[:& blur-menu {:ids ids
|
||||||
|
|
|
@ -77,11 +77,10 @@
|
||||||
(when-not (empty? stroke-ids)
|
(when-not (empty? stroke-ids)
|
||||||
[:& stroke-menu {:type type :ids stroke-ids :values stroke-values}])
|
[:& stroke-menu {:type type :ids stroke-ids :values stroke-values}])
|
||||||
|
|
||||||
(when (> (count objects) 2)
|
[:& color-selection-menu {:type type
|
||||||
[:& color-selection-menu {:type type
|
:shapes (vals objects)
|
||||||
:shapes (vals objects)
|
:file-id file-id
|
||||||
:file-id file-id
|
:shared-libs shared-libs}]
|
||||||
:shared-libs shared-libs}])
|
|
||||||
|
|
||||||
(when-not (empty? shadow-ids)
|
(when-not (empty? shadow-ids)
|
||||||
[:& shadow-menu {:type type :ids shadow-ids :values shadow-values}])
|
[:& shadow-menu {:type type :ids shadow-ids :values shadow-values}])
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
1.19.3
|
1.19.4
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue