From f8491e96311d4614e893976f11b4649677ca92f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 9 Aug 2021 18:03:13 +0200 Subject: [PATCH] :tada: Increment font size by 10 with shift+arrows --- CHANGES.md | 1 + .../main/ui/components/editable_select.cljs | 44 +++++++++++++++++-- .../sidebar/options/menus/frame_grid.cljs | 1 + .../sidebar/options/menus/typography.cljs | 2 + .../sidebar/options/rows/input_row.cljs | 2 + 5 files changed, 46 insertions(+), 4 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 796ae9965..666c97f4b 100644 --- a/CHANGES.md +++ b/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). diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index 127e0e403..44c47cda4 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 99f43711e..8aae41344 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/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}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 6af685f84..b5de4b562 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/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}]) 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 c44d93ad2..9ab071389 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 @@ -28,6 +28,8 @@ :class "input-option" :options options :type (when (number? value) "number") + :min min + :max max :placeholder placeholder :on-change on-change}]