diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs index 6dbaeecfd..b202b0fa6 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs @@ -19,7 +19,7 @@ [uxbox.util.mixins :as mx :include-macros true] [uxbox.main.geom :as geom] [uxbox.util.dom :as dom] - [uxbox.util.math :refer (precision)] + [uxbox.util.math :refer (precision-or-0)] [uxbox.util.data :refer (parse-int parse-float read-string)])) (mx/defc circle-measures-menu @@ -57,7 +57,7 @@ {:placeholder "Width" :type "number" :min "0" - :value (precision (:rx shape 0) 2) + :value (precision-or-0 (:rx shape 0) 2) :on-change (partial on-size-change :rx)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") @@ -68,7 +68,7 @@ {:placeholder "Height" :type "number" :min "0" - :value (precision (:ry shape 0) 2) + :value (precision-or-0 (:ry shape 0) 2) :on-change (partial on-size-change :ry)}]]] [:span "Position"] @@ -77,13 +77,13 @@ [:input.input-text {:placeholder "cx" :type "number" - :value (precision (:cx shape 0) 2) + :value (precision-or-0 (:cx shape 0) 2) :on-change (partial on-pos-change :x)}]] [:div.input-element.pixels [:input.input-text {:placeholder "cy" :type "number" - :value (precision (:cy shape 0) 2) + :value (precision-or-0 (:cy shape 0) 2) :on-change (partial on-pos-change :y)}]]] [:span "Rotation"] @@ -102,7 +102,7 @@ :type "number" :min 0 :max 360 - :value (precision (:rotation shape 0) 2) + :value (precision-or-0 (:rotation shape 0) 2) :on-change on-rotation-change }]] [:input.input-text diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs index 9f2f106a8..0ea28feba 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs @@ -19,7 +19,7 @@ [uxbox.util.mixins :as mx :include-macros true] [uxbox.main.geom :as geom] [uxbox.util.dom :as dom] - [uxbox.util.math :refer (precision)] + [uxbox.util.math :refer (precision-or-0)] [uxbox.util.data :refer (parse-int parse-float read-string)])) (defn- icon-measures-menu-render @@ -58,7 +58,7 @@ {:placeholder "Width" :type "number" :min "0" - :value (precision (:width size) 2) + :value (precision-or-0 (:width size) 2) :on-change (partial on-size-change :width)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") @@ -69,7 +69,7 @@ {:placeholder "Height" :type "number" :min "0" - :value (precision (:height size) 2) + :value (precision-or-0 (:height size) 2) :on-change (partial on-size-change :height)}]]] [:span "Position"] @@ -78,13 +78,13 @@ [:input.input-text {:placeholder "X" :type "number" - :value (precision (:x1 shape 0) 2) + :value (precision-or-0 (:x1 shape 0) 2) :on-change (partial on-pos-change :x)}]] [:div.input-element.pixels [:input.input-text {:placeholder "Y" :type "number" - :value (precision (:y1 shape 0) 2) + :value (precision-or-0 (:y1 shape 0) 2) :on-change (partial on-pos-change :y)}]]] [:span "Rotation"] @@ -103,7 +103,7 @@ :type "number" :min 0 :max 360 - :value (precision (:rotation shape 0) 2) + :value (precision-or-0 (:rotation shape 0) 2) :on-change on-rotation-change }]] [:input.input-text diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/line_measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/line_measures.cljs index 85b3c535b..55d50e872 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/line_measures.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/line_measures.cljs @@ -19,7 +19,7 @@ [uxbox.util.mixins :as mx :include-macros true] [uxbox.main.geom :as geom] [uxbox.util.dom :as dom] - [uxbox.util.math :refer (precision)] + [uxbox.util.math :refer (precision-or-0)] [uxbox.util.data :refer (parse-int parse-float read-string)])) (defn- line-measures-menu-render @@ -44,24 +44,24 @@ [:input.input-text {:placeholder "x1" :type "number" - :value (precision (:x1 shape 0) 2) + :value (precision-or-0 (:x1 shape 0) 2) :on-change (partial on-pos-change :x1)}] [:input.input-text {:placeholder "y1" :type "number" - :value (precision (:y1 shape 0) 2) + :value (precision-or-0 (:y1 shape 0) 2) :on-change (partial on-pos-change :y1)}]] [:div.row-flex [:input.input-text {:placeholder "x2" :type "number" - :value (precision (:x2 shape 0) 2) + :value (precision-or-0 (:x2 shape 0) 2) :on-change (partial on-pos-change :x2)}] [:input.input-text {:placeholder "y2" :type "number" - :value (precision (:y2 shape 0) 2) + :value (precision-or-0 (:y2 shape 0) 2) :on-change (partial on-pos-change :y2)}]] [:span "Rotation"] @@ -79,7 +79,7 @@ :type "number" :min 0 :max 360 - :value (precision (:rotation shape 0) 2) + :value (precision-or-0 (:rotation shape 0) 2) :on-change on-rotation-change }] [:input.input-text diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs index 04f1af600..eefb438cd 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs @@ -17,7 +17,7 @@ [uxbox.util.mixins :as mx :include-macros true] [uxbox.main.geom :as geom] [uxbox.util.dom :as dom] - [uxbox.util.math :refer (precision)] + [uxbox.util.math :refer (precision-or-0)] [uxbox.util.data :refer (parse-int parse-float read-string)])) (mx/defc rect-measures-menu @@ -61,7 +61,7 @@ {:placeholder "Width" :type "number" :min "0" - :value (precision (:width size) 2) + :value (precision-or-0 (:width size) 2) :on-change (partial on-size-change :width)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") @@ -72,7 +72,7 @@ {:placeholder "Height" :type "number" :min "0" - :value (precision (:height size) 2) + :value (precision-or-0 (:height size) 2) :on-change (partial on-size-change :height)}]]] [:span "Position"] @@ -81,13 +81,13 @@ [:input.input-text {:placeholder "x" :type "number" - :value (precision (:x1 shape 0) 2) + :value (precision-or-0 (:x1 shape 0) 2) :on-change (partial on-pos-change :x)}]] [:div.input-element.pixels [:input.input-text {:placeholder "y" :type "number" - :value (precision (:y1 shape 0) 2) + :value (precision-or-0 (:y1 shape 0) 2) :on-change (partial on-pos-change :y)}]]] [:span "Border radius"] @@ -95,13 +95,13 @@ [:input.input-text {:placeholder "rx" :type "number" - :value (precision (:rx shape 0) 2) + :value (precision-or-0 (:rx shape 0) 2) :on-change (partial on-border-change :rx)}] [:div.lock-size i/lock] [:input.input-text {:placeholder "ry" :type "number" - :value (precision (:ry shape 0) 2) + :value (precision-or-0 (:ry shape 0) 2) :on-change (partial on-border-change :ry)}]] [:span "Rotation"] @@ -120,7 +120,7 @@ :type "number" :min 0 :max 360 - :value (precision (:rotation shape "0") 2) + :value (precision-or-0 (:rotation shape "0") 2) :on-change on-rotation-change }]] [:input.input-text diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs index 7b3375ef2..4da16606b 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs @@ -19,7 +19,7 @@ [uxbox.util.mixins :as mx :include-macros true] [uxbox.util.dom :as dom] [uxbox.util.data :refer (parse-int parse-float read-string)] - [uxbox.util.math :refer (precision)] + [uxbox.util.math :refer (precision-or-0)] [uxbox.util.spec :refer (color?)])) (defn- stroke-menu-render @@ -72,7 +72,7 @@ {:placeholder "Width" :type "number" :min "0" - :value (precision (:stroke-width shape 1) 2) + :value (precision-or-0 (:stroke-width shape 1) 2) :on-change on-width-change}]]] [:span "Color"] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs index 4031ef164..315c633f7 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs @@ -21,7 +21,7 @@ [uxbox.main.ui.workspace.base :as wb] [uxbox.main.geom :as geom] [uxbox.util.dom :as dom] - [uxbox.util.math :refer (precision)] + [uxbox.util.math :refer (precision-or-0)] [uxbox.util.data :refer (parse-int parse-float read-string @@ -90,13 +90,41 @@ [:span "Size and Weight"] [:div.row-flex - [:input.input-text - {:placeholder "Font Size" - :type "number" - :min "0" - :max "200" - :value (precision size 2) - :on-change on-font-size-change}] + [:div.editable-select + {:style {:position "relative" + :width "100%" + :height "38px"}} + [:select.input-select + {:id "common-font-sizes" + :style {:position "absolute" + :top 0 + :left 0 + :border "none" + :color "white" + :width "100%"} + :on-change on-font-size-change} + [:option {:style {:color "black"} :value "8"} "8"] + [:option {:style {:color "black"} :value "9"} "9"] + [:option {:style {:color "black"} :value "10"} "10"] + [:option {:style {:color "black"} :value "11"} "11"] + [:option {:style {:color "black"} :value "12"} "12"] + [:option {:style {:color "black"} :value "14"} "14"] + [:option {:style {:color "black"} :value "18"} "18"] + [:option {:style {:color "black"} :value "24"} "24"] + [:option {:style {:color "black"} :value "36"} "36"] + [:option {:style {:color "black"} :value "48"} "48"] + [:option {:style {:color "black"} :value "72"} "72"]] + [:input.input-text + {:placeholder "Font Size" + :style {:position "absolute" + :top 0 + :left 0 + :width "80%"} + :type "number" + :min "0" + :max "200" + :value (precision-or-0 size 2) + :on-change on-font-size-change}]] [:select.input-select {:value (pr-str [weight style]) :on-change on-font-style-change} (for [style styles @@ -112,7 +140,7 @@ :step "0.1" :min "0" :max "200" - :value (precision line-height 2) + :value (precision-or-0 line-height 2) :on-change on-font-line-height-change}] [:input.input-text {:placeholder "Letter spacing" @@ -120,7 +148,7 @@ :step "0.1" :min "0" :max "200" - :value (precision letter-spacing 2) + :value (precision-or-0 letter-spacing 2) :on-change on-font-letter-spacing-change}]] diff --git a/frontend/src/uxbox/util/math.cljs b/frontend/src/uxbox/util/math.cljs index ec6270e07..ae5a83b0d 100644 --- a/frontend/src/uxbox/util/math.cljs +++ b/frontend/src/uxbox/util/math.cljs @@ -83,6 +83,12 @@ [^number v ^number n] (js/parseFloat (.toFixed v n))) +(defn precision-or-0 + [^number v ^number n] + (if (.-toFixed v) + (js/parseFloat (.toFixed v n)) + 0)) + (defn radians "Converts degrees to radians." [^number degrees]