Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues Activity

Add partial stroke element options menu.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-21 00:14:00 +02:00
parent f786b8acab
commit 0dc30e2bdd
1 changed files with 81 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/uxbox/ui/workspace/options.cljs
View file

@ -26,7 +26,12 @@
:menu/fill
{:name "Fill"
:icon i/fill
:id :menu/fill}})
:id :menu/fill}
:menu/stroke
{:name "Stroke"
:icon i/stroke
:id :menu/stroke}})
(defn- viewportcoord->clientcoord
[pageid viewport-x viewport-y]
@ -45,6 +50,81 @@
(defmulti -render-menu
(fn [menu own shape] (:id menu)))
(defmethod -render-menu :menu/stroke
[menu own shape]
(letfn [(change-stroke [value]
(let [sid (:id shape)]
(rs/emit! (dw/update-shape-stroke sid value))))
(on-width-change [event]
(let [value (dom/event->value event)
value (parse-float value 1)]
(change-stroke {:width value})))
(on-opacity-change [event]
(let [value (dom/event->value event)
value (parse-float value 1)]
(change-stroke {:opacity value})))
(on-color-change [event]
(let [value (dom/event->value event)]
(change-stroke {:color value})))]
(html
[:div.element-set {:key (str (:id menu))}
[:div.element-set-title (:name menu)]
[:div.element-set-content
[:span "Style"]
[:div.row-flex
[:input#width.input-text
{:placeholder "Width"
:type "number"
:min "0"
:value (:stroke-width shape "")
:on-change on-width-change}]
[:select#style {:placeholder "Style"}
[:option {:value "none"} "None"]
[:option {:value "none"} "Solid"]
[:option {:value "none"} "Dotted"]
[:option {:value "none"} "Dashed"]]]
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Color"]
(colorpicker {:picker {:width 165 :height 165}
:bar {:width 15 :height 165}
:callback #(change-stroke {:color (:hex %)})})
[:div.row-flex
[:input#width.input-text
{:placeholder "#"
:type "text"
:value (:stroke shape "")
:on-change on-color-change}]]
(recent-colors shape #(change-stroke {:color %}))
[:span "Border radius"]
[:div.row-flex
[:div.border-element.top-left
i/radius
[:input.input-text {:type "text" :placeholder "px"}]]
[:div.border-element.top-right
i/radius
[:input.input-text {:type "text" :placeholder "px"}]]
[:span.lock-size i/lock]
[:div.border-element.bottom-left
i/radius
[:input.input-text {:type "text" :placeholder "px"}]]
[:div.border-element.bottom-right
i/radius
[:input.input-text {:type "text" :placeholder "px"}]]]
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Opacity"]
[:div.row-flex
[:input.slidebar
{:type "range"
:min "0"
:max "1"
:value (:stroke-opacity shape "1")
:step "0.0001"
:on-change on-opacity-change}]]]])))
(defmethod -render-menu :menu/fill
[menu own shape]
(letfn [(change-fill [value]