From 757d48f793126b59103ea9d5505df072019fd300 Mon Sep 17 00:00:00 2001 From: OleksandrSobol Date: Wed, 23 Sep 2020 22:31:39 +0300 Subject: [PATCH] CAKE-45 | created wallet menu item and wallet menu alert; deleted wallet tile; added menuItems to wallet menu; reworked wallet list page (removed slider menu on wallet list screen and used alert instead of this) --- .../screens/wallet_list/wallet_list_page.dart | 151 ++++++++---------- lib/src/screens/wallet_list/wallet_menu.dart | 106 ++++-------- .../screens/wallet_list/wallet_menu_item.dart | 16 ++ .../widgets/wallet_menu_alert.dart | 112 +++++++++++++ .../wallet_list/widgets/wallet_tile.dart | 151 ------------------ 5 files changed, 230 insertions(+), 306 deletions(-) create mode 100644 lib/src/screens/wallet_list/wallet_menu_item.dart create mode 100644 lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart delete mode 100644 lib/src/screens/wallet_list/widgets/wallet_tile.dart diff --git a/lib/src/screens/wallet_list/wallet_list_page.dart b/lib/src/screens/wallet_list/wallet_list_page.dart index 0e743e1c9..4e78642c7 100644 --- a/lib/src/screens/wallet_list/wallet_list_page.dart +++ b/lib/src/screens/wallet_list/wallet_list_page.dart @@ -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,83 @@ class WalletListBodyState extends State { 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: [ - 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( + context: context, + builder: (dialogContext) { + return WalletMenuAlert( + wallet: wallet, + walletMenu: walletMenu, + items: items); + } + ); + }, + child: Container( + height: tileHeight, + width: double.infinity, + child: Row( + children: [ + 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: [ + _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: [ - image, - SizedBox(height: 2), - Text( - item, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 7, - fontWeight: FontWeight.w500, - color: Colors.white), - ) - ], - ), + ], ), ), + ), + Container( + height: tileHeight, + width: 10, + 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 + ] + ) ), - ); - }, childCount: items.length)) - ], - ), + ), + ], + ), + ) ); }), ), diff --git a/lib/src/screens/wallet_list/wallet_menu.dart b/lib/src/screens/wallet_list/wallet_menu.dart index a508541bd..e5745ccd8 100644 --- a/lib/src/screens/wallet_list/wallet_menu.dart +++ b/lib/src/screens/wallet_list/wallet_menu.dart @@ -1,10 +1,9 @@ +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/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'; @@ -15,85 +14,46 @@ class WalletMenu { final WalletListViewModel walletListViewModel; final BuildContext context; - final List listItems = [ - S.current.wallet_list_load_wallet, - S.current.show_seed, - S.current.remove, - S.current.rescan + final List 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 firstColors = [ - Palette.cornflower, - Palette.moderateOrangeYellow, - Palette.lightRed, - Palette.shineGreen - ]; + List generateItemsForWalletMenu(bool isCurrentWallet) { + final items = List(); - final List secondColors = [ - Palette.royalBlue, - Palette.moderateOrange, - Palette.persianRed, - Palette.moderateGreen - ]; - - final List 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 generateItemsForWalletMenu(bool isCurrentWallet) { - final items = List(); - - 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 generateColorsForWalletMenu(bool isCurrentWallet) { - final colors = []; - - 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 generateImagesForWalletMenu(bool isCurrentWallet) { - final images = []; - - 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 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: diff --git a/lib/src/screens/wallet_list/wallet_menu_item.dart b/lib/src/screens/wallet_list/wallet_menu_item.dart new file mode 100644 index 000000000..55e7189c5 --- /dev/null +++ b/lib/src/screens/wallet_list/wallet_menu_item.dart @@ -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; +} \ No newline at end of file diff --git a/lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart b/lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart new file mode 100644 index 000000000..cafb27516 --- /dev/null +++ b/lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart @@ -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 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: [ + 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( + padding: EdgeInsets.only(top: 12, bottom: 12), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + height: 56, + width: 56, + decoration: BoxDecoration( + borderRadius: BorderRadius.all( + Radius.circular(12)), + 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) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/screens/wallet_list/widgets/wallet_tile.dart b/lib/src/screens/wallet_list/widgets/wallet_tile.dart deleted file mode 100644 index 4e4165341..000000000 --- a/lib/src/screens/wallet_list/widgets/wallet_tile.dart +++ /dev/null @@ -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: [ - 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: [ - 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: [ - Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - 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: [ - 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; - -} \ No newline at end of file