From 7167d0ace63a4717e30afe86d04d15410ddf525d Mon Sep 17 00:00:00 2001 From: Krille Fear Date: Mon, 15 Nov 2021 09:48:21 +0100 Subject: [PATCH] feat: Redesign start page --- assets/l10n/intl_de.arb | 2 +- assets/l10n/intl_en.arb | 8 +- lib/config/themes.dart | 8 +- .../homeserver_picker/homeserver_picker.dart | 3 +- .../homeserver_picker_view.dart | 151 ++++++++++++------ lib/utils/client_manager.dart | 4 +- lib/widgets/fluffy_banner.dart | 12 -- lib/widgets/layouts/one_page_card.dart | 14 +- 8 files changed, 117 insertions(+), 85 deletions(-) delete mode 100644 lib/widgets/fluffy_banner.dart diff --git a/assets/l10n/intl_de.arb b/assets/l10n/intl_de.arb index 4b3cdfff..755e405a 100644 --- a/assets/l10n/intl_de.arb +++ b/assets/l10n/intl_de.arb @@ -1277,7 +1277,7 @@ "homeserver": {} } }, - "loginWith": "Anmelden mit {brand}", + "loginWith": "Anmelden mit", "@loginWith": { "type": "text", "placeholders": { diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index 95e6e0fb..97ca29bb 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -1309,13 +1309,7 @@ "homeserver": {} } }, - "loginWith": "Sign in with {brand}", - "@loginWith": { - "type": "text", - "placeholders": { - "brand": {} - } - }, + "loginWithOneClick": "Sign in with one click", "logout": "Logout", "@logout": { "type": "text", diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 4337dc21..85f5360d 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -97,15 +97,17 @@ abstract class FluffyThemes { ), inputDecorationTheme: InputDecorationTheme( border: OutlineInputBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius)), + borderRadius: BorderRadius.circular(AppConfig.borderRadius), + ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderSide: BorderSide( color: lighten(AppConfig.chatColor, .51), + width: 1, ), ), filled: true, - fillColor: lighten(AppConfig.chatColor, .51), + fillColor: Colors.blueGrey.shade50, ), appBarTheme: const AppBarTheme( elevation: 6, @@ -171,7 +173,7 @@ abstract class FluffyThemes { border: OutlineInputBorder( borderRadius: BorderRadius.circular(AppConfig.borderRadius)), filled: true, - fillColor: FluffyThemes.darken(AppConfig.chatColor, 0.4), + fillColor: Colors.blueGrey.shade900, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderSide: BorderSide( diff --git a/lib/pages/homeserver_picker/homeserver_picker.dart b/lib/pages/homeserver_picker/homeserver_picker.dart index 8b59fe48..0d17e606 100644 --- a/lib/pages/homeserver_picker/homeserver_picker.dart +++ b/lib/pages/homeserver_picker/homeserver_picker.dart @@ -40,7 +40,8 @@ class HomeserverPickerController extends State { this.domain = domain; _coolDown?.cancel(); if (domain.isNotEmpty) { - _coolDown = Timer(const Duration(seconds: 1), checkHomeserverAction); + _coolDown = + Timer(const Duration(milliseconds: 500), checkHomeserverAction); } } diff --git a/lib/pages/homeserver_picker/homeserver_picker_view.dart b/lib/pages/homeserver_picker/homeserver_picker_view.dart index b8606199..a667fd34 100644 --- a/lib/pages/homeserver_picker/homeserver_picker_view.dart +++ b/lib/pages/homeserver_picker/homeserver_picker_view.dart @@ -11,7 +11,6 @@ import 'package:vrouter/vrouter.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/widgets/default_app_bar_search_field.dart'; -import 'package:fluffychat/widgets/fluffy_banner.dart'; import 'package:fluffychat/widgets/layouts/one_page_card.dart'; import 'package:fluffychat/widgets/matrix.dart'; import '../../utils/localized_exception_extension.dart'; @@ -44,9 +43,10 @@ class HomeserverPickerView extends StatelessWidget { elevation: 0, ), body: ListView(children: [ - const Hero( - tag: 'loginBanner', - child: FluffyBanner(), + Image.asset( + Theme.of(context).brightness == Brightness.dark + ? 'assets/banner_dark.png' + : 'assets/banner.png', ), controller.isLoading ? const Center( @@ -88,45 +88,43 @@ class HomeserverPickerView extends StatelessWidget { ), child: Column( mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - if (controller.ssoLoginSupported) ...{ - for (final identityProvider - in controller.identityProviders) - Center( - child: _LoginButton( - onPressed: () => controller - .ssoLoginAction(identityProvider.id), - icon: identityProvider.icon == null - ? const Icon(Icons.web_outlined) - : CachedNetworkImage( - imageUrl: Uri.parse( - identityProvider.icon) - .getDownloadLink( - Matrix.of(context) - .getLoginClient()) - .toString(), - width: 24, - height: 24, - ), - labelText: L10n.of(context).loginWith( - identityProvider.name ?? - identityProvider.brand ?? - L10n.of(context).singlesignon), - ), + if (controller.ssoLoginSupported) + Row(children: [ + const Expanded(child: Divider()), + Padding( + padding: const EdgeInsets.all(12.0), + child: Text( + L10n.of(context).loginWithOneClick), ), - if (controller.registrationSupported || - controller.passwordLoginSupported) - Row(children: [ - const Expanded(child: Divider()), - Padding( - padding: const EdgeInsets.all(12.0), - child: Text(L10n.of(context).or), - ), - const Expanded(child: Divider()), - ]), - }, - if (controller.passwordLoginSupported) + const Expanded(child: Divider()), + ]), + Wrap( + children: [ + if (controller.ssoLoginSupported) ...{ + for (final identityProvider + in controller.identityProviders) + _SsoButton( + onPressed: () => + controller.ssoLoginAction( + identityProvider.id), + identityProvider: identityProvider, + ), + }, + ].toList(), + ), + if (controller.ssoLoginSupported && + (controller.registrationSupported || + controller.passwordLoginSupported)) + Row(children: [ + const Expanded(child: Divider()), + Padding( + padding: const EdgeInsets.all(12.0), + child: Text(L10n.of(context).or), + ), + const Expanded(child: Divider()), + ]), + if (controller.passwordLoginSupported) ...[ Center( child: _LoginButton( onPressed: () => @@ -141,6 +139,8 @@ class HomeserverPickerView extends StatelessWidget { labelText: L10n.of(context).login, ), ), + const SizedBox(height: 12), + ], if (controller.registrationSupported) Center( child: _LoginButton( @@ -155,19 +155,15 @@ class HomeserverPickerView extends StatelessWidget { labelText: L10n.of(context).register, ), ), - ] - .map( - (widget) => Container( - height: 64, - padding: - const EdgeInsets.only(bottom: 12), - child: widget), - ) - .toList(), + ], ), ); }), - Wrap( + ]), + bottomNavigationBar: Material( + elevation: 6, + color: Theme.of(context).scaffoldBackgroundColor, + child: Wrap( alignment: WrapAlignment.center, children: [ TextButton( @@ -192,7 +188,54 @@ class HomeserverPickerView extends StatelessWidget { ), ], ), - ]), + ), + ), + ); + } +} + +class _SsoButton extends StatelessWidget { + final IdentityProvider identityProvider; + final void Function() onPressed; + const _SsoButton({ + Key key, + @required this.identityProvider, + this.onPressed, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: onPressed, + borderRadius: BorderRadius.circular(7), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + identityProvider.icon == null + ? const Icon(Icons.web_outlined) + : CachedNetworkImage( + imageUrl: Uri.parse(identityProvider.icon) + .getDownloadLink(Matrix.of(context).getLoginClient()) + .toString(), + width: 32, + height: 32, + ), + const SizedBox(height: 8), + Text( + identityProvider.name ?? + identityProvider.brand ?? + L10n.of(context).singlesignon, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.bold, + color: Theme.of(context).textTheme.subtitle2.color, + ), + ), + ], + ), ), ); } @@ -216,7 +259,9 @@ class _LoginButton extends StatelessWidget { minimumSize: const Size(256, 56), textStyle: const TextStyle(fontWeight: FontWeight.bold), backgroundColor: Theme.of(context).backgroundColor, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius), + ), ), onPressed: onPressed, icon: icon, diff --git a/lib/utils/client_manager.dart b/lib/utils/client_manager.dart index 8201ce1d..8cb833d1 100644 --- a/lib/utils/client_manager.dart +++ b/lib/utils/client_manager.dart @@ -80,8 +80,8 @@ abstract class ClientManager { legacyDatabaseBuilder: FlutterMatrixHiveStore.hiveDatabaseBuilder, supportedLoginTypes: { AuthenticationTypes.password, - if (PlatformInfos.isMobile || PlatformInfos.isWeb) - AuthenticationTypes.sso + //if (PlatformInfos.isMobile || PlatformInfos.isWeb) + AuthenticationTypes.sso }, compute: compute, ); diff --git a/lib/widgets/fluffy_banner.dart b/lib/widgets/fluffy_banner.dart deleted file mode 100644 index 2d3a5904..00000000 --- a/lib/widgets/fluffy_banner.dart +++ /dev/null @@ -1,12 +0,0 @@ -import 'package:flutter/material.dart'; - -class FluffyBanner extends StatelessWidget { - const FluffyBanner({Key key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return Image.asset(Theme.of(context).brightness == Brightness.dark - ? 'assets/banner_dark.png' - : 'assets/banner.png'); - } -} diff --git a/lib/widgets/layouts/one_page_card.dart b/lib/widgets/layouts/one_page_card.dart index d2117796..78ae7104 100644 --- a/lib/widgets/layouts/one_page_card.dart +++ b/lib/widgets/layouts/one_page_card.dart @@ -14,6 +14,8 @@ class OnePageCard extends StatelessWidget { static num breakpoint = FluffyThemes.columnWidth * 2; @override Widget build(BuildContext context) { + final horizontalPadding = + max((MediaQuery.of(context).size.width - 600) / 2, 24); return MediaQuery.of(context).size.width <= breakpoint || Matrix.of(context).client.isLogged() ? child @@ -25,13 +27,13 @@ class OnePageCard extends StatelessWidget { ), ), child: Padding( - padding: EdgeInsets.symmetric( - horizontal: - max((MediaQuery.of(context).size.width - 600) / 2, 24), - vertical: - max((MediaQuery.of(context).size.height - 800) / 2, 24), + padding: EdgeInsets.only( + top: 16, + left: horizontalPadding, + right: horizontalPadding, + bottom: max((MediaQuery.of(context).size.height - 600) / 2, 24), ), - child: SafeArea(child: Card(elevation: 5, child: child)), + child: SafeArea(child: Card(elevation: 16, child: child)), ), ); }