Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 08:09:14 -05:00
Code Issues Activity

🐛 Fix line-height/letter-spacing inputs behaviour

Browse source
This commit is contained in:
alonso.torres 2022-01-03 13:43:02 +01:00
parent 477f553675
commit 6354883a6f
4 changed files with 54 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -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!)

3
common/src/app/common/path/bool.cljc
View file

@ -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]

54
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -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"])

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

@ -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)