3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-10 21:31:39 +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 (ns app.main.ui.workspace.tokens.modals
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@ -20,30 +21,55 @@
(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"
[{vh :height} position x y] [{vh :height} position x y color?]
(let [;; picker height in pixels (let [;; picker height in pixels
h 510 ;; TODO: Revisit these harcoded values
h (if color? 610 510)
;; Checks for overflow outside the viewport height ;; Checks for overflow outside the viewport height
overflow-fix (max 0 (+ y (- 50) h (- vh))) max-y (- vh h)
overflow-fix (max 0 (+ y (- 50) h (- vh)))
x-pos 325] 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 (cond
(or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"} (or (nil? x) (nil? y))
(= position :left) {:left (str (- x x-pos) "px") {:left "auto" :right "16rem" :top "4rem"}
:top (str (- y 50 overflow-fix) "px")}
:else {:left (str (+ x 80) "px")
:top (str (- y 70 overflow-fix) "px")})))
(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) (let [vport (-> (l/derived :vport refs/workspace-local)
(mf/deref))] (mf/deref))]
(-> (calculate-position vport position x y) (-> (calculate-position vport position x y color?)
(clj->js)))) (clj->js))))
(mf/defc token-update-create-modal (mf/defc token-update-create-modal
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [x y position token token-type action selected-token-set-name] :as _args}] [{: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* (mf/use-state false)
modal-size-large? (deref modal-size-large*) modal-size-large? (deref modal-size-large*)
close-modal (mf/use-fn close-modal (mf/use-fn