From 67812b3c6fc2e83d2b8cf18475fcfb9f98264c96 Mon Sep 17 00:00:00 2001 From: Christien Rioux Date: Tue, 9 Jul 2024 13:27:54 -0400 Subject: [PATCH] more layout cleanup --- lib/chat/views/chat_component_widget.dart | 282 ++++++++---------- lib/chat/views/no_conversation_widget.dart | 1 + lib/layout/home/home.dart | 2 +- ...eady_main.dart => home_account_ready.dart} | 110 +++---- .../home_account_ready.dart | 2 - .../home_account_ready_chat.dart | 40 --- lib/layout/home/home_screen.dart | 4 +- .../main_pager/account_page.dart | 6 +- .../bottom_sheet_action_button.dart | 0 .../main_pager/chats_page.dart | 2 +- .../main_pager/main_pager.dart | 6 +- lib/layout/layout.dart | 2 +- 12 files changed, 197 insertions(+), 260 deletions(-) rename lib/layout/home/{home_account_ready/home_account_ready_main.dart => home_account_ready.dart} (67%) delete mode 100644 lib/layout/home/home_account_ready/home_account_ready.dart delete mode 100644 lib/layout/home/home_account_ready/home_account_ready_chat.dart rename lib/layout/home/{home_account_ready => }/main_pager/account_page.dart (94%) rename lib/layout/home/{home_account_ready => }/main_pager/bottom_sheet_action_button.dart (100%) rename lib/layout/home/{home_account_ready => }/main_pager/chats_page.dart (92%) rename lib/layout/home/{home_account_ready => }/main_pager/main_pager.dart (98%) diff --git a/lib/chat/views/chat_component_widget.dart b/lib/chat/views/chat_component_widget.dart index f95cebf..34ee220 100644 --- a/lib/chat/views/chat_component_widget.dart +++ b/lib/chat/views/chat_component_widget.dart @@ -192,161 +192,135 @@ class ChatComponentWidget extends StatelessWidget { chatComponentCubit.scrollOffset = 0; } - return Align( - alignment: AlignmentDirectional.centerEnd, - child: Stack( - children: [ - Column( - children: [ - Container( - height: 48, - decoration: BoxDecoration( - color: scale.primaryScale.subtleBorder, - ), - child: Row(children: [ - Align( - alignment: AlignmentDirectional.centerStart, - child: Padding( - padding: - const EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0), - child: Text(title, - textAlign: TextAlign.start, - style: textTheme.titleMedium!.copyWith( - color: scale.primaryScale.borderText)), - )), - const Spacer(), - IconButton( - icon: Icon(Icons.close, - color: scale.primaryScale.borderText), - onPressed: () async { - context.read().setActiveChat(null); - }).paddingLTRB(16, 0, 16, 0) - ]), - ), - Expanded( - child: DecoratedBox( - decoration: BoxDecoration( - color: scale.primaryScale.subtleBackground), - child: NotificationListener( - onNotification: (notification) { - if (chatComponentCubit.scrollOffset != 0) { - return false; - } - - if (!isFirstPage && - notification.metrics.pixels <= - ((notification.metrics.maxScrollExtent - - notification - .metrics.minScrollExtent) * - (1.0 - onEndReachedThreshold) + - notification.metrics.minScrollExtent)) { - // - final scrollOffset = - (notification.metrics.maxScrollExtent - - notification.metrics.minScrollExtent) * - (1.0 - onEndReachedThreshold); - - chatComponentCubit.scrollOffset = scrollOffset; - - // - singleFuture(chatComponentState.chatKey, () async { - await _handlePageForward(chatComponentCubit, - messageWindow, notification); - }); - } else if (!isLastPage && - notification.metrics.pixels >= - ((notification.metrics.maxScrollExtent - - notification - .metrics.minScrollExtent) * - onEndReachedThreshold + - notification.metrics.minScrollExtent)) { - // - final scrollOffset = - -(notification.metrics.maxScrollExtent - - notification.metrics.minScrollExtent) * - (1.0 - onEndReachedThreshold); - - chatComponentCubit.scrollOffset = scrollOffset; - // - singleFuture(chatComponentState.chatKey, () async { - await _handlePageBackward(chatComponentCubit, - messageWindow, notification); - }); - } - return false; - }, - child: ValueListenableBuilder( - valueListenable: - chatComponentState.textEditingController, - builder: (context, textEditingValue, __) { - final messageIsValid = utf8 - .encode(textEditingValue.text) - .lengthInBytes < - 2048; - - return Chat( - key: chatComponentState.chatKey, - theme: messageIsValid - ? chatTheme - : errorChatTheme, - messages: messageWindow.window.toList(), - scrollToBottomOnSend: isFirstPage, - scrollController: - chatComponentState.scrollController, - inputOptions: InputOptions( - inputClearMode: messageIsValid - ? InputClearMode.always - : InputClearMode.never, - textEditingController: - chatComponentState - .textEditingController), - // isLastPage: isLastPage, - // onEndReached: () async { - // await _handlePageBackward( - // chatComponentCubit, messageWindow); - // }, - //onEndReachedThreshold: onEndReachedThreshold, - //onAttachmentPressed: _handleAttachmentPressed, - //onMessageTap: _handleMessageTap, - //onPreviewDataFetched: _handlePreviewDataFetched, - onSendPressed: (pt) { - try { - if (!messageIsValid) { - showErrorToast( - context, - translate( - 'chat.message_too_long')); - return; - } - _handleSendPressed( - chatComponentCubit, pt); - } on FormatException { - showErrorToast( - context, - translate( - 'chat.message_too_long')); - } - }, - listBottomWidget: messageIsValid - ? null - : Text( - translate( - 'chat.message_too_long'), - style: TextStyle( - color: scale - .errorScale.primary)) - .toCenter(), - //showUserAvatars: false, - //showUserNames: true, - user: localUser, - emptyState: const EmptyChatWidget()) - .paddingLTRB(0, 2, 0, 0); - }))), - ), - ], + return Column( + children: [ + Container( + height: 48, + decoration: BoxDecoration( + color: scale.primaryScale.subtleBorder, ), - ], - ), + child: Row(children: [ + Align( + alignment: AlignmentDirectional.centerStart, + child: Padding( + padding: const EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0), + child: Text(title, + textAlign: TextAlign.start, + style: textTheme.titleMedium! + .copyWith(color: scale.primaryScale.borderText)), + )), + const Spacer(), + IconButton( + icon: Icon(Icons.close, color: scale.primaryScale.borderText), + onPressed: () async { + context.read().setActiveChat(null); + }).paddingLTRB(16, 0, 16, 0) + ]), + ), + DecoratedBox( + decoration: + BoxDecoration(color: scale.primaryScale.subtleBackground), + child: NotificationListener( + onNotification: (notification) { + if (chatComponentCubit.scrollOffset != 0) { + return false; + } + + if (!isFirstPage && + notification.metrics.pixels <= + ((notification.metrics.maxScrollExtent - + notification.metrics.minScrollExtent) * + (1.0 - onEndReachedThreshold) + + notification.metrics.minScrollExtent)) { + // + final scrollOffset = (notification.metrics.maxScrollExtent - + notification.metrics.minScrollExtent) * + (1.0 - onEndReachedThreshold); + + chatComponentCubit.scrollOffset = scrollOffset; + + // + singleFuture(chatComponentState.chatKey, () async { + await _handlePageForward( + chatComponentCubit, messageWindow, notification); + }); + } else if (!isLastPage && + notification.metrics.pixels >= + ((notification.metrics.maxScrollExtent - + notification.metrics.minScrollExtent) * + onEndReachedThreshold + + notification.metrics.minScrollExtent)) { + // + final scrollOffset = + -(notification.metrics.maxScrollExtent - + notification.metrics.minScrollExtent) * + (1.0 - onEndReachedThreshold); + + chatComponentCubit.scrollOffset = scrollOffset; + // + singleFuture(chatComponentState.chatKey, () async { + await _handlePageBackward( + chatComponentCubit, messageWindow, notification); + }); + } + return false; + }, + child: ValueListenableBuilder( + valueListenable: chatComponentState.textEditingController, + builder: (context, textEditingValue, __) { + final messageIsValid = + utf8.encode(textEditingValue.text).lengthInBytes < + 2048; + + return Chat( + key: chatComponentState.chatKey, + theme: + messageIsValid ? chatTheme : errorChatTheme, + messages: messageWindow.window.toList(), + scrollToBottomOnSend: isFirstPage, + scrollController: + chatComponentState.scrollController, + inputOptions: InputOptions( + inputClearMode: messageIsValid + ? InputClearMode.always + : InputClearMode.never, + textEditingController: + chatComponentState.textEditingController), + // isLastPage: isLastPage, + // onEndReached: () async { + // await _handlePageBackward( + // chatComponentCubit, messageWindow); + // }, + //onEndReachedThreshold: onEndReachedThreshold, + //onAttachmentPressed: _handleAttachmentPressed, + //onMessageTap: _handleMessageTap, + //onPreviewDataFetched: _handlePreviewDataFetched, + onSendPressed: (pt) { + try { + if (!messageIsValid) { + showErrorToast(context, + translate('chat.message_too_long')); + return; + } + _handleSendPressed(chatComponentCubit, pt); + } on FormatException { + showErrorToast(context, + translate('chat.message_too_long')); + } + }, + listBottomWidget: messageIsValid + ? null + : Text(translate('chat.message_too_long'), + style: TextStyle( + color: scale.errorScale.primary)) + .toCenter(), + //showUserAvatars: false, + //showUserNames: true, + user: localUser, + emptyState: const EmptyChatWidget()) + .paddingLTRB(0, 2, 0, 0); + }))).expanded(), + ], ); } } diff --git a/lib/chat/views/no_conversation_widget.dart b/lib/chat/views/no_conversation_widget.dart index ccbc888..77502e1 100644 --- a/lib/chat/views/no_conversation_widget.dart +++ b/lib/chat/views/no_conversation_widget.dart @@ -19,6 +19,7 @@ class NoConversationWidget extends StatelessWidget { color: scale.primaryScale.appBackground, ), child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( diff --git a/lib/layout/home/home.dart b/lib/layout/home/home.dart index 74990ef..741483b 100644 --- a/lib/layout/home/home.dart +++ b/lib/layout/home/home.dart @@ -2,6 +2,6 @@ export 'drawer_menu/drawer_menu.dart'; export 'home_account_invalid.dart'; export 'home_account_locked.dart'; export 'home_account_missing.dart'; -export 'home_account_ready/home_account_ready.dart'; +export 'home_account_ready.dart'; export 'home_no_active.dart'; export 'home_screen.dart'; diff --git a/lib/layout/home/home_account_ready/home_account_ready_main.dart b/lib/layout/home/home_account_ready.dart similarity index 67% rename from lib/layout/home/home_account_ready/home_account_ready_main.dart rename to lib/layout/home/home_account_ready.dart index 440f4dc..5c7dd73 100644 --- a/lib/layout/home/home_account_ready/home_account_ready_main.dart +++ b/lib/layout/home/home_account_ready.dart @@ -4,20 +4,20 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_translate/flutter_translate.dart'; import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart'; -import '../../../account_manager/account_manager.dart'; -import '../../../chat/chat.dart'; -import '../../../proto/proto.dart' as proto; -import '../../../theme/theme.dart'; +import '../../account_manager/account_manager.dart'; +import '../../chat/chat.dart'; +import '../../proto/proto.dart' as proto; +import '../../theme/theme.dart'; import 'main_pager/main_pager.dart'; -class HomeAccountReadyMain extends StatefulWidget { - const HomeAccountReadyMain({super.key}); +class HomeAccountReady extends StatefulWidget { + const HomeAccountReady({super.key}); @override - State createState() => _HomeAccountReadyMainState(); + State createState() => _HomeAccountReadyState(); } -class _HomeAccountReadyMainState extends State { +class _HomeAccountReadyState extends State { @override void initState() { super.initState(); @@ -98,7 +98,6 @@ class _HomeAccountReadyMainState extends State { phone: false, ); - final w = MediaQuery.of(context).size.width; final theme = Theme.of(context); final scale = theme.extension()!; final scaleConfig = theme.extension()!; @@ -111,51 +110,56 @@ class _HomeAccountReadyMainState extends State { // _chatAnimationController.reset(); // } - late final bool offstageLeft; - late final bool offstageRight; - late final double leftWidth; - late final double rightWidth; - if (isLarge) { - leftWidth = 300; - rightWidth = w - 300 - 2; - offstageLeft = false; - offstageRight = false; - } else { - leftWidth = w; - rightWidth = w; - if (hasActiveChat) { - offstageLeft = true; - offstageRight = false; - } else { - offstageLeft = false; - offstageRight = true; - } - } + return LayoutBuilder(builder: (context, constraints) { + const leftColumnSize = 300.0; - return Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Offstage( - offstage: offstageLeft, - child: ConstrainedBox( - constraints: - BoxConstraints(minWidth: leftWidth, maxWidth: leftWidth), - child: buildLeftPane(context))), - Offstage( - offstage: offstageLeft || offstageRight, - child: SizedBox( - width: 2, - height: double.infinity, - child: ColoredBox( - color: scaleConfig.preferBorders - ? scale.primaryScale.subtleBorder - : scale.primaryScale.subtleBackground))), - Offstage( - offstage: offstageRight, - child: ConstrainedBox( - constraints: - BoxConstraints(minWidth: rightWidth, maxWidth: rightWidth), - child: buildRightPane(context), - )), - ]); + late final bool visibleLeft; + late final bool visibleRight; + late final double leftWidth; + late final double rightWidth; + if (isLarge) { + visibleLeft = true; + visibleRight = true; + leftWidth = leftColumnSize; + rightWidth = constraints.maxWidth - leftColumnSize - 2; + } else { + if (hasActiveChat) { + visibleLeft = false; + visibleRight = true; + leftWidth = leftColumnSize; + rightWidth = constraints.maxWidth; + } else { + visibleLeft = true; + visibleRight = false; + leftWidth = constraints.maxWidth; + rightWidth = 400; // whatever + } + } + + return Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ + Offstage( + offstage: !visibleLeft, + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: leftWidth), + child: buildLeftPane(context))), + Offstage( + offstage: !(visibleLeft && visibleRight), + child: SizedBox( + width: 2, + height: double.infinity, + child: ColoredBox( + color: scaleConfig.preferBorders + ? scale.primaryScale.subtleBorder + : scale.primaryScale.subtleBackground))), + Offstage( + offstage: !visibleRight, + child: ConstrainedBox( + constraints: BoxConstraints( + maxHeight: constraints.maxHeight, maxWidth: rightWidth), + child: buildRightPane(context), + )), + ]); + }); } //////////////////////////////////////////////////////////////////////////// diff --git a/lib/layout/home/home_account_ready/home_account_ready.dart b/lib/layout/home/home_account_ready/home_account_ready.dart deleted file mode 100644 index 5171239..0000000 --- a/lib/layout/home/home_account_ready/home_account_ready.dart +++ /dev/null @@ -1,2 +0,0 @@ -export 'home_account_ready_chat.dart'; -export 'home_account_ready_main.dart'; diff --git a/lib/layout/home/home_account_ready/home_account_ready_chat.dart b/lib/layout/home/home_account_ready/home_account_ready_chat.dart deleted file mode 100644 index 625e01f..0000000 --- a/lib/layout/home/home_account_ready/home_account_ready_chat.dart +++ /dev/null @@ -1,40 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_bloc/flutter_bloc.dart'; - -import '../../../chat/chat.dart'; - -class HomeAccountReadyChat extends StatefulWidget { - const HomeAccountReadyChat({super.key}); - - @override - HomeAccountReadyChatState createState() => HomeAccountReadyChatState(); -} - -class HomeAccountReadyChatState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - Widget buildChatComponent(BuildContext context) { - final activeChatLocalConversationKey = - context.watch().state; - if (activeChatLocalConversationKey == null) { - return const NoConversationWidget(); - } - return ChatComponentWidget.builder( - localConversationRecordKey: activeChatLocalConversationKey, - key: ValueKey(activeChatLocalConversationKey)); - } - - @override - Widget build(BuildContext context) => SafeArea( - bottom: false, - child: buildChatComponent(context), - ); -} diff --git a/lib/layout/home/home_screen.dart b/lib/layout/home/home_screen.dart index 9083790..c9fe1e5 100644 --- a/lib/layout/home/home_screen.dart +++ b/lib/layout/home/home_screen.dart @@ -13,7 +13,7 @@ import 'drawer_menu/drawer_menu.dart'; import 'home_account_invalid.dart'; import 'home_account_locked.dart'; import 'home_account_missing.dart'; -import 'home_account_ready/home_account_ready.dart'; +import 'home_account_ready.dart'; import 'home_no_active.dart'; class HomeScreen extends StatefulWidget { @@ -64,7 +64,7 @@ class HomeScreenState extends State // Re-export all ready blocs to the account display subtree return perAccountCollectionState.provide( - child: const HomeAccountReadyMain()); + child: const HomeAccountReady()); } } diff --git a/lib/layout/home/home_account_ready/main_pager/account_page.dart b/lib/layout/home/main_pager/account_page.dart similarity index 94% rename from lib/layout/home/home_account_ready/main_pager/account_page.dart rename to lib/layout/home/main_pager/account_page.dart index 1b48e5b..c9a30b1 100644 --- a/lib/layout/home/home_account_ready/main_pager/account_page.dart +++ b/lib/layout/home/main_pager/account_page.dart @@ -4,9 +4,9 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_translate/flutter_translate.dart'; -import '../../../../contact_invitation/contact_invitation.dart'; -import '../../../../contacts/contacts.dart'; -import '../../../../theme/theme.dart'; +import '../../../contact_invitation/contact_invitation.dart'; +import '../../../contacts/contacts.dart'; +import '../../../theme/theme.dart'; class AccountPage extends StatefulWidget { const AccountPage({ diff --git a/lib/layout/home/home_account_ready/main_pager/bottom_sheet_action_button.dart b/lib/layout/home/main_pager/bottom_sheet_action_button.dart similarity index 100% rename from lib/layout/home/home_account_ready/main_pager/bottom_sheet_action_button.dart rename to lib/layout/home/main_pager/bottom_sheet_action_button.dart diff --git a/lib/layout/home/home_account_ready/main_pager/chats_page.dart b/lib/layout/home/main_pager/chats_page.dart similarity index 92% rename from lib/layout/home/home_account_ready/main_pager/chats_page.dart rename to lib/layout/home/main_pager/chats_page.dart index 8811607..1765b62 100644 --- a/lib/layout/home/home_account_ready/main_pager/chats_page.dart +++ b/lib/layout/home/main_pager/chats_page.dart @@ -1,7 +1,7 @@ import 'package:awesome_extensions/awesome_extensions.dart'; import 'package:flutter/material.dart'; -import '../../../../chat_list/chat_list.dart'; +import '../../../chat_list/chat_list.dart'; class ChatsPage extends StatefulWidget { const ChatsPage({super.key}); diff --git a/lib/layout/home/home_account_ready/main_pager/main_pager.dart b/lib/layout/home/main_pager/main_pager.dart similarity index 98% rename from lib/layout/home/home_account_ready/main_pager/main_pager.dart rename to lib/layout/home/main_pager/main_pager.dart index 75ca6ed..bfa476f 100644 --- a/lib/layout/home/home_account_ready/main_pager/main_pager.dart +++ b/lib/layout/home/main_pager/main_pager.dart @@ -10,9 +10,9 @@ import 'package:flutter_translate/flutter_translate.dart'; import 'package:preload_page_view/preload_page_view.dart'; import 'package:provider/provider.dart'; -import '../../../../chat/chat.dart'; -import '../../../../contact_invitation/contact_invitation.dart'; -import '../../../../theme/theme.dart'; +import '../../../chat/chat.dart'; +import '../../../contact_invitation/contact_invitation.dart'; +import '../../../theme/theme.dart'; import 'account_page.dart'; import 'bottom_sheet_action_button.dart'; import 'chats_page.dart'; diff --git a/lib/layout/layout.dart b/lib/layout/layout.dart index 985a099..27975d5 100644 --- a/lib/layout/layout.dart +++ b/lib/layout/layout.dart @@ -1,4 +1,4 @@ export 'default_app_bar.dart'; export 'home/home.dart'; -export 'home/home_account_ready/main_pager/main_pager.dart'; +export 'home/main_pager/main_pager.dart'; export 'splash.dart';