3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-05 19:11:41 +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

32
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,9 +46,12 @@
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
@ -63,7 +64,10 @@
: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 i/lock] [:div.lock-size
{:class (when (:proportion-lock shape) "selected")
:on-click on-proportion-lock-change}
i/lock]
[:input.input-text [:input.input-text
{:placeholder "Height" {:placeholder "Height"
:type "number" :type "number"
@ -118,11 +122,7 @@
}] }]
[:input.input-text [:input.input-text
{:style {:visibility "hidden"}}] {:style {:visibility "hidden"}}]
]]])))) ]]])))
(def rect-measures-menu
(mx/component
{:render rect-measures-menu-render
:name "rect-measures"
:mixins [mx/static]}))