From 563492d4e85c9557ccb1e7fe4d5a8fb524dfe823 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Thu, 3 Nov 2022 17:11:01 -0600 Subject: [PATCH] conditional and padding for wallet syncing options --- .../syncing_options_view.dart | 625 ++++++++++-------- .../wallet_syncing_options_view.dart | 69 +- 2 files changed, 376 insertions(+), 318 deletions(-) diff --git a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart index a65a03a87..3681009a9 100644 --- a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart +++ b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart @@ -9,6 +9,8 @@ import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; +import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; +import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; class SyncingOptionsView extends ConsumerWidget { @@ -18,8 +20,9 @@ class SyncingOptionsView extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final isDesktop = Util.isDesktop; return ConditionalParent( - condition: !Util.isDesktop, + condition: !isDesktop, builder: (child) { return Scaffold( backgroundColor: @@ -54,317 +57,353 @@ class SyncingOptionsView extends ConsumerWidget { ), ); }, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 10), - child: Column( - children: [ - RoundedWhiteContainer( - padding: const EdgeInsets.all(0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Padding( - padding: const EdgeInsets.all(4), - child: RawMaterialButton( - // splashColor: Theme.of(context).extension()!.highlight, - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - final state = - ref.read(prefsChangeNotifierProvider).syncType; - if (state != SyncingType.currentWalletOnly) { - ref.read(prefsChangeNotifierProvider).syncType = - SyncingType.currentWalletOnly; - - // disable auto sync on all wallets that aren't active/current - ref - .read(walletsChangeNotifierProvider) - .managers - .forEach((e) { - if (!e.isActiveWallet) { - e.shouldAutoSync = false; - } - }); - } - }, - child: Container( - color: Colors.transparent, - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: SyncingType.currentWalletOnly, - groupValue: ref.watch( - prefsChangeNotifierProvider - .select((value) => value.syncType), - ), - onChanged: (value) { - if (value is SyncingType) { - ref - .read(prefsChangeNotifierProvider) - .syncType = value; - } - }, - ), - ), - const SizedBox( - width: 12, - ), - Flexible( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Sync only currently open wallet", - style: STextStyles.titleBold12(context), - textAlign: TextAlign.left, - ), - Text( - "Sync only the wallet that you are using", - style: STextStyles.itemSubtitle(context), - textAlign: TextAlign.left, - ), - ], - ), - ), - ], - ), - ), + child: Column( + children: [ + RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Padding( + padding: const EdgeInsets.all(4), + child: RawMaterialButton( + // splashColor: Theme.of(context).extension()!.highlight, + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, ), ), - ), - Padding( - padding: const EdgeInsets.all(4.0), - child: RawMaterialButton( - // splashColor: Theme.of(context).extension()!.highlight, - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - final state = - ref.read(prefsChangeNotifierProvider).syncType; - if (state != SyncingType.allWalletsOnStartup) { - ref.read(prefsChangeNotifierProvider).syncType = - SyncingType.allWalletsOnStartup; + onPressed: () { + final state = + ref.read(prefsChangeNotifierProvider).syncType; + if (state != SyncingType.currentWalletOnly) { + ref.read(prefsChangeNotifierProvider).syncType = + SyncingType.currentWalletOnly; - // enable auto sync on all wallets - ref - .read(walletsChangeNotifierProvider) - .managers - .forEach((e) => e.shouldAutoSync = true); - } - }, - child: Container( - color: Colors.transparent, - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: SyncingType.allWalletsOnStartup, - groupValue: ref.watch( - prefsChangeNotifierProvider - .select((value) => value.syncType), - ), - onChanged: (value) { - if (value is SyncingType) { - ref - .read(prefsChangeNotifierProvider) - .syncType = value; - } - }, - ), - ), - const SizedBox( - width: 12, - ), - Flexible( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Sync all wallets at startup", - style: STextStyles.titleBold12(context), - textAlign: TextAlign.left, - ), - Text( - "All of your wallets will start syncing when you open the app", - style: STextStyles.itemSubtitle(context), - textAlign: TextAlign.left, - ), - ], - ), - ), - ], - ), - ), - ), - ), - ), - Padding( - padding: const EdgeInsets.all(4), - child: RawMaterialButton( - // splashColor: Theme.of(context).extension()!.highlight, - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - final state = - ref.read(prefsChangeNotifierProvider).syncType; - if (state != SyncingType.selectedWalletsAtStartup) { - ref.read(prefsChangeNotifierProvider).syncType = - SyncingType.selectedWalletsAtStartup; - - final ids = ref - .read(prefsChangeNotifierProvider) - .walletIdsSyncOnStartup; - - // enable auto sync on selected wallets only - ref - .read(walletsChangeNotifierProvider) - .managers - .forEach((e) => - e.shouldAutoSync = ids.contains(e.walletId)); - } - }, - child: Container( - color: Colors.transparent, - child: Padding( - padding: const EdgeInsets.all(8), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: SyncingType.selectedWalletsAtStartup, - groupValue: ref.watch( - prefsChangeNotifierProvider - .select((value) => value.syncType), - ), - onChanged: (value) { - if (value is SyncingType) { - ref - .read(prefsChangeNotifierProvider) - .syncType = value; - } - }, - ), - ), - const SizedBox( - width: 12, - ), - Flexible( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Sync only selected wallets at startup", - style: STextStyles.titleBold12(context), - textAlign: TextAlign.left, - ), - Text( - "Only the wallets you select will start syncing when you open the app", - style: STextStyles.itemSubtitle(context), - textAlign: TextAlign.left, - ), - ], - ), - ), - ], - ), - ), - ), - ), - ), - if (ref.watch(prefsChangeNotifierProvider - .select((value) => value.syncType)) != - SyncingType.selectedWalletsAtStartup) - const SizedBox( - height: 12, - ), - if (ref.watch(prefsChangeNotifierProvider - .select((value) => value.syncType)) == - SyncingType.selectedWalletsAtStartup) - Container( + // disable auto sync on all wallets that aren't active/current + ref + .read(walletsChangeNotifierProvider) + .managers + .forEach((e) { + if (!e.isActiveWallet) { + e.shouldAutoSync = false; + } + }); + } + }, + child: Container( color: Colors.transparent, child: Padding( - padding: const EdgeInsets.only( - left: 12.0, - right: 12, - bottom: 12, - ), + padding: const EdgeInsets.all(8.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ + SizedBox( + width: 20, + height: 20, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: SyncingType.currentWalletOnly, + groupValue: ref.watch( + prefsChangeNotifierProvider + .select((value) => value.syncType), + ), + onChanged: (value) { + if (value is SyncingType) { + ref + .read(prefsChangeNotifierProvider) + .syncType = value; + } + }, + ), + ), const SizedBox( - width: 12 + 20, - height: 12, + width: 12, ), Flexible( - child: RawMaterialButton( - // splashColor: Theme.of(context).extension()!.highlight, - materialTapTargetSize: - MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Sync only currently open wallet", + style: STextStyles.titleBold12(context), + textAlign: TextAlign.left, ), - ), - onPressed: () { - Navigator.of(context).pushNamed( - WalletSyncingOptionsView.routeName); - }, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Select wallets...", - style: STextStyles.link2(context), - textAlign: TextAlign.left, - ), - ], - ), + Text( + "Sync only the wallet that you are using", + style: STextStyles.itemSubtitle(context), + textAlign: TextAlign.left, + ), + ], ), ), ], ), ), ), - ], - ), + ), + ), + Padding( + padding: const EdgeInsets.all(4.0), + child: RawMaterialButton( + // splashColor: Theme.of(context).extension()!.highlight, + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: () { + final state = + ref.read(prefsChangeNotifierProvider).syncType; + if (state != SyncingType.allWalletsOnStartup) { + ref.read(prefsChangeNotifierProvider).syncType = + SyncingType.allWalletsOnStartup; + + // enable auto sync on all wallets + ref + .read(walletsChangeNotifierProvider) + .managers + .forEach((e) => e.shouldAutoSync = true); + } + }, + child: Container( + color: Colors.transparent, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: 20, + height: 20, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: SyncingType.allWalletsOnStartup, + groupValue: ref.watch( + prefsChangeNotifierProvider + .select((value) => value.syncType), + ), + onChanged: (value) { + if (value is SyncingType) { + ref + .read(prefsChangeNotifierProvider) + .syncType = value; + } + }, + ), + ), + const SizedBox( + width: 12, + ), + Flexible( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Sync all wallets at startup", + style: STextStyles.titleBold12(context), + textAlign: TextAlign.left, + ), + Text( + "All of your wallets will start syncing when you open the app", + style: STextStyles.itemSubtitle(context), + textAlign: TextAlign.left, + ), + ], + ), + ), + ], + ), + ), + ), + ), + ), + Padding( + padding: const EdgeInsets.all(4), + child: RawMaterialButton( + // splashColor: Theme.of(context).extension()!.highlight, + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: () { + final state = + ref.read(prefsChangeNotifierProvider).syncType; + if (state != SyncingType.selectedWalletsAtStartup) { + ref.read(prefsChangeNotifierProvider).syncType = + SyncingType.selectedWalletsAtStartup; + + final ids = ref + .read(prefsChangeNotifierProvider) + .walletIdsSyncOnStartup; + + // enable auto sync on selected wallets only + ref + .read(walletsChangeNotifierProvider) + .managers + .forEach((e) => + e.shouldAutoSync = ids.contains(e.walletId)); + } + }, + child: Container( + color: Colors.transparent, + child: Padding( + padding: const EdgeInsets.all(8), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: 20, + height: 20, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: SyncingType.selectedWalletsAtStartup, + groupValue: ref.watch( + prefsChangeNotifierProvider + .select((value) => value.syncType), + ), + onChanged: (value) { + if (value is SyncingType) { + ref + .read(prefsChangeNotifierProvider) + .syncType = value; + } + }, + ), + ), + const SizedBox( + width: 12, + ), + Flexible( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Sync only selected wallets at startup", + style: STextStyles.titleBold12(context), + textAlign: TextAlign.left, + ), + Text( + "Only the wallets you select will start syncing when you open the app", + style: STextStyles.itemSubtitle(context), + textAlign: TextAlign.left, + ), + ], + ), + ), + ], + ), + ), + ), + ), + ), + if (ref.watch(prefsChangeNotifierProvider + .select((value) => value.syncType)) != + SyncingType.selectedWalletsAtStartup) + const SizedBox( + height: 12, + ), + if (ref.watch(prefsChangeNotifierProvider + .select((value) => value.syncType)) == + SyncingType.selectedWalletsAtStartup) + Container( + color: Colors.transparent, + child: Padding( + padding: const EdgeInsets.only( + left: 12.0, + right: 12, + bottom: 12, + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox( + width: 12 + 20, + height: 12, + ), + Flexible( + child: RawMaterialButton( + // splashColor: Theme.of(context).extension()!.highlight, + materialTapTargetSize: + MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: () { + !isDesktop + ? Navigator.of(context).pushNamed( + WalletSyncingOptionsView.routeName) + : showDialog( + context: context, + useSafeArea: false, + barrierDismissible: true, + builder: (context) { + return DesktopDialog( + maxWidth: 600, + maxHeight: 800, + child: Column( + children: [ + Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Padding( + padding: + const EdgeInsets.all( + 32), + child: Text( + "Select wallets to sync", + style: STextStyles + .desktopH3(context), + textAlign: + TextAlign.center, + ), + ), + const DesktopDialogCloseButton(), + ], + ), + const Expanded( + child: + WalletSyncingOptionsView(), + ), + ], + ), + ); + }); + }, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Select wallets...", + style: STextStyles.link2(context), + textAlign: TextAlign.left, + ), + ], + ), + ), + ), + ], + ), + ), + ), + ], ), - ], - ), + ), + ], ), ); } diff --git a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart index 1e302cf12..c615d5f94 100644 --- a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart +++ b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart @@ -10,7 +10,9 @@ import 'package:stackwallet/utilities/enums/sync_type_enum.dart'; import 'package:stackwallet/utilities/format.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/widgets/animated_text.dart'; +import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; @@ -25,30 +27,47 @@ class WalletSyncingOptionsView extends ConsumerWidget { final managers = ref .watch(walletsChangeNotifierProvider.select((value) => value.managers)); - return Scaffold( - backgroundColor: Theme.of(context).extension()!.background, - appBar: AppBar( - leading: AppBarBackButton( - onPressed: () async { - Navigator.of(context).pop(); - }, - ), - title: FittedBox( - fit: BoxFit.scaleDown, - child: Text( - "Sync only selected wallets at startup", - style: STextStyles.navBarTitle(context), + final isDesktop = Util.isDesktop; + return ConditionalParent( + condition: !isDesktop, + builder: (child) { + return Scaffold( + backgroundColor: + Theme.of(context).extension()!.background, + appBar: AppBar( + leading: AppBarBackButton( + onPressed: () async { + Navigator.of(context).pop(); + }, + ), + title: FittedBox( + fit: BoxFit.scaleDown, + child: Text( + "Sync only selected wallets at startup", + style: STextStyles.navBarTitle(context), + ), + ), ), - ), - ), - body: LayoutBuilder(builder: (context, constraints) { - return Padding( - padding: const EdgeInsets.only( - left: 12, - top: 12, - right: 12, + body: Padding( + padding: const EdgeInsets.only( + left: 12, + top: 12, + right: 12, + ), + child: child, ), - child: SingleChildScrollView( + ); + }, + child: ConditionalParent( + condition: isDesktop, + builder: (child) { + return Padding( + padding: EdgeInsets.symmetric(horizontal: 32), + child: child, + ); + }, + child: LayoutBuilder(builder: (context, constraints) { + return SingleChildScrollView( child: ConstrainedBox( constraints: BoxConstraints( minHeight: constraints.maxHeight - 24, @@ -208,9 +227,9 @@ class WalletSyncingOptionsView extends ConsumerWidget { ), ), ), - ), - ); - }), + ); + }), + ), ); } }