mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 01:01:30 -05:00
Move stroke radius under stroke element options sidebar.
This commit is contained in:
parent
daa50470f8
commit
9feba4df92
2 changed files with 33 additions and 28 deletions
|
@ -35,10 +35,6 @@
|
||||||
(let [value (-> (dom/event->value event)
|
(let [value (-> (dom/event->value event)
|
||||||
(parse-int nil))]
|
(parse-int nil))]
|
||||||
(st/emit! (uds/update-position id {attr value}))))
|
(st/emit! (uds/update-position id {attr value}))))
|
||||||
(on-border-change [event attr]
|
|
||||||
(let [value (-> (dom/event->value event)
|
|
||||||
(parse-int nil))]
|
|
||||||
(st/emit! (uds/update-attrs id {attr value}))))
|
|
||||||
(on-proportion-lock-change [event]
|
(on-proportion-lock-change [event]
|
||||||
(if (:proportion-lock shape)
|
(if (:proportion-lock shape)
|
||||||
(st/emit! (uds/unlock-proportions id))
|
(st/emit! (uds/unlock-proportions id))
|
||||||
|
@ -84,20 +80,6 @@
|
||||||
:value (precision-or-0 (:y1 shape 0) 2)
|
:value (precision-or-0 (:y1 shape 0) 2)
|
||||||
:on-change #(on-pos-change % :y)}]]]
|
:on-change #(on-pos-change % :y)}]]]
|
||||||
|
|
||||||
[:span "Border radius"]
|
|
||||||
[:div.row-flex
|
|
||||||
[:input.input-text
|
|
||||||
{:placeholder "rx"
|
|
||||||
:type "number"
|
|
||||||
:value (precision-or-0 (:rx shape 0) 2)
|
|
||||||
:on-change #(on-border-change % :rx)}]
|
|
||||||
[:div.lock-size i/lock]
|
|
||||||
[:input.input-text
|
|
||||||
{:placeholder "ry"
|
|
||||||
:type "number"
|
|
||||||
:value (precision-or-0 (:ry shape 0) 2)
|
|
||||||
:on-change #(on-border-change % :ry)}]]
|
|
||||||
|
|
||||||
[:span "Rotation"]
|
[:span "Rotation"]
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
[:input.slidebar
|
[:input.slidebar
|
||||||
|
|
|
@ -20,28 +20,34 @@
|
||||||
[uxbox.util.math :refer (precision-or-0)]
|
[uxbox.util.math :refer (precision-or-0)]
|
||||||
[uxbox.util.spec :refer (color?)]))
|
[uxbox.util.spec :refer (color?)]))
|
||||||
|
|
||||||
(mx/defc stroke-menu
|
(mx/defcs stroke-menu
|
||||||
{:mixed [mx/static]}
|
{:mixins [mx/static (mx/local)]}
|
||||||
[menu {:keys [id] :as shape}]
|
[{:keys [rum/local]} menu {:keys [id] :as shape}]
|
||||||
(letfn [(update-attrs [attrs]
|
(letfn [(on-width-change [event]
|
||||||
(st/emit! (uds/update-attrs id attrs)))
|
|
||||||
(on-width-change [event]
|
|
||||||
(let [value (-> (dom/event->value event)
|
(let [value (-> (dom/event->value event)
|
||||||
(parse-float 1))]
|
(parse-float 1))]
|
||||||
(update-attrs {:stroke-width value})))
|
(st/emit! (uds/update-attrs id {:stroke-width value}))))
|
||||||
(on-opacity-change [event]
|
(on-opacity-change [event]
|
||||||
(let [value (-> (dom/event->value event)
|
(let [value (-> (dom/event->value event)
|
||||||
(parse-float 1)
|
(parse-float 1)
|
||||||
(/ 10000))]
|
(/ 10000))]
|
||||||
(update-attrs {:stroke-opacity value})))
|
(st/emit! (uds/update-attrs id {:stroke-opacity value}))))
|
||||||
(on-stroke-style-change [event]
|
(on-stroke-style-change [event]
|
||||||
(let [value (-> (dom/event->value event)
|
(let [value (-> (dom/event->value event)
|
||||||
(read-string))]
|
(read-string))]
|
||||||
(update-attrs {:stroke-style value})))
|
(st/emit! (uds/update-attrs id {:stroke-style value}))))
|
||||||
(on-stroke-color-change [event]
|
(on-stroke-color-change [event]
|
||||||
(let [value (dom/event->value event)]
|
(let [value (dom/event->value event)]
|
||||||
(when (color? value)
|
(when (color? value)
|
||||||
(update-attrs {:stroke-color value}))))
|
(st/emit! (uds/update-attrs id {:stroke-color value})))))
|
||||||
|
(on-border-change [event attr]
|
||||||
|
(let [value (-> (dom/event->value event)
|
||||||
|
(parse-int nil))]
|
||||||
|
(if (:border-lock @local)
|
||||||
|
(st/emit! (uds/update-attrs id {:rx value :ry value}))
|
||||||
|
(st/emit! (uds/update-attrs id {attr value})))))
|
||||||
|
(on-border-proportion-lock [event]
|
||||||
|
(swap! local update :border-lock not))
|
||||||
(show-color-picker [event]
|
(show-color-picker [event]
|
||||||
(let [x (.-clientX event)
|
(let [x (.-clientX event)
|
||||||
y (.-clientY event)
|
y (.-clientY event)
|
||||||
|
@ -81,6 +87,23 @@
|
||||||
{:on-change on-stroke-color-change
|
{:on-change on-stroke-color-change
|
||||||
:value (:stroke-color shape)}]]]
|
:value (:stroke-color shape)}]]]
|
||||||
|
|
||||||
|
[:span "Radius"]
|
||||||
|
[:div.row-flex
|
||||||
|
[:input.input-text
|
||||||
|
{:placeholder "rx"
|
||||||
|
:type "number"
|
||||||
|
:value (precision-or-0 (:rx shape 0) 2)
|
||||||
|
:on-change #(on-border-change % :rx)}]
|
||||||
|
[:div.lock-size
|
||||||
|
{:class (when (:border-lock @local) "selected")
|
||||||
|
:on-click on-border-proportion-lock}
|
||||||
|
i/lock]
|
||||||
|
[:input.input-text
|
||||||
|
{:placeholder "ry"
|
||||||
|
:type "number"
|
||||||
|
:value (precision-or-0 (:ry shape 0) 2)
|
||||||
|
:on-change #(on-border-change % :ry)}]]
|
||||||
|
|
||||||
[:span "Opacity"]
|
[:span "Opacity"]
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
[:input.slidebar
|
[:input.slidebar
|
||||||
|
|
Loading…
Add table
Reference in a new issue