GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2025-02-08 19:24:18 +01:00
Code Issues Projects Releases Wiki Activity

chore: Adjust onboarding design

Browse Source
This commit is contained in:
Christian Pauly 2022-08-05 21:04:37 +02:00
parent b473fa3ca4
commit 79a625a25f
6 changed files with 155 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/config/themes.dart
View File

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

2
lib/pages/chat_list/chat_list_header.dart
View File

@ -1,9 +1,9 @@
import 'package:fluffychat/config/app_config.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';
import 'package:vrouter/vrouter.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/chat_list.dart';
import 'package:fluffychat/pages/chat_list/client_chooser_button.dart'; import 'package:fluffychat/pages/chat_list/client_chooser_button.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';

12
lib/pages/connect/connect_page_view.dart
View File

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

296
lib/pages/homeserver_picker/homeserver_picker_view.dart
View File

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

10
lib/pages/login/login_view.dart
View File

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

8
lib/pages/sign_up/signup_view.dart
View File

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