mirror of
https://github.com/penpot/penpot.git
synced 2025-05-24 00:06:11 +02:00
Merge pull request #2324 from penpot/eva-fix-library-colors
🐛 Fix library color selector
This commit is contained in:
commit
b2d0f3cac2
5 changed files with 24 additions and 26 deletions
|
@ -14,7 +14,7 @@
|
||||||
[app.common.spec :as us]
|
[app.common.spec :as us]
|
||||||
[clojure.spec.alpha :as s]))
|
[clojure.spec.alpha :as s]))
|
||||||
|
|
||||||
(def precision 3)
|
(def precision 6)
|
||||||
|
|
||||||
;; --- Matrix Impl
|
;; --- Matrix Impl
|
||||||
|
|
||||||
|
|
|
@ -300,13 +300,13 @@
|
||||||
[key default]
|
[key default]
|
||||||
(let [id (use-id)
|
(let [id (use-id)
|
||||||
state (mf/use-state (get @storage key default))
|
state (mf/use-state (get @storage key default))
|
||||||
stream (mf/with-memo []
|
stream (mf/with-memo [id]
|
||||||
(->> mbc/stream
|
(->> mbc/stream
|
||||||
(rx/filter #(= (:type %) key))
|
|
||||||
(rx/filter #(not= (:id %) id))
|
(rx/filter #(not= (:id %) id))
|
||||||
|
(rx/filter #(= (:type %) key))
|
||||||
(rx/map deref)))]
|
(rx/map deref)))]
|
||||||
|
|
||||||
(mf/with-effect [@state key]
|
(mf/with-effect [@state key id]
|
||||||
(mbc/emit! id key @state)
|
(mbc/emit! id key @state)
|
||||||
(swap! storage assoc key @state))
|
(swap! storage assoc key @state))
|
||||||
|
|
||||||
|
|
|
@ -37,17 +37,17 @@
|
||||||
(mf/defc palette
|
(mf/defc palette
|
||||||
[{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}]
|
[{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}]
|
||||||
(let [;; We had to do this due to a bug that leave some bugged colors
|
(let [;; We had to do this due to a bug that leave some bugged colors
|
||||||
current-colors (filter #(or (:gradient %) (:color %)) current-colors)
|
current-colors (h/use-equal-memo (filter #(or (:gradient %) (:color %)) current-colors))
|
||||||
state (mf/use-state {:show-menu false})
|
state (mf/use-state {:show-menu false})
|
||||||
|
|
||||||
width (:width @state 0)
|
width (:width @state 0)
|
||||||
visible (/ width 66)
|
visible (/ width 66)
|
||||||
|
|
||||||
offset (:offset @state 0)
|
offset (:offset @state 0)
|
||||||
max-offset (- (count current-colors)
|
max-offset (- (count current-colors)
|
||||||
visible)
|
visible)
|
||||||
|
|
||||||
container (mf/use-ref nil)
|
container (mf/use-ref nil)
|
||||||
|
|
||||||
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
|
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
|
||||||
(use-resize-hook :palette 72 54 80 :y true :bottom)
|
(use-resize-hook :palette 72 54 80 :y true :bottom)
|
||||||
|
@ -139,7 +139,7 @@
|
||||||
(tr "workspace.libraries.colors.file-library")
|
(tr "workspace.libraries.colors.file-library")
|
||||||
(str/ffmt " (%)" (count file-colors)))]
|
(str/ffmt " (%)" (count file-colors)))]
|
||||||
[:div.color-sample
|
[:div.color-sample
|
||||||
(for [[i color] (map-indexed vector (take 7 (vals file-colors))) ]
|
(for [[i color] (map-indexed vector (take 7 (vals file-colors)))]
|
||||||
[:& cb/color-bullet {:key (dm/str "color-" i)
|
[:& cb/color-bullet {:key (dm/str "color-" i)
|
||||||
:color color}])]]
|
:color color}])]]
|
||||||
|
|
||||||
|
@ -150,7 +150,7 @@
|
||||||
[:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
|
[:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
|
||||||
(str/format " (%s)" (count recent-colors)))]
|
(str/format " (%s)" (count recent-colors)))]
|
||||||
[:div.color-sample
|
[:div.color-sample
|
||||||
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
|
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))]
|
||||||
[:& cb/color-bullet {:key (str "color-" idx)
|
[:& cb/color-bullet {:key (str "color-" idx)
|
||||||
:color color}])]]]]
|
:color color}])]]]]
|
||||||
|
|
||||||
|
@ -185,13 +185,11 @@
|
||||||
on-select (mf/use-fn #(reset! selected %))]
|
on-select (mf/use-fn #(reset! selected %))]
|
||||||
|
|
||||||
(mf/with-effect [@selected]
|
(mf/with-effect [@selected]
|
||||||
(fn []
|
(let [colors' (cond
|
||||||
(reset! colors
|
(= @selected :recent) (reverse recent-colors)
|
||||||
(into []
|
(= @selected :file) (->> (vals file-colors) (sort-by :name))
|
||||||
(cond
|
:else (->> (library->colors shared-libs @selected) (sort-by :name)))]
|
||||||
(= @selected :recent) (reverse recent-colors)
|
(reset! colors (into [] colors'))))
|
||||||
(= @selected :file) (->> (vals file-colors) (sort-by :name))
|
|
||||||
:else (->> (library->colors shared-libs @selected) (sort-by :name)))))))
|
|
||||||
|
|
||||||
(mf/with-effect [recent-colors @selected]
|
(mf/with-effect [recent-colors @selected]
|
||||||
(when (= @selected :recent)
|
(when (= @selected :recent)
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
(ns app.main.ui.workspace.colorpicker.libraries
|
(ns app.main.ui.workspace.colorpicker.libraries
|
||||||
(:require
|
(:require
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.main.data.workspace.colors :as dc]
|
[app.main.data.workspace.colors :as mdc]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||||
|
@ -19,13 +19,13 @@
|
||||||
|
|
||||||
(mf/defc libraries
|
(mf/defc libraries
|
||||||
[{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}]
|
[{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}]
|
||||||
(let [selected (h/use-shared-state dc/colorpicker-selected-broadcast-key :recent)
|
(let [selected (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent)
|
||||||
current-colors (mf/use-state [])
|
current-colors (mf/use-state [])
|
||||||
|
|
||||||
shared-libs (mf/deref refs/workspace-libraries)
|
shared-libs (mf/deref refs/workspace-libraries)
|
||||||
file-colors (mf/deref refs/workspace-file-colors)
|
file-colors (mf/deref refs/workspace-file-colors)
|
||||||
recent-colors (mf/deref refs/workspace-recent-colors)
|
recent-colors (mf/deref refs/workspace-recent-colors)
|
||||||
recent-colors (filter #(or (:gradient %) (:color %)) recent-colors)
|
recent-colors (h/use-equal-memo (filter #(or (:gradient %) (:color %)) recent-colors))
|
||||||
|
|
||||||
on-library-change
|
on-library-change
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
i/plus])
|
i/plus])
|
||||||
|
|
||||||
[:div.color-bullet.button {:style {:background-color "var(--color-white)"}
|
[:div.color-bullet.button {:style {:background-color "var(--color-white)"}
|
||||||
:on-click #(st/emit! (dc/show-palette @selected))}
|
:on-click #(st/emit! (mdc/show-palette @selected))}
|
||||||
i/palette]
|
i/palette]
|
||||||
|
|
||||||
(for [[idx color] (map-indexed vector @current-colors)]
|
(for [[idx color] (map-indexed vector @current-colors)]
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue