chore: Adjust onboarding design

This commit is contained in:
Christian Pauly 2022-08-05 21:04:37 +02:00
parent 9784f1cc0a
commit 45393700ec
6 changed files with 155 additions and 179 deletions

View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluffychat/utils/platform_infos.dart';
import 'app_config.dart';
@ -59,7 +58,6 @@ abstract class FluffyThemes {
filled: true,
),
appBarTheme: AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle.dark,
surfaceTintColor: Colors.white,
shadowColor: Colors.black.withAlpha(64),
),
@ -92,6 +90,10 @@ abstract class FluffyThemes {
filled: true,
),
dividerColor: Colors.blueGrey.shade900,
appBarTheme: AppBarTheme(
surfaceTintColor: Colors.black,
shadowColor: Colors.black.withAlpha(64),
),
);
static Color blackWhiteColor(BuildContext context) =>

View file

@ -1,9 +1,9 @@
import 'package:fluffychat/config/app_config.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pages/chat_list/chat_list.dart';
import 'package:fluffychat/pages/chat_list/client_chooser_button.dart';
import 'package:fluffychat/widgets/matrix.dart';

View file

@ -33,7 +33,7 @@ class ConnectPageView extends StatelessWidget {
children: [
if (Matrix.of(context).loginRegistrationSupported ?? false) ...[
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: Center(
child: Stack(
children: [
@ -85,7 +85,7 @@ class ConnectPageView extends StatelessWidget {
),
),
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextField(
controller: controller.usernameController,
onSubmitted: (_) => controller.signUp(),
@ -101,7 +101,7 @@ class ConnectPageView extends StatelessWidget {
),
),
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: Hero(
tag: 'loginButton',
child: ElevatedButton(
@ -116,7 +116,7 @@ class ConnectPageView extends StatelessWidget {
children: [
const Expanded(child: Divider(color: Colors.white)),
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: Text(
L10n.of(context)!.or,
style: const TextStyle(color: Colors.white),
@ -138,7 +138,7 @@ class ConnectPageView extends StatelessWidget {
: Center(
child: identityProviders.length == 1
? Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: ElevatedButton(
onPressed: () => controller
.ssoLoginAction(identityProviders.single.id!),
@ -160,7 +160,7 @@ class ConnectPageView extends StatelessWidget {
),
if (controller.supportsLogin)
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: Hero(
tag: 'signinButton',
child: ElevatedButton(

View file

@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/utils/platform_infos.dart';
@ -18,177 +17,152 @@ class HomeserverPickerView extends StatelessWidget {
Widget build(BuildContext context) {
final benchmarkResults = controller.benchmarkResults;
return LoginScaffold(
appBar: VRouter.of(context).path == '/home'
? null
: AppBar(title: Text(L10n.of(context)!.addAccount)),
body: SafeArea(
child: Column(
children: [
// display a prominent banner to import session for TOR browser
// users. This feature is just some UX sugar as TOR users are
// usually forced to logout as TOR browser is non-persistent
AnimatedContainer(
height: controller.isTorBrowser ? 64 : 0,
duration: const Duration(milliseconds: 300),
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: controller.restoreBackup,
tooltip: L10n.of(context)!.hydrate,
icon: const Icon(
Icons.restore_outlined,
color: Colors.white,
),
),
IconButton(
tooltip: L10n.of(context)!.privacy,
onPressed: () => launch(AppConfig.privacyUrl),
icon: const Icon(
Icons.shield_outlined,
color: Colors.white,
),
),
IconButton(
tooltip: L10n.of(context)!.about,
onPressed: () => PlatformInfos.showDialog(context),
icon: const Icon(
Icons.info_outlined,
color: Colors.white,
),
),
],
),
body: Column(
children: [
// display a prominent banner to import session for TOR browser
// users. This feature is just some UX sugar as TOR users are
// usually forced to logout as TOR browser is non-persistent
AnimatedContainer(
height: controller.isTorBrowser ? 64 : 0,
duration: const Duration(milliseconds: 300),
clipBehavior: Clip.hardEdge,
curve: Curves.bounceInOut,
decoration: const BoxDecoration(),
child: Material(
clipBehavior: Clip.hardEdge,
curve: Curves.bounceInOut,
decoration: const BoxDecoration(),
child: Material(
clipBehavior: Clip.hardEdge,
borderRadius:
const BorderRadius.vertical(bottom: Radius.circular(8)),
color: Theme.of(context).colorScheme.surface,
child: ListTile(
leading: const Icon(Icons.vpn_key),
title: Text(L10n.of(context)!.hydrateTor),
subtitle: Text(L10n.of(context)!.hydrateTorLong),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: controller.restoreBackup,
),
borderRadius:
const BorderRadius.vertical(bottom: Radius.circular(8)),
color: Theme.of(context).colorScheme.surface,
child: ListTile(
leading: const Icon(Icons.vpn_key),
title: Text(L10n.of(context)!.hydrateTor),
subtitle: Text(L10n.of(context)!.hydrateTorLong),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: controller.restoreBackup,
),
),
Expanded(
child: ListView(
children: [
Container(
alignment: Alignment.center,
height: 256,
child: Image.asset('assets/info-logo.png'),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
focusNode: controller.homeserverFocusNode,
controller: controller.homeserverController,
onChanged: controller.onChanged,
decoration: InputDecoration(
prefixText: '${L10n.of(context)!.homeserver}: ',
hintText: L10n.of(context)!.enterYourHomeserver,
suffixIcon: const Icon(Icons.search),
errorText: controller.error,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
),
readOnly: !AppConfig.allowOtherHomeservers,
onSubmitted: (_) => controller.checkHomeserverAction(),
autocorrect: false,
),
Expanded(
child: ListView(
children: [
Container(
alignment: Alignment.center,
height: 200,
child: Image.asset('assets/info-logo.png'),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
focusNode: controller.homeserverFocusNode,
controller: controller.homeserverController,
onChanged: controller.onChanged,
decoration: InputDecoration(
prefixText: '${L10n.of(context)!.homeserver}: ',
hintText: L10n.of(context)!.enterYourHomeserver,
suffixIcon: const Icon(Icons.search),
errorText: controller.error,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
),
readOnly: !AppConfig.allowOtherHomeservers,
onSubmitted: (_) => controller.checkHomeserverAction(),
autocorrect: false,
),
if (controller.displayServerList)
Padding(
padding: const EdgeInsets.all(16.0),
child: Material(
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
color: Colors.white.withAlpha(200),
clipBehavior: Clip.hardEdge,
child: benchmarkResults == null
? const Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: CircularProgressIndicator.adaptive(),
))
: Column(
children: controller.filteredHomeservers
.map(
(server) => ListTile(
trailing: IconButton(
icon: const Icon(
Icons.info_outlined,
color: Colors.black,
),
onPressed: () =>
controller.showServerInfo(server),
),
onTap: () => controller.setServer(
server.homeserver.baseUrl.host),
title: Text(
server.homeserver.baseUrl.host,
style: const TextStyle(
color: Colors.black),
),
subtitle: Text(
server.homeserver.description ?? '',
style: TextStyle(
color: Colors.grey.shade700),
),
if (controller.displayServerList)
Padding(
padding: const EdgeInsets.all(12.0),
child: Material(
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
color: Colors.white.withAlpha(200),
clipBehavior: Clip.hardEdge,
child: benchmarkResults == null
? const Center(
child: Padding(
padding: EdgeInsets.all(12.0),
child: CircularProgressIndicator.adaptive(),
))
: Column(
children: controller.filteredHomeservers
.map(
(server) => ListTile(
trailing: IconButton(
icon: const Icon(
Icons.info_outlined,
color: Colors.black,
),
onPressed: () =>
controller.showServerInfo(server),
),
)
.toList(),
),
),
),
Wrap(
alignment: WrapAlignment.center,
children: [
TextButton(
onPressed: () => launch(AppConfig.privacyUrl),
child: Text(
L10n.of(context)!.privacy,
style: const TextStyle(
decoration: TextDecoration.underline,
color: Colors.white,
),
),
),
TextButton(
onPressed: () => PlatformInfos.showDialog(context),
child: Text(
L10n.of(context)!.about,
style: const TextStyle(
decoration: TextDecoration.underline,
color: Colors.white,
),
),
),
],
),
],
),
),
Container(
padding: const EdgeInsets.all(16),
width: double.infinity,
child: Hero(
tag: 'loginButton',
child: ElevatedButton(
onPressed: controller.isLoading
? null
: controller.checkHomeserverAction,
child: controller.isLoading
? const LinearProgressIndicator()
: Text(L10n.of(context)!.connect),
),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: ExpansionTile(
title: Text(L10n.of(context)!.advanced),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextButton(
onPressed: controller.isLoading
? () {}
: controller.restoreBackup,
style: ElevatedButton.styleFrom(
primary: Colors.white.withAlpha(200),
onPrimary: Colors.black,
shadowColor: Colors.white,
),
child: controller.isLoading
? const LinearProgressIndicator()
: Text(L10n.of(context)!.hydrate),
onTap: () => controller.setServer(
server.homeserver.baseUrl.host),
title: Text(
server.homeserver.baseUrl.host,
style: const TextStyle(
color: Colors.black),
),
subtitle: Text(
server.homeserver.description ?? '',
style: TextStyle(
color: Colors.grey.shade700),
),
),
)
.toList(),
),
),
),
],
],
),
),
Container(
padding: const EdgeInsets.all(12),
width: double.infinity,
child: Hero(
tag: 'loginButton',
child: ElevatedButton(
onPressed: controller.isLoading
? null
: controller.checkHomeserverAction,
child: controller.isLoading
? const LinearProgressIndicator()
: Text(L10n.of(context)!.connect),
),
),
],
),
),
],
),
);
}

View file

@ -34,7 +34,7 @@ class LoginView extends StatelessWidget {
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextField(
readOnly: controller.loading,
autocorrect: false,
@ -57,7 +57,7 @@ class LoginView extends StatelessWidget {
),
),
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextField(
readOnly: controller.loading,
autocorrect: false,
@ -91,7 +91,7 @@ class LoginView extends StatelessWidget {
Hero(
tag: 'signinButton',
child: Padding(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12.0),
child: ElevatedButton(
onPressed: controller.loading
? null
@ -106,7 +106,7 @@ class LoginView extends StatelessWidget {
children: [
const Expanded(child: Divider(color: Colors.white)),
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: Text(
L10n.of(context)!.or,
style: const TextStyle(color: Colors.white),
@ -116,7 +116,7 @@ class LoginView extends StatelessWidget {
],
),
Padding(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12.0),
child: ElevatedButton(
onPressed:
controller.loading ? () {} : controller.passwordForgotten,

View file

@ -27,7 +27,7 @@ class SignupPageView extends StatelessWidget {
child: ListView(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextFormField(
readOnly: controller.loading,
autocorrect: false,
@ -60,7 +60,7 @@ class SignupPageView extends StatelessWidget {
),
if (controller.displaySecondPasswordField)
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextFormField(
readOnly: controller.loading,
autocorrect: false,
@ -81,7 +81,7 @@ class SignupPageView extends StatelessWidget {
),
),
Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(12.0),
child: TextFormField(
readOnly: controller.loading,
autocorrect: false,
@ -109,7 +109,7 @@ class SignupPageView extends StatelessWidget {
Hero(
tag: 'loginButton',
child: Padding(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12),
child: ElevatedButton(
onPressed: controller.loading ? () {} : controller.signup,
child: controller.loading