3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-11 19:31:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix unreachable Save color style button (#5879)

Browse source 
* 🐛 Fix unreachable Save color style button

* 📎 Fix unreachable Save color style button code review
This commit is contained in:
María Valderrama 2025-02-18 11:32:00 +01:00 • committed by GitHub
parent 0900b7a572
commit 6a5538bb15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 113 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -403,6 +403,7 @@
:h h :s s :v v :h h :s s :v v
:alpha (/ alpha 255)})))) :alpha (/ alpha 255)}))))
[:*
[:div {:class (stl/css :colorpicker) [:div {:class (stl/css :colorpicker)
:ref node-ref :ref node-ref
:style {:touch-action "none"}} :style {:touch-action "none"}}
@ -499,8 +500,7 @@
:disable-opacity disable-opacity :disable-opacity disable-opacity
:disable-image disable-image :disable-image disable-image
:on-select-color on-select-library-color :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) (when (fn? on-accept)
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css-case [:button {:class (stl/css-case
@ -520,32 +520,41 @@
max-y (- vh h) max-y (- vh h)
rulers? (mf/deref refs/rulers?) rulers? (mf/deref refs/rulers?)
left-offset (if rulers? 40 18) 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 (cond
(or (nil? x) (nil? y)) (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) (= position :left)
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (- x right-offset) "px") #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") #js {:left (dm/str (- x right-offset) "px")
:top (dm/str (- y 70) "px")}) :top top-offset
:maxHeight max-height-top})
(= position :right) (= position :right)
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (+ x 80) "px") #js {:left (dm/str (+ x 80) "px")
:bottom "1rem"} :bottom bottom-offset
:maxHeight max-height-bottom}
#js {:left (dm/str (+ x 80) "px") #js {:left (dm/str (+ x 80) "px")
:top (dm/str (- y 70) "px")}) :top top-offset
:maxHeight max-height-top})
:else :else
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (+ x left-offset) "px") #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") #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/defc colorpicker-modal
{::mf/register modal/components {::mf/register modal/components

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

@ -13,10 +13,14 @@
width: auto; width: auto;
padding: var(--sp-m); padding: var(--sp-m);
width: $sz-284; width: $sz-284;
overflow: auto;
display: flex;
flex-direction: column;
} }
.colorpicker { .colorpicker {
border-radius: $br-8; border-radius: $br-8;
overflow: auto;
} }
.colorpicker-tabs { .colorpicker-tabs {