From 4222b37bb41a0344d708ba2ccb570ba050ec211f Mon Sep 17 00:00:00 2001 From: Kelrap Date: Thu, 18 Jul 2024 15:13:27 -0400 Subject: [PATCH 01/11] Attempt 3. Needs work. --- lib/pages/chat/chat.dart | 4 ++ lib/pages/chat/chat_view.dart | 26 +++---------- lib/pangea/widgets/chat/chat_footer.dart | 48 ++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 20 deletions(-) create mode 100644 lib/pangea/widgets/chat/chat_footer.dart diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart index e1af6a2c0..4cb8b962e 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -24,6 +24,7 @@ import 'package:fluffychat/pangea/models/tokens_event_content_model.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; import 'package:fluffychat/pangea/utils/firebase_analytics.dart'; import 'package:fluffychat/pangea/utils/report_message.dart'; +import 'package:fluffychat/pangea/widgets/chat/chat_footer.dart'; import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/pangea/widgets/igc/pangea_text_controller.dart'; import 'package:fluffychat/utils/error_reporter.dart'; @@ -112,6 +113,9 @@ class ChatController extends State with WidgetsBindingObserver { // #Pangea final PangeaController pangeaController = MatrixState.pangeaController; + + final GlobalKey chatFooterKey = GlobalKey(); + late Choreographer choreographer = Choreographer(pangeaController, this); // Pangea# Room get room => sendingClient.getRoomById(roomId) ?? widget.room; diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 36e6d69dc..077613559 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -5,14 +5,12 @@ import 'package:fluffychat/pages/chat/chat_app_bar_list_tile.dart'; import 'package:fluffychat/pages/chat/chat_app_bar_title.dart'; import 'package:fluffychat/pages/chat/chat_event_list.dart'; import 'package:fluffychat/pages/chat/pinned_events.dart'; -import 'package:fluffychat/pages/chat/reactions_picker.dart'; -import 'package:fluffychat/pages/chat/reply_display.dart'; import 'package:fluffychat/pangea/choreographer/widgets/start_igc_button.dart'; import 'package:fluffychat/pangea/extensions/pangea_room_extension/pangea_room_extension.dart'; import 'package:fluffychat/pangea/widgets/chat/chat_floating_action_button.dart'; +import 'package:fluffychat/pangea/widgets/chat/chat_footer.dart'; import 'package:fluffychat/utils/account_config.dart'; import 'package:fluffychat/widgets/chat_settings_popup_menu.dart'; -import 'package:fluffychat/widgets/connection_status_header.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/mxc_image.dart'; import 'package:fluffychat/widgets/unread_rooms_badge.dart'; @@ -22,10 +20,7 @@ import 'package:future_loading_dialog/future_loading_dialog.dart'; import 'package:go_router/go_router.dart'; import 'package:matrix/matrix.dart'; -import '../../pangea/choreographer/widgets/it_bar.dart'; import '../../utils/stream_extension.dart'; -import 'chat_emoji_picker.dart'; -import 'chat_input_row.dart'; enum _EventContextAction { info, report } @@ -404,19 +399,9 @@ class ChatView extends StatelessWidget { ), ], ) - : Column( - mainAxisSize: MainAxisSize.min, - children: [ - const ConnectionStatusHeader(), - ITBar( - choreographer: - controller.choreographer, - ), - ReactionsPicker(controller), - ReplyDisplay(controller), - ChatInputRow(controller), - ChatEmojiPicker(controller), - ], + : ChatFooter( + controller, + key: controller.chatFooterKey, ), ), ), @@ -437,7 +422,8 @@ class ChatView extends StatelessWidget { // ), Positioned( left: 20, - bottom: 75, + bottom: + controller.chatFooterKey.currentState?.height ?? 100, child: StartIGCButton(controller: controller), ), // Pangea# diff --git a/lib/pangea/widgets/chat/chat_footer.dart b/lib/pangea/widgets/chat/chat_footer.dart new file mode 100644 index 000000000..3235916e1 --- /dev/null +++ b/lib/pangea/widgets/chat/chat_footer.dart @@ -0,0 +1,48 @@ +import 'package:fluffychat/pages/chat/chat.dart'; +import 'package:fluffychat/pages/chat/chat_emoji_picker.dart'; +import 'package:fluffychat/pages/chat/chat_input_row.dart'; +import 'package:fluffychat/pages/chat/reactions_picker.dart'; +import 'package:fluffychat/pages/chat/reply_display.dart'; +import 'package:fluffychat/pangea/choreographer/widgets/it_bar.dart'; +import 'package:fluffychat/widgets/connection_status_header.dart'; +import 'package:flutter/material.dart'; + +class ChatFooter extends StatefulWidget { + final ChatController controller; + const ChatFooter( + this.controller, { + super.key, + }); + + @override + ChatFooterState createState() => ChatFooterState(); +} + +class ChatFooterState extends State { + final GlobalKey _widgetKey = GlobalKey(); + + double? get height => _widgetKey.currentContext?.size?.height; + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column( + key: _widgetKey, + mainAxisSize: MainAxisSize.min, + children: [ + const ConnectionStatusHeader(), + ITBar( + choreographer: widget.controller.choreographer, + ), + ReactionsPicker(widget.controller), + ReplyDisplay(widget.controller), + ChatInputRow(widget.controller), + ChatEmojiPicker(widget.controller), + ], + ); + } +} From 276076b265f6fb0e1eac12daf2e0e98eb3abe3c2 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Fri, 19 Jul 2024 13:56:19 -0400 Subject: [PATCH 02/11] Buttons move when input bar height changes --- lib/pages/chat/chat_view.dart | 32 +++++++++++--- lib/pages/chat/reply_display.dart | 28 ++++++------ .../language_permissions_warning_buttons.dart | 11 ++--- .../chat/chat_floating_action_button.dart | 13 +++--- lib/pangea/widgets/chat/chat_footer.dart | 43 ++++++++++++------- 5 files changed, 77 insertions(+), 50 deletions(-) diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 077613559..f2d9f68fe 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -269,9 +269,6 @@ class ChatView extends StatelessWidget { // ), // ) // : null, - floatingActionButton: ChatFloatingActionButton( - controller: controller, - ), // Pangea# body: // #Pangea @@ -399,10 +396,25 @@ class ChatView extends StatelessWidget { ), ], ) + // #Pangea + // : Column( + // mainAxisSize: MainAxisSize.min, + // children: [ + // const ConnectionStatusHeader(), + // ITBar( + // choreographer: + // controller.choreographer, + // ), + // ReactionsPicker(controller), + // ReplyDisplay(controller), + // ChatInputRow(controller), + // ChatEmojiPicker(controller), + // ], : ChatFooter( controller, key: controller.chatFooterKey, ), + // Pangea# ), ), ], @@ -421,11 +433,19 @@ class ChatView extends StatelessWidget { // ), // ), Positioned( - left: 20, - bottom: - controller.chatFooterKey.currentState?.height ?? 100, + left: 7, + bottom: 50 + + (controller.chatFooterKey.currentState?.height ?? 50), child: StartIGCButton(controller: controller), ), + Positioned( + right: 7, + bottom: 50 + + (controller.chatFooterKey.currentState?.height ?? 50), + child: ChatFloatingActionButton( + controller: controller, + ), + ), // Pangea# ], ), diff --git a/lib/pages/chat/reply_display.dart b/lib/pages/chat/reply_display.dart index 03acd269e..e5b343906 100644 --- a/lib/pages/chat/reply_display.dart +++ b/lib/pages/chat/reply_display.dart @@ -1,9 +1,8 @@ +import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; import 'package:flutter/material.dart'; - import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:matrix/matrix.dart'; -import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; import '../../config/themes.dart'; import 'chat.dart'; import 'events/reply_content.dart'; @@ -65,19 +64,22 @@ class _EditContent extends StatelessWidget { Icons.edit, color: Theme.of(context).colorScheme.primary, ), - Container(width: 15.0), - Text( - event.calcLocalizedBodyFallback( - MatrixLocals(L10n.of(context)!), - withSenderNamePrefix: false, - hideReply: true, - ), - overflow: TextOverflow.ellipsis, - maxLines: 1, - style: TextStyle( - color: Theme.of(context).textTheme.bodyMedium!.color, + Container(width: 8.0), + Flexible( + child: Text( + event.calcLocalizedBodyFallback( + MatrixLocals(L10n.of(context)!), + withSenderNamePrefix: false, + hideReply: true, + ), + overflow: TextOverflow.ellipsis, + maxLines: 1, + style: TextStyle( + color: Theme.of(context).textTheme.bodyMedium!.color, + ), ), ), + Container(width: 10.0), ], ); } diff --git a/lib/pangea/choreographer/widgets/language_permissions_warning_buttons.dart b/lib/pangea/choreographer/widgets/language_permissions_warning_buttons.dart index 0abe90925..fcf3b57be 100644 --- a/lib/pangea/choreographer/widgets/language_permissions_warning_buttons.dart +++ b/lib/pangea/choreographer/widgets/language_permissions_warning_buttons.dart @@ -58,13 +58,10 @@ class LanguagePermissionsButtons extends StatelessWidget { ), ); - return Padding( - padding: const EdgeInsets.only(bottom: 56.0), - child: FloatingActionButton( - mini: true, - child: const Icon(Icons.history_edu_outlined), - onPressed: () => showMessage(context, text), - ), + return FloatingActionButton( + mini: true, + child: const Icon(Icons.history_edu_outlined), + onPressed: () => showMessage(context, text), ); } diff --git a/lib/pangea/widgets/chat/chat_floating_action_button.dart b/lib/pangea/widgets/chat/chat_floating_action_button.dart index 735b51b36..35ea1c3eb 100644 --- a/lib/pangea/widgets/chat/chat_floating_action_button.dart +++ b/lib/pangea/widgets/chat/chat_floating_action_button.dart @@ -67,14 +67,11 @@ class ChatFloatingActionButtonState extends State { return const SizedBox.shrink(); } if (widget.controller.showScrollDownButton) { - return Padding( - padding: const EdgeInsets.only(bottom: 56.0), - child: FloatingActionButton( - onPressed: widget.controller.scrollDown, - heroTag: null, - mini: true, - child: const Icon(Icons.arrow_downward_outlined), - ), + return FloatingActionButton( + onPressed: widget.controller.scrollDown, + heroTag: null, + mini: true, + child: const Icon(Icons.arrow_downward_outlined), ); } if (widget.controller.choreographer.errorService.error != null) { diff --git a/lib/pangea/widgets/chat/chat_footer.dart b/lib/pangea/widgets/chat/chat_footer.dart index 3235916e1..f47ebf193 100644 --- a/lib/pangea/widgets/chat/chat_footer.dart +++ b/lib/pangea/widgets/chat/chat_footer.dart @@ -19,30 +19,41 @@ class ChatFooter extends StatefulWidget { } class ChatFooterState extends State { - final GlobalKey _widgetKey = GlobalKey(); - - double? get height => _widgetKey.currentContext?.size?.height; + double? height; @override void initState() { super.initState(); + WidgetsBinding.instance.addPostFrameCallback((_) { + setState(() { + height = context.size!.height; + }); + }); } @override Widget build(BuildContext context) { - return Column( - key: _widgetKey, - mainAxisSize: MainAxisSize.min, - children: [ - const ConnectionStatusHeader(), - ITBar( - choreographer: widget.controller.choreographer, - ), - ReactionsPicker(widget.controller), - ReplyDisplay(widget.controller), - ChatInputRow(widget.controller), - ChatEmojiPicker(widget.controller), - ], + return NotificationListener( + onNotification: (_) { + if (height != context.size!.height) { + height = context.size!.height; + widget.controller.updateView(); + } + return true; + }, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const ConnectionStatusHeader(), + ITBar( + choreographer: widget.controller.choreographer, + ), + ReactionsPicker(widget.controller), + ReplyDisplay(widget.controller), + ChatInputRow(widget.controller), + ChatEmojiPicker(widget.controller), + ], + ), ); } } From d4febba12e4776aa0ea254c1d7eb6244d7ce8635 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Fri, 19 Jul 2024 14:06:45 -0400 Subject: [PATCH 03/11] Add #Pangea comments --- lib/pages/chat/reply_display.dart | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/pages/chat/reply_display.dart b/lib/pages/chat/reply_display.dart index e5b343906..b2b7ca0bb 100644 --- a/lib/pages/chat/reply_display.dart +++ b/lib/pages/chat/reply_display.dart @@ -64,9 +64,13 @@ class _EditContent extends StatelessWidget { Icons.edit, color: Theme.of(context).colorScheme.primary, ), + // #Pangea + // Container(width: 15.0), Container(width: 8.0), Flexible( - child: Text( + child: + // Pangea# + Text( event.calcLocalizedBodyFallback( MatrixLocals(L10n.of(context)!), withSenderNamePrefix: false, @@ -79,7 +83,9 @@ class _EditContent extends StatelessWidget { ), ), ), + // #Pangea Container(width: 10.0), + // Pangea# ], ); } From e8a4005a128de7ec2719849ff17e447968d0ae1c Mon Sep 17 00:00:00 2001 From: Kelrap Date: Mon, 22 Jul 2024 13:39:51 -0400 Subject: [PATCH 04/11] Use stack, minimize footer shifting messages --- lib/pages/chat/chat.dart | 10 +- lib/pages/chat/chat_view.dart | 117 +++++++++++++++++------ lib/pangea/widgets/chat/chat_footer.dart | 59 ------------ 3 files changed, 95 insertions(+), 91 deletions(-) delete mode 100644 lib/pangea/widgets/chat/chat_footer.dart diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart index 4cb8b962e..bd0462401 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -24,7 +24,6 @@ import 'package:fluffychat/pangea/models/tokens_event_content_model.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; import 'package:fluffychat/pangea/utils/firebase_analytics.dart'; import 'package:fluffychat/pangea/utils/report_message.dart'; -import 'package:fluffychat/pangea/widgets/chat/chat_footer.dart'; import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/pangea/widgets/igc/pangea_text_controller.dart'; import 'package:fluffychat/utils/error_reporter.dart'; @@ -114,7 +113,7 @@ class ChatController extends State // #Pangea final PangeaController pangeaController = MatrixState.pangeaController; - final GlobalKey chatFooterKey = GlobalKey(); + // final GlobalKey chatFooterKey = GlobalKey(); late Choreographer choreographer = Choreographer(pangeaController, this); // Pangea# @@ -381,6 +380,13 @@ class ChatController extends State setState(() {}); } + // #Pangea + void closeEmojiPicker() { + showEmojiPicker = false; + updateView(); + } + // Pangea# + Future? loadTimelineFuture; int? animateInEventIndex; diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index f2d9f68fe..783ccbb6a 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -3,14 +3,19 @@ import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/pages/chat/chat.dart'; import 'package:fluffychat/pages/chat/chat_app_bar_list_tile.dart'; import 'package:fluffychat/pages/chat/chat_app_bar_title.dart'; +import 'package:fluffychat/pages/chat/chat_emoji_picker.dart'; import 'package:fluffychat/pages/chat/chat_event_list.dart'; +import 'package:fluffychat/pages/chat/chat_input_row.dart'; import 'package:fluffychat/pages/chat/pinned_events.dart'; +import 'package:fluffychat/pages/chat/reactions_picker.dart'; +import 'package:fluffychat/pages/chat/reply_display.dart'; +import 'package:fluffychat/pangea/choreographer/widgets/it_bar.dart'; import 'package:fluffychat/pangea/choreographer/widgets/start_igc_button.dart'; import 'package:fluffychat/pangea/extensions/pangea_room_extension/pangea_room_extension.dart'; import 'package:fluffychat/pangea/widgets/chat/chat_floating_action_button.dart'; -import 'package:fluffychat/pangea/widgets/chat/chat_footer.dart'; import 'package:fluffychat/utils/account_config.dart'; import 'package:fluffychat/widgets/chat_settings_popup_menu.dart'; +import 'package:fluffychat/widgets/connection_status_header.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/mxc_image.dart'; import 'package:fluffychat/widgets/unread_rooms_badge.dart'; @@ -296,22 +301,57 @@ class ChatView extends StatelessWidget { child: Column( children: [ Expanded( - child: GestureDetector( - onTap: controller.clearSingleSelectedEvent, - child: Builder( - builder: (context) { - if (controller.timeline == null) { - return const Center( - child: CircularProgressIndicator.adaptive( - strokeWidth: 2, + child: Stack( + children: [ + GestureDetector( + onTap: controller.clearSingleSelectedEvent, + child: Builder( + builder: (context) { + if (controller.timeline == null) { + return const Center( + child: + CircularProgressIndicator.adaptive( + strokeWidth: 2, + ), + ); + } + return ChatEventList( + controller: controller, + ); + }, + ), + ), + Positioned( + left: 0, + right: 0, + bottom: 7, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + if (!controller.selectMode) + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + StartIGCButton( + controller: controller, + ), + ChatFloatingActionButton( + controller: controller, + ), + ], + ), + const ConnectionStatusHeader(), + ITBar( + choreographer: controller.choreographer, ), - ); - } - return ChatEventList( - controller: controller, - ); - }, - ), + // if (!controller.selectMode) + ReplyDisplay(controller), + ], + ), + ), + ], ), ), if (controller.room.canSendDefaultMessages && @@ -410,9 +450,11 @@ class ChatView extends StatelessWidget { // ChatInputRow(controller), // ChatEmojiPicker(controller), // ], - : ChatFooter( - controller, - key: controller.chatFooterKey, + : Column( + children: [ + ReactionsPicker(controller), + ChatInputRow(controller), + ], ), // Pangea# ), @@ -433,19 +475,34 @@ class ChatView extends StatelessWidget { // ), // ), Positioned( - left: 7, - bottom: 50 + - (controller.chatFooterKey.currentState?.height ?? 50), - child: StartIGCButton(controller: controller), + bottom: 0, + left: 0, + right: 0, + child: ChatEmojiPicker(controller), ), - Positioned( - right: 7, - bottom: 50 + - (controller.chatFooterKey.currentState?.height ?? 50), - child: ChatFloatingActionButton( - controller: controller, + // Close button placed at bottom of emoji picker + if (controller.showEmojiPicker) + Positioned( + left: 0, + right: 0, + bottom: 5, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FloatingActionButton( + onPressed: controller.closeEmojiPicker, + backgroundColor: Colors.black, + shape: const CircleBorder(), + heroTag: null, + mini: true, + child: const Icon( + Icons.close, + size: 20, + ), + ), + ], + ), ), - ), // Pangea# ], ), diff --git a/lib/pangea/widgets/chat/chat_footer.dart b/lib/pangea/widgets/chat/chat_footer.dart deleted file mode 100644 index f47ebf193..000000000 --- a/lib/pangea/widgets/chat/chat_footer.dart +++ /dev/null @@ -1,59 +0,0 @@ -import 'package:fluffychat/pages/chat/chat.dart'; -import 'package:fluffychat/pages/chat/chat_emoji_picker.dart'; -import 'package:fluffychat/pages/chat/chat_input_row.dart'; -import 'package:fluffychat/pages/chat/reactions_picker.dart'; -import 'package:fluffychat/pages/chat/reply_display.dart'; -import 'package:fluffychat/pangea/choreographer/widgets/it_bar.dart'; -import 'package:fluffychat/widgets/connection_status_header.dart'; -import 'package:flutter/material.dart'; - -class ChatFooter extends StatefulWidget { - final ChatController controller; - const ChatFooter( - this.controller, { - super.key, - }); - - @override - ChatFooterState createState() => ChatFooterState(); -} - -class ChatFooterState extends State { - double? height; - - @override - void initState() { - super.initState(); - WidgetsBinding.instance.addPostFrameCallback((_) { - setState(() { - height = context.size!.height; - }); - }); - } - - @override - Widget build(BuildContext context) { - return NotificationListener( - onNotification: (_) { - if (height != context.size!.height) { - height = context.size!.height; - widget.controller.updateView(); - } - return true; - }, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - const ConnectionStatusHeader(), - ITBar( - choreographer: widget.controller.choreographer, - ), - ReactionsPicker(widget.controller), - ReplyDisplay(widget.controller), - ChatInputRow(widget.controller), - ChatEmojiPicker(widget.controller), - ], - ), - ); - } -} From c20176d02953f143f010857e7aa827deabc3f628 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Mon, 22 Jul 2024 13:45:45 -0400 Subject: [PATCH 05/11] Add #pangea comments --- lib/pages/chat/chat.dart | 2 -- lib/pages/chat/chat_view.dart | 33 +++++++++++++++++---------------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart index bd0462401..ea14cc600 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -113,8 +113,6 @@ class ChatController extends State // #Pangea final PangeaController pangeaController = MatrixState.pangeaController; - // final GlobalKey chatFooterKey = GlobalKey(); - late Choreographer choreographer = Choreographer(pangeaController, this); // Pangea# Room get room => sendingClient.getRoomById(roomId) ?? widget.room; diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 783ccbb6a..0b03441d1 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -301,8 +301,11 @@ class ChatView extends StatelessWidget { child: Column( children: [ Expanded( - child: Stack( + child: + // #Pangea + Stack( children: [ + // Pangea# GestureDetector( onTap: controller.clearSingleSelectedEvent, child: Builder( @@ -321,6 +324,7 @@ class ChatView extends StatelessWidget { }, ), ), + // #Pangea Positioned( left: 0, right: 0, @@ -346,12 +350,12 @@ class ChatView extends StatelessWidget { ITBar( choreographer: controller.choreographer, ), - // if (!controller.selectMode) ReplyDisplay(controller), ], ), ), ], + // Pangea# ), ), if (controller.room.canSendDefaultMessages && @@ -436,22 +440,19 @@ class ChatView extends StatelessWidget { ), ], ) - // #Pangea - // : Column( - // mainAxisSize: MainAxisSize.min, - // children: [ - // const ConnectionStatusHeader(), - // ITBar( - // choreographer: - // controller.choreographer, - // ), - // ReactionsPicker(controller), - // ReplyDisplay(controller), - // ChatInputRow(controller), - // ChatEmojiPicker(controller), - // ], : Column( + mainAxisSize: MainAxisSize.min, children: [ + // #Pangea + // const ConnectionStatusHeader(), + // ITBar( + // choreographer: + // controller.choreographer, + // ), + // ReactionsPicker(controller), + // ReplyDisplay(controller), + // ChatInputRow(controller), + // ChatEmojiPicker(controller), ReactionsPicker(controller), ChatInputRow(controller), ], From 5b8c2dc7a848ff71db285183ef1d5207b1494b66 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Mon, 22 Jul 2024 16:36:44 -0400 Subject: [PATCH 06/11] Minor emoji picker edits --- lib/pages/chat/chat.dart | 7 -- lib/pages/chat/chat_emoji_picker.dart | 154 ++++++++++++++--------- lib/pages/chat/chat_view.dart | 34 ++--- lib/pages/chat/events/reply_content.dart | 3 +- lib/pages/chat/reply_display.dart | 63 +++++----- 5 files changed, 141 insertions(+), 120 deletions(-) diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart index ea14cc600..f978330c1 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -378,13 +378,6 @@ class ChatController extends State setState(() {}); } - // #Pangea - void closeEmojiPicker() { - showEmojiPicker = false; - updateView(); - } - // Pangea# - Future? loadTimelineFuture; int? animateInEventIndex; diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart index 3f424ab37..a59bba609 100644 --- a/lib/pages/chat/chat_emoji_picker.dart +++ b/lib/pages/chat/chat_emoji_picker.dart @@ -14,6 +14,9 @@ class ChatEmojiPicker extends StatelessWidget { @override Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); + // #Pangea + final bool lightMode = Theme.of(context).brightness == Brightness.light; + // Pangea# return AnimatedContainer( duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, @@ -23,68 +26,103 @@ class ChatEmojiPicker extends StatelessWidget { ? MediaQuery.of(context).size.height / 2 : 0, child: controller.showEmojiPicker - ? DefaultTabController( - length: 2, - child: Column( - children: [ - TabBar( - tabs: [ - Tab(text: L10n.of(context)!.emojis), - Tab(text: L10n.of(context)!.stickers), + ? + // #Pangea + Stack( + children: [ + // Pangea# + DefaultTabController( + length: 2, + child: Column( + children: [ + TabBar( + tabs: [ + Tab(text: L10n.of(context)!.emojis), + Tab(text: L10n.of(context)!.stickers), + ], + ), + Expanded( + child: TabBarView( + children: [ + EmojiPicker( + onEmojiSelected: controller.onEmojiSelected, + onBackspacePressed: + controller.emojiPickerBackspace, + config: Config( + emojiViewConfig: EmojiViewConfig( + noRecents: const NoRecent(), + backgroundColor: Theme.of(context) + .colorScheme + .onInverseSurface, + ), + bottomActionBarConfig: + const BottomActionBarConfig( + enabled: false, + ), + categoryViewConfig: CategoryViewConfig( + backspaceColor: theme.colorScheme.primary, + iconColor: theme.colorScheme.primary + .withOpacity(0.5), + iconColorSelected: theme.colorScheme.primary, + indicatorColor: theme.colorScheme.primary, + ), + skinToneConfig: SkinToneConfig( + dialogBackgroundColor: Color.lerp( + theme.colorScheme.surface, + theme.colorScheme.primaryContainer, + 0.75, + )!, + indicatorColor: theme.colorScheme.onSurface, + ), + ), + ), + StickerPickerDialog( + room: controller.room, + onSelected: (sticker) { + controller.room.sendEvent( + { + 'body': sticker.body, + 'info': sticker.info ?? {}, + 'url': sticker.url.toString(), + }, + type: EventTypes.Sticker, + ); + controller.hideEmojiPicker(); + }, + ), + ], + ), + ), ], ), - Expanded( - child: TabBarView( - children: [ - EmojiPicker( - onEmojiSelected: controller.onEmojiSelected, - onBackspacePressed: controller.emojiPickerBackspace, - config: Config( - emojiViewConfig: EmojiViewConfig( - noRecents: const NoRecent(), - backgroundColor: Theme.of(context) - .colorScheme - .onInverseSurface, - ), - bottomActionBarConfig: const BottomActionBarConfig( - enabled: false, - ), - categoryViewConfig: CategoryViewConfig( - backspaceColor: theme.colorScheme.primary, - iconColor: - theme.colorScheme.primary.withOpacity(0.5), - iconColorSelected: theme.colorScheme.primary, - indicatorColor: theme.colorScheme.primary, - ), - skinToneConfig: SkinToneConfig( - dialogBackgroundColor: Color.lerp( - theme.colorScheme.surface, - theme.colorScheme.primaryContainer, - 0.75, - )!, - indicatorColor: theme.colorScheme.onSurface, - ), - ), + ), + // #Pangea + // Close button placed at bottom of emoji picker + Positioned( + left: 0, + right: 0, + bottom: 5, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FloatingActionButton( + onPressed: controller.hideEmojiPicker, + backgroundColor: lightMode + ? const Color.fromARGB(255, 211, 211, 211) + : Colors.black, + shape: const CircleBorder(), + heroTag: null, + mini: true, + child: const Icon( + Icons.close, + size: 20, ), - StickerPickerDialog( - room: controller.room, - onSelected: (sticker) { - controller.room.sendEvent( - { - 'body': sticker.body, - 'info': sticker.info ?? {}, - 'url': sticker.url.toString(), - }, - type: EventTypes.Sticker, - ); - controller.hideEmojiPicker(); - }, - ), - ], - ), + ), + ], ), - ], - ), + ), + // Pangea# + ], ) : null, ); diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 0b03441d1..64d70b60e 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -350,7 +350,16 @@ class ChatView extends StatelessWidget { ITBar( choreographer: controller.choreographer, ), - ReplyDisplay(controller), + Row( + // crossAxisAlignment: CrossAxisAlignment.end, + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + ReplyDisplay(controller), + ], + ), ], ), ), @@ -481,29 +490,6 @@ class ChatView extends StatelessWidget { right: 0, child: ChatEmojiPicker(controller), ), - // Close button placed at bottom of emoji picker - if (controller.showEmojiPicker) - Positioned( - left: 0, - right: 0, - bottom: 5, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FloatingActionButton( - onPressed: controller.closeEmojiPicker, - backgroundColor: Colors.black, - shape: const CircleBorder(), - heroTag: null, - mini: true, - child: const Icon( - Icons.close, - size: 20, - ), - ), - ], - ), - ), // Pangea# ], ), diff --git a/lib/pages/chat/events/reply_content.dart b/lib/pages/chat/events/reply_content.dart index 945ae22ac..b48f16cd9 100644 --- a/lib/pages/chat/events/reply_content.dart +++ b/lib/pages/chat/events/reply_content.dart @@ -1,9 +1,8 @@ +import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; import 'package:flutter/material.dart'; - import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:matrix/matrix.dart'; -import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; import '../../../config/app_config.dart'; class ReplyContent extends StatelessWidget { diff --git a/lib/pages/chat/reply_display.dart b/lib/pages/chat/reply_display.dart index b2b7ca0bb..a6bec6bbb 100644 --- a/lib/pages/chat/reply_display.dart +++ b/lib/pages/chat/reply_display.dart @@ -13,35 +13,40 @@ class ReplyDisplay extends StatelessWidget { @override Widget build(BuildContext context) { - return AnimatedContainer( - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - height: controller.editEvent != null || controller.replyEvent != null - ? 56 - : 0, - clipBehavior: Clip.hardEdge, - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.onInverseSurface, - ), - child: Row( - children: [ - IconButton( - tooltip: L10n.of(context)!.close, - icon: const Icon(Icons.close), - onPressed: controller.cancelReplyEventAction, - ), - Expanded( - child: controller.replyEvent != null - ? ReplyContent( - controller.replyEvent!, - timeline: controller.timeline!, - backgroundColor: Colors.transparent, - ) - : _EditContent( - controller.editEvent?.getDisplayEvent(controller.timeline!), - ), - ), - ], + return Padding( + padding: const EdgeInsets.all(8.0), + child: AnimatedContainer( + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + height: controller.editEvent != null || controller.replyEvent != null + ? 56 + : 0, + clipBehavior: Clip.hardEdge, + decoration: BoxDecoration( + borderRadius: const BorderRadius.all(Radius.circular(28.0)), + color: Theme.of(context).colorScheme.onInverseSurface, + ), + child: Row( + children: [ + IconButton( + tooltip: L10n.of(context)!.close, + icon: const Icon(Icons.close), + onPressed: controller.cancelReplyEventAction, + ), + Expanded( + child: controller.replyEvent != null + ? ReplyContent( + controller.replyEvent!, + timeline: controller.timeline!, + backgroundColor: Colors.transparent, + ) + : _EditContent( + controller.editEvent + ?.getDisplayEvent(controller.timeline!), + ), + ), + ], + ), ), ); } From 842dd23c4bad4d14229a16bf88d5fefdd2a42532 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Mon, 22 Jul 2024 16:44:05 -0400 Subject: [PATCH 07/11] Remove useless code --- lib/pages/chat/chat_view.dart | 11 +----- lib/pages/chat/reply_display.dart | 66 +++++++++++++++---------------- 2 files changed, 33 insertions(+), 44 deletions(-) diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 64d70b60e..e99e6a389 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -350,16 +350,7 @@ class ChatView extends StatelessWidget { ITBar( choreographer: controller.choreographer, ), - Row( - // crossAxisAlignment: CrossAxisAlignment.end, - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - ReplyDisplay(controller), - ], - ), + ReplyDisplay(controller), ], ), ), diff --git a/lib/pages/chat/reply_display.dart b/lib/pages/chat/reply_display.dart index a6bec6bbb..f05c749a2 100644 --- a/lib/pages/chat/reply_display.dart +++ b/lib/pages/chat/reply_display.dart @@ -13,40 +13,38 @@ class ReplyDisplay extends StatelessWidget { @override Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsets.all(8.0), - child: AnimatedContainer( - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - height: controller.editEvent != null || controller.replyEvent != null - ? 56 - : 0, - clipBehavior: Clip.hardEdge, - decoration: BoxDecoration( - borderRadius: const BorderRadius.all(Radius.circular(28.0)), - color: Theme.of(context).colorScheme.onInverseSurface, - ), - child: Row( - children: [ - IconButton( - tooltip: L10n.of(context)!.close, - icon: const Icon(Icons.close), - onPressed: controller.cancelReplyEventAction, - ), - Expanded( - child: controller.replyEvent != null - ? ReplyContent( - controller.replyEvent!, - timeline: controller.timeline!, - backgroundColor: Colors.transparent, - ) - : _EditContent( - controller.editEvent - ?.getDisplayEvent(controller.timeline!), - ), - ), - ], - ), + return AnimatedContainer( + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + height: controller.editEvent != null || controller.replyEvent != null + ? 56 + : 0, + clipBehavior: Clip.hardEdge, + decoration: BoxDecoration( + // #Pangea + borderRadius: const BorderRadius.all(Radius.circular(28.0)), + // Pangea# + color: Theme.of(context).colorScheme.onInverseSurface, + ), + child: Row( + children: [ + IconButton( + tooltip: L10n.of(context)!.close, + icon: const Icon(Icons.close), + onPressed: controller.cancelReplyEventAction, + ), + Expanded( + child: controller.replyEvent != null + ? ReplyContent( + controller.replyEvent!, + timeline: controller.timeline!, + backgroundColor: Colors.transparent, + ) + : _EditContent( + controller.editEvent?.getDisplayEvent(controller.timeline!), + ), + ), + ], ), ); } From d640bce7a91412bbe68f3b78cf97a5ec281e097c Mon Sep 17 00:00:00 2001 From: Kelrap Date: Tue, 23 Jul 2024 09:11:28 -0400 Subject: [PATCH 08/11] Keep reply bar same length/style as input --- lib/pages/chat/chat_view.dart | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index e99e6a389..b032caaf7 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -346,11 +346,37 @@ class ChatView extends StatelessWidget { ), ], ), - const ConnectionStatusHeader(), - ITBar( - choreographer: controller.choreographer, + Container( + margin: EdgeInsets.only( + bottom: bottomSheetPadding, + left: bottomSheetPadding, + right: bottomSheetPadding, + ), + constraints: const BoxConstraints( + maxWidth: + FluffyThemes.columnWidth * 2.5, + ), + alignment: Alignment.center, + child: Material( + clipBehavior: Clip.hardEdge, + color: Theme.of(context) + .colorScheme + .surfaceContainerHighest, + borderRadius: const BorderRadius.all( + Radius.circular(24), + ), + child: Column( + children: [ + const ConnectionStatusHeader(), + ITBar( + choreographer: + controller.choreographer, + ), + ReplyDisplay(controller), + ], + ), + ), ), - ReplyDisplay(controller), ], ), ), From 45c290d0d83ed5042db43cd6b26f14bea112cc05 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Tue, 23 Jul 2024 12:09:13 -0400 Subject: [PATCH 09/11] Keep input bar and reply bar together --- lib/pages/chat/chat_view.dart | 199 +++++++++++++++++----------------- 1 file changed, 102 insertions(+), 97 deletions(-) diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index b032caaf7..02a955591 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -14,6 +14,7 @@ import 'package:fluffychat/pangea/choreographer/widgets/start_igc_button.dart'; import 'package:fluffychat/pangea/extensions/pangea_room_extension/pangea_room_extension.dart'; import 'package:fluffychat/pangea/widgets/chat/chat_floating_action_button.dart'; import 'package:fluffychat/utils/account_config.dart'; +import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/widgets/chat_settings_popup_menu.dart'; import 'package:fluffychat/widgets/connection_status_header.dart'; import 'package:fluffychat/widgets/matrix.dart'; @@ -301,87 +302,22 @@ class ChatView extends StatelessWidget { child: Column( children: [ Expanded( - child: - // #Pangea - Stack( - children: [ - // Pangea# - GestureDetector( - onTap: controller.clearSingleSelectedEvent, - child: Builder( - builder: (context) { - if (controller.timeline == null) { - return const Center( - child: - CircularProgressIndicator.adaptive( - strokeWidth: 2, - ), - ); - } - return ChatEventList( - controller: controller, - ); - }, - ), - ), - // #Pangea - Positioned( - left: 0, - right: 0, - bottom: 7, - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - if (!controller.selectMode) - Row( - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - StartIGCButton( - controller: controller, - ), - ChatFloatingActionButton( - controller: controller, - ), - ], - ), - Container( - margin: EdgeInsets.only( - bottom: bottomSheetPadding, - left: bottomSheetPadding, - right: bottomSheetPadding, - ), - constraints: const BoxConstraints( - maxWidth: - FluffyThemes.columnWidth * 2.5, - ), - alignment: Alignment.center, - child: Material( - clipBehavior: Clip.hardEdge, - color: Theme.of(context) - .colorScheme - .surfaceContainerHighest, - borderRadius: const BorderRadius.all( - Radius.circular(24), - ), - child: Column( - children: [ - const ConnectionStatusHeader(), - ITBar( - choreographer: - controller.choreographer, - ), - ReplyDisplay(controller), - ], - ), - ), + child: GestureDetector( + onTap: controller.clearSingleSelectedEvent, + child: Builder( + builder: (context) { + if (controller.timeline == null) { + return const Center( + child: CircularProgressIndicator.adaptive( + strokeWidth: 2, ), - ], - ), - ), - ], - // Pangea# + ); + } + return ChatEventList( + controller: controller, + ); + }, + ), ), ), if (controller.room.canSendDefaultMessages && @@ -466,26 +402,31 @@ class ChatView extends StatelessWidget { ), ], ) - : Column( - mainAxisSize: MainAxisSize.min, - children: [ - // #Pangea - // const ConnectionStatusHeader(), - // ITBar( - // choreographer: - // controller.choreographer, - // ), - // ReactionsPicker(controller), - // ReplyDisplay(controller), - // ChatInputRow(controller), - // ChatEmojiPicker(controller), - ReactionsPicker(controller), - ChatInputRow(controller), - ], - ), + : + // #Pangea + null, + // Column( + // mainAxisSize: MainAxisSize.min, + // children: [ + // const ConnectionStatusHeader(), + // ITBar( + // choreographer: + // controller.choreographer, + // ), + // ReactionsPicker(controller), + // ReplyDisplay(controller), + // ChatInputRow(controller), + // ChatEmojiPicker(controller), + // ], + // ), // Pangea# ), ), + // #Pangea + SizedBox( + height: (PlatformInfos.isMobile ? 15 : 50), + ), + // Pangea# ], ), ), @@ -501,6 +442,70 @@ class ChatView extends StatelessWidget { // size: 100, // ), // ), + Positioned( + left: 0, + right: 0, + bottom: 7, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + if (!controller.selectMode) + Container( + margin: const EdgeInsets.only( + bottom: 7, + left: 11, + right: 11, + ), + constraints: const BoxConstraints( + maxWidth: FluffyThemes.columnWidth * 2.4, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + StartIGCButton( + controller: controller, + ), + ChatFloatingActionButton( + controller: controller, + ), + ], + ), + ), + Container( + margin: EdgeInsets.only( + bottom: bottomSheetPadding, + left: bottomSheetPadding, + right: bottomSheetPadding, + ), + constraints: const BoxConstraints( + maxWidth: FluffyThemes.columnWidth * 2.5, + ), + alignment: Alignment.center, + child: Material( + clipBehavior: Clip.hardEdge, + color: Theme.of(context) + .colorScheme + .surfaceContainerHighest, + borderRadius: const BorderRadius.all( + Radius.circular(24), + ), + child: Column( + children: [ + const ConnectionStatusHeader(), + ITBar( + choreographer: controller.choreographer, + ), + ReactionsPicker(controller), + ReplyDisplay(controller), + ChatInputRow(controller), + ], + ), + ), + ), + ], + ), + ), Positioned( bottom: 0, left: 0, From 7fdf9a5c929399877cb3b1f66d8b9045afa7d461 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Wed, 24 Jul 2024 16:48:32 -0400 Subject: [PATCH 10/11] Close keyboard when open toolbar --- lib/pages/chat/chat_view.dart | 5 +- lib/pangea/widgets/chat/message_toolbar.dart | 166 +++++++++---------- 2 files changed, 82 insertions(+), 89 deletions(-) diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 02a955591..25e990c32 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -423,8 +423,9 @@ class ChatView extends StatelessWidget { ), ), // #Pangea + // Keep messages above minimum input bar height SizedBox( - height: (PlatformInfos.isMobile ? 15 : 50), + height: (PlatformInfos.isMobile ? 24 : 50), ), // Pangea# ], @@ -445,7 +446,7 @@ class ChatView extends StatelessWidget { Positioned( left: 0, right: 0, - bottom: 7, + bottom: 13, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, diff --git a/lib/pangea/widgets/chat/message_toolbar.dart b/lib/pangea/widgets/chat/message_toolbar.dart index 5698b45c1..a638640e7 100644 --- a/lib/pangea/widgets/chat/message_toolbar.dart +++ b/lib/pangea/widgets/chat/message_toolbar.dart @@ -58,10 +58,9 @@ class ToolbarDisplayController { ); } - void showToolbar( - BuildContext context, { - MessageMode? mode, - }) { + void showToolbar(BuildContext context, {MessageMode? mode}) { + // Close keyboard, if open + FocusManager.instance.primaryFocus?.unfocus(); bool toolbarUp = true; if (highlighted) return; if (controller.selectMode) { @@ -87,12 +86,13 @@ class ToolbarDisplayController { if (targetOffset.dy < 320) { final spaceBeneath = MediaQuery.of(context).size.height - (targetOffset.dy + transformTargetSize.height); - if (spaceBeneath >= 320) { - toolbarUp = false; - } + // If toolbar is open, opening toolbar beneath without scrolling can cause issues + // if (spaceBeneath >= 320) { + // toolbarUp = false; + // } // See if it's possible to scroll up to make space - else if (controller.scrollController.offset - targetOffset.dy + 320 >= + if (controller.scrollController.offset - targetOffset.dy + 320 >= controller.scrollController.position.minScrollExtent && controller.scrollController.offset - targetOffset.dy + 320 <= controller.scrollController.position.maxScrollExtent) { @@ -152,13 +152,7 @@ class ToolbarDisplayController { ? CrossAxisAlignment.end : CrossAxisAlignment.start, children: [ - toolbarUp - // Column is limited to screen height - // If message portion is too tall, decrease toolbar height - // as necessary to prevent toolbar from acting strange - // Problems may still occur if toolbar height is decreased too much - ? toolbar! - : overlayMessage, + toolbarUp ? toolbar! : overlayMessage, const SizedBox(height: 6), toolbarUp ? overlayMessage : toolbar!, ], @@ -419,85 +413,83 @@ class MessageToolbarState extends State { @override Widget build(BuildContext context) { - return Flexible( - child: Material( - type: MaterialType.transparency, - child: Container( - padding: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: Theme.of(context).cardColor, - border: Border.all( - width: 2, - color: Theme.of(context).colorScheme.primary, - ), - borderRadius: const BorderRadius.all( - Radius.circular(25), - ), + return Material( + type: MaterialType.transparency, + child: Container( + padding: const EdgeInsets.all(10), + decoration: BoxDecoration( + color: Theme.of(context).cardColor, + border: Border.all( + width: 2, + color: Theme.of(context).colorScheme.primary, ), - constraints: const BoxConstraints( - maxWidth: 300, - minWidth: 300, - maxHeight: 300, + borderRadius: const BorderRadius.all( + Radius.circular(25), ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Flexible( - child: SingleChildScrollView( - child: AnimatedSize( - duration: FluffyThemes.animationDuration, - child: Column( - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: toolbarContent ?? const SizedBox(), - ), - SizedBox(height: toolbarContent == null ? 0 : 20), - ], - ), + ), + constraints: const BoxConstraints( + maxWidth: 300, + minWidth: 300, + maxHeight: 300, + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Flexible( + child: SingleChildScrollView( + child: AnimatedSize( + duration: FluffyThemes.animationDuration, + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: toolbarContent ?? const SizedBox(), + ), + SizedBox(height: toolbarContent == null ? 0 : 20), + ], ), ), ), - Row( - mainAxisSize: MainAxisSize.min, - children: MessageMode.values.map((mode) { - if ([ - MessageMode.definition, - MessageMode.textToSpeech, - MessageMode.translation, - ].contains(mode) && - widget.pangeaMessageEvent.isAudioMessage) { - return const SizedBox.shrink(); - } - if (mode == MessageMode.speechToText && - !widget.pangeaMessageEvent.isAudioMessage) { - return const SizedBox.shrink(); - } - return Tooltip( - message: mode.tooltip(context), - child: IconButton( - icon: Icon(mode.icon), - color: mode.iconColor( - widget.pangeaMessageEvent, - currentMode, - context, - ), - onPressed: () => updateMode(mode), - ), - ); - }).toList() + - [ - Tooltip( - message: L10n.of(context)!.more, - child: IconButton( - icon: const Icon(Icons.add_reaction_outlined), - onPressed: showMore, + ), + Row( + mainAxisSize: MainAxisSize.min, + children: MessageMode.values.map((mode) { + if ([ + MessageMode.definition, + MessageMode.textToSpeech, + MessageMode.translation, + ].contains(mode) && + widget.pangeaMessageEvent.isAudioMessage) { + return const SizedBox.shrink(); + } + if (mode == MessageMode.speechToText && + !widget.pangeaMessageEvent.isAudioMessage) { + return const SizedBox.shrink(); + } + return Tooltip( + message: mode.tooltip(context), + child: IconButton( + icon: Icon(mode.icon), + color: mode.iconColor( + widget.pangeaMessageEvent, + currentMode, + context, ), + onPressed: () => updateMode(mode), ), - ], - ), - ], - ), + ); + }).toList() + + [ + Tooltip( + message: L10n.of(context)!.more, + child: IconButton( + icon: const Icon(Icons.add_reaction_outlined), + onPressed: showMore, + ), + ), + ], + ), + ], ), ), ); From 42ced399aa10c58e80b89a078daead3fa2b3db51 Mon Sep 17 00:00:00 2001 From: ggurdin Date: Fri, 26 Jul 2024 11:36:36 -0400 Subject: [PATCH 11/11] some simplifications of input bar stack --- lib/pages/chat/chat_emoji_picker.dart | 163 +++++++++++--------------- lib/pages/chat/chat_view.dart | 17 +-- lib/pages/chat/reply_display.dart | 34 ++---- 3 files changed, 85 insertions(+), 129 deletions(-) diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart index a59bba609..f38243b84 100644 --- a/lib/pages/chat/chat_emoji_picker.dart +++ b/lib/pages/chat/chat_emoji_picker.dart @@ -14,9 +14,6 @@ class ChatEmojiPicker extends StatelessWidget { @override Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); - // #Pangea - final bool lightMode = Theme.of(context).brightness == Brightness.light; - // Pangea# return AnimatedContainer( duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, @@ -26,103 +23,79 @@ class ChatEmojiPicker extends StatelessWidget { ? MediaQuery.of(context).size.height / 2 : 0, child: controller.showEmojiPicker - ? - // #Pangea - Stack( - children: [ - // Pangea# - DefaultTabController( - length: 2, - child: Column( - children: [ - TabBar( - tabs: [ - Tab(text: L10n.of(context)!.emojis), - Tab(text: L10n.of(context)!.stickers), - ], - ), - Expanded( - child: TabBarView( - children: [ - EmojiPicker( - onEmojiSelected: controller.onEmojiSelected, - onBackspacePressed: - controller.emojiPickerBackspace, - config: Config( - emojiViewConfig: EmojiViewConfig( - noRecents: const NoRecent(), - backgroundColor: Theme.of(context) - .colorScheme - .onInverseSurface, - ), - bottomActionBarConfig: - const BottomActionBarConfig( - enabled: false, - ), - categoryViewConfig: CategoryViewConfig( - backspaceColor: theme.colorScheme.primary, - iconColor: theme.colorScheme.primary - .withOpacity(0.5), - iconColorSelected: theme.colorScheme.primary, - indicatorColor: theme.colorScheme.primary, - ), - skinToneConfig: SkinToneConfig( - dialogBackgroundColor: Color.lerp( - theme.colorScheme.surface, - theme.colorScheme.primaryContainer, - 0.75, - )!, - indicatorColor: theme.colorScheme.onSurface, - ), - ), + ? DefaultTabController( + length: 2, + child: Column( + children: [ + TabBar( + tabs: [ + Tab(text: L10n.of(context)!.emojis), + Tab(text: L10n.of(context)!.stickers), + ], + ), + Expanded( + child: TabBarView( + children: [ + EmojiPicker( + onEmojiSelected: controller.onEmojiSelected, + onBackspacePressed: controller.emojiPickerBackspace, + config: Config( + emojiViewConfig: EmojiViewConfig( + noRecents: const NoRecent(), + backgroundColor: Theme.of(context) + .colorScheme + .onInverseSurface, ), - StickerPickerDialog( - room: controller.room, - onSelected: (sticker) { - controller.room.sendEvent( - { - 'body': sticker.body, - 'info': sticker.info ?? {}, - 'url': sticker.url.toString(), - }, - type: EventTypes.Sticker, - ); - controller.hideEmojiPicker(); + bottomActionBarConfig: const BottomActionBarConfig( + enabled: false, + ), + categoryViewConfig: CategoryViewConfig( + backspaceColor: theme.colorScheme.primary, + iconColor: + theme.colorScheme.primary.withOpacity(0.5), + iconColorSelected: theme.colorScheme.primary, + indicatorColor: theme.colorScheme.primary, + ), + skinToneConfig: SkinToneConfig( + dialogBackgroundColor: Color.lerp( + theme.colorScheme.surface, + theme.colorScheme.primaryContainer, + 0.75, + )!, + indicatorColor: theme.colorScheme.onSurface, + ), + ), + ), + StickerPickerDialog( + room: controller.room, + onSelected: (sticker) { + controller.room.sendEvent( + { + 'body': sticker.body, + 'info': sticker.info ?? {}, + 'url': sticker.url.toString(), }, - ), - ], + type: EventTypes.Sticker, + ); + controller.hideEmojiPicker(); + }, ), - ), - ], + ], + ), ), - ), - // #Pangea - // Close button placed at bottom of emoji picker - Positioned( - left: 0, - right: 0, - bottom: 5, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FloatingActionButton( - onPressed: controller.hideEmojiPicker, - backgroundColor: lightMode - ? const Color.fromARGB(255, 211, 211, 211) - : Colors.black, - shape: const CircleBorder(), - heroTag: null, - mini: true, - child: const Icon( - Icons.close, - size: 20, - ), - ), - ], + // #Pangea + Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: FloatingActionButton( + onPressed: controller.hideEmojiPicker, + shape: const CircleBorder(), + mini: true, + child: const Icon(Icons.close), + ), ), - ), - // Pangea# - ], + // Pangea# + ], + ), ) : null, ); diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 25e990c32..ff4ba7015 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -446,17 +446,17 @@ class ChatView extends StatelessWidget { Positioned( left: 0, right: 0, - bottom: 13, + bottom: 16, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ if (!controller.selectMode) Container( - margin: const EdgeInsets.only( - bottom: 7, - left: 11, - right: 11, + margin: EdgeInsets.only( + bottom: 10, + left: bottomSheetPadding, + right: bottomSheetPadding, ), constraints: const BoxConstraints( maxWidth: FluffyThemes.columnWidth * 2.4, @@ -500,6 +500,7 @@ class ChatView extends StatelessWidget { ReactionsPicker(controller), ReplyDisplay(controller), ChatInputRow(controller), + ChatEmojiPicker(controller), ], ), ), @@ -507,12 +508,6 @@ class ChatView extends StatelessWidget { ], ), ), - Positioned( - bottom: 0, - left: 0, - right: 0, - child: ChatEmojiPicker(controller), - ), // Pangea# ], ), diff --git a/lib/pages/chat/reply_display.dart b/lib/pages/chat/reply_display.dart index f05c749a2..e2bacac83 100644 --- a/lib/pages/chat/reply_display.dart +++ b/lib/pages/chat/reply_display.dart @@ -21,9 +21,6 @@ class ReplyDisplay extends StatelessWidget { : 0, clipBehavior: Clip.hardEdge, decoration: BoxDecoration( - // #Pangea - borderRadius: const BorderRadius.all(Radius.circular(28.0)), - // Pangea# color: Theme.of(context).colorScheme.onInverseSurface, ), child: Row( @@ -67,28 +64,19 @@ class _EditContent extends StatelessWidget { Icons.edit, color: Theme.of(context).colorScheme.primary, ), - // #Pangea - // Container(width: 15.0), - Container(width: 8.0), - Flexible( - child: - // Pangea# - Text( - event.calcLocalizedBodyFallback( - MatrixLocals(L10n.of(context)!), - withSenderNamePrefix: false, - hideReply: true, - ), - overflow: TextOverflow.ellipsis, - maxLines: 1, - style: TextStyle( - color: Theme.of(context).textTheme.bodyMedium!.color, - ), + Container(width: 15.0), + Text( + event.calcLocalizedBodyFallback( + MatrixLocals(L10n.of(context)!), + withSenderNamePrefix: false, + hideReply: true, + ), + overflow: TextOverflow.ellipsis, + maxLines: 1, + style: TextStyle( + color: Theme.of(context).textTheme.bodyMedium!.color, ), ), - // #Pangea - Container(width: 10.0), - // Pangea# ], ); }