mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-10 12:44:31 +00:00
feat: desktop coin units gui
This commit is contained in:
parent
4b6afe1db0
commit
452110c221
3 changed files with 276 additions and 91 deletions
|
@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
Loading…
Reference in a new issue