diff --git a/assets/images/2.0x/load.png b/assets/images/2.0x/load.png new file mode 100644 index 000000000..a7b64ee04 Binary files /dev/null and b/assets/images/2.0x/load.png differ diff --git a/assets/images/2.0x/scanner.png b/assets/images/2.0x/scanner.png new file mode 100644 index 000000000..e32b970ae Binary files /dev/null and b/assets/images/2.0x/scanner.png differ diff --git a/assets/images/2.0x/trash.png b/assets/images/2.0x/trash.png new file mode 100644 index 000000000..036b8993b Binary files /dev/null and b/assets/images/2.0x/trash.png differ diff --git a/assets/images/3.0x/load.png b/assets/images/3.0x/load.png new file mode 100644 index 000000000..0cd39e57a Binary files /dev/null and b/assets/images/3.0x/load.png differ diff --git a/assets/images/3.0x/scanner.png b/assets/images/3.0x/scanner.png new file mode 100644 index 000000000..47683e611 Binary files /dev/null and b/assets/images/3.0x/scanner.png differ diff --git a/assets/images/3.0x/trash.png b/assets/images/3.0x/trash.png new file mode 100644 index 000000000..86a73d931 Binary files /dev/null and b/assets/images/3.0x/trash.png differ diff --git a/assets/images/load.png b/assets/images/load.png new file mode 100644 index 000000000..30281cf3c Binary files /dev/null and b/assets/images/load.png differ diff --git a/assets/images/scanner.png b/assets/images/scanner.png new file mode 100644 index 000000000..dda28983a Binary files /dev/null and b/assets/images/scanner.png differ diff --git a/assets/images/trash.png b/assets/images/trash.png new file mode 100644 index 000000000..990140214 Binary files /dev/null and b/assets/images/trash.png differ diff --git a/lib/src/screens/wallet_list/wallet_list_page.dart b/lib/src/screens/wallet_list/wallet_list_page.dart index da41eb8de..4d5f1f262 100644 --- a/lib/src/screens/wallet_list/wallet_list_page.dart +++ b/lib/src/screens/wallet_list/wallet_list_page.dart @@ -6,22 +6,15 @@ import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; -import 'package:cake_wallet/src/domain/common/wallet_description.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/stores/wallet_list/wallet_list_store.dart'; import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart'; -import 'package:cake_wallet/src/widgets/picker.dart'; class WalletListPage extends BasePage { - @override - bool get isModalBackButton => true; @override - String get title => S.current.wallet_list_title; - - @override - AppBarStyle get appBarStyle => AppBarStyle.withShadow; + ObstructingPreferredSizeWidget appBar(BuildContext context) => null; @override Widget body(BuildContext context) => WalletListBody(); @@ -33,92 +26,265 @@ class WalletListBody extends StatefulWidget { } class WalletListBodyState extends State { + final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24); WalletListStore _walletListStore; - void presetMenuForWallet(WalletDescription wallet, bool isCurrentWallet, - BuildContext bodyContext) { - final walletMenu = WalletMenu(bodyContext); - final items = walletMenu.generateItemsForWalletMenu(isCurrentWallet); - - showDialog( - context: bodyContext, - builder: (_) => Picker( - items: items, - selectedAtIndex: -1, - title: S.of(context).wallet_menu, - onItemSelected: (String item) => walletMenu.action( - walletMenu.listItems.indexOf(item), wallet, isCurrentWallet)), - ); - } - @override Widget build(BuildContext context) { _walletListStore = Provider.of(context); - return ScrollableWithBottomSection( - content: Container( - padding: EdgeInsets.all(20), - child: Observer( - builder: (_) => ListView.separated( - shrinkWrap: true, - physics: const NeverScrollableScrollPhysics(), - separatorBuilder: (_, index) => Divider( - color: Theme.of(context).dividerTheme.color, height: 1.0), - itemCount: _walletListStore.wallets.length, - itemBuilder: (__, index) { - final wallet = _walletListStore.wallets[index]; - final isCurrentWallet = + return SafeArea( + child: Container( + padding: EdgeInsets.only(top: 32), + color: PaletteDark.menuHeader, + child: ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(bottom: 20), + content: Container( + child: Observer( + builder: (_) => ListView.separated( + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + separatorBuilder: (_, index) => Divider( + color: PaletteDark.menuHeader, height: 16), + itemCount: _walletListStore.wallets.length, + itemBuilder: (__, index) { + final wallet = _walletListStore.wallets[index]; + final screenWidth = MediaQuery.of(context).size.width; + + final isCurrentWallet = _walletListStore.isCurrentWallet(wallet); - return InkWell( - onTap: () => - presetMenuForWallet(wallet, isCurrentWallet, context), - child: Container( - padding: EdgeInsets.only(left: 10.0, right: 10.0), - child: ListTile( - title: Text( - wallet.name, - style: TextStyle( - color: isCurrentWallet - ? Palette.cakeGreen - : Theme.of(context) - .primaryTextTheme - .headline - .color, - fontSize: 18.0, - fontWeight: FontWeight.w600), + final walletMenu = WalletMenu(context); + final items = walletMenu.generateItemsForWalletMenu(isCurrentWallet); + final colors = walletMenu.generateColorsForWalletMenu(isCurrentWallet); + final images = walletMenu.generateImagesForWalletMenu(isCurrentWallet); + + return Container( + height: 108, + width: double.infinity, + child: CustomScrollView( + scrollDirection: Axis.horizontal, + slivers: [ + SliverPersistentHeader( + pinned: false, + floating: true, + delegate: WalletTile( + min: screenWidth - 228, + max: screenWidth, + image: moneroIcon, + walletName: wallet.name, + walletAddress: '', + isCurrent: isCurrentWallet ), - trailing: isCurrentWallet - ? Icon( - Icons.check, - color: Palette.cakeGreen, - size: 20.0, - ) - : null))); - }), - ), - ), - bottomSection: Column(children: [ - PrimaryIconButton( - onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet), - iconData: Icons.add, - color: Theme.of(context).primaryTextTheme.button.backgroundColor, - borderColor: + ), + SliverList( + delegate: SliverChildBuilderDelegate( + (context, index) { + + final item = items[index]; + final color = colors[index]; + final image = images[index]; + + final content = Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + image, + SizedBox(height: 5), + Text( + item, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 12, + color: Colors.white + ), + ) + ], + ), + ); + + if (index == 0) { + return GestureDetector( + onTap: () => walletMenu.action( + walletMenu.listItems.indexOf(item), wallet, isCurrentWallet), + child: Container( + height: 108, + width: 108, + color: PaletteDark.menuHeader, + child: Container( + padding: EdgeInsets.only(left: 5, right: 5), + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(12), + bottomLeft: Radius.circular(12) + ), + color: color + ), + child: content, + ), + ), + ); + } + + return GestureDetector( + onTap: () => walletMenu.action( + walletMenu.listItems.indexOf(item), wallet, isCurrentWallet), + child: Container( + height: 108, + width: 108, + padding: EdgeInsets.only(left: 5, right: 5), + color: color, + child: content, + ), + ); + }, + childCount: items.length + ) + ) + ], + ), + ); + }), + ), + ), + bottomSection: Column(children: [ + PrimaryIconButton( + onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet), + iconData: Icons.add, + color: Theme.of(context).primaryTextTheme.button.backgroundColor, + borderColor: Theme.of(context).primaryTextTheme.button.decorationColor, - iconColor: Palette.violet, - iconBackgroundColor: Theme.of(context).primaryIconTheme.color, - text: S.of(context).wallet_list_create_new_wallet), - SizedBox(height: 10.0), - PrimaryIconButton( - onPressed: () => - Navigator.of(context).pushNamed(Routes.restoreWalletOptions), - iconData: Icons.refresh, - text: S.of(context).wallet_list_restore_wallet, - color: Theme.of(context).accentTextTheme.button.backgroundColor, - borderColor: + iconColor: Palette.violet, + iconBackgroundColor: Theme.of(context).primaryIconTheme.color, + text: S.of(context).wallet_list_create_new_wallet), + SizedBox(height: 10.0), + PrimaryIconButton( + onPressed: () => + Navigator.of(context).pushNamed(Routes.restoreWalletOptions), + iconData: Icons.refresh, + text: S.of(context).wallet_list_restore_wallet, + color: Theme.of(context).accentTextTheme.button.backgroundColor, + borderColor: Theme.of(context).accentTextTheme.button.decorationColor, - iconColor: Theme.of(context).primaryTextTheme.caption.color, - iconBackgroundColor: Theme.of(context).accentIconTheme.color) - ])); + iconColor: Theme.of(context).primaryTextTheme.caption.color, + iconBackgroundColor: Theme.of(context).accentIconTheme.color) + ])), + ) + ); } } + +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; + + @override + Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { + + double opacity = 1 - shrinkOffset / (max - min); + opacity = opacity >= 0 ? opacity : 0; + + double panelWidth = 12 * opacity; + panelWidth = panelWidth < 12 ? 0 : 12; + + final currentColor = isCurrent + ? Colors.white + : PaletteDark.menuHeader; + + return Stack( + fit: StackFit.expand, + overflow: Overflow.visible, + children: [ + Positioned( + top: 0, + right: max - 4, + child: Container( + height: 108, + width: 4, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)), + color: currentColor + ), + ), + ), + Positioned( + top: 0, + right: 12, + child: Container( + height: 108, + width: max - 16, + padding: EdgeInsets.only(left: 20, right: 20), + color: PaletteDark.menuHeader, + child: 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: Colors.white + ), + ) + ], + ) + ], + ), + ), + ), + Positioned( + top: 0, + right: 0, + child: Opacity( + opacity: opacity, + child: Container( + height: 108, + width: panelWidth, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + PaletteDark.walletCardTopEndSync, + PaletteDark.walletCardBottomEndSync + ] + ) + ), + ), + ) + ), + ], + ); + } + + @override + double get maxExtent => max; + + @override + double get minExtent => min; + + @override + bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; + +} diff --git a/lib/src/screens/wallet_list/wallet_menu.dart b/lib/src/screens/wallet_list/wallet_menu.dart index 0cb278047..1dcf27921 100644 --- a/lib/src/screens/wallet_list/wallet_menu.dart +++ b/lib/src/screens/wallet_list/wallet_menu.dart @@ -18,6 +18,20 @@ class WalletMenu { S.current.rescan ]; + final List listColors = [ + Colors.blue, + Colors.orange, + Colors.red, + Colors.green + ]; + + final List listImages = [ + Image.asset('assets/images/load.png', height: 32, width: 32, color: Colors.white), + Image.asset('assets/images/eye.png', height: 32, width: 32, color: Colors.white), + Image.asset('assets/images/trash.png', height: 32, width: 32, color: Colors.white), + Image.asset('assets/images/scanner.png', height: 32, width: 32, color: Colors.white) + ]; + List generateItemsForWalletMenu(bool isCurrentWallet) { final items = List(); @@ -29,6 +43,28 @@ class WalletMenu { return items; } + List generateColorsForWalletMenu(bool isCurrentWallet) { + final colors = List(); + + if (!isCurrentWallet) colors.add(listColors[0]); + if (isCurrentWallet) colors.add(listColors[1]); + if (!isCurrentWallet) colors.add(listColors[2]); + if (isCurrentWallet) colors.add(listColors[3]); + + return colors; + } + + List generateImagesForWalletMenu(bool isCurrentWallet) { + final images = List(); + + 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; + } + void action(int index, WalletDescription wallet, bool isCurrentWallet) { final _walletListStore = Provider.of(context);