Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

Add input fields to colorpicker.

Browse source
This commit is contained in:
Andrey Antukh 2016-05-18 20:49:05 +03:00
parent 615586ec89
commit b3f50928d4
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
4 changed files with 167 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/styles/partials/colorpicker.scss
View file

@ -7,6 +7,10 @@
.color-picker {
display: flex;
flex-direction: column;
.picker-area {
display: flex;
/* Common stuff */
.picker-wrapper,
@ -24,13 +28,19 @@
.slide {
cursor: crosshair;
}
}
}
/* Default skin */
.inputs-area {
display: flex;
justify-content: space-around;
}
.color-picker-default {
/* Default skin */
&.theme-default {
padding: 4px;
border-radius: 2px;
width: 230px;
.picker {
width: 200px;
@ -61,11 +71,14 @@
border-radius: 4px;
background-color: white;
}
}
.inputs-area {
width: 230px;
}
}
/* Small skin */
/* Small skin */
.color-picker-small {
&.theme-small {
border-radius: 2px;
.picker {
@ -97,6 +110,7 @@
border-radius: 4px;
background-color: white;
}
}
}
/* NEW COLOR PICKER */

49
src/uxbox/ui/colorpicker.cljs
View file

@ -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,17 +133,25 @@
(/ (:pi-width dimensions) 2))
sit (- (/ (* (- h 15) (:s-height dimensions)) 360)
(/ (:si-height dimensions) 2))
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 %))]
(/ (: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
[: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"
@ -168,7 +181,19 @@
[:div.slide-indicator
{:ref "slide-indicator"
:style {:top (str sit "px")
:pointerEvents "none"}}]]])))
: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"}]]]))))
(def ^:static colorpicker
(mx/component

3
src/uxbox/ui/workspace/settings.cljs
View file

@ -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)]
:on-change on-color-change)
[:span.lightbox-label "Grid magnet option"]
[:div.input-checkbox.check-primary
[:input

3
src/uxbox/util/color.cljs
View file

@ -47,3 +47,6 @@
(-> (hex->rgb data)
(conj opacity)))
(defn hex?
[v]
(not (nil? (re-find #"^#[0-9A-Fa-f]{6}$" v))))