chore: Follow up new chat design

This commit is contained in:
Krille 2024-10-21 18:36:52 +02:00
commit 4ec70bd25c
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
4 changed files with 119 additions and 114 deletions

View file

@ -34,6 +34,7 @@ class ChatEventList extends StatelessWidget {
for (var i = 0; i < events.length; i++) { for (var i = 0; i < events.length; i++) {
thisEventsKeyMap[events[i].eventId] = i; thisEventsKeyMap[events[i].eventId] = i;
} }
final theme = Theme.of(context);
final hasWallpaper = final hasWallpaper =
controller.room.client.applicationAccountConfig.wallpaperUrl != null; controller.room.client.applicationAccountConfig.wallpaperUrl != null;
@ -142,8 +143,9 @@ class ChatEventList extends StatelessWidget {
i > 0 && controller.readMarkerEventId == event.eventId, i > 0 && controller.readMarkerEventId == event.eventId,
nextEvent: i + 1 < events.length ? events[i + 1] : null, nextEvent: i + 1 < events.length ? events[i + 1] : null,
previousEvent: i > 0 ? events[i - 1] : null, previousEvent: i > 0 ? events[i - 1] : null,
avatarPresenceBackgroundColor: avatarPresenceBackgroundColor: hasWallpaper
hasWallpaper ? Colors.transparent : null, ? Colors.transparent
: theme.colorScheme.surfaceContainer,
), ),
); );
}, },

View file

@ -258,125 +258,130 @@ class ChatView extends StatelessWidget {
onDragDone: controller.onDragDone, onDragDone: controller.onDragDone,
onDragEntered: controller.onDragEntered, onDragEntered: controller.onDragEntered,
onDragExited: controller.onDragExited, onDragExited: controller.onDragExited,
child: Stack( child: DecoratedBox(
children: <Widget>[ decoration: BoxDecoration(
if (accountConfig.wallpaperUrl != null) color: theme.colorScheme.surfaceContainer,
Opacity( ),
opacity: accountConfig.wallpaperOpacity ?? 1, child: Stack(
child: MxcImage( children: <Widget>[
uri: accountConfig.wallpaperUrl, if (accountConfig.wallpaperUrl != null)
fit: BoxFit.cover, Opacity(
isThumbnail: true, opacity: accountConfig.wallpaperOpacity ?? 1,
width: FluffyThemes.columnWidth * 4, child: MxcImage(
height: FluffyThemes.columnWidth * 4, uri: accountConfig.wallpaperUrl,
placeholder: (_) => Container(), fit: BoxFit.cover,
), isThumbnail: true,
), width: FluffyThemes.columnWidth * 4,
SafeArea( height: FluffyThemes.columnWidth * 4,
child: Column( placeholder: (_) => Container(),
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: controller.clearSingleSelectedEvent,
child: Builder(
builder: (context) {
if (controller.timeline == null) {
return const Center(
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
),
);
}
return ChatEventList(
controller: controller,
);
},
),
),
), ),
if (controller.room.canSendDefaultMessages && ),
controller.room.membership == Membership.join) SafeArea(
Container( child: Column(
margin: EdgeInsets.only( children: <Widget>[
bottom: bottomSheetPadding, Expanded(
left: bottomSheetPadding, child: GestureDetector(
right: bottomSheetPadding, onTap: controller.clearSingleSelectedEvent,
), child: Builder(
constraints: const BoxConstraints( builder: (context) {
maxWidth: FluffyThemes.columnWidth * 2.5, if (controller.timeline == null) {
), return const Center(
alignment: Alignment.center, child:
child: Material( CircularProgressIndicator.adaptive(
clipBehavior: Clip.hardEdge, strokeWidth: 2,
color: theme ),
.colorScheme );
// ignore: deprecated_member_use }
.surfaceVariant, return ChatEventList(
borderRadius: const BorderRadius.all( controller: controller,
Radius.circular(24), );
},
), ),
child: controller.room.isAbandonedDMRoom == true
? Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
TextButton.icon(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(
16,
),
foregroundColor:
theme.colorScheme.error,
),
icon: const Icon(
Icons.archive_outlined,
),
onPressed: controller.leaveChat,
label: Text(
L10n.of(context).leave,
),
),
TextButton.icon(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(
16,
),
),
icon: const Icon(
Icons.forum_outlined,
),
onPressed: controller.recreateChat,
label: Text(
L10n.of(context).reopenChat,
),
),
],
)
: Column(
mainAxisSize: MainAxisSize.min,
children: [
const ConnectionStatusHeader(),
ReactionsPicker(controller),
ReplyDisplay(controller),
ChatInputRow(controller),
ChatEmojiPicker(controller),
],
),
), ),
), ),
], if (controller.room.canSendDefaultMessages &&
), controller.room.membership == Membership.join)
), Container(
if (controller.dragging) margin: EdgeInsets.only(
Container( bottom: bottomSheetPadding,
color: theme.scaffoldBackgroundColor.withOpacity(0.9), left: bottomSheetPadding,
alignment: Alignment.center, right: bottomSheetPadding,
child: const Icon( ),
Icons.upload_outlined, constraints: const BoxConstraints(
size: 100, maxWidth: FluffyThemes.columnWidth * 2.5,
),
alignment: Alignment.center,
child: Material(
clipBehavior: Clip.hardEdge,
color: theme.colorScheme.surfaceBright,
borderRadius: const BorderRadius.all(
Radius.circular(24),
),
child: controller.room.isAbandonedDMRoom ==
true
? Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
TextButton.icon(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(
16,
),
foregroundColor:
theme.colorScheme.error,
),
icon: const Icon(
Icons.archive_outlined,
),
onPressed: controller.leaveChat,
label: Text(
L10n.of(context).leave,
),
),
TextButton.icon(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(
16,
),
),
icon: const Icon(
Icons.forum_outlined,
),
onPressed:
controller.recreateChat,
label: Text(
L10n.of(context).reopenChat,
),
),
],
)
: Column(
mainAxisSize: MainAxisSize.min,
children: [
const ConnectionStatusHeader(),
ReactionsPicker(controller),
ReplyDisplay(controller),
ChatInputRow(controller),
ChatEmojiPicker(controller),
],
),
),
),
],
), ),
), ),
], if (controller.dragging)
Container(
color: theme.scaffoldBackgroundColor.withOpacity(0.9),
alignment: Alignment.center,
child: const Icon(
Icons.upload_outlined,
size: 100,
),
),
],
),
), ),
), ),
); );

View file

@ -83,8 +83,8 @@ class Message extends StatelessWidget {
final client = Matrix.of(context).client; final client = Matrix.of(context).client;
final ownMessage = event.senderId == client.userID; final ownMessage = event.senderId == client.userID;
final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft; final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
// ignore: deprecated_member_use
var color = theme.colorScheme.surfaceVariant; var color = theme.colorScheme.surfaceBright;
final displayTime = event.type == EventTypes.RoomCreate || final displayTime = event.type == EventTypes.RoomCreate ||
nextEvent == null || nextEvent == null ||
!event.originServerTs.sameEnvironment(nextEvent!.originServerTs); !event.originServerTs.sameEnvironment(nextEvent!.originServerTs);

View file

@ -81,9 +81,7 @@ class TypingIndicators extends StatelessWidget {
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Material( Material(
color: color: theme.colorScheme.surfaceBright,
// ignore: deprecated_member_use
theme.colorScheme.surfaceVariant,
borderRadius: const BorderRadius.all( borderRadius: const BorderRadius.all(
Radius.circular(AppConfig.borderRadius), Radius.circular(AppConfig.borderRadius),
), ),