mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-09-29 18:01:07 +00:00
Merge pull request #107 from cake-tech/CAKE-45-replace-wallet-menu
CAKE-45 | created wallet menu item and wallet menu alert; deleted wal…
This commit is contained in:
M
commit
6e38efd327
5 changed files with 214 additions and 307 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_menu_alert.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:cake_wallet/routes.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/entities/wallet_type.dart';
|
||||
import 'package:cake_wallet/view_model/wallet_list/wallet_list_view_model.dart';
|
||||
|
|
@ -10,7 +10,6 @@ import 'package:cake_wallet/src/widgets/primary_button.dart';
|
|||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
|
||||
import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
|
||||
import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
|
||||
|
||||
class WalletListPage extends BasePage {
|
||||
WalletListPage({this.walletListViewModel});
|
||||
|
|
@ -65,95 +64,66 @@ class WalletListBodyState extends State<WalletListBody> {
|
|||
itemCount: widget.walletListViewModel.wallets.length,
|
||||
itemBuilder: (__, index) {
|
||||
final wallet = widget.walletListViewModel.wallets[index];
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
final walletMenu = WalletMenu(context, widget.walletListViewModel);
|
||||
final items =
|
||||
walletMenu.generateItemsForWalletMenu(wallet.isCurrent);
|
||||
final colors = walletMenu
|
||||
.generateColorsForWalletMenu(wallet.isCurrent);
|
||||
final images = walletMenu
|
||||
.generateImagesForWalletMenu(wallet.isCurrent);
|
||||
final currentColor = wallet.isCurrent
|
||||
? Theme.of(context).accentTextTheme.subtitle.decorationColor
|
||||
: Theme.of(context).backgroundColor;
|
||||
|
||||
return Container(
|
||||
height: tileHeight,
|
||||
width: double.infinity,
|
||||
child: CustomScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: scrollController,
|
||||
slivers: <Widget>[
|
||||
SliverPersistentHeader(
|
||||
pinned: false,
|
||||
floating: true,
|
||||
delegate: WalletTile(
|
||||
min: screenWidth - 170,
|
||||
max: screenWidth,
|
||||
image: _imageFor(type: wallet.type),
|
||||
walletName: wallet.name,
|
||||
walletAddress: '', //shortAddress,
|
||||
isCurrent: wallet.isCurrent),
|
||||
),
|
||||
SliverList(
|
||||
delegate:
|
||||
SliverChildBuilderDelegate((context, index) {
|
||||
final item = items[index];
|
||||
final image = images[index];
|
||||
final firstColor = colors[index*2];
|
||||
final secondColor = colors[index*2 + 1];
|
||||
|
||||
final radius = index == 0 ? 10.0 : 0.0;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
scrollController.animateTo(0.0,
|
||||
duration: Duration(milliseconds: 500),
|
||||
curve: Curves.fastOutSlowIn);
|
||||
walletMenu.action(
|
||||
walletMenu.listItems.indexOf(item),
|
||||
wallet,
|
||||
wallet.isCurrent);
|
||||
},
|
||||
child: Container(
|
||||
height: tileHeight,
|
||||
width: 80,
|
||||
color: Theme.of(context).backgroundColor,
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
showDialog<void>(
|
||||
context: context,
|
||||
builder: (dialogContext) {
|
||||
return WalletMenuAlert(
|
||||
wallet: wallet,
|
||||
walletMenu: walletMenu,
|
||||
items: items);
|
||||
}
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
height: tileHeight,
|
||||
width: double.infinity,
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
height: tileHeight,
|
||||
width: 4,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
topRight: Radius.circular(4),
|
||||
bottomRight: Radius.circular(4)),
|
||||
color: currentColor
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(left: 5, right: 5),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(radius),
|
||||
bottomLeft: Radius.circular(radius)),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
firstColor,
|
||||
secondColor
|
||||
]
|
||||
height: tileHeight,
|
||||
padding: EdgeInsets.only(left: 20, right: 20),
|
||||
color: Theme.of(context).backgroundColor,
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
_imageFor(type: wallet.type),
|
||||
SizedBox(width: 10),
|
||||
Text(
|
||||
wallet.name,
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).primaryTextTheme.title.color
|
||||
),
|
||||
)
|
||||
),
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
image,
|
||||
SizedBox(height: 2),
|
||||
Text(
|
||||
item,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 7,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Colors.white),
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}, childCount: items.length))
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
);
|
||||
}),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import 'package:cake_wallet/src/screens/wallet_list/wallet_menu_item.dart';
|
||||
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
|
||||
import 'package:cake_wallet/utils/show_pop_up.dart';
|
||||
import 'package:cake_wallet/view_model/wallet_list/wallet_list_view_model.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cake_wallet/routes.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
// import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
|
||||
import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
|
||||
import 'package:cake_wallet/src/screens/auth/auth_page.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
|
|
@ -16,85 +15,46 @@ class WalletMenu {
|
|||
final WalletListViewModel walletListViewModel;
|
||||
final BuildContext context;
|
||||
|
||||
final List<String> listItems = [
|
||||
S.current.wallet_list_load_wallet,
|
||||
S.current.show_seed,
|
||||
S.current.remove,
|
||||
S.current.rescan
|
||||
final List<WalletMenuItem> menuItems = [
|
||||
WalletMenuItem(
|
||||
title: S.current.wallet_list_load_wallet,
|
||||
firstGradientColor: Palette.cornflower,
|
||||
secondGradientColor: Palette.royalBlue,
|
||||
image: Image.asset('assets/images/load.png',
|
||||
height: 24, width: 24, color: Colors.white)),
|
||||
WalletMenuItem(
|
||||
title: S.current.show_seed,
|
||||
firstGradientColor: Palette.moderateOrangeYellow,
|
||||
secondGradientColor: Palette.moderateOrange,
|
||||
image: Image.asset('assets/images/eye_action.png',
|
||||
height: 24, width: 24, color: Colors.white)),
|
||||
WalletMenuItem(
|
||||
title: S.current.remove,
|
||||
firstGradientColor: Palette.lightRed,
|
||||
secondGradientColor: Palette.persianRed,
|
||||
image: Image.asset('assets/images/trash.png',
|
||||
height: 24, width: 24, color: Colors.white)),
|
||||
WalletMenuItem(
|
||||
title: S.current.rescan,
|
||||
firstGradientColor: Palette.shineGreen,
|
||||
secondGradientColor: Palette.moderateGreen,
|
||||
image: Image.asset('assets/images/scanner.png',
|
||||
height: 24, width: 24, color: Colors.white))
|
||||
];
|
||||
|
||||
final List<Color> firstColors = [
|
||||
Palette.cornflower,
|
||||
Palette.moderateOrangeYellow,
|
||||
Palette.lightRed,
|
||||
Palette.shineGreen
|
||||
];
|
||||
List<WalletMenuItem> generateItemsForWalletMenu(bool isCurrentWallet) {
|
||||
final items = List<WalletMenuItem>();
|
||||
|
||||
final List<Color> secondColors = [
|
||||
Palette.royalBlue,
|
||||
Palette.moderateOrange,
|
||||
Palette.persianRed,
|
||||
Palette.moderateGreen
|
||||
];
|
||||
|
||||
final List<Image> listImages = [
|
||||
Image.asset('assets/images/load.png',
|
||||
height: 24, width: 24, color: Colors.white),
|
||||
Image.asset('assets/images/eye_action.png',
|
||||
height: 24, width: 24, color: Colors.white),
|
||||
Image.asset('assets/images/trash.png',
|
||||
height: 24, width: 24, color: Colors.white),
|
||||
Image.asset('assets/images/scanner.png',
|
||||
height: 24, width: 24, color: Colors.white)
|
||||
];
|
||||
|
||||
List<String> generateItemsForWalletMenu(bool isCurrentWallet) {
|
||||
final items = List<String>();
|
||||
|
||||
if (!isCurrentWallet) items.add(listItems[0]);
|
||||
if (isCurrentWallet) items.add(listItems[1]);
|
||||
if (!isCurrentWallet) items.add(listItems[2]);
|
||||
if (isCurrentWallet) items.add(listItems[3]);
|
||||
if (!isCurrentWallet) items.add(menuItems[0]);
|
||||
if (isCurrentWallet) items.add(menuItems[1]);
|
||||
if (!isCurrentWallet) items.add(menuItems[2]);
|
||||
if (isCurrentWallet) items.add(menuItems[3]);
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
List<Color> generateColorsForWalletMenu(bool isCurrentWallet) {
|
||||
final colors = <Color>[];
|
||||
|
||||
if (!isCurrentWallet) {
|
||||
colors.add(firstColors[0]);
|
||||
colors.add(secondColors[0]);
|
||||
}
|
||||
if (isCurrentWallet) {
|
||||
colors.add(firstColors[1]);
|
||||
colors.add(secondColors[1]);
|
||||
}
|
||||
if (!isCurrentWallet) {
|
||||
colors.add(firstColors[2]);
|
||||
colors.add(secondColors[2]);
|
||||
}
|
||||
if (isCurrentWallet) {
|
||||
colors.add(firstColors[3]);
|
||||
colors.add(secondColors[3]);
|
||||
}
|
||||
|
||||
return colors;
|
||||
}
|
||||
|
||||
List<Image> generateImagesForWalletMenu(bool isCurrentWallet) {
|
||||
final images = <Image>[];
|
||||
|
||||
if (!isCurrentWallet) images.add(listImages[0]);
|
||||
if (isCurrentWallet) images.add(listImages[1]);
|
||||
if (!isCurrentWallet) images.add(listImages[2]);
|
||||
if (isCurrentWallet) images.add(listImages[3]);
|
||||
|
||||
return images;
|
||||
}
|
||||
|
||||
Future<void> action(
|
||||
int index, WalletListItem wallet, bool isCurrentWallet) async {
|
||||
int index, WalletListItem wallet) async {
|
||||
switch (index) {
|
||||
case 0:
|
||||
await Navigator.of(context).pushNamed(Routes.auth, arguments:
|
||||
|
|
|
|||
16
lib/src/screens/wallet_list/wallet_menu_item.dart
Normal file
16
lib/src/screens/wallet_list/wallet_menu_item.dart
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import 'dart:ui';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
class WalletMenuItem {
|
||||
WalletMenuItem({
|
||||
@required this.title,
|
||||
@required this.firstGradientColor,
|
||||
@required this.secondGradientColor,
|
||||
@required this.image
|
||||
});
|
||||
|
||||
final String title;
|
||||
final Color firstGradientColor;
|
||||
final Color secondGradientColor;
|
||||
final Image image;
|
||||
}
|
||||
112
lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart
Normal file
112
lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import 'dart:ui';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
|
||||
import 'package:cake_wallet/src/screens/wallet_list/wallet_menu_item.dart';
|
||||
import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cake_wallet/src/widgets/alert_background.dart';
|
||||
import 'package:cake_wallet/src/widgets/alert_close_button.dart';
|
||||
|
||||
class WalletMenuAlert extends StatelessWidget {
|
||||
WalletMenuAlert({
|
||||
@required this.wallet,
|
||||
@required this.walletMenu,
|
||||
@required this.items
|
||||
});
|
||||
|
||||
final WalletListItem wallet;
|
||||
final WalletMenu walletMenu;
|
||||
final List<WalletMenuItem> items;
|
||||
final closeButton = Image.asset('assets/images/close.png',
|
||||
color: Palette.darkBlueCraiola,
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AlertBackground(
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 24,
|
||||
right: 24,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.all(Radius.circular(14)),
|
||||
child: Container(
|
||||
color: Theme.of(context).textTheme.body2.decorationColor,
|
||||
padding: EdgeInsets.only(left: 24),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: items.length,
|
||||
separatorBuilder: (context, _) => Container(
|
||||
height: 1,
|
||||
color: Theme.of(context).accentTextTheme.subhead.backgroundColor,
|
||||
),
|
||||
itemBuilder: (_, index) {
|
||||
final item = items[index];
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
Navigator.of(context).pop();
|
||||
walletMenu.action(
|
||||
walletMenu.menuItems.indexOf(item),
|
||||
wallet);
|
||||
},
|
||||
child: Container(
|
||||
height: 60,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
height: 32,
|
||||
width: 32,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(4)),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
item.firstGradientColor,
|
||||
item.secondGradientColor
|
||||
]
|
||||
)
|
||||
),
|
||||
child: Center(
|
||||
child: item.image,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.title,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).primaryTextTheme.title.color,
|
||||
fontSize: 18,
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: FontWeight.w500,
|
||||
decoration: TextDecoration.none
|
||||
),
|
||||
)
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
AlertCloseButton(image: closeButton)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
class WalletTile extends SliverPersistentHeaderDelegate {
|
||||
WalletTile({
|
||||
@required this.min,
|
||||
@required this.max,
|
||||
@required this.image,
|
||||
@required this.walletName,
|
||||
@required this.walletAddress,
|
||||
@required this.isCurrent
|
||||
});
|
||||
|
||||
final double min;
|
||||
final double max;
|
||||
final Image image;
|
||||
final String walletName;
|
||||
final String walletAddress;
|
||||
final bool isCurrent;
|
||||
final double tileHeight = 60;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
|
||||
var opacity = 1 - shrinkOffset / (max - min);
|
||||
opacity = opacity >= 0 ? opacity : 0;
|
||||
|
||||
var panelWidth = 10 * opacity;
|
||||
panelWidth = panelWidth < 10 ? 0 : 10;
|
||||
|
||||
final currentColor = isCurrent
|
||||
? Theme.of(context).accentTextTheme.subtitle.decorationColor
|
||||
: Theme.of(context).backgroundColor;
|
||||
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
overflow: Overflow.visible,
|
||||
children: <Widget>[
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: max - 4,
|
||||
child: Container(
|
||||
height: tileHeight,
|
||||
width: 4,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
|
||||
color: currentColor
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 10,
|
||||
child: Container(
|
||||
height: tileHeight,
|
||||
width: max - 14,
|
||||
padding: EdgeInsets.only(left: 20, right: 20),
|
||||
color: Theme.of(context).backgroundColor,
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
//mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
image,
|
||||
SizedBox(width: 10),
|
||||
Text(
|
||||
walletName,
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).primaryTextTheme.title.color
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
/*Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
image,
|
||||
SizedBox(width: 10),
|
||||
Text(
|
||||
walletName,
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Theme.of(context).primaryTextTheme.title.color
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
isCurrent ? SizedBox(height: 5) : Offstage(),
|
||||
isCurrent
|
||||
? Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
SizedBox(width: 34),
|
||||
Text(
|
||||
walletAddress,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Theme.of(context).primaryTextTheme.caption.color
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
: Offstage()
|
||||
],
|
||||
),*/
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: Opacity(
|
||||
opacity: opacity,
|
||||
child: Container(
|
||||
height: tileHeight,
|
||||
width: panelWidth,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Theme.of(context).accentTextTheme.headline.color,
|
||||
Theme.of(context).accentTextTheme.headline.backgroundColor
|
||||
]
|
||||
)
|
||||
),
|
||||
),
|
||||
)
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
double get maxExtent => max;
|
||||
|
||||
@override
|
||||
double get minExtent => min;
|
||||
|
||||
@override
|
||||
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue