From d6da714dd33df73ced007d7d5529fbfd3027532e Mon Sep 17 00:00:00 2001 From: Christian Pauly Date: Fri, 17 Jan 2020 10:39:46 +0100 Subject: [PATCH] Design improvements --- lib/components/list_items/message.dart | 25 ++++++++++++++++++------- lib/main.dart | 2 +- lib/views/chat.dart | 4 +++- lib/views/chat_details.dart | 15 ++++++++++----- 4 files changed, 32 insertions(+), 14 deletions(-) diff --git a/lib/components/list_items/message.dart b/lib/components/list_items/message.dart index 69aa7993..a07cb398 100644 --- a/lib/components/list_items/message.dart +++ b/lib/components/list_items/message.dart @@ -12,8 +12,9 @@ import 'state_message.dart'; class Message extends StatelessWidget { final Event event; + final Event nextEvent; - const Message(this.event); + const Message(this.event, {this.nextEvent}); @override Widget build(BuildContext context) { @@ -25,7 +26,11 @@ class Message extends StatelessWidget { final bool ownMessage = event.senderId == client.userID; Alignment alignment = ownMessage ? Alignment.topRight : Alignment.topLeft; Color color = Theme.of(context).secondaryHeaderColor; - BubbleNip nip = ownMessage ? BubbleNip.rightBottom : BubbleNip.leftBottom; + final bool sameSender = + nextEvent != null ? nextEvent.sender.id == event.sender.id : false; + BubbleNip nip = sameSender + ? BubbleNip.no + : ownMessage ? BubbleNip.rightBottom : BubbleNip.leftBottom; final Color textColor = ownMessage ? Colors.white : Colors.black; MainAxisAlignment rowMainAxisAlignment = ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start; @@ -120,7 +125,9 @@ class Message extends StatelessWidget { Text( ownMessage ? "You" : event.sender.calcDisplayname(), style: TextStyle( - color: textColor, + color: ownMessage + ? textColor + : Theme.of(context).primaryColor, fontWeight: FontWeight.bold, ), ), @@ -128,7 +135,7 @@ class Message extends StatelessWidget { Text( event.time.localizedTime(context), style: TextStyle( - color: textColor.withAlpha(200), + color: textColor.withAlpha(180), ), ), ], @@ -144,13 +151,17 @@ class Message extends StatelessWidget { ), ), ]; + final Widget avatarOrSizedBox = + sameSender ? SizedBox(width: 40) : Avatar(event.sender.avatarUrl); if (ownMessage) { - rowChildren.add(Avatar(event.sender.avatarUrl)); + rowChildren.add(avatarOrSizedBox); } else { - rowChildren.insert(0, Avatar(event.sender.avatarUrl)); + rowChildren.insert(0, avatarOrSizedBox); } + return Padding( - padding: const EdgeInsets.all(8.0), + padding: EdgeInsets.only( + left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 12.0), child: Row( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: rowMainAxisAlignment, diff --git a/lib/main.dart b/lib/main.dart index 344d480e..45d77383 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -24,7 +24,7 @@ class App extends StatelessWidget { brightness: Brightness.light, primaryColor: Color(0xFF5625BA), backgroundColor: Colors.white, - secondaryHeaderColor: Color(0xFFF2F2F2), + secondaryHeaderColor: Color(0xFFF0F0F0), scaffoldBackgroundColor: Colors.white, dialogTheme: DialogTheme( shape: RoundedRectangleBorder( diff --git a/lib/views/chat.dart b/lib/views/chat.dart index 94822118..16b14057 100644 --- a/lib/views/chat.dart +++ b/lib/views/chat.dart @@ -252,7 +252,9 @@ class _ChatState extends State { ), padding: EdgeInsets.all(8), ) - : Message(timeline.events[i - 1]), + : Message(timeline.events[i - 1], + nextEvent: + i >= 2 ? timeline.events[i - 2] : null), ); }, ), diff --git a/lib/views/chat_details.dart b/lib/views/chat_details.dart index e8959cc7..a8ef2af8 100644 --- a/lib/views/chat_details.dart +++ b/lib/views/chat_details.dart @@ -110,23 +110,24 @@ class _ChatDetailsState extends State { crossAxisAlignment: CrossAxisAlignment.stretch, children: [ ContentBanner(widget.room.avatar), + Divider(height: 1), widget.room.canSendEvent("m.room.avatar") && !kIsWeb ? ListTile( - title: Text("Edit group avatar"), - trailing: Icon(Icons.file_upload), + title: Text("Set group avatar"), + leading: Icon(Icons.camera), onTap: () => setAvatarAction(context), ) : Container(), widget.room.canSendEvent("m.room.name") ? ListTile( - trailing: Icon(Icons.edit), + leading: Icon(Icons.edit), title: TextField( textInputAction: TextInputAction.done, onSubmitted: (s) => setDisplaynameAction(context, s), decoration: InputDecoration( border: InputBorder.none, - labelText: "Edit group name", + labelText: "Set group name", labelStyle: TextStyle(color: Colors.black), hintText: (RoomNameCalculator(widget.room).name), @@ -148,7 +149,11 @@ class _ChatDetailsState extends State { widget.room.canInvite ? ListTile( title: Text("Invite contact"), - leading: Icon(Icons.add), + leading: CircleAvatar( + child: Icon(Icons.add), + backgroundColor: Theme.of(context).primaryColor, + foregroundColor: Colors.white, + ), onTap: () => Navigator.of(context).push( AppRoute.defaultRoute( context,