Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-26 00:36:12 -05:00
Code Issues Activity

Merge pull request #181 from uxbox/editable-rgb

Browse source 
Editable rgb
This commit is contained in:
Hirunatan 2020-04-16 15:37:13 +02:00 • committed by GitHub
commit 490949ebee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
common/uxbox/common/spec.cljc
View file

@ -75,7 +75,7 @@
(defn- color-conformer
[v]
(if (and (string? v) (re-matches #"^#[0-9A-Fa-f]{6}$" v))
(if (and (string? v) (re-matches #"^#(?:[0-9a-fA-F]{3}){1,2}$" v))
v
::s/invalid))

5
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -168,6 +168,11 @@
border-color: $color-primary;
color: $color-white;
}
&:invalid {
border-color: $color-danger;
}
}
}

16
frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
View file

@ -28,6 +28,13 @@
(fn [color]
(st/emit! (udw/update-shape (:id shape) {:fill-color color})))
on-color-input-change
(fn [event]
(let [input (dom/get-target event)
value (dom/get-value input)]
(when (dom/valid? input)
(on-color-change value))))
on-opacity-change
(fn [event]
(let [value (-> (dom/get-target event)
@ -57,9 +64,12 @@
:on-click show-color-picker}]
[:div.color-info
[:input {:read-only true
:key (:fill-color shape)
:default-value (:fill-color shape)}]]
[:input {:default-value (:fill-color shape)
:ref (fn [el]
(when el
(set! (.-value el) (:fill-color shape))))
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
:on-change on-color-input-change}]]
[:div.input-element.percentail
[:input.input-text {:type "number"

17
frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
View file

@ -55,11 +55,12 @@
(fn [color]
(st/emit! (dw/update-options {:grid-color color})))
on-color-change
on-color-input-change
(fn [event]
(let [value (-> (dom/get-target event)
(dom/get-value))]
(change-color value)))
(let [input (dom/get-target event)
value (dom/get-value input)]
(when (dom/valid? input)
(change-color value))))
show-color-picker
(fn [event]
@ -89,8 +90,12 @@
[:span.color-th {:style {:background-color (:grid-color options)}
:on-click show-color-picker}]
[:div.color-info
[:input {:on-change on-color-change
:value (:grid-color options)}]]]]]))
[:input {:default-value (:grid-color options)
:ref (fn [el]
(when el
(set! (.-value el) (:grid-color options))))
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
:on-change on-color-input-change}]]]]]))
(mf/defc options
[{:keys [page] :as props}]

22
frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
View file

@ -57,6 +57,17 @@
(/ 100))]
(st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
on-color-change
(fn [color]
(st/emit! (udw/update-shape (:id shape) {:stroke-color color})))
on-color-input-change
(fn [event]
(let [input (dom/get-target event)
value (dom/get-value input)]
(when (dom/valid? input)
(on-color-change value))))
show-color-picker
(fn [event]
(let [x (.-clientX event)
@ -64,7 +75,7 @@
props {:x x :y y
:default "#ffffff"
:value (:stroke-color shape)
:on-change #(st/emit! (udw/update-shape (:id shape) {:stroke-color %}))
:on-change on-color-change
:transparent? true}]
(modal/show! colorpicker-modal props)))]
@ -81,9 +92,12 @@
[:span.color-th {:style {:background-color (:stroke-color shape)}
:on-click show-color-picker}]
[:div.color-info
[:input {:read-only true
:key (:stroke-color shape)
:default-value (:stroke-color shape)}]]
[:input {:default-value (:stroke-color shape)
:ref (fn [el]
(when el
(set! (.-value el) (:stroke-color shape))))
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
:on-change on-color-input-change}]]
[:div.input-element.percentail
[:input.input-text {:placeholder ""

9
frontend/src/uxbox/util/dom.cljs
View file

@ -85,11 +85,18 @@
(.-files node))
(defn checked?
"Check if the node that reprsents a radio
"Check if the node that represents a radio
or checkbox is checked or not."
[node]
(.-checked node))
(defn valid?
"Check if the node that is a form input
has a valid value, against html5 form validation
properties (required, min/max, pattern...)."
[node]
(.-valid (.-validity node)))
(defn clean-value!
[node]
(set! (.-value node) ""))