diff --git a/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/edit_coin_units_view.dart b/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/edit_coin_units_view.dart index b098d52b7..750f6e78f 100644 --- a/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/edit_coin_units_view.dart +++ b/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/edit_coin_units_view.dart @@ -1,3 +1,4 @@ +import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; @@ -17,6 +18,7 @@ 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/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/stack_text_field.dart'; import 'package:stackwallet/widgets/textfield_icon_button.dart'; @@ -105,20 +107,36 @@ class _EditCoinUnitsViewState extends ConsumerState { return ConditionalParent( condition: Util.isDesktop, builder: (child) => DesktopDialog( - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Edit ${widget.coin.prettyName} Units", - style: STextStyles.desktopH3(context), + maxHeight: 350, + maxWidth: 500, + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Padding( + padding: const EdgeInsets.only(left: 32), + child: Text( + "Edit ${widget.coin.prettyName} units", + style: STextStyles.desktopH3(context), + ), + ), + const DesktopDialogCloseButton(), + ], + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only( + left: 32, + right: 32, + bottom: 32, + ), + child: child, ), - const DesktopDialogCloseButton(), - ], - ) - ], - )), + ), + ], + ), + ), child: ConditionalParent( condition: !Util.isDesktop, builder: (child) => Background( @@ -144,54 +162,106 @@ class _EditCoinUnitsViewState extends ConsumerState { ), child: Column( children: [ - Stack( - children: [ - TextField( - autocorrect: Util.isDesktop ? false : true, - enableSuggestions: Util.isDesktop ? false : true, - // controller: _lengthController, - readOnly: true, - textInputAction: TextInputAction.none, - ), - Positioned.fill( - child: RawMaterialButton( - splashColor: - Theme.of(context).extension()!.highlight, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, + if (Util.isDesktop) + DropdownButtonHideUnderline( + child: DropdownButton2( + value: _currentUnit, + items: [ + ...AmountUnit.valuesForCoin(widget.coin).map( + (e) => DropdownMenuItem( + value: e, + child: Text( + e.unitForCoin(widget.coin), + style: STextStyles.desktopTextMedium(context), + ), ), ), - onPressed: chooseUnit, - child: Padding( - padding: const EdgeInsets.only( - left: 12, - right: 17, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - _currentUnit.unitForCoin(widget.coin), - style: STextStyles.itemSubtitle12(context), - ), - SvgPicture.asset( - Assets.svg.chevronDown, - width: 14, - height: 6, - color: Theme.of(context) - .extension()! - .textFieldActiveSearchIconRight, - ), - ], - ), + ], + onChanged: (value) { + if (value is AmountUnit) { + _currentUnit = value; + } + }, + isExpanded: true, + icon: SvgPicture.asset( + Assets.svg.chevronDown, + width: 12, + height: 6, + color: Theme.of(context) + .extension()! + .textFieldActiveSearchIconRight, + ), + buttonPadding: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 8, + ), + buttonDecoration: BoxDecoration( + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, ), ), - ) - ], - ), - const SizedBox( - height: 8, + dropdownDecoration: BoxDecoration( + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + ), + ), + if (!Util.isDesktop) + Stack( + children: [ + TextField( + autocorrect: Util.isDesktop ? false : true, + enableSuggestions: Util.isDesktop ? false : true, + // controller: _lengthController, + readOnly: true, + textInputAction: TextInputAction.none, + ), + Positioned.fill( + child: RawMaterialButton( + splashColor: + Theme.of(context).extension()!.highlight, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: chooseUnit, + child: Padding( + padding: const EdgeInsets.only( + left: 12, + right: 17, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + _currentUnit.unitForCoin(widget.coin), + style: STextStyles.itemSubtitle12(context), + ), + SvgPicture.asset( + Assets.svg.chevronDown, + width: 14, + height: 6, + color: Theme.of(context) + .extension()! + .textFieldActiveSearchIconRight, + ), + ], + ), + ), + ), + ) + ], + ), + SizedBox( + height: Util.isDesktop ? 24 : 8, ), ClipRRect( borderRadius: BorderRadius.circular( @@ -213,6 +283,8 @@ class _EditCoinUnitsViewState extends ConsumerState { _decimalsFocusNode, context, ).copyWith( + labelStyle: + Util.isDesktop ? STextStyles.fieldLabel(context) : null, suffixIcon: _decimalsController.text.isNotEmpty ? Padding( padding: const EdgeInsets.only(right: 0), @@ -237,11 +309,31 @@ class _EditCoinUnitsViewState extends ConsumerState { const SizedBox( height: 24, ), - if (!Util.isDesktop) const Spacer(), - PrimaryButton( - label: "Save", - buttonHeight: ButtonHeight.xl, - onPressed: onSave, + const Spacer(), + ConditionalParent( + condition: Util.isDesktop, + builder: (child) => Row( + children: [ + Expanded( + child: SecondaryButton( + label: "Cancel", + buttonHeight: ButtonHeight.l, + onPressed: Navigator.of(context).pop, + ), + ), + const SizedBox( + width: 16, + ), + Expanded( + child: child, + ), + ], + ), + child: PrimaryButton( + label: "Save", + buttonHeight: Util.isDesktop ? ButtonHeight.l : ButtonHeight.xl, + onPressed: onSave, + ), ), ], ), diff --git a/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/manage_coin_units_view.dart b/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/manage_coin_units_view.dart index 7a9610c17..6f16cda4e 100644 --- a/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/manage_coin_units_view.dart +++ b/lib/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/manage_coin_units_view.dart @@ -7,6 +7,7 @@ import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_v import 'package:stackwallet/providers/global/prefs_provider.dart'; import 'package:stackwallet/themes/coin_icon_provider.dart'; 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'; @@ -22,6 +23,20 @@ class ManageCoinUnitsView extends ConsumerWidget { static const String routeName = "/manageCoinUnitsView"; + void onEditPressed(Coin coin, BuildContext context) { + if (Util.isDesktop) { + showDialog( + context: context, + builder: (context) => EditCoinUnitsView(coin: coin), + ); + } else { + Navigator.of(context).pushNamed( + EditCoinUnitsView.routeName, + arguments: coin, + ); + } + } + @override Widget build(BuildContext context, WidgetRef ref) { bool showTestNet = ref.watch( @@ -37,20 +52,36 @@ class ManageCoinUnitsView extends ConsumerWidget { return ConditionalParent( condition: Util.isDesktop, builder: (child) => DesktopDialog( - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Units", - style: STextStyles.desktopH3(context), + maxHeight: 850, + maxWidth: 600, + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Padding( + padding: const EdgeInsets.only(left: 32), + child: Text( + "Units", + style: STextStyles.desktopH3(context), + ), + ), + const DesktopDialogCloseButton(), + ], + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only( + left: 32, + right: 32, + bottom: 32, + ), + child: child, ), - const DesktopDialogCloseButton(), - ], - ) - ], - )), + ), + ], + ), + ), child: ConditionalParent( condition: !Util.isDesktop, builder: (child) => Background( @@ -72,28 +103,38 @@ class ManageCoinUnitsView extends ConsumerWidget { ), ), child: ListView.separated( - itemCount: coins.length + 2, + itemCount: Util.isDesktop ? coins.length : coins.length + 2, separatorBuilder: (_, __) => const SizedBox( height: 12, ), itemBuilder: (_, index) { - if (index == 0) { - return const SizedBox(height: 0); - } else if (index > coins.length) { - return const SizedBox(height: 10); + if (!Util.isDesktop) { + if (index == 0) { + return const SizedBox(height: 0); + } else if (index > coins.length) { + return const SizedBox(height: 10); + } } - final coin = coins[index - 1]; + final coin = coins[Util.isDesktop ? index : index - 1]; return Padding( - padding: const EdgeInsets.symmetric( - horizontal: 16, - ), + padding: Util.isDesktop + ? EdgeInsets.zero + : const EdgeInsets.symmetric( + horizontal: 16, + ), child: RoundedWhiteContainer( + padding: Util.isDesktop + ? const EdgeInsets.symmetric( + vertical: 16, + horizontal: 14, + ) + : const EdgeInsets.all(12), + borderColor: Util.isDesktop + ? Theme.of(context).extension()!.textSubtitle6 + : null, onPressed: () { - Navigator.of(context).pushNamed( - EditCoinUnitsView.routeName, - arguments: coin, - ); + onEditPressed(coin, context); }, child: Row( children: [ @@ -109,9 +150,19 @@ class ManageCoinUnitsView extends ConsumerWidget { const SizedBox( width: 12, ), - Text( - "Edit ${coin.prettyName} units", - style: STextStyles.titleBold12(context), + Expanded( + child: Text( + "Edit ${coin.prettyName} units", + style: STextStyles.titleBold12(context), + ), + ), + const SizedBox( + width: 12, + ), + SvgPicture.asset( + Assets.svg.chevronRight, + width: Util.isDesktop ? 20 : 14, + height: Util.isDesktop ? 20 : 14, ), ], ), diff --git a/lib/pages_desktop_specific/settings/settings_menu/advanced_settings/advanced_settings.dart b/lib/pages_desktop_specific/settings/settings_menu/advanced_settings/advanced_settings.dart index 08eba6c0f..e83b83c8f 100644 --- a/lib/pages_desktop_specific/settings/settings_menu/advanced_settings/advanced_settings.dart +++ b/lib/pages_desktop_specific/settings/settings_menu/advanced_settings/advanced_settings.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/manage_coin_units/manage_coin_units_view.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanced_settings/debug_info_dialog.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanced_settings/desktop_manage_block_explorers_dialog.dart'; import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanced_settings/stack_privacy_dialog.dart'; @@ -278,6 +279,47 @@ class _AdvancedSettings extends ConsumerState { ], ), ), + const Padding( + padding: EdgeInsets.all(10.0), + child: Divider( + thickness: 0.5, + ), + ), + Padding( + padding: const EdgeInsets.all(10), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Units", + style: STextStyles.desktopTextExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textDark), + textAlign: TextAlign.left, + ), + PrimaryButton( + buttonHeight: ButtonHeight.xs, + label: "Edit", + width: 101, + onPressed: () async { + await showDialog( + context: context, + useSafeArea: false, + barrierDismissible: true, + builder: (context) { + return const ManageCoinUnitsView(); + }, + ); + }, + ), + ], + ), + ), + const SizedBox( + height: 10, + ), ], ), ),