github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-07 13:29:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6912 from penpot/andy-highlight-font-selector

Browse Source 
✨ Highlight first font in font selector search, apply on Enter/click
This commit is contained in:
Andrey Antukh 2025-07-21 10:33:53 +02:00 committed by GitHub
commit 75a50ac1ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -25,6 +25,7 @@
- Hide bounding box while editing visual effects [Taiga #11576](https://tree.taiga.io/project/penpot/issue/11576) - Hide bounding box while editing visual effects [Taiga #11576](https://tree.taiga.io/project/penpot/issue/11576)
- Improved text layer resizing: Allow double-click on text bounding box to set auto-width/auto-height [Taiga #11577](https://tree.taiga.io/project/penpot/issue/11577) - Improved text layer resizing: Allow double-click on text bounding box to set auto-width/auto-height [Taiga #11577](https://tree.taiga.io/project/penpot/issue/11577)
- Improve text layer auto-resize: auto-width switches to auto-height on horizontal resize, and only switches to fixed on vertical resize [Taiga #11578](https://tree.taiga.io/project/penpot/issue/11578) - Improve text layer auto-resize: auto-width switches to auto-height on horizontal resize, and only switches to fixed on vertical resize [Taiga #11578](https://tree.taiga.io/project/penpot/issue/11578)
- Highlight first font in font selector search. Apply only on Enter or click. [Taiga #11579](https://tree.taiga.io/project/penpot/issue/11579)
### :bug: Bugs fixed ### :bug: Bugs fixed

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View File

@ -112,7 +112,6 @@
recent-fonts (mf/with-memo [state recent-fonts] recent-fonts (mf/with-memo [state recent-fonts]
(filter-fonts state recent-fonts)) (filter-fonts state recent-fonts))
full-size? (boolean (and full-size show-recent)) full-size? (boolean (and full-size show-recent))
select-next select-next
@ -131,6 +130,13 @@
(dom/prevent-default event) (dom/prevent-default event)
(swap! selected get-prev-font fonts))) (swap! selected get-prev-font fonts)))
on-select-and-close
(mf/use-fn
(mf/deps on-select on-close)
(fn [font]
(on-select font)
(on-close)))
on-key-down on-key-down
(mf/use-fn (mf/use-fn
(mf/deps fonts) (mf/deps fonts)
@ -139,7 +145,7 @@
(kbd/up-arrow? event) (select-prev event) (kbd/up-arrow? event) (select-prev event)
(kbd/down-arrow? event) (select-next event) (kbd/down-arrow? event) (select-next event)
(kbd/esc? event) (on-close) (kbd/esc? event) (on-close)
(kbd/enter? event) (on-close) (kbd/enter? event) (do (on-select-and-close @selected))
:else (dom/focus! (mf/ref-val input))))) :else (dom/focus! (mf/ref-val input)))))
on-filter-change on-filter-change
@ -163,9 +169,6 @@
(when-let [index (:index @selected)] (when-let [index (:index @selected)]
(.scrollToRow ^js inst index)))) (.scrollToRow ^js inst index))))
(mf/with-effect [@selected]
(on-select @selected))
(mf/with-effect [] (mf/with-effect []
(st/emit! (dsc/push-shortcuts :typography {})) (st/emit! (dsc/push-shortcuts :typography {}))
(fn [] (fn []
@ -178,6 +181,10 @@
#(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})] #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
(.scrollToPosition ^js inst offset))))) (.scrollToPosition ^js inst offset)))))
(mf/with-effect [(:term state) fonts]
(when (and (seq fonts) (not= (:id @selected) (:id (first fonts))))
(reset! selected (first fonts))))
[:div {:class (stl/css :font-selector)} [:div {:class (stl/css :font-selector)}
[:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)} [:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)}
[:div {:class (stl/css :header)} [:div {:class (stl/css :header)}