2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: New settings design

Browse source
This commit is contained in:
Krille 2023-02-04 18:32:56 +01:00
commit 5d53a37e2e
10 changed files with 401 additions and 458 deletions
Download patch file Download diff file Expand all files Collapse all files

64
lib/pages/settings/settings.dart
View file

@ -22,16 +22,61 @@ class Settings extends StatefulWidget {
}
class SettingsController extends State<Settings> {
Future<dynamic>? profileFuture;
Profile? profile;
Future<Profile>? profileFuture;
bool profileUpdated = false;
void updateProfile() => setState(() {
profileUpdated = true;
profile = profileFuture = null;
profileFuture = null;
});
void setDisplaynameAction() async {
final profile = await profileFuture;
final input = await showTextInputDialog(
useRootNavigator: false,
context: context,
title: L10n.of(context)!.editDisplayname,
okLabel: L10n.of(context)!.ok,
cancelLabel: L10n.of(context)!.cancel,
textFields: [
DialogTextField(
initialText: profile?.displayName ??
Matrix.of(context).client.userID!.localpart,
)
],
);
if (input == null) return;
final matrix = Matrix.of(context);
final success = await showFutureLoadingDialog(
context: context,
future: () =>
matrix.client.setDisplayName(matrix.client.userID!, input.single),
);
if (success.error == null) {
updateProfile();
}
}
void logoutAction() async {
if (await showOkCancelAlertDialog(
useRootNavigator: false,
context: context,
title: L10n.of(context)!.areYouSureYouWantToLogout,
okLabel: L10n.of(context)!.yes,
cancelLabel: L10n.of(context)!.cancel,
) ==
OkCancelResult.cancel) {
return;
}
final matrix = Matrix.of(context);
await showFutureLoadingDialog(
context: context,
future: () => matrix.client.logout(),
);
}
void setAvatarAction() async {
final profile = await profileFuture;
final actions = [
if (PlatformInfos.isMobile)
SheetAction(
@ -131,9 +176,9 @@ class SettingsController extends State<Settings> {
}
bool? crossSigningCached;
bool showChatBackupBanner = false;
bool? showChatBackupBanner;
void firstRunBootstrapAction() async {
void firstRunBootstrapAction([_]) async {
await BootstrapDialog(
client: Matrix.of(context).client,
).show(context);
@ -143,16 +188,11 @@ class SettingsController extends State<Settings> {
@override
Widget build(BuildContext context) {
final client = Matrix.of(context).client;
profileFuture ??= client
.getProfileFromUserId(
profileFuture ??= client.getProfileFromUserId(
client.userID!,
cache: !profileUpdated,
getFromRooms: !profileUpdated,
)
.then((p) {
if (mounted) setState(() => profile = p);
return p;
});
);
return SettingsView(this);
}
}

265
lib/pages/settings/settings_view.dart
View file

@ -1,13 +1,14 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';
import 'package:url_launcher/url_launcher_string.dart';
import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/utils/platform_infos.dart';
import '../../config/themes.dart';
import '../../widgets/content_banner.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'settings.dart';
class SettingsView extends StatelessWidget {
@ -18,95 +19,181 @@ class SettingsView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) =>
<Widget>[
SliverAppBar(
expandedHeight: 300.0,
floating: true,
pinned: true,
title: Text(L10n.of(context)!.settings),
backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
flexibleSpace: FlexibleSpaceBar(
background: ContentBanner(
mxContent: controller.profile?.avatarUrl,
onEdit: controller.setAvatarAction,
defaultIcon: Icons.account_circle_outlined,
),
),
appBar: AppBar(
title: Text(L10n.of(context)!.settings),
actions: [
TextButton.icon(
onPressed: controller.logoutAction,
label: Text(L10n.of(context)!.logout),
icon: const Icon(Icons.logout_outlined),
),
],
body: ListTileTheme(
iconColor: Theme.of(context).colorScheme.onBackground,
child: ListView(
key: const Key('SettingsListViewContent'),
children: <Widget>[
AnimatedContainer(
height: controller.showChatBackupBanner ? 54 : 0,
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
child: ListTile(
leading: const Icon(Icons.backup_outlined),
title: Text(L10n.of(context)!.enableAutoBackups),
trailing: const Icon(
Icons.warning_outlined,
color: Colors.orange,
),
onTap: controller.firstRunBootstrapAction,
),
),
const Divider(thickness: 1),
ListTile(
leading: const Icon(Icons.format_paint_outlined),
title: Text(L10n.of(context)!.changeTheme),
onTap: () => VRouter.of(context).to('/settings/style'),
),
const Divider(thickness: 1),
ListTile(
leading: const Icon(Icons.notifications_outlined),
title: Text(L10n.of(context)!.notifications),
onTap: () => VRouter.of(context).to('/settings/notifications'),
),
ListTile(
leading: const Icon(Icons.devices_outlined),
title: Text(L10n.of(context)!.devices),
onTap: () => VRouter.of(context).to('/settings/devices'),
),
ListTile(
leading: const Icon(Icons.chat_bubble_outline_outlined),
title: Text(L10n.of(context)!.chat),
onTap: () => VRouter.of(context).to('/settings/chat'),
),
ListTile(
leading: const Icon(Icons.account_circle_outlined),
title: Text(L10n.of(context)!.account),
onTap: () => VRouter.of(context).to('/settings/account'),
),
ListTile(
leading: const Icon(Icons.shield_outlined),
title: Text(L10n.of(context)!.security),
onTap: () => VRouter.of(context).to('/settings/security'),
),
const Divider(thickness: 1),
ListTile(
leading: const Icon(Icons.help_outline_outlined),
title: Text(L10n.of(context)!.help),
onTap: () => launchUrlString(AppConfig.supportUrl),
),
ListTile(
leading: const Icon(Icons.shield_sharp),
title: Text(L10n.of(context)!.privacy),
onTap: () => launchUrlString(AppConfig.privacyUrl),
),
ListTile(
leading: const Icon(Icons.info_outline_rounded),
title: Text(L10n.of(context)!.about),
onTap: () => PlatformInfos.showDialog(context),
),
],
),
),
body: ListTileTheme(
iconColor: Theme.of(context).colorScheme.onBackground,
child: ListView(
key: const Key('SettingsListViewContent'),
children: <Widget>[
FutureBuilder<Profile>(
future: controller.profileFuture,
builder: (context, snapshot) {
final profile = snapshot.data;
final mxid = Matrix.of(context).client.userID ??
L10n.of(context)!.user;
final displayname =
profile?.displayName ?? mxid.localpart ?? mxid;
return Row(
children: [
Padding(
padding: const EdgeInsets.all(32.0),
child: Stack(
children: [
Material(
elevation: Theme.of(context)
.appBarTheme
.scrolledUnderElevation ??
4,
shadowColor:
Theme.of(context).appBarTheme.shadowColor,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Theme.of(context).dividerColor,
),
borderRadius: BorderRadius.circular(
Avatar.defaultSize * 2.5),
),
child: Hero(
tag: 'profilesettings',
child: Avatar(
mxContent: profile?.avatarUrl,
name: displayname,
size: Avatar.defaultSize * 2.5,
fontSize: 18 * 2.5,
),
),
),
if (profile != null)
Positioned(
bottom: 0,
right: 0,
child: FloatingActionButton.small(
onPressed: controller.setAvatarAction,
heroTag: null,
child: const Icon(Icons.camera_alt_outlined),
),
),
],
),
),
Expanded(
child: ListTile(
contentPadding: EdgeInsets.zero,
title: Align(
alignment: Alignment.centerLeft,
child: TextButton.icon(
onPressed: controller.setDisplaynameAction,
icon: const Icon(
Icons.edit_outlined,
size: 18,
),
style: TextButton.styleFrom(
foregroundColor:
Theme.of(context).colorScheme.onBackground,
),
label: Text(
displayname,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 18),
),
),
),
subtitle: Align(
alignment: Alignment.centerLeft,
child: TextButton.icon(
onPressed: () {},
icon: const Icon(
Icons.copy_outlined,
size: 14,
),
style: TextButton.styleFrom(
foregroundColor:
Theme.of(context).colorScheme.secondary,
),
label: Text(
mxid,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 12),
),
),
),
),
),
],
);
}),
const Divider(thickness: 1),
SwitchListTile.adaptive(
controlAffinity: ListTileControlAffinity.trailing,
value: controller.showChatBackupBanner == false,
secondary: const Icon(Icons.backup_outlined),
title: Text(L10n.of(context)!.chatBackup),
onChanged: controller.showChatBackupBanner != false
? controller.firstRunBootstrapAction
: null,
),
const Divider(thickness: 1),
ListTile(
leading: const Icon(Icons.format_paint_outlined),
title: Text(L10n.of(context)!.changeTheme),
onTap: () => VRouter.of(context).to('/settings/style'),
trailing: const Icon(Icons.chevron_right_outlined),
),
ListTile(
leading: const Icon(Icons.notifications_outlined),
title: Text(L10n.of(context)!.notifications),
onTap: () => VRouter.of(context).to('/settings/notifications'),
trailing: const Icon(Icons.chevron_right_outlined),
),
ListTile(
leading: const Icon(Icons.devices_outlined),
title: Text(L10n.of(context)!.devices),
onTap: () => VRouter.of(context).to('/settings/devices'),
trailing: const Icon(Icons.chevron_right_outlined),
),
ListTile(
leading: const Icon(Icons.chat_bubble_outline_outlined),
title: Text(L10n.of(context)!.chat),
onTap: () => VRouter.of(context).to('/settings/chat'),
trailing: const Icon(Icons.chevron_right_outlined),
),
ListTile(
leading: const Icon(Icons.shield_outlined),
title: Text(L10n.of(context)!.security),
onTap: () => VRouter.of(context).to('/settings/security'),
trailing: const Icon(Icons.chevron_right_outlined),
),
const Divider(thickness: 1),
ListTile(
leading: const Icon(Icons.help_outline_outlined),
title: Text(L10n.of(context)!.help),
onTap: () => launchUrlString(AppConfig.supportUrl),
trailing: const Icon(Icons.open_in_new_outlined),
),
ListTile(
leading: const Icon(Icons.shield_sharp),
title: Text(L10n.of(context)!.privacy),
onTap: () => launchUrlString(AppConfig.privacyUrl),
trailing: const Icon(Icons.open_in_new_outlined),
),
ListTile(
leading: const Icon(Icons.info_outline_rounded),
title: Text(L10n.of(context)!.about),
onTap: () => PlatformInfos.showDialog(context),
trailing: const Icon(Icons.chevron_right_outlined),
),
],
),
),
);