mirror of
https://github.com/penpot/penpot.git
synced 2025-06-11 08:11:40 +02:00
🐛 Fix unreachable Save color style button (#5879)
* 🐛 Fix unreachable Save color style button * 📎 Fix unreachable Save color style button code review
This commit is contained in:
parent
0900b7a572
commit
6a5538bb15
2 changed files with 113 additions and 100 deletions
|
@ -403,6 +403,7 @@
|
|||
:h h :s s :v v
|
||||
:alpha (/ alpha 255)}))))
|
||||
|
||||
[:*
|
||||
[:div {:class (stl/css :colorpicker)
|
||||
:ref node-ref
|
||||
:style {:touch-action "none"}}
|
||||
|
@ -499,8 +500,7 @@
|
|||
:disable-opacity disable-opacity
|
||||
:disable-image disable-image
|
||||
:on-select-color on-select-library-color
|
||||
:on-add-library-color on-add-library-color}]])
|
||||
|
||||
:on-add-library-color on-add-library-color}]])]
|
||||
(when (fn? on-accept)
|
||||
[:div {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css-case
|
||||
|
@ -520,32 +520,41 @@
|
|||
max-y (- vh h)
|
||||
rulers? (mf/deref refs/rulers?)
|
||||
left-offset (if rulers? 40 18)
|
||||
right-offset (+ w 40)]
|
||||
|
||||
right-offset (+ w 40)
|
||||
top-offset (dm/str (- y 70) "px")
|
||||
bottom-offset "1rem"
|
||||
max-height-top (str "calc(100vh - " top-offset)
|
||||
max-height-bottom (str "calc(100vh -" bottom-offset)]
|
||||
(cond
|
||||
(or (nil? x) (nil? y))
|
||||
#js {:left "auto" :right "16rem" :top "4rem"}
|
||||
#js {:left "auto" :right "16rem" :top "4rem" :maxHeight "calc(100vh - 4rem)"}
|
||||
|
||||
(= position :left)
|
||||
(if (> y max-y)
|
||||
#js {:left (dm/str (- x right-offset) "px")
|
||||
:bottom "1rem"}
|
||||
:bottom bottom-offset
|
||||
:maxHeight max-height-bottom}
|
||||
#js {:left (dm/str (- x right-offset) "px")
|
||||
:top (dm/str (- y 70) "px")})
|
||||
:top top-offset
|
||||
:maxHeight max-height-top})
|
||||
|
||||
(= position :right)
|
||||
(if (> y max-y)
|
||||
#js {:left (dm/str (+ x 80) "px")
|
||||
:bottom "1rem"}
|
||||
:bottom bottom-offset
|
||||
:maxHeight max-height-bottom}
|
||||
#js {:left (dm/str (+ x 80) "px")
|
||||
:top (dm/str (- y 70) "px")})
|
||||
:top top-offset
|
||||
:maxHeight max-height-top})
|
||||
|
||||
:else
|
||||
(if (> y max-y)
|
||||
#js {:left (dm/str (+ x left-offset) "px")
|
||||
:bottom "1rem"}
|
||||
:bottom bottom-offset
|
||||
:maxHeight max-height-bottom}
|
||||
#js {:left (dm/str (+ x left-offset) "px")
|
||||
:top (dm/str (- y 70) "px")}))))
|
||||
:top top-offset
|
||||
:maxHeight max-height-top}))))
|
||||
|
||||
(mf/defc colorpicker-modal
|
||||
{::mf/register modal/components
|
||||
|
|
|
@ -13,10 +13,14 @@
|
|||
width: auto;
|
||||
padding: var(--sp-m);
|
||||
width: $sz-284;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.colorpicker {
|
||||
border-radius: $br-8;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.colorpicker-tabs {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue