diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index 1f99caef6..58e72526f 100644 --- a/lib/pages/chat/events/message.dart +++ b/lib/pages/chat/events/message.dart @@ -9,7 +9,6 @@ import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/utils/date_time_extension.dart'; import 'package:fluffychat/utils/string_color.dart'; import 'package:fluffychat/widgets/avatar.dart'; -import 'package:fluffychat/widgets/hover_builder.dart'; import 'package:fluffychat/widgets/matrix.dart'; import '../../../config/app_config.dart'; import 'message_content.dart'; @@ -149,211 +148,247 @@ class Message extends StatelessWidget { offset: Offset(0, animateIn ? 1 : 0), duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: rowMainAxisAlignment, + child: Stack( children: [ - if (longPressSelect) - SizedBox( - height: 32, - width: Avatar.defaultSize, - child: Checkbox.adaptive( - value: selected, - shape: const CircleBorder(), - onChanged: (_) => onSelect(event), - ), - ) - else if (nextEventSameSender || ownMessage) - SizedBox( - width: Avatar.defaultSize, - child: Center( - child: SizedBox( - width: 16, - height: 16, - child: event.status == EventStatus.error - ? const Icon(Icons.error, color: Colors.red) - : event.fileSendingStatus != null - ? const CircularProgressIndicator.adaptive( - strokeWidth: 1, - ) - : null, - ), + Positioned( + top: 0, + bottom: 0, + left: 0, + right: 0, + child: InkWell( + onTap: () => onSelect(event), + borderRadius: + BorderRadius.circular(AppConfig.borderRadius / 2), + child: Material( + borderRadius: + BorderRadius.circular(AppConfig.borderRadius / 2), + color: selected + ? Theme.of(context) + .colorScheme + .secondaryContainer + .withAlpha(100) + : highlightMarker + ? Theme.of(context) + .colorScheme + .tertiaryContainer + .withAlpha(100) + : Colors.transparent, ), - ) - else - FutureBuilder( - future: event.fetchSenderUser(), - builder: (context, snapshot) { - final user = - snapshot.data ?? event.senderFromMemoryOrFallback; - return Avatar( - mxContent: user.avatarUrl, - name: user.calcDisplayname(), - presenceUserId: user.stateKey, - presenceBackgroundColor: avatarPresenceBackgroundColor, - onTap: () => onAvatarTab(event), - ); - }, ), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - if (!nextEventSameSender) - Padding( - padding: const EdgeInsets.only(left: 8.0, bottom: 4), - child: ownMessage || event.room.isDirectChat - ? const SizedBox(height: 12) - : FutureBuilder( - future: event.fetchSenderUser(), - builder: (context, snapshot) { - final displayname = - snapshot.data?.calcDisplayname() ?? - event.senderFromMemoryOrFallback - .calcDisplayname(); - return Text( - displayname, - style: TextStyle( - fontSize: 12, - color: (Theme.of(context).brightness == - Brightness.light - ? displayname.color - : displayname.lightColorText), - ), - ); - }, - ), + ), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: rowMainAxisAlignment, + children: [ + if (longPressSelect) + SizedBox( + height: 32, + width: Avatar.defaultSize, + child: Checkbox.adaptive( + value: selected, + shape: const CircleBorder(), + onChanged: (_) => onSelect(event), ), - Container( - alignment: alignment, - padding: const EdgeInsets.only(left: 8), - child: GestureDetector( - onLongPress: longPressSelect - ? null - : () { - HapticFeedback.heavyImpact(); - onSelect(event); - }, - child: AnimatedOpacity( - opacity: animateIn - ? 0 - : event.redacted || - event.messageType == - MessageTypes.BadEncrypted || - event.status.isSending - ? 0.5 - : 1, - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - child: Material( - color: noBubble ? Colors.transparent : color, - clipBehavior: Clip.antiAlias, - shape: RoundedRectangleBorder( - borderRadius: borderRadius, - ), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular( - AppConfig.borderRadius, + ) + else if (nextEventSameSender || ownMessage) + SizedBox( + width: Avatar.defaultSize, + child: Center( + child: SizedBox( + width: 16, + height: 16, + child: event.status == EventStatus.error + ? const Icon(Icons.error, color: Colors.red) + : event.fileSendingStatus != null + ? const CircularProgressIndicator.adaptive( + strokeWidth: 1, + ) + : null, + ), + ), + ) + else + FutureBuilder( + future: event.fetchSenderUser(), + builder: (context, snapshot) { + final user = + snapshot.data ?? event.senderFromMemoryOrFallback; + return Avatar( + mxContent: user.avatarUrl, + name: user.calcDisplayname(), + presenceUserId: user.stateKey, + presenceBackgroundColor: + avatarPresenceBackgroundColor, + onTap: () => onAvatarTab(event), + ); + }, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + if (!nextEventSameSender) + Padding( + padding: + const EdgeInsets.only(left: 8.0, bottom: 4), + child: ownMessage || event.room.isDirectChat + ? const SizedBox(height: 12) + : FutureBuilder( + future: event.fetchSenderUser(), + builder: (context, snapshot) { + final displayname = + snapshot.data?.calcDisplayname() ?? + event.senderFromMemoryOrFallback + .calcDisplayname(); + return Text( + displayname, + style: TextStyle( + fontSize: 12, + color: + (Theme.of(context).brightness == + Brightness.light + ? displayname.color + : displayname.lightColorText), + ), + ); + }, + ), + ), + Container( + alignment: alignment, + padding: const EdgeInsets.only(left: 8), + child: GestureDetector( + onLongPress: longPressSelect + ? null + : () { + HapticFeedback.heavyImpact(); + onSelect(event); + }, + child: AnimatedOpacity( + opacity: animateIn + ? 0 + : event.redacted || + event.messageType == + MessageTypes.BadEncrypted || + event.status.isSending + ? 0.5 + : 1, + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + child: Material( + color: noBubble ? Colors.transparent : color, + clipBehavior: Clip.antiAlias, + shape: RoundedRectangleBorder( + borderRadius: borderRadius, ), - ), - padding: noBubble || noPadding - ? EdgeInsets.zero - : const EdgeInsets.symmetric( - horizontal: 16, - vertical: 8, + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular( + AppConfig.borderRadius, ), - constraints: const BoxConstraints( - maxWidth: FluffyThemes.columnWidth * 1.5, - ), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (event.relationshipType == - RelationshipTypes.reply) - FutureBuilder( - future: event.getReplyEvent(timeline), - builder: - (BuildContext context, snapshot) { - final replyEvent = snapshot.hasData - ? snapshot.data! - : Event( - eventId: - event.relationshipEventId!, - content: { - 'msgtype': 'm.text', - 'body': '...', - }, - senderId: event.senderId, - type: 'm.room.message', - room: event.room, - status: EventStatus.sent, - originServerTs: DateTime.now(), - ); - return Padding( + ), + padding: noBubble || noPadding + ? EdgeInsets.zero + : const EdgeInsets.symmetric( + horizontal: 16, + vertical: 8, + ), + constraints: const BoxConstraints( + maxWidth: FluffyThemes.columnWidth * 1.5, + ), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + if (event.relationshipType == + RelationshipTypes.reply) + FutureBuilder( + future: event.getReplyEvent(timeline), + builder: + (BuildContext context, snapshot) { + final replyEvent = snapshot.hasData + ? snapshot.data! + : Event( + eventId: event + .relationshipEventId!, + content: { + 'msgtype': 'm.text', + 'body': '...', + }, + senderId: event.senderId, + type: 'm.room.message', + room: event.room, + status: EventStatus.sent, + originServerTs: + DateTime.now(), + ); + return Padding( + padding: const EdgeInsets.only( + bottom: 4.0, + ), + child: InkWell( + borderRadius: + ReplyContent.borderRadius, + onTap: () => scrollToEventId( + replyEvent.eventId, + ), + child: AbsorbPointer( + child: ReplyContent( + replyEvent, + ownMessage: ownMessage, + timeline: timeline, + ), + ), + ), + ); + }, + ), + MessageContent( + displayEvent, + textColor: textColor, + onInfoTab: onInfoTab, + borderRadius: borderRadius, + ), + if (event.hasAggregatedEvents( + timeline, + RelationshipTypes.edit, + )) + Padding( padding: const EdgeInsets.only( - bottom: 4.0, + top: 4.0, ), - child: InkWell( - borderRadius: - ReplyContent.borderRadius, - onTap: () => scrollToEventId( - replyEvent.eventId, - ), - child: AbsorbPointer( - child: ReplyContent( - replyEvent, - ownMessage: ownMessage, - timeline: timeline, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.edit_outlined, + color: textColor.withAlpha(164), + size: 14, ), - ), + Text( + ' - ${displayEvent.originServerTs.localizedTimeShort(context)}', + style: TextStyle( + color: + textColor.withAlpha(164), + fontSize: 12, + ), + ), + ], ), - ); - }, - ), - MessageContent( - displayEvent, - textColor: textColor, - onInfoTab: onInfoTab, - borderRadius: borderRadius, + ), + ], ), - if (event.hasAggregatedEvents( - timeline, - RelationshipTypes.edit, - )) - Padding( - padding: const EdgeInsets.only( - top: 4.0, - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Icon( - Icons.edit_outlined, - color: textColor.withAlpha(164), - size: 14, - ), - Text( - ' - ${displayEvent.originServerTs.localizedTimeShort(context)}', - style: TextStyle( - color: textColor.withAlpha(164), - fontSize: 12, - ), - ), - ], - ), - ), - ], + ), ), ), ), ), - ), + ], ), - ], - ), + ), + ], ), ], ), @@ -449,13 +484,7 @@ class Message extends StatelessWidget { container = row; } - return Container( - alignment: Alignment.center, - color: selected - ? Theme.of(context).colorScheme.secondaryContainer.withAlpha(100) - : highlightMarker - ? Theme.of(context).colorScheme.tertiaryContainer.withAlpha(100) - : Colors.transparent, + return Center( child: Swipeable( key: ValueKey(event.eventId), background: const Padding( @@ -466,87 +495,17 @@ class Message extends StatelessWidget { ), direction: SwipeDirection.endToStart, onSwipe: (_) => onSwipe(), - child: HoverBuilder( - builder: (context, hovered) => Stack( - children: [ - Container( - constraints: const BoxConstraints( - maxWidth: FluffyThemes.columnWidth * 2.5, - ), - padding: EdgeInsets.only( - left: 8.0, - right: 8.0, - top: nextEventSameSender ? 1.0 : 4.0, - bottom: previousEventSameSender ? 1.0 : 4.0, - ), - child: container, - ), - Positioned( - left: ownMessage ? null : 48, - right: ownMessage ? 4 : null, - top: displayTime ? 38 : 0, - child: AnimatedScale( - duration: Duration( - milliseconds: - (FluffyThemes.animationDuration.inMilliseconds / 2) - .floor(), - ), - curve: FluffyThemes.animationCurve, - scale: !longPressSelect && hovered ? 1 : 0, - alignment: Alignment.center, - child: Material( - color: Theme.of(context) - .colorScheme - .secondaryContainer - .withOpacity(0.9), - elevation: - Theme.of(context).appBarTheme.scrolledUnderElevation ?? - 4, - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - shadowColor: Theme.of(context).appBarTheme.shadowColor, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - if (event.room.canSendDefaultMessages) - SizedBox( - width: 32, - height: 32, - child: IconButton( - icon: Icon( - Icons.reply_outlined, - size: 16, - color: Theme.of(context) - .colorScheme - .onTertiaryContainer, - ), - tooltip: L10n.of(context)!.reply, - onPressed: event.room.canSendDefaultMessages - ? () => onSwipe() - : null, - ), - ), - SizedBox( - width: 32, - height: 32, - child: IconButton( - icon: Icon( - Icons.more_vert, - size: 16, - color: Theme.of(context) - .colorScheme - .onTertiaryContainer, - ), - tooltip: L10n.of(context)!.select, - onPressed: () => onSelect(event), - ), - ), - ], - ), - ), - ), - ), - ], + child: Container( + constraints: const BoxConstraints( + maxWidth: FluffyThemes.columnWidth * 2.5, + ), + padding: EdgeInsets.only( + left: 8.0, + right: 8.0, + top: nextEventSameSender ? 1.0 : 4.0, + bottom: previousEventSameSender ? 1.0 : 4.0, ), + child: container, ), ), ); diff --git a/lib/pages/chat_list/chat_list_item.dart b/lib/pages/chat_list/chat_list_item.dart index baa8220a4..62a75de87 100644 --- a/lib/pages/chat_list/chat_list_item.dart +++ b/lib/pages/chat_list/chat_list_item.dart @@ -97,11 +97,43 @@ class ChatListItem extends StatelessWidget { visualDensity: const VisualDensity(vertical: -0.5), contentPadding: const EdgeInsets.symmetric(horizontal: 8), onLongPress: onLongPress, - leading: Avatar( - mxContent: room.avatar, - name: displayname, - presenceUserId: room.directChatMatrixID, - presenceBackgroundColor: backgroundColor, + leading: Stack( + clipBehavior: Clip.none, + children: [ + HoverBuilder( + builder: (context, hovered) => AnimatedScale( + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + scale: hovered ? 1.1 : 1.0, + child: Avatar( + mxContent: room.avatar, + name: displayname, + presenceUserId: room.directChatMatrixID, + presenceBackgroundColor: backgroundColor, + onTap: onLongPress, + ), + ), + ), + Positioned( + bottom: -2, + right: -2, + child: AnimatedScale( + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + scale: (hovered || selected) ? 1.0 : 0.0, + child: Material( + color: backgroundColor, + borderRadius: BorderRadius.circular(16), + child: Icon( + selected + ? Icons.check_circle + : Icons.check_circle_outlined, + size: 18, + ), + ), + ), + ), + ], ), title: Row( children: [ @@ -281,19 +313,7 @@ class ChatListItem extends StatelessWidget { ), onTap: onTap, trailing: onForget == null - ? hovered || selected - ? IconButton( - color: selected - ? Theme.of(context).colorScheme.primary - : null, - icon: Icon( - selected - ? Icons.check_circle - : Icons.check_circle_outlined, - ), - onPressed: onLongPress, - ) - : null + ? null : IconButton( icon: const Icon(Icons.delete_outlined), onPressed: onForget,