From dc5cff645a7f4b2d7c95e9bc1e357b8549adc033 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 1 Feb 2021 13:05:26 +0100 Subject: [PATCH] :sparkles: Remember color picker library in local session --- frontend/src/app/main/data/colors.cljs | 10 +++++ frontend/src/app/main/data/workspace.cljs | 1 + .../ui/workspace/colorpicker/libraries.cljs | 37 ++++++++++--------- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs index 493e8b573..909f0d4b9 100644 --- a/frontend/src/app/main/data/colors.cljs +++ b/frontend/src/app/main/data/colors.cljs @@ -59,13 +59,23 @@ (assoc-in [:workspace-local :selected-palette-size] size))))) (defn change-palette-selected [selected] + "Change the library used by the general palette tool" (ptk/reify ::change-palette-selected ptk/UpdateEvent (update [_ state] (-> state (assoc-in [:workspace-local :selected-palette] selected))))) +(defn change-palette-selected-colorpicker [selected] + "Change the library used by the color picker" + (ptk/reify ::change-palette-selected-colorpicker + ptk/UpdateEvent + (update [_ state] + (-> state + (assoc-in [:workspace-local :selected-palette-colorpicker] selected))))) + (defn show-palette [selected] + "Show the palette tool and change the library it uses" (ptk/reify ::change-palette-selected ptk/UpdateEvent (update [_ state] diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index e3fd438ce..26dd1332f 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -121,6 +121,7 @@ :left-sidebar? true :right-sidebar? true :color-for-rename nil + :selected-palette-colorpicker :recent :selected-palette :recent :selected-palette-size :big :picking-color? false diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 2912a88fe..827dfa15f 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -32,9 +32,13 @@ [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]])) +(def selected-palette-ref + (-> (l/in [:workspace-local :selected-palette-colorpicker]) + (l/derived st/state))) + (mf/defc libraries [{:keys [current-color on-select-color on-add-library-color disable-gradient disable-opacity]}] - (let [selected-library (mf/use-state "recent") + (let [selected-library (or (mf/deref selected-palette-ref) :recent) current-library-colors (mf/use-state []) shared-libs (mf/deref refs/workspace-libraries) @@ -43,10 +47,10 @@ locale (mf/deref i18n/locale) parse-selected - (fn [selected] - (if (#{"recent" "file"} selected) - (keyword selected) - (uuid selected)) ) + (fn [selected-str] + (if (#{"recent" "file"} selected-str) + (keyword selected-str) + (uuid selected-str))) check-valid-color? (fn [color] (and (or (not disable-gradient) (not (:gradient color))) @@ -54,37 +58,36 @@ ;; Load library colors when the select is changed (mf/use-effect - (mf/deps @selected-library) + (mf/deps selected-library) (fn [] (let [mapped-colors (cond - (= @selected-library "recent") + (= selected-library :recent) ;; The `map?` check is to keep backwards compatibility. We transform from string to map (map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors []))) - (= @selected-library "file") + (= selected-library :file) (vals file-colors) :else ;; Library UUID - (->> (get-in shared-libs [(uuid @selected-library) :data :colors]) + (->> (get-in shared-libs [selected-library :data :colors]) (vals) - (map #(merge % {:file-id (uuid @selected-library)}))))] + (map #(merge % {:file-id selected-library}))))] (reset! current-library-colors (into [] (filter check-valid-color?) mapped-colors))))) ;; If the file colors change and the file option is selected updates the state (mf/use-effect (mf/deps file-colors) - (fn [] (when (= @selected-library "file") + (fn [] (when (= selected-library :file) (let [colors (vals file-colors)] (reset! current-library-colors (into [] (filter check-valid-color?) colors)))))) - [:div.libraries [:select {:on-change (fn [e] - (when-let [val (dom/get-target-val e)] - (reset! selected-library val))) - :value @selected-library} + (when-let [val (parse-selected (dom/get-target-val e))] + (st/emit! (dc/change-palette-selected-colorpicker val)))) + :value (name selected-library)} [:option {:value "recent"} (t locale "workspace.libraries.colors.recent-colors")] [:option {:value "file"} (t locale "workspace.libraries.colors.file-library")] @@ -93,13 +96,13 @@ :value id} name])] [:div.selected-colors - (when (= "file" @selected-library) + (when (= selected-library :file) [:div.color-bullet.button.plus-button {:style {:background-color "white"} :on-click on-add-library-color} i/plus]) [:div.color-bullet.button {:style {:background-color "white"} - :on-click #(st/emit! (dc/show-palette (parse-selected @selected-library)))} + :on-click #(st/emit! (dc/show-palette selected-library))} i/palette] (for [[idx color] (map-indexed vector @current-library-colors)]