Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues 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
Show stats 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
[app.common.colors :as cc]
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cfg]
[app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dc]
@ -50,6 +51,7 @@
;; --- Color Picker Modal
(mf/defc colorpicker
{::mf/props :obj}
[{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}]
(let [state (mf/deref refs/colorpicker)
node-ref (mf/use-ref)
@ -90,7 +92,7 @@
(not @drag?)))))
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
(mf/use-fn
@ -107,7 +109,7 @@
(assoc :keep-aspect-ratio keep-aspect-ratio?))}
true)))))
set-tab!
on-change-tab
(mf/use-fn
(fn [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-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]
(when (and picking-color? picked-color picked-color-select)
(let [[r g b alpha] picked-color
@ -294,7 +296,7 @@
[:*
[:div {:class (stl/css :colorpicker-tabs)}
[:& tab-container
{:on-change-tab set-tab!
{:on-change-tab on-change-tab
:selected @active-color-tab
:collapsable false}
@ -349,7 +351,7 @@
:on-select-color on-select-library-color
:on-add-library-color on-add-library-color}]])
(when on-accept
(when (fn? on-accept)
[:div {:class (stl/css :actions)}
[:button {:class (stl/css-case
:accept-color true
@ -372,59 +374,68 @@
x-pos 400]
(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)
(if (> y max-y)
#js {:left (str (- x x-pos) "px")
#js {:left (dm/str (- x x-pos) "px")
:bottom "1rem"}
#js {:left (str (- x x-pos) "px")
:top (str (- y 70) "px")})
#js {:left (dm/str (- x x-pos) "px")
:top (dm/str (- y 70) "px")})
(= position :right)
(if (> y max-y)
#js {:left (str (+ x 80) "px")
#js {:left (dm/str (+ x 80) "px")
:bottom "1rem"}
#js {:left (str (+ x 80) "px")
:top (str (- y 70) "px")})
:else (if (> y max-y)
#js {:left (str (+ x left-offset) "px")
:bottom "1rem"}
#js {:left (str (+ x left-offset) "px")
:top (str (- y 70) "px")}))))
#js {:left (dm/str (+ x 80) "px")
:top (dm/str (- y 70) "px")})
:else
(if (> y max-y)
#js {:left (dm/str (+ x left-offset) "px")
:bottom "1rem"}
#js {:left (dm/str (+ x left-offset) "px")
:top (dm/str (- y 70) "px")}))))
(mf/defc colorpicker-modal
{::mf/register modal/components
::mf/register-as :colorpicker}
::mf/register-as :colorpicker
::mf/props :obj}
[{:keys [x y data position
disable-gradient
disable-opacity
disable-image
on-change
on-close
on-accept] :as props}]
(let [vport (mf/deref viewport)
dirty? (mf/use-var false)
on-accept]}]
(let [vport (mf/deref viewport)
dirty? (mf/use-var false)
last-change (mf/use-var nil)
position (or position :left)
style (calculate-position vport position x y)
position (d/nilv position :left)
style (calculate-position vport position x y)
handle-change
(fn [new-data]
(reset! dirty? (not= data new-data))
(reset! last-change new-data)
(when on-change
(on-change new-data)))]
on-change'
(mf/use-fn
(mf/deps on-change)
(fn [new-data]
(reset! dirty? (not= data new-data))
(reset! last-change new-data)
(mf/use-effect
(fn []
#(when (and @dirty? @last-change on-close)
(on-close @last-change))))
(when (fn? on-change)
(on-change new-data))))]
(mf/with-effect []
#(when (and @dirty? @last-change on-close)
(on-close @last-change)))
[:div {:class (stl/css :colorpicker-tooltip)
:style style}
[:& colorpicker {:data data
:disable-gradient disable-gradient
:disable-opacity disable-opacity
:disable-image disable-image
:on-change handle-change
:on-change on-change'
: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?))
read-only? (mf/use-ctx ctx/workspace-read-only?)
add-color
(mf/use-fn
(fn [value _]
@ -386,23 +387,22 @@
(mf/use-fn
(mf/deps file-id)
(fn [event]
(let [bounding-rect (-> event
(dom/get-current-target)
(dom/get-bounding-rect))
x-position (:right bounding-rect)
y-position (:top bounding-rect)]
(let [bounds (-> event
(dom/get-current-target)
(dom/get-bounding-rect))
x-position (:right bounds)
y-position (:top bounds)]
(st/emit! (dw/set-assets-section-open file-id :colors true)
(ptk/event ::ev/event {::ev/name "add-asset-to-library"
:asset-type "color"}))
;; FIXME: replace interop with dom helpers
(modal/show! :colorpicker
{:x x-position
:y y-position
:on-accept add-color
:data {:color "#406280"
:opacity 1}
:position :right}))))
:asset-type "color"})
(modal/show :colorpicker
{:x x-position
:y y-position
:on-accept add-color
:data {:color "#406280"
:opacity 1}
:position :right})))))
create-group
(mf/use-fn