Improve message bubble design
This commit is contained in:
Christian Pauly
parent
fae2bd4eed
commit
c7371acb13
|
|
@ -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,72 +72,71 @@ class Message extends StatelessWidget {
|
|||
margin: BubbleEdges.symmetric(horizontal: 4),
|
||||
color: color,
|
||||
nip: nip,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
child: Stack(
|
||||
children: <Widget>[
|
||||
Row(
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
ownMessage
|
||||
? I18n.of(context).you
|
||||
: event.sender.calcDisplayname(),
|
||||
style: TextStyle(
|
||||
color: ownMessage
|
||||
? textColor
|
||||
: event.sender.calcDisplayname().color,
|
||||
fontWeight: FontWeight.bold,
|
||||
if (event.isReply)
|
||||
FutureBuilder<Event>(
|
||||
future: event.getReplyEvent(timeline),
|
||||
builder: (BuildContext context, snapshot) {
|
||||
final Event replyEvent = snapshot.hasData
|
||||
? snapshot.data
|
||||
: Event(
|
||||
eventId: event.content['m.relates_to']
|
||||
['m.in_reply_to']['event_id'],
|
||||
content: {"msgtype": "m.text", "body": "..."},
|
||||
senderId: event.senderId,
|
||||
typeKey: "m.room.message",
|
||||
room: event.room,
|
||||
roomId: event.roomId,
|
||||
status: 1,
|
||||
time: DateTime.now(),
|
||||
);
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(vertical: 4.0),
|
||||
child:
|
||||
ReplyContent(replyEvent, lightText: ownMessage),
|
||||
);
|
||||
},
|
||||
),
|
||||
MessageContent(
|
||||
event,
|
||||
textColor: textColor,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
event.time.localizedTime(context),
|
||||
style: TextStyle(
|
||||
color: textColor.withAlpha(180),
|
||||
if (event.type == EventTypes.Encrypted &&
|
||||
event.messageType == MessageTypes.BadEncrypted &&
|
||||
event.content["body"] == DecryptError.UNKNOWN_SESSION)
|
||||
RaisedButton(
|
||||
color: color.withAlpha(100),
|
||||
child: Text(
|
||||
I18n.of(context).requestPermission,
|
||||
style: TextStyle(color: textColor),
|
||||
),
|
||||
onPressed: () => Matrix.of(context)
|
||||
.tryRequestWithLoadingDialog(event.requestKey()),
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
_MetaRow(
|
||||
event,
|
||||
ownMessage,
|
||||
textColor,
|
||||
invisible: true,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (event.isReply)
|
||||
FutureBuilder<Event>(
|
||||
future: event.getReplyEvent(timeline),
|
||||
builder: (BuildContext context, snapshot) {
|
||||
final Event replyEvent = snapshot.hasData
|
||||
? snapshot.data
|
||||
: Event(
|
||||
eventId: event.content['m.relates_to']
|
||||
['m.in_reply_to']['event_id'],
|
||||
content: {"msgtype": "m.text", "body": "..."},
|
||||
senderId: event.senderId,
|
||||
typeKey: "m.room.message",
|
||||
room: event.room,
|
||||
roomId: event.roomId,
|
||||
status: 1,
|
||||
time: DateTime.now(),
|
||||
);
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(vertical: 4.0),
|
||||
child: ReplyContent(replyEvent, lightText: ownMessage),
|
||||
);
|
||||
},
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
right: ownMessage ? 0 : null,
|
||||
left: !ownMessage ? 0 : null,
|
||||
child: _MetaRow(
|
||||
event,
|
||||
ownMessage,
|
||||
textColor,
|
||||
),
|
||||
MessageContent(
|
||||
event,
|
||||
textColor: textColor,
|
||||
),
|
||||
if (event.type == EventTypes.Encrypted &&
|
||||
event.messageType == MessageTypes.BadEncrypted &&
|
||||
event.content["body"] == DecryptError.UNKNOWN_SESSION)
|
||||
RaisedButton(
|
||||
color: color.withAlpha(100),
|
||||
child: Text(
|
||||
I18n.of(context).requestPermission,
|
||||
style: TextStyle(color: textColor),
|
||||
),
|
||||
onPressed: () => Matrix.of(context)
|
||||
.tryRequestWithLoadingDialog(event.requestKey()),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,18 +17,16 @@ class StateMessage extends StatelessWidget {
|
|||
right: 8.0,
|
||||
bottom: 8.0,
|
||||
),
|
||||
child: Opacity(
|
||||
opacity: 0.5,
|
||||
child: Bubble(
|
||||
elevation: 0,
|
||||
color: Colors.black,
|
||||
alignment: Alignment.center,
|
||||
child: LinkText(
|
||||
text: event.getLocalizedBody(context),
|
||||
textStyle: TextStyle(
|
||||
color: Colors.white,
|
||||
decoration: event.redacted ? TextDecoration.lineThrough : null,
|
||||
),
|
||||
child: Bubble(
|
||||
elevation: 0,
|
||||
color: Theme.of(context).backgroundColor.withOpacity(0.5),
|
||||
alignment: Alignment.center,
|
||||
child: LinkText(
|
||||
text: event.getLocalizedBody(context),
|
||||
textAlign: TextAlign.center,
|
||||
textStyle: TextStyle(
|
||||
color: Theme.of(context).primaryColor,
|
||||
decoration: event.redacted ? TextDecoration.lineThrough : null,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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
10
pubspec.lock
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue