From 64a53a68c1555a091a1180aa50586b1368749ab4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Fri, 27 Nov 2020 12:10:38 +0100 Subject: [PATCH] :sparkles: Allow to increment number inputs by 10 --- .../app/main/ui/components/numeric_input.cljs | 48 ++++++++++ frontend/src/app/main/ui/keyboard.cljs | 2 + .../workspace/sidebar/options/frame_grid.cljs | 10 +-- .../workspace/sidebar/options/measures.cljs | 60 ++++++------- .../sidebar/options/rows/color_row.cljs | 16 ++-- .../sidebar/options/rows/input_row.cljs | 14 +-- .../ui/workspace/sidebar/options/shadow.cljs | 88 +++++++++---------- frontend/src/app/util/dom.cljs | 5 ++ 8 files changed, 143 insertions(+), 100 deletions(-) create mode 100644 frontend/src/app/main/ui/components/numeric_input.cljs diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs new file mode 100644 index 000000000..d2c005729 --- /dev/null +++ b/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])) + diff --git a/frontend/src/app/main/ui/keyboard.cljs b/frontend/src/app/main/ui/keyboard.cljs index 9bc6d8499..ecc03d63b 100644 --- a/frontend/src/app/main/ui/keyboard.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs index d1aba7a4f..ed4c96295 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/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" - :min "1" - :no-validate true - :value (:size params) - :on-change (handle-change-event :params :size)}]] + [:> numeric-input {:min "1" + :no-validate true + :value (:size params) + :on-change (handle-change-event :params :size)}]] [:& editable-select {:value (:size params) :type (when (number? (:size params)) "number" ) :class "input-option" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs index 6d67412d8..4f819819b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs +++ b/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" - :min "0" - :no-validate true - :placeholder "--" - :on-click select-all - :on-change on-width-change - :value (attr->string :width values)}]] - + [:> numeric-input {:min "0" + :no-validate true + :placeholder "--" + :on-click select-all + :on-change on-width-change + :value (attr->string :width values)}]] [:div.input-element.height - [:input.input-text {:type "number" - :min "0" - :no-validate true - :placeholder "--" - :on-click select-all - :on-change on-height-change - :value (attr->string :height values)}]] + [:> numeric-input {:min "0" + :no-validate true + :placeholder "--" + :on-click select-all + :on-change on-height-change + :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" - :no-validate true - :placeholder "--" - :on-click select-all - :on-change on-pos-x-change - :value (attr->string :x values)}]] + [:> numeric-input {:no-validate true + :placeholder "--" + :on-click select-all + :on-change on-pos-x-change + :value (attr->string :x values)}]] [:div.input-element.Yaxis - [:input.input-text {:type "number" - :no-validate true - :placeholder "--" - :on-click select-all - :on-change on-pos-y-change - :value (attr->string :y values)}]]]) + [:> numeric-input {:no-validate true + :placeholder "--" + :on-click select-all + :on-change on-pos-y-change + :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 - {:type "number" - :no-validate true + [:> numeric-input + {: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 - {:type "number" - :placeholder "--" + [:> numeric-input + {:placeholder "--" :on-click select-all :on-change on-radius-change :value (attr->string :rx values)}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 2a6437fb5..45bb7e84d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/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" - :value (-> color :opacity opacity->string) - :placeholder (tr "settings.multiple") - :on-click select-all - :on-change handle-opacity-change - :min "0" - :max "100"}]])])])) + [:> numeric-input {:value (-> color :opacity opacity->string) + :placeholder (tr "settings.multiple") + :on-click select-all + :on-change handle-opacity-change + :min "0" + :max "100"}]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs index 4c7933334..a04be184d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs +++ b/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 - {:placeholder placeholder - :type "number" - :on-change handle-change - :value (or value "")}])) - - ]]) + [:> numeric-input {:placeholder placeholder + :min (when min (str min)) + :max (when max (str max)) + :on-change handle-change + :value (or value "")}]))]]) + diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs index 54756d4da..0db47133a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs +++ b/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] @@ -92,23 +93,20 @@ [:div.element-set-actions-button {:on-click #(reset! open-shadow true)} i/actions] - - [:input.input-text {:type "number" - :ref basic-offset-x-ref - :on-change (update-attr index :offset-x valid-number?) - :on-click (select-text basic-offset-x-ref) - :default-value (:offset-x value)}] - [:input.input-text {:type "number" - :ref basic-offset-y-ref - :on-change (update-attr index :offset-y valid-number?) - :on-click (select-text basic-offset-y-ref) - :default-value (:offset-y value)}] - [:input.input-text {:type "number" - :ref basic-blur-ref - :on-click (select-text basic-blur-ref) - :on-change (update-attr index :blur valid-number?) - :min 0 - :default-value (:blur value)}] + + [:> numeric-input {:ref basic-offset-x-ref + :on-change (update-attr index :offset-x valid-number?) + :on-click (select-text basic-offset-x-ref) + :default-value (:offset-x value)}] + [:> numeric-input {:ref basic-offset-y-ref + :on-change (update-attr index :offset-y valid-number?) + :on-click (select-text basic-offset-y-ref) + :default-value (:offset-y value)}] + [:> numeric-input {:ref basic-blur-ref + :on-click (select-text basic-blur-ref) + :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" - :ref adv-offset-x-ref - :no-validate true - :placeholder "--" - :on-click (select-text adv-offset-x-ref) - :on-change (update-attr index :offset-x valid-number? basic-offset-x-ref) - :default-value (:offset-x value)}] + [:> numeric-input {:ref adv-offset-x-ref + :no-validate true + :placeholder "--" + :on-click (select-text adv-offset-x-ref) + :on-change (update-attr index :offset-x valid-number? basic-offset-x-ref) + :default-value (:offset-x value)}] [:span.after (t locale "workspace.options.shadow-options.offsetx")]] [:div.input-element - [:input.input-text {:type "number" - :ref adv-offset-y-ref - :no-validate true - :placeholder "--" - :on-click (select-text adv-offset-y-ref) - :on-change (update-attr index :offset-y valid-number? basic-offset-y-ref) - :default-value (:offset-y value)}] + [:> numeric-input {:ref adv-offset-y-ref + :no-validate true + :placeholder "--" + :on-click (select-text adv-offset-y-ref) + :on-change (update-attr index :offset-y valid-number? basic-offset-y-ref) + :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" - :ref adv-blur-ref - :no-validate true - :placeholder "--" - :on-click (select-text adv-blur-ref) - :on-change (update-attr index :blur valid-number? basic-blur-ref) - :min 0 - :default-value (:blur value)}] + [:> numeric-input {:ref adv-blur-ref + :no-validate true + :placeholder "--" + :on-click (select-text adv-blur-ref) + :on-change (update-attr index :blur valid-number? basic-blur-ref) + :min 0 + :default-value (:blur value)}] [:span.after (t locale "workspace.options.shadow-options.blur")]] [:div.input-element - [:input.input-text {:type "number" - :ref adv-spread-ref - :no-validate true - :placeholder "--" - :on-click (select-text adv-spread-ref) - :on-change (update-attr index :spread valid-number?) - :min 0 - :default-value (:spread value)}] + [:> numeric-input {:ref adv-spread-ref + :no-validate true + :placeholder "--" + :on-click (select-text adv-spread-ref) + :on-change (update-attr index :spread valid-number?) + :min 0 + :default-value (:spread value)}] [:span.after (t locale "workspace.options.shadow-options.spread")]]] [:div.color-row-wrap diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 11057bc29..81cc977a1 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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