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_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<EditCoinUnitsView> {
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<EditCoinUnitsView> {
),
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<StackColors>()!.highlight,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
if (Util.isDesktop)
DropdownButtonHideUnderline(
child: DropdownButton2<AmountUnit>(
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<StackColors>()!
.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<StackColors>()!
.textFieldActiveSearchIconRight,
),
buttonPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
buttonDecoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
)
],
),
const SizedBox(
height: 8,
dropdownDecoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.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<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(
borderRadius: BorderRadius.circular(
@ -213,6 +283,8 @@ class _EditCoinUnitsViewState extends ConsumerState<EditCoinUnitsView> {
_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<EditCoinUnitsView> {
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,
),
),
],
),

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/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<void>(
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<StackColors>()!.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,
),
],
),

View file

@ -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<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,
),
],
),
),