mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 08:11:30 -05:00
✨ Selects all text when clicking in an input
This commit is contained in:
parent
6e696f2fc2
commit
8d789a4d7d
3 changed files with 18 additions and 4 deletions
|
@ -68,7 +68,8 @@
|
|||
on-width-change #(on-size-change % :width)
|
||||
on-height-change #(on-size-change % :height)
|
||||
on-pos-x-change #(on-position-change % :x)
|
||||
on-pos-y-change #(on-position-change % :y)]
|
||||
on-pos-y-change #(on-position-change % :y)
|
||||
select-all #(-> % (dom/get-target) (.select))]
|
||||
|
||||
[:div.element-set
|
||||
|
||||
|
@ -103,6 +104,7 @@
|
|||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:on-click select-all
|
||||
:on-change on-width-change
|
||||
:value (-> (:width shape)
|
||||
(math/precision 2)
|
||||
|
@ -112,6 +114,7 @@
|
|||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:on-click select-all
|
||||
:on-change on-height-change
|
||||
:value (-> (:height shape)
|
||||
(math/precision 2)
|
||||
|
@ -123,6 +126,7 @@
|
|||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "x"
|
||||
:type "number"
|
||||
:on-click select-all
|
||||
:on-change on-pos-x-change
|
||||
:value (-> (:x shape)
|
||||
(math/precision 2)
|
||||
|
@ -130,6 +134,7 @@
|
|||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "y"
|
||||
:type "number"
|
||||
:on-click select-all
|
||||
:on-change on-pos-y-change
|
||||
:value (-> (:y shape)
|
||||
(math/precision 2)
|
||||
|
|
|
@ -22,7 +22,6 @@
|
|||
[uxbox.util.i18n :refer [t] :as i18n]))
|
||||
|
||||
;; -- User/drawing coords
|
||||
|
||||
(mf/defc measures-menu
|
||||
[{:keys [shape options] :as props}]
|
||||
(let [options (or options #{:size :position :rotation :radius})
|
||||
|
@ -72,7 +71,8 @@
|
|||
on-width-change #(on-size-change % :width)
|
||||
on-height-change #(on-size-change % :height)
|
||||
on-pos-x-change #(on-position-change % :x)
|
||||
on-pos-y-change #(on-position-change % :y)]
|
||||
on-pos-y-change #(on-position-change % :y)
|
||||
select-all #(-> % (dom/get-target) (.select))]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
@ -90,6 +90,7 @@
|
|||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:no-validate true
|
||||
:on-click select-all
|
||||
:on-change on-width-change
|
||||
:value (str (-> (:width shape)
|
||||
(d/coalesce 0)
|
||||
|
@ -100,6 +101,7 @@
|
|||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:no-validate true
|
||||
:on-click select-all
|
||||
:on-change on-height-change
|
||||
:value (str (-> (:height shape)
|
||||
(d/coalesce 0)
|
||||
|
@ -113,12 +115,14 @@
|
|||
[:input.input-text {:placeholder "x"
|
||||
:type "number"
|
||||
:no-validate true
|
||||
:on-click select-all
|
||||
:on-change on-pos-x-change
|
||||
:value (-> shape :selrect :x (math/precision 2))}]]
|
||||
[:div.input-element.Yaxis
|
||||
[:input.input-text {:placeholder "y"
|
||||
:type "number"
|
||||
:no-validate true
|
||||
:on-click select-all
|
||||
:on-change on-pos-y-change
|
||||
:value (-> shape :selrect :y (math/precision 2))}]]])
|
||||
|
||||
|
@ -132,6 +136,7 @@
|
|||
:no-validate true
|
||||
:min "0"
|
||||
:max "359"
|
||||
:on-click select-all
|
||||
:on-change on-rotation-change
|
||||
:value (str (-> (:rotation shape)
|
||||
(d/coalesce 0)
|
||||
|
@ -154,6 +159,7 @@
|
|||
[:input.input-text
|
||||
{:placeholder "rx"
|
||||
:type "number"
|
||||
:on-click select-all
|
||||
:on-change on-radius-change
|
||||
:value (str (-> (:rx shape)
|
||||
(d/coalesce 0)
|
||||
|
|
|
@ -77,7 +77,8 @@
|
|||
dom/get-target
|
||||
dom/get-value
|
||||
string->opacity
|
||||
change-opacity))]
|
||||
change-opacity))
|
||||
select-all #(-> % (dom/get-target) (.select))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps value)
|
||||
|
@ -91,12 +92,14 @@
|
|||
[:div.color-info
|
||||
[:input {:value (-> @state :value (subs 1))
|
||||
:pattern "^[0-9a-fA-F]{0,6}$"
|
||||
:on-click select-all
|
||||
:on-change handle-input-color-change}]]
|
||||
|
||||
(when (not disable-opacity)
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text {:type "number"
|
||||
:value (-> @state :opacity opacity->string)
|
||||
:on-click select-all
|
||||
:on-change handle-opacity-change
|
||||
:min "0"
|
||||
:max "100"}]])
|
||||
|
|
Loading…
Add table
Reference in a new issue