🎉 Increment font size by 10 with shift+arrows

CHANGES.md

@@ -7,6 +7,7 @@
 - Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428).
 - Auto placement of duplicated objects [Taiga #1386](https://tree.taiga.io/project/penpot/us/1386).
 - Go to a undo step clicking on a history element of the list [Taiga #1374](https://tree.taiga.io/project/penpot/us/1374).
+- Increment font size by 10 with shift+arrows [1047](https://github.com/penpot/penpot/issues/1047).
 - New shortcut to detach components Ctrl+Shift+K [Taiga #1799](https://tree.taiga.io/project/penpot/us/1799).
 - Set email inputs to type "email", to aid keyboard entry [Taiga #1921](https://tree.taiga.io/project/penpot/issue/1921).
 - Use space + mouse drag to pan, instead of only space [Taiga #1800](https://tree.taiga.io/project/penpot/us/1800).

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

@@ -7,14 +7,16 @@
 (ns app.main.ui.components.editable-select
   (:require
    [app.common.data :as d]
+   [app.common.math :as math]
    [app.common.uuid :as uuid]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
+   [app.util.keyboard :as kbd]
    [app.util.timers :as timers]
    [rumext.alpha :as mf]))
 
-(mf/defc editable-select [{:keys [value type options class on-change placeholder on-blur]}]
+(mf/defc editable-select [{:keys [value type options class on-change placeholder on-blur] :as params}]
   (let [state (mf/use-state {:id (uuid/next)
                              :is-open? false
                              :current-value value
@@ -22,6 +24,13 @@
                              :left nil
                              :bottom nil})
 
+        min-val (get params :min)
+        max-val (get params :max)
+
+        num? (fn [val] (and (number? val)
+                            (not (math/nan? val))
+                            (math/finite? val)))
+
         emit-blur? (mf/use-ref nil)
 
         open-dropdown #(swap! state assoc :is-open? true)
@@ -38,11 +47,14 @@
 
         value->label (fn [value] (get labels-map value value))
 
+        set-value (fn [value]
+                    (swap! state assoc :current-value value)
+                    (when on-change (on-change value)))
+
         handle-change-input (fn [event]
                               (let [value (-> event dom/get-target dom/get-value)
-                                    value (or (d/parse-integer value) value)]
-                                (swap! state assoc :current-value value)
-                                (when on-change (on-change value))))
+                                    value (or (d/parse-double value) value)]
+                                (set-value value)))
 
         on-node-load
         (fn [node]
@@ -61,6 +73,29 @@
                          :top top
                          :bottom bottom))))))
 
+        handle-key-down
+        (mf/use-callback
+         (fn [event]
+           (when (= type "number")
+             (let [up?    (kbd/up-arrow? event)
+                   down?  (kbd/down-arrow? event)]
+               (when (or up? down?)
+                 (dom/prevent-default event)
+                 (let [value (-> event dom/get-target dom/get-value)
+                       value (or (d/parse-double value) value)
+
+                       increment (if (kbd/shift? event)
+                                   (if up? 10 -10)
+                                   (if up? 1 -1))
+
+                       new-value (+ value increment)
+                       new-value (cond
+                                   (and (num? min-val) (< new-value min-val)) min-val
+                                   (and (num? max-val) (> new-value max-val)) max-val
+                                   :else new-value)]
+
+                     (set-value new-value)))))))
+
         handle-focus
         (mf/use-callback
          (fn []
@@ -89,6 +124,7 @@
                            :ref on-node-load}
      [:input.input-text {:value (or (-> @state :current-value value->label) "")
                          :on-change handle-change-input
+                         :on-key-down handle-key-down
                          :on-focus handle-focus
                          :on-blur handle-blur
                          :placeholder placeholder

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

@@ -138,6 +138,7 @@
         [:& editable-select {:value (:size params)
                              :type (when (number? (:size params)) "number" )
                              :class "input-option"
+                             :min 1
                              :options size-options
                              :placeholder "Auto"
                              :on-change handle-change-size}])

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -322,6 +322,8 @@
           :options size-options
           :type "number"
           :placeholder "--"
+          :min 3
+          :max 1000
           :on-change on-font-size-change
           :on-blur on-blur}])
 

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

@@ -28,6 +28,8 @@
                            :class "input-option"
                            :options options
                            :type (when (number? value) "number")
+                           :min min
+                           :max max
                            :placeholder placeholder
                            :on-change on-change}]