From d29aa00155205b08dd462e864ef31d429346c8a5 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 5 Sep 2023 10:23:18 +0200 Subject: [PATCH] :sparkles: Improve selected colors --- CHANGES.md | 6 ++ .../options/menus/color_selection.cljs | 81 +++++++++---------- .../sidebar/options/shapes/frame.cljs | 9 +-- .../sidebar/options/shapes/group.cljs | 9 +-- version.txt | 2 +- 5 files changed, 55 insertions(+), 52 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 9a628435a..b00e1a693 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,11 @@ # CHANGELOG +## 1.19.4 + +### :sparkles: New features + +- Improve selected colors [Taiga #5805]( https://tree.taiga.io/project/penpot/us/5805) + ## 1.19.3 ### :sparkles: New features diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 333103028..87bc5af23 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -151,8 +151,8 @@ (mf/defc color-selection-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]} [{: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] - (prepare-colors 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)) expand-lib-color (mf/use-state false) expand-color (mf/use-state false) @@ -202,13 +202,26 @@ (mf/with-effect [grouped-colors] (reset! grouped-colors* grouped-colors)) - (when (> (count all-colors) 1) - [:div.element-set - [:div.element-set-title - [:span (tr "workspace.options.selection-color")]] - [:div.element-set-content - [:div.selected-colors - (for [[index color] (d/enumerate (take 3 library-colors))] + [:div.element-set + [:div.element-set-title + [:span (tr "workspace.options.selection-color")]] + [:div.element-set-content + [:div.selected-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 color :index index @@ -216,41 +229,27 @@ :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 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}]))] + :on-close on-close}]))] - [:div.selected-colors - (for [[index color] (d/enumerate (take 3 colors))] - [:& color-row {:key (dm/str "color-" index) + [:div.selected-colors + (for [[index color] (d/enumerate (take 3 colors))] + [:& 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 :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 - :index index - :select-only select-only - :on-change #(on-change %1 color %2) - :on-open on-open - :on-close on-close}]))]]]))) + :on-close on-close}]))]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index f92c7f542..ed9932b8e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -71,11 +71,10 @@ [:& stroke-menu {:ids ids :type type :values stroke-values}] - (when (> (count objects) 2) - [:& color-selection-menu {:type type - :shapes (vals objects) - :file-id file-id - :shared-libs shared-libs}]) + [:& color-selection-menu {:type type + :shapes (vals objects) + :file-id file-id + :shared-libs shared-libs}] [:& shadow-menu {:ids ids :values (select-keys shape [:shadow])}] [:& blur-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index b84072835..e3c0a917b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -77,11 +77,10 @@ (when-not (empty? stroke-ids) [:& stroke-menu {:type type :ids stroke-ids :values stroke-values}]) - (when (> (count objects) 2) - [:& color-selection-menu {:type type - :shapes (vals objects) - :file-id file-id - :shared-libs shared-libs}]) + [:& color-selection-menu {:type type + :shapes (vals objects) + :file-id file-id + :shared-libs shared-libs}] (when-not (empty? shadow-ids) [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) diff --git a/version.txt b/version.txt index 1b92e588b..843f86353 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -1.19.3 +1.19.4