chore: Follow up message design

pull/1784/head
krille-chan 5 months ago
parent 8c75e31612
commit 1b42cf44fc
No known key found for this signature in database

@ -250,7 +250,7 @@ class HtmlMessage extends StatelessWidget {
border: Border( border: Border(
left: BorderSide( left: BorderSide(
color: textColor, color: textColor,
width: 3, width: 5,
), ),
), ),
), ),

@ -20,7 +20,6 @@ import 'message_content.dart';
import 'message_reactions.dart'; import 'message_reactions.dart';
import 'reply_content.dart'; import 'reply_content.dart';
import 'state_message.dart'; import 'state_message.dart';
import 'verification_request_content.dart';
class Message extends StatelessWidget { class Message extends StatelessWidget {
final Event event; final Event event;
@ -85,7 +84,7 @@ class Message extends StatelessWidget {
if (event.type == EventTypes.Message && if (event.type == EventTypes.Message &&
event.messageType == EventTypes.KeyVerificationRequest) { event.messageType == EventTypes.KeyVerificationRequest) {
return VerificationRequestContent(event: event, timeline: timeline); return StateMessage(event);
} }
final client = Matrix.of(context).client; final client = Matrix.of(context).client;
@ -376,22 +375,32 @@ class Message extends StatelessWidget {
return Padding( return Padding(
padding: padding:
const EdgeInsets.only( const EdgeInsets.only(
bottom: 4.0, left: 16,
right: 16,
top: 8,
), ),
child: InkWell( child: Material(
color:
Colors.transparent,
borderRadius: borderRadius:
ReplyContent ReplyContent
.borderRadius, .borderRadius,
onTap: () => child: InkWell(
scrollToEventId( borderRadius:
replyEvent.eventId, ReplyContent
), .borderRadius,
child: AbsorbPointer( onTap: () =>
child: ReplyContent( scrollToEventId(
replyEvent, replyEvent.eventId,
ownMessage: ),
ownMessage, child: AbsorbPointer(
timeline: timeline, child: ReplyContent(
replyEvent,
ownMessage:
ownMessage,
timeline:
timeline,
),
), ),
), ),
), ),

@ -32,31 +32,59 @@ class MessageDownloadContent extends StatelessWidget {
'UNKNOWN'); 'UNKNOWN');
final sizeString = event.sizeString ?? '?MB'; final sizeString = event.sizeString ?? '?MB';
final fileDescription = event.fileDescription; final fileDescription = event.fileDescription;
return Padding( return Column(
padding: const EdgeInsets.symmetric( mainAxisSize: MainAxisSize.min,
horizontal: 16, crossAxisAlignment: CrossAxisAlignment.start,
vertical: 8, spacing: 8,
), children: [
child: Column( Material(
mainAxisSize: MainAxisSize.min, color: Colors.transparent,
crossAxisAlignment: CrossAxisAlignment.stretch, child: InkWell(
spacing: 8, borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
children: [ onTap: () => event.saveFile(context),
OutlinedButton.icon( child: Padding(
style: OutlinedButton.styleFrom( padding: const EdgeInsets.all(16.0),
foregroundColor: textColor, child: Row(
side: BorderSide(color: textColor), mainAxisSize: MainAxisSize.min,
), spacing: 16,
icon: const Icon(Icons.file_download_outlined), children: [
label: Text( CircleAvatar(
'$sizeString | $filetype - $filename', backgroundColor: textColor.withAlpha(32),
maxLines: 1, child: Icon(Icons.file_download_outlined, color: textColor),
overflow: TextOverflow.ellipsis, ),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
filename,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: textColor,
fontWeight: FontWeight.w500,
),
),
Text(
'$sizeString | $filetype',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: textColor, fontSize: 10),
),
],
),
],
),
), ),
onPressed: () => event.saveFile(context),
), ),
if (fileDescription != null) ...[ ),
Linkify( if (fileDescription != null) ...[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Linkify(
text: fileDescription, text: fileDescription,
textScaleFactor: MediaQuery.textScalerOf(context).scale(1), textScaleFactor: MediaQuery.textScalerOf(context).scale(1),
style: TextStyle( style: TextStyle(
@ -72,9 +100,9 @@ class MessageDownloadContent extends StatelessWidget {
), ),
onOpen: (url) => UrlLauncher(context, url.url).launchUrl(), onOpen: (url) => UrlLauncher(context, url.url).launchUrl(),
), ),
], ),
], ],
), ],
); );
} }
} }

@ -10,14 +10,12 @@ class ReplyContent extends StatelessWidget {
final Event replyEvent; final Event replyEvent;
final bool ownMessage; final bool ownMessage;
final Timeline? timeline; final Timeline? timeline;
final Color? backgroundColor;
const ReplyContent( const ReplyContent(
this.replyEvent, { this.replyEvent, {
this.ownMessage = false, this.ownMessage = false,
super.key, super.key,
this.timeline, this.timeline,
this.backgroundColor,
}); });
static const BorderRadius borderRadius = BorderRadius.only( static const BorderRadius borderRadius = BorderRadius.only(
@ -40,16 +38,18 @@ class ReplyContent extends StatelessWidget {
: theme.colorScheme.tertiary; : theme.colorScheme.tertiary;
return Material( return Material(
color: backgroundColor ?? color: Colors.transparent,
theme.colorScheme.surface.withAlpha(ownMessage ? 50 : 80),
borderRadius: borderRadius, borderRadius: borderRadius,
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
Container( Container(
width: 3, width: 5,
height: fontSize * 2 + 16, height: fontSize * 2 + 16,
color: color, decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
color: color,
),
), ),
const SizedBox(width: 6), const SizedBox(width: 6),
Flexible( Flexible(

@ -1,72 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';
import '../../../config/app_config.dart';
class VerificationRequestContent extends StatelessWidget {
final Event event;
final Timeline timeline;
const VerificationRequestContent({
required this.event,
required this.timeline,
super.key,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final events = event.aggregatedEvents(timeline, 'm.reference');
final done = events.where((e) => e.type == EventTypes.KeyVerificationDone);
final start =
events.where((e) => e.type == EventTypes.KeyVerificationStart);
final cancel =
events.where((e) => e.type == EventTypes.KeyVerificationCancel);
final fullyDone = done.length >= 2;
final started = start.isNotEmpty;
final canceled = cancel.isNotEmpty;
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
child: Center(
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border.all(
color: theme.dividerColor,
),
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
color: theme.colorScheme.surface,
),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.lock_outlined,
color: canceled
? Colors.red
: (fullyDone ? Colors.green : Colors.grey),
),
const SizedBox(width: 8),
Text(
canceled
? 'Error ${cancel.first.content.tryGet<String>('code')}: ${cancel.first.content.tryGet<String>('reason')}'
: (fullyDone
? L10n.of(context).verifySuccess
: (started
? L10n.of(context).loadingPleaseWait
: L10n.of(context).newVerificationRequest)),
),
],
),
),
),
);
}
}

@ -38,7 +38,6 @@ class ReplyDisplay extends StatelessWidget {
? ReplyContent( ? ReplyContent(
controller.replyEvent!, controller.replyEvent!,
timeline: controller.timeline!, timeline: controller.timeline!,
backgroundColor: Colors.transparent,
) )
: _EditContent( : _EditContent(
controller.editEvent?.getDisplayEvent(controller.timeline!), controller.editEvent?.getDisplayEvent(controller.timeline!),

Loading…
Cancel
Save