GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2024-10-03 01:48:44 +02:00
Code Issues Projects Releases Wiki Activity

feat: Redesign start page

Browse Source
This commit is contained in:
Krille Fear 2021-11-15 09:48:21 +01:00
parent 7c3fffc8a6
commit 7167d0ace6
8 changed files with 117 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/l10n/intl_de.arb
View File

@ -1277,7 +1277,7 @@
"homeserver": {}
}
},
"loginWith": "Anmelden mit {brand}",
"loginWith": "Anmelden mit",
"@loginWith": {
"type": "text",
"placeholders": {

8
assets/l10n/intl_en.arb
View File

@ -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",

8
lib/config/themes.dart
View File

@ -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(

3
lib/pages/homeserver_picker/homeserver_picker.dart
View File

@ -40,7 +40,8 @@ class HomeserverPickerController extends State<HomeserverPicker> {
this.domain = domain;
_coolDown?.cancel();
if (domain.isNotEmpty) {
_coolDown = Timer(const Duration(seconds: 1), checkHomeserverAction);
_coolDown =
Timer(const Duration(milliseconds: 500), checkHomeserverAction);
}
}

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

@ -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,

4
lib/utils/client_manager.dart
View File

@ -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,
);

12
lib/widgets/fluffy_banner.dart
View File

@ -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');
}
}

14
lib/widgets/layouts/one_page_card.dart
View File

@ -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)),
),
);
}