From ba61e3c1644d2c9bc1149ab6c14577fea12287e0 Mon Sep 17 00:00:00 2001 From: krille-chan Date: Tue, 17 Jun 2025 20:57:12 +0200 Subject: [PATCH 1/3] 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(), - ), - ), ], ), ); From 959d75fb9d05802b38e9b26919420ff70a1db2a5 Mon Sep 17 00:00:00 2001 From: krille-chan Date: Tue, 17 Jun 2025 20:59:47 +0200 Subject: [PATCH 2/3] chore: Make connection problem color orange --- lib/pages/chat/chat_input_row.dart | 2 +- lib/pages/chat_list/chat_list_header.dart | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/pages/chat/chat_input_row.dart b/lib/pages/chat/chat_input_row.dart index ac8b99a00..7fa1ed941 100644 --- a/lib/pages/chat/chat_input_row.dart +++ b/lib/pages/chat/chat_input_row.dart @@ -52,7 +52,7 @@ class ChatInputRow extends StatelessWidget { height: height, child: TextButton( style: TextButton.styleFrom( - foregroundColor: theme.colorScheme.error, + foregroundColor: Colors.orange, ), onPressed: controller.deleteErrorEventsAction, child: Row( diff --git a/lib/pages/chat_list/chat_list_header.dart b/lib/pages/chat_list/chat_list_header.dart index 27a06a3ba..ca2bfcbe2 100644 --- a/lib/pages/chat_list/chat_list_header.dart +++ b/lib/pages/chat_list/chat_list_header.dart @@ -60,7 +60,7 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { : status.calcLocalizedString(context), hintStyle: TextStyle( color: status.error != null - ? theme.colorScheme.error + ? Colors.orange : theme.colorScheme.onPrimaryContainer, fontWeight: FontWeight.normal, ), @@ -88,8 +88,8 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { strokeWidth: 2, value: status.progress, valueColor: status.error != null - ? AlwaysStoppedAnimation( - theme.colorScheme.error, + ? const AlwaysStoppedAnimation( + Colors.orange, ) : null, ), From f82d26eed1f03f0004d2425cbfb06f121525ad6f Mon Sep 17 00:00:00 2001 From: krille-chan Date: Tue, 17 Jun 2025 21:27:25 +0200 Subject: [PATCH 3/3] chore: Follow up reactions picker --- lib/pages/chat/events/message.dart | 327 ++++++++++++++--------------- 1 file changed, 161 insertions(+), 166 deletions(-) diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index 805fab92f..279ea439f 100644 --- a/lib/pages/chat/events/message.dart +++ b/lib/pages/chat/events/message.dart @@ -642,10 +642,8 @@ class Message extends StatelessWidget { child: showReactionPicker ? Padding( padding: - const EdgeInsets.only( - top: 4.0, - bottom: 4.0, - left: 8.0, + const EdgeInsets.all( + 4.0, ), child: Material( elevation: 4, @@ -656,182 +654,179 @@ class Message extends StatelessWidget { 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, + child: + SingleChildScrollView( + scrollDirection: + Axis.horizontal, + 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, ), - 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: - 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, + () 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, + body: + SizedBox( + height: double + .infinity, + child: + EmojiPicker( + onEmojiSelected: ( + _, + emoji, + ) => + Navigator.of( + context, + ).pop( + emoji + .emoji, ), - bottomActionBarConfig: - const BottomActionBarConfig( - enabled: - false, - ), - categoryViewConfig: - CategoryViewConfig( - initCategory: - Category.SMILEYS, - backspaceColor: theme - .colorScheme - .primary, - iconColor: theme - .colorScheme - .primary - .withAlpha( - 128, + 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, ), - 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); + ); + if (emoji == + null) { + return; + } + if (sentReactions + .contains( + emoji, + )) { + return; + } + onSelect(event); - await event.room - .sendReaction( - event.eventId, - emoji, - ); - }, - ), - ], + await event.room + .sendReaction( + event.eventId, + emoji, + ); + }, + ), + ], + ), ), ), )