3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 18:21:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Auto select input when editing layers and pages name

Browse source
This commit is contained in:
Andrés Moya 2020-06-15 11:22:28 +02:00 • committed by Andrey Antukh
parent 39364853b8
commit beb6048bf9
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -51,6 +51,7 @@
(mf/defc layer-name (mf/defc layer-name
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
(let [local (mf/use-state {}) (let [local (mf/use-state {})
edit-input-ref (mf/use-ref)
on-blur (fn [event] on-blur (fn [event]
(let [target (dom/event->target event) (let [target (dom/event->target event)
parent (.-parentNode target) parent (.-parentNode target)
@ -68,9 +69,18 @@
parent (.-parentNode parent)] parent (.-parentNode parent)]
(set! (.-draggable parent) false)) (set! (.-draggable parent) false))
(swap! local assoc :edition true))] (swap! local assoc :edition true))]
(mf/use-effect
(mf/deps (:edition @local))
#(when (:edition @local)
(let [edit-input (mf/ref-val edit-input-ref)]
(dom/select-text! edit-input))
nil))
(if (:edition @local) (if (:edition @local)
[:input.element-name [:input.element-name
{:type "text" {:type "text"
:ref edit-input-ref
:on-blur on-blur :on-blur on-blur
:on-key-down on-key-down :on-key-down on-key-down
:auto-focus true :auto-focus true

9
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -28,6 +28,7 @@
(mf/defc page-item (mf/defc page-item
[{:keys [page index deletable? selected?] :as props}] [{:keys [page index deletable? selected?] :as props}]
(let [local (mf/use-state {}) (let [local (mf/use-state {})
edit-input-ref (mf/use-ref)
on-double-click on-double-click
(fn [event] (fn [event]
@ -70,6 +71,13 @@
:index index :index index
:name (:name page)})] :name (:name page)})]
(mf/use-effect
(mf/deps (:edition @local))
#(when (:edition @local)
(let [edit-input (mf/ref-val edit-input-ref)]
(dom/select-text! edit-input))
nil))
[:li {:class (dom/classnames [:li {:class (dom/classnames
:selected selected? :selected selected?
:dnd-over-top (= (:over dprops) :top) :dnd-over-top (= (:over dprops) :top)
@ -83,6 +91,7 @@
(if (:edition @local) (if (:edition @local)
[:* [:*
[:input.element-name {:type "text" [:input.element-name {:type "text"
:ref edit-input-ref
:on-blur on-blur :on-blur on-blur
:on-key-down on-key-down :on-key-down on-key-down
:auto-focus true :auto-focus true