Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues Activity

Add implementation for page size inputs on element options sidebar.

Browse source
This commit is contained in:
Andrey Antukh 2016-11-28 23:49:25 +01:00
parent 91fb68f906
commit 3f1ae0feaa
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
1 changed files with 48 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
View file

@ -8,37 +8,60 @@
(ns uxbox.main.ui.workspace.sidebar.options.page
"Page options menu entries."
(:require [lentes.core :as l]
[uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as r]
[potok.core :as ptk]
[uxbox.store :as st]
[uxbox.main.data.workspace :as udw]
[uxbox.main.data.shapes :as uds]
[uxbox.main.data.pages :as udp]
[uxbox.main.ui.icons :as i]
[uxbox.main.ui.workspace.base :refer [page-ref]]
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker]]
[uxbox.main.ui.workspace.recent-colors :refer [recent-colors]]
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
[uxbox.main.geom :as geom]
[uxbox.util.data :refer [parse-int]]
[uxbox.util.dom :as dom]))
(mx/defc measures-menu
{:mixins [mx/static]}
[menu]
[:div.element-set
[:div.element-set-title (:name menu)]
[:div.element-set-content
[:span "Size"]
[:div.row-flex
[:div.input-element.pixels
[:input.input-text {:type "number" :placeholder "x"}]]
[:div.input-element.pixels
[:input.input-text {:type "number" :placeholder "y"}]]]
[:span "Background color"]
[:div.row-flex.color-data
[:span.color-th {:style {:background-color "#d2d2d2"}}]
[:div.color-info
[:span "#D2D2D2"]]]]])
(mx/defcs measures-menu
{:mixins [mx/static mx/reactive]}
[own menu]
(let [{:keys [id] :as page} (mx/react page-ref)
{:keys [width height] :as metadata} (:metadata page)]
(letfn [(on-width-change []
(when-let [value (-> (mx/ref-node own "width")
(dom/get-value)
(parse-int nil))]
(->> (assoc metadata :width value)
(udp/update-metadata id)
(st/emit!))))
(on-height-change []
(when-let [value (-> (mx/ref-node own "height")
(dom/get-value)
(parse-int nil))]
(->> (assoc metadata :height value)
(udp/update-metadata id)
(st/emit!))))]
[:div.element-set
[:div.element-set-title (:name menu)]
[:div.element-set-content
[:span "Size"]
[:div.row-flex
[:div.input-element.pixels
[:input.input-text
{:type "number"
:ref "width"
:on-change on-width-change
:value (:width metadata)
:placeholder "width"}]]
[:div.input-element.pixels
[:input.input-text
{:type "number"
:ref "height"
:on-change on-height-change
:value (:height metadata)
:placeholder "height"}]]]
[:span "Background color"]
[:div.row-flex.color-data
[:span.color-th {:style {:background-color "#d2d2d2"}}]
[:div.color-info
[:span "#D2D2D2"]]]]])))
(mx/defc grid-options-menu
{:mixins [mx/static]}