diff --git a/assets/images/2.0x/eye_action.png b/assets/images/2.0x/eye_action.png new file mode 100644 index 00000000..e05bb87d Binary files /dev/null and b/assets/images/2.0x/eye_action.png differ diff --git a/assets/images/2.0x/new_wallet.png b/assets/images/2.0x/new_wallet.png new file mode 100644 index 00000000..1b92d6b2 Binary files /dev/null and b/assets/images/2.0x/new_wallet.png differ diff --git a/assets/images/2.0x/restore_wallet.png b/assets/images/2.0x/restore_wallet.png new file mode 100644 index 00000000..ce220373 Binary files /dev/null and b/assets/images/2.0x/restore_wallet.png differ diff --git a/assets/images/3.0x/eye_action.png b/assets/images/3.0x/eye_action.png new file mode 100644 index 00000000..a45123d4 Binary files /dev/null and b/assets/images/3.0x/eye_action.png differ diff --git a/assets/images/3.0x/new_wallet.png b/assets/images/3.0x/new_wallet.png new file mode 100644 index 00000000..0590e02a Binary files /dev/null and b/assets/images/3.0x/new_wallet.png differ diff --git a/assets/images/3.0x/restore_wallet.png b/assets/images/3.0x/restore_wallet.png new file mode 100644 index 00000000..2df74f55 Binary files /dev/null and b/assets/images/3.0x/restore_wallet.png differ diff --git a/assets/images/eye_action.png b/assets/images/eye_action.png new file mode 100644 index 00000000..5ffd96f5 Binary files /dev/null and b/assets/images/eye_action.png differ diff --git a/assets/images/new_wallet.png b/assets/images/new_wallet.png new file mode 100644 index 00000000..1aacf771 Binary files /dev/null and b/assets/images/new_wallet.png differ diff --git a/assets/images/restore_wallet.png b/assets/images/restore_wallet.png new file mode 100644 index 00000000..a16b4744 Binary files /dev/null and b/assets/images/restore_wallet.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 62591f7f..03824555 100644 --- a/lib/src/screens/wallet_list/wallet_list_page.dart +++ b/lib/src/screens/wallet_list/wallet_list_page.dart @@ -9,7 +9,9 @@ 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/stores/wallet_list/wallet_list_store.dart'; +import 'package:cake_wallet/src/stores/wallet/wallet_store.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 { @@ -27,17 +29,20 @@ class WalletListBody extends StatefulWidget { class WalletListBodyState extends State { final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24); + final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, color: PaletteDark.historyPanel); + final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, width: 12, color: Colors.white,); WalletListStore _walletListStore; ScrollController scrollController = ScrollController(); @override Widget build(BuildContext context) { + final walletStore = Provider.of(context); _walletListStore = Provider.of(context); return SafeArea( child: Container( padding: EdgeInsets.only(top: 32), - color: PaletteDark.menuHeader, + color: PaletteDark.historyPanel, child: ScrollableWithBottomSection( contentPadding: EdgeInsets.only(bottom: 20), content: Container( @@ -46,7 +51,7 @@ class WalletListBodyState extends State { shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), separatorBuilder: (_, index) => Divider( - color: PaletteDark.menuHeader, height: 16), + color: PaletteDark.historyPanel, height: 16), itemCount: _walletListStore.wallets.length, itemBuilder: (__, index) { final wallet = _walletListStore.wallets[index]; @@ -55,6 +60,13 @@ class WalletListBodyState extends State { final isCurrentWallet = _walletListStore.isCurrentWallet(wallet); + String shortAddress = ''; + + if (isCurrentWallet) { + shortAddress = walletStore.subaddress.address; + shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...'); + } + final walletMenu = WalletMenu(context); final items = walletMenu.generateItemsForWalletMenu(isCurrentWallet); final colors = walletMenu.generateColorsForWalletMenu(isCurrentWallet); @@ -75,7 +87,7 @@ class WalletListBodyState extends State { max: screenWidth, image: moneroIcon, walletName: wallet.name, - walletAddress: '', + walletAddress: shortAddress, isCurrent: isCurrentWallet ), ), @@ -87,49 +99,7 @@ class WalletListBodyState extends State { 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: () { - scrollController.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn); - 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, - ), - ), - ); - } + final radius = index == 0 ? 12.0 : 0.0; return GestureDetector( onTap: () { @@ -140,9 +110,34 @@ class WalletListBodyState extends State { child: Container( height: 108, width: 108, - padding: EdgeInsets.only(left: 5, right: 5), - color: color, - child: content, + color: PaletteDark.historyPanel, + child: Container( + padding: EdgeInsets.only(left: 5, right: 5), + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(radius), + bottomLeft: Radius.circular(radius) + ), + color: color + ), + child: Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + image, + SizedBox(height: 5), + Text( + item, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 12, + color: Colors.white + ), + ) + ], + ), + ), + ), ), ); }, @@ -156,143 +151,22 @@ class WalletListBodyState extends State { ), ), 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), + PrimaryImageButton( + onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet), + image: newWalletImage, + text: S.of(context).wallet_list_create_new_wallet, + color: Colors.white, + textColor: PaletteDark.historyPanel), 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) + PrimaryImageButton( + onPressed: () => + Navigator.of(context).pushNamed(Routes.restoreWalletOptions), + image: restoreWalletImage, + text: S.of(context).wallet_list_restore_wallet, + color: PaletteDark.historyPanelButton, + textColor: Colors.white) ])), ) ); } } - -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 1dcf2792..a6f512e0 100644 --- a/lib/src/screens/wallet_list/wallet_menu.dart +++ b/lib/src/screens/wallet_list/wallet_menu.dart @@ -27,7 +27,7 @@ class WalletMenu { 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/eye_action.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) ]; diff --git a/lib/src/screens/wallet_list/widgets/wallet_tile.dart b/lib/src/screens/wallet_list/widgets/wallet_tile.dart new file mode 100644 index 00000000..cef7ea7e --- /dev/null +++ b/lib/src/screens/wallet_list/widgets/wallet_tile.dart @@ -0,0 +1,135 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:cake_wallet/palette.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; + + @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.historyPanel; + + 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.historyPanel, + 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 + ), + ) + ], + ), + isCurrent ? SizedBox(height: 5) : Offstage(), + isCurrent + ? Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(width: 34), + Text( + walletAddress, + style: TextStyle( + fontSize: 12, + color: PaletteDark.walletCardText + ), + ) + ], + ) + : Offstage() + ], + ), + ), + ), + 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; + +} \ No newline at end of file diff --git a/lib/src/widgets/primary_button.dart b/lib/src/widgets/primary_button.dart index d8783883..21adfde8 100644 --- a/lib/src/widgets/primary_button.dart +++ b/lib/src/widgets/primary_button.dart @@ -143,29 +143,42 @@ class PrimaryImageButton extends StatelessWidget { {@required this.onPressed, @required this.image, @required this.text, - this.color = Palette.purple, - this.borderColor = Palette.deepPink, - this.iconColor = Colors.black}); + @required this.color, + @required this.textColor}); final VoidCallback onPressed; final Image image; final Color color; - final Color borderColor; - final Color iconColor; + final Color textColor; final String text; @override Widget build(BuildContext context) { return ButtonTheme( minWidth: double.infinity, - height: 58.0, + height: 52.0, child: FlatButton( onPressed: onPressed, color: color, shape: RoundedRectangleBorder( - side: BorderSide(color: borderColor), - borderRadius: BorderRadius.circular(12.0)), - child: Row( + borderRadius: BorderRadius.circular(26.0)), + child:Center( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + image, + SizedBox(width: 15), + Text( + text, + style: TextStyle( + fontSize: 15, + color: textColor + ), + ) + ], + ), + ) + /*Row( children: [ Container( width: 28.0, @@ -192,7 +205,7 @@ class PrimaryImageButton extends StatelessWidget { ) ])) ], - ), + ),*/ )); } }