From 50974e4291c865e6bcccd06fbdef4063358cab44 Mon Sep 17 00:00:00 2001 From: digitalheartxs Date: Fri, 27 Sep 2024 11:46:16 +0200 Subject: [PATCH] feat: My account, modals, refactor base dialogs --- .../pages/account/delete_keychain_dialog.dart | 155 +++++++++--------- .../account/keychain_deleted_dialog.dart | 63 ++++--- .../registration/registration_dialog.dart | 2 +- .../widgets/modals/voices_desktop_dialog.dart | 79 ++++++--- .../widgets/modals/voices_info_dialog.dart | 4 +- 5 files changed, 163 insertions(+), 140 deletions(-) diff --git a/catalyst_voices/lib/pages/account/delete_keychain_dialog.dart b/catalyst_voices/lib/pages/account/delete_keychain_dialog.dart index a269ddfa5a..38c5f403c9 100644 --- a/catalyst_voices/lib/pages/account/delete_keychain_dialog.dart +++ b/catalyst_voices/lib/pages/account/delete_keychain_dialog.dart @@ -41,101 +41,96 @@ class _DeleteKeychainDialogState extends State { @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(), - ], + ), ), ); } diff --git a/catalyst_voices/lib/pages/account/keychain_deleted_dialog.dart b/catalyst_voices/lib/pages/account/keychain_deleted_dialog.dart index fe26bec353..76671de82c 100644 --- a/catalyst_voices/lib/pages/account/keychain_deleted_dialog.dart +++ b/catalyst_voices/lib/pages/account/keychain_deleted_dialog.dart @@ -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(), - ], + ), ), ); } diff --git a/catalyst_voices/lib/pages/registration/registration_dialog.dart b/catalyst_voices/lib/pages/registration/registration_dialog.dart index f2115810bd..99d0b25842 100644 --- a/catalyst_voices/lib/pages/registration/registration_dialog.dart +++ b/catalyst_voices/lib/pages/registration/registration_dialog.dart @@ -41,7 +41,7 @@ class _RegistrationDialog extends StatelessWidget { @override Widget build(BuildContext context) { - return VoicesDesktopPanelsDialog( + return VoicesTwoPaneDialog( left: RegistrationInfoPanel( state: state, ), diff --git a/catalyst_voices/lib/widgets/modals/voices_desktop_dialog.dart b/catalyst_voices/lib/widgets/modals/voices_desktop_dialog.dart index 73f935127e..e56c0a3712 100644 --- a/catalyst_voices/lib/widgets/modals/voices_desktop_dialog.dart +++ b/catalyst_voices/lib/widgets/modals/voices_desktop_dialog.dart @@ -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, @@ -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(), + ], ), ); } @@ -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, @@ -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: [ @@ -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) { diff --git a/catalyst_voices/lib/widgets/modals/voices_info_dialog.dart b/catalyst_voices/lib/widgets/modals/voices_info_dialog.dart index d81bd7b909..fad71161ad 100644 --- a/catalyst_voices/lib/widgets/modals/voices_info_dialog.dart +++ b/catalyst_voices/lib/widgets/modals/voices_info_dialog.dart @@ -6,7 +6,7 @@ import 'package:flutter/material.dart'; /// Opinionated, two panels, dialog that is tailored for desktop /// form factors. /// -/// Uses [VoicesDesktopPanelsDialog] for base structure. +/// Uses [VoicesTwoPaneDialog] for base structure. /// /// Call [VoicesDialog.show] with [VoicesDesktopInfoDialog] in order /// to show it. @@ -22,7 +22,7 @@ class VoicesDesktopInfoDialog extends StatelessWidget { Widget build(BuildContext context) { final theme = Theme.of(context); - return VoicesDesktopPanelsDialog( + return VoicesTwoPaneDialog( left: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [