aiden
/
fluffychat
mirror of https://github.com/krille-chan/fluffychat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

design: Remake UX of selecting messages and chats

Browse Source
pull/1031/head
krille-chan 1 year ago
parent d2f12452fc
commit 384e57fbd2
No known key found for this signature in database
2 changed files with 274 additions and 295 deletions
Show Stats Download Patch File Download Diff File

135
lib/pages/chat/events/message.dart
Unescape Escape View File

@ -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,7 +148,35 @@ class Message extends StatelessWidget {
offset: Offset(0, animateIn ? 1 : 0),
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
child: Row(
child: Stack(
children: [
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,
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: rowMainAxisAlignment,
children: [
@ -190,7 +217,8 @@ class Message extends StatelessWidget {
mxContent: user.avatarUrl,
name: user.calcDisplayname(),
presenceUserId: user.stateKey,
presenceBackgroundColor: avatarPresenceBackgroundColor,
presenceBackgroundColor:
avatarPresenceBackgroundColor,
onTap: () => onAvatarTab(event),
);
},
@ -202,7 +230,8 @@ class Message extends StatelessWidget {
children: [
if (!nextEventSameSender)
Padding(
padding: const EdgeInsets.only(left: 8.0, bottom: 4),
padding:
const EdgeInsets.only(left: 8.0, bottom: 4),
child: ownMessage || event.room.isDirectChat
? const SizedBox(height: 12)
: FutureBuilder<User?>(
@ -216,7 +245,8 @@ class Message extends StatelessWidget {
displayname,
style: TextStyle(
fontSize: 12,
color: (Theme.of(context).brightness ==
color:
(Theme.of(context).brightness ==
Brightness.light
? displayname.color
: displayname.lightColorText),
@ -269,7 +299,8 @@ class Message extends StatelessWidget {
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
if (event.relationshipType ==
RelationshipTypes.reply)
@ -280,8 +311,8 @@ class Message extends StatelessWidget {
final replyEvent = snapshot.hasData
? snapshot.data!
: Event(
eventId:
event.relationshipEventId!,
eventId: event
.relationshipEventId!,
content: {
'msgtype': 'm.text',
'body': '...',
@ -290,7 +321,8 @@ class Message extends StatelessWidget {
type: 'm.room.message',
room: event.room,
status: EventStatus.sent,
originServerTs: DateTime.now(),
originServerTs:
DateTime.now(),
);
return Padding(
padding: const EdgeInsets.only(
@ -338,7 +370,8 @@ class Message extends StatelessWidget {
Text(
' - ${displayEvent.originServerTs.localizedTimeShort(context)}',
style: TextStyle(
color: textColor.withAlpha(164),
color:
textColor.withAlpha(164),
fontSize: 12,
),
),
@ -357,6 +390,8 @@ class Message extends StatelessWidget {
),
],
),
],
),
);
},
);
@ -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,10 +495,7 @@ class Message extends StatelessWidget {
),
direction: SwipeDirection.endToStart,
onSwipe: (_) => onSwipe(),
child: HoverBuilder(
builder: (context, hovered) => Stack(
children: [
Container(
child: Container(
constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth * 2.5,
),
@ -481,73 +507,6 @@ class Message extends StatelessWidget {
),
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),
),
),
],
),
),
),
),
],
),
),
),
);
}

48
lib/pages/chat_list/chat_list_item.dart
Unescape Escape View File

@ -97,11 +97,43 @@ class ChatListItem extends StatelessWidget {
visualDensity: const VisualDensity(vertical: -0.5),
contentPadding: const EdgeInsets.symmetric(horizontal: 8),
onLongPress: onLongPress,
leading: Avatar(
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: <Widget>[
@ -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,

Write Preview
Loading…
Cancel
Save