mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-11-17 09:47:37 +00:00
Desktop manage favorite wallets
This commit is contained in:
julian
parent
79b5cf819a
commit
243f2e4291
3 changed files with 386 additions and 160 deletions
|
|
@ -4,7 +4,10 @@ import 'package:stackwallet/providers/providers.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/custom_buttons/app_bar_icon_button.dart';
|
||||
import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
|
||||
import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
|
||||
import 'package:stackwallet/widgets/managed_favorite.dart';
|
||||
|
||||
class ManageFavoritesView extends StatelessWidget {
|
||||
|
|
@ -15,142 +18,306 @@ class ManageFavoritesView extends StatelessWidget {
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
debugPrint("BUILD: $runtimeType");
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(
|
||||
"Favorite wallets",
|
||||
style: STextStyles.navBarTitle(context),
|
||||
),
|
||||
leading: AppBarBackButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
),
|
||||
body: Container(
|
||||
color: Theme.of(context).extension<StackColors>()!.background,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).extension<StackColors>()!.popupBG,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Text(
|
||||
"Drag to change wallet order.",
|
||||
style: STextStyles.label(context),
|
||||
),
|
||||
),
|
||||
|
||||
final isDesktop = Util.isDesktop;
|
||||
|
||||
return MasterScaffold(
|
||||
isDesktop: isDesktop,
|
||||
appBar: isDesktop
|
||||
? DesktopAppBar(
|
||||
background: Theme.of(context).extension<StackColors>()!.popupBG,
|
||||
isCompactHeight: true,
|
||||
leading: const AppBarBackButton(
|
||||
isCompact: true,
|
||||
),
|
||||
center: Expanded(
|
||||
child: Text(
|
||||
"Favorite wallets",
|
||||
style: STextStyles.desktopH3(context),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 8,
|
||||
)
|
||||
: AppBar(
|
||||
title: Text(
|
||||
"Favorite wallets",
|
||||
style: STextStyles.navBarTitle(context),
|
||||
),
|
||||
Expanded(
|
||||
child: Consumer(
|
||||
builder: (_, ref, __) {
|
||||
final favorites = ref.watch(favoritesProvider);
|
||||
return ReorderableListView.builder(
|
||||
key: key,
|
||||
itemCount: favorites.length,
|
||||
itemBuilder: (builderContext, index) {
|
||||
final walletId = ref.read(favorites[index]).walletId;
|
||||
return Padding(
|
||||
key: Key(
|
||||
"manageFavoriteWalletsItem_$walletId",
|
||||
),
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: ManagedFavorite(
|
||||
walletId: walletId,
|
||||
),
|
||||
);
|
||||
},
|
||||
onReorder: (oldIndex, newIndex) {
|
||||
ref
|
||||
.read(walletsServiceChangeNotifierProvider)
|
||||
.moveFavorite(
|
||||
fromIndex: oldIndex, toIndex: newIndex);
|
||||
leading: AppBarBackButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
),
|
||||
body: isDesktop
|
||||
? Consumer(
|
||||
builder: (_, ref, __) {
|
||||
final favorites = ref.watch(favoritesProvider);
|
||||
final nonFavorites = ref.watch(nonFavoritesProvider);
|
||||
|
||||
ref
|
||||
.read(favoritesProvider)
|
||||
.reorder(oldIndex, newIndex, true);
|
||||
},
|
||||
proxyDecorator: (child, index, animation) {
|
||||
return Material(
|
||||
elevation: 15,
|
||||
color: Colors.transparent,
|
||||
// shadowColor: Colors.red,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(
|
||||
Constants.size.circularBorderRadius * 1.5,
|
||||
return Column(
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 24,
|
||||
),
|
||||
Expanded(
|
||||
child: ListView(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.popupBG,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Text(
|
||||
"Drag to change wallet order.",
|
||||
style:
|
||||
STextStyles.desktopTextExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textSubtitle1,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 30,
|
||||
bottom: 12,
|
||||
left: 4,
|
||||
right: 4,
|
||||
),
|
||||
child: Text(
|
||||
"Add to favorites",
|
||||
style: STextStyles.itemSubtitle12(context).copyWith(
|
||||
color:
|
||||
Theme.of(context).extension<StackColors>()!.textDark3,
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Consumer(
|
||||
builder: (_, ref, __) {
|
||||
final nonFavorites = ref.watch(nonFavoritesProvider);
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
ReorderableListView.builder(
|
||||
buildDefaultDragHandles: false,
|
||||
shrinkWrap: true,
|
||||
primary: false,
|
||||
key: key,
|
||||
itemCount: favorites.length,
|
||||
itemBuilder: (builderContext, index) {
|
||||
final walletId =
|
||||
ref.read(favorites[index]).walletId;
|
||||
return Padding(
|
||||
key: Key(
|
||||
"manageFavoriteWalletsItem_$walletId",
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 5,
|
||||
horizontal: 24,
|
||||
),
|
||||
child: ReorderableDelayedDragStartListener(
|
||||
index: index,
|
||||
child: ManagedFavorite(
|
||||
walletId: walletId,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
onReorder: (oldIndex, newIndex) {
|
||||
ref
|
||||
.read(walletsServiceChangeNotifierProvider)
|
||||
.moveFavorite(
|
||||
fromIndex: oldIndex, toIndex: newIndex);
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: nonFavorites.length,
|
||||
itemBuilder: (buildContext, index) {
|
||||
// final walletId = ref.watch(
|
||||
// nonFavorites[index].select((value) => value.walletId));
|
||||
final walletId = ref.read(nonFavorites[index]).walletId;
|
||||
return Padding(
|
||||
key: Key(
|
||||
"manageNonFavoriteWalletsItem_$walletId",
|
||||
ref
|
||||
.read(favoritesProvider)
|
||||
.reorder(oldIndex, newIndex, true);
|
||||
},
|
||||
proxyDecorator: (child, index, animation) {
|
||||
return Material(
|
||||
elevation: 15,
|
||||
color: Colors.transparent,
|
||||
// shadowColor: Colors.red,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(
|
||||
Constants.size.circularBorderRadius * 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
),
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: ManagedFavorite(
|
||||
walletId: walletId,
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 32,
|
||||
bottom: 11,
|
||||
left: 24,
|
||||
right: 24,
|
||||
),
|
||||
child: Text(
|
||||
"Add to favorites",
|
||||
style:
|
||||
STextStyles.itemSubtitle12(context).copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark3,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
ListView.builder(
|
||||
shrinkWrap: true,
|
||||
primary: false,
|
||||
itemCount: nonFavorites.length,
|
||||
itemBuilder: (buildContext, index) {
|
||||
// final walletId = ref.watch(
|
||||
// nonFavorites[index].select((value) => value.walletId));
|
||||
final walletId =
|
||||
ref.read(nonFavorites[index]).walletId;
|
||||
return Padding(
|
||||
key: Key(
|
||||
"manageNonFavoriteWalletsItem_$walletId",
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 24,
|
||||
vertical: 5,
|
||||
),
|
||||
child: ManagedFavorite(
|
||||
walletId: walletId,
|
||||
),
|
||||
);
|
||||
},
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
)
|
||||
: Container(
|
||||
color: Theme.of(context).extension<StackColors>()!.background,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.popupBG,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Text(
|
||||
"Drag to change wallet order.",
|
||||
style: STextStyles.label(context),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 8,
|
||||
),
|
||||
Expanded(
|
||||
child: Consumer(
|
||||
builder: (_, ref, __) {
|
||||
final favorites = ref.watch(favoritesProvider);
|
||||
return ReorderableListView.builder(
|
||||
key: key,
|
||||
itemCount: favorites.length,
|
||||
itemBuilder: (builderContext, index) {
|
||||
final walletId =
|
||||
ref.read(favorites[index]).walletId;
|
||||
return Padding(
|
||||
key: Key(
|
||||
"manageFavoriteWalletsItem_$walletId",
|
||||
),
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: ManagedFavorite(
|
||||
walletId: walletId,
|
||||
),
|
||||
);
|
||||
},
|
||||
onReorder: (oldIndex, newIndex) {
|
||||
ref
|
||||
.read(walletsServiceChangeNotifierProvider)
|
||||
.moveFavorite(
|
||||
fromIndex: oldIndex, toIndex: newIndex);
|
||||
|
||||
ref
|
||||
.read(favoritesProvider)
|
||||
.reorder(oldIndex, newIndex, true);
|
||||
},
|
||||
proxyDecorator: (child, index, animation) {
|
||||
return Material(
|
||||
elevation: 15,
|
||||
color: Colors.transparent,
|
||||
// shadowColor: Colors.red,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(
|
||||
Constants.size.circularBorderRadius * 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 30,
|
||||
bottom: 12,
|
||||
left: 4,
|
||||
right: 4,
|
||||
),
|
||||
child: Text(
|
||||
"Add to favorites",
|
||||
style: STextStyles.itemSubtitle12(context).copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark3,
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Consumer(
|
||||
builder: (_, ref, __) {
|
||||
final nonFavorites = ref.watch(nonFavoritesProvider);
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: nonFavorites.length,
|
||||
itemBuilder: (buildContext, index) {
|
||||
// final walletId = ref.watch(
|
||||
// nonFavorites[index].select((value) => value.walletId));
|
||||
final walletId =
|
||||
ref.read(nonFavorites[index]).walletId;
|
||||
return Padding(
|
||||
key: Key(
|
||||
"manageNonFavoriteWalletsItem_$walletId",
|
||||
),
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: ManagedFavorite(
|
||||
walletId: walletId,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,9 +47,14 @@ class AppBarIconButton extends StatelessWidget {
|
|||
}
|
||||
|
||||
class AppBarBackButton extends StatelessWidget {
|
||||
const AppBarBackButton({Key? key, this.onPressed}) : super(key: key);
|
||||
const AppBarBackButton({
|
||||
Key? key,
|
||||
this.onPressed,
|
||||
this.isCompact = false,
|
||||
}) : super(key: key);
|
||||
|
||||
final VoidCallback? onPressed;
|
||||
final bool isCompact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
|
@ -62,15 +67,19 @@ class AppBarBackButton extends StatelessWidget {
|
|||
)
|
||||
: const EdgeInsets.all(10),
|
||||
child: AppBarIconButton(
|
||||
size: isDesktop ? 56 : 32,
|
||||
size: isDesktop
|
||||
? isCompact
|
||||
? 42
|
||||
: 56
|
||||
: 32,
|
||||
color: isDesktop
|
||||
? Theme.of(context).extension<StackColors>()!.textFieldDefaultBG
|
||||
: Theme.of(context).extension<StackColors>()!.background,
|
||||
shadows: const [],
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.arrowLeft,
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: isCompact ? 18 : 24,
|
||||
height: isCompact ? 18 : 24,
|
||||
color: Theme.of(context).extension<StackColors>()!.topNavIconPrimary,
|
||||
),
|
||||
onPressed: onPressed ?? Navigator.of(context).pop,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
|
|||
import 'package:stackwallet/utilities/format.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/custom_buttons/favorite_toggle.dart';
|
||||
import 'package:stackwallet/widgets/rounded_white_container.dart';
|
||||
|
||||
|
|
@ -30,8 +31,10 @@ class _ManagedFavoriteCardState extends ConsumerState<ManagedFavorite> {
|
|||
.select((value) => value.getManager(widget.walletId)));
|
||||
debugPrint("BUILD: $runtimeType with walletId ${widget.walletId}");
|
||||
|
||||
final isDesktop = Util.isDesktop;
|
||||
|
||||
return RoundedWhiteContainer(
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
padding: EdgeInsets.all(isDesktop ? 0 : 4.0),
|
||||
child: RawMaterialButton(
|
||||
onPressed: () {
|
||||
final provider = ref
|
||||
|
|
@ -59,7 +62,12 @@ class _ManagedFavoriteCardState extends ConsumerState<ManagedFavorite> {
|
|||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
padding: isDesktop
|
||||
? const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
vertical: 12,
|
||||
)
|
||||
: const EdgeInsets.all(8),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
|
|
@ -73,7 +81,7 @@ class _ManagedFavoriteCardState extends ConsumerState<ManagedFavorite> {
|
|||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(4),
|
||||
padding: EdgeInsets.all(isDesktop ? 6 : 4),
|
||||
child: SvgPicture.asset(
|
||||
Assets.svg.iconFor(coin: manager.coin),
|
||||
width: 20,
|
||||
|
|
@ -84,37 +92,79 @@ class _ManagedFavoriteCardState extends ConsumerState<ManagedFavorite> {
|
|||
const SizedBox(
|
||||
width: 12,
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
manager.walletName,
|
||||
style: STextStyles.titleBold12(context),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
Text(
|
||||
"${Format.localizedStringAsFixed(
|
||||
value: manager.cachedTotalBalance,
|
||||
locale: ref.watch(localeServiceChangeNotifierProvider
|
||||
.select((value) => value.locale)),
|
||||
decimalPlaces: 8,
|
||||
)} ${manager.coin.ticker}",
|
||||
style: STextStyles.itemSubtitle(context),
|
||||
),
|
||||
],
|
||||
if (isDesktop)
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
manager.walletName,
|
||||
style: STextStyles.titleBold12(context),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
"${Format.localizedStringAsFixed(
|
||||
value: manager.cachedTotalBalance,
|
||||
locale: ref.watch(
|
||||
localeServiceChangeNotifierProvider
|
||||
.select((value) => value.locale)),
|
||||
decimalPlaces: 8,
|
||||
)} ${manager.coin.ticker}",
|
||||
style: STextStyles.itemSubtitle(context),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
manager.isFavorite
|
||||
? "Remove from favorites"
|
||||
: "Add to favorites",
|
||||
style:
|
||||
STextStyles.desktopTextExtraSmall(context).copyWith(
|
||||
color: manager.isFavorite
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.accentColorRed
|
||||
: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.buttonTextBorderless,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
FavoriteToggle(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
if (!isDesktop)
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
manager.walletName,
|
||||
style: STextStyles.titleBold12(context),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
Text(
|
||||
"${Format.localizedStringAsFixed(
|
||||
value: manager.cachedTotalBalance,
|
||||
locale: ref.watch(localeServiceChangeNotifierProvider
|
||||
.select((value) => value.locale)),
|
||||
decimalPlaces: 8,
|
||||
)} ${manager.coin.ticker}",
|
||||
style: STextStyles.itemSubtitle(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (!isDesktop)
|
||||
FavoriteToggle(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
initialState: manager.isFavorite,
|
||||
onChanged: null,
|
||||
),
|
||||
initialState: manager.isFavorite,
|
||||
onChanged: null,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
Loading…
Reference in a new issue