From 72a170433d6bcb9b6f9a55d3a5dea4e4954ec438 Mon Sep 17 00:00:00 2001 From: julian Date: Sun, 2 Apr 2023 11:50:15 -0600 Subject: [PATCH] refactor and add address list button to desktop wallet options pop up menu --- .../wallet_view/desktop_wallet_view.dart | 4 +- .../sub_widgets/delete_wallet_button.dart | 164 ----------- .../sub_widgets/wallet_options_button.dart | 268 ++++++++++++++++++ 3 files changed, 270 insertions(+), 166 deletions(-) delete mode 100644 lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/delete_wallet_button.dart create mode 100644 lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/wallet_options_button.dart diff --git a/lib/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart b/lib/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart index f5b120871..49d135c4f 100644 --- a/lib/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart +++ b/lib/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart @@ -4,13 +4,13 @@ import 'package:event_bus/event_bus.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; -import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/delete_wallet_button.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/desktop_wallet_features.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/desktop_wallet_summary.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/my_wallet.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/network_info_button.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/recent_desktop_transactions.dart'; import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/wallet_keys_button.dart'; +import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/wallet_options_button.dart'; import 'package:stackwallet/providers/global/auto_swb_service_provider.dart'; import 'package:stackwallet/providers/providers.dart'; import 'package:stackwallet/providers/ui/transaction_filter_provider.dart'; @@ -208,7 +208,7 @@ class _DesktopWalletViewState extends ConsumerState { const SizedBox( width: 2, ), - DeleteWalletButton( + WalletOptionsButton( walletId: widget.walletId, ), const SizedBox( diff --git a/lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/delete_wallet_button.dart b/lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/delete_wallet_button.dart deleted file mode 100644 index 005c230f3..000000000 --- a/lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/delete_wallet_button.dart +++ /dev/null @@ -1,164 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:flutter_svg/svg.dart'; -import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/desktop_delete_wallet_dialog.dart'; -import 'package:stackwallet/route_generator.dart'; -import 'package:stackwallet/utilities/assets.dart'; -import 'package:stackwallet/utilities/constants.dart'; -import 'package:stackwallet/utilities/text_styles.dart'; -import 'package:stackwallet/utilities/theme/stack_colors.dart'; - -class DeleteWalletButton extends ConsumerStatefulWidget { - const DeleteWalletButton({ - Key? key, - required this.walletId, - }) : super(key: key); - - final String walletId; - - @override - ConsumerState createState() => _DeleteWalletButton(); -} - -class _DeleteWalletButton extends ConsumerState { - late final String walletId; - - @override - void initState() { - walletId = widget.walletId; - - super.initState(); - } - - @override - Widget build(BuildContext context) { - return RawMaterialButton( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(1000), - ), - onPressed: () async { - final shouldOpenDeleteDialog = await showDialog( - context: context, - barrierColor: Colors.transparent, - builder: (context) { - return DeletePopupButton( - onTap: () async { - Navigator.of(context).pop(true); - }, - ); - }, - ); - - if (shouldOpenDeleteDialog == true) { - final result = await showDialog( - context: context, - barrierDismissible: false, - builder: (context) => Navigator( - initialRoute: DesktopDeleteWalletDialog.routeName, - onGenerateRoute: RouteGenerator.generateRoute, - onGenerateInitialRoutes: (_, __) { - return [ - RouteGenerator.generateRoute( - RouteSettings( - name: DesktopDeleteWalletDialog.routeName, - arguments: walletId, - ), - ), - ]; - }, - ), - ); - - if (result == true) { - if (mounted) { - Navigator.of(context).pop(); - } - } - } - }, - child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 19, - horizontal: 32, - ), - child: Row( - children: [ - SvgPicture.asset( - Assets.svg.ellipsis, - width: 20, - height: 20, - color: Theme.of(context) - .extension()! - .buttonTextSecondary, - ), - ], - ), - ), - ); - } -} - -class DeletePopupButton extends StatefulWidget { - const DeletePopupButton({ - Key? key, - this.onTap, - }) : super(key: key); - - final VoidCallback? onTap; - - @override - State createState() => _DeletePopupButtonState(); -} - -class _DeletePopupButtonState extends State { - @override - Widget build(BuildContext context) { - return Stack( - children: [ - Positioned( - top: 24, - left: MediaQuery.of(context).size.width - 234, - child: MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - onTap: widget.onTap, - child: Container( - width: 210, - height: 70, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius * 2, - ), - color: Theme.of(context).extension()!.popupBG, - boxShadow: [ - Theme.of(context) - .extension()! - .standardBoxShadow, - ], - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - const SizedBox(width: 24), - SvgPicture.asset( - Assets.svg.trash, - ), - const SizedBox(width: 14), - Text( - "Delete wallet", - style: STextStyles.desktopTextExtraExtraSmall(context) - .copyWith( - color: Theme.of(context) - .extension()! - .textDark), - ), - ], - ), - ), - ), - ), - ), - ], - ); - } -} diff --git a/lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/wallet_options_button.dart b/lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/wallet_options_button.dart new file mode 100644 index 000000000..e4be9b030 --- /dev/null +++ b/lib/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/wallet_options_button.dart @@ -0,0 +1,268 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/sub_widgets/desktop_delete_wallet_dialog.dart'; +import 'package:stackwallet/route_generator.dart'; +import 'package:stackwallet/utilities/assets.dart'; +import 'package:stackwallet/utilities/constants.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +enum _WalletOptions { + addressList, + deleteWallet; + + String get prettyName { + switch (this) { + case _WalletOptions.addressList: + return "Address list"; + case _WalletOptions.deleteWallet: + return "Delete wallet"; + } + } +} + +class WalletOptionsButton extends ConsumerStatefulWidget { + const WalletOptionsButton({ + Key? key, + required this.walletId, + }) : super(key: key); + + final String walletId; + + @override + ConsumerState createState() => + _WalletOptionsButtonState(); +} + +class _WalletOptionsButtonState extends ConsumerState { + late final String walletId; + + @override + void initState() { + walletId = widget.walletId; + + super.initState(); + } + + @override + Widget build(BuildContext context) { + return RawMaterialButton( + constraints: const BoxConstraints( + minHeight: 32, + minWidth: 32, + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(1000), + ), + onPressed: () async { + final func = await showDialog<_WalletOptions?>( + context: context, + barrierColor: Colors.transparent, + builder: (context) { + return WalletOptionsPopupMenu( + onDeletePressed: () async { + Navigator.of(context).pop(_WalletOptions.deleteWallet); + }, + onAddressListPressed: () async { + Navigator.of(context).pop(_WalletOptions.addressList); + }, + ); + }, + ); + + if (mounted && func != null) { + switch (func) { + case _WalletOptions.addressList: + print("Address list pressed"); + // TODO: Handle this case. + break; + case _WalletOptions.deleteWallet: + final result = await showDialog( + context: context, + barrierDismissible: false, + builder: (context) => Navigator( + initialRoute: DesktopDeleteWalletDialog.routeName, + onGenerateRoute: RouteGenerator.generateRoute, + onGenerateInitialRoutes: (_, __) { + return [ + RouteGenerator.generateRoute( + RouteSettings( + name: DesktopDeleteWalletDialog.routeName, + arguments: walletId, + ), + ), + ]; + }, + ), + ); + + if (result == true) { + if (mounted) { + Navigator.of(context).pop(); + } + } + break; + } + } + }, + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 19, + horizontal: 32, + ), + child: Row( + children: [ + SvgPicture.asset( + Assets.svg.ellipsis, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .buttonTextSecondary, + ), + ], + ), + ), + ); + } +} + +class WalletOptionsPopupMenu extends StatelessWidget { + const WalletOptionsPopupMenu({ + Key? key, + required this.onDeletePressed, + required this.onAddressListPressed, + }) : super(key: key); + + final VoidCallback onDeletePressed; + final VoidCallback onAddressListPressed; + + @override + Widget build(BuildContext context) { + return Stack( + children: [ + Positioned( + top: 24, + left: MediaQuery.of(context).size.width - 234, + child: Container( + width: 220, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius * 2, + ), + color: Theme.of(context).extension()!.popupBG, + boxShadow: [ + Theme.of(context).extension()!.standardBoxShadow, + ], + ), + child: Padding( + padding: const EdgeInsets.all(16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TransparentButton( + onPressed: onAddressListPressed, + child: Padding( + padding: const EdgeInsets.all(8), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + SvgPicture.asset( + Assets.svg.list, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .textFieldActiveSearchIconLeft, + ), + const SizedBox(width: 14), + Expanded( + child: Text( + _WalletOptions.addressList.prettyName, + style: STextStyles.desktopTextExtraExtraSmall( + context) + .copyWith( + color: Theme.of(context) + .extension()! + .textDark, + ), + ), + ), + ], + ), + ), + ), + const SizedBox( + height: 8, + ), + TransparentButton( + onPressed: onDeletePressed, + child: Padding( + padding: const EdgeInsets.all(8), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + SvgPicture.asset( + Assets.svg.trash, + width: 20, + height: 20, + color: Theme.of(context) + .extension()! + .textFieldActiveSearchIconLeft, + ), + const SizedBox(width: 14), + Expanded( + child: Text( + _WalletOptions.deleteWallet.prettyName, + style: STextStyles.desktopTextExtraExtraSmall( + context) + .copyWith( + color: Theme.of(context) + .extension()! + .textDark, + ), + ), + ), + ], + ), + ), + ), + ], + ), + ), + ), + ), + ], + ); + } +} + +class TransparentButton extends StatelessWidget { + const TransparentButton({ + Key? key, + required this.child, + this.onPressed, + }) : super(key: key); + + final Widget child; + final VoidCallback? onPressed; + + @override + Widget build(BuildContext context) { + return RawMaterialButton( + constraints: const BoxConstraints( + minHeight: 32, + minWidth: 32, + ), + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: onPressed, + child: child, + ); + } +}