From e62567d09e0132c39e5cfb4042df001773d13b08 Mon Sep 17 00:00:00 2001 From: Andres Gonzalez Date: Fri, 18 Jul 2025 09:22:32 +0200 Subject: [PATCH] :sparkles: Highlight first font in font selector search, apply on Enter/click [Taiga #11579](https://tree.taiga.io/project/penpot/issue/11579) :sparkles: Highlight first font in font selector search, apply on Enter/click --- CHANGES.md | 1 + .../sidebar/options/menus/typography.cljs | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 1419e860e8..62d73c4c80 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -25,6 +25,7 @@ - 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) - 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 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 6f4db43e23..92fab80bad 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 @@ -112,7 +112,6 @@ recent-fonts (mf/with-memo [state recent-fonts] (filter-fonts state recent-fonts)) - full-size? (boolean (and full-size show-recent)) select-next @@ -131,6 +130,13 @@ (dom/prevent-default event) (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 (mf/use-fn (mf/deps fonts) @@ -139,7 +145,7 @@ (kbd/up-arrow? event) (select-prev event) (kbd/down-arrow? event) (select-next event) (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))))) on-filter-change @@ -163,9 +169,6 @@ (when-let [index (:index @selected)] (.scrollToRow ^js inst index)))) - (mf/with-effect [@selected] - (on-select @selected)) - (mf/with-effect [] (st/emit! (dsc/push-shortcuts :typography {})) (fn [] @@ -178,6 +181,10 @@ #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})] (.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-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)} [:div {:class (stl/css :header)}