johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix scrollbar on color modal (#7906)

Browse Source
This commit is contained in:
Eva Marco
2025-12-05 09:55:41 +01:00
committed by GitHub
parent bf1dc21c75
commit b6598d1f07
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
View File

@@ -20,15 +20,21 @@
;; Component ------------------------------------------------------------------- ;; Component -------------------------------------------------------------------
(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 color?] [{vh :height} position x y token-type]
(let [;; picker height in pixels (let [; TODO: Revisit these harcoded values
;; TODO: Revisit these harcoded values modal-height (case token-type
h (if color? 610 510) :color
500
:typography
660
:shadow
660
400)
;; Checks for overflow outside the viewport height ;; Checks for overflow outside the viewport height
max-y (- vh h) max-y (- vh modal-height)
overflow-fix (max 0 (+ y (- 50) h (- vh))) overflow-fix (max 0 (+ y (- 50) modal-height (- vh)))
bottom-offset "1rem" bottom-offset "1rem"
top-offset (dm/str (- y 70) "px") top-offset (dm/str (- y 70) "px")
max-height-top (str "calc(100vh - " top-offset) max-height-top (str "calc(100vh - " top-offset)
@@ -61,17 +67,19 @@
:top (dm/str (- y 70 overflow-fix) "px") :top (dm/str (- y 70 overflow-fix) "px")
:maxHeight max-height-top})))) :maxHeight max-height-top}))))
(defn use-viewport-position-style [x y position color?] (defn use-viewport-position-style [x y position token-type]
(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 color?) (-> (calculate-position vport position x y token-type)
(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-id] :as _args}] [{:keys [x y position token token-type action selected-token-set-id] :as _args}]
(let [wrapper-style (use-viewport-position-style x y position (= token-type :color)) (let [wrapper-style (use-viewport-position-style x y position token-type)
modal-size-large* (mf/use-state (= token-type :typography)) modal-size-large* (mf/use-state (or (= token-type :typography)
(= token-type :color)
(= token-type :shadow)))
modal-size-large? (deref modal-size-large*) modal-size-large? (deref modal-size-large*)
close-modal (mf/use-fn close-modal (mf/use-fn
(fn [] (fn []