mirror of
https://github.com/Yubico/yubioath-flutter.git
synced 2024-11-22 08:22:16 +03:00
Style OATH code views.
This commit is contained in:
parent
9b589bc1e6
commit
0fde22f52a
@ -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(
|
||||
|
@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
@ -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),
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user