Fixed tabbar position

This commit is contained in:
Juan Gilsanz Polo 2023-11-19 04:56:51 +01:00
parent 96d84e1565
commit f14828ae19
7 changed files with 306 additions and 253 deletions

View file

@ -8,6 +8,8 @@ import 'package:adguard_home_manager/providers/servers_provider.dart';
import 'package:adguard_home_manager/models/clients_allowed_blocked.dart'; import 'package:adguard_home_manager/models/clients_allowed_blocked.dart';
import 'package:adguard_home_manager/constants/enums.dart'; import 'package:adguard_home_manager/constants/enums.dart';
enum AccessSettingsList { allowed, disallowed, domains }
class ClientsProvider with ChangeNotifier { class ClientsProvider with ChangeNotifier {
ServersProvider? _serversProvider; ServersProvider? _serversProvider;
StatusProvider? _statusProvider; StatusProvider? _statusProvider;
@ -195,20 +197,20 @@ class ClientsProvider with ChangeNotifier {
} }
} }
Future<Map<String, dynamic>> addClientList(String item, String type) async { Future<Map<String, dynamic>> addClientList(String item, AccessSettingsList type) async {
Map<String, List<String>> body = { Map<String, List<String>> body = {
"allowed_clients": clients!.clientsAllowedBlocked?.allowedClients ?? [], "allowed_clients": clients!.clientsAllowedBlocked?.allowedClients ?? [],
"disallowed_clients": clients!.clientsAllowedBlocked?.disallowedClients ?? [], "disallowed_clients": clients!.clientsAllowedBlocked?.disallowedClients ?? [],
"blocked_hosts": clients!.clientsAllowedBlocked?.blockedHosts ?? [], "blocked_hosts": clients!.clientsAllowedBlocked?.blockedHosts ?? [],
}; };
if (type == 'allowed') { if (type == AccessSettingsList.allowed) {
body['allowed_clients']!.add(item); body['allowed_clients']!.add(item);
} }
else if (type == 'disallowed') { else if (type == AccessSettingsList.disallowed) {
body['disallowed_clients']!.add(item); body['disallowed_clients']!.add(item);
} }
else if (type == 'domains') { else if (type == AccessSettingsList.domains) {
body['blocked_hosts']!.add(item); body['blocked_hosts']!.add(item);
} }
@ -239,20 +241,20 @@ class ClientsProvider with ChangeNotifier {
} }
} }
Future<Map<String, dynamic>> removeClientList(String client, String type) async { Future<Map<String, dynamic>> removeClientList(String client, AccessSettingsList type) async {
Map<String, List<String>> body = { Map<String, List<String>> body = {
"allowed_clients": clients!.clientsAllowedBlocked?.allowedClients ?? [], "allowed_clients": clients!.clientsAllowedBlocked?.allowedClients ?? [],
"disallowed_clients": clients!.clientsAllowedBlocked?.disallowedClients ?? [], "disallowed_clients": clients!.clientsAllowedBlocked?.disallowedClients ?? [],
"blocked_hosts": clients!.clientsAllowedBlocked?.blockedHosts ?? [], "blocked_hosts": clients!.clientsAllowedBlocked?.blockedHosts ?? [],
}; };
if (type == 'allowed') { if (type == AccessSettingsList.allowed) {
body['allowed_clients'] = body['allowed_clients']!.where((c) => c != client).toList(); body['allowed_clients'] = body['allowed_clients']!.where((c) => c != client).toList();
} }
else if (type == 'disallowed') { else if (type == AccessSettingsList.disallowed) {
body['disallowed_clients'] = body['disallowed_clients']!.where((c) => c != client).toList(); body['disallowed_clients'] = body['disallowed_clients']!.where((c) => c != client).toList();
} }
else if (type == 'domains') { else if (type == AccessSettingsList.domains) {
body['blocked_hosts'] = body['blocked_hosts']!.where((c) => c != client).toList(); body['blocked_hosts'] = body['blocked_hosts']!.where((c) => c != client).toList();
} }

View file

@ -18,12 +18,12 @@ class FiltersTabsView extends StatefulWidget {
final void Function(Filter, String) onOpenDetailsModal; final void Function(Filter, String) onOpenDetailsModal;
const FiltersTabsView({ const FiltersTabsView({
Key? key, super.key,
required this.appConfigProvider, required this.appConfigProvider,
required this.actions, required this.actions,
required this.onOpenDetailsModal, required this.onOpenDetailsModal,
required this.onRemoveCustomRule required this.onRemoveCustomRule
}) : super(key: key); });
@override @override
State<FiltersTabsView> createState() => _FiltersTabsViewState(); State<FiltersTabsView> createState() => _FiltersTabsViewState();
@ -70,6 +70,7 @@ class _FiltersTabsViewState extends State<FiltersTabsView> with TickerProviderSt
controller: tabController, controller: tabController,
isScrollable: true, isScrollable: true,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant, unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabAlignment: TabAlignment.start,
tabs: [ tabs: [
Tab( Tab(
child: Row( child: Row(

View file

@ -152,11 +152,10 @@ class _Tile extends StatelessWidget {
final bool isSelected; final bool isSelected;
const _Tile({ const _Tile({
Key? key,
required this.list, required this.list,
required this.onSelect, required this.onSelect,
required this.isSelected, required this.isSelected,
}) : super(key: key); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {

View file

@ -310,7 +310,6 @@ class _SelectionScreenState extends State<SelectionScreen> with TickerProviderSt
) )
) )
), ),
], ],
), ),
); );

View file

@ -11,105 +11,38 @@ import 'package:adguard_home_manager/constants/enums.dart';
import 'package:adguard_home_manager/providers/clients_provider.dart'; import 'package:adguard_home_manager/providers/clients_provider.dart';
class AccessSettings extends StatefulWidget { class AccessSettings extends StatefulWidget {
const AccessSettings({Key? key}) : super(key: key); const AccessSettings({super.key});
@override @override
State<AccessSettings> createState() => _AccessSettingsState(); State<AccessSettings> createState() => _AccessSettingsState();
} }
class _AccessSettingsState extends State<AccessSettings> with TickerProviderStateMixin { class _AccessSettingsState extends State<AccessSettings> with TickerProviderStateMixin {
final ScrollController scrollController = ScrollController(); late ScrollController _scrollController;
late TabController tabController; late TabController _tabController;
@override @override
void initState() { void initState() {
Provider.of<ClientsProvider>(context, listen: false).fetchClients(updateLoading: true); Provider.of<ClientsProvider>(context, listen: false).fetchClients(updateLoading: true);
super.initState(); super.initState();
tabController = TabController( _tabController = TabController(
initialIndex: 0, initialIndex: 0,
length: 3, length: 3,
vsync: this, vsync: this,
); );
_scrollController = ScrollController();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final clientsProvider = Provider.of<ClientsProvider>(context);
final width = MediaQuery.of(context).size.width; final width = MediaQuery.of(context).size.width;
Widget body() {
return TabBarView(
controller: tabController,
children: [
ClientsList(
type: 'allowed',
scrollController: scrollController,
loadStatus: clientsProvider.loadStatus,
data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.allowedClients : [],
),
ClientsList(
type: 'disallowed',
scrollController: scrollController,
loadStatus: clientsProvider.loadStatus,
data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.disallowedClients : [],
),
ClientsList(
type: 'domains',
scrollController: scrollController,
loadStatus: clientsProvider.loadStatus,
data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.blockedHosts : [],
),
]
);
}
PreferredSizeWidget tabBar() {
return TabBar(
controller: tabController,
isScrollable: true,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabs: [
Tab(
child: Row(
children: [
const Icon(Icons.check),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.allowedClients)
],
),
),
Tab(
child: Row(
children: [
const Icon(Icons.block),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.disallowedClients)
],
),
),
Tab(
child: Row(
children: [
const Icon(Icons.link_rounded),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.disallowedDomains)
],
),
),
]
);
}
if (Platform.isAndroid || Platform.isIOS) { if (Platform.isAndroid || Platform.isIOS) {
return Scaffold( return Scaffold(
body: DefaultTabController( body: DefaultTabController(
length: 3, length: 3,
child: NestedScrollView( child: NestedScrollView(
controller: scrollController, controller: _scrollController,
headerSliverBuilder: ((context, innerBoxIsScrolled) { headerSliverBuilder: ((context, innerBoxIsScrolled) {
return [ return [
SliverOverlapAbsorber( SliverOverlapAbsorber(
@ -123,13 +56,19 @@ class _AccessSettingsState extends State<AccessSettings> with TickerProviderStat
centerTitle: false, centerTitle: false,
forceElevated: innerBoxIsScrolled, forceElevated: innerBoxIsScrolled,
surfaceTintColor: isDesktop(width) ? Colors.transparent : null, surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
bottom: tabBar() bottom: PreferredSize(
preferredSize: const Size(double.maxFinite, 50),
child: _Tabs(tabController: _tabController)
)
), ),
), ),
) )
]; ];
}), }),
body: body() body: _TabsView(
tabController: _tabController,
scrollController: _scrollController
)
) )
), ),
); );
@ -139,10 +78,105 @@ class _AccessSettingsState extends State<AccessSettings> with TickerProviderStat
appBar: AppBar( appBar: AppBar(
title: Text(AppLocalizations.of(context)!.accessSettings), title: Text(AppLocalizations.of(context)!.accessSettings),
centerTitle: false, centerTitle: false,
bottom: tabBar() bottom: PreferredSize(
preferredSize: const Size(double.maxFinite, 50),
child: _Tabs(tabController: _tabController)
)
), ),
body: body(), body: _TabsView(
tabController: _tabController,
scrollController: _scrollController
)
); );
} }
} }
} }
class _Tabs extends StatelessWidget {
final TabController tabController;
const _Tabs({
required this.tabController,
});
@override
Widget build(BuildContext context) {
return TabBar(
controller: tabController,
isScrollable: true,
unselectedLabelColor: Theme.of(context).colorScheme.onSurfaceVariant,
tabAlignment: TabAlignment.start,
tabs: [
Tab(
child: Row(
children: [
const Icon(Icons.check),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.allowedClients)
],
),
),
Tab(
child: Row(
children: [
const Icon(Icons.block),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.disallowedClients)
],
),
),
Tab(
child: Row(
children: [
const Icon(Icons.link_rounded),
const SizedBox(width: 8),
Text(AppLocalizations.of(context)!.disallowedDomains)
],
),
),
]
);
}
}
class _TabsView extends StatelessWidget {
final TabController tabController;
final ScrollController scrollController;
const _TabsView({
required this.tabController,
required this.scrollController,
});
@override
Widget build(BuildContext context) {
final clientsProvider = Provider.of<ClientsProvider>(context);
return TabBarView(
controller: tabController,
children: [
ClientsList(
type: AccessSettingsList.allowed,
scrollController: scrollController,
loadStatus: clientsProvider.loadStatus,
data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.allowedClients : [],
),
ClientsList(
type: AccessSettingsList.disallowed,
scrollController: scrollController,
loadStatus: clientsProvider.loadStatus,
data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.disallowedClients : [],
),
ClientsList(
type: AccessSettingsList.domains,
scrollController: scrollController,
loadStatus: clientsProvider.loadStatus,
data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.blockedHosts : [],
),
]
);
}
}

View file

@ -1,162 +1,23 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class AddClientModal extends StatefulWidget { import 'package:adguard_home_manager/providers/clients_provider.dart';
final String type;
final void Function(String, String) onConfirm; class AddClientModal extends StatelessWidget {
final AccessSettingsList type;
final void Function(String, AccessSettingsList) onConfirm;
final bool dialog; final bool dialog;
const AddClientModal({ const AddClientModal({
Key? key, super.key,
required this.type, required this.type,
required this.onConfirm, required this.onConfirm,
required this.dialog, required this.dialog,
}) : super(key: key); });
@override
State<AddClientModal> createState() => _AddClientModalState();
}
class _AddClientModalState extends State<AddClientModal> {
TextEditingController fieldController = TextEditingController();
bool validData = false;
void checkValidValues() {
if (fieldController.text != '') {
setState(() => validData = true);
}
else {
setState(() => validData = false);
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
IconData icon() { if (dialog == true) {
switch (widget.type) {
case 'allowed':
return Icons.check;
case 'disallowed':
return Icons.block;
case 'domains':
return Icons.link_rounded;
default:
return Icons.check;
}
}
String title() {
switch (widget.type) {
case 'allowed':
return AppLocalizations.of(context)!.allowClient;
case 'disallowed':
return AppLocalizations.of(context)!.disallowClient;
case 'domains':
return AppLocalizations.of(context)!.disallowedDomains;
default:
return "";
}
}
Widget content() {
return Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Wrap(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon(),
size: 24,
color: Theme.of(context).listTileTheme.iconColor
),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
color: Theme.of(context).colorScheme.onSurface
),
),
],
),
),
TextFormField(
controller: fieldController,
onChanged: (_) => checkValidValues(),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.link_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10)
)
),
helperText: widget.type == 'allowed' || widget.type == 'disallowed'
? AppLocalizations.of(context)!.addClientFieldDescription : null,
labelText: widget.type == 'allowed' || widget.type == 'disallowed'
? AppLocalizations.of(context)!.clientIdentifier
: AppLocalizations.of(context)!.domain,
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(AppLocalizations.of(context)!.cancel)
),
const SizedBox(width: 16),
TextButton(
onPressed: validData == true
? () {
Navigator.pop(context);
widget.onConfirm(fieldController.text, widget.type);
}
: null,
child: Text(
AppLocalizations.of(context)!.confirm,
style: TextStyle(
color: validData == true
? Theme.of(context).colorScheme.primary
: Colors.grey
),
)
),
],
),
),
],
),
);
}
if (widget.dialog == true) {
return Padding( return Padding(
padding: MediaQuery.of(context).viewInsets, padding: MediaQuery.of(context).viewInsets,
child: Dialog( child: Dialog(
@ -164,7 +25,10 @@ class _AddClientModalState extends State<AddClientModal> {
constraints: const BoxConstraints( constraints: const BoxConstraints(
maxWidth: 400 maxWidth: 400
), ),
child: content() child: _Content(
type: type,
onConfirm: onConfirm,
)
), ),
), ),
); );
@ -180,9 +44,163 @@ class _AddClientModalState extends State<AddClientModal> {
topRight: Radius.circular(28) topRight: Radius.circular(28)
) )
), ),
child: content() child: _Content(
type: type,
onConfirm: onConfirm,
)
), ),
); );
} }
} }
} }
class _Content extends StatefulWidget {
final AccessSettingsList type;
final void Function(String, AccessSettingsList) onConfirm;
const _Content({
required this.type,
required this.onConfirm,
});
@override
State<_Content> createState() => _ContentState();
}
class _ContentState extends State<_Content> {
TextEditingController fieldController = TextEditingController();
bool validData = false;
void checkValidValues() {
if (fieldController.text != '') {
setState(() => validData = true);
}
else {
setState(() => validData = false);
}
}
@override
Widget build(BuildContext context) {
IconData icon() {
switch (widget.type) {
case AccessSettingsList.allowed:
return Icons.check;
case AccessSettingsList.disallowed:
return Icons.block;
case AccessSettingsList.domains:
return Icons.link_rounded;
default:
return Icons.check;
}
}
String title() {
switch (widget.type) {
case AccessSettingsList.allowed:
return AppLocalizations.of(context)!.allowClient;
case AccessSettingsList.disallowed:
return AppLocalizations.of(context)!.disallowClient;
case AccessSettingsList.domains:
return AppLocalizations.of(context)!.disallowedDomains;
default:
return "";
}
}
return Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Wrap(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon(),
size: 24,
color: Theme.of(context).listTileTheme.iconColor
),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
color: Theme.of(context).colorScheme.onSurface
),
),
],
),
),
TextFormField(
controller: fieldController,
onChanged: (_) => checkValidValues(),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.link_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10)
)
),
helperText: widget.type == AccessSettingsList.allowed || widget.type == AccessSettingsList.disallowed
? AppLocalizations.of(context)!.addClientFieldDescription : null,
labelText: widget.type == AccessSettingsList.allowed || widget.type == AccessSettingsList.disallowed
? AppLocalizations.of(context)!.clientIdentifier
: AppLocalizations.of(context)!.domain,
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(AppLocalizations.of(context)!.cancel)
),
const SizedBox(width: 16),
TextButton(
onPressed: validData == true
? () {
Navigator.pop(context);
widget.onConfirm(fieldController.text, widget.type);
}
: null,
child: Text(
AppLocalizations.of(context)!.confirm,
style: TextStyle(
color: validData == true
? Theme.of(context).colorScheme.primary
: Colors.grey
),
)
),
],
),
),
],
),
);
}
}

View file

@ -18,18 +18,18 @@ import 'package:adguard_home_manager/providers/clients_provider.dart';
import 'package:adguard_home_manager/classes/process_modal.dart'; import 'package:adguard_home_manager/classes/process_modal.dart';
class ClientsList extends StatefulWidget { class ClientsList extends StatefulWidget {
final String type; final AccessSettingsList type;
final ScrollController scrollController; final ScrollController scrollController;
final LoadStatus loadStatus; final LoadStatus loadStatus;
final List<String> data; final List<String> data;
const ClientsList({ const ClientsList({
Key? key, super.key,
required this.type, required this.type,
required this.scrollController, required this.scrollController,
required this.loadStatus, required this.loadStatus,
required this.data, required this.data,
}) : super(key: key); });
@override @override
State<ClientsList> createState() => _ClientsListState(); State<ClientsList> createState() => _ClientsListState();
@ -79,20 +79,20 @@ class _ClientsListState extends State<ClientsList> {
} }
} }
void confirmRemoveItem(String client, String type) async { void confirmRemoveItem(String client, AccessSettingsList type) async {
Map<String, List<String>> body = { Map<String, List<String>> body = {
"allowed_clients": clientsProvider.clients!.clientsAllowedBlocked?.allowedClients ?? [], "allowed_clients": clientsProvider.clients!.clientsAllowedBlocked?.allowedClients ?? [],
"disallowed_clients": clientsProvider.clients!.clientsAllowedBlocked?.disallowedClients ?? [], "disallowed_clients": clientsProvider.clients!.clientsAllowedBlocked?.disallowedClients ?? [],
"blocked_hosts": clientsProvider.clients!.clientsAllowedBlocked?.blockedHosts ?? [], "blocked_hosts": clientsProvider.clients!.clientsAllowedBlocked?.blockedHosts ?? [],
}; };
if (type == 'allowed') { if (type == AccessSettingsList.allowed) {
body['allowed_clients'] = body['allowed_clients']!.where((c) => c != client).toList(); body['allowed_clients'] = body['allowed_clients']!.where((c) => c != client).toList();
} }
else if (type == 'disallowed') { else if (type == AccessSettingsList.disallowed) {
body['disallowed_clients'] = body['disallowed_clients']!.where((c) => c != client).toList(); body['disallowed_clients'] = body['disallowed_clients']!.where((c) => c != client).toList();
} }
else if (type == 'domains') { else if (type == AccessSettingsList.domains) {
body['blocked_hosts'] = body['blocked_hosts']!.where((c) => c != client).toList(); body['blocked_hosts'] = body['blocked_hosts']!.where((c) => c != client).toList();
} }
@ -128,7 +128,7 @@ class _ClientsListState extends State<ClientsList> {
} }
} }
void confirmAddItem(String item, String type) async { void confirmAddItem(String item, AccessSettingsList type) async {
ProcessModal processModal = ProcessModal(context: context); ProcessModal processModal = ProcessModal(context: context);
processModal.open(AppLocalizations.of(context)!.removingClient); processModal.open(AppLocalizations.of(context)!.removingClient);
@ -163,13 +163,13 @@ class _ClientsListState extends State<ClientsList> {
String description() { String description() {
switch (widget.type) { switch (widget.type) {
case 'allowed': case AccessSettingsList.allowed:
return AppLocalizations.of(context)!.allowedClientsDescription; return AppLocalizations.of(context)!.allowedClientsDescription;
case 'disallowed': case AccessSettingsList.disallowed:
return AppLocalizations.of(context)!.blockedClientsDescription; return AppLocalizations.of(context)!.blockedClientsDescription;
case 'domains': case AccessSettingsList.domains:
return AppLocalizations.of(context)!.disallowedDomainsDescription; return AppLocalizations.of(context)!.disallowedDomainsDescription;
default: default:
@ -179,13 +179,13 @@ class _ClientsListState extends State<ClientsList> {
String noItems() { String noItems() {
switch (widget.type) { switch (widget.type) {
case 'allowed': case AccessSettingsList.allowed:
return AppLocalizations.of(context)!.noAllowedClients; return AppLocalizations.of(context)!.noAllowedClients;
case 'disallowed': case AccessSettingsList.disallowed:
return AppLocalizations.of(context)!.noBlockedClients; return AppLocalizations.of(context)!.noBlockedClients;
case 'domains': case AccessSettingsList.domains:
return AppLocalizations.of(context)!.noDisallowedDomains; return AppLocalizations.of(context)!.noDisallowedDomains;
default: default: