chore: Follow up message design
This commit is contained in:
parent
8c75e31612
commit
1b42cf44fc
6 changed files with 83 additions and 119 deletions
|
|
@ -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,
|
||||||
|
children: [
|
||||||
|
CircleAvatar(
|
||||||
|
backgroundColor: textColor.withAlpha(32),
|
||||||
|
child: Icon(Icons.file_download_outlined, color: textColor),
|
||||||
|
),
|
||||||
|
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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
icon: const Icon(Icons.file_download_outlined),
|
|
||||||
label: Text(
|
|
||||||
'$sizeString | $filetype - $filename',
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
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…
Add table
Add a link
Reference in a new issue