From 66e1db9b52021689ce208b86c593c9cf96d0daa1 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Wed, 26 Jul 2023 15:10:53 -0600 Subject: [PATCH] WIP: scaling monkey view for desktop --- lib/pages/monkey/monkey_view.dart | 315 ++++++++++++++++++++---------- 1 file changed, 207 insertions(+), 108 deletions(-) diff --git a/lib/pages/monkey/monkey_view.dart b/lib/pages/monkey/monkey_view.dart index 075191235..83901fbca 100644 --- a/lib/pages/monkey/monkey_view.dart +++ b/lib/pages/monkey/monkey_view.dart @@ -9,6 +9,7 @@ import 'package:path_provider/path_provider.dart'; import 'package:permission_handler/permission_handler.dart'; import 'package:stackwallet/pages/monkey/sub_widgets/fetch_monkey_dialog.dart'; import 'package:stackwallet/pages/wallet_view/wallet_view.dart'; +import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart'; import 'package:stackwallet/providers/global/wallets_provider.dart'; import 'package:stackwallet/services/coins/banano/banano_wallet.dart'; import 'package:stackwallet/services/coins/manager.dart'; @@ -17,6 +18,7 @@ import 'package:stackwallet/themes/stack_colors.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/widgets/background.dart'; import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; @@ -24,6 +26,9 @@ import 'package:stackwallet/widgets/desktop/primary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/stack_dialog.dart'; +import '../../widgets/desktop/desktop_app_bar.dart'; +import '../../widgets/desktop/desktop_scaffold.dart'; + class MonkeyView extends ConsumerStatefulWidget { const MonkeyView({ Key? key, @@ -193,25 +198,57 @@ class _MonkeyViewState extends ConsumerState { final manager = ref.watch(walletsChangeNotifierProvider .select((value) => value.getManager(widget.walletId))); + final bool isDesktop = Util.isDesktop; + List? imageBytes; imageBytes = (manager.wallet as BananoWallet).getMonkeyImageBytes(); + //edit for desktop return Background( child: Stack( children: [ - Scaffold( - appBar: AppBar( - leading: AppBarBackButton( - onPressed: () { - Navigator.of(context).pop(); - }, - ), - title: Text( - "MonKey", - style: STextStyles.navBarTitle(context), - ), - actions: [ - AspectRatio( + ConditionalParent( + condition: isDesktop, + builder: (child) => DesktopScaffold( + appBar: DesktopAppBar( + background: Theme.of(context).extension()!.popupBG, + leading: Expanded( + child: Row( + children: [ + const SizedBox( + width: 32, + ), + AppBarIconButton( + size: 32, + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + shadows: const [], + icon: SvgPicture.asset( + Assets.svg.arrowLeft, + width: 18, + height: 18, + color: Theme.of(context) + .extension()! + .topNavIconPrimary, + ), + onPressed: () { + if (mounted) { + Navigator.of(context).pop(); + } + }, + ), + const SizedBox( + width: 15, + ), + Text( + "MonKey", + style: STextStyles.navBarTitle(context), + ), + ], + ), + ), + trailing: AspectRatio( aspectRatio: 1, child: AppBarIconButton( icon: SvgPicture.asset(Assets.svg.circleQuestion), @@ -221,7 +258,7 @@ class _MonkeyViewState extends ConsumerState { useSafeArea: false, barrierDismissible: true, builder: (context) { - return const StackOkDialog( + return const StackDialog( title: "About MonKeys", message: "A MonKey is a visual representation of your Banano address.", @@ -229,112 +266,174 @@ class _MonkeyViewState extends ConsumerState { }); }), ), - ], - ), - body: ConditionalParent( - condition: imageBytes != null, - builder: (child) => Column( - children: [ - const Spacer( - flex: 1, - ), - if (imageBytes != null) - Container( - child: SvgPicture.memory(Uint8List.fromList(imageBytes!)), - width: 300, - height: 300, - ), - const Spacer( - flex: 1, - ), - Padding( - padding: const EdgeInsets.all(16.0), - child: Column( - children: [ - SecondaryButton( - label: "Download as SVG", - onPressed: () async { - getMonkeySVG(receivingAddress); - }, - ), - const SizedBox(height: 12), - SecondaryButton( - label: "Download as PNG", - onPressed: () { - getMonkeyPNG(receivingAddress); - }, - ), - ], - ), - ), - // child, - ], + useSpacers: false, + isCompactHeight: true, ), - child: Column( - children: [ - const Spacer( - flex: 4, + body: child, + ), + child: ConditionalParent( + condition: !isDesktop, + builder: (child) => Scaffold( + appBar: AppBar( + leading: AppBarBackButton( + onPressed: () { + Navigator.of(context).pop(); + }, ), - Center( - child: Column( - children: [ - Opacity( - opacity: 0.2, - child: SvgPicture.file( - File( - ref.watch(coinIconProvider(coin)), - ), - width: 200, - height: 200, - ), - ), - const SizedBox( - height: 40, - ), - Text( - "You do not have a MonKey yet. \nFetch yours now!", - style: STextStyles.smallMed14(context).copyWith( + title: Text( + "MonKey", + style: STextStyles.navBarTitle(context), + ), + actions: [ + AspectRatio( + aspectRatio: 1, + child: AppBarIconButton( + icon: SvgPicture.asset( + Assets.svg.circleQuestion, color: Theme.of(context) .extension()! - .textDark3, + .infoItemText, ), - textAlign: TextAlign.center, - ), - ], + onPressed: () { + showDialog( + context: context, + useSafeArea: false, + barrierDismissible: true, + builder: (context) { + return const StackOkDialog( + title: "About MonKeys", + message: + "A MonKey is a visual representation of your Banano address.", + ); + }); + }), ), + ], + ), + body: child, + ), + child: ConditionalParent( + condition: isDesktop, + builder: (child) => SizedBox( + width: 300, + height: 300, + child: child, + ), + child: ConditionalParent( + condition: imageBytes != null, + builder: (child) => Column( + children: [ + const Spacer( + flex: 1, + ), + if (imageBytes != null) + Container( + child: SvgPicture.memory( + Uint8List.fromList(imageBytes!)), + width: 300, + height: 300, + ), + const Spacer( + flex: 1, + ), + Padding( + padding: const EdgeInsets.all(16.0), + child: Column( + children: [ + SecondaryButton( + label: "Download as SVG", + onPressed: () async { + getMonkeySVG(receivingAddress); + }, + ), + const SizedBox(height: 12), + SecondaryButton( + label: "Download as PNG", + onPressed: () { + getMonkeyPNG(receivingAddress); + }, + ), + ], + ), + ), + // child, + ], ), - const Spacer( - flex: 6, - ), - Padding( - padding: const EdgeInsets.all(16.0), - child: PrimaryButton( - label: "Fetch MonKey", - onPressed: () async { - getMonkeyImage(receivingAddress); + child: Column( + children: [ + const Spacer( + flex: 4, + ), + Center( + child: Column( + children: [ + Opacity( + opacity: 0.2, + child: SvgPicture.file( + File( + ref.watch(coinIconProvider(coin)), + ), + width: 200, + height: 200, + ), + ), + const SizedBox( + height: 40, + ), + Text( + "You do not have a MonKey yet. \nFetch yours now!", + style: STextStyles.smallMed14(context).copyWith( + color: Theme.of(context) + .extension()! + .textDark3, + ), + textAlign: TextAlign.center, + ), + ], + ), + ), + const Spacer( + flex: 6, + ), + Padding( + padding: const EdgeInsets.all(16.0), + child: PrimaryButton( + label: "Fetch MonKey", + onPressed: () async { + getMonkeyImage(receivingAddress); - showDialog( - context: context, - useSafeArea: false, - barrierDismissible: false, - builder: (context) { - return FetchMonkeyDialog( - onCancel: () async { - Navigator.of(context).pop(); + showDialog( + context: context, + useSafeArea: false, + barrierDismissible: false, + builder: (context) { + return FetchMonkeyDialog( + onCancel: () async { + Navigator.of(context).pop(); + }, + ); }, ); + + await Future.delayed( + const Duration(seconds: 2)); + + if (isDesktop) { + Navigator.of(context).popUntil( + ModalRoute.withName( + DesktopWalletView.routeName), + ); + } else { + Navigator.of(context).popUntil( + ModalRoute.withName(WalletView.routeName), + ); + } }, - ); - - await Future.delayed(const Duration(seconds: 2)); - - Navigator.of(context).popUntil( - ModalRoute.withName(WalletView.routeName), - ); - }, - ), + ), + ), + ], ), - ], + ), ), ), ),