From c5675d6cb3da5c598f6c2464651660340b9ebc9a Mon Sep 17 00:00:00 2001 From: ggurdin <46800240+ggurdin@users.noreply.github.com> Date: Thu, 15 May 2025 14:03:31 -0400 Subject: [PATCH] chore: make overlay header scrollable (#2817) --- .../toolbar/widgets/overlay_header.dart | 191 +++++++++++------- 1 file changed, 114 insertions(+), 77 deletions(-) diff --git a/lib/pangea/toolbar/widgets/overlay_header.dart b/lib/pangea/toolbar/widgets/overlay_header.dart index 9db1fa248..353c5dfda 100644 --- a/lib/pangea/toolbar/widgets/overlay_header.dart +++ b/lib/pangea/toolbar/widgets/overlay_header.dart @@ -9,7 +9,7 @@ import 'package:fluffychat/pages/chat/chat.dart'; import 'package:fluffychat/pangea/events/extensions/pangea_event_extension.dart'; import 'package:fluffychat/pangea/events/utils/report_message.dart'; -class OverlayHeader extends StatelessWidget { +class OverlayHeader extends StatefulWidget { final ChatController controller; const OverlayHeader({ @@ -17,6 +17,21 @@ class OverlayHeader extends StatelessWidget { super.key, }); + @override + State createState() => OverlayHeaderState(); +} + +class OverlayHeaderState extends State { + ChatController get controller => widget.controller; + + final ScrollController _scrollController = ScrollController(); + + @override + void dispose() { + _scrollController.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { final l10n = L10n.of(context); @@ -35,84 +50,106 @@ class OverlayHeader extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ - if (controller.selectedEvents.length == 1) - IconButton( - icon: const Icon(Symbols.reply_all), - tooltip: l10n.reply, - onPressed: controller.replyAction, - color: theme.colorScheme.primary, - ), - IconButton( - icon: const Icon(Symbols.forward), - tooltip: l10n.forward, - onPressed: controller.forwardEventsAction, - color: theme.colorScheme.primary, - ), - if (controller.selectedEvents.length == 1 && - controller.selectedEvents.single.messageType == MessageTypes.Text) - IconButton( - icon: const Icon(Icons.copy_outlined), - tooltip: l10n.copy, - onPressed: controller.copyEventsAction, - color: theme.colorScheme.primary, - ), - if (controller.canSaveSelectedEvent) - // Use builder context to correctly position the share dialog on iPad - Builder( - builder: (context) => IconButton( - icon: const Icon(Symbols.download), - tooltip: L10n.of(context).download, - onPressed: () => controller.saveSelectedEvent(context), - color: theme.colorScheme.primary, + Expanded( + child: Scrollbar( + thumbVisibility: true, + controller: _scrollController, + child: Align( + alignment: Alignment.centerRight, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + controller: _scrollController, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: Row( + children: [ + if (controller.selectedEvents.length == 1) + IconButton( + icon: const Icon(Symbols.reply_all), + tooltip: l10n.reply, + onPressed: controller.replyAction, + color: theme.colorScheme.primary, + ), + IconButton( + icon: const Icon(Symbols.forward), + tooltip: l10n.forward, + onPressed: controller.forwardEventsAction, + color: theme.colorScheme.primary, + ), + if (controller.selectedEvents.length == 1 && + controller.selectedEvents.single.messageType == + MessageTypes.Text) + IconButton( + icon: const Icon(Icons.copy_outlined), + tooltip: l10n.copy, + onPressed: controller.copyEventsAction, + color: theme.colorScheme.primary, + ), + if (controller.canSaveSelectedEvent) + // Use builder context to correctly position the share dialog on iPad + Builder( + builder: (context) => IconButton( + icon: const Icon(Symbols.download), + tooltip: L10n.of(context).download, + onPressed: () => + controller.saveSelectedEvent(context), + color: theme.colorScheme.primary, + ), + ), + if (controller.canPinSelectedEvents) + IconButton( + icon: const Icon(Icons.push_pin_outlined), + onPressed: controller.pinEvent, + tooltip: l10n.pinMessage, + color: theme.colorScheme.primary, + ), + if (controller.canEditSelectedEvents && + !controller.selectedEvents.first.isActivityMessage) + IconButton( + icon: const Icon(Icons.edit_outlined), + tooltip: l10n.edit, + onPressed: controller.editSelectedEventAction, + color: theme.colorScheme.primary, + ), + if (controller.canRedactSelectedEvents) + IconButton( + icon: const Icon(Icons.delete_outlined), + tooltip: l10n.redactMessage, + onPressed: controller.redactEventsAction, + color: theme.colorScheme.primary, + ), + if (controller.selectedEvents.length == 1) + IconButton( + icon: const Icon(Icons.shield_outlined), + tooltip: l10n.reportMessage, + onPressed: () { + final event = controller.selectedEvents.first; + controller.clearSelectedEvents(); + reportEvent( + event, + controller, + controller.context, + ); + }, + color: theme.colorScheme.primary, + ), + if (controller.selectedEvents.length == 1) + IconButton( + icon: const Icon(Icons.info_outlined), + tooltip: l10n.messageInfo, + color: theme.colorScheme.primary, + onPressed: () { + controller.showEventInfo(); + controller.clearSelectedEvents(); + }, + ), + ], + ), + ), + ), ), ), - if (controller.canPinSelectedEvents) - IconButton( - icon: const Icon(Icons.push_pin_outlined), - onPressed: controller.pinEvent, - tooltip: l10n.pinMessage, - color: theme.colorScheme.primary, - ), - if (controller.canEditSelectedEvents && - !controller.selectedEvents.first.isActivityMessage) - IconButton( - icon: const Icon(Icons.edit_outlined), - tooltip: l10n.edit, - onPressed: controller.editSelectedEventAction, - color: theme.colorScheme.primary, - ), - if (controller.canRedactSelectedEvents) - IconButton( - icon: const Icon(Icons.delete_outlined), - tooltip: l10n.redactMessage, - onPressed: controller.redactEventsAction, - color: theme.colorScheme.primary, - ), - if (controller.selectedEvents.length == 1) - IconButton( - icon: const Icon(Icons.shield_outlined), - tooltip: l10n.reportMessage, - onPressed: () { - final event = controller.selectedEvents.first; - controller.clearSelectedEvents(); - reportEvent( - event, - controller, - controller.context, - ); - }, - color: theme.colorScheme.primary, - ), - if (controller.selectedEvents.length == 1) - IconButton( - icon: const Icon(Icons.info_outlined), - tooltip: l10n.messageInfo, - color: theme.colorScheme.primary, - onPressed: () { - controller.showEventInfo(); - controller.clearSelectedEvents(); - }, - ), + ), ], ), );