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,67 +11,101 @@ 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() { if (Platform.isAndroid || Platform.isIOS) {
return TabBarView( return Scaffold(
controller: tabController, body: DefaultTabController(
children: [ length: 3,
ClientsList( child: NestedScrollView(
type: 'allowed', controller: _scrollController,
scrollController: scrollController, headerSliverBuilder: ((context, innerBoxIsScrolled) {
loadStatus: clientsProvider.loadStatus, return [
data: clientsProvider.loadStatus == LoadStatus.loaded SliverOverlapAbsorber(
? clientsProvider.clients!.clientsAllowedBlocked!.allowedClients : [], handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverSafeArea(
top: false,
sliver: SliverAppBar(
title: Text(AppLocalizations.of(context)!.accessSettings),
pinned: true,
floating: true,
centerTitle: false,
forceElevated: innerBoxIsScrolled,
surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
bottom: PreferredSize(
preferredSize: const Size(double.maxFinite, 50),
child: _Tabs(tabController: _tabController)
)
), ),
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, body: _TabsView(
data: clientsProvider.loadStatus == LoadStatus.loaded tabController: _tabController,
? clientsProvider.clients!.clientsAllowedBlocked!.blockedHosts : [], scrollController: _scrollController
)
)
), ),
]
); );
} }
else {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context)!.accessSettings),
centerTitle: false,
bottom: PreferredSize(
preferredSize: const Size(double.maxFinite, 50),
child: _Tabs(tabController: _tabController)
)
),
body: _TabsView(
tabController: _tabController,
scrollController: _scrollController
)
);
}
}
}
PreferredSizeWidget tabBar() { class _Tabs extends StatelessWidget {
final TabController tabController;
const _Tabs({
required this.tabController,
});
@override
Widget build(BuildContext context) {
return TabBar( return TabBar(
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(
@ -103,46 +137,46 @@ class _AccessSettingsState extends State<AccessSettings> with TickerProviderStat
] ]
); );
} }
}
if (Platform.isAndroid || Platform.isIOS) { class _TabsView extends StatelessWidget {
return Scaffold( final TabController tabController;
body: DefaultTabController( final ScrollController scrollController;
length: 3,
child: NestedScrollView( const _TabsView({
controller: scrollController, required this.tabController,
headerSliverBuilder: ((context, innerBoxIsScrolled) { required this.scrollController,
return [ });
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), @override
sliver: SliverSafeArea( Widget build(BuildContext context) {
top: false, final clientsProvider = Provider.of<ClientsProvider>(context);
sliver: SliverAppBar(
title: Text(AppLocalizations.of(context)!.accessSettings), return TabBarView(
pinned: true, controller: tabController,
floating: true, children: [
centerTitle: false, ClientsList(
forceElevated: innerBoxIsScrolled, type: AccessSettingsList.allowed,
surfaceTintColor: isDesktop(width) ? Colors.transparent : null, scrollController: scrollController,
bottom: tabBar() 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,
body: body() loadStatus: clientsProvider.loadStatus,
) data: clientsProvider.loadStatus == LoadStatus.loaded
? clientsProvider.clients!.clientsAllowedBlocked!.blockedHosts : [],
), ),
); ]
}
else {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context)!.accessSettings),
centerTitle: false,
bottom: tabBar()
),
body: body(),
); );
} }
} }
}

View file

@ -1,25 +1,74 @@
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 @override
State<AddClientModal> createState() => _AddClientModalState(); Widget build(BuildContext context) {
if (dialog == true) {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Dialog(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400
),
child: _Content(
type: type,
onConfirm: onConfirm,
)
),
),
);
}
else {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).dialogBackgroundColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(28),
topRight: Radius.circular(28)
)
),
child: _Content(
type: type,
onConfirm: onConfirm,
)
),
);
}
}
} }
class _AddClientModalState extends State<AddClientModal> { class _Content extends StatefulWidget {
TextEditingController fieldController = TextEditingController(); 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; bool validData = false;
void checkValidValues() { void checkValidValues() {
@ -35,13 +84,13 @@ class _AddClientModalState extends State<AddClientModal> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
IconData icon() { IconData icon() {
switch (widget.type) { switch (widget.type) {
case 'allowed': case AccessSettingsList.allowed:
return Icons.check; return Icons.check;
case 'disallowed': case AccessSettingsList.disallowed:
return Icons.block; return Icons.block;
case 'domains': case AccessSettingsList.domains:
return Icons.link_rounded; return Icons.link_rounded;
default: default:
@ -51,13 +100,13 @@ class _AddClientModalState extends State<AddClientModal> {
String title() { String title() {
switch (widget.type) { switch (widget.type) {
case 'allowed': case AccessSettingsList.allowed:
return AppLocalizations.of(context)!.allowClient; return AppLocalizations.of(context)!.allowClient;
case 'disallowed': case AccessSettingsList.disallowed:
return AppLocalizations.of(context)!.disallowClient; return AppLocalizations.of(context)!.disallowClient;
case 'domains': case AccessSettingsList.domains:
return AppLocalizations.of(context)!.disallowedDomains; return AppLocalizations.of(context)!.disallowedDomains;
default: default:
@ -65,7 +114,6 @@ class _AddClientModalState extends State<AddClientModal> {
} }
} }
Widget content() {
return Padding( return Padding(
padding: const EdgeInsets.all(24), padding: const EdgeInsets.all(24),
child: Column( child: Column(
@ -111,9 +159,9 @@ class _AddClientModalState extends State<AddClientModal> {
Radius.circular(10) Radius.circular(10)
) )
), ),
helperText: widget.type == 'allowed' || widget.type == 'disallowed' helperText: widget.type == AccessSettingsList.allowed || widget.type == AccessSettingsList.disallowed
? AppLocalizations.of(context)!.addClientFieldDescription : null, ? AppLocalizations.of(context)!.addClientFieldDescription : null,
labelText: widget.type == 'allowed' || widget.type == 'disallowed' labelText: widget.type == AccessSettingsList.allowed || widget.type == AccessSettingsList.disallowed
? AppLocalizations.of(context)!.clientIdentifier ? AppLocalizations.of(context)!.clientIdentifier
: AppLocalizations.of(context)!.domain, : AppLocalizations.of(context)!.domain,
), ),
@ -155,34 +203,4 @@ class _AddClientModalState extends State<AddClientModal> {
), ),
); );
} }
if (widget.dialog == true) {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Dialog(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400
),
child: content()
),
),
);
}
else {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).dialogBackgroundColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(28),
topRight: Radius.circular(28)
)
),
child: content()
),
);
}
}
} }

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: