Enhanced ChatDetails UX

lib/components/dialogs/simple_dialogs.dart

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

lib/views/auth_web_view.dart

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

lib/views/chat_details.dart

@@ -5,6 +5,7 @@ import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/components/adaptive_page_layout.dart';
 import 'package:fluffychat/components/chat_settings_popup_menu.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/matrix.dart';
 import 'package:fluffychat/i18n/i18n.dart';
@@ -31,8 +32,13 @@ class ChatDetails extends StatefulWidget {
 
 class _ChatDetailsState extends State<ChatDetails> {
   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 success = await matrix.tryRequestWithLoadingDialog(
       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 canonicalAlias = "%23" + s + "%3A" + 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 success = await matrix.tryRequestWithLoadingDialog(
       widget.room.setDescription(displayname),
@@ -196,54 +218,33 @@ class _ChatDetailsState extends State<ChatDetails> {
                 ? Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     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(
                         title: Text(
                           I18n.of(context).settings,
@@ -260,19 +261,10 @@ class _ChatDetailsState extends State<ChatDetails> {
                             foregroundColor: Colors.grey,
                             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") &&
                           widget.room.joinRules == JoinRules.public)
@@ -282,21 +274,12 @@ class _ChatDetailsState extends State<ChatDetails> {
                             foregroundColor: Colors.grey,
                             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(
                         child: ListTile(
@@ -415,7 +398,7 @@ class _ChatDetailsState extends State<ChatDetails> {
                               ),
                           ],
                         ),
-                      Divider(thickness: 8),
+                      Divider(thickness: 1),
                       ListTile(
                         title: Text(
                           actualMembersCount > 1

lib/views/settings.dart

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