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(),
);
return InkWell(
borderRadius: ReplyContent.borderRadius,
onTap: () =>
scrollToEventId(replyEvent.eventId),
child: AbsorbPointer(
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 4.0,
),
child: ReplyContent(
replyEvent,
ownMessage: ownMessage,
timeline: timeline,
),
child: ReplyContent(
replyEvent,
ownMessage: ownMessage,
timeline: timeline,
),
),
);

View file

@ -18,68 +18,73 @@ class ReplyContent extends StatelessWidget {
this.timeline,
});
static const BorderRadius borderRadius = BorderRadius.only(
topRight: Radius.circular(AppConfig.borderRadius / 2),
bottomRight: Radius.circular(AppConfig.borderRadius / 2),
);
@override
Widget build(BuildContext context) {
Widget replyBody;
final timeline = this.timeline;
final displayEvent =
timeline != null ? replyEvent.getDisplayEvent(timeline) : replyEvent;
final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
replyBody = 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,
),
);
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,
],
return Material(
color: Theme.of(context).colorScheme.background.withOpacity(0.33),
borderRadius: borderRadius,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 3,
height: fontSize * 2 + 12,
color: Theme.of(context).colorScheme.primary,
),
),
],
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),
],
),
);
}
}