Nicer Settings UX

This commit is contained in:
Christian Pauly 2020-02-16 09:56:17 +01:00
parent 740a9a2a64
commit 617a09c05d
4 changed files with 101 additions and 45 deletions

BIN
assets/kofi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -6,6 +6,54 @@ class SimpleDialogs {
const SimpleDialogs(this.context);
Future<String> enterText({
String titleText,
String confirmText,
String cancelText,
String hintText,
String labelText,
bool multiLine = false,
}) async {
final TextEditingController controller = TextEditingController();
String input;
await showDialog(
context: context,
builder: (c) => AlertDialog(
title: Text(I18n.of(context).enterAUsername ?? titleText),
content: TextField(
controller: controller,
autofocus: true,
onSubmitted: (s) {
input = s;
Navigator.of(context).pop();
},
decoration: InputDecoration(
hintText: hintText,
labelText: labelText,
border: OutlineInputBorder(),
),
),
actions: <Widget>[
FlatButton(
child: Text(cancelText ?? I18n.of(context).close.toUpperCase(),
style: TextStyle(color: Colors.blueGrey)),
onPressed: () => Navigator.of(context).pop(),
),
FlatButton(
child: Text(
confirmText ?? I18n.of(context).confirm.toUpperCase(),
),
onPressed: () {
input = controller.text;
Navigator.of(context).pop();
},
),
],
),
);
return input;
}
Future<bool> askConfirmation({
String titleText,
String confirmText,

View file

@ -51,6 +51,10 @@ class I18n {
args: [username],
);
String get account => Intl.message("Account");
String get accountInformations => Intl.message("Account informations");
String activatedEndToEndEncryption(String username) => Intl.message(
"$username activated end to end encryption",
name: "activatedEndToEndEncryption",

View file

@ -3,6 +3,7 @@ import 'dart:io';
import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/components/adaptive_page_layout.dart';
import 'package:fluffychat/components/content_banner.dart';
import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
import 'package:fluffychat/components/matrix.dart';
import 'package:fluffychat/i18n/i18n.dart';
import 'package:fluffychat/utils/app_route.dart';
@ -35,6 +36,9 @@ class _SettingsState extends State<Settings> {
Future<dynamic> profileFuture;
dynamic profile;
void logoutAction(BuildContext context) async {
if (await SimpleDialogs(context).askConfirmation() == false) {
return;
}
MatrixState matrix = Matrix.of(context);
await matrix.tryRequestWithLoadingDialog(matrix.client.logout());
matrix.clean();
@ -42,18 +46,19 @@ class _SettingsState extends State<Settings> {
AppRoute.defaultRoute(context, SignUp()), (r) => false);
}
void setDisplaynameAction(BuildContext context, String displayname) async {
void setDisplaynameAction(BuildContext context) async {
final String displayname = await SimpleDialogs(context).enterText(
titleText: I18n.of(context).editDisplayname,
hintText:
profile?.displayname ?? Matrix.of(context).client.userID.localpart,
labelText: I18n.of(context).enterAUsername,
);
if (displayname == null) return;
final MatrixState matrix = Matrix.of(context);
final Map<String, dynamic> success =
await matrix.tryRequestWithLoadingDialog(
final success = await matrix.tryRequestWithLoadingDialog(
matrix.client.setDisplayname(displayname),
);
if (success != null && success.isEmpty) {
Toast.show(
I18n.of(context).displaynameHasBeenChanged,
context,
duration: Toast.LENGTH_LONG,
);
if (success != false) {
setState(() {
profileFuture = null;
profile = null;
@ -110,20 +115,26 @@ class _SettingsState extends State<Settings> {
onEdit: kIsWeb ? null : () => setAvatarAction(context),
),
ListTile(
leading: Icon(Icons.edit),
title: TextField(
readOnly: profile == null,
textInputAction: TextInputAction.done,
onSubmitted: (s) => setDisplaynameAction(context, s),
decoration: InputDecoration(
border: InputBorder.none,
labelText: I18n.of(context).editDisplayname,
labelStyle: TextStyle(color: Colors.black),
hintText: (profile?.displayname ?? ""),
title: Text(
I18n.of(context).account,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
),
Divider(thickness: 8),
ListTile(
trailing: Icon(Icons.edit),
title: Text(I18n.of(context).editDisplayname),
subtitle: Text(profile?.displayname ?? client.userID.localpart),
onTap: () => setDisplaynameAction(context),
),
ListTile(
trailing: Icon(Icons.exit_to_app),
title: Text(I18n.of(context).logout),
onTap: () => logoutAction(context),
),
Divider(thickness: 1),
ListTile(
title: Text(
I18n.of(context).about,
@ -134,19 +145,17 @@ class _SettingsState extends State<Settings> {
),
),
ListTile(
leading: Icon(Icons.info),
title: Text(I18n.of(context).fluffychat),
onTap: () => Navigator.of(context).push(
AppRoute.defaultRoute(
context,
AppInfoView(),
),
title: Container(
alignment: Alignment.centerLeft,
child: Image.asset("assets/kofi.png", width: 200),
),
onTap: () => launch("https://ko-fi.com/V7V315112"),
),
ListTile(
leading: Icon(Icons.sentiment_very_satisfied),
title: Text(I18n.of(context).donate),
onTap: () => launch("https://ko-fi.com/krille"),
leading: Icon(Icons.donut_large),
title: Text("Liberapay " + I18n.of(context).donate),
onTap: () =>
launch("https://liberapay.com/KrilleChritzelius/donate"),
),
ListTile(
leading: Icon(Icons.help),
@ -154,6 +163,16 @@ class _SettingsState extends State<Settings> {
onTap: () => launch(
"https://gitlab.com/ChristianPauly/fluffychat-flutter/issues"),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text(I18n.of(context).accountInformations),
onTap: () => Navigator.of(context).push(
AppRoute.defaultRoute(
context,
AppInfoView(),
),
),
),
ListTile(
leading: Icon(Icons.list),
title: Text(I18n.of(context).changelog),
@ -172,21 +191,6 @@ class _SettingsState extends State<Settings> {
onTap: () =>
launch("https://gitlab.com/ChristianPauly/fluffychat-flutter"),
),
Divider(thickness: 8),
ListTile(
title: Text(
I18n.of(context).logout,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text(I18n.of(context).logout),
onTap: () => logoutAction(context),
),
],
),
);