Improve selected colors

This commit is contained in:
Alejandro Alonso 2023-09-05 10:23:18 +02:00
parent 1eaf7b2b44
commit d29aa00155
5 changed files with 55 additions and 52 deletions

View file

@ -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

View file

@ -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}]))]]])))

View file

@ -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

View file

@ -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}])

View file

@ -1 +1 @@
1.19.3 1.19.4