Improved design

This commit is contained in:
Christian Pauly 2020-01-18 13:22:22 +01:00
parent 6ab3874bca
commit 2b312ff74d
8 changed files with 47 additions and 11 deletions

View file

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

View file

@ -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: <Widget>[
Expanded(

View file

@ -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,

View file

@ -117,7 +117,7 @@ class ParticipantListItem extends StatelessWidget {
],
),
subtitle: Text(user.id),
leading: Avatar(user.avatarUrl),
leading: Avatar(user.avatarUrl, user.calcDisplayname()),
),
);
}

View file

@ -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(

View file

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

View file

@ -214,12 +214,18 @@ class _ChatDetailsState extends State<ChatDetails> {
: 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),
),
),

View file

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