From ba61e3c1644d2c9bc1149ab6c14577fea12287e0 Mon Sep 17 00:00:00 2001 From: krille-chan Date: Tue, 17 Jun 2025 20:57:12 +0200 Subject: [PATCH] chore: Follow up emoji picker --- lib/pages/chat/events/message.dart | 393 +++++++++++++++-------------- 1 file changed, 209 insertions(+), 184 deletions(-) diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index b52fb67db..805fab92f 100644 --- a/lib/pages/chat/events/message.dart +++ b/lib/pages/chat/events/message.dart @@ -424,10 +424,8 @@ class Message extends StatelessWidget { ), Container( alignment: alignment, - padding: EdgeInsets.only( - left: 8, - bottom: showReactionPicker ? 40 : 0, - ), + padding: + const EdgeInsets.only(left: 8), child: GestureDetector( onLongPress: longPressSelect ? null @@ -633,191 +631,218 @@ class Message extends StatelessWidget { ), ), ), + Align( + alignment: ownMessage + ? Alignment.bottomRight + : Alignment.bottomLeft, + child: AnimatedSize( + duration: + FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + child: showReactionPicker + ? Padding( + padding: + const EdgeInsets.only( + top: 4.0, + bottom: 4.0, + left: 8.0, + ), + child: Material( + elevation: 4, + borderRadius: + BorderRadius.circular( + AppConfig.borderRadius, + ), + shadowColor: theme + .colorScheme.surface + .withAlpha(128), + child: Row( + mainAxisSize: + MainAxisSize.min, + children: [ + ...AppConfig + .defaultReactions + .map( + (emoji) => + IconButton( + padding: + EdgeInsets + .zero, + icon: Center( + child: Opacity( + opacity: + sentReactions + .contains( + emoji, + ) + ? 0.33 + : 1, + child: Text( + emoji, + style: + const TextStyle( + fontSize: + 20, + ), + textAlign: + TextAlign + .center, + ), + ), + ), + onPressed: + sentReactions + .contains( + emoji, + ) + ? null + : () { + onSelect( + event, + ); + event + .room + .sendReaction( + event.eventId, + emoji, + ); + }, + ), + ), + IconButton( + icon: const Icon( + Icons + .add_reaction_outlined, + ), + tooltip: L10n.of( + context, + ).customReaction, + onPressed: + () async { + final emoji = + await showAdaptiveBottomSheet< + String>( + context: + context, + builder: + (context) => + Scaffold( + appBar: + AppBar( + title: Text( + L10n.of(context) + .customReaction, + ), + leading: + CloseButton( + onPressed: + () => + Navigator.of( + context, + ).pop( + null, + ), + ), + ), + body: + SizedBox( + height: double + .infinity, + child: + EmojiPicker( + onEmojiSelected: ( + _, + emoji, + ) => + Navigator.of( + context, + ).pop( + emoji + .emoji, + ), + config: + Config( + emojiViewConfig: + const EmojiViewConfig( + backgroundColor: + Colors.transparent, + ), + bottomActionBarConfig: + const BottomActionBarConfig( + enabled: + false, + ), + categoryViewConfig: + CategoryViewConfig( + initCategory: + Category.SMILEYS, + backspaceColor: theme + .colorScheme + .primary, + iconColor: theme + .colorScheme + .primary + .withAlpha( + 128, + ), + iconColorSelected: theme + .colorScheme + .primary, + indicatorColor: theme + .colorScheme + .primary, + backgroundColor: theme + .colorScheme + .surface, + ), + skinToneConfig: + SkinToneConfig( + dialogBackgroundColor: + Color.lerp( + theme.colorScheme.surface, + theme.colorScheme.primaryContainer, + 0.75, + )!, + indicatorColor: theme + .colorScheme + .onSurface, + ), + ), + ), + ), + ), + ); + if (emoji == + null) { + return; + } + if (sentReactions + .contains( + emoji, + )) { + return; + } + onSelect(event); + + await event.room + .sendReaction( + event.eventId, + emoji, + ); + }, + ), + ], + ), + ), + ) + : const SizedBox.shrink(), + ), + ), ], ), ), ], ), - Positioned( - left: - ownMessage ? null : Avatar.defaultSize + 8, - right: ownMessage ? 0 : null, - bottom: 0, - child: AnimatedSize( - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - alignment: Alignment.bottomCenter, - child: showReactionPicker - ? Padding( - padding: const EdgeInsets.only( - top: 8.0, - bottom: 4.0, - ), - child: Material( - elevation: 4, - borderRadius: BorderRadius.circular( - AppConfig.borderRadius, - ), - shadowColor: theme - .colorScheme.surface - .withAlpha(128), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - ...AppConfig.defaultReactions - .map( - (emoji) => IconButton( - padding: EdgeInsets.zero, - icon: Center( - child: Opacity( - opacity: sentReactions - .contains(emoji) - ? 0.33 - : 1, - child: Text( - emoji, - style: - const TextStyle( - fontSize: 20, - ), - textAlign: - TextAlign.center, - ), - ), - ), - onPressed: sentReactions - .contains(emoji) - ? null - : () { - onSelect(event); - event.room - .sendReaction( - event.eventId, - emoji, - ); - }, - ), - ), - IconButton( - icon: const Icon( - Icons.add_reaction_outlined, - ), - tooltip: L10n.of(context) - .customReaction, - onPressed: () async { - final emoji = - await showAdaptiveBottomSheet< - String>( - context: context, - builder: (context) => - Scaffold( - appBar: AppBar( - title: Text( - L10n.of(context) - .customReaction, - ), - leading: CloseButton( - onPressed: () => - Navigator.of( - context, - ).pop( - null, - ), - ), - ), - body: SizedBox( - height: - double.infinity, - child: EmojiPicker( - onEmojiSelected: ( - _, - emoji, - ) => - Navigator.of( - context, - ).pop( - emoji.emoji, - ), - config: Config( - emojiViewConfig: - const EmojiViewConfig( - backgroundColor: - Colors - .transparent, - ), - bottomActionBarConfig: - const BottomActionBarConfig( - enabled: false, - ), - categoryViewConfig: - CategoryViewConfig( - initCategory: - Category - .SMILEYS, - backspaceColor: theme - .colorScheme - .primary, - iconColor: theme - .colorScheme - .primary - .withAlpha( - 128, - ), - iconColorSelected: - theme - .colorScheme - .primary, - indicatorColor: theme - .colorScheme - .primary, - backgroundColor: - theme - .colorScheme - .surface, - ), - skinToneConfig: - SkinToneConfig( - dialogBackgroundColor: - Color.lerp( - theme - .colorScheme - .surface, - theme - .colorScheme - .primaryContainer, - 0.75, - )!, - indicatorColor: theme - .colorScheme - .onSurface, - ), - ), - ), - ), - ), - ); - if (emoji == null) return; - if (sentReactions.contains( - emoji, - )) { - return; - } - onSelect(event); - - await event.room - .sendReaction( - event.eventId, - emoji, - ); - }, - ), - ], - ), - ), - ) - : const SizedBox.shrink(), - ), - ), ], ), );