Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-18 21:06:11 -05:00
Code Issues Activity

Implement proportion lock button on circle measurements element options sidebar.

Browse source 
With an additional cosmetic refactor.
This commit is contained in:
Andrey Antukh 2016-09-29 07:16:29 +02:00
parent bb27a39759
commit 863f0c906b
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
1 changed files with 58 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs
View file

@ -43,66 +43,64 @@
value (parse-int value nil) value (parse-int value nil)
sid (:id shape) sid (:id shape)
props {attr value}] props {attr value}]
(rs/emit! (uds/update-position sid props))))] (rs/emit! (uds/update-position sid props))))
(html (on-proportion-lock-change [event]
[:div.element-set {:key (str (:id menu))} (if (:proportion-lock shape)
[:div.element-set-title (:name menu)] (rs/emit! (uds/unlock-proportions id))
[:div.element-set-content (rs/emit! (uds/lock-proportions id))))]
;; SLIDEBAR FOR ROTATION AND OPACITY [:div.element-set {:key (str (:id menu))}
[:span "Size"] [:div.element-set-title (:name menu)]
[:div.row-flex [:div.element-set-content
[:input.input-text ;; SLIDEBAR FOR ROTATION AND OPACITY
{:placeholder "Width" [:span "Size"]
:type "number" [:div.row-flex
:min "0" [:input.input-text
:value (:rx shape) {:placeholder "Width"
:on-change (partial on-size-change :rx)}] :type "number"
[:div.lock-size i/lock] :min "0"
[:input.input-text :value (:rx shape)
{:placeholder "Height" :on-change (partial on-size-change :rx)}]
:type "number" [:div.lock-size
:min "0" {:class (when (:proportion-lock shape) "selected")
:value (:ry shape) :on-click on-proportion-lock-change}
:on-change (partial on-size-change :ry)}]] i/lock]
[:input.input-text
{:placeholder "Height"
:type "number"
:min "0"
:value (:ry shape)
:on-change (partial on-size-change :ry)}]]
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input.input-text [:input.input-text
{:placeholder "cx" {:placeholder "cx"
:type "number" :type "number"
:value (:cx shape "") :value (:cx shape "")
:on-change (partial on-pos-change :x)}] :on-change (partial on-pos-change :x)}]
[:input.input-text [:input.input-text
{:placeholder "cy" {:placeholder "cy"
:type "number" :type "number"
:value (:cy shape "") :value (:cy shape "")
:on-change (partial on-pos-change :y)}]] :on-change (partial on-pos-change :y)}]]
[:span "Rotation"] [:span "Rotation"]
[:div.row-flex [:div.row-flex
[:input.slidebar [:input.slidebar
{:type "range" {:type "range"
:min 0 :min 0
:max 360 :max 360
:value (:rotation shape 0) :value (:rotation shape 0)
:on-change on-rotation-change}]] :on-change on-rotation-change}]]
[:div.row-flex [:div.row-flex
[:input.input-text [:input.input-text
{:placeholder "" {:placeholder ""
:type "number" :type "number"
:min 0 :min 0
:max 360 :max 360
:value (:rotation shape "0") :value (:rotation shape "0")
:on-change on-rotation-change :on-change on-rotation-change
}] }]
[:input.input-text [:input.input-text
{:style {:visibility "hidden"}}] {:style {:visibility "hidden"}}]]]]))
]]]
)))
(def circle-measures-menu
(mx/component
{:render circle-measures-menu-render
:name "circle-measures-menu"
:mixins [mx/static]}))