mirror of
https://github.com/penpot/penpot.git
synced 2025-06-01 22:21:50 +02: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 {
|
.color-picker {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
/* Common stuff */
|
.picker-area {
|
||||||
.picker-wrapper,
|
display: flex;
|
||||||
.slide-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.picker-indicator,
|
|
||||||
.slide-indicator {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.picker,
|
|
||||||
.slide {
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Default skin */
|
/* Common stuff */
|
||||||
|
.picker-wrapper,
|
||||||
.color-picker-default {
|
.slide-wrapper {
|
||||||
padding: 4px;
|
position: relative;
|
||||||
border-radius: 2px;
|
}
|
||||||
|
.picker-indicator,
|
||||||
.picker {
|
.slide-indicator {
|
||||||
width: 200px;
|
position: absolute;
|
||||||
height: 200px;
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.picker,
|
||||||
|
.slide {
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide {
|
.inputs-area {
|
||||||
width: 20px;
|
display: flex;
|
||||||
height: 200px;
|
justify-content: space-around;
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide {
|
/* Default skin */
|
||||||
width: 20px;
|
|
||||||
height: 170px;
|
&.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;
|
/* Small skin */
|
||||||
}
|
|
||||||
.picker-indicator {
|
&.theme-small {
|
||||||
width: 5px;
|
border-radius: 2px;
|
||||||
height: 5px;
|
|
||||||
border: 2px solid darkblue;
|
.picker {
|
||||||
border-radius: 4px;
|
width: 170px;
|
||||||
opacity: .5;
|
height: 170px;
|
||||||
background-color: white;
|
}
|
||||||
}
|
|
||||||
.slide-indicator {
|
.slide {
|
||||||
width: 28px;
|
width: 20px;
|
||||||
height: 10px;
|
height: 170px;
|
||||||
left: -4px;
|
}
|
||||||
opacity: .6;
|
.slide-wrapper {
|
||||||
border: 4px solid lightblue;
|
margin-left: 4px;
|
||||||
border-radius: 4px;
|
}
|
||||||
background-color: white;
|
.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]
|
[lentes.core :as l]
|
||||||
[goog.events :as events]
|
[goog.events :as events]
|
||||||
[uxbox.schema :as sc]
|
[uxbox.schema :as sc]
|
||||||
|
[uxbox.ui.mixins :as mx]
|
||||||
[uxbox.util.color :as color]
|
[uxbox.util.color :as color]
|
||||||
[uxbox.util.math :as mth]
|
[uxbox.util.math :as mth]
|
||||||
[uxbox.ui.mixins :as mx])
|
[uxbox.util.dom :as dom]
|
||||||
|
[uxbox.util.color :as color])
|
||||||
(:import goog.events.EventType))
|
(:import goog.events.EventType))
|
||||||
|
|
||||||
;; --- Picker Box
|
;; --- Picker Box
|
||||||
|
|
@ -115,6 +117,9 @@
|
||||||
[own & {:keys [value on-change theme]
|
[own & {:keys [value on-change theme]
|
||||||
:or {value "#d4edfb" theme :default}}]
|
:or {value "#d4edfb" theme :default}}]
|
||||||
(let [local (:rum/local own)
|
(let [local (:rum/local own)
|
||||||
|
classes (case theme
|
||||||
|
:default "theme-default"
|
||||||
|
:small "theme-small")
|
||||||
dimensions (case theme
|
dimensions (case theme
|
||||||
:default default-dimensions
|
:default default-dimensions
|
||||||
:small small-dimensions
|
:small small-dimensions
|
||||||
|
|
@ -128,47 +133,67 @@
|
||||||
(/ (:pi-width dimensions) 2))
|
(/ (:pi-width dimensions) 2))
|
||||||
|
|
||||||
sit (- (/ (* (- h 15) (:s-height dimensions)) 360)
|
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
|
(def ^:static colorpicker
|
||||||
(mx/component
|
(mx/component
|
||||||
|
|
|
||||||
|
|
@ -80,10 +80,9 @@
|
||||||
:min 1
|
:min 1
|
||||||
:max 100}]]
|
:max 100}]]
|
||||||
[:span.lightbox-label "Grid color"]
|
[:span.lightbox-label "Grid color"]
|
||||||
[:div.color-picker-default
|
(uucp/colorpicker
|
||||||
(uucp/colorpicker
|
:value (:grid/color form)
|
||||||
:value (:grid/color form)
|
:on-change on-color-change)
|
||||||
:on-change on-color-change)]
|
|
||||||
[:span.lightbox-label "Grid magnet option"]
|
[:span.lightbox-label "Grid magnet option"]
|
||||||
[:div.input-checkbox.check-primary
|
[:div.input-checkbox.check-primary
|
||||||
[:input
|
[:input
|
||||||
|
|
|
||||||
|
|
@ -47,3 +47,6 @@
|
||||||
(-> (hex->rgb data)
|
(-> (hex->rgb data)
|
||||||
(conj opacity)))
|
(conj opacity)))
|
||||||
|
|
||||||
|
(defn hex?
|
||||||
|
[v]
|
||||||
|
(not (nil? (re-find #"^#[0-9A-Fa-f]{6}$" v))))
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue