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

149
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,83 +64,87 @@
[:div.element-set-content [:div.element-set-content
;; WIDTH & HEIGHT ;; WIDTH & HEIGHT
[:div.row-flex (when (options :size)
[:span.element-set-subtitle (t locale "workspace.options.size")] [:div.row-flex
[:div.lock-size {:class (when (:proportion-lock shape) "selected") [:span.element-set-subtitle (t locale "workspace.options.size")]
:on-click on-proportion-lock-change} [:div.lock-size {:class (when (:proportion-lock shape) "selected")
(if (:proportion-lock shape) :on-click on-proportion-lock-change}
i/lock (if (:proportion-lock shape)
i/unlock)] i/lock
[:div.input-element.pixels i/unlock)]
[:input.input-text {:type "number" [:div.input-element.pixels
:min "0" [:input.input-text {:type "number"
:no-validate true :min "0"
:on-change on-width-change :no-validate true
:value (str (-> (:width shape) :on-change on-width-change
(d/coalesce 0) :value (str (-> (:width shape)
(math/round)))}]] (d/coalesce 0)
(math/round)))}]]
[:div.input-element.pixels [:div.input-element.pixels
[:input.input-text {:type "number" [:input.input-text {:type "number"
:min "0" :min "0"
:no-validate true :no-validate true
: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
[:div.row-flex (when (options :position)
[:span.element-set-subtitle (t locale "workspace.options.position")] [:div.row-flex
[:div.input-element.pixels [:span.element-set-subtitle (t locale "workspace.options.position")]
[:input.input-text {:placeholder "x" [:div.input-element.pixels
:type "number" [:input.input-text {:placeholder "x"
:no-validate true :type "number"
:on-change on-pos-x-change :no-validate true
:value (str (-> (:x shape) :on-change on-pos-x-change
(d/coalesce 0) :value (str (-> (:x shape)
(math/round)))}]] (d/coalesce 0)
[:div.input-element.pixels (math/round)))}]]
[:input.input-text {:placeholder "y" [:div.input-element.pixels
:type "number" [:input.input-text {:placeholder "y"
:no-validate true :type "number"
:on-change on-pos-y-change :no-validate true
:value (str (-> (:y shape) :on-change on-pos-y-change
(d/coalesce 0) :value (str (-> (:y shape)
(math/round)))}]]] (d/coalesce 0)
(math/round)))}]]])
[:div.row-flex (when (options :rotation)
[:span.element-set-subtitle (t locale "workspace.options.rotation")] [:div.row-flex
[:div.input-element.degrees [:span.element-set-subtitle (t locale "workspace.options.rotation")]
[:input.input-text [:div.input-element.degrees
{:placeholder "" [:input.input-text
:type "number" {:placeholder ""
:no-validate true :type "number"
:no-validate true
:min "0"
:max "360"
:on-change on-rotation-change
:value (str (-> (:rotation shape)
(d/coalesce 0)
(math/round)))}]]
[:input.slidebar
{:type "range"
:min "0" :min "0"
:max "360" :max "360"
:step "1"
: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)))}]])
(math/round)))}]]
[:input.slidebar
{:type "range"
:min "0"
:max "360"
:step "1"
:no-validate true
:on-change on-rotation-change
:value (str (-> (:rotation shape)
(d/coalesce 0)))}]]
[:div.row-flex (when (options :radius)
[:span.element-set-subtitle (t locale "workspace.options.radius")] [:div.row-flex
[:div.input-element.pixels [:span.element-set-subtitle (t locale "workspace.options.radius")]
[:input.input-text [:div.input-element.pixels
{:placeholder "rx" [:input.input-text
:type "number" {:placeholder "rx"
:on-change on-radius-change :type "number"
:value (str (-> (:rx shape) :on-change on-radius-change
(d/coalesce 0) :value (str (-> (:rx shape)
(math/round)))}]] (d/coalesce 0)
[:div.input-element]]]])) (math/round)))}]]
[:div.input-element]])]]))