Skip to content

Commit

Permalink
Improve connect dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
CodeDoctorDE committed May 31, 2024
1 parent f7b9db8 commit b0e1a26
Show file tree
Hide file tree
Showing 8 changed files with 250 additions and 77 deletions.
6 changes: 5 additions & 1 deletion app/lib/l10n/app_en.arb
Original file line number Diff line number Diff line change
Expand Up @@ -85,5 +85,9 @@
"custom": "Custom",
"installed": "Installed",
"details": "Details",
"play": "Play"
"play": "Play",
"configuration": "Configuration",
"background": "Background",
"search": "Search",
"onlyFavorites": "Only favorites"
}
106 changes: 82 additions & 24 deletions app/lib/pages/home/connect.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:material_leap/material_leap.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';
import 'package:quokka/widgets/search.dart';

class ConnectDialog extends StatefulWidget {
const ConnectDialog({super.key});
Expand All @@ -20,22 +21,41 @@ class _ConnectDialogState extends State<ConnectDialog> {
final servers = List.generate(10, (index) => 'Server ${index + 1}');
final currentIndex = _selectedIndex;
final detailsChildren = [
const Text(
'''Labore commodo amet nisi ad ad aliquip minim. Do minim eiusmod sunt pariatur ullamco mollit nulla consequat enim Lorem deserunt amet. Velit cupidatat officia elit consectetur cillum culpa sunt pariatur magna cupidatat culpa. Occaecat ad mollit qui laboris do nostrud.
Ad id adipisicing sunt laboris mollit deserunt id adipisicing culpa. Consequat amet ea velit culpa quis nostrud ullamco ipsum aliquip nostrud labore ipsum irure. Proident aliquip nulla labore aliquip tempor minim velit excepteur ipsum incididunt. Dolore tempor officia voluptate ipsum. Et occaecat deserunt sint id incididunt nisi duis commodo elit pariatur magna voluptate. Id incididunt minim consequat irure laboris culpa laborum ipsum. Dolor fugiat laborum dolor sint adipisicing fugiat.
Lorem ullamco laboris do proident occaecat mollit aliquip minim. Do irure consectetur ut do laborum deserunt aliquip dolore consectetur eu. Cupidatat consequat ea occaecat reprehenderit minim voluptate fugiat cillum do labore in. Ullamco eiusmod occaecat eu voluptate elit cupidatat non proident. Reprehenderit Lorem elit est commodo in duis Lorem sunt esse.
Nisi sunt irure consectetur officia occaecat. Elit do consequat sit laboris laboris sunt est ex. Amet laboris aliqua nisi anim incididunt pariatur ex. Duis eiusmod Lorem aliqua minim eiusmod laborum sit nulla. Officia eu cupidatat veniam ad mollit sint consectetur laboris elit ipsum. Laborum officia non in aute ut voluptate Lorem culpa id labore qui ea minim ex.''',
const ListTile(
title: Text('Description'),
subtitle: Text(
'''Labore commodo amet nisi ad ad aliquip minim. Do minim eiusmod sunt pariatur ullamco mollit nulla consequat enim Lorem deserunt amet. Velit cupidatat officia elit consectetur cillum culpa sunt pariatur magna cupidatat culpa. Occaecat ad mollit qui laboris do nostrud.
Ad id adipisicing sunt laboris mollit deserunt id adipisicing culpa. Consequat amet ea velit culpa quis nostrud ullamco ipsum aliquip nostrud labore ipsum irure. Proident aliquip nulla labore aliquip tempor minim velit excepteur ipsum incididunt. Dolore tempor officia voluptate ipsum. Et occaecat deserunt sint id incididunt nisi duis commodo elit pariatur magna voluptate. Id incididunt minim consequat irure laboris culpa laborum ipsum. Dolor fugiat laborum dolor sint adipisicing fugiat.
Lorem ullamco laboris do proident occaecat mollit aliquip minim. Do irure consectetur ut do laborum deserunt aliquip dolore consectetur eu. Cupidatat consequat ea occaecat reprehenderit minim voluptate fugiat cillum do labore in. Ullamco eiusmod occaecat eu voluptate elit cupidatat non proident. Reprehenderit Lorem elit est commodo in duis Lorem sunt esse.
Nisi sunt irure consectetur officia occaecat. Elit do consequat sit laboris laboris sunt est ex. Amet laboris aliqua nisi anim incididunt pariatur ex. Duis eiusmod Lorem aliqua minim eiusmod laborum sit nulla. Officia eu cupidatat veniam ad mollit sint consectetur laboris elit ipsum. Laborum officia non in aute ut voluptate Lorem culpa id labore qui ea minim ex.''',
),
),
];
final playButton = SizedBox(
height: 48,
child: FilledButton.icon(
icon: const Icon(PhosphorIconsLight.play),
label: Text(AppLocalizations.of(context).play),
onPressed: () => Navigator.of(context).pop(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: FilledButton.icon(
icon: const Icon(PhosphorIconsLight.play),
label: Text(AppLocalizations.of(context).play),
onPressed: () => Navigator.of(context).pop(),
),
),
const SizedBox(width: 8),
Center(
child: IconButton.outlined(
icon: const Icon(PhosphorIconsLight.heart),
selectedIcon: const Icon(PhosphorIconsFill.heart),
onPressed: () {},
isSelected: true,
),
),
],
),
);
final listView = ListView.builder(
Expand All @@ -54,7 +74,10 @@ Nisi sunt irure consectetur officia occaecat. Elit do consequat sit laboris labo
childrenBuilder: (context) => [
...detailsChildren,
const SizedBox(height: 16),
playButton,
Padding(
padding: const EdgeInsets.all(8.0),
child: playButton,
),
],
).then((_) {
if (mounted) setState(() => _isMobileOpen = false);
Expand All @@ -67,11 +90,13 @@ Nisi sunt irure consectetur officia occaecat. Elit do consequat sit laboris labo
final details = Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
servers[currentIndex],
style: Theme.of(context).textTheme.titleLarge,
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
servers[currentIndex],
style: Theme.of(context).textTheme.titleLarge,
),
),
const SizedBox(height: 16),
Expanded(
child: ListView(
children: detailsChildren,
Expand All @@ -91,14 +116,47 @@ Nisi sunt irure consectetur officia occaecat. Elit do consequat sit laboris labo
maxWidth: LeapBreakpoints.expanded,
maxHeight: 700,
),
content: Row(
children: [
Expanded(child: listView),
if (!isMobile) ...[
const VerticalDivider(),
Expanded(child: details),
content: DefaultTabController(
length: 2,
child: Column(
children: [
RowSearchView(children: [
InputChip(
label: Text(AppLocalizations.of(context).official),
avatar: const Icon(PhosphorIconsLight.star),
showCheckmark: false,
selected: true,
onPressed: () {},
),
InputChip(
label: Text(AppLocalizations.of(context).custom),
avatar: const Icon(PhosphorIconsLight.puzzlePiece),
showCheckmark: false,
selected: true,
onPressed: () {},
),
InputChip(
label: Text(AppLocalizations.of(context).onlyFavorites),
avatar: const Icon(PhosphorIconsLight.listHeart),
showCheckmark: false,
selected: false,
onPressed: () {},
),
]),
const SizedBox(height: 8),
Expanded(
child: Row(
children: [
Expanded(child: listView),
if (!isMobile) ...[
const VerticalDivider(),
Expanded(child: details),
],
],
),
),
],
],
),
),
);
}
Expand Down
15 changes: 9 additions & 6 deletions app/lib/pages/home/create.dart
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,15 @@ class _CreateDialogState extends State<CreateDialog>
),
Column(children: [
TabBar.secondary(
tabs: const [
tabs: [
HorizontalTab(
label: Text('Packs'),
icon: Icon(PhosphorIconsLight.package)),
label: Text(AppLocalizations.of(context).packs),
icon: const Icon(PhosphorIconsLight.package),
),
HorizontalTab(
label: Text('Configuration'),
icon: Icon(PhosphorIconsLight.wrench)),
label: Text(AppLocalizations.of(context).configuration),
icon: const Icon(PhosphorIconsLight.wrench),
),
],
tabAlignment: TabAlignment.center,
controller: _customTabController,
Expand All @@ -103,7 +105,8 @@ class _CreateDialogState extends State<CreateDialog>
ListView(
children: [
ListTile(
title: const Text('Background'),
title:
Text(AppLocalizations.of(context).background),
subtitle: const Text('Not set'),
onTap: () => Navigator.of(context).pop(),
),
Expand Down
58 changes: 16 additions & 42 deletions app/lib/pages/home/packs.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:material_leap/material_leap.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';
import 'package:quokka/widgets/search.dart';

class PacksDialog extends StatefulWidget {
const PacksDialog({super.key});
Expand Down Expand Up @@ -38,46 +39,19 @@ class _PacksDialogState extends State<PacksDialog>
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
LayoutBuilder(builder: (context, constraints) {
final tabBar = TabBar(
controller: _tabController,
isScrollable: true,
tabAlignment: TabAlignment.startOffset,
indicatorSize: TabBarIndicatorSize.label,
tabs: const [
HorizontalTab(
icon: PhosphorIcon(PhosphorIconsLight.folder),
label: Text('Installed'),
),
HorizontalTab(
icon: PhosphorIcon(PhosphorIconsLight.globe),
label: Text('Browse'),
),
],
);
const searchBar = SearchBar(
constraints: BoxConstraints(
minWidth: 200.0, maxWidth: 260.0, minHeight: 56.0),
leading: PhosphorIcon(PhosphorIconsLight.magnifyingGlass),
hintText: 'Search',
);
if (constraints.maxWidth < LeapBreakpoints.medium) {
return Column(
children: [
searchBar,
const SizedBox(height: 12),
tabBar,
],
);
}
return Row(
children: [
Expanded(child: tabBar),
const SizedBox(width: 64),
searchBar,
],
);
}),
TabSearchView(
tabController: _tabController,
tabs: const [
HorizontalTab(
icon: PhosphorIcon(PhosphorIconsLight.folder),
label: Text('Installed'),
),
HorizontalTab(
icon: PhosphorIcon(PhosphorIconsLight.globe),
label: Text('Browse'),
),
],
),
Expanded(
child: TabBarView(
controller: _tabController,
Expand All @@ -93,8 +67,8 @@ class _PacksDialogState extends State<PacksDialog>
),
],
),
leading: IconButton(
icon: const Icon(PhosphorIconsLight.xCircle),
leading: IconButton.outlined(
icon: const Icon(PhosphorIconsLight.x),
onPressed: () => Navigator.of(context).pop(),
),
headerActions: [
Expand Down
5 changes: 3 additions & 2 deletions app/lib/pages/home/play.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:material_leap/material_leap.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';
import 'package:quokka/pages/home/create.dart';
Expand All @@ -17,7 +18,7 @@ class _PlayDialogState extends State<PlayDialog> with TickerProviderStateMixin {
Widget build(BuildContext context) {
final games = List.generate(30, (index) => 'Game ${index + 1}');
return ResponsiveAlertDialog(
title: const Text('Play'),
title: Text(AppLocalizations.of(context).play),
constraints: const BoxConstraints(
maxWidth: LeapBreakpoints.compact,
),
Expand Down Expand Up @@ -77,7 +78,7 @@ class _PlayDialogState extends State<PlayDialog> with TickerProviderStateMixin {
context: context,
builder: (context) => const CreateDialog(),
),
label: const Text('Create'),
label: Text(AppLocalizations.of(context).create),
icon: const Icon(PhosphorIconsLight.plus),
),
),
Expand Down
98 changes: 98 additions & 0 deletions app/lib/widgets/search.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';
import 'package:quokka/widgets/two_child_row_layout.dart';

const searchConstraints =
BoxConstraints(minWidth: 200.0, maxWidth: 260.0, minHeight: 56.0);

class TabSearchView extends StatelessWidget {
final TabController? tabController;
final List<Widget> tabs;
final ValueChanged<String>? onSearchChanged;
final ValueChanged<String>? onSearchSubmitted;
final ValueChanged<int>? onTabTap;

const TabSearchView({
super.key,
this.tabController,
required this.tabs,
this.onSearchChanged,
this.onSearchSubmitted,
this.onTabTap,
});

@override
Widget build(BuildContext context) {
final tabBar = TabBar(
controller: tabController,
isScrollable: true,
tabAlignment: TabAlignment.startOffset,
indicatorSize: TabBarIndicatorSize.label,
onTap: onTabTap,
tabs: tabs);
final searchBar = SearchBar(
constraints: const BoxConstraints(
minWidth: 200.0, maxWidth: 260.0, minHeight: 56.0),
leading: const PhosphorIcon(PhosphorIconsLight.magnifyingGlass),
hintText: AppLocalizations.of(context).search,
onChanged: onSearchChanged,
onSubmitted: onSearchSubmitted,
);
return TwoChildRowLayout(primary: tabBar, second: searchBar);
}
}

class RowSearchView extends StatefulWidget {
final List<Widget> children;
final ValueChanged<String>? onSearchChanged;
final ValueChanged<String>? onSearchSubmitted;
final ValueChanged<int>? onTabTap;

const RowSearchView({
super.key,
required this.children,
this.onSearchChanged,
this.onSearchSubmitted,
this.onTabTap,
});

@override
State<RowSearchView> createState() => _RowSearchViewState();
}

class _RowSearchViewState extends State<RowSearchView> {
final ScrollController _scrollController = ScrollController();

@override
void dispose() {
_scrollController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
final tabBar = SizedBox(
height: 56,
child: Scrollbar(
controller: _scrollController,
child: ListView.separated(
controller: _scrollController,
scrollDirection: Axis.horizontal,
itemCount: widget.children.length,
itemBuilder: (context, index) => widget.children[index],
separatorBuilder: (context, index) => const SizedBox(width: 8),
),
),
);
final searchBar = SearchBar(
constraints: const BoxConstraints(
minWidth: 200.0, maxWidth: 260.0, minHeight: 56.0),
leading: const PhosphorIcon(PhosphorIconsLight.magnifyingGlass),
hintText: AppLocalizations.of(context).search,
onChanged: widget.onSearchChanged,
onSubmitted: widget.onSearchSubmitted,
);
return TwoChildRowLayout(primary: tabBar, second: searchBar);
}
}
Loading

0 comments on commit b0e1a26

Please sign in to comment.