ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design: Improve login design

Browse source
This commit is contained in:
Krille Fear 2022-10-16 12:37:38 +02:00
parent 796018cae2
commit 1992cfe68d
6 changed files with 84 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
lib/pages/connect/connect_page_view.dart
View file

@ -19,13 +19,11 @@ class ConnectPageView extends StatelessWidget {
final identityProviders = controller.identityProviders;
return LoginScaffold(
appBar: AppBar(
leading:
controller.loading ? null : const BackButton(color: Colors.white),
leading: controller.loading ? null : const BackButton(),
automaticallyImplyLeading: !controller.loading,
centerTitle: true,
title: Text(
Matrix.of(context).getLoginClient().homeserver?.host ?? '',
style: const TextStyle(color: Colors.white),
),
),
body: ListView(
@ -43,7 +41,7 @@ class ConnectPageView extends StatelessWidget {
clipBehavior: Clip.hardEdge,
child: CircleAvatar(
radius: 64,
backgroundColor: Colors.white.withAlpha(200),
backgroundColor: Colors.white,
child: avatar == null
? const Icon(
Icons.person_outlined,
@ -93,10 +91,7 @@ class ConnectPageView extends StatelessWidget {
hintText: L10n.of(context)!.chooseAUsername,
errorText: controller.signupError,
errorStyle: const TextStyle(color: Colors.orange),
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
),
),
),
@ -114,26 +109,25 @@ class ConnectPageView extends StatelessWidget {
),
Row(
children: [
const Expanded(
child: Divider(
color: Colors.white,
thickness: 1,
)),
Expanded(
child: Divider(
thickness: 1,
color: Theme.of(context).textTheme.subtitle1?.color,
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
L10n.of(context)!.or,
style: const TextStyle(
color: Colors.white,
fontSize: 18,
),
style: const TextStyle(fontSize: 18),
),
),
Expanded(
child: Divider(
thickness: 1,
color: Theme.of(context).textTheme.subtitle1?.color,
),
),
const Expanded(
child: Divider(
color: Colors.white,
thickness: 1,
)),
],
),
],
@ -141,10 +135,7 @@ class ConnectPageView extends StatelessWidget {
identityProviders == null
? const SizedBox(
height: 74,
child: Center(
child: CircularProgressIndicator.adaptive(
backgroundColor: Colors.white,
)),
child: Center(child: CircularProgressIndicator.adaptive()),
)
: Center(
child: identityProviders.length == 1

1
lib/pages/connect/sso_button.dart
View file

@ -52,7 +52,6 @@ class SsoButton extends StatelessWidget {
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],

10
lib/pages/homeserver_picker/homeserver_picker_view.dart
View file

@ -18,23 +18,22 @@ class HomeserverPickerView extends StatelessWidget {
final benchmarkResults = controller.benchmarkResults;
return LoginScaffold(
appBar: AppBar(
title: Text(AppConfig.applicationName),
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: controller.restoreBackup,
tooltip: L10n.of(context)!.hydrate,
color: Colors.white,
icon: const Icon(Icons.restore_outlined),
),
IconButton(
tooltip: L10n.of(context)!.privacy,
onPressed: () => launch(AppConfig.privacyUrl),
color: Colors.white,
icon: const Icon(Icons.shield_outlined),
),
IconButton(
tooltip: L10n.of(context)!.about,
onPressed: () => PlatformInfos.showDialog(context),
color: Colors.white,
icon: const Icon(Icons.info_outlined),
),
],
@ -84,10 +83,7 @@ class HomeserverPickerView extends StatelessWidget {
hintText: L10n.of(context)!.enterYourHomeserver,
suffixIcon: const Icon(Icons.search),
errorText: controller.error,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
),
readOnly: !AppConfig.allowOtherHomeservers,
onSubmitted: (_) => controller.checkHomeserverAction(),

41
lib/pages/login/login_view.dart
View file

@ -15,8 +15,7 @@ class LoginView extends StatelessWidget {
Widget build(BuildContext context) {
return LoginScaffold(
appBar: AppBar(
leading:
controller.loading ? null : const BackButton(color: Colors.white),
leading: controller.loading ? null : const BackButton(),
automaticallyImplyLeading: !controller.loading,
centerTitle: true,
title: Text(
@ -25,7 +24,6 @@ class LoginView extends StatelessWidget {
.homeserver
.toString()
.replaceFirst('https://', '')),
style: const TextStyle(color: Colors.white),
),
),
body: Builder(builder: (context) {
@ -49,10 +47,7 @@ class LoginView extends StatelessWidget {
errorText: controller.usernameError,
errorStyle: const TextStyle(color: Colors.orange),
hintText: L10n.of(context)!.emailOrUsername,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
),
),
),
@ -82,10 +77,7 @@ class LoginView extends StatelessWidget {
onPressed: controller.toggleShowPassword,
),
hintText: L10n.of(context)!.password,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
),
),
),
@ -105,26 +97,25 @@ class LoginView extends StatelessWidget {
),
Row(
children: [
const Expanded(
child: Divider(
color: Colors.white,
thickness: 1,
)),
Expanded(
child: Divider(
thickness: 1,
color: Theme.of(context).textTheme.subtitle1?.color,
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
L10n.of(context)!.or,
style: const TextStyle(
color: Colors.white,
fontSize: 18,
),
style: const TextStyle(fontSize: 18),
),
),
Expanded(
child: Divider(
thickness: 1,
color: Theme.of(context).textTheme.subtitle1?.color,
),
),
const Expanded(
child: Divider(
color: Colors.white,
thickness: 1,
)),
],
),
Padding(

24
lib/pages/sign_up/signup_view.dart
View file

@ -13,13 +13,9 @@ class SignupPageView extends StatelessWidget {
Widget build(BuildContext context) {
return LoginScaffold(
appBar: AppBar(
leading:
controller.loading ? null : const BackButton(color: Colors.white),
leading: controller.loading ? null : const BackButton(),
automaticallyImplyLeading: !controller.loading,
title: Text(
L10n.of(context)!.signUp,
style: const TextStyle(color: Colors.white),
),
title: Text(L10n.of(context)!.signUp),
),
body: Form(
key: controller.formKey,
@ -50,10 +46,7 @@ class SignupPageView extends StatelessWidget {
),
errorStyle: const TextStyle(color: Colors.orange),
hintText: L10n.of(context)!.chooseAStrongPassword,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
),
),
),
@ -72,10 +65,7 @@ class SignupPageView extends StatelessWidget {
prefixIcon: const Icon(Icons.repeat_outlined),
hintText: L10n.of(context)!.repeatPassword,
errorStyle: const TextStyle(color: Colors.orange),
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
),
),
),
@ -93,10 +83,8 @@ class SignupPageView extends StatelessWidget {
prefixIcon: const Icon(Icons.mail_outlined),
hintText: L10n.of(context)!.enterAnEmailAddress,
errorText: controller.error,
fillColor: Theme.of(context)
.colorScheme
.background
.withOpacity(0.75),
fillColor: Theme.of(context).colorScheme.background,
errorMaxLines: 4,
errorStyle: TextStyle(
color: controller.emailController.text.isEmpty
? Colors.orangeAccent

67
lib/widgets/layouts/login_scaffold.dart
View file

@ -1,6 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
class LoginScaffold extends StatelessWidget {
final Widget body;
final AppBar? appBar;
@ -13,32 +16,46 @@ class LoginScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: appBar?.automaticallyImplyLeading ?? true,
centerTitle: appBar?.centerTitle,
title: appBar?.title,
leading: appBar?.leading,
actions: appBar?.actions,
iconTheme: const IconThemeData(color: Colors.white),
elevation: 0,
scrolledUnderElevation: 0,
backgroundColor: Colors.transparent,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
extendBodyBehindAppBar: true,
extendBody: true,
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/login_wallpaper.png'),
),
final isMobileMode = !FluffyThemes.isColumnMode(context);
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/login_wallpaper.png'),
fit: BoxFit.cover,
),
alignment: Alignment.center,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 480),
child: body,
),
child: Center(
child: Material(
color: Theme.of(context).brightness == Brightness.light
? Theme.of(context).scaffoldBackgroundColor.withOpacity(0.9)
: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.5),
borderRadius: isMobileMode
? null
: BorderRadius.circular(AppConfig.borderRadius),
elevation: isMobileMode ? 0 : 10,
clipBehavior: Clip.hardEdge,
shadowColor: Colors.black,
child: ConstrainedBox(
constraints: isMobileMode
? const BoxConstraints()
: const BoxConstraints(maxWidth: 480, maxHeight: 640),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
automaticallyImplyLeading:
appBar?.automaticallyImplyLeading ?? true,
centerTitle: appBar?.centerTitle,
title: appBar?.title,
leading: appBar?.leading,
actions: appBar?.actions,
backgroundColor: Colors.transparent,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
extendBodyBehindAppBar: true,
extendBody: true,
body: body,
),
),
),
),
);