3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 12:46:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Remember color picker library in local session

Browse source
This commit is contained in:
Andrés Moya 2021-02-01 13:05:26 +01:00 • committed by Alonso Torres
parent 0ea8e9e750
commit dc5cff645a
3 changed files with 31 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/data/colors.cljs
View file

@ -59,13 +59,23 @@
(assoc-in [:workspace-local :selected-palette-size] size))))) (assoc-in [:workspace-local :selected-palette-size] size)))))
(defn change-palette-selected [selected] (defn change-palette-selected [selected]
"Change the library used by the general palette tool"
(ptk/reify ::change-palette-selected (ptk/reify ::change-palette-selected
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :selected-palette] selected))))) (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] (defn show-palette [selected]
"Show the palette tool and change the library it uses"
(ptk/reify ::change-palette-selected (ptk/reify ::change-palette-selected
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]

1
frontend/src/app/main/data/workspace.cljs
View file

@ -121,6 +121,7 @@
:left-sidebar? true :left-sidebar? true
:right-sidebar? true :right-sidebar? true
:color-for-rename nil :color-for-rename nil
:selected-palette-colorpicker :recent
:selected-palette :recent :selected-palette :recent
:selected-palette-size :big :selected-palette-size :big
:picking-color? false :picking-color? false

37
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View file

@ -32,9 +32,13 @@
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]])) [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 (mf/defc libraries [{:keys [current-color on-select-color on-add-library-color
disable-gradient disable-opacity]}] 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 []) current-library-colors (mf/use-state [])
shared-libs (mf/deref refs/workspace-libraries) shared-libs (mf/deref refs/workspace-libraries)
@ -43,10 +47,10 @@
locale (mf/deref i18n/locale) locale (mf/deref i18n/locale)
parse-selected parse-selected
(fn [selected] (fn [selected-str]
(if (#{"recent" "file"} selected) (if (#{"recent" "file"} selected-str)
(keyword selected) (keyword selected-str)
(uuid selected)) ) (uuid selected-str)))
check-valid-color? (fn [color] check-valid-color? (fn [color]
(and (or (not disable-gradient) (not (:gradient color))) (and (or (not disable-gradient) (not (:gradient color)))
@ -54,37 +58,36 @@
;; Load library colors when the select is changed ;; Load library colors when the select is changed
(mf/use-effect (mf/use-effect
(mf/deps @selected-library) (mf/deps selected-library)
(fn [] (fn []
(let [mapped-colors (let [mapped-colors
(cond (cond
(= @selected-library "recent") (= selected-library :recent)
;; The `map?` check is to keep backwards compatibility. We transform from string to map ;; The `map?` check is to keep backwards compatibility. We transform from string to map
(map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors []))) (map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors [])))
(= @selected-library "file") (= selected-library :file)
(vals file-colors) (vals file-colors)
:else ;; Library UUID :else ;; Library UUID
(->> (get-in shared-libs [(uuid @selected-library) :data :colors]) (->> (get-in shared-libs [selected-library :data :colors])
(vals) (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))))) (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 ;; If the file colors change and the file option is selected updates the state
(mf/use-effect (mf/use-effect
(mf/deps file-colors) (mf/deps file-colors)
(fn [] (when (= @selected-library "file") (fn [] (when (= selected-library :file)
(let [colors (vals file-colors)] (let [colors (vals file-colors)]
(reset! current-library-colors (into [] (filter check-valid-color?) colors)))))) (reset! current-library-colors (into [] (filter check-valid-color?) colors))))))
[:div.libraries [:div.libraries
[:select {:on-change (fn [e] [:select {:on-change (fn [e]
(when-let [val (dom/get-target-val e)] (when-let [val (parse-selected (dom/get-target-val e))]
(reset! selected-library val))) (st/emit! (dc/change-palette-selected-colorpicker val))))
:value @selected-library} :value (name selected-library)}
[:option {:value "recent"} (t locale "workspace.libraries.colors.recent-colors")] [:option {:value "recent"} (t locale "workspace.libraries.colors.recent-colors")]
[:option {:value "file"} (t locale "workspace.libraries.colors.file-library")] [:option {:value "file"} (t locale "workspace.libraries.colors.file-library")]
@ -93,13 +96,13 @@
:value id} name])] :value id} name])]
[:div.selected-colors [:div.selected-colors
(when (= "file" @selected-library) (when (= selected-library :file)
[:div.color-bullet.button.plus-button {:style {:background-color "white"} [:div.color-bullet.button.plus-button {:style {:background-color "white"}
:on-click on-add-library-color} :on-click on-add-library-color}
i/plus]) i/plus])
[:div.color-bullet.button {:style {:background-color "white"} [: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] i/palette]
(for [[idx color] (map-indexed vector @current-library-colors)] (for [[idx color] (map-indexed vector @current-library-colors)]