3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-04 05:31:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix modal position when colopicker is open (#6139)

Browse source
This commit is contained in:
Eva Marco 2025-03-24 16:10:16 +01:00 • committed by GitHub
parent 95d9403790
commit 7bc000517f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 40 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/app/main/ui/workspace/tokens/modals.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.tokens.modals
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@ -20,30 +21,55 @@
(defn calculate-position
"Calculates the style properties for the given coordinates and position"
[{vh :height} position x y]
(let [;; picker height in pixels
h 510
[{vh :height} position x y color?]
(let [;; picker height in pixels
;; TODO: Revisit these harcoded values
h (if color? 610 510)
;; Checks for overflow outside the viewport height
overflow-fix (max 0 (+ y (- 50) h (- vh)))
x-pos 325]
max-y (- vh h)
overflow-fix (max 0 (+ y (- 50) h (- vh)))
bottom-offset "1rem"
top-offset (dm/str (- y 70) "px")
max-height-top (str "calc(100vh - " top-offset)
max-height-bottom (str "calc(100vh -" bottom-offset)
x-pos 325
rulers? (mf/deref refs/rulers?)
left-offset (if rulers? 80 58)
left-position (dm/str (- x x-pos) "px")]
(cond
(or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
(= position :left) {:left (str (- x x-pos) "px")
:top (str (- y 50 overflow-fix) "px")}
:else {:left (str (+ x 80) "px")
:top (str (- y 70 overflow-fix) "px")})))
(or (nil? x) (nil? y))
{:left "auto" :right "16rem" :top "4rem"}
(defn use-viewport-position-style [x y position]
(= position :left)
(if (> y max-y)
{:left left-position
:bottom bottom-offset
:maxHeight max-height-bottom}
{:left left-position
:maxHeight max-height-top
:top (dm/str (- y 50 overflow-fix) "px")})
:else
(if (> y max-y)
{:left (dm/str (+ x left-offset) "px")
:bottom bottom-offset
:maxHeight max-height-bottom}
{:left (dm/str (+ x left-offset) "px")
:top (dm/str (- y 70 overflow-fix) "px")
:maxHeight max-height-top}))))
(defn use-viewport-position-style [x y position color?]
(let [vport (-> (l/derived :vport refs/workspace-local)
(mf/deref))]
(-> (calculate-position vport position x y)
(-> (calculate-position vport position x y color?)
(clj->js))))
(mf/defc token-update-create-modal
{::mf/wrap-props false}
[{:keys [x y position token token-type action selected-token-set-name] :as _args}]
(let [wrapper-style (use-viewport-position-style x y position)
(let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
modal-size-large* (mf/use-state false)
modal-size-large? (deref modal-size-large*)
close-modal (mf/use-fn