Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ctrl+f shortcut to focus search field #1574

Merged
merged 3 commits into from
Jan 17, 2024
Merged

feat: ctrl+f shortcut to focus search field #1574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1000d40
feat: ctrl+f shortcut to focus search field
jssotomdz Jan 16, 2024
441c09f
tests: add FocusNode to SearchField constructors in tests
jssotomdz Jan 17, 2024
d796f9a
fix: reenable autocomplete suggestions
jssotomdz Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 41 additions & 36 deletions packages/app_center/lib/src/search/search_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,14 @@ class SearchField extends ConsumerStatefulWidget {
required this.onSearch,
required this.onSnapSelected,
required this.onDebSelected,
required this.searchFocus,
super.key,
});

final ValueChanged<String> onSearch;
final ValueChanged<String> onSnapSelected;
final ValueChanged<String> onDebSelected;
final FocusNode searchFocus;

@override
ConsumerState<SearchField> createState() => _SearchFieldState();
Expand Down Expand Up @@ -152,42 +154,45 @@ class _SearchFieldState extends ConsumerState<SearchField> {
AutoCompleteSearchOption(query: final query) => widget.onSearch(query),
},
fieldViewBuilder: (context, controller, node, onFieldSubmitted) {
return Consumer(builder: (context, ref, child) {
ref.listen(queryProvider, (prev, next) {
if (!node.hasPrimaryFocus) controller.text = next ?? '';
});
const iconConstraints = BoxConstraints(
minWidth: 32,
minHeight: 32,
maxWidth: 32,
maxHeight: 32,
);
return TextField(
focusNode: node,
controller: controller,
onChanged: (_) => _optionsAvailable = false,
onSubmitted: (query) =>
_optionsAvailable ? onFieldSubmitted() : widget.onSearch(query),
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
fillColor: Theme.of(context).dividerColor,
prefixIcon: const Icon(YaruIcons.search, size: 16),
prefixIconConstraints: iconConstraints,
hintText: l10n.searchFieldSearchHint,
suffixIcon: AnimatedBuilder(
animation: controller,
builder: (context, child) {
return YaruIconButton(
icon: const Icon(YaruIcons.edit_clear, size: 16),
onPressed:
controller.text.isEmpty ? null : controller.clear,
);
},
),
suffixIconConstraints: iconConstraints,
),
);
});
return Focus(
focusNode: widget.searchFocus,
child: Consumer(builder: (context, ref, child) {
ref.listen(queryProvider, (prev, next) {
if (!node.hasPrimaryFocus) controller.text = next ?? '';
});
const iconConstraints = BoxConstraints(
minWidth: 32,
minHeight: 32,
maxWidth: 32,
maxHeight: 32,
);
return TextField(
focusNode: node,
controller: controller,
onChanged: (_) => _optionsAvailable = false,
onSubmitted: (query) => _optionsAvailable
? onFieldSubmitted()
: widget.onSearch(query),
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
fillColor: Theme.of(context).dividerColor,
prefixIcon: const Icon(YaruIcons.search, size: 16),
prefixIconConstraints: iconConstraints,
hintText: l10n.searchFieldSearchHint,
suffixIcon: AnimatedBuilder(
animation: controller,
builder: (context, child) {
return YaruIconButton(
icon: const Icon(YaruIcons.edit_clear, size: 16),
onPressed:
controller.text.isEmpty ? null : controller.clear,
);
},
),
suffixIconConstraints: iconConstraints,
),
);
}));
},
);
}
Expand Down
124 changes: 68 additions & 56 deletions packages/app_center/lib/src/store/store_app.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import 'package:app_center/src/store/store_pages.dart';
import 'package:app_center/src/store/store_providers.dart';
import 'package:app_center/src/store/store_routes.dart';
import 'package:flutter/material.dart' hide AboutDialog, showAboutDialog;
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_widgets/yaru_widgets.dart';
Expand All @@ -29,6 +30,7 @@ class StoreApp extends ConsumerStatefulWidget {

class _StoreAppState extends ConsumerState<StoreApp> {
final _navigatorKey = GlobalKey<NavigatorState>();
final searchFocus = FocusNode();

NavigatorState get _navigator => _navigatorKey.currentState!;

Expand All @@ -38,67 +40,77 @@ class _StoreAppState extends ConsumerState<StoreApp> {
next.whenData((route) => _navigator.pushNamed(route));
});

return YaruTheme(
builder: (context, yaru, child) => MaterialApp(
theme: yaru.theme,
darkTheme: yaru.darkTheme,
debugShowCheckedModeBanner: false,
localizationsDelegates: localizationsDelegates,
navigatorKey: ref.watch(materialAppNavigatorKeyProvider),
supportedLocales: supportedLocales,
home: YaruWindowTitleSetter(
child: Scaffold(
appBar: YaruWindowTitleBar(
title: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: kSearchBarWidth),
child: SearchField(
onSearch: (query) =>
_navigator.pushAndRemoveSearch(query: query),
onSnapSelected: (name) => _navigator.pushSnap(name: name),
onDebSelected: (id) => _navigator.pushDeb(id: id),
),
),
),
body: YaruMasterDetailPage(
navigatorKey: _navigatorKey,
navigatorObservers: [StoreObserver(ref)],
initialRoute: ref.watch(initialRouteProvider),
controller: ref.watch(yaruPageControllerProvider),
tileBuilder: (context, index, selected, availableWidth) =>
pages[index].tileBuilder(context, selected),
pageBuilder: (context, index) =>
pages[index].pageBuilder(context),
layoutDelegate: const YaruMasterFixedPaneDelegate(
paneWidth: kPaneWidth,
),
breakpoint: 0, // always landscape
onGenerateRoute: (settings) =>
switch (StoreRoutes.routeOf(settings)) {
StoreRoutes.deb => MaterialPageRoute(
settings: settings,
builder: (_) => DebPage(
id: StoreRoutes.debOf(settings)!,
)),
StoreRoutes.snap => MaterialPageRoute(
settings: settings,
builder: (_) => SnapPage(
snapName: StoreRoutes.snapOf(settings)!,
return CallbackShortcuts(
bindings: <ShortcutActivator, VoidCallback>{
LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyF):
() {
searchFocus.requestFocus();
searchFocus.nextFocus();
}
},
child: YaruTheme(
builder: (context, yaru, child) => MaterialApp(
theme: yaru.theme,
darkTheme: yaru.darkTheme,
debugShowCheckedModeBanner: false,
localizationsDelegates: localizationsDelegates,
navigatorKey: ref.watch(materialAppNavigatorKeyProvider),
supportedLocales: supportedLocales,
home: YaruWindowTitleSetter(
child: Scaffold(
appBar: YaruWindowTitleBar(
title: ConstrainedBox(
constraints:
const BoxConstraints(maxWidth: kSearchBarWidth),
child: SearchField(
onSearch: (query) =>
_navigator.pushAndRemoveSearch(query: query),
onSnapSelected: (name) => _navigator.pushSnap(name: name),
onDebSelected: (id) => _navigator.pushDeb(id: id),
searchFocus: searchFocus,
),
),
StoreRoutes.search => MaterialPageRoute(
settings: settings,
builder: (_) => SearchPage(
query: StoreRoutes.queryOf(settings),
category: StoreRoutes.categoryOf(settings),
),
),
body: YaruMasterDetailPage(
navigatorKey: _navigatorKey,
navigatorObservers: [StoreObserver(ref)],
initialRoute: ref.watch(initialRouteProvider),
controller: ref.watch(yaruPageControllerProvider),
tileBuilder: (context, index, selected, availableWidth) =>
pages[index].tileBuilder(context, selected),
pageBuilder: (context, index) =>
pages[index].pageBuilder(context),
layoutDelegate: const YaruMasterFixedPaneDelegate(
paneWidth: kPaneWidth,
),
_ => null,
},
breakpoint: 0, // always landscape
onGenerateRoute: (settings) =>
switch (StoreRoutes.routeOf(settings)) {
StoreRoutes.deb => MaterialPageRoute(
settings: settings,
builder: (_) => DebPage(
id: StoreRoutes.debOf(settings)!,
)),
StoreRoutes.snap => MaterialPageRoute(
settings: settings,
builder: (_) => SnapPage(
snapName: StoreRoutes.snapOf(settings)!,
),
),
StoreRoutes.search => MaterialPageRoute(
settings: settings,
builder: (_) => SearchPage(
query: StoreRoutes.queryOf(settings),
category: StoreRoutes.categoryOf(settings),
),
),
_ => null,
},
),
),
),
),
),
),
);
));
}
}

Expand Down
5 changes: 5 additions & 0 deletions packages/app_center/test/search_field_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ void main() {
onSearch: (_) {},
onSnapSelected: (_) {},
onDebSelected: (_) {},
searchFocus: FocusNode(),
),
),
);
Expand Down Expand Up @@ -88,6 +89,7 @@ void main() {
onSearch: (_) {},
onSnapSelected: (_) {},
onDebSelected: (_) {},
searchFocus: FocusNode(),
),
),
);
Expand Down Expand Up @@ -134,6 +136,7 @@ void main() {
onSearch: mockSearchCallback.call,
onSnapSelected: mockSelectedCallback.call,
onDebSelected: (_) {},
searchFocus: FocusNode(),
),
),
);
Expand Down Expand Up @@ -164,6 +167,7 @@ void main() {
onSearch: mockSearchCallback.call,
onSnapSelected: mockSelectedCallback.call,
onDebSelected: (_) {},
searchFocus: FocusNode(),
),
),
);
Expand Down Expand Up @@ -195,6 +199,7 @@ void main() {
onSearch: mockSearchCallback.call,
onSnapSelected: mockSelectedCallback.call,
onDebSelected: (_) {},
searchFocus: FocusNode(),
),
),
);
Expand Down