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]
(let [;; picker height in pixels
h 510
;; 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]
(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")}
(= position :left)
(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")
:top (str (- y 70 overflow-fix) "px")})))
:top (str (- y 70) "px")})))
(mf/defc colorpicker-modal
{::mf/register modal/components

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

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