Add FileDropOverlay widget.

This commit is contained in:
Elias Bonnici 2024-01-08 14:11:32 +01:00
parent 6a68d2a7a0
commit 6c67b209df
No known key found for this signature in database
GPG Key ID: 5EAC28EA3F980CCF
5 changed files with 72 additions and 56 deletions

View File

@ -23,12 +23,12 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../app/message.dart';
import '../../app/models.dart';
import '../../app/state.dart';
import '../../widgets/file_drop_overlay.dart';
import '../../widgets/file_drop_target.dart';
import '../../widgets/responsive_dialog.dart';
import '../keys.dart';
import '../models.dart';
import '../state.dart';
import 'add_account_overlay.dart';
import 'add_account_page.dart';
import 'utils.dart';
@ -69,7 +69,10 @@ class _AddAccountDialogState extends ConsumerState<AddAccountDialog> {
);
}
},
overlay: const AddAccountOverlay(),
overlay: FileDropOverlay(
title: l10n.s_add_account,
subTitle: l10n.l_drop_qr_description,
),
child: ResponsiveDialog(
title: Text(l10n.s_add_account),
child: Padding(

View File

@ -1,49 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class AddAccountOverlay extends StatelessWidget {
const AddAccountOverlay({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final theme = Theme.of(context);
final darkMode = theme.brightness == Brightness.dark;
// TODO: use color from theme.
return Positioned.fill(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color:
Color(darkMode ? 0xFF151515 : 0xFFE6E6E6).withOpacity(0.95),
border: Border.all(color: Theme.of(context).colorScheme.primary),
borderRadius: const BorderRadius.all(Radius.circular(20.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.upload_file,
size: 120,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(height: 16.0),
Text(
l10n.s_add_account,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 12.0),
Text(
l10n.l_drop_qr_description,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleSmall,
),
],
),
),
),
);
}
}

View File

@ -38,6 +38,7 @@ import '../../management/models.dart';
import '../../widgets/app_input_decoration.dart';
import '../../widgets/app_text_field.dart';
import '../../widgets/choice_filter_chip.dart';
import '../../widgets/file_drop_overlay.dart';
import '../../widgets/file_drop_target.dart';
import '../../widgets/focus_utils.dart';
import '../../widgets/responsive_dialog.dart';
@ -45,7 +46,6 @@ import '../../widgets/utf8_utils.dart';
import '../keys.dart' as keys;
import '../models.dart';
import '../state.dart';
import 'add_account_overlay.dart';
import 'unlock_form.dart';
import 'utils.dart';
@ -338,7 +338,10 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage> {
});
}
},
overlay: const AddAccountOverlay(),
overlay: FileDropOverlay(
title: l10n.s_add_account,
subTitle: l10n.l_drop_qr_description,
),
child: ResponsiveDialog(
title: Text(l10n.s_add_account),
actions: [

View File

@ -31,12 +31,12 @@ import '../../app/views/message_page.dart';
import '../../core/state.dart';
import '../../widgets/app_input_decoration.dart';
import '../../widgets/app_text_form_field.dart';
import '../../widgets/file_drop_overlay.dart';
import '../features.dart' as features;
import '../keys.dart' as keys;
import '../models.dart';
import '../state.dart';
import 'account_list.dart';
import 'add_account_overlay.dart';
import 'key_actions.dart';
import 'unlock_form.dart';
import 'utils.dart';
@ -165,7 +165,10 @@ class _UnlockedViewState extends ConsumerState<_UnlockedView> {
used: 0)
: null,
onFileDropped: onFileDropped,
fileDropOverlay: const AddAccountOverlay(),
fileDropOverlay: FileDropOverlay(
title: l10n.s_add_account,
subTitle: l10n.l_drop_qr_description,
),
);
}
return Actions(
@ -248,7 +251,10 @@ class _UnlockedViewState extends ConsumerState<_UnlockedView> {
)
: null,
onFileDropped: onFileDropped,
fileDropOverlay: const AddAccountOverlay(),
fileDropOverlay: FileDropOverlay(
title: l10n.s_add_account,
subTitle: l10n.l_drop_qr_description,
),
centered: numCreds == null,
delayedContent: numCreds == null,
child: numCreds != null

View File

@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
class FileDropOverlay extends StatelessWidget {
final Widget? graphic;
final String? title;
final String? subTitle;
const FileDropOverlay({super.key, this.graphic, this.title, this.subTitle});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final darkMode = theme.brightness == Brightness.dark;
return Positioned.fill(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Color(darkMode ? 0xFF151515 : 0xFFE6E6E6).withOpacity(0.95),
border: Border.all(color: Theme.of(context).colorScheme.primary),
borderRadius: const BorderRadius.all(Radius.circular(20.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
graphic ??
Icon(
Icons.upload_file,
size: 120,
color: Theme.of(context).colorScheme.primary,
),
if (title != null) ...[
const SizedBox(height: 16.0),
Text(
title!,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleLarge,
)
],
if (subTitle != null) ...[
const SizedBox(height: 12.0),
Text(
subTitle!,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleSmall,
)
]
],
),
),
));
}
}