From d6b16b230c25474531b7c61b48c5079710c16f31 Mon Sep 17 00:00:00 2001 From: Juan Gilsanz Polo Date: Sun, 8 Sep 2024 19:03:57 +0200 Subject: [PATCH] Added split view --- .../clients/client/logs_list_client.dart | 6 +- .../logs/details/log_details_screen.dart | 8 +- lib/screens/logs/live/live_logs_list.dart | 90 ++++++++++++++++ lib/screens/logs/live/live_logs_screen.dart | 101 ++++++++---------- lib/screens/logs/logs.dart | 1 + lib/screens/logs/logs_list.dart | 1 + 6 files changed, 144 insertions(+), 63 deletions(-) create mode 100644 lib/screens/logs/live/live_logs_list.dart diff --git a/lib/screens/clients/client/logs_list_client.dart b/lib/screens/clients/client/logs_list_client.dart index 2d76396..f12f8e4 100644 --- a/lib/screens/clients/client/logs_list_client.dart +++ b/lib/screens/clients/client/logs_list_client.dart @@ -237,7 +237,8 @@ class _LogsListClientState extends State { context: context, builder: (context) => LogDetailsScreen( log: log, - dialog: true + dialog: true, + twoColumns: widget.splitView, ) ) } @@ -246,7 +247,8 @@ class _LogsListClientState extends State { MaterialPageRoute( builder: (context) => LogDetailsScreen( log: log, - dialog: false + dialog: false, + twoColumns: widget.splitView, ) ) ) diff --git a/lib/screens/logs/details/log_details_screen.dart b/lib/screens/logs/details/log_details_screen.dart index 5d78823..d0a80e9 100644 --- a/lib/screens/logs/details/log_details_screen.dart +++ b/lib/screens/logs/details/log_details_screen.dart @@ -1,6 +1,5 @@ // ignore_for_file: use_build_context_synchronously -import 'package:adguard_home_manager/functions/copy_clipboard.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; @@ -11,6 +10,7 @@ import 'package:adguard_home_manager/screens/logs/details/log_list_tile.dart'; import 'package:adguard_home_manager/functions/desktop_mode.dart'; import 'package:adguard_home_manager/functions/open_url.dart'; +import 'package:adguard_home_manager/functions/copy_clipboard.dart'; import 'package:adguard_home_manager/constants/urls.dart'; import 'package:adguard_home_manager/classes/process_modal.dart'; import 'package:adguard_home_manager/functions/get_filtered_status.dart'; @@ -24,11 +24,13 @@ import 'package:adguard_home_manager/providers/app_config_provider.dart'; class LogDetailsScreen extends StatelessWidget { final Log log; final bool dialog; + final bool twoColumns; const LogDetailsScreen({ super.key, required this.log, - required this.dialog + required this.dialog, + required this.twoColumns, }); @override @@ -137,6 +139,7 @@ class LogDetailsScreen extends StatelessWidget { ); } else { + print(twoColumns); return Scaffold( body: NestedScrollView( headerSliverBuilder: (context, innerBoxIsScrolled) => [ @@ -148,6 +151,7 @@ class LogDetailsScreen extends StatelessWidget { centerTitle: false, forceElevated: innerBoxIsScrolled, surfaceTintColor: isDesktop(width) ? Colors.transparent : null, + automaticallyImplyLeading: twoColumns != true, title: Text(AppLocalizations.of(context)!.logDetails), actions: [ IconButton( diff --git a/lib/screens/logs/live/live_logs_list.dart b/lib/screens/logs/live/live_logs_list.dart new file mode 100644 index 0000000..bf812e8 --- /dev/null +++ b/lib/screens/logs/live/live_logs_list.dart @@ -0,0 +1,90 @@ +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/logs/log_tile.dart'; +import 'package:adguard_home_manager/screens/logs/details/log_details_screen.dart'; + +import 'package:adguard_home_manager/models/logs.dart'; +import 'package:adguard_home_manager/providers/live_logs_provider.dart'; + +class LiveLogsList extends StatelessWidget { + final Log? selectedLog; + final void Function(Log) onLogSelected; + final bool twoColumns; + + const LiveLogsList({ + super.key, + required this.selectedLog, + required this.onLogSelected, + required this.twoColumns, + }); + + @override + Widget build(BuildContext context) { + final liveLogsProvider = Provider.of(context); + + return NestedScrollView( + headerSliverBuilder: (context, innerBoxIsScrolled) => [ + SliverOverlapAbsorber( + handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), + sliver: SliverAppBar.large( + title: Text(AppLocalizations.of(context)!.liveLogs), + ) + ) + ], + body: SafeArea( + top: false, + bottom: false, + child: Builder( + builder: (context) => CustomScrollView( + slivers: [ + SliverOverlapInjector( + handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), + ), + if (liveLogsProvider.logs.isEmpty) SliverFillRemaining( + child: Center( + child: Padding( + padding: const EdgeInsets.all(16), + child: Text( + AppLocalizations.of(context)!.hereWillAppearRealtimeLogs, + textAlign: TextAlign.center, + style: TextStyle( + color: Theme.of(context).colorScheme.onSurfaceVariant, + fontSize: 24 + ), + ), + ), + ), + ), + if (liveLogsProvider.logs.isNotEmpty) SliverList.builder( + itemCount: liveLogsProvider.logs.length, + itemBuilder: (context, index) => LogTile( + log: liveLogsProvider.logs[index], + length: liveLogsProvider.logs.length, + index: index, + onLogTap: (log) { + if (!twoColumns) { + Navigator.of(context).push( + MaterialPageRoute( + builder: (context) => LogDetailsScreen( + log: log, + dialog: false, + twoColumns: twoColumns, + ) + ) + ); + } + onLogSelected(log); + }, + isLogSelected: selectedLog == liveLogsProvider.logs[index], + twoColumns: twoColumns + ), + ) + ], + ), + ) + ) + ); + } +} \ No newline at end of file diff --git a/lib/screens/logs/live/live_logs_screen.dart b/lib/screens/logs/live/live_logs_screen.dart index 1c09957..06977b1 100644 --- a/lib/screens/logs/live/live_logs_screen.dart +++ b/lib/screens/logs/live/live_logs_screen.dart @@ -3,8 +3,10 @@ import 'package:provider/provider.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:adguard_home_manager/screens/logs/details/log_details_screen.dart'; +import 'package:adguard_home_manager/screens/logs/live/live_logs_list.dart'; import 'package:adguard_home_manager/screens/logs/log_tile.dart'; +import 'package:adguard_home_manager/models/logs.dart'; import 'package:adguard_home_manager/providers/live_logs_provider.dart'; class LiveLogsScreen extends StatefulWidget { @@ -15,6 +17,8 @@ class LiveLogsScreen extends StatefulWidget { } class _LiveLogsScreenState extends State { + Log? _selectedLog; + @override void initState() { Provider.of(context, listen: false).startFetchLogs(); @@ -24,66 +28,45 @@ class _LiveLogsScreenState extends State { @override Widget build(BuildContext context) { - final liveLogsProvider = Provider.of(context); - - return Scaffold( - body: NestedScrollView( - headerSliverBuilder: (context, innerBoxIsScrolled) => [ - SliverOverlapAbsorber( - handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), - sliver: SliverAppBar.large( - title: Text(AppLocalizations.of(context)!.liveLogs), - ) - ) - ], - body: SafeArea( - top: false, - bottom: false, - child: Builder( - builder: (context) => CustomScrollView( - slivers: [ - SliverOverlapInjector( - handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), - ), - if (liveLogsProvider.logs.isEmpty) SliverFillRemaining( - child: Center( - child: Padding( - padding: const EdgeInsets.all(16), - child: Text( - AppLocalizations.of(context)!.hereWillAppearRealtimeLogs, - textAlign: TextAlign.center, - style: TextStyle( - color: Theme.of(context).colorScheme.onSurfaceVariant, - fontSize: 24 - ), - ), - ), + return Scaffold( + body: LayoutBuilder( + builder: (context, constraints) { + if (constraints.maxWidth > 800) { + return Material( + color: Colors.transparent, + child: Row( + children: [ + Expanded( + flex: 2, + child: LiveLogsList( + twoColumns: true, + selectedLog: _selectedLog, + onLogSelected: (log) => setState(() => _selectedLog = log), + ) ), - ), - if (liveLogsProvider.logs.isNotEmpty) SliverList.builder( - itemCount: liveLogsProvider.logs.length, - itemBuilder: (context, index) => LogTile( - log: liveLogsProvider.logs[index], - length: liveLogsProvider.logs.length, - index: index, - onLogTap: (log) { - Navigator.of(context).push( - MaterialPageRoute( - builder: (context) => LogDetailsScreen( - log: log, - dialog: false, - ) + Expanded( + flex: 3, + child: _selectedLog != null + ? LogDetailsScreen( + log: _selectedLog!, + dialog: false, + twoColumns: true, ) - ); - }, - twoColumns: false - ), - ) - ], - ), - ) - ) - ), - ); + : const SizedBox() + ) + ], + ), + ); + } + else { + return LiveLogsList( + twoColumns: false, + selectedLog: _selectedLog, + onLogSelected: (log) => setState(() => _selectedLog = log), + ); + } + }, + ), + ); } } \ No newline at end of file diff --git a/lib/screens/logs/logs.dart b/lib/screens/logs/logs.dart index e99317d..d008297 100644 --- a/lib/screens/logs/logs.dart +++ b/lib/screens/logs/logs.dart @@ -48,6 +48,7 @@ class _LogsState extends State { ? LogDetailsScreen( log: _selectedLog!, dialog: false, + twoColumns: true, ) : const SizedBox() ) diff --git a/lib/screens/logs/logs_list.dart b/lib/screens/logs/logs_list.dart index 6036f77..e50847a 100644 --- a/lib/screens/logs/logs_list.dart +++ b/lib/screens/logs/logs_list.dart @@ -188,6 +188,7 @@ class _LogsListWidgetState extends State { builder: (context) => LogDetailsScreen( log: log, dialog: false, + twoColumns: widget.twoColumns, ) ) );