From 2b312ff74dd8832e83ff8ab4e24591e56f5923a3 Mon Sep 17 00:00:00 2001 From: Christian Pauly Date: Sat, 18 Jan 2020 13:22:22 +0100 Subject: [PATCH] Improved design --- lib/components/avatar.dart | 14 +++++++++++--- lib/components/list_items/chat_list_item.dart | 2 +- lib/components/list_items/message.dart | 6 ++++-- .../list_items/participant_list_item.dart | 2 +- lib/components/list_items/state_message.dart | 6 +++++- lib/utils/string_color.dart | 13 +++++++++++++ lib/views/chat_details.dart | 10 ++++++++-- lib/views/invitation_selection.dart | 5 ++++- 8 files changed, 47 insertions(+), 11 deletions(-) create mode 100644 lib/utils/string_color.dart diff --git a/lib/components/avatar.dart b/lib/components/avatar.dart index 6da6579..58b16ce 100644 --- a/lib/components/avatar.dart +++ b/lib/components/avatar.dart @@ -1,5 +1,6 @@ import 'package:cached_network_image/cached_network_image.dart'; import 'package:famedlysdk/famedlysdk.dart'; +import 'package:fluffychat/utils/string_color.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -7,10 +8,11 @@ import 'matrix.dart'; class Avatar extends StatelessWidget { final MxContent mxContent; + final String name; final double size; final Function onTap; - const Avatar(this.mxContent, {this.size = 40, this.onTap, Key key}) + const Avatar(this.mxContent, this.name, {this.size = 40, this.onTap, Key key}) : super(key: key); @override @@ -21,6 +23,12 @@ class Avatar extends StatelessWidget { height: size * MediaQuery.of(context).devicePixelRatio, method: ThumbnailMethod.scale, ); + String fallbackLetters = "@"; + if ((name?.length ?? 0) >= 2) { + fallbackLetters = name.substring(0, 2); + } else if ((name?.length ?? 0) == 1) { + fallbackLetters = name; + } return InkWell( onTap: onTap, child: CircleAvatar( @@ -34,9 +42,9 @@ class Avatar extends StatelessWidget { src, ) : null, - backgroundColor: Theme.of(context).secondaryHeaderColor, + backgroundColor: name?.color ?? Theme.of(context).secondaryHeaderColor, child: mxContent.mxc.isEmpty - ? Text("@", style: TextStyle(color: Colors.blueGrey)) + ? Text(fallbackLetters, style: TextStyle(color: Colors.white)) : null, ), ); diff --git a/lib/components/list_items/chat_list_item.dart b/lib/components/list_items/chat_list_item.dart index 9f28c5e..c8e061d 100644 --- a/lib/components/list_items/chat_list_item.dart +++ b/lib/components/list_items/chat_list_item.dart @@ -86,7 +86,7 @@ class ChatListItem extends StatelessWidget { return Material( color: activeChat ? Color(0xFFE8E8E8) : Colors.white, child: ListTile( - leading: Avatar(room.avatar), + leading: Avatar(room.avatar, room.displayname), title: Row( children: [ Expanded( diff --git a/lib/components/list_items/message.dart b/lib/components/list_items/message.dart index b079ddf..4d91b43 100644 --- a/lib/components/list_items/message.dart +++ b/lib/components/list_items/message.dart @@ -4,6 +4,7 @@ import 'package:fluffychat/components/dialogs/redact_message_dialog.dart'; import 'package:fluffychat/components/message_content.dart'; import 'package:fluffychat/utils/app_route.dart'; import 'package:fluffychat/utils/date_time_extension.dart'; +import 'package:fluffychat/utils/string_color.dart'; import 'package:fluffychat/views/content_web_view.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -144,7 +145,7 @@ class Message extends StatelessWidget { style: TextStyle( color: ownMessage ? textColor - : Theme.of(context).primaryColor, + : event.sender.calcDisplayname().color, fontWeight: FontWeight.bold, ), ), @@ -172,6 +173,7 @@ class Message extends StatelessWidget { ? SizedBox(width: 40) : Avatar( event.sender.avatarUrl, + event.sender.calcDisplayname(), onTap: () => Navigator.of(context).push( AppRoute.defaultRoute( context, @@ -187,7 +189,7 @@ class Message extends StatelessWidget { return Padding( padding: EdgeInsets.only( - left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 12.0), + left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 8.0), child: Row( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: rowMainAxisAlignment, diff --git a/lib/components/list_items/participant_list_item.dart b/lib/components/list_items/participant_list_item.dart index 5ef78f8..a15d79d 100644 --- a/lib/components/list_items/participant_list_item.dart +++ b/lib/components/list_items/participant_list_item.dart @@ -117,7 +117,7 @@ class ParticipantListItem extends StatelessWidget { ], ), subtitle: Text(user.id), - leading: Avatar(user.avatarUrl), + leading: Avatar(user.avatarUrl, user.calcDisplayname()), ), ); } diff --git a/lib/components/list_items/state_message.dart b/lib/components/list_items/state_message.dart index 9a1e933..e82da39 100644 --- a/lib/components/list_items/state_message.dart +++ b/lib/components/list_items/state_message.dart @@ -12,7 +12,11 @@ class StateMessage extends StatelessWidget { Widget build(BuildContext context) { if (event.type == EventTypes.Redaction) return Container(); return Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.only( + left: 8.0, + right: 8.0, + bottom: 8.0, + ), child: Opacity( opacity: 0.5, child: Bubble( diff --git a/lib/utils/string_color.dart b/lib/utils/string_color.dart new file mode 100644 index 0000000..2afccc6 --- /dev/null +++ b/lib/utils/string_color.dart @@ -0,0 +1,13 @@ +import 'package:flutter/material.dart'; + +extension StringColor on String { + Color get color { + double number = 0.0; + for (var i = 0; i < this.length; i++) { + number += this.codeUnitAt(i); + } + number = (number % 10) * 25.5; + print(number); + return HSLColor.fromAHSL(1, number, 1, 0.35).toColor(); + } +} diff --git a/lib/views/chat_details.dart b/lib/views/chat_details.dart index fae40bc..568266f 100644 --- a/lib/views/chat_details.dart +++ b/lib/views/chat_details.dart @@ -214,12 +214,18 @@ class _ChatDetailsState extends State { : Container(), ], ) - : i < members.length + 1 + : i < members.length + 1 && false ? ParticipantListItem(members[i - 1]) : ListTile( title: Text( "Load more ${actualMembersCount - members.length} participants"), - leading: Icon(Icons.refresh), + leading: CircleAvatar( + backgroundColor: Colors.white, + child: Icon( + Icons.refresh, + color: Colors.grey, + ), + ), onTap: () => requestMoreMembersAction(context), ), ), diff --git a/lib/views/invitation_selection.dart b/lib/views/invitation_selection.dart index b6481e1..c781ba3 100644 --- a/lib/views/invitation_selection.dart +++ b/lib/views/invitation_selection.dart @@ -68,7 +68,10 @@ class InvitationSelection extends StatelessWidget { return ListView.builder( itemCount: contacts.length, itemBuilder: (BuildContext context, int i) => ListTile( - leading: Avatar(contacts[i].avatarUrl), + leading: Avatar( + contacts[i].avatarUrl, + contacts[i].calcDisplayname(), + ), title: Text(contacts[i].calcDisplayname()), subtitle: Text(contacts[i].id), onTap: () => inviteAction(context, contacts[i].id),