Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-25 00:06:09 -05:00
Code Issues Activity

🐛 Fix colorpicker outside viewport

Browse source
This commit is contained in:
Aitor 2024-01-16 15:59:05 +01:00
parent a84b23168d
commit cf569baabd
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -378,17 +378,22 @@
[{vh :height} position x y] [{vh :height} position x y]
(let [;; picker height in pixels (let [;; picker height in pixels
h 510 h 510
;; Checks for overflow outside the viewport height ;; Checks for overflow outside the viewport height
overflow-fix (max 0 (+ y (- 50) h (- vh))) ;; overflow-fix (max 0 (+ y (- 50) h (- vh)))
max-y (- vh h)
x-pos 325] x-pos 325]
(cond (cond
(or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"} (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
(= position :left) {:left (str (- x x-pos) "px") (= position :left)
:top (str (- y 50 overflow-fix) "px")} (if (> y max-y)
{:left (str (- x x-pos) "px")
:bottom "1rem"}
{:left (str (- x x-pos) "px")
:top (str (- y 70) "px")})
:else {:left (str (+ x 80) "px") :else {:left (str (+ x 80) "px")
:top (str (- y 70 overflow-fix) "px")}))) :top (str (- y 70) "px")})))
(mf/defc colorpicker-modal (mf/defc colorpicker-modal
{::mf/register modal/components {::mf/register modal/components

2
frontend/src/app/main/ui/workspace/colorpicker.scss
View file

@ -8,7 +8,7 @@
.colorpicker-tooltip { .colorpicker-tooltip {
@extend .modal-background; @extend .modal-background;
top: $s-100; // top: $s-100;
left: calc(10 * $s-140); left: calc(10 * $s-140);
width: auto; width: auto;
} }