Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

Add resize handlers to element options.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-06 21:05:36 +02:00
parent da5d9c2422
commit ca2c76325d
1 changed files with 53 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
frontend/uxbox/ui/workspace/options.cljs
View file

@ -1,11 +1,15 @@
(ns uxbox.ui.workspace.options (ns uxbox.ui.workspace.options
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[uxbox.rstore :as rs]
[uxbox.shapes :as shapes] [uxbox.shapes :as shapes]
[uxbox.data.workspace :as dw]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.util :as util] [uxbox.ui.util :as util]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb])) [uxbox.ui.dom :as dom]
[uxbox.ui.workspace.base :as wb]
[uxbox.util.data :refer (parse-int)]))
(def +menus-map+ (def +menus-map+
{:builtin/icon [:menu/measures :menu/fill] {:builtin/icon [:menu/measures :menu/fill]
@ -70,41 +74,56 @@
(defmethod -render-menu :menu/measures (defmethod -render-menu :menu/measures
[menu own shape] [menu own shape]
(html (letfn [(on-width-change [event]
[:div.element-set {:key (str (:id menu))} (let [value (dom/event->value event)
[:div.element-set-title (:name menu)] value (parse-int value 0)
[:div.element-set-content sid (:id shape)]
;; SLIDEBAR FOR ROTATION AND OPACITY (-> (dw/update-shape-size sid {:width value})
[:span "Size"] (rs/emit!))))
[:div.row-flex (on-height-change [event]
[:input#width.input-text (let [value (dom/event->value event)
{:placeholder "Width" value (parse-int value 0)
:type "number" sid (:id shape)]
:value (:width shape) (println value)
:on-change (constantly nil)}] (-> (dw/update-shape-size sid {:height value})
[:div.lock-size i/lock] (rs/emit!))))]
[:input#width.input-text (html
{:placeholder "Height" [:div.element-set {:key (str (:id menu))}
:type "number" [:div.element-set-title (:name menu)]
:value (:height shape) [:div.element-set-content
:on-change (constantly nil)}]] ;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Size"]
[:div.row-flex
[:input#width.input-text
{:placeholder "Width"
:type "number"
:min "0"
:value (:width shape)
:on-change on-width-change}]
[:div.lock-size i/lock]
[:input#width.input-text
{:placeholder "Height"
:type "number"
:min "0"
:value (:height shape)
:on-change on-height-change}]]
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input#width.input-text
{:placeholder "x" {:placeholder "x"
:type "number" :type "number"
:value (:x shape) :value (:x shape)
:on-change (constantly nil)}] :on-change (constantly nil)}]
[:input#width.input-text [:input#width.input-text
{:placeholder "y" {:placeholder "y"
:type "number" :type "number"
:value (:x shape) :value (:x shape)
:on-change (constantly nil)}]] :on-change (constantly nil)}]]
[:span "Rotation"] [:span "Rotation"]
[:div.row-flex [:div.row-flex
[:input.slidebar {:type "range"}]]]])) [:input.slidebar {:type "range"}]]]])))
(defn element-opts-render (defn element-opts-render
[own shape] [own shape]