Enhanced ChatDetails UX

This commit is contained in:
Christian Pauly 2020-02-16 11:09:28 +01:00
parent 4ed9316552
commit 7b2f4c0163
4 changed files with 73 additions and 85 deletions

View File

@ -12,6 +12,8 @@ class SimpleDialogs {
String cancelText, String cancelText,
String hintText, String hintText,
String labelText, String labelText,
String prefixText,
String suffixText,
bool multiLine = false, bool multiLine = false,
}) async { }) async {
final TextEditingController controller = TextEditingController(); final TextEditingController controller = TextEditingController();
@ -19,7 +21,7 @@ class SimpleDialogs {
await showDialog( await showDialog(
context: context, context: context,
builder: (c) => AlertDialog( builder: (c) => AlertDialog(
title: Text(I18n.of(context).enterAUsername ?? titleText), title: Text(titleText ?? I18n.of(context).enterAUsername),
content: TextField( content: TextField(
controller: controller, controller: controller,
autofocus: true, autofocus: true,
@ -27,9 +29,14 @@ class SimpleDialogs {
input = s; input = s;
Navigator.of(context).pop(); Navigator.of(context).pop();
}, },
minLines: multiLine ? 3 : 1,
maxLines: multiLine ? 3 : 1,
textInputAction: multiLine ? TextInputAction.newline : null,
decoration: InputDecoration( decoration: InputDecoration(
hintText: hintText, hintText: hintText,
labelText: labelText, labelText: labelText,
prefixText: prefixText,
suffixText: suffixText,
border: OutlineInputBorder(), border: OutlineInputBorder(),
), ),
), ),

View File

@ -32,7 +32,6 @@ class AuthWebView extends StatelessWidget {
child: WebView( child: WebView(
initialUrl: url, initialUrl: url,
javascriptMode: JavascriptMode.unrestricted, javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (s) => print("onPageStarted: " + s),
), ),
), ),
], ],

View File

@ -5,6 +5,7 @@ import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/components/adaptive_page_layout.dart'; import 'package:fluffychat/components/adaptive_page_layout.dart';
import 'package:fluffychat/components/chat_settings_popup_menu.dart'; import 'package:fluffychat/components/chat_settings_popup_menu.dart';
import 'package:fluffychat/components/content_banner.dart'; import 'package:fluffychat/components/content_banner.dart';
import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
import 'package:fluffychat/components/list_items/participant_list_item.dart'; import 'package:fluffychat/components/list_items/participant_list_item.dart';
import 'package:fluffychat/components/matrix.dart'; import 'package:fluffychat/components/matrix.dart';
import 'package:fluffychat/i18n/i18n.dart'; import 'package:fluffychat/i18n/i18n.dart';
@ -31,8 +32,13 @@ class ChatDetails extends StatefulWidget {
class _ChatDetailsState extends State<ChatDetails> { class _ChatDetailsState extends State<ChatDetails> {
List<User> members; List<User> members;
bool topicEditMode = false; void setDisplaynameAction(BuildContext context) async {
void setDisplaynameAction(BuildContext context, String displayname) async { final String displayname = await SimpleDialogs(context).enterText(
titleText: I18n.of(context).changeTheNameOfTheGroup,
labelText: I18n.of(context).changeTheNameOfTheGroup,
hintText: widget.room.getLocalizedDisplayname(context),
);
if (displayname == null) return;
final MatrixState matrix = Matrix.of(context); final MatrixState matrix = Matrix.of(context);
final success = await matrix.tryRequestWithLoadingDialog( final success = await matrix.tryRequestWithLoadingDialog(
widget.room.setName(displayname), widget.room.setName(displayname),
@ -46,7 +52,15 @@ class _ChatDetailsState extends State<ChatDetails> {
} }
} }
void setCanonicalAliasAction(context, s) async { void setCanonicalAliasAction(context) async {
final String s = await SimpleDialogs(context).enterText(
titleText: I18n.of(context).setInvitationLink,
labelText: I18n.of(context).setInvitationLink,
hintText: I18n.of(context).alias.toLowerCase(),
prefixText: "#",
suffixText: widget.room.client.userID.domain,
);
if (s == null) return;
final String domain = widget.room.client.userID.domain; final String domain = widget.room.client.userID.domain;
final String canonicalAlias = "%23" + s + "%3A" + domain; final String canonicalAlias = "%23" + s + "%3A" + domain;
final Event aliasEvent = widget.room.getState("m.room.aliases", domain); final Event aliasEvent = widget.room.getState("m.room.aliases", domain);
@ -80,8 +94,16 @@ class _ChatDetailsState extends State<ChatDetails> {
); );
} }
void setTopicAction(BuildContext context, String displayname) async { void setTopicAction(BuildContext context) async {
setState(() => topicEditMode = false); final String displayname = await SimpleDialogs(context).enterText(
titleText: I18n.of(context).setGroupDescription,
labelText: I18n.of(context).setGroupDescription,
hintText: (widget.room.topic?.isNotEmpty ?? false)
? widget.room.topic
: I18n.of(context).addGroupDescription,
multiLine: true,
);
if (displayname == null) return;
final MatrixState matrix = Matrix.of(context); final MatrixState matrix = Matrix.of(context);
final success = await matrix.tryRequestWithLoadingDialog( final success = await matrix.tryRequestWithLoadingDialog(
widget.room.setDescription(displayname), widget.room.setDescription(displayname),
@ -196,54 +218,33 @@ class _ChatDetailsState extends State<ChatDetails> {
? Column( ? Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
topicEditMode ListTile(
? ListTile( leading: widget.room.canSendEvent("m.room.topic")
title: TextField( ? CircleAvatar(
textInputAction: TextInputAction.done, backgroundColor: Colors.white,
onSubmitted: (s) => setTopicAction(context, s), foregroundColor: Colors.grey,
autofocus: true, child: Icon(Icons.edit),
minLines: 1, )
maxLines: 4, : null,
decoration: InputDecoration( title: Text("${I18n.of(context).groupDescription}:",
border: InputBorder.none, style: TextStyle(
labelText: color: Theme.of(context).primaryColor,
"${I18n.of(context).groupDescription}:", fontWeight: FontWeight.bold)),
labelStyle: TextStyle( subtitle: LinkText(
color: Theme.of(context).primaryColor, text: widget.room.topic?.isEmpty ?? true
fontWeight: FontWeight.bold), ? I18n.of(context).addGroupDescription
hintText: widget.room.topic ?? : widget.room.topic,
I18n.of(context).setGroupDescription, linkStyle: TextStyle(color: Colors.blueAccent),
), textStyle: TextStyle(
), fontSize: 14,
) color: Colors.black,
: ListTile( ),
leading: widget.room.canSendEvent("m.room.topic") ),
? CircleAvatar( onTap: widget.room.canSendEvent("m.room.topic")
backgroundColor: Colors.white, ? () => setTopicAction(context)
foregroundColor: Colors.grey, : null,
child: Icon(Icons.edit), ),
) Divider(thickness: 1),
: null,
title: Text(
"${I18n.of(context).groupDescription}:",
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold)),
subtitle: LinkText(
text: widget.room.topic?.isEmpty ?? true
? I18n.of(context).addGroupDescription
: widget.room.topic,
linkStyle: TextStyle(color: Colors.blueAccent),
textStyle: TextStyle(
fontSize: 14,
color: Colors.black,
),
),
onTap: widget.room.canSendEvent("m.room.topic")
? () => setState(() => topicEditMode = true)
: null,
),
Divider(thickness: 8),
ListTile( ListTile(
title: Text( title: Text(
I18n.of(context).settings, I18n.of(context).settings,
@ -260,19 +261,10 @@ class _ChatDetailsState extends State<ChatDetails> {
foregroundColor: Colors.grey, foregroundColor: Colors.grey,
child: Icon(Icons.people), child: Icon(Icons.people),
), ),
title: TextField( title: Text(I18n.of(context).changeTheNameOfTheGroup),
textInputAction: TextInputAction.done, subtitle: Text(
onSubmitted: (s) => widget.room.getLocalizedDisplayname(context)),
setDisplaynameAction(context, s), onTap: () => setDisplaynameAction(context),
decoration: InputDecoration(
border: InputBorder.none,
labelText:
I18n.of(context).changeTheNameOfTheGroup,
labelStyle: TextStyle(color: Colors.black),
hintText:
widget.room.getLocalizedDisplayname(context),
),
),
), ),
if (widget.room.canSendEvent("m.room.canonical_alias") && if (widget.room.canSendEvent("m.room.canonical_alias") &&
widget.room.joinRules == JoinRules.public) widget.room.joinRules == JoinRules.public)
@ -282,21 +274,12 @@ class _ChatDetailsState extends State<ChatDetails> {
foregroundColor: Colors.grey, foregroundColor: Colors.grey,
child: Icon(Icons.link), child: Icon(Icons.link),
), ),
title: TextField( onTap: () => setCanonicalAliasAction(context),
textInputAction: TextInputAction.done, title: Text(I18n.of(context).setInvitationLink),
onSubmitted: (s) => subtitle: Text(
setCanonicalAliasAction(context, s), (widget.room.canonicalAlias?.isNotEmpty ?? false)
decoration: InputDecoration( ? widget.room.canonicalAlias
border: InputBorder.none, : I18n.of(context).none),
labelText: I18n.of(context).setInvitationLink,
labelStyle: TextStyle(color: Colors.black),
hintText: widget.room.canonicalAlias
?.replaceAll("#", "") ??
I18n.of(context).alias,
prefixText: "#",
suffixText: widget.room.client.userID.domain,
),
),
), ),
PopupMenuButton( PopupMenuButton(
child: ListTile( child: ListTile(
@ -415,7 +398,7 @@ class _ChatDetailsState extends State<ChatDetails> {
), ),
], ],
), ),
Divider(thickness: 8), Divider(thickness: 1),
ListTile( ListTile(
title: Text( title: Text(
actualMembersCount > 1 actualMembersCount > 1

View File

@ -10,7 +10,6 @@ import 'package:fluffychat/utils/app_route.dart';
import 'package:fluffychat/views/app_info.dart'; import 'package:fluffychat/views/app_info.dart';
import 'package:fluffychat/views/chat_list.dart'; import 'package:fluffychat/views/chat_list.dart';
import 'package:fluffychat/views/sign_up.dart'; import 'package:fluffychat/views/sign_up.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:toast/toast.dart'; import 'package:toast/toast.dart';