diff --git a/CHANGES.md b/CHANGES.md index 9aeeca913..571f08c55 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -33,6 +33,7 @@ - Fix problem exporting shapes from handoff mode [Taiga #2386](https://tree.taiga.io/project/penpot/issue/2386) - Fix lock/hide elements in context menu when multiples shapes selected [Taiga #2340](https://tree.taiga.io/project/penpot/issue/2340) - Fix problem with booleans [Taiga #2356](https://tree.taiga.io/project/penpot/issue/2356) +- Fix line-height/letter-spacing inputs behaviour [Taiga #2331](https://tree.taiga.io/project/penpot/issue/2331) ### :arrow_up: Deps updates ### :heart: Community contributions by (Thank you!) diff --git a/common/src/app/common/path/bool.cljc b/common/src/app/common/path/bool.cljc index cda5e77dc..8b6a66cf5 100644 --- a/common/src/app/common/path/bool.cljc +++ b/common/src/app/common/path/bool.cljc @@ -284,8 +284,7 @@ (defn create-exclusion [content-a content-b] ;; Pick all segments - (let [] - (d/concat-vec content-a content-b))) + (d/concat-vec content-a content-b)) (defn content-bool-pair [bool-type content-a content-b] diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index 5f5158aaf..04483405f 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -20,17 +20,26 @@ (not (math/nan? val)) (math/finite? val))) +(defn fixed [value precision] + (try + (.toFixed value precision) + (catch :default _ + (str value)))) + (mf/defc numeric-input {::mf/wrap-props false ::mf/forward-ref true} [props external-ref] - (let [value-str (obj/get props "value") - min-val-str (obj/get props "min") - max-val-str (obj/get props "max") - wrap-value? (obj/get props "data-wrap") - on-change (obj/get props "onChange") - title (obj/get props "title") - default-val (obj/get props "default" 0) + (let [value-str (obj/get props "value") + min-val-str (obj/get props "min") + max-val-str (obj/get props "max") + step-val-str (obj/get props "step") + wrap-value? (obj/get props "data-wrap") + on-change (obj/get props "onChange") + on-blur (obj/get props "onBlur") + title (obj/get props "title") + default-val (obj/get props "default" 0) + precision (obj/get props "precision") ;; We need a ref pointing to the input dom element, but the user ;; of this component may provide one (that is forwarded here). @@ -56,6 +65,15 @@ (string? max-val-str) (d/parse-integer max-val-str)) + step-val (cond + (number? step-val-str) + step-val-str + + (string? step-val-str) + (d/parse-integer step-val-str) + + :else 1) + parse-value (mf/use-callback (mf/deps ref min-val max-val value) @@ -65,7 +83,10 @@ (sm/expr-eval value))] (when (num? new-value) (-> new-value - (math/round) + (cond-> (number? precision) + (math/precision precision)) + (cond-> (nil? precision) + (math/round)) (cljs.core/max us/min-safe-int) (cljs.core/min us/max-safe-int) (cond-> @@ -80,7 +101,9 @@ (mf/deps ref) (fn [new-value] (let [input-node (mf/ref-val ref)] - (dom/set-value! input-node (str new-value))))) + (dom/set-value! input-node (if (some? precision) + (fixed new-value precision) + (str new-value)))))) apply-value (mf/use-callback @@ -97,18 +120,18 @@ (let [current-value (parse-value)] (when current-value (let [increment (if (kbd/shift? event) - (if up? 10 -10) - (if up? 1 -1)) + (if up? (* step-val 10) (* step-val -10)) + (if up? step-val (- step-val))) new-value (+ current-value increment) new-value (cond (and wrap-value? (num? max-val) (num? min-val) (> new-value max-val) up?) - (-> new-value (- max-val) (+ min-val) (- 1)) + (-> new-value (- max-val) (+ min-val) (- step-val)) (and wrap-value? (num? min-val) (num? max-val) (< new-value min-val) down?) - (-> new-value (- min-val) (+ max-val) (+ 1)) + (-> new-value (- min-val) (+ max-val) (+ step-val)) (and (num? min-val) (< new-value min-val)) min-val @@ -144,12 +167,13 @@ handle-blur (mf/use-callback - (mf/deps parse-value apply-value update-input) + (mf/deps parse-value apply-value update-input on-blur) (fn [_] (let [new-value (or (parse-value) default-val)] (if new-value (apply-value new-value) - (update-input new-value))))) + (update-input new-value))) + (when on-blur (on-blur)))) props (-> props (obj/without ["value" "onChange"]) 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 39551e41d..d5bf868b5 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 @@ -15,6 +15,7 @@ [app.main.fonts :as fonts] [app.main.store :as st] [app.main.ui.components.editable-select :refer [editable-select]] + [app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.util.dom :as dom] @@ -350,20 +351,19 @@ letter-spacing (or letter-spacing "0") handle-change - (fn [event attr] - (let [new-spacing (dom/get-target-val event)] - (on-change {attr new-spacing})))] + (fn [value attr] + (on-change {attr (str value)}))] [:div.spacing-options [:div.input-icon [:span.icon-before.tooltip.tooltip-bottom {:alt (tr "workspace.options.text-options.line-height")} i/line-height] - [:input.input-text - {:type "number" - :step "0.1" - :min "-200" - :max "200" + [:> numeric-input + {:min -200 + :max 200 + :step 0.1 + :precision 2 :value (attr->string line-height) :placeholder (tr "settings.multiple") :on-change #(handle-change % :line-height) @@ -373,11 +373,11 @@ [:span.icon-before.tooltip.tooltip-bottom {:alt (tr "workspace.options.text-options.letter-spacing")} i/letter-spacing] - [:input.input-text - {:type "number" - :step "0.1" - :min "-200" - :max "200" + [:> numeric-input + {:min -200 + :max 200 + :step 0.1 + :precision 2 :value (attr->string letter-spacing) :placeholder (tr "settings.multiple") :on-change #(handle-change % :letter-spacing)