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

Fully integrate new color picker in workspace.

This commit is contained in:
Andrey Antukh 2016-05-19 21:36:57 +03:00
parent 249414c051
commit 1da54f0c73
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
8 changed files with 85 additions and 62 deletions

View file

@ -17,6 +17,10 @@
width: 100%;
z-index: 1000;
&.transparent {
background-color: rgba(0,0,0,0);
}
.lightbox-body {
align-items: center;
background-color: $color-white;

View file

@ -11,8 +11,8 @@
[goog.events :as events]
[uxbox.schema :as sc]
[uxbox.ui.mixins :as mx]
[uxbox.util.color :as color]
[uxbox.util.math :as mth]
[uxbox.util.data :as data]
[uxbox.util.dom :as dom]
[uxbox.util.color :as color])
(:import goog.events.EventType))
@ -117,6 +117,7 @@
[own & {:keys [value on-change theme]
:or {value "#d4edfb" theme :default}}]
(let [local (:rum/local own)
value-rgb (color/hex->rgb value)
classes (case theme
:default "theme-default"
:small "theme-small")
@ -148,7 +149,15 @@
(let [value (-> (dom/get-target event)
(dom/get-value))]
(when (color/hex? value)
(on-change value))))]
(on-change value))))
(on-rgb-change [rgb id event]
(let [value (-> (dom/get-target event)
(dom/get-value)
(data/parse-int 0))
rgb (assoc rgb id value)
hex (color/rgb->hex rgb)]
(when (color/hex? hex)
(on-change hex))))]
(html
[:div.color-picker {:class classes}
[:div.picker-area
@ -192,13 +201,19 @@
[:div.row-flex
[:input.input-text
{:placeholder "R"
:type "text"}]
:on-change (partial on-rgb-change value-rgb 0)
:value (nth value-rgb 0)
:type "number"}]
[:input.input-text
{:placeholder "G"
:type "text"}]
:on-change (partial on-rgb-change value-rgb 1)
:value (nth value-rgb 1)
:type "number"}]
[:input.input-text
{:placeholder "B"
:type "text"}]]]]))))
:on-change (partial on-rgb-change value-rgb 2)
:value (nth value-rgb 2)
:type "number"}]]]]))))

View file

@ -7,6 +7,7 @@
[uxbox.ui.mixins :as mx]
[uxbox.ui.keyboard :as k]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (classnames)]
[goog.events :as events])
(:import goog.events.EventType))
@ -52,10 +53,13 @@
(defn- lightbox-render
[own]
(let [data (rum/react lightbox-l)]
(let [data (rum/react lightbox-l)
classes (classnames
:hide (nil? data)
:transparent (:transparent? data))]
(html
[:div.lightbox
{:class (when (nil? data) "hide")
{:class classes
:ref "parent"
:on-click (partial on-out-clicked own)}
(render-lightbox data)])))

View file

@ -26,18 +26,26 @@
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
(defn- focus-shape
[id]
(as-> (l/in [:shapes-by-id id]) $
(l/focus-atom $ st/state)))
(defn- colorpicker-render
[own {:keys [x y shape] :as opts}]
(println opts)
(let [shape {}
on-change (constantly nil)
[own {:keys [x y shape attr] :as opts}]
(let [shape (rum/react (focus-shape shape))
left (- x 260)
top (- y 150)]
(letfn [(on-color-change [event]
(let [value (dom/event->value event)]
(on-change {:color value})))]
top (- y 50)]
(letfn [(change-color [color]
(let [attrs {:color color}]
(rs/emit!
(case attr
:stroke (uds/update-stroke-attrs (:id shape) attrs)
:fill (uds/update-fill-attrs (:id shape) attrs)))))
(on-change-color [event]
(let [color (dom/event->value event)]
(change-color color)))]
(html
;; COLOR PICKER TOOLTIP
[:div.colorpicker-tooltip
{:style {:left (str left "px")
:top (str top "px")}}
@ -45,20 +53,15 @@
(cp/colorpicker
:theme :small
:value (:stroke shape "#000000")
:on-change (constantly nil))
:on-change change-color)
(recent-colors shape (constantly nil) #_#(change-stroke {:color %}))
#_[:span "Color options"]
#_[:div.row-flex
[:span.color-th.palette-th i/picker]
[:span.color-th.palette-th i/palette]]]))))
(recent-colors shape change-color)]))))
(def colorpicker
(mx/component
{:render colorpicker-render
:name "colorpicker"
:mixins []}))
:mixins [rum/reactive mx/static]}))
(defmethod lbx/render-lightbox :workspace/colorpicker
[params]

View file

@ -94,6 +94,11 @@
:class (when (contains? flags :drawtools) "selected")
:on-click (partial toggle :drawtools)}
i/shapes]
[:li.tooltip.tooltip-bottom
{:alt "Color Palette (---)"
:class (when (contains? flags :colorpalette) "selected")
:on-click (partial toggle :colorpalette)}
i/palette]
[:li.tooltip.tooltip-bottom
{:alt "Icons (Ctrl + Shift + I)"
:class (when (contains? flags :icons) "selected")

View file

@ -18,12 +18,7 @@
[uxbox.util.dom :as dom]
[uxbox.ui.workspace.base :as wb]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Helpers
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:private ^:static toggle-colorpalette
#(rs/emit! (dw/toggle-flag :colorpalette)))
;; --- Helpers
(defn- count-color
[state shape prop]
@ -41,9 +36,7 @@
(sort-by second (into [] $))
(take 5 (map first $))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Component
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Component
(defn- recent-colors-render
[own {:keys [page id] :as shape} callback]
@ -56,16 +49,14 @@
[:span (tr "ds.recent-colors")]
[:div.row-flex
(for [color colors]
[:span.color-th {:style {:background color}
[:span.color-th {:style {:background-color color}
:key color
:on-click (partial callback color)}])
(for [i (range (- 5 (count colors)))]
[:span.color-th {:key (str "empty" i)}])
[:span.color-th.palette-th i/picker]]])))
[:span.color-th.palette-th {:on-click toggle-colorpalette}
i/palette]]])))
(def ^:static recent-colors
(def recent-colors
(mx/component
{:render recent-colors-render
:name "recent-colors"

View file

@ -14,13 +14,10 @@
[uxbox.rstore :as rs]
[uxbox.state :as st]
[uxbox.library :as library]
[uxbox.data.workspace :as udw]
[uxbox.data.shapes :as uds]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.colorpicker :refer (colorpicker)]
[uxbox.ui.workspace.recent-colors :refer (recent-colors)]
[uxbox.util.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
@ -38,19 +35,28 @@
value (/ value 10000)]
(change-fill {:opacity value})))
(on-color-picker-event [color]
(change-fill {:color color}))]
(change-fill {:color color}))
(show-color-picker [event]
(let [x (.-clientX event)
y (.-clientY event)
opts {:x x :y y
:shape (:id shape)
:attr :fill
:transparent? true}]
(udl/open! :workspace/colorpicker opts)))]
(html
[:div.element-set {:key (str (:id menu))}
[:div.element-set-title (:name menu)]
[:div.element-set-content
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Color"]
;; [:div.color-picker-small
;; (colorpicker
;; :theme :small
;; :value (:fill shape "#000000")
;; :on-change #(on-color-picker-event %))]
[:span "Color"]
[:div.row-flex.color-data
[:span.color-th
{:style {:background-color (:fill shape)}
:on-click show-color-picker}]
[:div.color-info
[:span (:fill shape)]]]
[:div.row-flex
[:input.input-text
@ -59,8 +65,6 @@
:value (:fill shape "")
:on-change on-color-change}]]
(recent-colors shape #(change-fill {:color %}))
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Opacity"]
[:div.row-flex

View file

@ -14,14 +14,10 @@
[uxbox.rstore :as rs]
[uxbox.state :as st]
[uxbox.library :as library]
[uxbox.data.workspace :as udw]
[uxbox.data.shapes :as uds]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.colorpicker :refer (colorpicker)]
[uxbox.ui.workspace.recent-colors :refer (recent-colors)]
[uxbox.util.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
@ -47,9 +43,13 @@
value (read-string value)]
(change-stroke {:type value})))
(show-color-picker [event]
(let [x (.-screenX event)
y (.-screenY event)]
(udl/open! :workspace/colorpicker {:x x :y y :shape shape})))]
(let [x (.-clientX event)
y (.-clientY event)
opts {:x x :y y
:shape (:id shape)
:attr :stroke
:transparent? true}]
(udl/open! :workspace/colorpicker opts)))]
(let [local (:rum/local own)]
(html
[:div.element-set {:key (str (:id menu))}
@ -72,9 +72,7 @@
:value (:stroke-width shape "1")
:on-change on-width-change}]]
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Color"]
[:div.row-flex.color-data
[:span.color-th
{:style {:background-color (:stroke shape)}
@ -82,7 +80,6 @@
[:div.color-info
[:span (:stroke shape)]]]
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Opacity"]
[:div.row-flex
[:input.slidebar