✨ Allow to increment number inputs by 10

frontend/src/app/main/ui/components/numeric_input.cljs

@@ -0,0 +1,48 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.numeric-input
+  (:require
+   [rumext.alpha :as mf]
+   [app.main.ui.keyboard :as kbd]
+   [app.common.data :as d]
+   [app.util.dom :as dom]
+   [app.util.object :as obj]))
+
+(mf/defc numeric-input
+  {::mf/wrap-props false
+   ::mf/forward-ref true}
+  [props ref]
+  (let [on-key-down
+        (mf/use-callback
+          (fn [event]
+            (when (and (or (kbd/up-arrow? event) (kbd/down-arrow? event))
+                       (kbd/shift? event))
+              (let [increment (if (kbd/up-arrow? event) 9 -9) ; this is added to the
+                    target (dom/get-target event)             ; default 1 or -1 step
+                    min-value (-> (dom/get-attribute target "min")
+                                  (d/parse-integer ##-Inf))
+                    max-value (-> (dom/get-attribute target "max")
+                                  (d/parse-integer ##Inf))
+                    new-value (-> target
+                                  (dom/get-value)
+                                  (d/parse-integer 0)
+                                  (+ increment)
+                                  (cljs.core/min max-value)
+                                  (cljs.core/max min-value))]
+                (dom/set-value! target new-value)))))
+
+          props (-> props
+                    (obj/set! "className" "input-text")
+                    (obj/set! "type" "number")
+                    (obj/set! "ref" ref)
+                    (obj/set! "onKeyDown" on-key-down))]
+
+    [:> :input props]))
+

frontend/src/app/main/ui/keyboard.cljs

@@ -20,3 +20,5 @@
 (def esc? (is-keycode? 27))
 (def enter? (is-keycode? 13))
 (def space? (is-keycode? 32))
+(def up-arrow? (is-keycode? 38))
+(def down-arrow? (is-keycode? 40))

frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs

@@ -23,6 +23,7 @@
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.editable-select :refer [editable-select]]
    [app.main.ui.components.dropdown :refer [dropdown]]
@@ -135,11 +136,10 @@
 
       (if (= type :square)
         [:div.input-element.pixels
-         [:input.input-text {:type "number"
+         [:> numeric-input {:min "1"
-                             :min "1"
+                            :no-validate true
-                             :no-validate true
+                            :value (:size params)
-                             :value (:size params)
+                            :on-change (handle-change-event :params :size)}]]
-                             :on-change (handle-change-event :params :size)}]]
         [:& editable-select {:value (:size params)
                              :type (when (number? (:size params)) "number" )
                              :class "input-option"

frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs

@@ -20,6 +20,7 @@
    [app.common.geom.point :as gpt]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.common :as dwc]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
    [app.common.math :as math]
    [app.util.i18n :refer [t] :as i18n]))
 
@@ -119,23 +120,20 @@
         [:div.row-flex
          [:span.element-set-subtitle (t locale "workspace.options.size")]
          [:div.input-element.width
-          [:input.input-text {:type "number"
+          [:> numeric-input {:min "0"
-                              :min "0"
+                             :no-validate true
-                              :no-validate true
+                             :placeholder "--"
-                              :placeholder "--"
+                             :on-click select-all
-                              :on-click select-all
+                             :on-change on-width-change
-                              :on-change on-width-change
+                             :value (attr->string :width values)}]]
-                              :value (attr->string :width values)}]]
-
 
          [:div.input-element.height
-          [:input.input-text {:type "number"
+          [:> numeric-input {:min "0"
-                              :min "0"
+                             :no-validate true
-                              :no-validate true
+                             :placeholder "--"
-                              :placeholder "--"
+                             :on-click select-all
-                              :on-click select-all
+                             :on-change on-height-change
-                              :on-change on-height-change
+                             :value (attr->string :height values)}]]
-                              :value (attr->string :height values)}]]
 
          [:div.lock-size {:class (classnames
                                    :selected (true? proportion-lock)
@@ -150,28 +148,25 @@
         [:div.row-flex
          [:span.element-set-subtitle (t locale "workspace.options.position")]
          [:div.input-element.Xaxis
-          [:input.input-text {:type "number"
+          [:> numeric-input {:no-validate true
-                              :no-validate true
+                             :placeholder "--"
-                              :placeholder "--"
+                             :on-click select-all
-                              :on-click select-all
+                             :on-change on-pos-x-change
-                              :on-change on-pos-x-change
+                             :value (attr->string :x values)}]]
-                              :value (attr->string :x values)}]]
          [:div.input-element.Yaxis
-          [:input.input-text {:type "number"
+          [:> numeric-input {:no-validate true
-                              :no-validate true
+                             :placeholder "--"
-                              :placeholder "--"
+                             :on-click select-all
-                              :on-click select-all
+                             :on-change on-pos-y-change
-                              :on-change on-pos-y-change
+                             :value (attr->string :y values)}]]])
-                              :value (attr->string :y values)}]]])
 
       ;; ROTATION
       (when (options :rotation)
         [:div.row-flex
          [:span.element-set-subtitle (t locale "workspace.options.rotation")]
          [:div.input-element.degrees
-          [:input.input-text
+          [:> numeric-input
-           {:type "number"
+           {:no-validate true
-            :no-validate true
             :min "0"
             :max "359"
             :placeholder "--"
@@ -192,9 +187,8 @@
         [:div.row-flex
          [:span.element-set-subtitle (t locale "workspace.options.radius")]
          [:div.input-element.pixels
-          [:input.input-text
+          [:> numeric-input
-           {:type "number"
+           {:placeholder "--"
-            :placeholder "--"
             :on-click select-all
             :on-change on-radius-change
             :value (attr->string :rx values)}]]

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -20,7 +20,8 @@
    [app.util.color :as uc]
    [app.main.refs :as refs]
    [app.main.data.modal :as modal]
-   [app.main.ui.components.color-bullet :as cb]))
+   [app.main.ui.components.color-bullet :as cb]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]))
 
 (defn color-picker-callback
   [color disable-gradient disable-opacity handle-change-color handle-open handle-close]
@@ -158,11 +159,10 @@
                    (not (:gradient color)))
           [:div.input-element
            {:class (classnames :percentail (not= (:opacity color) :multiple))}
-           [:input.input-text {:type "number"
+           [:> numeric-input {:value (-> color :opacity opacity->string)
-                               :value (-> color :opacity opacity->string)
+                              :placeholder (tr "settings.multiple")
-                               :placeholder (tr "settings.multiple")
+                              :on-click select-all
-                               :on-click select-all
+                              :on-change handle-opacity-change
-                               :on-change handle-opacity-change
+                              :min "0"
-                               :min "0"
+                              :max "100"}]])])]))
-                               :max "100"}]])])]))
 

frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs

@@ -11,6 +11,7 @@
   (:require
    [rumext.alpha :as mf]
    [app.common.data :as d]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.editable-select :refer [editable-select]]
    [app.util.dom :as dom]))
@@ -42,10 +43,9 @@
                            (or (not min) (>= value min))
                            (or (not max) (<= value max)))
                   (on-change value))))]
-        [:input.input-text
+        [:> numeric-input {:placeholder placeholder
-         {:placeholder placeholder
+                           :min (when min (str min))
-          :type "number"
+                           :max (when max (str max))
-          :on-change handle-change
+                           :on-change handle-change
-          :value (or value "")}]))
+                           :value (or value "")}]))]])
 
-    ]])

frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs

@@ -15,6 +15,7 @@
    [app.main.data.workspace.common :as dwc]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [app.util.dom :as dom]
@@ -93,22 +94,19 @@
        {:on-click #(reset! open-shadow true)}
        i/actions]
 
-      [:input.input-text {:type "number"
+      [:> numeric-input {:ref basic-offset-x-ref
-                          :ref basic-offset-x-ref
+                         :on-change (update-attr index :offset-x valid-number?)
-                          :on-change (update-attr index :offset-x valid-number?)
+                         :on-click (select-text basic-offset-x-ref)
-                          :on-click (select-text basic-offset-x-ref)
+                         :default-value (:offset-x value)}]
-                          :default-value (:offset-x value)}]
+      [:> numeric-input {:ref basic-offset-y-ref
-      [:input.input-text {:type "number"
+                         :on-change (update-attr index :offset-y valid-number?)
-                          :ref basic-offset-y-ref
+                         :on-click (select-text basic-offset-y-ref)
-                          :on-change (update-attr index :offset-y valid-number?)
+                         :default-value (:offset-y value)}]
-                          :on-click (select-text basic-offset-y-ref)
+      [:> numeric-input {:ref basic-blur-ref
-                          :default-value (:offset-y value)}]
+                         :on-click (select-text basic-blur-ref)
-      [:input.input-text {:type "number"
+                         :on-change (update-attr index :blur valid-number?)
-                          :ref basic-blur-ref
+                         :min 0
-                          :on-click (select-text basic-blur-ref)
+                         :default-value (:blur value)}]           
-                          :on-change (update-attr index :blur valid-number?)
-                          :min 0
-                          :default-value (:blur value)}]            
 
       [:div.element-set-actions
        [:div.element-set-actions-button {:on-click (toggle-visibility index)}
@@ -129,46 +127,42 @@
       
       [:div.row-grid-2
        [:div.input-element
-        [:input.input-text {:type "number"
+        [:> numeric-input {:ref adv-offset-x-ref
-                            :ref adv-offset-x-ref
+                           :no-validate true
-                            :no-validate true
+                           :placeholder "--"
-                            :placeholder "--"
+                           :on-click (select-text adv-offset-x-ref)
-                            :on-click (select-text adv-offset-x-ref)
+                           :on-change (update-attr index :offset-x valid-number? basic-offset-x-ref)
-                            :on-change (update-attr index :offset-x valid-number? basic-offset-x-ref)
+                           :default-value (:offset-x value)}]
-                            :default-value (:offset-x value)}]
         [:span.after (t locale "workspace.options.shadow-options.offsetx")]]
 
        [:div.input-element
-        [:input.input-text {:type "number"
+        [:> numeric-input {:ref adv-offset-y-ref
-                            :ref adv-offset-y-ref
+                           :no-validate true
-                            :no-validate true
+                           :placeholder "--"
-                            :placeholder "--"
+                           :on-click (select-text adv-offset-y-ref)
-                            :on-click (select-text adv-offset-y-ref)
+                           :on-change (update-attr index :offset-y valid-number? basic-offset-y-ref)
-                            :on-change (update-attr index :offset-y valid-number? basic-offset-y-ref)
+                           :default-value (:offset-y value)}]
-                            :default-value (:offset-y value)}]
         [:span.after (t locale "workspace.options.shadow-options.offsety")]]]
 
       [:div.row-grid-2
        [:div.input-element
-        [:input.input-text {:type "number"
+        [:> numeric-input {:ref adv-blur-ref
-                            :ref adv-blur-ref
+                           :no-validate true
-                            :no-validate true
+                           :placeholder "--"
-                            :placeholder "--"
+                           :on-click (select-text adv-blur-ref)
-                            :on-click (select-text adv-blur-ref)
+                           :on-change (update-attr index :blur valid-number? basic-blur-ref)
-                            :on-change (update-attr index :blur valid-number? basic-blur-ref)
+                           :min 0
-                            :min 0
+                           :default-value (:blur value)}]
-                            :default-value (:blur value)}]
         [:span.after (t locale "workspace.options.shadow-options.blur")]]
 
        [:div.input-element
-        [:input.input-text {:type "number"
+        [:> numeric-input {:ref adv-spread-ref
-                            :ref adv-spread-ref
+                           :no-validate true
-                            :no-validate true
+                           :placeholder "--"
-                            :placeholder "--"
+                           :on-click (select-text adv-spread-ref)
-                            :on-click (select-text adv-spread-ref)
+                           :on-change (update-attr index :spread valid-number?)
-                            :on-change (update-attr index :spread valid-number?)
+                           :min 0
-                            :min 0
+                           :default-value (:spread value)}]
-                            :default-value (:spread value)}]
         [:span.after (t locale "workspace.options.shadow-options.spread")]]]
 
       [:div.color-row-wrap

frontend/src/app/util/dom.cljs

@@ -75,6 +75,11 @@
   [node]
   (.-value node))
 
+(defn get-attribute
+  "Extract the value of one attribute of a dom node."
+  [node attr-name]
+  (.getAttribute node attr-name))
+
 (def get-target-val (comp get-value get-target))
 
 (defn click