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 { class Message extends StatelessWidget {
final Event event; final Event event;
final Event nextEvent;
const Message(this.event); const Message(this.event, {this.nextEvent});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -25,7 +26,11 @@ class Message extends StatelessWidget {
final bool ownMessage = event.senderId == client.userID; final bool ownMessage = event.senderId == client.userID;
Alignment alignment = ownMessage ? Alignment.topRight : Alignment.topLeft; Alignment alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
Color color = Theme.of(context).secondaryHeaderColor; 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; final Color textColor = ownMessage ? Colors.white : Colors.black;
MainAxisAlignment rowMainAxisAlignment = MainAxisAlignment rowMainAxisAlignment =
ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start; ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
@ -120,7 +125,9 @@ class Message extends StatelessWidget {
Text( Text(
ownMessage ? "You" : event.sender.calcDisplayname(), ownMessage ? "You" : event.sender.calcDisplayname(),
style: TextStyle( style: TextStyle(
color: textColor, color: ownMessage
? textColor
: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -128,7 +135,7 @@ class Message extends StatelessWidget {
Text( Text(
event.time.localizedTime(context), event.time.localizedTime(context),
style: TextStyle( 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) { if (ownMessage) {
rowChildren.add(Avatar(event.sender.avatarUrl)); rowChildren.add(avatarOrSizedBox);
} else { } else {
rowChildren.insert(0, Avatar(event.sender.avatarUrl)); rowChildren.insert(0, avatarOrSizedBox);
} }
return Padding( 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( child: Row(
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: rowMainAxisAlignment, mainAxisAlignment: rowMainAxisAlignment,

View File

@ -24,7 +24,7 @@ class App extends StatelessWidget {
brightness: Brightness.light, brightness: Brightness.light,
primaryColor: Color(0xFF5625BA), primaryColor: Color(0xFF5625BA),
backgroundColor: Colors.white, backgroundColor: Colors.white,
secondaryHeaderColor: Color(0xFFF2F2F2), secondaryHeaderColor: Color(0xFFF0F0F0),
scaffoldBackgroundColor: Colors.white, scaffoldBackgroundColor: Colors.white,
dialogTheme: DialogTheme( dialogTheme: DialogTheme(
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(

View File

@ -252,7 +252,9 @@ class _ChatState extends State<Chat> {
), ),
padding: EdgeInsets.all(8), 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, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
ContentBanner(widget.room.avatar), ContentBanner(widget.room.avatar),
Divider(height: 1),
widget.room.canSendEvent("m.room.avatar") && !kIsWeb widget.room.canSendEvent("m.room.avatar") && !kIsWeb
? ListTile( ? ListTile(
title: Text("Edit group avatar"), title: Text("Set group avatar"),
trailing: Icon(Icons.file_upload), leading: Icon(Icons.camera),
onTap: () => setAvatarAction(context), onTap: () => setAvatarAction(context),
) )
: Container(), : Container(),
widget.room.canSendEvent("m.room.name") widget.room.canSendEvent("m.room.name")
? ListTile( ? ListTile(
trailing: Icon(Icons.edit), leading: Icon(Icons.edit),
title: TextField( title: TextField(
textInputAction: TextInputAction.done, textInputAction: TextInputAction.done,
onSubmitted: (s) => onSubmitted: (s) =>
setDisplaynameAction(context, s), setDisplaynameAction(context, s),
decoration: InputDecoration( decoration: InputDecoration(
border: InputBorder.none, border: InputBorder.none,
labelText: "Edit group name", labelText: "Set group name",
labelStyle: TextStyle(color: Colors.black), labelStyle: TextStyle(color: Colors.black),
hintText: hintText:
(RoomNameCalculator(widget.room).name), (RoomNameCalculator(widget.room).name),
@ -148,7 +149,11 @@ class _ChatDetailsState extends State<ChatDetails> {
widget.room.canInvite widget.room.canInvite
? ListTile( ? ListTile(
title: Text("Invite contact"), 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( onTap: () => Navigator.of(context).push(
AppRoute.defaultRoute( AppRoute.defaultRoute(
context, context,