Design improvements

This commit is contained in:
Christian Pauly 2020-01-17 10:39:46 +01:00
parent 71053ff4d2
commit d6da714dd3
4 changed files with 32 additions and 14 deletions

View file

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

View file

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

View file

@ -252,7 +252,9 @@ class _ChatState extends State<Chat> {
),
padding: EdgeInsets.all(8),
)
: Message(timeline.events[i - 1]),
: Message(timeline.events[i - 1],
nextEvent:
i >= 2 ? timeline.events[i - 2] : null),
);
},
),

View file

@ -110,23 +110,24 @@ class _ChatDetailsState extends State<ChatDetails> {
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
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<ChatDetails> {
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,