3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 22:36:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Make measures menu as reusable component.

Browse source
This commit is contained in:
alonso.torres 2020-04-13 10:00:39 +02:00 • committed by Andrey Antukh
parent 5c3499057e
commit 344a7cbebe
2 changed files with 79 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs
View file

@ -16,5 +16,6 @@
(mf/defc options (mf/defc options
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
[:div [:div
[:& measures-menu {:shape shape}]]) [:& measures-menu {:options #{:position :rotation}
:shape shape}]])

17
frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs
View file

@ -19,8 +19,9 @@
[uxbox.util.i18n :refer [t] :as i18n])) [uxbox.util.i18n :refer [t] :as i18n]))
(mf/defc measures-menu (mf/defc measures-menu
[{:keys [shape] :as props}] [{:keys [shape options] :as props}]
(let [locale (i18n/use-locale) (let [options (or options #{:size :position :rotation :radius})
locale (i18n/use-locale)
on-size-change on-size-change
(fn [event attr] (fn [event attr]
@ -63,6 +64,7 @@
[:div.element-set-content [:div.element-set-content
;; WIDTH & HEIGHT ;; WIDTH & HEIGHT
(when (options :size)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (t locale "workspace.options.size")] [:span.element-set-subtitle (t locale "workspace.options.size")]
[:div.lock-size {:class (when (:proportion-lock shape) "selected") [:div.lock-size {:class (when (:proportion-lock shape) "selected")
@ -87,9 +89,10 @@
:on-change on-height-change :on-change on-height-change
:value (str (-> (:height shape) :value (str (-> (:height shape)
(d/coalesce 0) (d/coalesce 0)
(math/round)))}]]] (math/round)))}]]])
;; POSITION ;; POSITION
(when (options :position)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (t locale "workspace.options.position")] [:span.element-set-subtitle (t locale "workspace.options.position")]
[:div.input-element.pixels [:div.input-element.pixels
@ -107,8 +110,9 @@
:on-change on-pos-y-change :on-change on-pos-y-change
:value (str (-> (:y shape) :value (str (-> (:y shape)
(d/coalesce 0) (d/coalesce 0)
(math/round)))}]]] (math/round)))}]]])
(when (options :rotation)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (t locale "workspace.options.rotation")] [:span.element-set-subtitle (t locale "workspace.options.rotation")]
[:div.input-element.degrees [:div.input-element.degrees
@ -130,8 +134,9 @@
:no-validate true :no-validate true
:on-change on-rotation-change :on-change on-rotation-change
:value (str (-> (:rotation shape) :value (str (-> (:rotation shape)
(d/coalesce 0)))}]] (d/coalesce 0)))}]])
(when (options :radius)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (t locale "workspace.options.radius")] [:span.element-set-subtitle (t locale "workspace.options.radius")]
[:div.input-element.pixels [:div.input-element.pixels
@ -142,4 +147,4 @@
:value (str (-> (:rx shape) :value (str (-> (:rx shape)
(d/coalesce 0) (d/coalesce 0)
(math/round)))}]] (math/round)))}]]
[:div.input-element]]]])) [:div.input-element]])]]))