Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-27 00:49:28 -05:00
Code Issues Activity

🐛 Fixes problem when picker is outside screen bounds

Browse source
This commit is contained in:
alonso.torres 2020-09-16 11:28:55 +02:00 • committed by Andrey Antukh
parent 43fccd17b4
commit 8732407a7f
1 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,6 +38,9 @@
(def picked-shift? (def picked-shift?
(l/derived :picked-shift? refs/workspace-local)) (l/derived :picked-shift? refs/workspace-local))
(def viewport
(l/derived (comp :vport :workspace-local) st/state))
;; --- Color Picker Modal ;; --- Color Picker Modal
@ -371,21 +374,28 @@
(defn calculate-position (defn calculate-position
"Calculates the style properties for the given coordinates and position" "Calculates the style properties for the given coordinates and position"
[position x y] [{vh :height} position x y]
(cond (let [;; picker height in pixels
(or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"} h 360
(= position :left) {:left (str (- x 270) "px") :top (str (- y 50) "px")} ;; Checks for overflow outside the viewport height
:else {:left (str (+ x 24) "px") :top (str (- y 50) "px")})) overflow-fix (max 0 (+ y (- 50) h (- vh)))]
(cond
(or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
(= position :left) {:left (str (- x 270) "px")
:top (str (- y 50 overflow-fix) "px")}
:else {:left (str (+ x 24) "px")
:top (str (- y 50 overflow-fix) "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}
[{:keys [x y default value opacity page on-change on-close disable-opacity position on-accept] :as props}] [{:keys [x y default value opacity page on-change on-close disable-opacity position on-accept] :as props}]
(let [dirty? (mf/use-var false) (let [vport (mf/deref viewport)
dirty? (mf/use-var false)
last-change (mf/use-var nil) last-change (mf/use-var nil)
position (or position :left) position (or position :left)
style (calculate-position position x y) style (calculate-position vport position x y)
handle-change (fn [new-value new-opacity op1 op2] handle-change (fn [new-value new-opacity op1 op2]
(when (or (not= new-value value) (not= new-opacity opacity)) (when (or (not= new-value value) (not= new-opacity opacity))