diff --git a/CHANGES.md b/CHANGES.md index 626be878b..a06a37d4c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,6 +2,10 @@ ## 1.19.3 +### :sparkles: New features + +- Colorpicker: remember last color mode [Taiga #5508](https://tree.taiga.io/project/penpot/issue/5508) + ### :bug: Bugs fixed - List view is discarded on tab change on Workspace Assets Sidebar tab [Github #3547](https://github.com/penpot/penpot/issues/3547) diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 32de9cf96..3fdb48ac9 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -22,6 +22,7 @@ [app.main.data.workspace.texts :as dwt] [app.main.data.workspace.undo :as dwu] [app.util.color :as uc] + [app.util.storage :refer [storage]] [beicon.core :as rx] [potok.core :as ptk])) @@ -647,3 +648,12 @@ :position :right}) (ptk/event ::ev/event {::ev/name "add-asset-to-library" :asset-type "color"})))))) + +(defn get-active-color-tab + [] + (let [tab (::tab @storage)] + (or tab :ramp))) + +(defn set-active-color-tab! + [tab] + (swap! storage assoc ::tab tab)) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 5b15d247d..9b912afd5 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -56,12 +56,17 @@ current-color (:current-color state) - active-tab (mf/use-state :ramp #_:harmony #_:hsva) - set-ramp-tab! (mf/use-fn #(reset! active-tab :ramp)) - set-harmony-tab! (mf/use-fn #(reset! active-tab :harmony)) - set-hsva-tab! (mf/use-fn #(reset! active-tab :hsva)) - + active-tab (mf/use-state (dc/get-active-color-tab)) drag? (mf/use-state false) + + set-tab! + (mf/use-fn + (fn [event] + (let [tab (-> (dom/get-current-target event) + (dom/get-data "tab") + (keyword))] + (reset! active-tab tab) + (dc/set-active-color-tab! tab)))) handle-change-color (mf/use-fn @@ -81,9 +86,9 @@ (fn [] (if picking-color? (do (modal/disallow-click-outside!) - (st/emit! (dc/stop-picker))) + (st/emit! (dc/stop-picker))) (do (modal/allow-click-outside!) - (st/emit! (dc/start-picker)))))) + (st/emit! (dc/start-picker)))))) handle-change-stop (mf/use-fn @@ -225,15 +230,18 @@ [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand {:class (when (= @active-tab :ramp) "active") :alt (tr "workspace.libraries.colors.rgba") - :on-click set-ramp-tab!} i/picker-ramp] + :on-click set-tab! + :data-tab "ramp"} i/picker-ramp] [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand {:class (when (= @active-tab :harmony) "active") :alt (tr "workspace.libraries.colors.rgb-complementary") - :on-click set-harmony-tab!} i/picker-harmony] + :on-click set-tab! + :data-tab "harmony"} i/picker-harmony] [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand {:class (when (= @active-tab :hsva) "active") :alt (tr "workspace.libraries.colors.hsv") - :on-click set-hsva-tab!} i/picker-hsv]] + :on-click set-tab! + :data-tab "hsva"} i/picker-hsv]] (if picking-color? [:div.picker-detail-wrapper