add input measures

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,

resources/styles/main/partials/lightbox.scss

@@ -55,7 +55,8 @@
       width: 100%;
 
       .input-text {
-        width: 35%;
+        margin-right: $small;
+      //   width: 35%;
        }
 
       .toggle-layout {

src/uxbox/main/ui/workspace/settings.cljs

@@ -63,22 +63,24 @@
        [:form {:on-submit on-submit}
         [:span.lightbox-label "Grid size"]
         [:div.project-size
+         [:div.input-element.pixels
           [:input#grid-x.input-text
-          {:placeholder "X px"
+           {: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}]
+            :max 100}]]
+         [:div.input-element.pixels
           [:input#grid-y.input-text
-          {:placeholder "Y px"
+           {: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}]]
+            :max 100}]]]
         [:span.lightbox-label "Grid color"]
         (uucp/colorpicker
          :value (:grid/color form)

src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs

@@ -53,35 +53,39 @@
       ;; SLIDEBAR FOR ROTATION AND OPACITY
       [:span "Size"]
       [:div.row-flex
+       [:div.input-element.pixels
         [:input.input-text
          {:placeholder "Width"
           :type "number"
           :min "0"
           :value (:rx shape)
-         :on-change (partial on-size-change :rx)}]
+          :on-change (partial on-size-change :rx)}]]
        [:div.lock-size
         {:class (when (:proportion-lock shape) "selected")
          :on-click on-proportion-lock-change}
         i/lock]
+       [:div.input-element.pixels
         [:input.input-text
          {:placeholder "Height"
           :type "number"
           :min "0"
           :value (:ry shape)
-         :on-change (partial on-size-change :ry)}]]
+          :on-change (partial on-size-change :ry)}]]]
 
       [:span "Position"]
       [:div.row-flex
+       [:div.input-element.pixels
         [:input.input-text
          {:placeholder "cx"
           :type "number"
           :value (:cx shape "")
-         :on-change (partial on-pos-change :x)}]
+          :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)}]]
+          :on-change (partial on-pos-change :y)}]]]
 
       [:span "Rotation"]
       [:div.row-flex
@@ -93,6 +97,7 @@
          :on-change on-rotation-change}]]
 
       [:div.row-flex
+       [:div.input-element.degrees
         [:input.input-text
          {:placeholder ""
           :type "number"
@@ -100,6 +105,6 @@
           :max 360
           :value (:rotation shape "0")
           :on-change on-rotation-change
-         }]
+          }]]
        [:input.input-text
         {:style {:visibility "hidden"}}]]]]))

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

src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs

@@ -50,32 +50,36 @@
          ;; SLIDEBAR FOR ROTATION AND OPACITY
          [:span "Size"]
          [:div.row-flex
+          [:div.input-element.pixels
            [:input.input-text
             {:placeholder "Width"
              :type "number"
              :min "0"
              :value (:width size)
-            :on-change (partial on-size-change :width)}]
+             :on-change (partial on-size-change :width)}]]
           [:div.lock-size i/lock]
+          [:div.input-element.pixels
            [:input.input-text
             {:placeholder "Height"
              :type "number"
              :min "0"
              :value (:height size)
-            :on-change (partial on-size-change :height)}]]
+             :on-change (partial on-size-change :height)}]]]
 
          [:span "Position"]
          [:div.row-flex
+          [:div.input-element.pixels
            [:input.input-text
-           {:placeholder "x"
+            {:placeholder "X"
              :type "number"
              :value (:x1 shape "")
-            :on-change (partial on-pos-change :x)}]
+             :on-change (partial on-pos-change :x)}]]
+          [:div.input-element.pixels
            [:input.input-text
-           {:placeholder "y"
+            {:placeholder "Y"
              :type "number"
              :value (:y1 shape "")
-            :on-change (partial on-pos-change :y)}]]
+             :on-change (partial on-pos-change :y)}]]]
 
          [:span "Rotation"]
          [:div.row-flex
@@ -87,6 +91,7 @@
             :on-change on-rotation-change}]]
 
          [:div.row-flex
+          [:div.input-element.degrees
            [:input.input-text
             {:placeholder ""
              :type "number"
@@ -94,7 +99,7 @@
              :max 360
              :value (:rotation shape "0")
              :on-change on-rotation-change
-            }]
+            }]]
           [:input.input-text
            {:style {:visibility "hidden"}}]
           ]]]))))

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
+     [: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 "")}]
+        :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 "")}]]]))
+        :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
+     [: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 "")}]
+        :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 "")}]]]))
+        :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
+     [: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 "")}]]]))
+        :value (:opacity @form-ref "")}]]]]))
 
 (def opacity-input
   (mx/component
@@ -305,11 +310,12 @@
    [:div
     [:span "Rotate (dg)"]
     [:div.row-flex
+     [:div.input-element.degrees
       [:input.input-text
        {:placeholder "dg"
         :on-change (partial on-change form-ref :rotation)
         :type "number"
-       :value (:rotation @form-ref "")}]]]))
+        :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
+     [: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 "")}]
+        :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 "")}]]]))
+        :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
+     [: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))}]
+        :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

src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs

@@ -57,35 +57,39 @@
         ;; SLIDEBAR FOR ROTATION AND OPACITY
         [:span "Size"]
         [:div.row-flex
+         [:div.input-element.pixels
           [:input.input-text
            {:placeholder "Width"
             :type "number"
             :min "0"
             :value (:width size)
-           :on-change (partial on-size-change :width)}]
+            :on-change (partial on-size-change :width)}]]
          [:div.lock-size
           {:class (when (:proportion-lock shape) "selected")
            :on-click on-proportion-lock-change}
           i/lock]
+         [:div.input-element.pixels
           [:input.input-text
            {:placeholder "Height"
             :type "number"
             :min "0"
             :value (:height size)
-           :on-change (partial on-size-change :height)}]]
+            :on-change (partial on-size-change :height)}]]]
 
         [:span "Position"]
         [:div.row-flex
+         [:div.input-element.pixels
           [:input.input-text
            {:placeholder "x"
             :type "number"
             :value (:x1 shape "")
-           :on-change (partial on-pos-change :x)}]
+            :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)}]]
+            :on-change (partial on-pos-change :y)}]]]
 
         [:span "Border radius"]
         [:div.row-flex
@@ -111,6 +115,7 @@
            :on-change on-rotation-change}]]
 
         [:div.row-flex
+         [:div.input-element.degrees
           [:input.input-text
            {:placeholder ""
             :type "number"
@@ -118,10 +123,7 @@
             :max 360
             :value (:rotation shape "0")
             :on-change on-rotation-change
-           }]
+            }]]
          [:input.input-text
           {:style {:visibility "hidden"}}]
          ]]])))
-
-
-

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"]]
+          [:div.input-element.pixels
            [:input.input-text
             {:placeholder "Width"
              :type "number"
              :min "0"
              :value (:stroke-width shape "1")
-            :on-change on-width-change}]]
+             :on-change on-width-change}]]]
 
          [:span "Color"]
          [:div.row-flex.color-data

src/uxbox/main/ui/workspace/sidebar/sitemap.cljs

@@ -153,21 +153,23 @@
           :auto-focus true
           :on-change update-name}]
         [:div.project-size
+         [: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 %)}]
+            :on-change #(update-size :width %)}]]
          [:a.toggle-layout {:on-click toggle-sizes} i/toggle]
+         [: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 %)}]]
+            :on-change #(update-size :height %)}]]]
 
         [:div.input-radio.radio-primary
          (layout-input local page "mobile")