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

Initial work on text element options.

Browse source
This commit is contained in:
Andrey Antukh 2016-02-27 16:59:58 +02:00
parent 08b99e9a4b
commit 3d8fb7f116
1 changed files with 74 additions and 28 deletions

102
src/uxbox/ui/workspace/sidebar/options.cljs
View file

@ -22,14 +22,15 @@
;; Constants ;; Constants
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static ^:private +menus-map+ (def ^:const ^:private +menus-map+
{:builtin/icon [:menu/icon-measures :menu/fill :menu/stroke] {:builtin/icon [:menu/icon-measures :menu/fill :menu/stroke]
:builtin/rect [:menu/rect-measures :menu/fill :menu/stroke] :builtin/rect [:menu/rect-measures :menu/fill :menu/stroke]
:builtin/line [:menu/line-measures :menu/stroke] :builtin/line [:menu/line-measures :menu/stroke]
:builtin/circle [:menu/circle-measures :menu/fill :menu/stroke] :builtin/circle [:menu/circle-measures :menu/fill :menu/stroke]
:builtin/text [:menu/text]
:builtin/group []}) :builtin/group []})
(def ^:static ^:private +menus-by-id+ (def ^:const ^:private +menus-by-id+
{:menu/icon-measures {:menu/icon-measures
{:name "Size, position & rotation" {:name "Size, position & rotation"
:icon i/infocard} :icon i/infocard}
@ -52,7 +53,11 @@
:menu/stroke :menu/stroke
{:name "Stroke" {:name "Stroke"
:icon i/stroke}}) :icon i/stroke}
:menu/text
{:name "Text"
:icon i/text}})
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation ;; Implementation
@ -95,7 +100,7 @@
[:option {:value ":dotted"} "Dotted"] [:option {:value ":dotted"} "Dotted"]
[:option {:value ":dashed"} "Dashed"] [:option {:value ":dashed"} "Dashed"]
[:option {:value ":mixed"} "Mixed"]] [:option {:value ":mixed"} "Mixed"]]
[:input#width.input-text [:input.input-text
{:placeholder "Width" {:placeholder "Width"
:type "number" :type "number"
:min "0" :min "0"
@ -107,7 +112,7 @@
(colorpicker :options #(change-stroke {:color (:hex %)})) (colorpicker :options #(change-stroke {:color (:hex %)}))
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "#" {:placeholder "#"
:type "text" :type "text"
:value (:stroke shape "") :value (:stroke shape "")
@ -148,7 +153,7 @@
[:span "Color"] [:span "Color"]
(colorpicker :options on-color-picker-event) (colorpicker :options on-color-picker-event)
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "#" {:placeholder "#"
:type "text" :type "text"
:value (:fill shape "") :value (:fill shape "")
@ -200,14 +205,14 @@
;; SLIDEBAR FOR ROTATION AND OPACITY ;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Size"] [:span "Size"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "Width" {:placeholder "Width"
:type "number" :type "number"
:min "0" :min "0"
:value (:width size) :value (:width size)
:on-change (partial on-size-change :width)}] :on-change (partial on-size-change :width)}]
[:div.lock-size i/lock] [:div.lock-size i/lock]
[:input#width.input-text [:input.input-text
{:placeholder "Height" {:placeholder "Height"
:type "number" :type "number"
:min "0" :min "0"
@ -216,12 +221,12 @@
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "x" {:placeholder "x"
:type "number" :type "number"
:value (:x1 shape "") :value (:x1 shape "")
:on-change (partial on-pos-change :x)}] :on-change (partial on-pos-change :x)}]
[:input#width.input-text [:input.input-text
{:placeholder "y" {:placeholder "y"
:type "number" :type "number"
:value (:y1 shape "") :value (:y1 shape "")
@ -229,13 +234,13 @@
[:span "Border radius"] [:span "Border radius"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "rx" {:placeholder "rx"
:type "number" :type "number"
:value (:rx shape "") :value (:rx shape "")
:on-change (partial on-border-change :rx)}] :on-change (partial on-border-change :rx)}]
[:div.lock-size i/lock] [:div.lock-size i/lock]
[:input#width.input-text [:input.input-text
{:placeholder "ry" {:placeholder "ry"
:type "number" :type "number"
:value (:ry shape "") :value (:ry shape "")
@ -251,7 +256,7 @@
:on-change on-rotation-change}]] :on-change on-rotation-change}]]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "" {:placeholder ""
:type "number" :type "number"
:min 0 :min 0
@ -292,14 +297,14 @@
;; SLIDEBAR FOR ROTATION AND OPACITY ;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Size"] [:span "Size"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "Width" {:placeholder "Width"
:type "number" :type "number"
:min "0" :min "0"
:value (:width size) :value (:width size)
:on-change (partial on-size-change :width)}] :on-change (partial on-size-change :width)}]
[:div.lock-size i/lock] [:div.lock-size i/lock]
[:input#width.input-text [:input.input-text
{:placeholder "Height" {:placeholder "Height"
:type "number" :type "number"
:min "0" :min "0"
@ -308,12 +313,12 @@
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "x" {:placeholder "x"
:type "number" :type "number"
:value (:x1 shape "") :value (:x1 shape "")
:on-change (partial on-pos-change :x)}] :on-change (partial on-pos-change :x)}]
[:input#width.input-text [:input.input-text
{:placeholder "y" {:placeholder "y"
:type "number" :type "number"
:value (:y1 shape "") :value (:y1 shape "")
@ -329,7 +334,7 @@
:on-change on-rotation-change}]] :on-change on-rotation-change}]]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "" {:placeholder ""
:type "number" :type "number"
:min 0 :min 0
@ -368,14 +373,14 @@
;; SLIDEBAR FOR ROTATION AND OPACITY ;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Size"] [:span "Size"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "Width" {:placeholder "Width"
:type "number" :type "number"
:min "0" :min "0"
:value (:rx shape) :value (:rx shape)
:on-change (partial on-size-change :rx)}] :on-change (partial on-size-change :rx)}]
[:div.lock-size i/lock] [:div.lock-size i/lock]
[:input#width.input-text [:input.input-text
{:placeholder "Height" {:placeholder "Height"
:type "number" :type "number"
:min "0" :min "0"
@ -384,12 +389,12 @@
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "cx" {:placeholder "cx"
:type "number" :type "number"
:value (:cx shape "") :value (:cx shape "")
:on-change (partial on-pos-change :x)}] :on-change (partial on-pos-change :x)}]
[:input#width.input-text [:input.input-text
{:placeholder "cy" {:placeholder "cy"
:type "number" :type "number"
:value (:cy shape "") :value (:cy shape "")
@ -405,7 +410,7 @@
:on-change on-rotation-change}]] :on-change on-rotation-change}]]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "" {:placeholder ""
:type "number" :type "number"
:min 0 :min 0
@ -437,24 +442,24 @@
[:div.element-set-content [:div.element-set-content
[:span "Position"] [:span "Position"]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "x1" {:placeholder "x1"
:type "number" :type "number"
:value (:x1 shape "") :value (:x1 shape "")
:on-change (partial on-pos-change :x1)}] :on-change (partial on-pos-change :x1)}]
[:input#width.input-text [:input.input-text
{:placeholder "y1" {:placeholder "y1"
:type "number" :type "number"
:value (:y1 shape "") :value (:y1 shape "")
:on-change (partial on-pos-change :y1)}]] :on-change (partial on-pos-change :y1)}]]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "x2" {:placeholder "x2"
:type "number" :type "number"
:value (:x2 shape "") :value (:x2 shape "")
:on-change (partial on-pos-change :x2)}] :on-change (partial on-pos-change :x2)}]
[:input#width.input-text [:input.input-text
{:placeholder "y2" {:placeholder "y2"
:type "number" :type "number"
:value (:y2 shape "") :value (:y2 shape "")
@ -470,7 +475,7 @@
:on-change on-rotation-change}]] :on-change on-rotation-change}]]
[:div.row-flex [:div.row-flex
[:input#width.input-text [:input.input-text
{:placeholder "" {:placeholder ""
:type "number" :type "number"
:min 0 :min 0
@ -483,6 +488,47 @@
]]] ]]]
))) )))
(defmethod -render-menu :menu/text
[menu own shape]
(letfn [(on-font-family-change [event]
(let [value (dom/event->value event)
sid (:id shape)]
(println "on-font-family-change" value)))
(on-font-size-change [event]
(let [value (dom/event->value event)
value (parse-int value)
sid (:id shape)]
(println "on-font-size-change" value)))
(on-font-weight-change [event]
(let [value (dom/event->value event)
value (read-string value)
sid (:id shape)]
(println "on-font-size-change" value)))]
(html
[:div.element-set {:key (str (:id menu))}
[:div.element-set-title (:name menu)]
[:div.element-set-content
[:span "Font family"]
[:div.row-flex
[:select.input-select {:value (:font-family shape "sans-serif")
:on-change on-font-family-change}
[:option {:value "sans-serif"} "Sans Serif"]
[:option {:value "monospace"} "Monospace"]]]
[:span "Size and Weight"]
[:div.row-flex
[:input.input-text
{:placeholder "Font Size"
:type "number"
:min "0"
:max "200"
:value (:font-size shape "16")
:on-change on-font-size-change}]
[:select.input-select {:value (:font-weight shape ":normal")
:on-change on-font-weight-change}
[:option {:value ":normal"} "Normal"]
[:option {:value ":bold"} "Solid"]]]]])))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Components ;; Components
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;