mirror of
https://github.com/JGeek00/adguard-home-manager.git
synced 2025-04-20 05:49:12 +00:00
Improvements clients view
This commit is contained in:
parent
dafff9b242
commit
769238cff9
3 changed files with 206 additions and 157 deletions
|
@ -131,7 +131,7 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
|
|||
);
|
||||
}
|
||||
|
||||
Widget tabBarView() {
|
||||
Widget tabBarView(bool sliver) {
|
||||
return TabBarView(
|
||||
controller: tabController,
|
||||
children: [
|
||||
|
@ -149,6 +149,7 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
|
|||
)
|
||||
)),
|
||||
splitView: false,
|
||||
sliver: sliver,
|
||||
),
|
||||
AddedList(
|
||||
scrollController: scrollController,
|
||||
|
@ -168,33 +169,33 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
|
|||
]
|
||||
);
|
||||
}
|
||||
|
||||
if (!(Platform.isAndroid || Platform.isIOS)) {
|
||||
if (width > 900) {
|
||||
return SplitView.material(
|
||||
hideDivider: true,
|
||||
flexWidth: const FlexWidth(mainViewFlexWidth: 1, secondaryViewFlexWidth: 2),
|
||||
placeholder: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Text(
|
||||
AppLocalizations.of(context)!.selectClientLeftColumn,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant
|
||||
),
|
||||
|
||||
if (width > 900) {
|
||||
return SplitView.material(
|
||||
hideDivider: true,
|
||||
flexWidth: const FlexWidth(mainViewFlexWidth: 1, secondaryViewFlexWidth: 2),
|
||||
placeholder: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Text(
|
||||
AppLocalizations.of(context)!.selectClientLeftColumn,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant
|
||||
),
|
||||
),
|
||||
),
|
||||
child: ClientsDesktopView(
|
||||
serversProvider: serversProvider,
|
||||
appConfigProvider: appConfigProvider,
|
||||
fetchClients: fetchClients,
|
||||
)
|
||||
);
|
||||
}
|
||||
else {
|
||||
),
|
||||
child: ClientsDesktopView(
|
||||
serversProvider: serversProvider,
|
||||
appConfigProvider: appConfigProvider,
|
||||
fetchClients: fetchClients,
|
||||
)
|
||||
);
|
||||
}
|
||||
else {
|
||||
if (!(Platform.isAndroid || Platform.isIOS)) {
|
||||
return DefaultTabController(
|
||||
length: 2,
|
||||
child: Scaffold(
|
||||
|
@ -217,87 +218,87 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
|
|||
],
|
||||
bottom: tabBar()
|
||||
),
|
||||
body: tabBarView(),
|
||||
body: tabBarView(false),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
else {
|
||||
return DefaultTabController(
|
||||
length: 2,
|
||||
child: NestedScrollView(
|
||||
controller: scrollController,
|
||||
headerSliverBuilder: ((context, innerBoxIsScrolled) {
|
||||
return [
|
||||
SliverOverlapAbsorber(
|
||||
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
|
||||
sliver: SliverAppBar(
|
||||
title: searchMode == true
|
||||
? Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchMode = false;
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.arrow_back_rounded)
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
onChanged: (value) => serversProvider.setSearchTermClients(value),
|
||||
decoration: InputDecoration(
|
||||
suffixIcon: IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.clear_rounded)
|
||||
else {
|
||||
return DefaultTabController(
|
||||
length: 2,
|
||||
child: NestedScrollView(
|
||||
controller: scrollController,
|
||||
headerSliverBuilder: ((context, innerBoxIsScrolled) {
|
||||
return [
|
||||
SliverOverlapAbsorber(
|
||||
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
|
||||
sliver: SliverAppBar(
|
||||
title: searchMode == true
|
||||
? Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchMode = false;
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.arrow_back_rounded)
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
onChanged: (value) => serversProvider.setSearchTermClients(value),
|
||||
decoration: InputDecoration(
|
||||
suffixIcon: IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.clear_rounded)
|
||||
),
|
||||
hintText: AppLocalizations.of(context)!.search,
|
||||
hintStyle: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
border: InputBorder.none,
|
||||
),
|
||||
hintText: AppLocalizations.of(context)!.search,
|
||||
hintStyle: const TextStyle(
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
border: InputBorder.none,
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
: Text(AppLocalizations.of(context)!.clients),
|
||||
pinned: true,
|
||||
floating: true,
|
||||
centerTitle: false,
|
||||
forceElevated: innerBoxIsScrolled,
|
||||
actions: [
|
||||
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
|
||||
IconButton(
|
||||
onPressed: () => setState(() => searchMode = true),
|
||||
icon: const Icon(Icons.search),
|
||||
tooltip: AppLocalizations.of(context)!.searchClients,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
]
|
||||
],
|
||||
bottom: tabBar()
|
||||
),
|
||||
)
|
||||
];
|
||||
}),
|
||||
body: tabBarView()
|
||||
)
|
||||
);
|
||||
)
|
||||
],
|
||||
)
|
||||
: Text(AppLocalizations.of(context)!.clients),
|
||||
pinned: true,
|
||||
floating: true,
|
||||
centerTitle: false,
|
||||
forceElevated: innerBoxIsScrolled,
|
||||
actions: [
|
||||
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
|
||||
IconButton(
|
||||
onPressed: () => setState(() => searchMode = true),
|
||||
icon: const Icon(Icons.search),
|
||||
tooltip: AppLocalizations.of(context)!.searchClients,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
]
|
||||
],
|
||||
bottom: tabBar()
|
||||
),
|
||||
)
|
||||
];
|
||||
}),
|
||||
body: tabBarView(true)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_split_view/flutter_split_view.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
@ -84,7 +86,7 @@ class _ClientsDesktopViewState extends State<ClientsDesktopView> with TickerPro
|
|||
);
|
||||
}
|
||||
|
||||
Widget tabBarView() {
|
||||
Widget tabBarView(bool sliver) {
|
||||
return TabBarView(
|
||||
controller: tabController,
|
||||
children: [
|
||||
|
@ -107,7 +109,8 @@ class _ClientsDesktopViewState extends State<ClientsDesktopView> with TickerPro
|
|||
);
|
||||
}),
|
||||
selectedClient: selectedActiveClient,
|
||||
splitView: true
|
||||
splitView: true,
|
||||
sliver: sliver,
|
||||
),
|
||||
AddedList(
|
||||
scrollController: scrollController,
|
||||
|
@ -134,69 +137,112 @@ class _ClientsDesktopViewState extends State<ClientsDesktopView> with TickerPro
|
|||
);
|
||||
}
|
||||
|
||||
return DefaultTabController(
|
||||
length: 2,
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: searchMode == true
|
||||
? Row(
|
||||
children: [
|
||||
IconButton(
|
||||
Widget title() {
|
||||
if (searchMode == true) {
|
||||
return Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchMode = false;
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.arrow_back_rounded)
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
onChanged: (value) => serversProvider.setSearchTermClients(value),
|
||||
decoration: InputDecoration(
|
||||
suffixIcon: IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchMode = false;
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.arrow_back_rounded)
|
||||
},
|
||||
icon: const Icon(Icons.clear_rounded)
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
onChanged: (value) => serversProvider.setSearchTermClients(value),
|
||||
decoration: InputDecoration(
|
||||
suffixIcon: IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
searchController.text = "";
|
||||
serversProvider.setSearchTermClients(null);
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.clear_rounded)
|
||||
),
|
||||
hintText: AppLocalizations.of(context)!.search,
|
||||
hintStyle: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
border: InputBorder.none,
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
: Text(AppLocalizations.of(context)!.clients),
|
||||
centerTitle: false,
|
||||
actions: [
|
||||
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
|
||||
IconButton(
|
||||
onPressed: () => setState(() => searchMode = true),
|
||||
icon: const Icon(Icons.search),
|
||||
tooltip: AppLocalizations.of(context)!.searchClients,
|
||||
hintText: AppLocalizations.of(context)!.search,
|
||||
hintStyle: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
border: InputBorder.none,
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
]
|
||||
)
|
||||
],
|
||||
bottom: tabBar()
|
||||
);
|
||||
}
|
||||
else {
|
||||
return Text(AppLocalizations.of(context)!.clients);
|
||||
}
|
||||
}
|
||||
|
||||
if (!(Platform.isAndroid || Platform.isIOS)) {
|
||||
return DefaultTabController(
|
||||
length: 2,
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: title(),
|
||||
centerTitle: false,
|
||||
actions: [
|
||||
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
|
||||
IconButton(
|
||||
onPressed: () => setState(() => searchMode = true),
|
||||
icon: const Icon(Icons.search),
|
||||
tooltip: AppLocalizations.of(context)!.searchClients,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
]
|
||||
],
|
||||
bottom: tabBar()
|
||||
),
|
||||
body: tabBarView(false),
|
||||
),
|
||||
body: tabBarView(),
|
||||
),
|
||||
);
|
||||
);
|
||||
}
|
||||
else {
|
||||
return DefaultTabController(
|
||||
length: 2,
|
||||
child: NestedScrollView(
|
||||
controller: scrollController,
|
||||
headerSliverBuilder: ((context, innerBoxIsScrolled) {
|
||||
return [
|
||||
SliverOverlapAbsorber(
|
||||
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
|
||||
sliver: SliverAppBar(
|
||||
title: title(),
|
||||
pinned: true,
|
||||
floating: true,
|
||||
centerTitle: false,
|
||||
forceElevated: innerBoxIsScrolled,
|
||||
actions: [
|
||||
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
|
||||
IconButton(
|
||||
onPressed: () => setState(() => searchMode = true),
|
||||
icon: const Icon(Icons.search),
|
||||
tooltip: AppLocalizations.of(context)!.searchClients,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
]
|
||||
],
|
||||
bottom: tabBar()
|
||||
),
|
||||
)
|
||||
];
|
||||
}),
|
||||
body: tabBarView(true)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -18,6 +18,7 @@ class ClientsList extends StatelessWidget {
|
|||
final void Function(AutoClient) onClientSelected;
|
||||
final AutoClient? selectedClient;
|
||||
final bool splitView;
|
||||
final bool sliver;
|
||||
|
||||
const ClientsList({
|
||||
Key? key,
|
||||
|
@ -27,7 +28,8 @@ class ClientsList extends StatelessWidget {
|
|||
required this.fetchClients,
|
||||
required this.onClientSelected,
|
||||
this.selectedClient,
|
||||
required this.splitView
|
||||
required this.splitView,
|
||||
required this.sliver
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
|
@ -36,7 +38,7 @@ class ClientsList extends StatelessWidget {
|
|||
listPadding: splitView == true
|
||||
? const EdgeInsets.only(top: 8)
|
||||
: null,
|
||||
noSliver: !(Platform.isAndroid || Platform.isIOS),
|
||||
noSliver: !sliver,
|
||||
loadingGenerator: () => SizedBox(
|
||||
width: double.maxFinite,
|
||||
height: MediaQuery.of(context).size.height-171,
|
||||
|
|
Loading…
Add table
Reference in a new issue