From 9060fd84f81bea4c6e081e09c9f169fc4103089f Mon Sep 17 00:00:00 2001 From: ggurdin <46800240+ggurdin@users.noreply.github.com> Date: Mon, 18 Nov 2024 16:20:45 -0500 Subject: [PATCH] 1035 cant scroll down the definition box (#1041) * replace scrolling in word data card * fixes hidden overlay header on mobile --- .../chat/message_selection_overlay.dart | 80 +++++++------ lib/pangea/widgets/chat/overlay_header.dart | 3 +- lib/pangea/widgets/igc/word_data_card.dart | 106 ++++++++++-------- 3 files changed, 103 insertions(+), 86 deletions(-) diff --git a/lib/pangea/widgets/chat/message_selection_overlay.dart b/lib/pangea/widgets/chat/message_selection_overlay.dart index 72973bfba..e6b8e5f57 100644 --- a/lib/pangea/widgets/chat/message_selection_overlay.dart +++ b/lib/pangea/widgets/chat/message_selection_overlay.dart @@ -368,6 +368,7 @@ class MessageOverlayController extends State final currentBottomOffset = _screenHeight! - _messageOffset!.dy - _messageSize!.height - + (_mediaQuery?.padding.bottom ?? 0) - _belowMessageHeight; final bool hasHeaderOverflow = @@ -490,8 +491,11 @@ class MessageOverlayController extends State double? _adjustedMessageHeight; // height of the reply/forward bar + the reaction picker + contextual padding - double get _footerHeight => - 48 + 56 + (FluffyThemes.isColumnMode(context) ? 16.0 : 8.0); + double get _footerHeight { + return 56 + + (FluffyThemes.isColumnMode(context) ? 16.0 : 8.0) + + (_mediaQuery?.padding.bottom ?? 0); + } MediaQueryData? get _mediaQuery { try { @@ -502,9 +506,10 @@ class MessageOverlayController extends State } } - double get _headerHeight => - (Theme.of(context).appBarTheme.toolbarHeight ?? 56) + - (_mediaQuery?.padding.top ?? 0); + double get _headerHeight { + return (Theme.of(context).appBarTheme.toolbarHeight ?? 56) + + (_mediaQuery?.padding.top ?? 0); + } double? get _screenHeight => _mediaQuery?.size.height; @@ -619,6 +624,7 @@ class MessageOverlayController extends State bottom: _screenHeight! - _messageOffset!.dy - _messageSize!.height - + (_mediaQuery?.padding.bottom ?? 0) - _belowMessageHeight, child: overlayMessage, ) @@ -634,39 +640,41 @@ class MessageOverlayController extends State }, ); - return Padding( - padding: EdgeInsets.only( - left: horizontalPadding, - right: horizontalPadding, - ), - child: Stack( - children: [ - positionedOverlayMessage, - Align( - alignment: Alignment.bottomCenter, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Expanded( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - OverlayFooter(controller: widget.chatController), - ], + return SafeArea( + child: Padding( + padding: EdgeInsets.only( + left: horizontalPadding, + right: horizontalPadding, + ), + child: Stack( + children: [ + positionedOverlayMessage, + Align( + alignment: Alignment.bottomCenter, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + OverlayFooter(controller: widget.chatController), + ], + ), ), - ), - if (showDetails) - const SizedBox( - width: FluffyThemes.columnWidth, - ), - ], + if (showDetails) + const SizedBox( + width: FluffyThemes.columnWidth, + ), + ], + ), ), - ), - Material( - type: MaterialType.transparency, - child: OverlayHeader(controller: widget.chatController), - ), - ], + Material( + type: MaterialType.transparency, + child: OverlayHeader(controller: widget.chatController), + ), + ], + ), ), ); } diff --git a/lib/pangea/widgets/chat/overlay_header.dart b/lib/pangea/widgets/chat/overlay_header.dart index bc5618468..a9324b90c 100644 --- a/lib/pangea/widgets/chat/overlay_header.dart +++ b/lib/pangea/widgets/chat/overlay_header.dart @@ -22,7 +22,8 @@ class OverlayHeader extends StatelessWidget { bottomLeft: Radius.circular(AppConfig.borderRadius), bottomRight: Radius.circular(AppConfig.borderRadius), ), - color: Theme.of(context).appBarTheme.backgroundColor, + color: Theme.of(context).appBarTheme.backgroundColor ?? + Theme.of(context).colorScheme.surfaceContainerHighest, ), height: Theme.of(context).appBarTheme.toolbarHeight ?? 56, child: Row( diff --git a/lib/pangea/widgets/igc/word_data_card.dart b/lib/pangea/widgets/igc/word_data_card.dart index 06e7a1ed7..5d34dd4db 100644 --- a/lib/pangea/widgets/igc/word_data_card.dart +++ b/lib/pangea/widgets/igc/word_data_card.dart @@ -179,55 +179,63 @@ class WordDataCardView extends StatelessWidget { ); } - return Padding( - padding: const EdgeInsets.fromLTRB(16, 20, 16, 16), - child: Column( - children: [ - if (controller.widget.choiceFeedback != null) - Text( - controller.widget.choiceFeedback!, - style: BotStyle.text(context), - ), - const SizedBox(height: 5.0), - if (controller.wordData != null && - controller.wordNetError == null && - controller.activeL1 != null && - controller.activeL2 != null) - WordNetInfo( - wordData: controller.wordData!, - activeL1: controller.activeL1!, - activeL2: controller.activeL2!, - ), - if (controller.isLoadingWordNet) - const ToolbarContentLoadingIndicator(), - const SizedBox(height: 5.0), - // if (controller.widget.hasInfo && - // !controller.isLoadingContextualDefinition && - // controller.contextualDefinitionRes == null) - // Material( - // type: MaterialType.transparency, - // child: ListTile( - // leading: const BotFace( - // width: 40, expression: BotExpression.surprised), - // title: Text(L10n.of(context)!.askPangeaBot), - // onTap: controller.handleGetDefinitionButtonPress, - // ), - // ), - if (controller.isLoadingContextualDefinition) - const ToolbarContentLoadingIndicator(), - if (controller.contextualDefinitionRes != null) - Text( - controller.contextualDefinitionRes!.text, - style: BotStyle.text(context), - textAlign: TextAlign.center, - ), - if (controller.definitionError != null) - Text( - L10n.of(context)!.sorryNoResults, - style: BotStyle.text(context), - textAlign: TextAlign.center, - ), - ], + return ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: AppConfig.toolbarMinWidth, + maxHeight: AppConfig.toolbarMaxHeight, + ), + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(20.0), + child: Column( + children: [ + if (controller.widget.choiceFeedback != null) + Text( + controller.widget.choiceFeedback!, + style: BotStyle.text(context), + ), + const SizedBox(height: 5.0), + if (controller.wordData != null && + controller.wordNetError == null && + controller.activeL1 != null && + controller.activeL2 != null) + WordNetInfo( + wordData: controller.wordData!, + activeL1: controller.activeL1!, + activeL2: controller.activeL2!, + ), + if (controller.isLoadingWordNet) + const ToolbarContentLoadingIndicator(), + const SizedBox(height: 5.0), + // if (controller.widget.hasInfo && + // !controller.isLoadingContextualDefinition && + // controller.contextualDefinitionRes == null) + // Material( + // type: MaterialType.transparency, + // child: ListTile( + // leading: const BotFace( + // width: 40, expression: BotExpression.surprised), + // title: Text(L10n.of(context)!.askPangeaBot), + // onTap: controller.handleGetDefinitionButtonPress, + // ), + // ), + if (controller.isLoadingContextualDefinition) + const ToolbarContentLoadingIndicator(), + if (controller.contextualDefinitionRes != null) + Text( + controller.contextualDefinitionRes!.text, + style: BotStyle.text(context), + textAlign: TextAlign.center, + ), + if (controller.definitionError != null) + Text( + L10n.of(context)!.sorryNoResults, + style: BotStyle.text(context), + textAlign: TextAlign.center, + ), + ], + ), + ), ), ); }