mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Add input fields to colorpicker.
This commit is contained in:
Andrey Antukh
parent
615586ec89
commit
b3f50928d4
4 changed files with 167 additions and 126 deletions
|
|
@ -7,95 +7,109 @@
|
|||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Common stuff */
|
||||
.picker-wrapper,
|
||||
.slide-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.picker-indicator,
|
||||
.slide-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.picker,
|
||||
.slide {
|
||||
cursor: crosshair;
|
||||
}
|
||||
}
|
||||
.picker-area {
|
||||
display: flex;
|
||||
|
||||
/* Default skin */
|
||||
|
||||
.color-picker-default {
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
|
||||
.picker {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
/* Common stuff */
|
||||
.picker-wrapper,
|
||||
.slide-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.picker-indicator,
|
||||
.slide-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.picker,
|
||||
.slide {
|
||||
cursor: crosshair;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
}
|
||||
.slide-wrapper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.picker-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 2px solid darkblue;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
background-color: white;
|
||||
}
|
||||
.slide-indicator {
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
left: -4px;
|
||||
opacity: .6;
|
||||
border: 4px solid lightblue;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small skin */
|
||||
|
||||
.color-picker-small {
|
||||
border-radius: 2px;
|
||||
|
||||
.picker {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.inputs-area {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 20px;
|
||||
height: 170px;
|
||||
/* Default skin */
|
||||
|
||||
&.theme-default {
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
width: 230px;
|
||||
|
||||
.picker {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
}
|
||||
.slide-wrapper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.picker-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 2px solid darkblue;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
background-color: white;
|
||||
}
|
||||
.slide-indicator {
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
left: -4px;
|
||||
opacity: .6;
|
||||
border: 4px solid lightblue;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
.inputs-area {
|
||||
width: 230px;
|
||||
}
|
||||
}
|
||||
.slide-wrapper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.picker-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 2px solid darkblue;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
background-color: white;
|
||||
}
|
||||
.slide-indicator {
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
left: -4px;
|
||||
opacity: .6;
|
||||
border: 4px solid lightblue;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
|
||||
/* Small skin */
|
||||
|
||||
&.theme-small {
|
||||
border-radius: 2px;
|
||||
|
||||
.picker {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 20px;
|
||||
height: 170px;
|
||||
}
|
||||
.slide-wrapper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.picker-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 2px solid darkblue;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
background-color: white;
|
||||
}
|
||||
.slide-indicator {
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
left: -4px;
|
||||
opacity: .6;
|
||||
border: 4px solid lightblue;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,9 +10,11 @@
|
|||
[lentes.core :as l]
|
||||
[goog.events :as events]
|
||||
[uxbox.schema :as sc]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.util.color :as color]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.ui.mixins :as mx])
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.color :as color])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
;; --- Picker Box
|
||||
|
|
@ -115,6 +117,9 @@
|
|||
[own & {:keys [value on-change theme]
|
||||
:or {value "#d4edfb" theme :default}}]
|
||||
(let [local (:rum/local own)
|
||||
classes (case theme
|
||||
:default "theme-default"
|
||||
:small "theme-small")
|
||||
dimensions (case theme
|
||||
:default default-dimensions
|
||||
:small small-dimensions
|
||||
|
|
@ -128,47 +133,67 @@
|
|||
(/ (:pi-width dimensions) 2))
|
||||
|
||||
sit (- (/ (* (- h 15) (:s-height dimensions)) 360)
|
||||
(/ (:si-height dimensions) 2))
|
||||
(/ (:si-height dimensions) 2))]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(swap! local assoc :mousedown true))
|
||||
(on-mouse-up [event]
|
||||
(swap! local assoc :mousedown false))
|
||||
(on-mouse-move-slide [event]
|
||||
(when (:mousedown @local)
|
||||
(on-slide-click local dimensions event)))
|
||||
(on-mouse-move-picker [event]
|
||||
(when (:mousedown @local)
|
||||
(on-picker-click local dimensions on-change color event)))
|
||||
(on-hex-changed [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when (color/hex? value)
|
||||
(on-change value))))]
|
||||
(html
|
||||
[:div.color-picker {:class classes}
|
||||
[:div.picker-area
|
||||
#_[:div.tester {:style {:width "100px" :height "100px"
|
||||
:border "1px solid black"
|
||||
:position "fixed" :top "50px" :left "50px"
|
||||
:backgroundColor (color/hsv->hex color)}}]
|
||||
[:div.picker-wrapper
|
||||
[:div.picker
|
||||
{:ref "picker"
|
||||
:on-click (partial on-picker-click local dimensions on-change color)
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-picker
|
||||
:style {:backgroundColor bg}}
|
||||
(picker-box)]
|
||||
[:div.picker-indicator
|
||||
{:ref "picker-indicator"
|
||||
:style {:top (str pil "px")
|
||||
:left (str pit "px")
|
||||
:pointerEvents "none"}}]]
|
||||
[:div.slide-wrapper
|
||||
[:div.slide
|
||||
{:ref "slide"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-slide
|
||||
:on-click (partial on-slide-click local dimensions)}
|
||||
(slider-box)]
|
||||
[:div.slide-indicator
|
||||
{:ref "slide-indicator"
|
||||
:style {:top (str sit "px")
|
||||
:pointerEvents "none"}}]]]
|
||||
|
||||
[:div.inputs-area
|
||||
[:input.input-text
|
||||
{:placeholder "#"
|
||||
:type "text"
|
||||
:value value
|
||||
:on-change on-hex-changed}]
|
||||
[:input.input-text
|
||||
{:placeholder "RGB"
|
||||
:type "text"}]]]))))
|
||||
|
||||
on-mouse-down #(swap! local assoc :mousedown true)
|
||||
on-mouse-up #(swap! local assoc :mousedown false)
|
||||
|
||||
on-mouse-move-slide #(when (:mousedown @local)
|
||||
(on-slide-click local dimensions %))
|
||||
on-mouse-move-picker #(when (:mousedown @local)
|
||||
(on-picker-click local dimensions on-change color %))]
|
||||
(html
|
||||
[:div.color-picker
|
||||
#_[:div.tester {:style {:width "100px" :height "100px"
|
||||
:border "1px solid black"
|
||||
:position "fixed" :top "50px" :left "50px"
|
||||
:backgroundColor (color/hsv->hex color)}}]
|
||||
[:div.picker-wrapper
|
||||
[:div.picker
|
||||
{:ref "picker"
|
||||
:on-click (partial on-picker-click local dimensions on-change color)
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-picker
|
||||
:style {:backgroundColor bg}}
|
||||
(picker-box)]
|
||||
[:div.picker-indicator
|
||||
{:ref "picker-indicator"
|
||||
:style {:top (str pil "px")
|
||||
:left (str pit "px")
|
||||
:pointerEvents "none"}}]]
|
||||
[:div.slide-wrapper
|
||||
[:div.slide
|
||||
{:ref "slide"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-slide
|
||||
:on-click (partial on-slide-click local dimensions)}
|
||||
(slider-box)]
|
||||
[:div.slide-indicator
|
||||
{:ref "slide-indicator"
|
||||
:style {:top (str sit "px")
|
||||
:pointerEvents "none"}}]]])))
|
||||
|
||||
(def ^:static colorpicker
|
||||
(mx/component
|
||||
|
|
|
|||
|
|
@ -80,10 +80,9 @@
|
|||
:min 1
|
||||
:max 100}]]
|
||||
[:span.lightbox-label "Grid color"]
|
||||
[:div.color-picker-default
|
||||
(uucp/colorpicker
|
||||
:value (:grid/color form)
|
||||
:on-change on-color-change)]
|
||||
(uucp/colorpicker
|
||||
:value (:grid/color form)
|
||||
:on-change on-color-change)
|
||||
[:span.lightbox-label "Grid magnet option"]
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input
|
||||
|
|
|
|||
|
|
@ -47,3 +47,6 @@
|
|||
(-> (hex->rgb data)
|
||||
(conj opacity)))
|
||||
|
||||
(defn hex?
|
||||
[v]
|
||||
(not (nil? (re-find #"^#[0-9A-Fa-f]{6}$" v))))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue