Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00
Code Issues Activity

Editable color value directly

Browse source
This commit is contained in:
Jesús Espino 2016-12-19 21:47:29 +01:00
parent e88495f1a5
commit 8dd8258565
5 changed files with 64 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -153,10 +153,14 @@
position: relative;
.color-info {
input {
border: 1px solid $soft-ui-border;
border-radius: $br-small;
margin: 3px 0 0 $x-small;
padding: 0 $x-small;
width: 55px;
font-size: $fs13;
}
}
.type {

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

@ -18,7 +18,8 @@
[uxbox.main.ui.icons :as i]
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
[uxbox.util.data :refer (parse-int parse-float read-string)]
[uxbox.util.spec :refer (color?)]))
(defn fill-menu-render
[own menu shape]
@ -27,7 +28,8 @@
(st/emit! (uds/update-fill-attrs sid value))))
(on-color-change [event]
(let [value (dom/event->value event)]
(change-fill {:color value})))
(when (color? value)
(change-fill {:color value}))))
(on-opacity-change [event]
(let [value (dom/event->value event)
value (parse-float value 1)
@ -55,7 +57,9 @@
{:style {:background-color (:fill shape "#000000")}
:on-click show-color-picker}]
[:div.color-info
[:span (:fill shape "#000000")]]]
[:input
{:on-change on-color-change
:value (:fill shape "#000000")}]]]
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Opacity"]

19
frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
View file

@ -21,7 +21,8 @@
[uxbox.main.ui.lightbox :as lbx]
[uxbox.main.ui.colorpicker :as cp]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
[uxbox.util.data :refer (parse-int parse-float read-string)]
[uxbox.util.spec :refer (color?)]))
;; --- Helpers
@ -382,6 +383,14 @@
(swap! form-ref assoc :stroke-color "#000000"))
(letfn [(on-change [attr color]
(swap! form-ref assoc attr color))
(on-change-fill-color [event]
(let [value (dom/event->value event)]
(when (color? value)
(on-change :fill-color value))))
(on-change-stroke-color [event]
(let [value (dom/event->value event)]
(when (color? value)
(on-change :stroke-color value))))
(show-picker [attr event]
(let [x (.-clientX event)
y (.-clientY event)
@ -402,7 +411,9 @@
{:style {:background-color fill-color}
:on-click (partial show-picker :fill-color)}]
[:div.color-info
[:span fill-color]]]]
[:input
{:on-change on-change-fill-color
:value fill-color}]]]]
[:div.column-half
[:span "Stroke"]
[:div.color-data
@ -410,7 +421,9 @@
{:style {:background-color stroke-color}
:on-click (partial show-picker :stroke-color)}]
[:div.color-info
[:span stroke-color]]]]]]))))
[:input
{:on-change on-change-stroke-color
:value stroke-color}]]]]]]))))
(def color-input
(mx/component

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

@ -18,6 +18,7 @@
[uxbox.main.ui.workspace.colorpicker]
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.util.data :refer [parse-int]]
[uxbox.util.spec :refer [color?]]
[uxbox.util.dom :as dom]))
(mx/defcs measures-menu
@ -39,6 +40,13 @@
(->> (assoc metadata :height value)
(udp/update-metadata id)
(st/emit!))))
(on-color-change []
(when-let [value (-> (mx/ref-node own "color")
(dom/get-value)
(#(if (color? %) % nil)))]
(->> (assoc metadata :background value)
(udp/update-metadata id)
(st/emit!))))
(show-color-picker [event]
(let [x (.-clientX event)
y (.-clientY event)
@ -72,7 +80,10 @@
{:style {:background-color (or background "#ffffff")}
:on-click show-color-picker}]
[:div.color-info
[:span (or background "#ffffff")]]]]])))
[:input
{:on-change on-color-change
:ref "color"
:value (or background "#ffffff")}]]]]])))
(mx/defcs grid-options-menu
{:mixins [mx/static mx/reactive]}
@ -92,6 +103,13 @@
(st/emit!
(->> (assoc metadata :grid-y-axis value)
(udw/update-metadata id)))))
(on-color-change []
(when-let [value (-> (mx/ref-node own "color")
(dom/get-value)
(#(if (color? %) % nil)))]
(->> (assoc metadata :grid-color value)
(udp/update-metadata id)
(st/emit!))))
(on-magnet-change []
(let [checked? (dom/checked? (mx/ref-node own "magnet"))
metadata (assoc metadata :grid-alignment checked?)]
@ -124,12 +142,15 @@
:on-change on-y-change
:placeholder "y"}]]]
[:span "Color"]
[:div.row-flex.color-dat
[:div.row-flex.color-data
[:span.color-th
{:style {:background-color (:grid-color metadata "#cccccc")}
:on-click show-color-picker}]
[:div.color-info
[:span (:grid-color metadata "#cccccc")]]]
[:input
{:on-change on-color-change
:ref "color"
:value (:grid-color metadata "#cccccc")}]]]
[:span "Magnet option"]
[:div.row-flex

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

@ -18,7 +18,8 @@
[uxbox.main.ui.icons :as i]
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
[uxbox.util.data :refer (parse-int parse-float read-string)]
[uxbox.util.spec :refer (color?)]))
(defn- stroke-menu-render
[own menu shape]
@ -38,6 +39,10 @@
(let [value (dom/event->value event)
value (read-string value)]
(change-stroke {:type value})))
(on-stroke-color-change [event]
(let [value (dom/event->value event)]
(when (color? value)
(change-stroke {:color value}))))
(show-color-picker [event]
(let [x (.-clientX event)
y (.-clientY event)
@ -75,7 +80,9 @@
{:style {:background-color (:stroke shape "#000000")}
:on-click show-color-picker}]
[:div.color-info
[:span (:stroke shape "#000000")]]]
[:input
{:on-change on-stroke-color-change
:value (:stroke shape "#000000")}]]]
[:span "Opacity"]
[:div.row-flex