Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-20 05:34:23 -05:00
Code Issues Activity

Merge pull request #335 from tokens-studio/9310-color-picker

Browse source 
Color picker full inline size
This commit is contained in:
Eva Marco 2024-11-19 08:43:17 +01:00 • committed by GitHub
commit 1d2c7dd20e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,5 +47,7 @@
}
.sliders-wrapper {
@include flexColumn;
display: flex;
flex-direction: column;
flex: 1;
}

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

@ -51,27 +51,27 @@
value (+ min-value (* unit-value (- max-value min-value)))]
(on-change value))))]
[:div {:class (stl/css-case :opacity-wrapper (= type :opacity))}
[:div {:class (dm/str class (stl/css-case :vertical vertical?
:slider-selector true
:hue (= type :hue)
:opacity (= type :opacity)
:value (= type :value)))
:on-pointer-down handle-start-drag
:on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-pointer-move #(when @dragging? (calculate-pos %))}
(let [value-percent (* (/ (- value min-value)
(- max-value min-value)) 100)
value-percent (if reverse?
(mth/abs (- value-percent 100))
value-percent)
value-percent-str (str value-percent "%")
[:div {:class (dm/str class (stl/css-case :vertical vertical?
:slider-selector true
:hue (= type :hue)
:opacity (= type :opacity)
:value (= type :value)))
:on-pointer-down handle-start-drag
:on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-pointer-move #(when @dragging? (calculate-pos %))}
(let [value-percent (* (/ (- value min-value)
(- max-value min-value)) 100)
style-common #js {:pointerEvents "none"}
style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)]
[:div {:class (stl/css :handler)
:style (if vertical? style-vertical style-horizontal)}])]]))
value-percent (if reverse?
(mth/abs (- value-percent 100))
value-percent)
value-percent-str (str value-percent "%")
style-common #js {:pointerEvents "none"}
style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)]
[:div {:class (stl/css :handler)
:style (if vertical? style-vertical style-horizontal)}])]))

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

@ -17,7 +17,7 @@
position: relative;
align-self: center;
height: $s-24;
width: $s-200;
inline-size: 100%;
border: $s-2 solid var(--colorpicker-details-color);
border-radius: $br-6;
background: linear-gradient(