From 79a625a25f966aad84ce4d0533d60fb0c5f03ead Mon Sep 17 00:00:00 2001 From: Christian Pauly Date: Fri, 5 Aug 2022 21:04:37 +0200 Subject: [PATCH] chore: Adjust onboarding design --- lib/config/themes.dart | 6 +- lib/pages/chat_list/chat_list_header.dart | 2 +- lib/pages/connect/connect_page_view.dart | 12 +- .../homeserver_picker_view.dart | 296 ++++++++---------- lib/pages/login/login_view.dart | 10 +- lib/pages/sign_up/signup_view.dart | 8 +- 6 files changed, 155 insertions(+), 179 deletions(-) diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 0f846709..8f554dce 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -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) => diff --git a/lib/pages/chat_list/chat_list_header.dart b/lib/pages/chat_list/chat_list_header.dart index 7aad81ef..b9818834 100644 --- a/lib/pages/chat_list/chat_list_header.dart +++ b/lib/pages/chat_list/chat_list_header.dart @@ -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'; diff --git a/lib/pages/connect/connect_page_view.dart b/lib/pages/connect/connect_page_view.dart index 2695726e..7385a164 100644 --- a/lib/pages/connect/connect_page_view.dart +++ b/lib/pages/connect/connect_page_view.dart @@ -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( diff --git a/lib/pages/homeserver_picker/homeserver_picker_view.dart b/lib/pages/homeserver_picker/homeserver_picker_view.dart index f3ae1891..e34ff5f0 100644 --- a/lib/pages/homeserver_picker/homeserver_picker_view.dart +++ b/lib/pages/homeserver_picker/homeserver_picker_view.dart @@ -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), ), ), - ], - ), + ), + ], ), ); } diff --git a/lib/pages/login/login_view.dart b/lib/pages/login/login_view.dart index b74ac9f8..871a66ce 100644 --- a/lib/pages/login/login_view.dart +++ b/lib/pages/login/login_view.dart @@ -34,7 +34,7 @@ class LoginView extends StatelessWidget { child: ListView( children: [ 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, diff --git a/lib/pages/sign_up/signup_view.dart b/lib/pages/sign_up/signup_view.dart index 754c2358..ad16533b 100644 --- a/lib/pages/sign_up/signup_view.dart +++ b/lib/pages/sign_up/signup_view.dart @@ -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