Improve message bubble design

lib/components/list_items/message.dart

@@ -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,
+          ),
+      ],
+    );
+  }
+}

lib/components/list_items/state_message.dart

@@ -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,
           ),
         ),
       ),
-      ),
     );
   }
 }

lib/utils/event_extension.dart

@@ -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;
+    }
+  }
 }

pubspec.lock

@@ -124,8 +124,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "7c7f2a3dd80b4c40c1e3c106f75a0af985a2221b"
+      ref: eb84c2a0856af99527f00697cbed4eb67a47887d
-      resolved-ref: "7c7f2a3dd80b4c40c1e3c106f75a0af985a2221b"
+      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"
+      ref: bbc7ce10a52be5d5c10d2eb6c3591aade71356e2
-      resolved-ref: "307dc133867eb5bf80d4f5c7412e58621dfca3cf"
+      resolved-ref: bbc7ce10a52be5d5c10d2eb6c3591aade71356e2
       url: "https://gitlab.com/famedly/libraries/dart-olm.git"
     source: git
     version: "0.0.0"