inex/FurryChat
1
0
Fork 0
Code Issues Releases 2 Activity

Improve message bubble design

Browse source
This commit is contained in:
Christian Pauly 2020-03-13 20:09:32 +01:00
parent fae2bd4eed
commit c7371acb13
4 changed files with 132 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
lib/components/list_items/message.dart
View file

@ -4,6 +4,7 @@ import 'package:fluffychat/components/message_content.dart';
import 'package:fluffychat/components/reply_content.dart';
import 'package:fluffychat/i18n/i18n.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/event_extension.dart';
import 'package:fluffychat/utils/string_color.dart';
import 'package:fluffychat/views/image_viewer.dart';
import 'package:flutter/material.dart';
@ -71,33 +72,12 @@ class Message extends StatelessWidget {
margin: BubbleEdges.symmetric(horizontal: 4),
color: color,
nip: nip,
child: Column(
child: Stack(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
ownMessage
? I18n.of(context).you
: event.sender.calcDisplayname(),
style: TextStyle(
color: ownMessage
? textColor
: event.sender.calcDisplayname().color,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 4),
Text(
event.time.localizedTime(context),
style: TextStyle(
color: textColor.withAlpha(180),
),
),
],
),
if (event.isReply)
FutureBuilder<Event>(
future: event.getReplyEvent(timeline),
@ -117,7 +97,8 @@ class Message extends StatelessWidget {
);
return Container(
margin: EdgeInsets.symmetric(vertical: 4.0),
child: ReplyContent(replyEvent, lightText: ownMessage),
child:
ReplyContent(replyEvent, lightText: ownMessage),
);
},
),
@ -137,6 +118,25 @@ class Message extends StatelessWidget {
onPressed: () => Matrix.of(context)
.tryRequestWithLoadingDialog(event.requestKey()),
),
SizedBox(height: 4),
_MetaRow(
event,
ownMessage,
textColor,
invisible: true,
),
],
),
Positioned(
bottom: 0,
right: ownMessage ? 0 : null,
left: !ownMessage ? 0 : null,
child: _MetaRow(
event,
ownMessage,
textColor,
),
),
],
),
),
@ -179,3 +179,50 @@ class Message extends StatelessWidget {
);
}
}
class _MetaRow extends StatelessWidget {
final Event event;
final bool invisible;
final bool ownMessage;
final Color color;
const _MetaRow(this.event, this.ownMessage, this.color,
{this.invisible = false, Key key})
: super(key: key);
@override
Widget build(BuildContext context) {
final String displayname = event.sender.calcDisplayname();
final bool showDisplayname =
!ownMessage && event.senderId != event.room.directChatMatrixID;
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (showDisplayname)
Text(
displayname,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: invisible ? Colors.transparent : displayname.color,
),
),
if (showDisplayname) SizedBox(width: 4),
Text(
event.time.localizedTime(context),
style: TextStyle(
color: invisible ? Colors.transparent : color,
fontSize: 11,
),
),
if (ownMessage) SizedBox(width: 2),
if (ownMessage)
Icon(
event.statusIcon,
size: 12,
color: invisible ? Colors.transparent : color,
),
],
);
}
}

8
lib/components/list_items/state_message.dart
View file

@ -17,21 +17,19 @@ class StateMessage extends StatelessWidget {
right: 8.0,
bottom: 8.0,
),
child: Opacity(
opacity: 0.5,
child: Bubble(
elevation: 0,
color: Colors.black,
color: Theme.of(context).backgroundColor.withOpacity(0.5),
alignment: Alignment.center,
child: LinkText(
text: event.getLocalizedBody(context),
textAlign: TextAlign.center,
textStyle: TextStyle(
color: Colors.white,
color: Theme.of(context).primaryColor,
decoration: event.redacted ? TextDecoration.lineThrough : null,
),
),
),
),
);
}
}

15
lib/utils/event_extension.dart
View file

@ -245,4 +245,19 @@ extension LocalizedBody on Event {
return localizedBody;
}
IconData get statusIcon {
switch (this.status) {
case -1:
return Icons.error_outline;
case 0:
return Icons.timer;
case 1:
return Icons.done;
case 2:
return Icons.done_all;
default:
return Icons.done;
}
}
}

10
pubspec.lock
View file

@ -124,8 +124,8 @@ packages:
dependency: "direct main"
description:
path: "."
ref: "7c7f2a3dd80b4c40c1e3c106f75a0af985a2221b"
resolved-ref: "7c7f2a3dd80b4c40c1e3c106f75a0af985a2221b"
ref: eb84c2a0856af99527f00697cbed4eb67a47887d
resolved-ref: eb84c2a0856af99527f00697cbed4eb67a47887d
url: "https://gitlab.com/famedly/famedlysdk.git"
source: git
version: "0.0.1"
@ -274,7 +274,7 @@ packages:
name: intl
url: "https://pub.dartlang.org"
source: hosted
version: "0.16.1"
version: "0.16.0"
intl_translation:
dependency: "direct main"
description:
@ -377,8 +377,8 @@ packages:
dependency: transitive
description:
path: "."
ref: "307dc133867eb5bf80d4f5c7412e58621dfca3cf"
resolved-ref: "307dc133867eb5bf80d4f5c7412e58621dfca3cf"
ref: bbc7ce10a52be5d5c10d2eb6c3591aade71356e2
resolved-ref: bbc7ce10a52be5d5c10d2eb6c3591aade71356e2
url: "https://gitlab.com/famedly/libraries/dart-olm.git"
source: git
version: "0.0.0"