design: Adjust reply design

This commit is contained in:
krille-chan 2023-12-23 07:06:38 +01:00
parent b9c5ba8849
commit a615de889e
No known key found for this signature in database
2 changed files with 64 additions and 63 deletions

View file

@ -225,18 +225,14 @@ class Message extends StatelessWidget {
originServerTs: DateTime.now(), originServerTs: DateTime.now(),
); );
return InkWell( return InkWell(
borderRadius: ReplyContent.borderRadius,
onTap: () => onTap: () =>
scrollToEventId(replyEvent.eventId), scrollToEventId(replyEvent.eventId),
child: AbsorbPointer( child: AbsorbPointer(
child: Container( child: ReplyContent(
margin: const EdgeInsets.symmetric( replyEvent,
vertical: 4.0, ownMessage: ownMessage,
), timeline: timeline,
child: ReplyContent(
replyEvent,
ownMessage: ownMessage,
timeline: timeline,
),
), ),
), ),
); );

View file

@ -18,68 +18,73 @@ class ReplyContent extends StatelessWidget {
this.timeline, this.timeline,
}); });
static const BorderRadius borderRadius = BorderRadius.only(
topRight: Radius.circular(AppConfig.borderRadius / 2),
bottomRight: Radius.circular(AppConfig.borderRadius / 2),
);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Widget replyBody;
final timeline = this.timeline; final timeline = this.timeline;
final displayEvent = final displayEvent =
timeline != null ? replyEvent.getDisplayEvent(timeline) : replyEvent; timeline != null ? replyEvent.getDisplayEvent(timeline) : replyEvent;
final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor; final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
replyBody = Text( return Material(
displayEvent.calcLocalizedBodyFallback( color: Theme.of(context).colorScheme.background.withOpacity(0.33),
MatrixLocals(L10n.of(context)!), borderRadius: borderRadius,
withSenderNamePrefix: false, child: Row(
hideReply: true, mainAxisSize: MainAxisSize.min,
), children: <Widget>[
overflow: TextOverflow.ellipsis, Container(
maxLines: 1, width: 3,
style: TextStyle( height: fontSize * 2 + 12,
color: ownMessage color: Theme.of(context).colorScheme.primary,
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.onBackground,
fontSize: fontSize,
),
);
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 3,
height: fontSize * 2 + 6,
color: ownMessage
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.onBackground,
),
const SizedBox(width: 6),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FutureBuilder<User?>(
future: displayEvent.fetchSenderUser(),
builder: (context, snapshot) {
return Text(
'${snapshot.data?.calcDisplayname() ?? displayEvent.senderFromMemoryOrFallback.calcDisplayname()}:',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
color: ownMessage
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.onBackground,
fontSize: fontSize,
),
);
},
),
replyBody,
],
), ),
), const SizedBox(width: 6),
], Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FutureBuilder<User?>(
future: displayEvent.fetchSenderUser(),
builder: (context, snapshot) {
return Text(
'${snapshot.data?.calcDisplayname() ?? displayEvent.senderFromMemoryOrFallback.calcDisplayname()}:',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
color: ownMessage
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.onBackground,
fontSize: fontSize,
),
);
},
),
Text(
displayEvent.calcLocalizedBodyFallback(
MatrixLocals(L10n.of(context)!),
withSenderNamePrefix: false,
hideReply: true,
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
color: ownMessage
? Theme.of(context).colorScheme.onPrimaryContainer
: Theme.of(context).colorScheme.onBackground,
fontSize: fontSize,
),
),
],
),
),
const SizedBox(width: 6),
],
),
); );
} }
} }