Design improvements

This commit is contained in:
Christian Pauly 2020-05-15 17:57:53 +00:00
parent c196bf28ef
commit 37da184f8d
10 changed files with 279 additions and 160 deletions

View file

@ -0,0 +1,72 @@
import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/utils/app_route.dart';
import 'package:fluffychat/views/chat.dart';
import 'package:flutter/material.dart';
import 'package:fluffychat/utils/presence_extension.dart';
import '../avatar.dart';
import '../matrix.dart';
class PresenceDialog extends StatelessWidget {
final Uri avatarUrl;
final String displayname;
final Presence presence;
const PresenceDialog(
this.presence, {
this.avatarUrl,
this.displayname,
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return AlertDialog(
title: ListTile(
contentPadding: EdgeInsets.zero,
leading: Avatar(avatarUrl, displayname),
title: Text(displayname),
subtitle: Text(presence.sender),
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(presence.getLocalizedStatusMessage(context)),
if (presence.presence != null)
Text(
presence.presence.toString().split('.').last,
style: TextStyle(
color: presence.currentlyActive == true
? Colors.green
: Theme.of(context).primaryColor,
),
)
],
),
actions: <Widget>[
if (presence.sender != Matrix.of(context).client.userID)
FlatButton(
child: Text(L10n.of(context).sendAMessage),
onPressed: () async {
final roomId = await User(
presence.sender,
room: Room(id: '', client: Matrix.of(context).client),
).startDirectChat();
await Navigator.of(context).pushAndRemoveUntil(
AppRoute.defaultRoute(
context,
ChatView(roomId),
),
(Route r) => r.isFirst);
},
),
FlatButton(
child: Text(L10n.of(context).close),
onPressed: () => Navigator.of(context).pop(),
),
],
);
}
}

View file

@ -9,6 +9,7 @@ import 'package:fluffychat/utils/event_extension.dart';
import 'package:fluffychat/utils/string_color.dart'; import 'package:fluffychat/utils/string_color.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../adaptive_page_layout.dart';
import '../avatar.dart'; import '../avatar.dart';
import '../matrix.dart'; import '../matrix.dart';
import 'state_message.dart'; import 'state_message.dart';
@ -74,74 +75,78 @@ class Message extends StatelessWidget {
margin: BubbleEdges.symmetric(horizontal: 4), margin: BubbleEdges.symmetric(horizontal: 4),
color: color, color: color,
nip: nip, nip: nip,
child: Stack( child: Container(
children: <Widget>[ constraints:
Column( BoxConstraints(maxWidth: AdaptivePageLayout.defaultMinWidth),
mainAxisSize: MainAxisSize.min, child: Stack(
crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
children: <Widget>[ Column(
if (event.isReply) mainAxisSize: MainAxisSize.min,
FutureBuilder<Event>( crossAxisAlignment: CrossAxisAlignment.start,
future: event.getReplyEvent(timeline), children: <Widget>[
builder: (BuildContext context, snapshot) { if (event.isReply)
final replyEvent = snapshot.hasData FutureBuilder<Event>(
? snapshot.data future: event.getReplyEvent(timeline),
: Event( builder: (BuildContext context, snapshot) {
eventId: event.content['m.relates_to'] final replyEvent = snapshot.hasData
['m.in_reply_to']['event_id'], ? snapshot.data
content: {'msgtype': 'm.text', 'body': '...'}, : Event(
senderId: event.senderId, eventId: event.content['m.relates_to']
typeKey: 'm.room.message', ['m.in_reply_to']['event_id'],
room: event.room, content: {'msgtype': 'm.text', 'body': '...'},
roomId: event.roomId, senderId: event.senderId,
status: 1, typeKey: 'm.room.message',
time: DateTime.now(), room: event.room,
); roomId: event.roomId,
return Container( status: 1,
margin: EdgeInsets.symmetric(vertical: 4.0), time: DateTime.now(),
child: );
ReplyContent(replyEvent, lightText: ownMessage), return Container(
); margin: EdgeInsets.symmetric(vertical: 4.0),
}, child:
), ReplyContent(replyEvent, lightText: ownMessage),
MessageContent( );
event, },
textColor: textColor,
),
if (event.type == EventTypes.Encrypted &&
event.messageType == MessageTypes.BadEncrypted &&
event.content['body'] == DecryptError.UNKNOWN_SESSION)
RaisedButton(
color: color.withAlpha(100),
child: Text(
L10n.of(context).requestPermission,
style: TextStyle(color: textColor),
), ),
onPressed: () => SimpleDialogs(context) MessageContent(
.tryRequestWithLoadingDialog(event.requestKey()),
),
SizedBox(height: 4),
Opacity(
opacity: 0,
child: _MetaRow(
event, event,
ownMessage, textColor: textColor,
textColor,
), ),
), if (event.type == EventTypes.Encrypted &&
], event.messageType == MessageTypes.BadEncrypted &&
), event.content['body'] == DecryptError.UNKNOWN_SESSION)
Positioned( RaisedButton(
bottom: 0, color: color.withAlpha(100),
right: ownMessage ? 0 : null, child: Text(
left: !ownMessage ? 0 : null, L10n.of(context).requestPermission,
child: _MetaRow( style: TextStyle(color: textColor),
event, ),
ownMessage, onPressed: () => SimpleDialogs(context)
textColor, .tryRequestWithLoadingDialog(event.requestKey()),
),
SizedBox(height: 4),
Opacity(
opacity: 0,
child: _MetaRow(
event,
ownMessage,
textColor,
),
),
],
), ),
), Positioned(
], bottom: 0,
right: ownMessage ? 0 : null,
left: !ownMessage ? 0 : null,
child: _MetaRow(
event,
ownMessage,
textColor,
),
),
],
),
), ),
), ),
), ),

View file

@ -1,12 +1,9 @@
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/l10n/l10n.dart'; import 'package:fluffychat/components/dialogs/presence_dialog.dart';
import 'package:fluffychat/utils/app_route.dart';
import 'package:fluffychat/views/chat.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../avatar.dart'; import '../avatar.dart';
import '../matrix.dart'; import '../matrix.dart';
import 'package:fluffychat/utils/presence_extension.dart';
class PresenceListItem extends StatelessWidget { class PresenceListItem extends StatelessWidget {
final Presence presence; final Presence presence;
@ -36,68 +33,27 @@ class PresenceListItem extends StatelessWidget {
return InkWell( return InkWell(
onTap: () => showDialog( onTap: () => showDialog(
context: context, context: context,
builder: (c) => AlertDialog( builder: (c) => PresenceDialog(
title: ListTile( presence,
contentPadding: EdgeInsets.zero, avatarUrl: avatarUrl,
leading: Avatar(avatarUrl, displayname), displayname: displayname,
title: Text(displayname), ),
subtitle: Text(presence.sender), child: Container(
), width: 80,
content: Column( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Text(presence.getLocalizedStatusMessage(context)), SizedBox(height: 9),
if (presence.presence != null) Avatar(avatarUrl, displayname),
Text( Padding(
presence.presence.toString().split('.').last, padding: const EdgeInsets.all(6.0),
style: TextStyle( child: Text(
color: presence.currentlyActive == true displayname,
? Colors.green overflow: TextOverflow.ellipsis,
: Theme.of(context).primaryColor, maxLines: 1,
), ),
) ),
], ],
), ),
actions: <Widget>[
if (presence.sender != Matrix.of(context).client.userID)
FlatButton(
child: Text(L10n.of(context).sendAMessage),
onPressed: () async {
final roomId = await User(
presence.sender,
room: Room(id: '', client: Matrix.of(context).client),
).startDirectChat();
await Navigator.of(context).pushAndRemoveUntil(
AppRoute.defaultRoute(
context,
ChatView(roomId),
),
(Route r) => r.isFirst);
},
),
FlatButton(
child: Text(L10n.of(context).close),
onPressed: () => Navigator.of(context).pop(),
),
],
),
),
child: Container(
width: 80,
child: Column(
children: <Widget>[
SizedBox(height: 9),
Avatar(avatarUrl, displayname),
Padding(
padding: const EdgeInsets.all(6.0),
child: Text(
displayname,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
],
), ),
), ),
); );

View file

@ -354,6 +354,11 @@
"type": "text", "type": "text",
"placeholders": {} "placeholders": {}
}, },
"Currenlty active": "Jetzt gerade online",
"@Currenlty active": {
"type": "text",
"placeholders": {}
},
"dateAndTimeOfDay": "{date}, {timeOfDay}", "dateAndTimeOfDay": "{date}, {timeOfDay}",
"@dateAndTimeOfDay": { "@dateAndTimeOfDay": {
"type": "text", "type": "text",
@ -687,7 +692,7 @@
"username": {} "username": {}
} }
}, },
"lastActiveAgo": "Zuletzt aktiv: {localizedTimeShort}", "lastActiveAgo": "Zuletzt gesehen: {localizedTimeShort}",
"@lastActiveAgo": { "@lastActiveAgo": {
"type": "text", "type": "text",
"placeholders": { "placeholders": {
@ -997,6 +1002,11 @@
"username": {} "username": {}
} }
}, },
"Seen a long time ago": "Vor sehr langer Zeit gesehen",
"@Seen a long time ago": {
"type": "text",
"placeholders": {}
},
"seenByUserAndUser": "Gelesen von {username} und {username2}", "seenByUserAndUser": "Gelesen von {username} und {username2}",
"@seenByUserAndUser": { "@seenByUserAndUser": {
"type": "text", "type": "text",

View file

@ -1,5 +1,5 @@
{ {
"@@last_modified": "2020-05-12T08:42:24.358124", "@@last_modified": "2020-05-15T15:34:50.065646",
"About": "About", "About": "About",
"@About": { "@About": {
"type": "text", "type": "text",
@ -354,6 +354,11 @@
"type": "text", "type": "text",
"placeholders": {} "placeholders": {}
}, },
"Currenlty active": "Currenlty active",
"@Currenlty active": {
"type": "text",
"placeholders": {}
},
"dateAndTimeOfDay": "{date}, {timeOfDay}", "dateAndTimeOfDay": "{date}, {timeOfDay}",
"@dateAndTimeOfDay": { "@dateAndTimeOfDay": {
"type": "text", "type": "text",
@ -995,6 +1000,11 @@
"type": "text", "type": "text",
"placeholders": {} "placeholders": {}
}, },
"Seen a long time ago": "Seen a long time ago",
"@Seen a long time ago": {
"type": "text",
"placeholders": {}
},
"seenByUser": "Seen by {username}", "seenByUser": "Seen by {username}",
"@seenByUser": { "@seenByUser": {
"type": "text", "type": "text",

View file

@ -261,6 +261,8 @@ class L10n extends MatrixLocalizations {
String get createNewGroup => Intl.message("Create new group"); String get createNewGroup => Intl.message("Create new group");
String get currentlyActive => Intl.message('Currenlty active');
String dateAndTimeOfDay(String date, String timeOfDay) => Intl.message( String dateAndTimeOfDay(String date, String timeOfDay) => Intl.message(
"$date, $timeOfDay", "$date, $timeOfDay",
name: "dateAndTimeOfDay", name: "dateAndTimeOfDay",
@ -599,6 +601,8 @@ class L10n extends MatrixLocalizations {
String get searchForAChat => Intl.message("Search for a chat"); String get searchForAChat => Intl.message("Search for a chat");
String get lastSeenLongTimeAgo => Intl.message('Seen a long time ago');
String seenByUser(String username) => Intl.message( String seenByUser(String username) => Intl.message(
"Seen by $username", "Seen by $username",
name: "seenByUser", name: "seenByUser",

View file

@ -83,7 +83,7 @@ class MessageLookup extends MessageLookupByLibrary {
static m31(username, targetName) => "${username} hat ${targetName} hinausgeworfen und verbannt"; static m31(username, targetName) => "${username} hat ${targetName} hinausgeworfen und verbannt";
static m32(localizedTimeShort) => "Zuletzt aktiv: ${localizedTimeShort}"; static m32(localizedTimeShort) => "Zuletzt gesehen: ${localizedTimeShort}";
static m33(count) => "${count} weitere Teilnehmer laden"; static m33(count) => "${count} weitere Teilnehmer laden";
@ -181,6 +181,7 @@ class MessageLookup extends MessageLookupByLibrary {
"Create" : MessageLookupByLibrary.simpleMessage("Create"), "Create" : MessageLookupByLibrary.simpleMessage("Create"),
"Create account now" : MessageLookupByLibrary.simpleMessage("Account jetzt erstellen"), "Create account now" : MessageLookupByLibrary.simpleMessage("Account jetzt erstellen"),
"Create new group" : MessageLookupByLibrary.simpleMessage("Neue Gruppe"), "Create new group" : MessageLookupByLibrary.simpleMessage("Neue Gruppe"),
"Currenlty active" : MessageLookupByLibrary.simpleMessage("Jetzt gerade online"),
"Dark" : MessageLookupByLibrary.simpleMessage("Dunkel"), "Dark" : MessageLookupByLibrary.simpleMessage("Dunkel"),
"Delete" : MessageLookupByLibrary.simpleMessage("Löschen"), "Delete" : MessageLookupByLibrary.simpleMessage("Löschen"),
"Delete message" : MessageLookupByLibrary.simpleMessage("Nachricht löschen"), "Delete message" : MessageLookupByLibrary.simpleMessage("Nachricht löschen"),
@ -273,6 +274,7 @@ class MessageLookup extends MessageLookupByLibrary {
"Revoke all permissions" : MessageLookupByLibrary.simpleMessage("Alle Berechtigungen zurücknehmen"), "Revoke all permissions" : MessageLookupByLibrary.simpleMessage("Alle Berechtigungen zurücknehmen"),
"Saturday" : MessageLookupByLibrary.simpleMessage("Samstag"), "Saturday" : MessageLookupByLibrary.simpleMessage("Samstag"),
"Search for a chat" : MessageLookupByLibrary.simpleMessage("Durchsuche die Chats"), "Search for a chat" : MessageLookupByLibrary.simpleMessage("Durchsuche die Chats"),
"Seen a long time ago" : MessageLookupByLibrary.simpleMessage("Vor sehr langer Zeit gesehen"),
"Send" : MessageLookupByLibrary.simpleMessage("Senden"), "Send" : MessageLookupByLibrary.simpleMessage("Senden"),
"Send a message" : MessageLookupByLibrary.simpleMessage("Nachricht schreiben"), "Send a message" : MessageLookupByLibrary.simpleMessage("Nachricht schreiben"),
"Send file" : MessageLookupByLibrary.simpleMessage("Datei senden"), "Send file" : MessageLookupByLibrary.simpleMessage("Datei senden"),

View file

@ -181,6 +181,7 @@ class MessageLookup extends MessageLookupByLibrary {
"Create" : MessageLookupByLibrary.simpleMessage("Create"), "Create" : MessageLookupByLibrary.simpleMessage("Create"),
"Create account now" : MessageLookupByLibrary.simpleMessage("Create account now"), "Create account now" : MessageLookupByLibrary.simpleMessage("Create account now"),
"Create new group" : MessageLookupByLibrary.simpleMessage("Create new group"), "Create new group" : MessageLookupByLibrary.simpleMessage("Create new group"),
"Currenlty active" : MessageLookupByLibrary.simpleMessage("Currenlty active"),
"Dark" : MessageLookupByLibrary.simpleMessage("Dark"), "Dark" : MessageLookupByLibrary.simpleMessage("Dark"),
"Delete" : MessageLookupByLibrary.simpleMessage("Delete"), "Delete" : MessageLookupByLibrary.simpleMessage("Delete"),
"Delete message" : MessageLookupByLibrary.simpleMessage("Delete message"), "Delete message" : MessageLookupByLibrary.simpleMessage("Delete message"),
@ -275,6 +276,7 @@ class MessageLookup extends MessageLookupByLibrary {
"Revoke all permissions" : MessageLookupByLibrary.simpleMessage("Revoke all permissions"), "Revoke all permissions" : MessageLookupByLibrary.simpleMessage("Revoke all permissions"),
"Saturday" : MessageLookupByLibrary.simpleMessage("Saturday"), "Saturday" : MessageLookupByLibrary.simpleMessage("Saturday"),
"Search for a chat" : MessageLookupByLibrary.simpleMessage("Search for a chat"), "Search for a chat" : MessageLookupByLibrary.simpleMessage("Search for a chat"),
"Seen a long time ago" : MessageLookupByLibrary.simpleMessage("Seen a long time ago"),
"Send" : MessageLookupByLibrary.simpleMessage("Send"), "Send" : MessageLookupByLibrary.simpleMessage("Send"),
"Send a message" : MessageLookupByLibrary.simpleMessage("Send a message"), "Send a message" : MessageLookupByLibrary.simpleMessage("Send a message"),
"Send file" : MessageLookupByLibrary.simpleMessage("Send file"), "Send file" : MessageLookupByLibrary.simpleMessage("Send file"),

View file

@ -0,0 +1,23 @@
import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/l10n/l10n.dart';
import 'package:flutter/widgets.dart';
import 'date_time_extension.dart';
extension RoomStatusExtension on Room {
Presence get directChatPresence => client.presences[directChatMatrixID];
String getLocalizedStatus(BuildContext context) {
if (isDirectChat) {
if (directChatPresence != null) {
if (directChatPresence.currentlyActive == true) {
return L10n.of(context).currentlyActive;
}
return L10n.of(context)
.lastActiveAgo(directChatPresence.time.localizedTimeShort(context));
}
return L10n.of(context).lastSeenLongTimeAgo;
}
return L10n.of(context).countParticipants(mJoinedMemberCount.toString());
}
}

View file

@ -1,10 +1,13 @@
import 'dart:async'; import 'dart:async';
import 'dart:io'; import 'dart:io';
import 'dart:math';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:file_picker/file_picker.dart'; import 'package:file_picker/file_picker.dart';
import 'package:fluffychat/components/adaptive_page_layout.dart'; import 'package:fluffychat/components/adaptive_page_layout.dart';
import 'package:fluffychat/components/avatar.dart';
import 'package:fluffychat/components/chat_settings_popup_menu.dart'; import 'package:fluffychat/components/chat_settings_popup_menu.dart';
import 'package:fluffychat/components/dialogs/presence_dialog.dart';
import 'package:fluffychat/components/dialogs/recording_dialog.dart'; import 'package:fluffychat/components/dialogs/recording_dialog.dart';
import 'package:fluffychat/components/dialogs/simple_dialogs.dart'; import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
import 'package:fluffychat/components/encryption_button.dart'; import 'package:fluffychat/components/encryption_button.dart';
@ -12,6 +15,8 @@ import 'package:fluffychat/components/list_items/message.dart';
import 'package:fluffychat/components/matrix.dart'; import 'package:fluffychat/components/matrix.dart';
import 'package:fluffychat/components/reply_content.dart'; import 'package:fluffychat/components/reply_content.dart';
import 'package:fluffychat/l10n/l10n.dart'; import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/utils/app_route.dart';
import 'package:fluffychat/utils/room_status_extension.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -19,6 +24,7 @@ import 'package:bot_toast/bot_toast.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:pedantic/pedantic.dart'; import 'package:pedantic/pedantic.dart';
import 'chat_details.dart';
import 'chat_list.dart'; import 'chat_list.dart';
import '../components/input_bar.dart'; import '../components/input_bar.dart';
@ -359,38 +365,59 @@ class _ChatState extends State<_Chat> {
onPressed: () => setState(() => selectedEvents.clear()), onPressed: () => setState(() => selectedEvents.clear()),
) )
: null, : null,
titleSpacing: 0,
title: selectedEvents.isEmpty title: selectedEvents.isEmpty
? Column( ? StreamBuilder<Object>(
mainAxisSize: MainAxisSize.min, stream: Matrix.of(context)
crossAxisAlignment: !kIsWeb && Platform.isIOS .client
? CrossAxisAlignment.center .onPresence
: CrossAxisAlignment.start, .stream
children: <Widget>[ .where((p) => p.sender == room.directChatMatrixID),
Text(room.getLocalizedDisplayname(L10n.of(context))), builder: (context, snapshot) {
AnimatedContainer( return ListTile(
duration: Duration(milliseconds: 500), leading: Avatar(room.avatar, room.displayname),
height: typingText.isEmpty ? 0 : 20, contentPadding: EdgeInsets.zero,
child: Row( onTap: () =>
children: <Widget>[ room.isDirectChat && room.directChatPresence == null
typingText.isEmpty ? null
? Container() : room.isDirectChat
: Icon(Icons.edit, ? showDialog(
color: Theme.of(context).primaryColor, context: context,
size: 13), builder: (c) => PresenceDialog(
SizedBox(width: 4), room.directChatPresence,
Text( avatarUrl: room.avatar,
typingText, displayname: room.displayname,
style: TextStyle( ),
color: Theme.of(context).primaryColor, )
fontStyle: FontStyle.italic, : Navigator.of(context).push(
fontSize: 16, AppRoute.defaultRoute(
context,
ChatDetails(room),
),
),
title: Text(room.getLocalizedDisplayname(L10n.of(context))),
subtitle: typingText.isEmpty
? Text(
room.getLocalizedStatus(context),
)
: Row(
children: <Widget>[
Icon(Icons.edit,
color: Theme.of(context).primaryColor,
size: 13),
SizedBox(width: 4),
Text(
typingText,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontStyle: FontStyle.italic,
fontSize: 16,
),
),
],
), ),
), );
], })
),
),
],
)
: Text(L10n.of(context) : Text(L10n.of(context)
.numberSelected(selectedEvents.length.toString())), .numberSelected(selectedEvents.length.toString())),
actions: selectMode actions: selectMode
@ -456,6 +483,14 @@ class _ChatState extends State<_Chat> {
if (timeline.events.isEmpty) return Container(); if (timeline.events.isEmpty) return Container();
return ListView.builder( return ListView.builder(
padding: EdgeInsets.symmetric(
horizontal: max(
0,
(MediaQuery.of(context).size.width -
AdaptivePageLayout.defaultMinWidth *
2) /
2),
),
reverse: true, reverse: true,
itemCount: timeline.events.length + 2, itemCount: timeline.events.length + 2,
controller: _scrollController, controller: _scrollController,