From 15ccd043d9fdc733b8a283431ac123696aa45e25 Mon Sep 17 00:00:00 2001 From: Krille Fear Date: Sat, 13 Nov 2021 21:21:13 +0100 Subject: [PATCH] feat: New settings design --- assets/l10n/intl_en.arb | 3 +- lib/config/routes.dart | 10 ++-- lib/pages/settings/settings.dart | 49 +++++++++++-------- lib/pages/settings/settings_view.dart | 24 +++++---- .../settings_account/settings_account.dart | 27 ---------- .../settings_account_view.dart | 31 ++++-------- lib/pages/settings_chat/settings_chat.dart | 31 ++++++++++++ .../settings_chat/settings_chat_view.dart | 25 +++++++--- .../settings_emotes/settings_emotes_view.dart | 8 +-- .../settings_security_view.dart | 7 +-- .../settings_style/settings_style_view.dart | 5 +- lib/widgets/content_banner.dart | 5 +- 12 files changed, 126 insertions(+), 99 deletions(-) diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index fc440c69..60024907 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -2617,5 +2617,6 @@ "messageInfo": "Message info", "time": "Time", "messageType": "Message Type", - "sender": "Sender" + "sender": "Sender", + "openGallery": "Open gallery" } diff --git a/lib/config/routes.dart b/lib/config/routes.dart index 2512ffac..c191f563 100644 --- a/lib/config/routes.dart +++ b/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(), diff --git a/lib/pages/settings/settings.dart b/lib/pages/settings/settings.dart index 2c39568d..a055fb80 100644 --- a/lib/pages/settings/settings.dart +++ b/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 { }); void setAvatarAction() async { - final action = profile?.avatarUrl == null - ? AvatarAction.change - : await showConfirmationDialog( - 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( + 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 { 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 { } } -enum AvatarAction { change, remove } +enum AvatarAction { camera, file, remove } diff --git a/lib/pages/settings/settings_view.dart b/lib/pages/settings/settings_view.dart index 57688e51..cbeadb87 100644 --- a/lib/pages/settings/settings_view.dart +++ b/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), ), diff --git a/lib/pages/settings_account/settings_account.dart b/lib/pages/settings_account/settings_account.dart index 19b9e878..ea32f399 100644 --- a/lib/pages/settings_account/settings_account.dart +++ b/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 { } } - 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, diff --git a/lib/pages/settings_account/settings_account_view.dart b/lib/pages/settings_account/settings_account_view.dart index f5b10ea2..72da242a 100644 --- a/lib/pages/settings_account/settings_account_view.dart +++ b/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, ), - 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'), - ), const Divider(height: 1), ListTile( - trailing: const Icon(Icons.exit_to_app_outlined), + trailing: const Icon(CupertinoIcons.add_circled), + title: Text(L10n.of(context).addAccount), + subtitle: Text(L10n.of(context).enableMultiAccounts), + onTap: controller.addAccountAction, + ), + ListTile( + 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), diff --git a/lib/pages/settings_chat/settings_chat.dart b/lib/pages/settings_chat/settings_chat.dart index 78fc14ca..68ff5c7f 100644 --- a/lib/pages/settings_chat/settings_chat.dart +++ b/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 { + 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); } diff --git a/lib/pages/settings_chat/settings_chat_view.dart b/lib/pages/settings_chat/settings_chat_view.dart index bc64604c..f07610c3 100644 --- a/lib/pages/settings_chat/settings_chat_view.dart +++ b/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, + ), ], ), ), diff --git a/lib/pages/settings_emotes/settings_emotes_view.dart b/lib/pages/settings_emotes/settings_emotes_view.dart index 7480c872..d5777738 100644 --- a/lib/pages/settings_emotes/settings_emotes_view.dart +++ b/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, ), diff --git a/lib/pages/settings_security/settings_security_view.dart b/lib/pages/settings_security/settings_security_view.dart index 3730a3ba..94eeed4a 100644 --- a/lib/pages/settings_security/settings_security_view.dart +++ b/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'), ), diff --git a/lib/pages/settings_style/settings_style_view.dart b/lib/pages/settings_style/settings_style_view.dart index 3a09e867..892ed416 100644 --- a/lib/pages/settings_style/settings_style_view.dart +++ b/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, ); }), diff --git a/lib/widgets/content_banner.dart b/lib/widgets/content_banner.dart index c1878369..1ddd628b 100644 --- a/lib/widgets/content_banner.dart +++ b/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), ), ), ],