Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 08:38:15 -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 { .color-picker {
display: flex; display: flex;
flex-direction: column;
.picker-area {
display: flex;
/* Common stuff */ /* Common stuff */
.picker-wrapper, .picker-wrapper,
@ -24,13 +28,19 @@
.slide { .slide {
cursor: crosshair; cursor: crosshair;
} }
} }
/* Default skin */ .inputs-area {
display: flex;
justify-content: space-around;
}
.color-picker-default { /* Default skin */
&.theme-default {
padding: 4px; padding: 4px;
border-radius: 2px; border-radius: 2px;
width: 230px;
.picker { .picker {
width: 200px; width: 200px;
@ -61,11 +71,14 @@
border-radius: 4px; border-radius: 4px;
background-color: white; background-color: white;
} }
} .inputs-area {
width: 230px;
}
}
/* Small skin */ /* Small skin */
.color-picker-small { &.theme-small {
border-radius: 2px; border-radius: 2px;
.picker { .picker {
@ -97,6 +110,7 @@
border-radius: 4px; border-radius: 4px;
background-color: white; background-color: white;
} }
}
} }
/* NEW COLOR PICKER */ /* NEW COLOR PICKER */

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

@ -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,17 +133,25 @@
(/ (: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]
on-mouse-down #(swap! local assoc :mousedown true) (swap! local assoc :mousedown true))
on-mouse-up #(swap! local assoc :mousedown false) (on-mouse-up [event]
(swap! local assoc :mousedown false))
on-mouse-move-slide #(when (:mousedown @local) (on-mouse-move-slide [event]
(on-slide-click local dimensions %)) (when (:mousedown @local)
on-mouse-move-picker #(when (:mousedown @local) (on-slide-click local dimensions event)))
(on-picker-click local dimensions on-change color %))] (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 (html
[:div.color-picker [:div.color-picker {:class classes}
[:div.picker-area
#_[:div.tester {:style {:width "100px" :height "100px" #_[:div.tester {:style {:width "100px" :height "100px"
:border "1px solid black" :border "1px solid black"
:position "fixed" :top "50px" :left "50px" :position "fixed" :top "50px" :left "50px"
@ -168,7 +181,19 @@
[:div.slide-indicator [:div.slide-indicator
{:ref "slide-indicator" {:ref "slide-indicator"
:style {:top (str sit "px") :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 (def ^:static colorpicker
(mx/component (mx/component

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

@ -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

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

@ -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))))