Skip to content

Commit

Permalink
feat: My account, modals, refactor base dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@digitalheartxs
digitalheartxs committed Sep 27, 2024
1 parent 921a8bc commit 50974e4
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 140 deletions.
155 changes: 75 additions & 80 deletions catalyst_voices/lib/pages/account/delete_keychain_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,101 +41,96 @@ class _DeleteKeychainDialogState extends State<DeleteKeychainDialog> {

@override
Widget build(BuildContext context) {
return VoicesDesktopDialog(
return VoicesSinglePaneDialog(
backgroundColor: Theme.of(context).colors.iconsBackground,
showBorder: true,
constraints: const BoxConstraints(maxHeight: 500, maxWidth: 900),
child: Stack(
children: [
SizedBox(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
child: SizedBox(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 24),
Text(
context.l10n.deleteKeychainDialogTitle,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 48),
Text(
context.l10n.deleteKeychainDialogSubtitle,
style: Theme.of(context).textTheme.titleMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 32),
Wrap(
children: [
const SizedBox(height: 24),
Text(
context.l10n.deleteKeychainDialogTitle,
style: Theme.of(context).textTheme.titleLarge,
VoicesAssets.icons.exclamation.buildIcon(
color: Theme.of(context).colors.iconsError,
),
const SizedBox(height: 48),
Text(
context.l10n.deleteKeychainDialogSubtitle,
style: Theme.of(context).textTheme.titleMedium,
textAlign: TextAlign.center,
Padding(
padding: const EdgeInsets.only(top: 2, left: 8),
child: Text(
context.l10n.deleteKeychainDialogWarning,
style: Theme.of(context).textTheme.titleSmall,
),
),
const SizedBox(height: 32),
Wrap(
children: [
VoicesAssets.icons.exclamation.buildIcon(
color: Theme.of(context).colors.iconsError,
),
Padding(
padding: const EdgeInsets.only(top: 2, left: 8),
child: Text(
context.l10n.deleteKeychainDialogWarning,
style: Theme.of(context).textTheme.titleSmall,
),
),
],
),
const SizedBox(height: 8),
Text(
context.l10n.deleteKeychainDialogWarningInfo,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 48),
],
),
const SizedBox(height: 8),
Text(
context.l10n.deleteKeychainDialogWarningInfo,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 48),
Text(
context.l10n.deleteKeychainDialogTypingInfo,
style: Theme.of(context).textTheme.titleSmall,
),
const SizedBox(height: 24),
Wrap(
direction: Axis.vertical,
children: [
Text(
context.l10n.deleteKeychainDialogTypingInfo,
context.l10n.deleteKeychainDialogInputLabel,
style: Theme.of(context).textTheme.titleSmall,
),
const SizedBox(height: 24),
Wrap(
direction: Axis.vertical,
children: [
Text(
context.l10n.deleteKeychainDialogInputLabel,
style: Theme.of(context).textTheme.titleSmall,
const SizedBox(height: 2),
SizedBox(
width: 300,
child: VoicesTextField(
controller: _textEditingController,
decoration: VoicesTextFieldDecoration(
errorText: _errorText,
errorMaxLines: 2,
filled: true,
fillColor: Theme.of(context)
.colors
.elevationsOnSurfaceNeutralLv1White,
),
const SizedBox(height: 2),
SizedBox(
width: 300,
child: VoicesTextField(
controller: _textEditingController,
decoration: VoicesTextFieldDecoration(
errorText: _errorText,
errorMaxLines: 2,
filled: true,
fillColor: Theme.of(context)
.colors
.elevationsOnSurfaceNeutralLv1White,
),
),
),
],
),
),
const SizedBox(height: 24),
Wrap(
children: [
VoicesFilledButton(
backgroundColor: Theme.of(context).colors.iconsError,
onTap: () async => _onRemoveKeychainTap(),
child: Text(context.l10n.delete),
),
const SizedBox(width: 8),
VoicesTextButton.custom(
color: Theme.of(context).colors.iconsError,
onTap: () => Navigator.of(context).pop(),
child: Text(context.l10n.cancelButtonText),
),
],
],
),
const SizedBox(height: 24),
Wrap(
children: [
VoicesFilledButton(
backgroundColor: Theme.of(context).colors.iconsError,
onTap: () async => _onRemoveKeychainTap(),
child: Text(context.l10n.delete),
),
const SizedBox(width: 8),
VoicesTextButton.custom(
color: Theme.of(context).colors.iconsError,
onTap: () => Navigator.of(context).pop(),
child: Text(context.l10n.cancelButtonText),
),
],
),
),
],
),
const DialogCloseButton(),
],
),
),
);
}
Expand Down
63 changes: 29 additions & 34 deletions catalyst_voices/lib/pages/account/keychain_deleted_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,40 @@ class KeychainDeletedDialog extends StatelessWidget {

@override
Widget build(BuildContext context) {
return VoicesDesktopDialog(
return VoicesSinglePaneDialog(
backgroundColor: Theme.of(context).colors.iconsBackground,
showBorder: true,
constraints: const BoxConstraints(maxHeight: 260, maxWidth: 900),
child: Stack(
children: [
SizedBox(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 24),
Text(
context.l10n.keychainDeletedDialogTitle,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 48),
Text(
context.l10n.keychainDeletedDialogSubtitle,
style: Theme.of(context).textTheme.titleMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 32),
Text(
context.l10n.keychainDeletedDialogInfo,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 24),
VoicesFilledButton(
onTap: () => Navigator.of(context).pop(),
child: Text(context.l10n.close),
),
],
child: SizedBox(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 24),
Text(
context.l10n.keychainDeletedDialogTitle,
style: Theme.of(context).textTheme.titleLarge,
),
),
const SizedBox(height: 48),
Text(
context.l10n.keychainDeletedDialogSubtitle,
style: Theme.of(context).textTheme.titleMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 32),
Text(
context.l10n.keychainDeletedDialogInfo,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 24),
VoicesFilledButton(
onTap: () => Navigator.of(context).pop(),
child: Text(context.l10n.close),
),
],
),
const DialogCloseButton(),
],
),
),
);
}
Expand Down
2 changes: 1 addition & 1 deletion catalyst_voices/lib/pages/registration/registration_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class _RegistrationDialog extends StatelessWidget {

@override
Widget build(BuildContext context) {
return VoicesDesktopPanelsDialog(
return VoicesTwoPaneDialog(
left: RegistrationInfoPanel(
state: state,
),
Expand Down
79 changes: 56 additions & 23 deletions catalyst_voices/lib/widgets/modals/voices_desktop_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,17 @@ import 'package:catalyst_voices/widgets/buttons/voices_buttons.dart';
import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
import 'package:flutter/material.dart';

class VoicesDesktopDialog extends StatelessWidget {
/// Commonly used structure for desktop dialogs.
///
/// Keep in mind that this dialog has fixed size of 900x600 and
/// is always adding close button in top right corner.
class VoicesSinglePaneDialog extends StatelessWidget {
final BoxConstraints constraints;
final Color? backgroundColor;
final bool showBorder;
final Widget child;

const VoicesDesktopDialog({
const VoicesSinglePaneDialog({
super.key,
this.constraints = const BoxConstraints(minWidth: 900, minHeight: 600),
this.backgroundColor,
Expand All @@ -18,21 +22,15 @@ class VoicesDesktopDialog extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Dialog(
shape: showBorder
? RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(
color: Theme.of(context).colors.outlineBorderVariant!,
),
)
: Theme.of(context).dialogTheme.shape,
backgroundColor: backgroundColor,
alignment: Alignment.topCenter,
insetPadding: const EdgeInsets.symmetric(horizontal: 40, vertical: 90),
child: ConstrainedBox(
constraints: constraints,
child: child,
return _VoicesDesktopDialog(
backgroundColor: Theme.of(context).colors.iconsBackground,
showBorder: true,
constraints: constraints,
child: Stack(
children: [
child,
const _DialogCloseButton(),
],
),
);
}
Expand All @@ -42,11 +40,11 @@ class VoicesDesktopDialog extends StatelessWidget {
///
/// Keep in mind that this dialog has fixed size of 900x600 and
/// is always adding close button in top right corner.
class VoicesDesktopPanelsDialog extends StatelessWidget {
class VoicesTwoPaneDialog extends StatelessWidget {
final Widget left;
final Widget right;

const VoicesDesktopPanelsDialog({
const VoicesTwoPaneDialog({
super.key,
required this.left,
required this.right,
Expand All @@ -56,7 +54,7 @@ class VoicesDesktopPanelsDialog extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context);

return VoicesDesktopDialog(
return _VoicesDesktopDialog(
constraints: const BoxConstraints.tightFor(width: 900, height: 600),
child: Stack(
children: [
Expand All @@ -80,15 +78,50 @@ class VoicesDesktopPanelsDialog extends StatelessWidget {
),
],
),
const DialogCloseButton(),
const _DialogCloseButton(),
],
),
);
}
}

class DialogCloseButton extends StatelessWidget {
const DialogCloseButton({super.key});
class _VoicesDesktopDialog extends StatelessWidget {
final BoxConstraints constraints;
final Color? backgroundColor;
final bool showBorder;
final Widget child;

const _VoicesDesktopDialog({
this.constraints = const BoxConstraints(minWidth: 900, minHeight: 600),
this.backgroundColor,
this.showBorder = false,
required this.child,
});

@override
Widget build(BuildContext context) {
return Dialog(
shape: showBorder
? RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(
color: Theme.of(context).colors.outlineBorderVariant!,
),
)
: Theme.of(context).dialogTheme.shape,
backgroundColor: backgroundColor,
alignment: Alignment.topCenter,
insetPadding: const EdgeInsets.symmetric(horizontal: 40, vertical: 90),
child: ConstrainedBox(
constraints: constraints,
child: child,
),
);
}
}

class _DialogCloseButton extends StatelessWidget {
const _DialogCloseButton();

@override
Widget build(BuildContext context) {
Expand Down
Loading

0 comments on commit 50974e4

Please sign in to comment.