diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart index b26ba605b..75941a8c8 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -10,6 +10,7 @@ import 'package:file_picker/file_picker.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/setting_keys.dart'; import 'package:fluffychat/config/themes.dart'; +import 'package:fluffychat/pages/chat/chat_emoji_picker.dart'; import 'package:fluffychat/pages/chat/chat_view.dart'; import 'package:fluffychat/pages/chat/event_info_dialog.dart'; import 'package:fluffychat/pages/chat/recording_dialog.dart'; @@ -23,6 +24,7 @@ import 'package:fluffychat/pangea/models/representation_content_model.dart'; 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/overlay.dart'; import 'package:fluffychat/pangea/utils/report_message.dart'; import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/pangea/widgets/igc/pangea_text_controller.dart'; @@ -841,6 +843,11 @@ class ChatController extends State } void hideEmojiPicker() { + // #Pangea + MatrixState.pAnyState.closeOverlay(); + MatrixState.pAnyState.closeOverlay(); + clearSelectedEvents(); + // Pangea setState(() => showEmojiPicker = false); } @@ -1234,11 +1241,29 @@ class ChatController extends State _allReactionEvents = allReactionEvents; emojiPickerType = EmojiPickerType.reaction; setState(() => showEmojiPicker = true); + // #Pangea + OverlayUtil.showOverlay( + context: context, + child: ChatEmojiPicker(this), + transformTargetId: selectedEvents.first.eventId, + targetAnchor: Alignment.center, + followerAnchor: Alignment.center, + backgroundColor: const Color.fromRGBO(0, 0, 0, 1).withAlpha(100), + closePrevOverlay: false, + targetScreen: true, + onDismiss: hideEmojiPicker, + centered: false, + bottom: true, + ); + // Pangea# } void sendEmojiAction(String? emoji) async { final events = List.from(selectedEvents); setState(() => selectedEvents.clear()); + // #Pangea + MatrixState.pAnyState.closeOverlay(); + // Pangea# for (final event in events) { await room.sendReaction( event.eventId, diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart index f38243b84..088bb74a7 100644 --- a/lib/pages/chat/chat_emoji_picker.dart +++ b/lib/pages/chat/chat_emoji_picker.dart @@ -14,90 +14,97 @@ class ChatEmojiPicker extends StatelessWidget { @override Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); - return AnimatedContainer( - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - clipBehavior: Clip.hardEdge, - decoration: const BoxDecoration(), - height: controller.showEmojiPicker - ? 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), - ], - ), - 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(); - }, - ), + return + // #Pangea + Material( + child: + // Pangea# + AnimatedContainer( + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + clipBehavior: Clip.hardEdge, + decoration: const BoxDecoration(), + height: controller.showEmojiPicker + ? 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 - Padding( - padding: const EdgeInsets.symmetric(vertical: 8.0), - child: FloatingActionButton( - onPressed: controller.hideEmojiPicker, - shape: const CircleBorder(), - mini: true, - child: const Icon(Icons.close), + 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(); + }, + ), + ], + ), ), - ), - // Pangea# - ], - ), - ) - : null, + // #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# + ], + ), + ) + : null, + ), ); } } diff --git a/lib/pangea/utils/overlay.dart b/lib/pangea/utils/overlay.dart index cf1cd881e..b8bfbc935 100644 --- a/lib/pangea/utils/overlay.dart +++ b/lib/pangea/utils/overlay.dart @@ -29,6 +29,7 @@ class OverlayUtil { bool targetScreen = false, Function? onDismiss, bool centered = true, + bool bottom = false, }) { try { if (closePrevOverlay) { @@ -47,16 +48,20 @@ class OverlayUtil { onDismiss: onDismiss, ), Positioned( - top: (targetScreen && !centered) + top: (targetScreen && !centered && !bottom) ? FluffyThemes.isColumnMode(context) ? 20 : 65 : null, right: (targetScreen && !centered) - ? FluffyThemes.isColumnMode(context) - ? 20 - : 15 + ? bottom + ? 0 + : FluffyThemes.isColumnMode(context) + ? 20 + : 15 : null, + left: bottom ? 0 : null, + bottom: bottom ? 0 : null, width: width, height: height, child: targetScreen diff --git a/lib/pangea/widgets/chat/message_toolbar.dart b/lib/pangea/widgets/chat/message_toolbar.dart index 75a4c660d..68f119c49 100644 --- a/lib/pangea/widgets/chat/message_toolbar.dart +++ b/lib/pangea/widgets/chat/message_toolbar.dart @@ -66,6 +66,8 @@ class ToolbarDisplayController { void showToolbar(BuildContext context, {MessageMode? mode}) { // Close keyboard, if open FocusManager.instance.primaryFocus?.unfocus(); + // Close emoji picker, if open + controller.showEmojiPicker = false; if (highlighted) return; if (!MatrixState.pangeaController.languageController.languagesSet) { pLanguageDialog(context, () {});