3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 07:01:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

Implement proportions lock button on rect measurements element options sidebar.

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

156
src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs
View file

@ -6,9 +6,7 @@
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.sidebar.options.rect-measures (ns uxbox.main.ui.workspace.sidebar.options.rect-measures
(:require [sablono.core :as html :refer-macros [html]] (:require [lentes.core :as l]
[rum.core :as rum]
[lentes.core :as l]
[uxbox.util.i18n :refer (tr)] [uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as r] [uxbox.util.router :as r]
[uxbox.util.rstore :as rs] [uxbox.util.rstore :as rs]
@ -24,11 +22,11 @@
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)])) [uxbox.util.data :refer (parse-int parse-float read-string)]))
(defn rect-measures-menu-render (mx/defc rect-measures-menu
[own menu shape] {:mixins [mx/static]}
[menu {:keys [id] :as shape}]
(letfn [(on-size-change [attr event] (letfn [(on-size-change [attr event]
(let [value (dom/event->value event) (let [value (-> (dom/event->value event) (parse-int 0))
value (parse-int value 0)
sid (:id shape) sid (:id shape)
props {attr value}] props {attr value}]
(rs/emit! (uds/update-size sid props)))) (rs/emit! (uds/update-size sid props))))
@ -48,81 +46,83 @@
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-radius-attrs sid props))))] (rs/emit! (uds/update-radius-attrs sid props))))
(on-proportion-lock-change [event]
(if (:proportion-lock shape)
(rs/emit! (uds/unlock-proportions id))
(rs/emit! (uds/lock-proportions id))))]
(let [size (geom/size shape)] (let [size (geom/size shape)]
(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 "Size"]
[:span "Size"] [:div.row-flex
[:div.row-flex [:input.input-text
[:input.input-text {:placeholder "Width"
{:placeholder "Width" :type "number"
:type "number" :min "0"
:min "0" :value (:width size)
:value (:width size) :on-change (partial on-size-change :width)}]
:on-change (partial on-size-change :width)}] [:div.lock-size
[:div.lock-size i/lock] {:class (when (:proportion-lock shape) "selected")
[:input.input-text :on-click on-proportion-lock-change}
{:placeholder "Height" i/lock]
:type "number" [:input.input-text
:min "0" {:placeholder "Height"
:value (:height size) :type "number"
:on-change (partial on-size-change :height)}]] :min "0"
:value (:height size)
:on-change (partial on-size-change :height)}]]
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input.input-text [:input.input-text
{:placeholder "x" {:placeholder "x"
:type "number" :type "number"
:value (:x1 shape "") :value (:x1 shape "")
:on-change (partial on-pos-change :x)}] :on-change (partial on-pos-change :x)}]
[:input.input-text [:input.input-text
{:placeholder "y" {:placeholder "y"
:type "number" :type "number"
:value (:y1 shape "") :value (:y1 shape "")
:on-change (partial on-pos-change :y)}]] :on-change (partial on-pos-change :y)}]]
[:span "Border radius"] [:span "Border radius"]
[:div.row-flex [:div.row-flex
[:input.input-text [:input.input-text
{:placeholder "rx" {:placeholder "rx"
:type "number" :type "number"
:value (:rx shape "") :value (:rx shape "")
:on-change (partial on-border-change :rx)}] :on-change (partial on-border-change :rx)}]
[:div.lock-size i/lock] [:div.lock-size i/lock]
[:input.input-text [:input.input-text
{:placeholder "ry" {:placeholder "ry"
:type "number" :type "number"
:value (:ry shape "") :value (:ry shape "")
:on-change (partial on-border-change :ry)}]] :on-change (partial on-border-change :ry)}]]
[: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
[:input.input-text
{:placeholder ""
:type "number"
:min 0
:max 360
:value (:rotation shape "0")
:on-change on-rotation-change
}]
[:input.input-text
{:style {:visibility "hidden"}}]
]]])))
[:div.row-flex
[:input.input-text
{:placeholder ""
:type "number"
:min 0
:max 360
:value (:rotation shape "0")
:on-change on-rotation-change
}]
[:input.input-text
{:style {:visibility "hidden"}}]
]]]))))
(def rect-measures-menu
(mx/component
{:render rect-measures-menu-render
:name "rect-measures"
:mixins [mx/static]}))