BlockStorage/repertory
1
0
Fork 0
Code Issues 8 Pull Requests Releases 8 Wiki Activity

[ui] UI theme should match repertory blue #61
All checks were successful
BlockStorage/repertory/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Scott E. Graves
2025-08-15 12:54:13 -05:00
parent 224bf37e68
commit 01bb853d22
1 changed files with 135 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
web/repertory/lib/screens/auth_screen.dart
View File

@@ -1,4 +1,3 @@
import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:repertory/constants.dart' as constants; import 'package:repertory/constants.dart' as constants;
@@ -79,38 +78,36 @@ class _AuthScreenState extends State<AuthScreen> {
); );
} }
void navigateHomePostFrame() {
WidgetsBinding.instance.addPostFrameCallback((_) {
final navCtx = constants.navigatorKey.currentContext;
if (navCtx == null) {
return;
}
Navigator.of(navCtx).pushNamedAndRemoveUntil('/', (r) => false);
});
}
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(title: Text(widget.title), scrolledUnderElevation: 0),
title: Text(widget.title),
scrolledUnderElevation: 0,
backgroundColor: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0.55),
elevation: 0,
flexibleSpace: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 14, sigmaY: 14),
child: const SizedBox.expand(),
),
),
),
body: SafeArea( body: SafeArea(
child: CoolScaffoldBg( child: Container(
enableAurora: true, width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Theme.of(context).colorScheme.surface,
Theme.of(context).colorScheme.surface.withValues(alpha: 0.9),
],
stops: const [0.0, 1.0],
),
),
child: Consumer<Auth>( child: Consumer<Auth>(
builder: (context, auth, _) { builder: (context, auth, _) {
if (auth.authenticated) { if (auth.authenticated) {
navigateHomePostFrame(); Future.delayed(const Duration(milliseconds: 1), () {
if (constants.navigatorKey.currentContext == null) {
return;
}
Navigator.of(
constants.navigatorKey.currentContext!,
).pushNamedAndRemoveUntil('/', (r) => false);
});
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
@@ -139,30 +136,32 @@ class _AuthScreenState extends State<AuthScreen> {
key: _formKey, key: _formKey,
autovalidateMode: autovalidateMode:
AutovalidateMode.onUserInteraction, AutovalidateMode.onUserInteraction,
child: AutofillGroup(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Align( Align(
alignment: Alignment.center, alignment: Alignment.center,
child: CircleAvatar( child: Container(
radius: 28, width: 56,
backgroundColor: scheme.primary height: 56,
.withValues(alpha: 0.18), decoration: BoxDecoration(
child: ClipRRect( color: scheme.primary.withValues(
borderRadius: BorderRadius.circular(28), alpha: 0.18,
),
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.all(8),
child: Image.asset( child: Image.asset(
'assets/images/repertory.png', 'assets/images/repertory.png',
width: 28,
height: 28,
fit: BoxFit.contain, fit: BoxFit.contain,
errorBuilder: (_, _, _) => Icon( errorBuilder: (_, _, _) {
return Icon(
Icons.folder, Icons.folder,
color: scheme.primary, color: scheme.primary,
size: 28, size: 40,
), );
), },
), ),
), ),
), ),
@@ -179,9 +178,7 @@ class _AuthScreenState extends State<AuthScreen> {
Text( Text(
"Secure access to your mounts", "Secure access to your mounts",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: Theme.of(context) style: Theme.of(context).textTheme.bodyMedium
.textTheme
.bodyMedium
?.copyWith( ?.copyWith(
color: scheme.onSurface.withValues( color: scheme.onSurface.withValues(
alpha: 0.7, alpha: 0.7,
@@ -189,13 +186,11 @@ class _AuthScreenState extends State<AuthScreen> {
), ),
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
TextFormField( TextFormField(
autofocus: true, autofocus: true,
controller: _userController, controller: _userController,
textInputAction: TextInputAction.next, textInputAction: TextInputAction.next,
autofillHints: const [
AutofillHints.username,
],
decoration: decoration( decoration: decoration(
'Username', 'Username',
Icons.person, Icons.person,
@@ -208,18 +203,13 @@ class _AuthScreenState extends State<AuthScreen> {
FocusScope.of(context).nextFocus(), FocusScope.of(context).nextFocus(),
), ),
const SizedBox(height: constants.padding), const SizedBox(height: constants.padding),
TextFormField( TextFormField(
controller: _passwordController, controller: _passwordController,
obscureText: _obscure, obscureText: _obscure,
textInputAction: TextInputAction.go, textInputAction: TextInputAction.go,
autofillHints: const [ decoration: decoration('Password', Icons.lock)
AutofillHints.password, .copyWith(
],
decoration:
decoration(
'Password',
Icons.lock,
).copyWith(
suffixIcon: IconButton( suffixIcon: IconButton(
tooltip: _obscure tooltip: _obscure
? 'Show password' ? 'Show password'
@@ -249,9 +239,7 @@ class _AuthScreenState extends State<AuthScreen> {
: null, : null,
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(12),
12,
),
), ),
), ),
child: _enabled child: _enabled
@@ -273,7 +261,6 @@ class _AuthScreenState extends State<AuthScreen> {
), ),
), ),
), ),
),
); );
}, },
), ),
@@ -282,109 +269,3 @@ class _AuthScreenState extends State<AuthScreen> {
); );
} }
} }
class CoolScaffoldBg extends StatelessWidget {
final Widget child;
final bool enableAurora;
const CoolScaffoldBg({
super.key,
required this.child,
this.enableAurora = true,
});
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return Stack(
children: [
Builder(
builder: (context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Theme.of(context).colorScheme.primary,
Theme.of(context).colorScheme.surface,
],
),
),
);
},
),
if (enableAurora) const AuroraSweep(),
Align(
alignment: const Alignment(0, 0.1),
child: IgnorePointer(
child: Container(
width: 740,
height: 740,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
scheme.primary.withValues(alpha: 0.22),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
),
child,
],
);
}
}
class AuroraSweep extends StatefulWidget {
const AuroraSweep({super.key});
@override
State<AuroraSweep> createState() => _AuroraSweepState();
}
class _AuroraSweepState extends State<AuroraSweep>
with SingleTickerProviderStateMixin {
late final AnimationController _c = AnimationController(
vsync: this,
duration: const Duration(seconds: 18),
)..repeat();
@override
void dispose() {
_c.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return AnimatedBuilder(
animation: _c,
builder: (_, _) {
final t = _c.value;
return IgnorePointer(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-1 + 2 * t, -0.6),
end: Alignment(0.8 - 2 * t, 0.9),
colors: [
scheme.primary.withValues(alpha: 0.06),
Colors.transparent,
scheme.primary.withValues(alpha: 0.04),
],
stops: const [0.0, 0.5, 1.0],
),
),
),
);
},
);
}
}