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

💄 Add cosmetic changes to colorpicker modal react components

Browse source
This commit is contained in:
Andrey Antukh 2024-02-20 15:27:44 +01:00
parent cc9546dd1b
commit d28c7cf061
2 changed files with 59 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@
(:require (:require
[app.common.colors :as cc] [app.common.colors :as cc]
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cfg] [app.config :as cfg]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
@ -50,6 +51,7 @@
;; --- Color Picker Modal ;; --- Color Picker Modal
(mf/defc colorpicker (mf/defc colorpicker
{::mf/props :obj}
[{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}] [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}]
(let [state (mf/deref refs/colorpicker) (let [state (mf/deref refs/colorpicker)
node-ref (mf/use-ref) node-ref (mf/use-ref)
@ -90,7 +92,7 @@
(not @drag?))))) (not @drag?)))))
on-fill-image-click on-fill-image-click
(mf/use-callback #(dom/click (mf/ref-val fill-image-ref))) (mf/use-fn #(dom/click (mf/ref-val fill-image-ref)))
on-fill-image-selected on-fill-image-selected
(mf/use-fn (mf/use-fn
@ -107,7 +109,7 @@
(assoc :keep-aspect-ratio keep-aspect-ratio?))} (assoc :keep-aspect-ratio keep-aspect-ratio?))}
true))))) true)))))
set-tab! on-change-tab
(mf/use-fn (mf/use-fn
(fn [event] (fn [event]
(let [tab (-> (dom/get-current-target event) (let [tab (-> (dom/get-current-target event)
@ -226,7 +228,7 @@
(dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from)) (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
(dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))) (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))
;; Updates color when used el pixel picker ;; Updates color when pixel picker is used
(mf/with-effect [picking-color? picked-color picked-color-select] (mf/with-effect [picking-color? picked-color picked-color-select]
(when (and picking-color? picked-color picked-color-select) (when (and picking-color? picked-color picked-color-select)
(let [[r g b alpha] picked-color (let [[r g b alpha] picked-color
@ -294,7 +296,7 @@
[:* [:*
[:div {:class (stl/css :colorpicker-tabs)} [:div {:class (stl/css :colorpicker-tabs)}
[:& tab-container [:& tab-container
{:on-change-tab set-tab! {:on-change-tab on-change-tab
:selected @active-color-tab :selected @active-color-tab
:collapsable false} :collapsable false}
@ -349,7 +351,7 @@
:on-select-color on-select-library-color :on-select-color on-select-library-color
:on-add-library-color on-add-library-color}]]) :on-add-library-color on-add-library-color}]])
(when on-accept (when (fn? on-accept)
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css-case [:button {:class (stl/css-case
:accept-color true :accept-color true
@ -372,59 +374,68 @@
x-pos 400] x-pos 400]
(cond (cond
(or (nil? x) (nil? y)) #js {:left "auto" :right "16rem" :top "4rem"} (or (nil? x) (nil? y))
#js {:left "auto" :right "16rem" :top "4rem"}
(= position :left) (= position :left)
(if (> y max-y) (if (> y max-y)
#js {:left (str (- x x-pos) "px") #js {:left (dm/str (- x x-pos) "px")
:bottom "1rem"} :bottom "1rem"}
#js {:left (str (- x x-pos) "px") #js {:left (dm/str (- x x-pos) "px")
:top (str (- y 70) "px")}) :top (dm/str (- y 70) "px")})
(= position :right) (= position :right)
(if (> y max-y) (if (> y max-y)
#js {:left (str (+ x 80) "px") #js {:left (dm/str (+ x 80) "px")
:bottom "1rem"} :bottom "1rem"}
#js {:left (str (+ x 80) "px") #js {:left (dm/str (+ x 80) "px")
:top (str (- y 70) "px")}) :top (dm/str (- y 70) "px")})
:else (if (> y max-y)
#js {:left (str (+ x left-offset) "px") :else
:bottom "1rem"} (if (> y max-y)
#js {:left (str (+ x left-offset) "px") #js {:left (dm/str (+ x left-offset) "px")
:top (str (- y 70) "px")})))) :bottom "1rem"}
#js {:left (dm/str (+ x left-offset) "px")
:top (dm/str (- y 70) "px")}))))
(mf/defc colorpicker-modal (mf/defc colorpicker-modal
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :colorpicker} ::mf/register-as :colorpicker
::mf/props :obj}
[{:keys [x y data position [{:keys [x y data position
disable-gradient disable-gradient
disable-opacity disable-opacity
disable-image disable-image
on-change on-change
on-close on-close
on-accept] :as props}] on-accept]}]
(let [vport (mf/deref viewport) (let [vport (mf/deref viewport)
dirty? (mf/use-var false) dirty? (mf/use-var false)
last-change (mf/use-var nil) last-change (mf/use-var nil)
position (or position :left) position (d/nilv position :left)
style (calculate-position vport position x y) style (calculate-position vport position x y)
handle-change on-change'
(fn [new-data] (mf/use-fn
(reset! dirty? (not= data new-data)) (mf/deps on-change)
(reset! last-change new-data) (fn [new-data]
(when on-change (reset! dirty? (not= data new-data))
(on-change new-data)))] (reset! last-change new-data)
(mf/use-effect (when (fn? on-change)
(fn [] (on-change new-data))))]
#(when (and @dirty? @last-change on-close)
(on-close @last-change)))) (mf/with-effect []
#(when (and @dirty? @last-change on-close)
(on-close @last-change)))
[:div {:class (stl/css :colorpicker-tooltip) [:div {:class (stl/css :colorpicker-tooltip)
:style style} :style style}
[:& colorpicker {:data data [:& colorpicker {:data data
:disable-gradient disable-gradient :disable-gradient disable-gradient
:disable-opacity disable-opacity :disable-opacity disable-opacity
:disable-image disable-image :disable-image disable-image
:on-change handle-change :on-change on-change'
:on-accept on-accept}]])) :on-accept on-accept}]]))

28
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

@ -377,6 +377,7 @@
(grp/group-assets colors reverse-sort?)) (grp/group-assets colors reverse-sort?))
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
add-color add-color
(mf/use-fn (mf/use-fn
(fn [value _] (fn [value _]
@ -386,23 +387,22 @@
(mf/use-fn (mf/use-fn
(mf/deps file-id) (mf/deps file-id)
(fn [event] (fn [event]
(let [bounding-rect (-> event (let [bounds (-> event
(dom/get-current-target) (dom/get-current-target)
(dom/get-bounding-rect)) (dom/get-bounding-rect))
x-position (:right bounding-rect) x-position (:right bounds)
y-position (:top bounding-rect)] y-position (:top bounds)]
(st/emit! (dw/set-assets-section-open file-id :colors true) (st/emit! (dw/set-assets-section-open file-id :colors true)
(ptk/event ::ev/event {::ev/name "add-asset-to-library" (ptk/event ::ev/event {::ev/name "add-asset-to-library"
:asset-type "color"})) :asset-type "color"})
;; FIXME: replace interop with dom helpers (modal/show :colorpicker
(modal/show! :colorpicker {:x x-position
{:x x-position :y y-position
:y y-position :on-accept add-color
:on-accept add-color :data {:color "#406280"
:data {:color "#406280" :opacity 1}
:opacity 1} :position :right})))))
:position :right}))))
create-group create-group
(mf/use-fn (mf/use-fn