Skip to content

Commit

Permalink
Improve search UI (#45)
Browse files Browse the repository at this point in the history
  • Loading branch information
Feichtmeier authored Jun 19, 2022
1 parent f78434b commit ea0d258
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 39 deletions.
2 changes: 1 addition & 1 deletion lib/l10n/app_en.arb
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"media": "Media",
"done": "Done",
"systemUpdates": "System updates",
"searchHint": "Search...",
"searchHint": "Search",
"updateAll": "Update all",
"noUpdates": "No updates available"
}
15 changes: 14 additions & 1 deletion lib/store_app/explore/explore_model.dart
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ class ExploreModel extends SafeChangeNotifier {
this.client,
) : _searchQuery = '',
sectionNameToSnapsMap = {},
_errorMessage = '';
_errorMessage = '',
_searchActive = false;

String _errorMessage;
String get errorMessage => _errorMessage;
Expand All @@ -25,6 +26,17 @@ class ExploreModel extends SafeChangeNotifier {
notifyListeners();
}

bool _searchActive;
bool get searchActive => _searchActive;
set searchActive(bool value) {
if (value == _searchActive) return;
_searchActive = value;
if (_searchActive == false) {
searchQuery = '';
}
notifyListeners();
}

String _searchQuery;
String get searchQuery => _searchQuery;
set searchQuery(String value) {
Expand All @@ -39,6 +51,7 @@ class ExploreModel extends SafeChangeNotifier {
set selectedSection(SnapSection value) {
if (value == _selectedSection) return;
_selectedSection = value;
loadSection(value);
}

Future<List<Snap>> findSnapsByQuery() async {
Expand Down
10 changes: 9 additions & 1 deletion lib/store_app/explore/explore_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import 'package:software/store_app/explore/search_page.dart';
import 'package:software/store_app/explore/section_banner_grid.dart';
import 'package:software/store_app/explore/snap_banner_carousel.dart';
import 'package:ubuntu_service/ubuntu_service.dart';
import 'package:yaru_icons/yaru_icons.dart';
import 'package:yaru_widgets/yaru_widgets.dart';

class ExplorePage extends StatelessWidget {
Expand All @@ -31,7 +32,14 @@ class ExplorePage extends StatelessWidget {
final model = context.watch<ExploreModel>();
return Scaffold(
appBar: AppBar(
flexibleSpace: const SearchField(),
title: !model.searchActive
? YaruRoundToggleButton(
selected: model.searchActive,
iconData: YaruIcons.search,
onPressed: () => model.searchActive = !model.searchActive,
)
: null,
flexibleSpace: !model.searchActive ? null : const SearchField(),
),
body: Padding(
padding: const EdgeInsets.only(top: 20),
Expand Down
44 changes: 27 additions & 17 deletions lib/store_app/explore/search_field.dart
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,26 @@ class _SearchFieldState extends State<SearchField> {
onChanged: (value) => model.searchQuery = value,
autofocus: true,
decoration: InputDecoration(
hintText: context.l10n.searchHint,
hintText:
'${context.l10n.searchHint} ${model.selectedSection.localize(context.l10n)} snaps',
suffixIcon: _SectionDropdown(
value: model.selectedSection,
onChanged: (v) {
model.selectedSection = v!;
model.loadSection(v);
},
onChanged: (v) => model.selectedSection = v!,
),
prefixIconConstraints: const BoxConstraints(minWidth: 20),
prefixIcon: model.searchQuery == ''
? const SizedBox()
? Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: YaruRoundIconButton(
size: 36,
onTap: () {
model.searchActive = false;
},
child: const Icon(YaruIcons.go_previous),
),
)
: Padding(
padding: const EdgeInsets.only(left: 5),
padding: const EdgeInsets.only(left: 5, right: 5),
child: YaruRoundIconButton(
size: 36,
onTap: () {
Expand Down Expand Up @@ -75,14 +82,19 @@ class _SectionDropdown extends StatelessWidget {

@override
Widget build(BuildContext context) {
return DropdownButtonHideUnderline(
child: DropdownButton<SnapSection>(
return PopupMenuButton<SnapSection>(
splashRadius: 20,
onSelected: onChanged,
icon: Icon(snapSectionToIcon[value]),
initialValue: SnapSection.all,
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
elevation: 2,
value: value,
items: [
borderSide: BorderSide(color: Theme.of(context).dividerColor, width: 1),
),
itemBuilder: (context) {
return [
for (final section in SnapSection.values)
DropdownMenuItem(
PopupMenuItem(
value: section,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
Expand Down Expand Up @@ -113,10 +125,8 @@ class _SectionDropdown extends StatelessWidget {
],
),
)
],
onChanged: onChanged,
// style: Theme.of(context).textTheme.title,
),
];
},
);
}
}
35 changes: 17 additions & 18 deletions lib/store_app/explore/section_banner_grid.dart
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,27 @@ class _SectionBannerGridState extends State<SectionBannerGrid> {
@override
Widget build(BuildContext context) {
final model = context.watch<ExploreModel>();
final sections = model.sectionNameToSnapsMap[widget.snapSection.title];

final sections =
model.sectionNameToSnapsMap[widget.snapSection.title] ?? [];
if (sections.isEmpty) return const SizedBox();
return GridView(
padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
shrinkWrap: true,
gridDelegate: kGridDelegate,
children: sections != null && sections.isNotEmpty
? sections.take(widget.amount).map((snap) {
return AppBanner(
name: snap.name,
summary: snap.summary,
url: snap.iconUrl,
onTap: () => showDialog(
context: context,
builder: (context) => SnapDialog.create(
context: context,
huskSnapName: snap.name,
),
),
);
}).toList()
: [],
children: sections.take(widget.amount).map((snap) {
return AppBanner(
name: snap.name,
summary: snap.summary,
url: snap.iconUrl,
onTap: () => showDialog(
context: context,
builder: (context) => SnapDialog.create(
context: context,
huskSnapName: snap.name,
),
),
);
}).toList(),
);
}
}
2 changes: 1 addition & 1 deletion linux/my_application.cc
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ static void my_application_activate(GApplication* application) {
gtk_window_set_geometry_hints(window, nullptr, &geometry_min, GDK_HINT_MIN_SIZE);


gtk_window_set_default_size(window, 990, 920);
gtk_window_set_default_size(window, 800, 730);

g_autoptr(FlDartProject) project = fl_dart_project_new();
fl_dart_project_set_dart_entrypoint_arguments(project, self->dart_entrypoint_arguments);
Expand Down

0 comments on commit ea0d258

Please sign in to comment.