From c8ebc7ea87570c6562b56871e2a4649b1a585fc0 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Fri, 4 Nov 2016 13:32:03 +0100 Subject: [PATCH] add input measures --- resources/styles/common/framework.scss | 52 ++++++++ resources/styles/main/partials/lightbox.scss | 5 +- src/uxbox/main/ui/workspace/settings.cljs | 34 ++--- .../sidebar/options/circle_measures.cljs | 65 +++++----- .../ui/workspace/sidebar/options/fill.cljs | 7 -- .../sidebar/options/icon_measures.cljs | 65 +++++----- .../sidebar/options/interactions.cljs | 118 ++++++++++-------- .../sidebar/options/rect_measures.cljs | 68 +++++----- .../ui/workspace/sidebar/options/stroke.cljs | 13 +- .../main/ui/workspace/sidebar/sitemap.cljs | 30 ++--- 10 files changed, 265 insertions(+), 192 deletions(-) diff --git a/resources/styles/common/framework.scss b/resources/styles/common/framework.scss index 2e5b92a01..3d7fdb33f 100644 --- a/resources/styles/common/framework.scss +++ b/resources/styles/common/framework.scss @@ -312,6 +312,56 @@ ul.slider-dots { } // Input elements +.input-element { + display: flex; + position: relative; + width: 100%; + + &::after { + color: $soft-ui-text; + font-size: $fs12; + height: 20px; + position: absolute; + right: 3px; + top: 26%; + width: 20px; + } + + // Input amounts + + &.pixels { + + &::after { + content: "px"; + } + + } + + &.percentail { + + &::after { + content: "%"; + } + + } + + &.miliseconds { + + &::after { + content: "ms"; + } + + } + + &.degrees { + + &::after { + content: "dg"; + } + + } + +} input, select { @@ -355,6 +405,7 @@ input[type="checkbox"]:focus { box-shadow: none; outline: none; padding: $small $big $small $small; + position: relative; @include placeholder { transition: all .3s ease; @@ -402,6 +453,7 @@ input[type="checkbox"]:focus { } + // Input radio .input-radio, diff --git a/resources/styles/main/partials/lightbox.scss b/resources/styles/main/partials/lightbox.scss index c63ef1174..212cf0a80 100644 --- a/resources/styles/main/partials/lightbox.scss +++ b/resources/styles/main/partials/lightbox.scss @@ -55,8 +55,9 @@ width: 100%; .input-text { - width: 35%; - } + margin-right: $small; + // width: 35%; + } .toggle-layout { diff --git a/src/uxbox/main/ui/workspace/settings.cljs b/src/uxbox/main/ui/workspace/settings.cljs index c143c77ac..c66518325 100644 --- a/src/uxbox/main/ui/workspace/settings.cljs +++ b/src/uxbox/main/ui/workspace/settings.cljs @@ -63,22 +63,24 @@ [:form {:on-submit on-submit} [:span.lightbox-label "Grid size"] [:div.project-size - [:input#grid-x.input-text - {:placeholder "X px" - :type "number" - :class (forms/error-class errors :grid/x-axis) - :value (:grid/x-axis form "") - :on-change (partial on-field-change :grid/x-axis) - :min 1 - :max 100}] - [:input#grid-y.input-text - {:placeholder "Y px" - :type "number" - :class (forms/error-class errors :grid/y-axis) - :value (:grid/y-axis form "") - :on-change (partial on-field-change :grid/y-axis) - :min 1 - :max 100}]] + [:div.input-element.pixels + [:input#grid-x.input-text + {:placeholder "X" + :type "number" + :class (forms/error-class errors :grid/x-axis) + :value (:grid/x-axis form "") + :on-change (partial on-field-change :grid/x-axis) + :min 1 + :max 100}]] + [:div.input-element.pixels + [:input#grid-y.input-text + {:placeholder "Y" + :type "number" + :class (forms/error-class errors :grid/y-axis) + :value (:grid/y-axis form "") + :on-change (partial on-field-change :grid/y-axis) + :min 1 + :max 100}]]] [:span.lightbox-label "Grid color"] (uucp/colorpicker :value (:grid/color form) diff --git a/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs b/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs index 31a73e70b..7da27c083 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs @@ -53,35 +53,39 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Size"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:rx shape) - :on-change (partial on-size-change :rx)}] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:rx shape) + :on-change (partial on-size-change :rx)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") :on-click on-proportion-lock-change} i/lock] - [:input.input-text - {:placeholder "Height" - :type "number" - :min "0" - :value (:ry shape) - :on-change (partial on-size-change :ry)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :type "number" + :min "0" + :value (:ry shape) + :on-change (partial on-size-change :ry)}]]] [:span "Position"] [:div.row-flex - [:input.input-text - {:placeholder "cx" - :type "number" - :value (:cx shape "") - :on-change (partial on-pos-change :x)}] - [:input.input-text - {:placeholder "cy" - :type "number" - :value (:cy shape "") - :on-change (partial on-pos-change :y)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "cx" + :type "number" + :value (:cx shape "") + :on-change (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "cy" + :type "number" + :value (:cy shape "") + :on-change (partial on-pos-change :y)}]]] [:span "Rotation"] [:div.row-flex @@ -93,13 +97,14 @@ :on-change on-rotation-change}]] [:div.row-flex - [:input.input-text - {:placeholder "" - :type "number" - :min 0 - :max 360 - :value (:rotation shape "0") - :on-change on-rotation-change - }] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :min 0 + :max 360 + :value (:rotation shape "0") + :on-change on-rotation-change + }]] [:input.input-text {:style {:visibility "hidden"}}]]]])) diff --git a/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs b/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs index 1477450db..50bf77148 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs @@ -57,13 +57,6 @@ [:div.color-info [:span (:fill shape "#000000")]]] - [:div.row-flex - [:input.input-text - {:placeholder "#" - :type "text" - :value (:fill shape "") - :on-change on-color-change}]] - ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Opacity"] [:div.row-flex diff --git a/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs b/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs index dacdf8bb6..3f45fcb14 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs @@ -50,32 +50,36 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Size"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:width size) - :on-change (partial on-size-change :width)}] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:width size) + :on-change (partial on-size-change :width)}]] [:div.lock-size i/lock] - [:input.input-text - {:placeholder "Height" - :type "number" - :min "0" - :value (:height size) - :on-change (partial on-size-change :height)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :type "number" + :min "0" + :value (:height size) + :on-change (partial on-size-change :height)}]]] [:span "Position"] [:div.row-flex - [:input.input-text - {:placeholder "x" - :type "number" - :value (:x1 shape "") - :on-change (partial on-pos-change :x)}] - [:input.input-text - {:placeholder "y" - :type "number" - :value (:y1 shape "") - :on-change (partial on-pos-change :y)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "X" + :type "number" + :value (:x1 shape "") + :on-change (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :type "number" + :value (:y1 shape "") + :on-change (partial on-pos-change :y)}]]] [:span "Rotation"] [:div.row-flex @@ -87,14 +91,15 @@ :on-change on-rotation-change}]] [:div.row-flex - [:input.input-text - {:placeholder "" - :type "number" - :min 0 - :max 360 - :value (:rotation shape "0") - :on-change on-rotation-change - }] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :min 0 + :max 360 + :value (:rotation shape "0") + :on-change on-rotation-change + }]] [:input.input-text {:style {:visibility "hidden"}}] ]]])))) diff --git a/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs b/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs index a7a188745..73b9adac7 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs @@ -228,18 +228,20 @@ (swap! form-ref assoc :moveto-y 0)) (html [:div - [:span "Move to position (px)"] + [:span "Move to position"] [:div.row-flex - [:input.input-text - {:placeholder "X" - :on-change (partial on-change form-ref :moveto-x) - :type "number" - :value (:moveto-x @form-ref "")}] - [:input.input-text - {:placeholder "Y" - :on-change (partial on-change form-ref :moveto-y) - :type "number" - :value (:moveto-y @form-ref "")}]]])) + [:div.input-element.pixels + [:input.input-text + {:placeholder "X" + :on-change (partial on-change form-ref :moveto-x) + :type "number" + :value (:moveto-x @form-ref "")}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :on-change (partial on-change form-ref :moveto-y) + :type "number" + :value (:moveto-y @form-ref "")}]]]])) (def moveto-input (mx/component @@ -256,18 +258,20 @@ (swap! form-ref assoc :moveby-y 0)) (html [:div - [:span "Move to position (px)"] + [:span "Move to position"] [:div.row-flex - [:input.input-text - {:placeholder "X" - :on-change (partial on-change form-ref :moveby-x) - :type "number" - :value (:moveby-x @form-ref "")}] - [:input.input-text - {:placeholder "Y" - :on-change (partial on-change form-ref :moveby-y) - :type "number" - :value (:moveby-y @form-ref "")}]]])) + [:div.input-element.pixels + [:input.input-text + {:placeholder "X" + :on-change (partial on-change form-ref :moveby-x) + :type "number" + :value (:moveby-x @form-ref "")}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :on-change (partial on-change form-ref :moveby-y) + :type "number" + :value (:moveby-y @form-ref "")}]]]])) (def moveby-input (mx/component @@ -282,15 +286,16 @@ (swap! form-ref assoc :opacity 100)) (html [:div - [:span "Opacity (%)"] + [:span "Opacity"] [:div.row-flex - [:input.input-text - {:placeholder "%" - :on-change (partial on-change form-ref :opacity) - :min "0" - :max "100" - :type "number" - :value (:opacity @form-ref "")}]]])) + [:div.input-element.percentail + [:input.input-text + {:placeholder "%" + :on-change (partial on-change form-ref :opacity) + :min "0" + :max "100" + :type "number" + :value (:opacity @form-ref "")}]]]])) (def opacity-input (mx/component @@ -305,11 +310,12 @@ [:div [:span "Rotate (dg)"] [:div.row-flex - [:input.input-text - {:placeholder "dg" - :on-change (partial on-change form-ref :rotation) - :type "number" - :value (:rotation @form-ref "")}]]])) + [:div.input-element.degrees + [:input.input-text + {:placeholder "dg" + :on-change (partial on-change form-ref :rotation) + :type "number" + :value (:rotation @form-ref "")}]]]])) (def rotate-input (mx/component @@ -322,18 +328,20 @@ [own form-ref] (html [:div - [:span "Resize (px)"] + [:span "Resize"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :on-change (partial on-change form-ref :resize-width) - :type "number" - :value (:resize-width @form-ref "")}] - [:input.input-text - {:placeholder "Height" - :on-change (partial on-change form-ref :resize-height) - :type "number" - :value (:resize-height @form-ref "")}]]])) + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :on-change (partial on-change form-ref :resize-width) + :type "number" + :value (:resize-width @form-ref "")}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :on-change (partial on-change form-ref :resize-height) + :type "number" + :value (:resize-height @form-ref "")}]]]])) (def resize-input (mx/component @@ -443,17 +451,19 @@ (swap! form-ref assoc :delay 0)) (html [:div - [:span "Duration | Delay (ms)"] + [:span "Duration | Delay"] [:div.row-flex - [:input.input-text - {:placeholder "Duration" - :type "number" - :on-change (partial on-change form-ref :duration) - :value (pr-str (:duration @form-ref))}] - [:input.input-text {:placeholder "Delay" + [:div.input-element.miliseconds + [:input.input-text + {:placeholder "Duration" + :type "number" + :on-change (partial on-change form-ref :duration) + :value (pr-str (:duration @form-ref))}]] + [:div.input-element.miliseconds + [:input.input-text {:placeholder "Delay" :type "number" :on-change (partial on-change form-ref :delay) - :value (pr-str (:delay @form-ref))}]]])) + :value (pr-str (:delay @form-ref))}]]]])) (def duration-input (mx/component diff --git a/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs b/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs index 7c1ab47c0..2725d006b 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs @@ -57,35 +57,39 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Size"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:width size) - :on-change (partial on-size-change :width)}] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:width size) + :on-change (partial on-size-change :width)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") :on-click on-proportion-lock-change} i/lock] - [:input.input-text - {:placeholder "Height" - :type "number" - :min "0" - :value (:height size) - :on-change (partial on-size-change :height)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :type "number" + :min "0" + :value (:height size) + :on-change (partial on-size-change :height)}]]] [:span "Position"] [:div.row-flex - [:input.input-text - {:placeholder "x" - :type "number" - :value (:x1 shape "") - :on-change (partial on-pos-change :x)}] - [:input.input-text - {:placeholder "y" - :type "number" - :value (:y1 shape "") - :on-change (partial on-pos-change :y)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "x" + :type "number" + :value (:x1 shape "") + :on-change (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "y" + :type "number" + :value (:y1 shape "") + :on-change (partial on-pos-change :y)}]]] [:span "Border radius"] [:div.row-flex @@ -111,17 +115,15 @@ :on-change on-rotation-change}]] [:div.row-flex - [:input.input-text - {:placeholder "" - :type "number" - :min 0 - :max 360 - :value (:rotation shape "0") - :on-change on-rotation-change - }] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :min 0 + :max 360 + :value (:rotation shape "0") + :on-change on-rotation-change + }]] [:input.input-text {:style {:visibility "hidden"}}] ]]]))) - - - diff --git a/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs index dd5b3f7e2..2078649fa 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs @@ -64,12 +64,13 @@ [:option {:value ":dotted"} "Dotted"] [:option {:value ":dashed"} "Dashed"] [:option {:value ":mixed"} "Mixed"]] - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:stroke-width shape "1") - :on-change on-width-change}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:stroke-width shape "1") + :on-change on-width-change}]]] [:span "Color"] [:div.row-flex.color-data diff --git a/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index dd2745348..a6e1fac1a 100644 --- a/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -153,21 +153,23 @@ :auto-focus true :on-change update-name}] [:div.project-size - [:input#project-witdh.input-text - {:placeholder "Width" - :type "number" - :min 0 - :max 4000 - :value (:width metadata) - :on-change #(update-size :width %)}] + [:div.input-element.pixels + [:input#project-witdh.input-text + {:placeholder "Width" + :type "number" + :min 0 + :max 4000 + :value (:width metadata) + :on-change #(update-size :width %)}]] [:a.toggle-layout {:on-click toggle-sizes} i/toggle] - [:input#project-height.input-text - {:placeholder "Height" - :type "number" - :min 0 - :max 4000 - :value (:height metadata) - :on-change #(update-size :height %)}]] + [:div.input-element.pixels + [:input#project-height.input-text + {:placeholder "Height" + :type "number" + :min 0 + :max 4000 + :value (:height metadata) + :on-change #(update-size :height %)}]]] [:div.input-radio.radio-primary (layout-input local page "mobile")