Select items, select all and fabs

This commit is contained in:
Juan Gilsanz Polo 2023-11-17 01:30:48 +01:00
parent 9d3391aa0d
commit b6bf2d80c7
6 changed files with 534 additions and 368 deletions

View file

@ -671,5 +671,7 @@
"openMenu": "Open menu",
"closeMenu": "Close menu",
"openListUrl": "Open list URL",
"selectionMode": "Selection mode"
"selectionMode": "Selection mode",
"enableDisableSelected": "Enable or disable selected items",
"deleteSelected": "Delete selected items"
}

View file

@ -671,5 +671,7 @@
"openMenu": "Abrir menú",
"closeMenu": "Cerrar menú",
"openListUrl": "Abrir URL de lista",
"selectionMode": "Modo de selección"
"selectionMode": "Modo de selección",
"enableDisableSelected": "Activar o desactivar elementos seleccionados",
"deleteSelected": "Eliminar elementos seleccionados"
}

View file

@ -9,7 +9,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/widgets/custom_list_tile.dart';
import 'package:adguard_home_manager/widgets/options_modal.dart';
import 'package:adguard_home_manager/screens/filters/selection_screen.dart';
import 'package:adguard_home_manager/screens/filters/selection/selection_screen.dart';
import 'package:adguard_home_manager/functions/open_url.dart';
import 'package:adguard_home_manager/classes/process_modal.dart';

View file

@ -0,0 +1,215 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/models/filtering.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
class SelectionList extends StatelessWidget {
final List<Filter> lists;
final List<Filter> selectedLists;
final void Function(Filter) onSelect;
final void Function() selectAll;
final void Function() unselectAll;
const SelectionList({
Key? key,
required this.lists,
required this.selectedLists,
required this.onSelect,
required this.selectAll,
required this.unselectAll,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: lists.length+1,
itemBuilder: (context, index) {
if (index == 0) {
return CheckboxListTile(
title: Text(AppLocalizations.of(context)!.selectAll),
value: lists.length == selectedLists.length,
onChanged: (value) {
if (value == true) {
selectAll();
}
else {
unselectAll();
}
},
);
}
return _Tile(
list: lists[index-1],
onSelect: onSelect,
isSelected: selectedLists.contains(lists[index-1]),
);
}
);
}
}
class SelectionSliverList extends StatelessWidget {
final List<Filter> lists;
final List<Filter> selectedLists;
final void Function(Filter) onSelect;
final void Function() selectAll;
final void Function() unselectAll;
const SelectionSliverList({
Key? key,
required this.lists,
required this.selectedLists,
required this.onSelect,
required this.selectAll,
required this.unselectAll,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
if (lists.isNotEmpty) SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
if (index == 0) {
return Card(
margin: const EdgeInsets.all(16),
child: CheckboxListTile(
title: Text(AppLocalizations.of(context)!.selectAll),
value: lists.length == selectedLists.length,
onChanged: (value) {
if (value == true) {
selectAll();
}
else {
unselectAll();
}
},
checkboxShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)
),
),
);
}
return _Tile(
list: lists[index-1],
onSelect: onSelect,
isSelected: selectedLists.contains(lists[index-1]),
);
},
childCount: lists.length+1
),
),
if (lists.isEmpty) SliverFillRemaining(
child: Center(
child: Text(
AppLocalizations.of(context)!.noItems,
style: TextStyle(
fontSize: 22,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
)
)
)
],
);
},
),
);
}
}
class _Tile extends StatelessWidget {
final Filter list;
final void Function(Filter) onSelect;
final bool isSelected;
const _Tile({
Key? key,
required this.list,
required this.onSelect,
required this.isSelected,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final appConfigProvider = Provider.of<AppConfigProvider>(context);
return ListTile(
title: Text(
list.name,
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
list.url,
style: TextStyle(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
Row(
children: [
Icon(
list.enabled == true
? Icons.check_rounded
: Icons.close_rounded,
size: 16,
color: list.enabled == true
? appConfigProvider.useThemeColorForStatus == true
? Theme.of(context).colorScheme.primary
: Colors.green
: appConfigProvider.useThemeColorForStatus == true
? Colors.grey
: Colors.red
),
const SizedBox(width: 4),
Text(
list.enabled == true
? AppLocalizations.of(context)!.enabled
: AppLocalizations.of(context)!.disabled,
style: TextStyle(
fontSize: 12,
color: list.enabled == true
? appConfigProvider.useThemeColorForStatus == true
? Theme.of(context).colorScheme.primary
: Colors.green
: appConfigProvider.useThemeColorForStatus == true
? Colors.grey
: Colors.red
),
)
],
)
],
),
isThreeLine: true,
tileColor: isSelected == true
? Theme.of(context).colorScheme.primaryContainer
: null,
contentPadding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16
),
selected: isSelected,
selectedTileColor: Theme.of(context).colorScheme.primaryContainer,
selectedColor: Theme.of(context).colorScheme.onSurface,
onTap: () => onSelect(list),
);
}
}

View file

@ -0,0 +1,312 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/screens/filters/selection/selection_lists.dart';
import 'package:adguard_home_manager/models/filtering.dart';
import 'package:adguard_home_manager/providers/filtering_provider.dart';
enum ListType { blacklist, whitelist }
class SelectionScreen extends StatefulWidget {
final bool isModal;
const SelectionScreen({
Key? key,
required this.isModal
}) : super(key: key);
@override
State<SelectionScreen> createState() => _SelectionScreenState();
}
class _SelectionScreenState extends State<SelectionScreen> with TickerProviderStateMixin {
late TabController _tabController;
late ScrollController _scrollController;
bool _isScrolled = false;
List<Filter> _selectedWhitelists = [];
List<Filter> _selectedBlacklists = [];
@override
void initState() {
super.initState();
_tabController = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
_scrollController = ScrollController()..addListener(() {
setState(() => _isScrolled = _scrollController.offset > 0);
});
}
void handleSelect(Filter list, ListType type) {
if (type == ListType.blacklist) {
final isContained = _selectedBlacklists.contains(list);
if (isContained) {
setState(() => _selectedBlacklists = _selectedBlacklists.where((l) => l != list).toList());
}
else {
setState(() => _selectedBlacklists.add(list));
}
}
else if (type == ListType.whitelist) {
final isContained = _selectedWhitelists.contains(list);
if (isContained) {
setState(() => _selectedWhitelists = _selectedWhitelists.where((l) => l != list).toList());
}
else {
setState(() => _selectedWhitelists.add(list));
}
}
}
@override
Widget build(BuildContext context) {
final filteringProvider = Provider.of<FilteringProvider>(context);
final somethingSelected = _selectedBlacklists.isNotEmpty || _selectedWhitelists.isNotEmpty;
void enableDisableSelected() {
}
void deleteSelected() {
}
if (widget.isModal == true) {
return Dialog(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 500
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.clear_rounded),
tooltip: AppLocalizations.of(context)!.close,
),
const SizedBox(width: 8),
Text(
AppLocalizations.of(context)!.selectionMode,
style: const TextStyle(
fontSize: 22
),
)
],
),
],
),
),
Expanded(
child: DefaultTabController(
length: 2,
child: Column(
children: [
TabBar(
controller: _tabController,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabs: [
_Tab(
icon: Icons.verified_user_rounded,
text: AppLocalizations.of(context)!.whitelists,
quantity: _selectedWhitelists.length
),
_Tab(
icon: Icons.gpp_bad_rounded,
text: AppLocalizations.of(context)!.blacklist,
quantity: _selectedBlacklists.length
),
]
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
SelectionList(
lists: filteringProvider.filtering!.whitelistFilters,
selectedLists: _selectedWhitelists,
onSelect: (list) => handleSelect(list, ListType.whitelist),
selectAll: () => setState(() => _selectedWhitelists = filteringProvider.filtering!.whitelistFilters),
unselectAll: () => setState(() => [])
),
SelectionList(
lists: filteringProvider.filtering!.filters,
selectedLists: _selectedBlacklists,
onSelect: (list) => handleSelect(list, ListType.blacklist),
selectAll: () => setState(() => _selectedBlacklists = filteringProvider.filtering!.filters),
unselectAll: () => setState(() => _selectedBlacklists = [])
),
]
),
)
],
)
),
)
],
),
),
);
}
else {
return Dialog.fullscreen(
child: Stack(
children: [
DefaultTabController(
length: 2,
child: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: ((context, innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
leading: CloseButton(
onPressed: () => Navigator.pop(context),
),
title: Text(AppLocalizations.of(context)!.selectionMode),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
centerTitle: false,
bottom: TabBar(
controller: _tabController,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabs: [
_Tab(
icon: Icons.verified_user_rounded,
text: AppLocalizations.of(context)!.whitelists,
quantity: _selectedWhitelists.length
),
_Tab(
icon: Icons.gpp_bad_rounded,
text: AppLocalizations.of(context)!.blacklist,
quantity: _selectedBlacklists.length
),
]
)
),
)
];
}),
body: TabBarView(
controller: _tabController,
children: [
SelectionSliverList(
lists: filteringProvider.filtering!.whitelistFilters,
selectedLists: _selectedWhitelists,
onSelect: (list) => handleSelect(list, ListType.whitelist),
selectAll: () => setState(() => _selectedWhitelists = filteringProvider.filtering!.whitelistFilters),
unselectAll: () => setState(() => _selectedWhitelists = []),
),
SelectionSliverList(
lists: filteringProvider.filtering!.filters,
selectedLists: _selectedBlacklists,
onSelect: (list) => handleSelect(list, ListType.blacklist),
selectAll: () => setState(() => _selectedBlacklists = filteringProvider.filtering!.filters),
unselectAll: () => setState(() => _selectedBlacklists = []),
),
]
)
)
),
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.ease,
right: 16,
bottom: _isScrolled ? -150 : 16,
child: Column(
children: [
FloatingActionButton.small(
onPressed: somethingSelected == true
? () => enableDisableSelected()
: null,
tooltip: AppLocalizations.of(context)!.enableDisableSelected,
child: Icon(
Icons.shield_rounded,
color: somethingSelected == true
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.secondary,
),
),
const SizedBox(height: 16),
FloatingActionButton.small(
onPressed: somethingSelected == true
? () => deleteSelected()
: null,
tooltip: AppLocalizations.of(context)!.deleteSelected,
child: Icon(
Icons.delete_rounded,
color: somethingSelected == true
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.secondary,
),
),
],
),
)
],
),
);
}
}
}
class _Tab extends StatelessWidget {
final IconData icon;
final String text;
final int quantity;
const _Tab({
Key? key,
required this.icon,
required this.text,
required this.quantity
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon),
const SizedBox(width: 8),
Text(text),
const SizedBox(width: 8),
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).colorScheme.primaryContainer
),
child: Text(
quantity.toString(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: Theme.of(context).colorScheme.onPrimaryContainer
),
),
)
],
),
);
}
}

View file

@ -1,365 +0,0 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/widgets/custom_list_tile.dart';
import 'package:adguard_home_manager/models/filtering.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
import 'package:adguard_home_manager/providers/filtering_provider.dart';
class SelectionScreen extends StatefulWidget {
final bool isModal;
const SelectionScreen({
Key? key,
required this.isModal
}) : super(key: key);
@override
State<SelectionScreen> createState() => _SelectionScreenState();
}
class _SelectionScreenState extends State<SelectionScreen> with TickerProviderStateMixin {
late TabController _tabController;
List<Filter> _selectedLists = [];
@override
void initState() {
super.initState();
_tabController = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
}
void handleSelect(Filter list) {
final isContained = _selectedLists.contains(list);
if (isContained) {
setState(() => _selectedLists = _selectedLists.where((l) => l != list).toList());
}
else {
setState(() => _selectedLists.add(list));
}
}
@override
Widget build(BuildContext context) {
final filteringProvider = Provider.of<FilteringProvider>(context);
if (widget.isModal == true) {
return Dialog(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 500
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.clear_rounded),
tooltip: AppLocalizations.of(context)!.close,
),
const SizedBox(width: 8),
Text(
AppLocalizations.of(context)!.selectionMode,
style: const TextStyle(
fontSize: 22
),
)
],
),
],
),
),
Expanded(
child: DefaultTabController(
length: 2,
child: Column(
children: [
TabBar(
controller: _tabController,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabs: [
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.verified_user_rounded),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.whitelists,)
],
),
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.gpp_bad_rounded),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.blacklists)
],
),
),
]
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_List(
lists: filteringProvider.filtering!.whitelistFilters,
selectedLists: _selectedLists,
onSelect: handleSelect,
),
_List(
lists: filteringProvider.filtering!.filters,
selectedLists: _selectedLists,
onSelect: handleSelect,
),
]
),
)
],
)
),
)
],
),
),
);
}
else {
return Dialog.fullscreen(
child: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: ((context, innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
leading: CloseButton(
onPressed: () => Navigator.pop(context),
),
title: Text(AppLocalizations.of(context)!.selectionMode),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
centerTitle: false,
bottom: TabBar(
controller: _tabController,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabs: [
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.verified_user_rounded),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.whitelists,)
],
),
),
Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.gpp_bad_rounded),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.blacklists)
],
),
),
]
)
),
)
];
}),
body: TabBarView(
controller: _tabController,
children: [
_SliverList(
lists: filteringProvider.filtering!.whitelistFilters,
selectedLists: _selectedLists,
onSelect: handleSelect,
),
_SliverList(
lists: filteringProvider.filtering!.filters,
selectedLists: _selectedLists,
onSelect: handleSelect,
),
]
)
)
),
);
}
}
}
class _SliverList extends StatelessWidget {
final List<Filter> lists;
final List<Filter> selectedLists;
final void Function(Filter) onSelect;
const _SliverList({
Key? key,
required this.lists,
required this.selectedLists,
required this.onSelect,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final appConfigProvider = Provider.of<AppConfigProvider>(context);
return SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
if (lists.isNotEmpty) SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => CustomListTile(
title: lists[index].name,
subtitle: lists[index].url,
color: selectedLists.contains(lists[index])
? Theme.of(context).colorScheme.primaryContainer
: null,
trailing: Column(
children: [
Icon(
lists[index].enabled == true
? Icons.check_rounded
: Icons.close_rounded,
size: 12,
color: lists[index].enabled == true
? appConfigProvider.useThemeColorForStatus == true
? Theme.of(context).colorScheme.primary
: Colors.green
: appConfigProvider.useThemeColorForStatus == true
? Colors.grey
: Colors.red
),
const SizedBox(height: 4),
Text(
lists[index].enabled == true
? AppLocalizations.of(context)!.enabled
: AppLocalizations.of(context)!.disabled,
style: TextStyle(
fontSize: 10,
color: lists[index].enabled == true
? appConfigProvider.useThemeColorForStatus == true
? Theme.of(context).colorScheme.primary
: Colors.green
: appConfigProvider.useThemeColorForStatus == true
? Colors.grey
: Colors.red
),
)
],
),
onTap: () => onSelect(lists[index]),
),
childCount: lists.length
),
),
if (lists.isEmpty) SliverFillRemaining(
child: Center(
child: Text(
AppLocalizations.of(context)!.noItems,
style: TextStyle(
fontSize: 22,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
)
)
)
],
);
},
),
);
}
}
class _List extends StatelessWidget {
final List<Filter> lists;
final List<Filter> selectedLists;
final void Function(Filter) onSelect;
const _List({
Key? key,
required this.lists,
required this.selectedLists,
required this.onSelect,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final appConfigProvider = Provider.of<AppConfigProvider>(context);
return ListView.builder(
itemCount: lists.length,
itemBuilder: (context, index) => CustomListTile(
title: lists[index].name,
subtitle: lists[index].url,
color: selectedLists.contains(lists[index])
? Theme.of(context).colorScheme.primaryContainer
: null,
trailing: Column(
children: [
Icon(
lists[index].enabled == true
? Icons.check_rounded
: Icons.close_rounded,
size: 12,
color: lists[index].enabled == true
? appConfigProvider.useThemeColorForStatus == true
? Theme.of(context).colorScheme.primary
: Colors.green
: appConfigProvider.useThemeColorForStatus == true
? Colors.grey
: Colors.red
),
const SizedBox(height: 4),
Text(
lists[index].enabled == true
? AppLocalizations.of(context)!.enabled
: AppLocalizations.of(context)!.disabled,
style: TextStyle(
fontSize: 10,
color: lists[index].enabled == true
? appConfigProvider.useThemeColorForStatus == true
? Theme.of(context).colorScheme.primary
: Colors.green
: appConfigProvider.useThemeColorForStatus == true
? Colors.grey
: Colors.red
),
)
],
),
onTap: () => onSelect(lists[index]),
),
);
}
}