fix(frontend): update login screen layout animation triggers and top-align form to prevent huge top padding

This commit is contained in:
ssbg04 committed 2026-08-05 18:46:56 +08:00
1 parent 6af6c58405
commit 7e4641182a
2 files changed
+35 -14

No files matched your search

+2 -3
View File
@@ -89,9 +89,8 @@ Files backup/restore - mirror mode or zip -->
- do not use zip and unzip -->
# LOGIN SCREEN
- apply dark theme
- bring back the green background for the outer part of the login screen (the larger section)
- use darker saturation for green background
- fix the login section that animates to full screen if the text fields is not empty make that section full screen
- fix padding top in Login label, it has huge padding top
---
+33 -11
View File
@@ -65,6 +65,8 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
_usernameFocus.addListener(_onFocusChange);
_passwordFocus.addListener(_onFocusChange);
_usernameController.addListener(_onTextChange);
_passwordController.addListener(_onTextChange);
_loadRememberMe(); // Load saved credentials on startup
if (widget.sessionExpired) {
@@ -95,9 +97,20 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
}
}
void _onTextChange() {
if (!mounted) return;
_updateAnimationState();
}
void _onFocusChange() {
if (!mounted) return;
if (_usernameFocus.hasFocus || _passwordFocus.hasFocus) {
_updateAnimationState();
}
void _updateAnimationState() {
final hasFocus = _usernameFocus.hasFocus || _passwordFocus.hasFocus;
final hasText = _usernameController.text.isNotEmpty || _passwordController.text.isNotEmpty;
if (hasFocus || hasText) {
_animController.reverse();
} else {
_animController.forward();
@@ -121,6 +134,10 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
@override
void dispose() {
_usernameFocus.removeListener(_onFocusChange);
_passwordFocus.removeListener(_onFocusChange);
_usernameController.removeListener(_onTextChange);
_passwordController.removeListener(_onTextChange);
_usernameFocus.dispose();
_passwordFocus.dispose();
_animController.dispose();
@@ -325,14 +342,18 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
bottomLeft: Radius.circular(24.0 * _revealAnimation.value),
),
),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400,
),
child: _buildLoginForm(),
),
),
child: Align(
alignment: Alignment.topCenter,
child: SingleChildScrollView(
padding: const EdgeInsets.only(top: 80, left: 24, right: 24, bottom: 24),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400,
),
child: _buildLoginForm(),
),
),
),
),
),
],
@@ -431,9 +452,10 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
topRight: Radius.circular(24.0 * _revealAnimation.value),
),
),
child: Center(
child: Align(
alignment: Alignment.topCenter,
child: SingleChildScrollView(
padding: const EdgeInsets.all(AppSizes.p24),
padding: const EdgeInsets.only(top: 40, left: 24, right: 24, bottom: 24),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400,