feat: New settings design

This commit is contained in:
Krille Fear 2021-11-13 21:21:13 +01:00
parent cc00032c10
commit 15ccd043d9
12 changed files with 126 additions and 99 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -6,8 +6,6 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:vrouter/vrouter.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/pages/settings_account/settings_account_view.dart';
import 'package:fluffychat/widgets/matrix.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 { void logoutAction() async {
if (await showOkCancelAlertDialog( if (await showOkCancelAlertDialog(
useRootNavigator: false, useRootNavigator: false,

View File

@ -1,3 +1,4 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
@ -22,13 +23,6 @@ class SettingsAccountView extends StatelessWidget {
withScrolling: true, withScrolling: true,
child: Column( child: Column(
children: [ 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( ListTile(
title: Text(L10n.of(context).yourUserId), title: Text(L10n.of(context).yourUserId),
subtitle: Text(Matrix.of(context).client.userID), subtitle: Text(Matrix.of(context).client.userID),
@ -39,32 +33,27 @@ class SettingsAccountView extends StatelessWidget {
), ),
), ),
ListTile( ListTile(
trailing: const Icon(Icons.edit_outlined), trailing: const Icon(CupertinoIcons.pen),
title: Text(L10n.of(context).editDisplayname), title: Text(L10n.of(context).editDisplayname),
subtitle: Text(controller.profile?.displayName ?? subtitle: Text(controller.profile?.displayName ??
Matrix.of(context).client.userID.localpart), Matrix.of(context).client.userID.localpart),
onTap: controller.setDisplaynameAction, 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), const Divider(height: 1),
ListTile( 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), title: Text(L10n.of(context).logout),
onTap: controller.logoutAction, onTap: controller.logoutAction,
), ),
const Divider(height: 1), const Divider(height: 1),
ListTile( ListTile(
trailing: const Icon(Icons.delete_forever_outlined), trailing: const Icon(CupertinoIcons.delete_solid),
title: Text( title: Text(
L10n.of(context).deleteAccount, L10n.of(context).deleteAccount,
style: const TextStyle(color: Colors.red), style: const TextStyle(color: Colors.red),

View File

@ -1,5 +1,11 @@
import 'package:flutter/material.dart'; 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'; import 'settings_chat_view.dart';
class SettingsChat extends StatefulWidget { class SettingsChat extends StatefulWidget {
@ -10,6 +16,31 @@ class SettingsChat extends StatefulWidget {
} }
class SettingsChatController extends State<SettingsChat> { 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 @override
Widget build(BuildContext context) => SettingsChatView(this); Widget build(BuildContext context) => SettingsChatView(this);
} }

View File

@ -1,3 +1,4 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
@ -22,12 +23,6 @@ class SettingsChatView extends StatelessWidget {
withScrolling: true, withScrolling: true,
child: Column( child: Column(
children: [ 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( SettingsSwitchListTile(
title: L10n.of(context).renderRichContent, title: L10n.of(context).renderRichContent,
onChanged: (b) => AppConfig.renderHtml = b, onChanged: (b) => AppConfig.renderHtml = b,
@ -59,6 +54,24 @@ class SettingsChatView extends StatelessWidget {
storeKey: SettingKeys.sendOnEnter, storeKey: SettingKeys.sendOnEnter,
defaultValue: AppConfig.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,
),
], ],
), ),
), ),

View File

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

View File

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

View File

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

View File

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