3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-23 21:16:12 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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

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