feat: desktop coin units gui

This commit is contained in:
julian 2023-05-30 07:44:49 -06:00
parent 4b6afe1db0
commit 452110c221
3 changed files with 276 additions and 91 deletions

View file

@ -1,3 +1,4 @@
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.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.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/primary_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/icon_widgets/x_icon.dart';
import 'package:stackwallet/widgets/stack_text_field.dart'; import 'package:stackwallet/widgets/stack_text_field.dart';
import 'package:stackwallet/widgets/textfield_icon_button.dart'; import 'package:stackwallet/widgets/textfield_icon_button.dart';
@ -105,20 +107,36 @@ class _EditCoinUnitsViewState extends ConsumerState<EditCoinUnitsView> {
return ConditionalParent( return ConditionalParent(
condition: Util.isDesktop, condition: Util.isDesktop,
builder: (child) => DesktopDialog( builder: (child) => DesktopDialog(
child: Column( maxHeight: 350,
children: [ maxWidth: 500,
Row( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
children: [ Row(
Text( mainAxisAlignment: MainAxisAlignment.spaceBetween,
"Edit ${widget.coin.prettyName} Units", children: [
style: STextStyles.desktopH3(context), 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( child: ConditionalParent(
condition: !Util.isDesktop, condition: !Util.isDesktop,
builder: (child) => Background( builder: (child) => Background(
@ -144,54 +162,106 @@ class _EditCoinUnitsViewState extends ConsumerState<EditCoinUnitsView> {
), ),
child: Column( child: Column(
children: [ children: [
Stack( if (Util.isDesktop)
children: [ DropdownButtonHideUnderline(
TextField( child: DropdownButton2<AmountUnit>(
autocorrect: Util.isDesktop ? false : true, value: _currentUnit,
enableSuggestions: Util.isDesktop ? false : true, items: [
// controller: _lengthController, ...AmountUnit.valuesForCoin(widget.coin).map(
readOnly: true, (e) => DropdownMenuItem(
textInputAction: TextInputAction.none, value: e,
), child: Text(
Positioned.fill( e.unitForCoin(widget.coin),
child: RawMaterialButton( style: STextStyles.desktopTextMedium(context),
splashColor: ),
Theme.of(context).extension<StackColors>()!.highlight,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
), ),
), ),
onPressed: chooseUnit, ],
child: Padding( onChanged: (value) {
padding: const EdgeInsets.only( if (value is AmountUnit) {
left: 12, _currentUnit = value;
right: 17, }
), },
child: Row( isExpanded: true,
mainAxisAlignment: MainAxisAlignment.spaceBetween, icon: SvgPicture.asset(
children: [ Assets.svg.chevronDown,
Text( width: 12,
_currentUnit.unitForCoin(widget.coin), height: 6,
style: STextStyles.itemSubtitle12(context), color: Theme.of(context)
), .extension<StackColors>()!
SvgPicture.asset( .textFieldActiveSearchIconRight,
Assets.svg.chevronDown, ),
width: 14, buttonPadding: const EdgeInsets.symmetric(
height: 6, horizontal: 16,
color: Theme.of(context) vertical: 8,
.extension<StackColors>()! ),
.textFieldActiveSearchIconRight, buttonDecoration: BoxDecoration(
), color: Theme.of(context)
], .extension<StackColors>()!
), .textFieldDefaultBG,
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
), ),
), ),
) dropdownDecoration: BoxDecoration(
], color: Theme.of(context)
), .extension<StackColors>()!
const SizedBox( .textFieldDefaultBG,
height: 8, 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<StackColors>()!.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<StackColors>()!
.textFieldActiveSearchIconRight,
),
],
),
),
),
)
],
),
SizedBox(
height: Util.isDesktop ? 24 : 8,
), ),
ClipRRect( ClipRRect(
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
@ -213,6 +283,8 @@ class _EditCoinUnitsViewState extends ConsumerState<EditCoinUnitsView> {
_decimalsFocusNode, _decimalsFocusNode,
context, context,
).copyWith( ).copyWith(
labelStyle:
Util.isDesktop ? STextStyles.fieldLabel(context) : null,
suffixIcon: _decimalsController.text.isNotEmpty suffixIcon: _decimalsController.text.isNotEmpty
? Padding( ? Padding(
padding: const EdgeInsets.only(right: 0), padding: const EdgeInsets.only(right: 0),
@ -237,11 +309,31 @@ class _EditCoinUnitsViewState extends ConsumerState<EditCoinUnitsView> {
const SizedBox( const SizedBox(
height: 24, height: 24,
), ),
if (!Util.isDesktop) const Spacer(), const Spacer(),
PrimaryButton( ConditionalParent(
label: "Save", condition: Util.isDesktop,
buttonHeight: ButtonHeight.xl, builder: (child) => Row(
onPressed: onSave, 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,
),
), ),
], ],
), ),

View file

@ -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/providers/global/prefs_provider.dart';
import 'package:stackwallet/themes/coin_icon_provider.dart'; import 'package:stackwallet/themes/coin_icon_provider.dart';
import 'package:stackwallet/themes/stack_colors.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/enums/coin_enum.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/utilities/util.dart';
@ -22,6 +23,20 @@ class ManageCoinUnitsView extends ConsumerWidget {
static const String routeName = "/manageCoinUnitsView"; static const String routeName = "/manageCoinUnitsView";
void onEditPressed(Coin coin, BuildContext context) {
if (Util.isDesktop) {
showDialog<void>(
context: context,
builder: (context) => EditCoinUnitsView(coin: coin),
);
} else {
Navigator.of(context).pushNamed(
EditCoinUnitsView.routeName,
arguments: coin,
);
}
}
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
bool showTestNet = ref.watch( bool showTestNet = ref.watch(
@ -37,20 +52,36 @@ class ManageCoinUnitsView extends ConsumerWidget {
return ConditionalParent( return ConditionalParent(
condition: Util.isDesktop, condition: Util.isDesktop,
builder: (child) => DesktopDialog( builder: (child) => DesktopDialog(
child: Column( maxHeight: 850,
children: [ maxWidth: 600,
Row( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
children: [ Row(
Text( mainAxisAlignment: MainAxisAlignment.spaceBetween,
"Units", children: [
style: STextStyles.desktopH3(context), 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( child: ConditionalParent(
condition: !Util.isDesktop, condition: !Util.isDesktop,
builder: (child) => Background( builder: (child) => Background(
@ -72,28 +103,38 @@ class ManageCoinUnitsView extends ConsumerWidget {
), ),
), ),
child: ListView.separated( child: ListView.separated(
itemCount: coins.length + 2, itemCount: Util.isDesktop ? coins.length : coins.length + 2,
separatorBuilder: (_, __) => const SizedBox( separatorBuilder: (_, __) => const SizedBox(
height: 12, height: 12,
), ),
itemBuilder: (_, index) { itemBuilder: (_, index) {
if (index == 0) { if (!Util.isDesktop) {
return const SizedBox(height: 0); if (index == 0) {
} else if (index > coins.length) { return const SizedBox(height: 0);
return const SizedBox(height: 10); } 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( return Padding(
padding: const EdgeInsets.symmetric( padding: Util.isDesktop
horizontal: 16, ? EdgeInsets.zero
), : const EdgeInsets.symmetric(
horizontal: 16,
),
child: RoundedWhiteContainer( child: RoundedWhiteContainer(
padding: Util.isDesktop
? const EdgeInsets.symmetric(
vertical: 16,
horizontal: 14,
)
: const EdgeInsets.all(12),
borderColor: Util.isDesktop
? Theme.of(context).extension<StackColors>()!.textSubtitle6
: null,
onPressed: () { onPressed: () {
Navigator.of(context).pushNamed( onEditPressed(coin, context);
EditCoinUnitsView.routeName,
arguments: coin,
);
}, },
child: Row( child: Row(
children: [ children: [
@ -109,9 +150,19 @@ class ManageCoinUnitsView extends ConsumerWidget {
const SizedBox( const SizedBox(
width: 12, width: 12,
), ),
Text( Expanded(
"Edit ${coin.prettyName} units", child: Text(
style: STextStyles.titleBold12(context), "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,
), ),
], ],
), ),

View file

@ -1,6 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.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/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/desktop_manage_block_explorers_dialog.dart';
import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanced_settings/stack_privacy_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<AdvancedSettings> {
], ],
), ),
), ),
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<StackColors>()!
.textDark),
textAlign: TextAlign.left,
),
PrimaryButton(
buttonHeight: ButtonHeight.xs,
label: "Edit",
width: 101,
onPressed: () async {
await showDialog<dynamic>(
context: context,
useSafeArea: false,
barrierDismissible: true,
builder: (context) {
return const ManageCoinUnitsView();
},
);
},
),
],
),
),
const SizedBox(
height: 10,
),
], ],
), ),
), ),