diff --git a/lib/pages/settings_views/global_settings_view/currency_view.dart b/lib/pages/settings_views/global_settings_view/currency_view.dart index e884393bd..4f2c3258c 100644 --- a/lib/pages/settings_views/global_settings_view/currency_view.dart +++ b/lib/pages/settings_views/global_settings_view/currency_view.dart @@ -7,13 +7,17 @@ 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'; +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/primary_button.dart'; +import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/icon_widgets/x_icon.dart'; import 'package:stackwallet/widgets/rounded_container.dart'; import 'package:stackwallet/widgets/stack_text_field.dart'; import 'package:stackwallet/widgets/textfield_icon_button.dart'; -import 'package:stackwallet/utilities/util.dart'; +import '../../../widgets/rounded_white_container.dart'; class BaseCurrencySettingsView extends ConsumerStatefulWidget { const BaseCurrencySettingsView({Key? key}) : super(key: key); @@ -102,31 +106,90 @@ class _CurrencyViewState extends ConsumerState { currenciesWithoutSelected.insert(0, current); } currenciesWithoutSelected = _filtered(); - return Scaffold( - backgroundColor: Theme.of(context).extension()!.background, - appBar: AppBar( - leading: AppBarBackButton( - onPressed: () async { - if (FocusScope.of(context).hasFocus) { - FocusScope.of(context).unfocus(); - await Future.delayed(const Duration(milliseconds: 75)); - } - if (mounted) { - Navigator.of(context).pop(); - } - }, - ), - title: Text( - "Currency", - style: STextStyles.navBarTitle(context), - ), - ), - body: Padding( - padding: const EdgeInsets.only( - top: 12, - left: 16, - right: 16, - ), + final isDesktop = Util.isDesktop; + + return ConditionalParent( + condition: !isDesktop, + builder: (child) { + return Scaffold( + backgroundColor: + Theme.of(context).extension()!.background, + appBar: AppBar( + leading: AppBarBackButton( + onPressed: () async { + if (FocusScope.of(context).hasFocus) { + FocusScope.of(context).unfocus(); + await Future.delayed(const Duration(milliseconds: 75)); + } + if (mounted) { + Navigator.of(context).pop(); + } + }, + ), + title: Text( + "Currency", + style: STextStyles.navBarTitle(context), + ), + ), + body: Padding( + padding: const EdgeInsets.only( + top: 12, + left: 16, + right: 16, + ), + child: child, + ), + ); + }, + child: ConditionalParent( + condition: isDesktop, + builder: (child) { + return Padding( + padding: const EdgeInsets.only( + top: 16, + bottom: 32, + left: 32, + right: 32, + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Expanded( + child: RoundedWhiteContainer( + padding: const EdgeInsets.all(20), + borderColor: + Theme.of(context).extension()!.background, + child: child, + ), + ), + const SizedBox( + height: 16, + ), + Row( + children: [ + Expanded( + child: SecondaryButton( + label: "Cancel", + desktopMed: true, + onPressed: Navigator.of(context).pop, + ), + ), + const SizedBox( + width: 16, + ), + Expanded( + child: PrimaryButton( + label: "Save changes", + desktopMed: true, + onPressed: Navigator.of(context).pop, + ), + ), + ], + ), + ], + ), + ); + }, child: NestedScrollView( floatHeaderSlivers: true, headerSliverBuilder: (context, innerBoxIsScrolled) { diff --git a/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_dialog.dart b/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_dialog.dart index bbe98c1af..602589cea 100644 --- a/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_dialog.dart +++ b/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_dialog.dart @@ -1,371 +1,371 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:flutter_svg/svg.dart'; -import 'package:stackwallet/providers/global/base_currencies_provider.dart'; -import 'package:stackwallet/providers/global/prefs_provider.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'; -import 'package:stackwallet/utilities/util.dart'; -import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; -import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; -import 'package:stackwallet/widgets/desktop/primary_button.dart'; -import 'package:stackwallet/widgets/desktop/secondary_button.dart'; -import 'package:stackwallet/widgets/icon_widgets/x_icon.dart'; -import 'package:stackwallet/widgets/rounded_container.dart'; -import 'package:stackwallet/widgets/stack_text_field.dart'; -import 'package:stackwallet/widgets/textfield_icon_button.dart'; - -class CurrencyDialog extends ConsumerStatefulWidget { - const CurrencyDialog({Key? key}) : super(key: key); - - @override - ConsumerState createState() => _CurrencyDialog(); -} - -class _CurrencyDialog extends ConsumerState { - late String current; - late List currenciesWithoutSelected; - - late final TextEditingController searchCurrencyController; - - late final FocusNode searchCurrencyFocusNode; - - void onTap(int index) { - if (currenciesWithoutSelected[index] == current || current.isEmpty) { - // ignore if already selected currency - return; - } - current = currenciesWithoutSelected[index]; - currenciesWithoutSelected.remove(current); - currenciesWithoutSelected.insert(0, current); - ref.read(prefsChangeNotifierProvider).currency = current; - } - - BorderRadius? _borderRadius(int index) { - if (index == 0 && currenciesWithoutSelected.length == 1) { - return BorderRadius.circular( - Constants.size.circularBorderRadius, - ); - } else if (index == 0) { - return BorderRadius.vertical( - top: Radius.circular( - Constants.size.circularBorderRadius, - ), - ); - } else if (index == currenciesWithoutSelected.length - 1) { - return BorderRadius.vertical( - bottom: Radius.circular( - Constants.size.circularBorderRadius, - ), - ); - } - return null; - } - - String filter = ""; - - List _filtered() { - final currencyMap = ref.read(baseCurrenciesProvider).map; - return currenciesWithoutSelected.where((element) { - return element.toLowerCase().contains(filter.toLowerCase()) || - (currencyMap[element]?.toLowerCase().contains(filter.toLowerCase()) ?? - false); - }).toList(); - } - - @override - void initState() { - searchCurrencyController = TextEditingController(); - - searchCurrencyFocusNode = FocusNode(); - - super.initState(); - } - - @override - void dispose() { - searchCurrencyController.dispose(); - - searchCurrencyFocusNode.dispose(); - - super.dispose(); - } - - @override - Widget build(BuildContext context) { - current = ref - .watch(prefsChangeNotifierProvider.select((value) => value.currency)); - - currenciesWithoutSelected = ref - .watch(baseCurrenciesProvider.select((value) => value.map)) - .keys - .toList(); - if (current.isNotEmpty) { - currenciesWithoutSelected.remove(current); - currenciesWithoutSelected.insert(0, current); - } - currenciesWithoutSelected = _filtered(); - - return DesktopDialog( - maxHeight: 800, - maxWidth: 600, - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Padding( - padding: const EdgeInsets.all(32), - child: Text( - "Select currency", - style: STextStyles.desktopH3(context), - textAlign: TextAlign.center, - ), - ), - const DesktopDialogCloseButton(), - ], - ), - Expanded( - flex: 24, - child: NestedScrollView( - floatHeaderSlivers: true, - headerSliverBuilder: (context, innerBoxIsScrolled) { - return [ - SliverOverlapAbsorber( - handle: NestedScrollView.sliverOverlapAbsorberHandleFor( - context), - sliver: SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 16, horizontal: 32), - child: Column( - children: [ - Padding( - padding: const EdgeInsets.only(bottom: 16), - child: ClipRRect( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - child: TextField( - autocorrect: Util.isDesktop ? false : true, - enableSuggestions: - Util.isDesktop ? false : true, - controller: searchCurrencyController, - focusNode: searchCurrencyFocusNode, - onChanged: (newString) { - setState(() => filter = newString); - }, - style: STextStyles.field(context), - decoration: standardInputDecoration( - "Search", - searchCurrencyFocusNode, - context, - ).copyWith( - prefixIcon: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 10, - vertical: 16, - ), - child: SvgPicture.asset( - Assets.svg.search, - width: 16, - height: 16, - ), - ), - suffixIcon: searchCurrencyController - .text.isNotEmpty - ? Padding( - padding: - const EdgeInsets.only(right: 0), - child: UnconstrainedBox( - child: Row( - children: [ - TextFieldIconButton( - child: const XIcon(), - onTap: () async { - setState(() { - searchCurrencyController - .text = ""; - filter = ""; - }); - }, - ), - ], - ), - ), - ) - : null, - ), - ), - ), - ), - ], - ), - ), - ), - ), - ]; - }, - body: Builder( - builder: (context) { - return CustomScrollView( - slivers: [ - SliverOverlapInjector( - handle: NestedScrollView.sliverOverlapAbsorberHandleFor( - context, - ), - ), - SliverList( - delegate: SliverChildBuilderDelegate( - (context, index) { - return Container( - decoration: BoxDecoration( - color: Theme.of(context) - .extension()! - .popupBG, - borderRadius: _borderRadius(index), - ), - child: Padding( - padding: const EdgeInsets.all(4), - key: Key( - "desktopSettingsCurrencySelect_${currenciesWithoutSelected[index]}"), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 32), - child: RoundedContainer( - padding: const EdgeInsets.all(0), - color: currenciesWithoutSelected[index] == - current - ? Theme.of(context) - .extension()! - .currencyListItemBG - : Theme.of(context) - .extension()! - .popupBG, - child: RawMaterialButton( - onPressed: () async { - onTap(index); - }, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - child: Padding( - padding: const EdgeInsets.all(12.0), - child: Row( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - SizedBox( - width: 20, - height: 20, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - materialTapTargetSize: - MaterialTapTargetSize - .shrinkWrap, - value: true, - groupValue: - currenciesWithoutSelected[ - index] == - current, - onChanged: (_) { - onTap(index); - }, - ), - ), - const SizedBox( - width: 12, - ), - Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - currenciesWithoutSelected[ - index], - key: (currenciesWithoutSelected[ - index] == - current) - ? const Key( - "desktopSettingsSelectedCurrencyText") - : null, - style: - STextStyles.largeMedium14( - context), - ), - const SizedBox( - height: 2, - ), - Text( - ref.watch(baseCurrenciesProvider - .select((value) => - value.map))[ - currenciesWithoutSelected[ - index]] ?? - "", - key: (currenciesWithoutSelected[ - index] == - current) - ? const Key( - "desktopSelectedCurrencyTextDescription") - : null, - style: - STextStyles.itemSubtitle( - context), - ), - ], - ), - ], - ), - ), - ), - ), - ), - ), - ); - }, - childCount: currenciesWithoutSelected.length, - ), - ), - ], - ); - }, - ), - ), - ), - const Spacer(), - Padding( - padding: const EdgeInsets.all(32), - child: Row( - children: [ - Expanded( - child: SecondaryButton( - label: "Cancel", - onPressed: () { - Navigator.of(context).pop(); - }, - ), - ), - const SizedBox( - width: 16, - ), - Expanded( - child: PrimaryButton( - label: "Save Changes", - onPressed: () {}, - ), - ) - ], - ), - ), - ], - ), - ); - } -} +// import 'package:flutter/material.dart'; +// import 'package:flutter_riverpod/flutter_riverpod.dart'; +// import 'package:flutter_svg/svg.dart'; +// import 'package:stackwallet/providers/global/base_currencies_provider.dart'; +// import 'package:stackwallet/providers/global/prefs_provider.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'; +// import 'package:stackwallet/utilities/util.dart'; +// import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; +// import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; +// import 'package:stackwallet/widgets/desktop/primary_button.dart'; +// import 'package:stackwallet/widgets/desktop/secondary_button.dart'; +// import 'package:stackwallet/widgets/icon_widgets/x_icon.dart'; +// import 'package:stackwallet/widgets/rounded_container.dart'; +// import 'package:stackwallet/widgets/stack_text_field.dart'; +// import 'package:stackwallet/widgets/textfield_icon_button.dart'; +// +// class CurrencyDialog extends ConsumerStatefulWidget { +// const CurrencyDialog({Key? key}) : super(key: key); +// +// @override +// ConsumerState createState() => _CurrencyDialog(); +// } +// +// class _CurrencyDialog extends ConsumerState { +// late String current; +// late List currenciesWithoutSelected; +// +// late final TextEditingController searchCurrencyController; +// +// late final FocusNode searchCurrencyFocusNode; +// +// void onTap(int index) { +// if (currenciesWithoutSelected[index] == current || current.isEmpty) { +// // ignore if already selected currency +// return; +// } +// current = currenciesWithoutSelected[index]; +// currenciesWithoutSelected.remove(current); +// currenciesWithoutSelected.insert(0, current); +// ref.read(prefsChangeNotifierProvider).currency = current; +// } +// +// BorderRadius? _borderRadius(int index) { +// if (index == 0 && currenciesWithoutSelected.length == 1) { +// return BorderRadius.circular( +// Constants.size.circularBorderRadius, +// ); +// } else if (index == 0) { +// return BorderRadius.vertical( +// top: Radius.circular( +// Constants.size.circularBorderRadius, +// ), +// ); +// } else if (index == currenciesWithoutSelected.length - 1) { +// return BorderRadius.vertical( +// bottom: Radius.circular( +// Constants.size.circularBorderRadius, +// ), +// ); +// } +// return null; +// } +// +// String filter = ""; +// +// List _filtered() { +// final currencyMap = ref.read(baseCurrenciesProvider).map; +// return currenciesWithoutSelected.where((element) { +// return element.toLowerCase().contains(filter.toLowerCase()) || +// (currencyMap[element]?.toLowerCase().contains(filter.toLowerCase()) ?? +// false); +// }).toList(); +// } +// +// @override +// void initState() { +// searchCurrencyController = TextEditingController(); +// +// searchCurrencyFocusNode = FocusNode(); +// +// super.initState(); +// } +// +// @override +// void dispose() { +// searchCurrencyController.dispose(); +// +// searchCurrencyFocusNode.dispose(); +// +// super.dispose(); +// } +// +// @override +// Widget build(BuildContext context) { +// current = ref +// .watch(prefsChangeNotifierProvider.select((value) => value.currency)); +// +// currenciesWithoutSelected = ref +// .watch(baseCurrenciesProvider.select((value) => value.map)) +// .keys +// .toList(); +// if (current.isNotEmpty) { +// currenciesWithoutSelected.remove(current); +// currenciesWithoutSelected.insert(0, current); +// } +// currenciesWithoutSelected = _filtered(); +// +// return DesktopDialog( +// maxHeight: 800, +// maxWidth: 600, +// child: Column( +// children: [ +// Row( +// mainAxisAlignment: MainAxisAlignment.spaceBetween, +// children: [ +// Padding( +// padding: const EdgeInsets.all(32), +// child: Text( +// "Select currency", +// style: STextStyles.desktopH3(context), +// textAlign: TextAlign.center, +// ), +// ), +// const DesktopDialogCloseButton(), +// ], +// ), +// Expanded( +// flex: 24, +// child: NestedScrollView( +// floatHeaderSlivers: true, +// headerSliverBuilder: (context, innerBoxIsScrolled) { +// return [ +// SliverOverlapAbsorber( +// handle: NestedScrollView.sliverOverlapAbsorberHandleFor( +// context), +// sliver: SliverToBoxAdapter( +// child: Padding( +// padding: const EdgeInsets.symmetric( +// vertical: 16, horizontal: 32), +// child: Column( +// children: [ +// Padding( +// padding: const EdgeInsets.only(bottom: 16), +// child: ClipRRect( +// borderRadius: BorderRadius.circular( +// Constants.size.circularBorderRadius, +// ), +// child: TextField( +// autocorrect: Util.isDesktop ? false : true, +// enableSuggestions: +// Util.isDesktop ? false : true, +// controller: searchCurrencyController, +// focusNode: searchCurrencyFocusNode, +// onChanged: (newString) { +// setState(() => filter = newString); +// }, +// style: STextStyles.field(context), +// decoration: standardInputDecoration( +// "Search", +// searchCurrencyFocusNode, +// context, +// ).copyWith( +// prefixIcon: Padding( +// padding: const EdgeInsets.symmetric( +// horizontal: 10, +// vertical: 16, +// ), +// child: SvgPicture.asset( +// Assets.svg.search, +// width: 16, +// height: 16, +// ), +// ), +// suffixIcon: searchCurrencyController +// .text.isNotEmpty +// ? Padding( +// padding: +// const EdgeInsets.only(right: 0), +// child: UnconstrainedBox( +// child: Row( +// children: [ +// TextFieldIconButton( +// child: const XIcon(), +// onTap: () async { +// setState(() { +// searchCurrencyController +// .text = ""; +// filter = ""; +// }); +// }, +// ), +// ], +// ), +// ), +// ) +// : null, +// ), +// ), +// ), +// ), +// ], +// ), +// ), +// ), +// ), +// ]; +// }, +// body: Builder( +// builder: (context) { +// return CustomScrollView( +// slivers: [ +// SliverOverlapInjector( +// handle: NestedScrollView.sliverOverlapAbsorberHandleFor( +// context, +// ), +// ), +// SliverList( +// delegate: SliverChildBuilderDelegate( +// (context, index) { +// return Container( +// decoration: BoxDecoration( +// color: Theme.of(context) +// .extension()! +// .popupBG, +// borderRadius: _borderRadius(index), +// ), +// child: Padding( +// padding: const EdgeInsets.all(4), +// key: Key( +// "desktopSettingsCurrencySelect_${currenciesWithoutSelected[index]}"), +// child: Padding( +// padding: const EdgeInsets.symmetric( +// horizontal: 32), +// child: RoundedContainer( +// padding: const EdgeInsets.all(0), +// color: currenciesWithoutSelected[index] == +// current +// ? Theme.of(context) +// .extension()! +// .currencyListItemBG +// : Theme.of(context) +// .extension()! +// .popupBG, +// child: RawMaterialButton( +// onPressed: () async { +// onTap(index); +// }, +// shape: RoundedRectangleBorder( +// borderRadius: BorderRadius.circular( +// Constants.size.circularBorderRadius, +// ), +// ), +// child: Padding( +// padding: const EdgeInsets.all(12.0), +// child: Row( +// crossAxisAlignment: +// CrossAxisAlignment.start, +// children: [ +// SizedBox( +// width: 20, +// height: 20, +// child: Radio( +// activeColor: Theme.of(context) +// .extension()! +// .radioButtonIconEnabled, +// materialTapTargetSize: +// MaterialTapTargetSize +// .shrinkWrap, +// value: true, +// groupValue: +// currenciesWithoutSelected[ +// index] == +// current, +// onChanged: (_) { +// onTap(index); +// }, +// ), +// ), +// const SizedBox( +// width: 12, +// ), +// Column( +// crossAxisAlignment: +// CrossAxisAlignment.start, +// children: [ +// Text( +// currenciesWithoutSelected[ +// index], +// key: (currenciesWithoutSelected[ +// index] == +// current) +// ? const Key( +// "desktopSettingsSelectedCurrencyText") +// : null, +// style: +// STextStyles.largeMedium14( +// context), +// ), +// const SizedBox( +// height: 2, +// ), +// Text( +// ref.watch(baseCurrenciesProvider +// .select((value) => +// value.map))[ +// currenciesWithoutSelected[ +// index]] ?? +// "", +// key: (currenciesWithoutSelected[ +// index] == +// current) +// ? const Key( +// "desktopSelectedCurrencyTextDescription") +// : null, +// style: +// STextStyles.itemSubtitle( +// context), +// ), +// ], +// ), +// ], +// ), +// ), +// ), +// ), +// ), +// ), +// ); +// }, +// childCount: currenciesWithoutSelected.length, +// ), +// ), +// ], +// ); +// }, +// ), +// ), +// ), +// const Spacer(), +// Padding( +// padding: const EdgeInsets.all(32), +// child: Row( +// children: [ +// Expanded( +// child: SecondaryButton( +// label: "Cancel", +// onPressed: () { +// Navigator.of(context).pop(); +// }, +// ), +// ), +// const SizedBox( +// width: 16, +// ), +// Expanded( +// child: PrimaryButton( +// label: "Save Changes", +// onPressed: () {}, +// ), +// ) +// ], +// ), +// ), +// ], +// ), +// ); +// } +// } diff --git a/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_settings.dart b/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_settings.dart index b8ce76d25..cf51940e0 100644 --- a/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_settings.dart +++ b/lib/pages_desktop_specific/home/settings_menu/currency_settings/currency_settings.dart @@ -2,12 +2,14 @@ import 'package:flutter/material.dart'; import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/currency_view.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; -import 'currency_dialog.dart'; +import '../../../../widgets/desktop/desktop_dialog_close_button.dart'; class CurrencySettings extends ConsumerStatefulWidget { const CurrencySettings({Key? key}) : super(key: key); @@ -87,12 +89,44 @@ class NewPasswordButton extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { Future chooseCurrency() async { + // await showDialog( + // context: context, + // useSafeArea: false, + // barrierDismissible: true, + // builder: (context) { + // return CurrencyDialog(); + // }, + // ); await showDialog( context: context, useSafeArea: false, barrierDismissible: true, builder: (context) { - return CurrencyDialog(); + return DesktopDialog( + maxHeight: 800, + maxWidth: 600, + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Padding( + padding: const EdgeInsets.all(32), + child: Text( + "Select currency", + style: STextStyles.desktopH3(context), + textAlign: TextAlign.center, + ), + ), + const DesktopDialogCloseButton(), + ], + ), + const Expanded( + child: BaseCurrencySettingsView(), + ), + ], + ), + ); }, ); }