feat: New settings design

assets/l10n/intl_en.arb

@@ -2617,5 +2617,6 @@
   "messageInfo": "Message info",
   "time": "Time",
   "messageType": "Message Type",
-  "sender": "Sender"
+  "sender": "Sender",
+  "openGallery": "Open gallery"
 }

lib/config/routes.dart

@@ -276,6 +276,11 @@ class AppRoutes {
           widget: const SettingsStyle(),
           buildTransition: _dynamicTransition,
         ),
+        VWidget(
+          path: 'devices',
+          widget: const DevicesSettings(),
+          buildTransition: _dynamicTransition,
+        ),
         VWidget(
           path: 'chat',
           widget: const SettingsChat(),
@@ -293,11 +298,6 @@ class AppRoutes {
           widget: const SettingsAccount(),
           buildTransition: _dynamicTransition,
           stackedRoutes: [
-            VWidget(
-              path: 'devices',
-              widget: const DevicesSettings(),
-              buildTransition: _dynamicTransition,
-            ),
             VWidget(
               path: 'add',
               widget: const HomeserverPicker(),

lib/pages/settings/settings.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
@@ -36,24 +37,30 @@ class SettingsController extends State<Settings> {
       });
 
   void setAvatarAction() async {
-    final action = profile?.avatarUrl == null
-        ? AvatarAction.change
-        : await showConfirmationDialog<AvatarAction>(
-            context: context,
-            title: L10n.of(context).pleaseChoose,
-            actions: [
-              AlertDialogAction(
-                key: AvatarAction.change,
-                label: L10n.of(context).changeYourAvatar,
-                isDefaultAction: true,
-              ),
-              AlertDialogAction(
-                key: AvatarAction.remove,
-                label: L10n.of(context).removeYourAvatar,
-                isDestructiveAction: true,
-              ),
-            ],
-          );
+    final action = await showModalActionSheet<AvatarAction>(
+      context: context,
+      title: L10n.of(context).changeYourAvatar,
+      actions: [
+        SheetAction(
+          key: AvatarAction.camera,
+          label: L10n.of(context).openCamera,
+          isDefaultAction: true,
+          icon: CupertinoIcons.camera,
+        ),
+        SheetAction(
+          key: AvatarAction.file,
+          label: L10n.of(context).openGallery,
+          icon: CupertinoIcons.photo,
+        ),
+        if (profile?.avatarUrl != null)
+          SheetAction(
+            key: AvatarAction.remove,
+            label: L10n.of(context).removeYourAvatar,
+            isDestructiveAction: true,
+            icon: CupertinoIcons.delete,
+          ),
+      ],
+    );
     if (action == null) return;
     final matrix = Matrix.of(context);
     if (action == AvatarAction.remove) {
@@ -69,7 +76,9 @@ class SettingsController extends State<Settings> {
     MatrixFile file;
     if (PlatformInfos.isMobile) {
       final result = await ImagePicker().pickImage(
-          source: ImageSource.gallery,
+          source: action == AvatarAction.camera
+              ? ImageSource.camera
+              : ImageSource.gallery,
           imageQuality: 50,
           maxWidth: 1600,
           maxHeight: 1600);
@@ -183,4 +192,4 @@ class SettingsController extends State<Settings> {
   }
 }
 
-enum AvatarAction { change, remove }
+enum AvatarAction { camera, file, remove }

lib/pages/settings/settings_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -31,7 +32,7 @@ class SettingsView extends StatelessWidget {
               background: ContentBanner(
                 controller.profile?.avatarUrl,
                 onEdit: controller.setAvatarAction,
-                defaultIcon: Icons.account_circle_outlined,
+                defaultIcon: CupertinoIcons.person_circle,
               ),
             ),
           ),
@@ -41,41 +42,46 @@ class SettingsView extends StatelessWidget {
             ListTile(
               title: Text(L10n.of(context).changeTheme),
               onTap: () => VRouter.of(context).to('/settings/style'),
-              leading: const Icon(Icons.format_paint_outlined),
+              leading: const Icon(CupertinoIcons.paintbrush),
             ),
             ListTile(
-              leading: const Icon(Icons.notifications_outlined),
+              leading: const Icon(CupertinoIcons.bell),
               title: Text(L10n.of(context).notifications),
               onTap: () => VRouter.of(context).to('/settings/notifications'),
             ),
             ListTile(
-              leading: const Icon(Icons.chat_bubble_outline),
+              leading: const Icon(CupertinoIcons.device_phone_portrait),
+              title: Text(L10n.of(context).devices),
+              onTap: () => VRouter.of(context).to('/settings/devices'),
+            ),
+            ListTile(
+              leading: const Icon(CupertinoIcons.chat_bubble_2),
               title: Text(L10n.of(context).chat),
               onTap: () => VRouter.of(context).to('/settings/chat'),
             ),
             ListTile(
-              leading: const Icon(Icons.account_box_outlined),
+              leading: const Icon(CupertinoIcons.person),
               title: Text(L10n.of(context).account),
               onTap: () => VRouter.of(context).to('/settings/account'),
             ),
             ListTile(
-              leading: const Icon(Icons.security_outlined),
+              leading: const Icon(CupertinoIcons.shield),
               title: Text(L10n.of(context).security),
               onTap: () => VRouter.of(context).to('/settings/security'),
             ),
             const Divider(thickness: 1),
             ListTile(
-              leading: const Icon(Icons.help_outlined),
+              leading: const Icon(CupertinoIcons.question_circle),
               title: Text(L10n.of(context).help),
               onTap: () => launch(AppConfig.supportUrl),
             ),
             ListTile(
-              leading: const Icon(Icons.privacy_tip_outlined),
+              leading: const Icon(CupertinoIcons.checkmark_shield),
               title: Text(L10n.of(context).privacy),
               onTap: () => launch(AppConfig.privacyUrl),
             ),
             ListTile(
-              leading: const Icon(Icons.link_outlined),
+              leading: const Icon(CupertinoIcons.info_circle),
               title: Text(L10n.of(context).about),
               onTap: () => PlatformInfos.showDialog(context),
             ),

lib/pages/settings_account/settings_account.dart

@@ -6,8 +6,6 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:matrix/matrix.dart';
 import 'package:vrouter/vrouter.dart';
 
-import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/setting_keys.dart';
 import 'package:fluffychat/pages/settings_account/settings_account_view.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 
@@ -54,31 +52,6 @@ class SettingsAccountController extends State<SettingsAccount> {
     }
   }
 
-  void setJitsiInstanceAction() async {
-    const prefix = 'https://';
-    final input = await showTextInputDialog(
-      useRootNavigator: false,
-      context: context,
-      title: L10n.of(context).editJitsiInstance,
-      okLabel: L10n.of(context).ok,
-      cancelLabel: L10n.of(context).cancel,
-      textFields: [
-        DialogTextField(
-          initialText: AppConfig.jitsiInstance.replaceFirst(prefix, ''),
-          prefixText: prefix,
-        ),
-      ],
-    );
-    if (input == null) return;
-    var jitsi = prefix + input.single;
-    if (!jitsi.endsWith('/')) {
-      jitsi += '/';
-    }
-    final matrix = Matrix.of(context);
-    await matrix.store.setItem(SettingKeys.jitsiInstance, jitsi);
-    AppConfig.jitsiInstance = jitsi;
-  }
-
   void logoutAction() async {
     if (await showOkCancelAlertDialog(
           useRootNavigator: false,

lib/pages/settings_account/settings_account_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -22,13 +23,6 @@ class SettingsAccountView extends StatelessWidget {
         withScrolling: true,
         child: Column(
           children: [
-            ListTile(
-              trailing: const Icon(Icons.add_box_outlined),
-              title: Text(L10n.of(context).addAccount),
-              subtitle: Text(L10n.of(context).enableMultiAccounts),
-              onTap: controller.addAccountAction,
-            ),
-            const Divider(height: 1),
             ListTile(
               title: Text(L10n.of(context).yourUserId),
               subtitle: Text(Matrix.of(context).client.userID),
@@ -39,32 +33,27 @@ class SettingsAccountView extends StatelessWidget {
               ),
             ),
             ListTile(
-              trailing: const Icon(Icons.edit_outlined),
+              trailing: const Icon(CupertinoIcons.pen),
               title: Text(L10n.of(context).editDisplayname),
               subtitle: Text(controller.profile?.displayName ??
                   Matrix.of(context).client.userID.localpart),
               onTap: controller.setDisplaynameAction,
             ),
+            const Divider(height: 1),
             ListTile(
-              trailing: const Icon(Icons.phone_outlined),
-              title: Text(L10n.of(context).editJitsiInstance),
-              subtitle: Text(AppConfig.jitsiInstance),
-              onTap: controller.setJitsiInstanceAction,
-            ),
-            ListTile(
-              trailing: const Icon(Icons.devices_other_outlined),
-              title: Text(L10n.of(context).devices),
-              onTap: () => VRouter.of(context).to('devices'),
+              trailing: const Icon(CupertinoIcons.add_circled),
+              title: Text(L10n.of(context).addAccount),
+              subtitle: Text(L10n.of(context).enableMultiAccounts),
+              onTap: controller.addAccountAction,
             ),
-            const Divider(height: 1),
             ListTile(
-              trailing: const Icon(Icons.exit_to_app_outlined),
+              trailing: const Icon(CupertinoIcons.arrow_right_square),
               title: Text(L10n.of(context).logout),
               onTap: controller.logoutAction,
             ),
             const Divider(height: 1),
             ListTile(
-              trailing: const Icon(Icons.delete_forever_outlined),
+              trailing: const Icon(CupertinoIcons.delete_solid),
               title: Text(
                 L10n.of(context).deleteAccount,
                 style: const TextStyle(color: Colors.red),

lib/pages/settings_chat/settings_chat.dart

@@ -1,5 +1,11 @@
 import 'package:flutter/material.dart';
 
+import 'package:adaptive_dialog/adaptive_dialog.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/setting_keys.dart';
+import 'package:fluffychat/widgets/matrix.dart';
 import 'settings_chat_view.dart';
 
 class SettingsChat extends StatefulWidget {
@@ -10,6 +16,31 @@ class SettingsChat extends StatefulWidget {
 }
 
 class SettingsChatController extends State<SettingsChat> {
+  void setJitsiInstanceAction() async {
+    const prefix = 'https://';
+    final input = await showTextInputDialog(
+      useRootNavigator: false,
+      context: context,
+      title: L10n.of(context).editJitsiInstance,
+      okLabel: L10n.of(context).ok,
+      cancelLabel: L10n.of(context).cancel,
+      textFields: [
+        DialogTextField(
+          initialText: AppConfig.jitsiInstance.replaceFirst(prefix, ''),
+          prefixText: prefix,
+        ),
+      ],
+    );
+    if (input == null) return;
+    var jitsi = prefix + input.single;
+    if (!jitsi.endsWith('/')) {
+      jitsi += '/';
+    }
+    final matrix = Matrix.of(context);
+    await matrix.store.setItem(SettingKeys.jitsiInstance, jitsi);
+    AppConfig.jitsiInstance = jitsi;
+  }
+
   @override
   Widget build(BuildContext context) => SettingsChatView(this);
 }

lib/pages/settings_chat/settings_chat_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -22,12 +23,6 @@ class SettingsChatView extends StatelessWidget {
         withScrolling: true,
         child: Column(
           children: [
-            ListTile(
-              title: Text(L10n.of(context).emoteSettings),
-              onTap: () => VRouter.of(context).to('emotes'),
-              trailing: const Icon(Icons.insert_emoticon_outlined),
-            ),
-            const Divider(height: 1),
             SettingsSwitchListTile(
               title: L10n.of(context).renderRichContent,
               onChanged: (b) => AppConfig.renderHtml = b,
@@ -59,6 +54,24 @@ class SettingsChatView extends StatelessWidget {
                 storeKey: SettingKeys.sendOnEnter,
                 defaultValue: AppConfig.sendOnEnter,
               ),
+            const Divider(height: 1),
+            ListTile(
+              title: Text(L10n.of(context).emoteSettings),
+              onTap: () => VRouter.of(context).to('emotes'),
+              trailing: const Padding(
+                padding: EdgeInsets.all(16.0),
+                child: Icon(Icons.insert_emoticon_outlined),
+              ),
+            ),
+            ListTile(
+              trailing: const Padding(
+                padding: EdgeInsets.all(16.0),
+                child: Icon(CupertinoIcons.phone),
+              ),
+              title: Text(L10n.of(context).editJitsiInstance),
+              subtitle: Text(AppConfig.jitsiInstance),
+              onTap: controller.setJitsiInstanceAction,
+            ),
           ],
         ),
       ),

lib/pages/settings_emotes/settings_emotes_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -28,7 +29,8 @@ class EmotesSettingsView extends StatelessWidget {
       floatingActionButton: controller.showSave
           ? FloatingActionButton(
               onPressed: controller.saveAction,
-              child: const Icon(Icons.save_outlined, color: Colors.white),
+              child:
+                  const Icon(CupertinoIcons.floppy_disk, color: Colors.white),
             )
           : null,
       body: MaxWidthBody(
@@ -76,7 +78,7 @@ class EmotesSettingsView extends StatelessWidget {
                   trailing: InkWell(
                     onTap: controller.addImageAction,
                     child: const Icon(
-                      Icons.add_outlined,
+                      CupertinoIcons.add,
                       color: Colors.green,
                       size: 32.0,
                     ),
@@ -196,7 +198,7 @@ class EmotesSettingsView extends StatelessWidget {
                                   onTap: () =>
                                       controller.removeImageAction(imageCode),
                                   child: const Icon(
-                                    Icons.delete_forever_outlined,
+                                    CupertinoIcons.delete,
                                     color: Colors.red,
                                     size: 32.0,
                                   ),

lib/pages/settings_security/settings_security_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
@@ -23,19 +24,19 @@ class SettingsSecurityView extends StatelessWidget {
         child: Column(
           children: [
             ListTile(
-              trailing: const Icon(Icons.block_outlined),
+              trailing: const Icon(CupertinoIcons.xmark_shield),
               title: Text(L10n.of(context).ignoredUsers),
               onTap: () => VRouter.of(context).to('ignorelist'),
             ),
             ListTile(
-              trailing: const Icon(Icons.security_outlined),
+              trailing: const Icon(CupertinoIcons.padlock),
               title: Text(
                 L10n.of(context).changePassword,
               ),
               onTap: controller.changePasswordAccountAction,
             ),
             ListTile(
-              trailing: const Icon(Icons.email_outlined),
+              trailing: const Icon(CupertinoIcons.mail),
               title: Text(L10n.of(context).passwordRecovery),
               onTap: () => VRouter.of(context).to('3pid'),
             ),

lib/pages/settings_style/settings_style_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:adaptive_theme/adaptive_theme.dart';
@@ -92,7 +93,7 @@ class SettingsStyleView extends StatelessWidget {
                   fit: BoxFit.cover,
                 ),
                 trailing: const Icon(
-                  Icons.delete_forever_outlined,
+                  CupertinoIcons.delete,
                   color: Colors.red,
                 ),
                 onTap: controller.deleteWallpaperAction,
@@ -100,7 +101,7 @@ class SettingsStyleView extends StatelessWidget {
             Builder(builder: (context) {
               return ListTile(
                 title: Text(L10n.of(context).changeWallpaper),
-                trailing: const Icon(Icons.wallpaper_outlined),
+                trailing: const Icon(CupertinoIcons.photo),
                 onTap: controller.setWallpaperAction,
               );
             }),

lib/widgets/content_banner.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -17,7 +18,7 @@ class ContentBanner extends StatelessWidget {
 
   const ContentBanner(this.mxContent,
       {this.height = 400,
-      this.defaultIcon = Icons.people_outline,
+      this.defaultIcon = CupertinoIcons.group,
       this.loading = false,
       this.onEdit,
       this.client,
@@ -71,7 +72,7 @@ class ContentBanner extends StatelessWidget {
                 onPressed: onEdit,
                 backgroundColor: Theme.of(context).backgroundColor,
                 foregroundColor: Theme.of(context).textTheme.bodyText1.color,
-                child: const Icon(Icons.camera_alt_outlined),
+                child: const Icon(CupertinoIcons.camera),
               ),
             ),
         ],