Style OATH code views.

This commit is contained in:
Dain Nilsson 2022-05-18 17:29:50 +02:00
parent 9b589bc1e6
commit 0fde22f52a
No known key found for this signature in database
GPG Key ID: F04367096FBA95E8
4 changed files with 104 additions and 73 deletions

View File

@ -88,19 +88,42 @@ class AccountDialog extends ConsumerWidget with AccountMixin {
}
return DialogFrame(
child: AlertDialog(
title: Text(title),
contentPadding: const EdgeInsets.symmetric(horizontal: 24.0),
actionsAlignment: MainAxisAlignment.center,
actionsPadding: EdgeInsets.zero,
title: Center(
child: Text(
title,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.headlineSmall,
maxLines: 1,
softWrap: false,
),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 12.0),
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(subtitle ?? ''),
const SizedBox(height: 8.0),
Center(child: FittedBox(child: buildCodeView(ref, big: true))),
if (subtitle != null)
Text(
subtitle!,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.bodySmall,
maxLines: 1,
softWrap: false,
),
const SizedBox(height: 12.0),
DecoratedBox(
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
color: Color(0xff3d3d3d),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
child: Center(
child: FittedBox(child: buildCodeView(ref, big: true)),
),
),
],
),
actionsPadding: const EdgeInsets.only(top: 10.0, right: -16.0),
actions: [
Center(
child: FittedBox(

View File

@ -147,16 +147,6 @@ mixin AccountMixin {
final pinned = isPinned(ref);
return [
if (manual)
MenuAction(
text: 'Calculate',
icon: const Icon(Icons.refresh),
action: ready
? (context) {
calculateCode(context, ref);
}
: null,
),
MenuAction(
text: 'Copy to clipboard',
icon: const Icon(Icons.copy),
@ -167,6 +157,16 @@ mixin AccountMixin {
showMessage(context, 'Code copied to clipboard');
},
),
if (manual)
MenuAction(
text: 'Calculate',
icon: const Icon(Icons.refresh),
action: ready
? (context) {
calculateCode(context, ref);
}
: null,
),
MenuAction(
text: pinned ? 'Unpin account' : 'Pin account',
//TODO: Replace this with a custom icon.
@ -206,64 +206,62 @@ mixin AccountMixin {
Widget buildCodeView(WidgetRef ref, {bool big = false}) {
final code = getCode(ref);
final expired = isExpired(code, ref);
return DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(30.0)),
border: Border.all(width: 1.0, color: Colors.grey.shade500),
),
child: AnimatedSize(
alignment: Alignment.centerRight,
duration: const Duration(milliseconds: 100),
child: Padding(
padding: big
? const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)
: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2.0),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: code == null
? [
Icon(
credential.oathType == OathType.hotp
? Icons.refresh
: Icons.touch_app,
size: big ? 36 : 18,
),
Text('', style: TextStyle(fontSize: big ? 32.0 : 22.0)),
]
: [
if (credential.oathType == OathType.totp) ...[
...expired
? [
if (credential.touchRequired) ...[
const Icon(Icons.touch_app),
const SizedBox(width: 8.0),
]
]
: [
SizedBox.square(
dimension: big ? 32 : 16,
child: CircleTimer(
code.validFrom * 1000,
code.validTo * 1000,
),
return AnimatedSize(
alignment: Alignment.centerRight,
duration: const Duration(milliseconds: 100),
child: Padding(
padding: big
? const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)
: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2.0),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: code == null
? [
Icon(
credential.oathType == OathType.hotp
? Icons.refresh
: Icons.touch_app,
size: big ? 24 : 18,
),
Text('', style: TextStyle(fontSize: big ? 24.0 : 16.0)),
]
: [
if (credential.oathType == OathType.totp) ...[
...expired
? [
if (credential.touchRequired) ...[
Icon(
Icons.touch_app,
size: big ? 24 : 18,
),
const SizedBox(width: 8.0),
],
],
Opacity(
opacity: expired ? 0.4 : 1.0,
child: Text(
formatCode(code),
style: TextStyle(
fontSize: big ? 32.0 : 22.0,
fontFeatures: const [FontFeature.tabularFigures()],
),
]
]
: [
SizedBox.square(
dimension: big ? 18.0 : 14.0,
child: CircleTimer(
code.validFrom * 1000,
code.validTo * 1000,
),
),
const SizedBox(width: 8.0),
],
],
Opacity(
opacity: expired ? 0.4 : 1.0,
child: Text(
formatCode(code),
style: TextStyle(
fontSize: big ? 24 : 20,
fontFeatures: const [FontFeature.tabularFigures()],
fontWeight: FontWeight.w300,
color: Colors.grey.shade200,
),
),
],
),
),
],
),
),
);

View File

@ -145,7 +145,14 @@ class AccountView extends ConsumerWidget with AccountMixin {
softWrap: false,
)
: null,
trailing: buildCodeView(ref),
trailing: DecoratedBox(
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
color: Color(0xff3d3d3d),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
child: buildCodeView(ref),
),
);
}),
);

View File

@ -53,6 +53,9 @@ class AppTheme {
backgroundColor: Colors.transparent,
foregroundColor: Colors.grey.shade400,
),
dialogTheme: const DialogTheme(
backgroundColor: Color(0xff323232),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
foregroundColor: Colors.grey.shade900,
backgroundColor: primaryGreen,