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:
parent
249414c051
commit
1da54f0c73
8 changed files with 85 additions and 62 deletions
|
@ -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;
|
||||
|
|
|
@ -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"}]]]]))))
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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)])))
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue