mirror of
https://github.com/penpot/penpot.git
synced 2025-08-06 08:08:29 +02:00
Add color picker to element options.
This commit is contained in:
parent
49cff5429e
commit
293aef9085
1 changed files with 19 additions and 9 deletions
|
@ -7,6 +7,7 @@
|
||||||
[uxbox.ui.icons :as i]
|
[uxbox.ui.icons :as i]
|
||||||
[uxbox.ui.mixins :as mx]
|
[uxbox.ui.mixins :as mx]
|
||||||
[uxbox.ui.dom :as dom]
|
[uxbox.ui.dom :as dom]
|
||||||
|
[uxbox.ui.colorpicker :refer (colorpicker)]
|
||||||
[uxbox.ui.workspace.base :as wb]
|
[uxbox.ui.workspace.base :as wb]
|
||||||
[uxbox.util.data :refer (parse-int parse-float)]))
|
[uxbox.util.data :refer (parse-int parse-float)]))
|
||||||
|
|
||||||
|
@ -47,24 +48,33 @@
|
||||||
|
|
||||||
(defmethod -render-menu :menu/fill
|
(defmethod -render-menu :menu/fill
|
||||||
[menu own shape]
|
[menu own shape]
|
||||||
(letfn [(on-color-change [event]
|
(letfn [(change-fill [value]
|
||||||
(let [value (dom/event->value event)
|
(println value)
|
||||||
sid (:id shape)]
|
(let [sid (:id shape)]
|
||||||
(-> (dw/update-shape-fill sid {:fill value})
|
(-> (dw/update-shape-fill sid value)
|
||||||
(rs/emit!))))
|
(rs/emit!))))
|
||||||
|
(on-color-change [event]
|
||||||
|
(let [value (dom/event->value event)]
|
||||||
|
(change-fill {:fill value})))
|
||||||
(on-opacity-change [event]
|
(on-opacity-change [event]
|
||||||
(let [value (dom/event->value event)
|
(let [value (dom/event->value event)
|
||||||
value (parse-float value 1)
|
value (parse-float value 1)]
|
||||||
sid (:id shape)]
|
(change-fill {:opacity value})))
|
||||||
(-> (dw/update-shape-fill sid {:opacity value})
|
(on-color-picker-event [{:keys [hex]}]
|
||||||
(rs/emit!))))]
|
(change-fill {:fill hex}))]
|
||||||
(html
|
(html
|
||||||
[:div.element-set {:key (str (:id menu))}
|
[:div.element-set {:key (str (:id menu))}
|
||||||
[:div.element-set-title (:name menu)]
|
[:div.element-set-title (:name menu)]
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
;; SLIDEBAR FOR ROTATION AND OPACITY
|
;; SLIDEBAR FOR ROTATION AND OPACITY
|
||||||
[:span "Color"]
|
[:span "Color"]
|
||||||
[:div.element-color-picker
|
#_(colorpicker (constantly nil))
|
||||||
|
|
||||||
|
(colorpicker {:picker {:width 165 :height 165}
|
||||||
|
:bar {:width 15 :height 165}
|
||||||
|
:callback on-color-picker-event})
|
||||||
|
|
||||||
|
#_[:div.element-color-picker
|
||||||
[:div.color-picker-body
|
[:div.color-picker-body
|
||||||
[:img {:src "images/color-gamma.png", :border "none"}]]
|
[:img {:src "images/color-gamma.png", :border "none"}]]
|
||||||
[:div.color-picker-bar
|
[:div.color-picker-bar
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue