use bottom sheets instead of dialogs
This commit is contained in:
@@ -291,7 +291,7 @@ class SelectProfileRoute extends GoRouteData with $SelectProfileRoute {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Page<void> buildPage(BuildContext context, GoRouterState state) {
|
Page<void> buildPage(BuildContext context, GoRouterState state) {
|
||||||
return DialogPage(builder: (_) => const SelectProfileDialog());
|
return BottomSheetPage(builder: (_) => const SelectProfileDialog());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ import 'package:flutter/material.dart';
|
|||||||
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
|
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
import 'package:nullability/nullability.dart';
|
import 'package:nullability/nullability.dart';
|
||||||
|
import 'package:weblibre/core/routing/widgets/bottom_sheet_page.dart';
|
||||||
import 'package:weblibre/core/routing/widgets/dialog_page.dart';
|
import 'package:weblibre/core/routing/widgets/dialog_page.dart';
|
||||||
import 'package:weblibre/domain/entities/profile.dart';
|
import 'package:weblibre/domain/entities/profile.dart';
|
||||||
import 'package:weblibre/features/about/presentation/screens/about.dart';
|
import 'package:weblibre/features/about/presentation/screens/about.dart';
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ class SelectFeedDialogRoute extends GoRouteData with $SelectFeedDialogRoute {
|
|||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
return DialogPage(builder: (_) => SelectFeedDialog(feedUris: feedUris));
|
return BottomSheetPage(builder: (_) => SelectFeedDialog(feedUris: feedUris));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,61 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2024-2025 Fabian Freund.
|
||||||
|
*
|
||||||
|
* This file is part of WebLibre
|
||||||
|
* (see https://weblibre.eu).
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A bottom sheet page with Material entrance and exit animations.
|
||||||
|
/// Similar to DialogPage but displays content as a modal bottom sheet.
|
||||||
|
class BottomSheetPage<T> extends Page<T> {
|
||||||
|
final WidgetBuilder builder;
|
||||||
|
final Color? barrierColor;
|
||||||
|
final bool barrierDismissible;
|
||||||
|
final String? barrierLabel;
|
||||||
|
final bool isScrollControlled;
|
||||||
|
final bool useSafeArea;
|
||||||
|
|
||||||
|
const BottomSheetPage({
|
||||||
|
required this.builder,
|
||||||
|
this.barrierColor,
|
||||||
|
this.barrierDismissible = true,
|
||||||
|
this.barrierLabel,
|
||||||
|
this.isScrollControlled = true,
|
||||||
|
this.useSafeArea = true,
|
||||||
|
super.key,
|
||||||
|
super.name,
|
||||||
|
super.arguments,
|
||||||
|
super.restorationId,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Route<T> createRoute(BuildContext context) => ModalBottomSheetRoute<T>(
|
||||||
|
settings: this,
|
||||||
|
builder: builder,
|
||||||
|
barrierLabel: barrierLabel ??
|
||||||
|
MaterialLocalizations.of(context).modalBarrierDismissLabel,
|
||||||
|
backgroundColor:
|
||||||
|
Theme.of(context).bottomSheetTheme.modalBackgroundColor,
|
||||||
|
elevation: Theme.of(context).bottomSheetTheme.modalElevation,
|
||||||
|
shape: Theme.of(context).bottomSheetTheme.shape,
|
||||||
|
clipBehavior: Clip.antiAlias,
|
||||||
|
constraints: Theme.of(context).bottomSheetTheme.constraints,
|
||||||
|
isScrollControlled: isScrollControlled,
|
||||||
|
isDismissible: barrierDismissible,
|
||||||
|
useSafeArea: useSafeArea,
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -25,18 +25,39 @@ import 'package:nullability/nullability.dart';
|
|||||||
import 'package:weblibre/features/geckoview/features/browser/domain/services/browser_data.dart';
|
import 'package:weblibre/features/geckoview/features/browser/domain/services/browser_data.dart';
|
||||||
import 'package:weblibre/features/user/data/models/general_settings.dart';
|
import 'package:weblibre/features/user/data/models/general_settings.dart';
|
||||||
|
|
||||||
class DeleteDataDialog extends HookConsumerWidget {
|
/// Shows a bottom sheet to select and delete browsing data.
|
||||||
|
Future<void> showDeleteDataDialog(
|
||||||
|
BuildContext context, {
|
||||||
|
Set<DeleteBrowsingDataType> initialSettings = const {},
|
||||||
|
}) {
|
||||||
|
return showModalBottomSheet(
|
||||||
|
context: context,
|
||||||
|
isScrollControlled: true,
|
||||||
|
builder: (context) => _DeleteDataSheet(initialSettings: initialSettings),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
class _DeleteDataSheet extends HookConsumerWidget {
|
||||||
final Set<DeleteBrowsingDataType> initialSettings;
|
final Set<DeleteBrowsingDataType> initialSettings;
|
||||||
|
|
||||||
const DeleteDataDialog({required this.initialSettings});
|
const _DeleteDataSheet({required this.initialSettings});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final selections = useState(initialSettings);
|
final selections = useState(initialSettings);
|
||||||
|
|
||||||
return SimpleDialog(
|
return SafeArea(
|
||||||
title: const Text('Delete Browsing Data'),
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
children: [
|
children: [
|
||||||
|
Text(
|
||||||
|
'Delete Browsing Data',
|
||||||
|
style: Theme.of(context).textTheme.titleLarge,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
for (final type in DeleteBrowsingDataType.values)
|
for (final type in DeleteBrowsingDataType.values)
|
||||||
CheckboxListTile.adaptive(
|
CheckboxListTile.adaptive(
|
||||||
value: selections.value.contains(type),
|
value: selections.value.contains(type),
|
||||||
@@ -53,10 +74,11 @@ class DeleteDataDialog extends HookConsumerWidget {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
Padding(
|
const SizedBox(height: 16),
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 24.0),
|
FilledButton.icon(
|
||||||
child: FilledButton.icon(
|
onPressed: selections.value.isEmpty
|
||||||
onPressed: () async {
|
? null
|
||||||
|
: () async {
|
||||||
await ref
|
await ref
|
||||||
.read(browserDataServiceProvider.notifier)
|
.read(browserDataServiceProvider.notifier)
|
||||||
.deleteData(selections.value);
|
.deleteData(selections.value);
|
||||||
@@ -72,8 +94,9 @@ class DeleteDataDialog extends HookConsumerWidget {
|
|||||||
label: const Text('Delete'),
|
label: const Text('Delete'),
|
||||||
icon: const Icon(Icons.delete_forever),
|
icon: const Icon(Icons.delete_forever),
|
||||||
),
|
),
|
||||||
),
|
|
||||||
],
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+34
-12
@@ -21,29 +21,43 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
|
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
|
||||||
|
import 'package:go_router/go_router.dart';
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
import 'package:weblibre/features/geckoview/features/bookmarks/presentation/widgets/folder_tree_picker.dart';
|
import 'package:weblibre/features/geckoview/features/bookmarks/presentation/widgets/folder_tree_picker.dart';
|
||||||
|
|
||||||
/// Dialog to select a bookmark folder.
|
/// Bottom sheet to select a bookmark folder.
|
||||||
/// Returns the selected folder GUID or null if cancelled.
|
/// Returns the selected folder GUID or null if cancelled.
|
||||||
Future<String?> showSelectFolderDialog(BuildContext context) {
|
Future<String?> showSelectFolderDialog(BuildContext context) {
|
||||||
return showDialog<String>(
|
return showModalBottomSheet<String>(
|
||||||
context: context,
|
context: context,
|
||||||
builder: (context) => const _SelectFolderDialog(),
|
isScrollControlled: true,
|
||||||
|
builder: (context) => const _SelectFolderSheet(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
class _SelectFolderDialog extends HookConsumerWidget {
|
class _SelectFolderSheet extends HookConsumerWidget {
|
||||||
const _SelectFolderDialog();
|
const _SelectFolderSheet();
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final selectedFolderGuid = useState(BookmarkRoot.mobile.id);
|
final selectedFolderGuid = useState(BookmarkRoot.mobile.id);
|
||||||
|
|
||||||
return AlertDialog(
|
return SafeArea(
|
||||||
title: const Text('Select folder'),
|
child: Padding(
|
||||||
content: SizedBox(
|
padding: const EdgeInsets.all(16),
|
||||||
width: double.maxFinite,
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'Select folder',
|
||||||
|
style: Theme.of(context).textTheme.titleLarge,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
ConstrainedBox(
|
||||||
|
constraints: BoxConstraints(
|
||||||
|
maxHeight: MediaQuery.of(context).size.height * 0.5,
|
||||||
|
),
|
||||||
child: SingleChildScrollView(
|
child: SingleChildScrollView(
|
||||||
child: FolderTreePicker(
|
child: FolderTreePicker(
|
||||||
selectedFolderGuid: selectedFolderGuid,
|
selectedFolderGuid: selectedFolderGuid,
|
||||||
@@ -51,16 +65,24 @@ class _SelectFolderDialog extends HookConsumerWidget {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
actions: [
|
const SizedBox(height: 16),
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.end,
|
||||||
|
children: [
|
||||||
TextButton(
|
TextButton(
|
||||||
onPressed: () => Navigator.of(context).pop(),
|
onPressed: () => context.pop(),
|
||||||
child: const Text('Cancel'),
|
child: const Text('Cancel'),
|
||||||
),
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
FilledButton(
|
FilledButton(
|
||||||
onPressed: () => Navigator.of(context).pop(selectedFolderGuid.value),
|
onPressed: () => context.pop(selectedFolderGuid.value),
|
||||||
child: const Text('Select'),
|
child: const Text('Select'),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -280,14 +280,10 @@ class HistoryScreen extends HookConsumerWidget {
|
|||||||
else
|
else
|
||||||
IconButton(
|
IconButton(
|
||||||
onPressed: () async {
|
onPressed: () async {
|
||||||
await showDialog(
|
await showDeleteDataDialog(
|
||||||
context: context,
|
context,
|
||||||
builder: (context) {
|
|
||||||
return const DeleteDataDialog(
|
|
||||||
initialSettings: {DeleteBrowsingDataType.history},
|
initialSettings: {DeleteBrowsingDataType.history},
|
||||||
);
|
);
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
// ignore: unused_result
|
// ignore: unused_result
|
||||||
await ref.refresh(browsingHistoryProvider.future);
|
await ref.refresh(browsingHistoryProvider.future);
|
||||||
|
|||||||
@@ -254,12 +254,7 @@ class _DeleteBrowsingDataTile extends StatelessWidget {
|
|||||||
leading: const Icon(MdiIcons.databaseRemove),
|
leading: const Icon(MdiIcons.databaseRemove),
|
||||||
trailing: const Icon(Icons.chevron_right),
|
trailing: const Icon(Icons.chevron_right),
|
||||||
onTap: () async {
|
onTap: () async {
|
||||||
await showDialog(
|
await showDeleteDataDialog(context);
|
||||||
context: context,
|
|
||||||
builder: (context) {
|
|
||||||
return const DeleteDataDialog(initialSettings: {});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ import 'package:weblibre/features/user/domain/repositories/profile.dart';
|
|||||||
import 'package:weblibre/presentation/widgets/failure_widget.dart';
|
import 'package:weblibre/presentation/widgets/failure_widget.dart';
|
||||||
import 'package:weblibre/utils/exit_app.dart';
|
import 'package:weblibre/utils/exit_app.dart';
|
||||||
|
|
||||||
|
/// Bottom sheet widget to select a user profile.
|
||||||
class SelectProfileDialog extends HookConsumerWidget {
|
class SelectProfileDialog extends HookConsumerWidget {
|
||||||
const SelectProfileDialog();
|
const SelectProfileDialog();
|
||||||
|
|
||||||
@@ -35,19 +36,31 @@ class SelectProfileDialog extends HookConsumerWidget {
|
|||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final usersAsync = ref.watch(profileRepositoryProvider);
|
final usersAsync = ref.watch(profileRepositoryProvider);
|
||||||
|
|
||||||
return AlertDialog(
|
return SafeArea(
|
||||||
title: const Text('Users'),
|
child: Padding(
|
||||||
scrollable: true,
|
padding: const EdgeInsets.all(16),
|
||||||
content: usersAsync.when(
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'Users',
|
||||||
|
style: Theme.of(context).textTheme.titleLarge,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
usersAsync.when(
|
||||||
skipLoadingOnReload: true,
|
skipLoadingOnReload: true,
|
||||||
data: (profiles) => Column(
|
data: (profiles) => Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: profiles.map((profile) {
|
children: profiles.map((profile) {
|
||||||
final isSelected = filesystem.selectedProfile == profile.uuidValue;
|
final isSelected =
|
||||||
|
filesystem.selectedProfile == profile.uuidValue;
|
||||||
|
|
||||||
return ListTile(
|
return ListTile(
|
||||||
key: ValueKey(profile.id),
|
key: ValueKey(profile.id),
|
||||||
enabled: !isSelected,
|
enabled: !isSelected,
|
||||||
trailing: !isSelected ? const Icon(MdiIcons.accountSwitch) : null,
|
trailing:
|
||||||
|
!isSelected ? const Icon(MdiIcons.accountSwitch) : null,
|
||||||
title: Text(profile.name),
|
title: Text(profile.name),
|
||||||
subtitle: isSelected ? const Text('Active') : null,
|
subtitle: isSelected ? const Text('Active') : null,
|
||||||
onTap: () async {
|
onTap: () async {
|
||||||
@@ -64,8 +77,10 @@ class SelectProfileDialog extends HookConsumerWidget {
|
|||||||
),
|
),
|
||||||
loading: () => const Center(child: CircularProgressIndicator()),
|
loading: () => const Center(child: CircularProgressIndicator()),
|
||||||
),
|
),
|
||||||
actionsAlignment: MainAxisAlignment.spaceBetween,
|
const SizedBox(height: 16),
|
||||||
actions: [
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
TextButton.icon(
|
TextButton.icon(
|
||||||
icon: const Icon(MdiIcons.power),
|
icon: const Icon(MdiIcons.power),
|
||||||
iconAlignment: IconAlignment.start,
|
iconAlignment: IconAlignment.start,
|
||||||
@@ -87,6 +102,10 @@ class SelectProfileDialog extends HookConsumerWidget {
|
|||||||
},
|
},
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import 'package:weblibre/core/routing/routes.dart';
|
|||||||
import 'package:weblibre/features/web_feed/domain/providers.dart';
|
import 'package:weblibre/features/web_feed/domain/providers.dart';
|
||||||
import 'package:weblibre/presentation/widgets/failure_widget.dart';
|
import 'package:weblibre/presentation/widgets/failure_widget.dart';
|
||||||
|
|
||||||
|
/// Bottom sheet widget to select a feed from discovered feeds.
|
||||||
class SelectFeedDialog extends HookConsumerWidget {
|
class SelectFeedDialog extends HookConsumerWidget {
|
||||||
final Set<Uri> feedUris;
|
final Set<Uri> feedUris;
|
||||||
|
|
||||||
@@ -32,10 +33,19 @@ class SelectFeedDialog extends HookConsumerWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
return SimpleDialog(
|
return SafeArea(
|
||||||
title: const Text('Add Feed'),
|
child: Padding(
|
||||||
children: feedUris
|
padding: const EdgeInsets.all(16),
|
||||||
.map(
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'Add Feed',
|
||||||
|
style: Theme.of(context).textTheme.titleLarge,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
...feedUris.map(
|
||||||
(uri) => HookConsumer(
|
(uri) => HookConsumer(
|
||||||
builder: (context, ref, child) {
|
builder: (context, ref, child) {
|
||||||
final feedAsync = ref.watch(fetchWebFeedProvider(uri));
|
final feedAsync = ref.watch(fetchWebFeedProvider(uri));
|
||||||
@@ -71,8 +81,10 @@ class SelectFeedDialog extends HookConsumerWidget {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
)
|
),
|
||||||
.toList(),
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user