From 6a799df7dafbeca8594ab0f639afa0dd7270d253 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Fri, 24 Apr 2020 15:01:19 +0300 Subject: [PATCH] CWA-201 | moved WalletTile class to wallet_tile.dart; changed design for PrimaryImageButton; changed background color for wallet_list_page; added short address to current wallet in the wallet_tile --- assets/images/2.0x/eye_action.png | Bin 0 -> 831 bytes assets/images/2.0x/new_wallet.png | Bin 0 -> 270 bytes assets/images/2.0x/restore_wallet.png | Bin 0 -> 451 bytes assets/images/3.0x/eye_action.png | Bin 0 -> 1307 bytes assets/images/3.0x/new_wallet.png | Bin 0 -> 474 bytes assets/images/3.0x/restore_wallet.png | Bin 0 -> 586 bytes assets/images/eye_action.png | Bin 0 -> 481 bytes assets/images/new_wallet.png | Bin 0 -> 182 bytes assets/images/restore_wallet.png | Bin 0 -> 271 bytes .../screens/wallet_list/wallet_list_page.dart | 240 +++++------------- lib/src/screens/wallet_list/wallet_menu.dart | 2 +- .../wallet_list/widgets/wallet_tile.dart | 135 ++++++++++ lib/src/widgets/primary_button.dart | 33 ++- 13 files changed, 216 insertions(+), 194 deletions(-) create mode 100644 assets/images/2.0x/eye_action.png create mode 100644 assets/images/2.0x/new_wallet.png create mode 100644 assets/images/2.0x/restore_wallet.png create mode 100644 assets/images/3.0x/eye_action.png create mode 100644 assets/images/3.0x/new_wallet.png create mode 100644 assets/images/3.0x/restore_wallet.png create mode 100644 assets/images/eye_action.png create mode 100644 assets/images/new_wallet.png create mode 100644 assets/images/restore_wallet.png create mode 100644 lib/src/screens/wallet_list/widgets/wallet_tile.dart diff --git a/assets/images/2.0x/eye_action.png b/assets/images/2.0x/eye_action.png new file mode 100644 index 0000000000000000000000000000000000000000..e05bb87d6238e213275483b086d33588088c7336 GIT binary patch literal 831 zcmV-F1Hk-=P)`u_@1oj5*21+MzH(V0%89B{3IWlIbHTgA z$-a|703;|96p>*VhG7_nVHk#Cyg3#$0|4&Ah2=w#Du`?4!nq^IAV2xKSS)_gYa}>a z1^E)h2RT6xKYIwW4&vyR={bEZJO_hriPrHQG8j_>(7K^qRTKs0OdS%;o>Q7R+>(8+oFK-0M& zYC{RzwF&n9|2jonxHQn?d-}BN_b#rdvxXjid)$qN2h*3rRZpLG{myI?wrOb~+z)u@ z*eCS;fSlB(s)h~^K}D+D;1)Vo30;zrkP4zUopP7sgFz@+5aBsyY-{Y1t|e#-BI}k~d69BON-%Q~R$|yzXjl!w5*P9!?5VYBzGXdh zX;EX~oDWY2BOdw8@A!b>HS|YZ4Rpt9+ZS~_1>`*_#UmcT-j?Hi@HCtcn0`F&uj%xh zA4u>{aYb<}TXp2Zu@&B|@P`q04%`~jshj!f=*^&J2J002ov JPDHLkV1j4icX|K- literal 0 HcmV?d00001 diff --git a/assets/images/2.0x/new_wallet.png b/assets/images/2.0x/new_wallet.png new file mode 100644 index 0000000000000000000000000000000000000000..1b92d6b2e6d7189d8b158a351dae6592c8b5156d GIT binary patch literal 270 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9E$svykh8Km+7D9BhG z(gU|_@4MHdA2#i2CV1;f#Hz1wBY`_SrR6Ey(ld(mTcc_Oy7_@H-Sm@dhg#Sh96&Go`T|7YBThoi0aM zc0JNIhLre@d<$;D$>vfC`h<$26CxkD+8|ykI`aec-9E#P zx+zI;Qq~*Tc~#af>b$w?}@9fw%S4P8%*HON=u$c{A15jl|W tjNTwFz9p=LL~?AyqAC~GT1x!7e*k5uB9%Z$-H!kO002ovPDHLkV1fq1yV(E$ literal 0 HcmV?d00001 diff --git a/assets/images/3.0x/eye_action.png b/assets/images/3.0x/eye_action.png new file mode 100644 index 0000000000000000000000000000000000000000..a45123d4dd38194bf49cd15be26b9b170b0ee9d5 GIT binary patch literal 1307 zcmV+$1?2jPP)VL$yIZBTZCY6EkFcmt^uSe-!X1a>EoJwciY=uRMKf}7k>4QscB@4!U5jkGyih#<&1*i3(}$X za_i+Yzm6eN26I4T^aTaOmoyBwUar0TKgQ@#!5hBx^2y6rjEk+8lHMY|U^6clUUnEi z&dY)_p_+ma(#*=sg_jwnQ&UJA+_3KF?}DBh>p7)Ud)d$w(-T6C-#{kKR0z@2*@6DE zg_k8{BF-UWL?qJ`+##LH%NZrY-_d+mDh^|I1VZClA)T)p1%+J2aCjOJ4i7@Qxq=Kk z&B7t1CaI3VC5CncLald@VT&X3eBymyLk5Q-(h_8AJ+tkolO4XrVW;nKL|-0qPGC41 zvQ!?v@j2vbJ+pg7U!NY8d(9xt_ezdS9JEuCSFnOCuI;AL-`SnU0SIk^^oV>z(je59 zPmpKPqH~FUT+k6D=xJjMsg#6JOC02>T6Fe}w5n$rE6C%JnvxJ2J*`Qzvxv?D{pr;s zK`5sNY`b&n1LX7lb9OCy9s1Kd?4c6{4{VOP7rvPdbXi37ra0YE0toX>nryn>h-Cjb zMiJ5N(4SNX%%IQZzTVS)<5O6r(&XUUEJCgpfMk#1Uul0-X3d&`Iv&n&DC$d`}L2%(LX3(I}pp!HOY2E zmlX2sHHF^I{WJX^e7SE9{Lk-{k88I5<6p=#00Sb6FHMcj#bx9kG-iAc@vjmkZy9mo`+RP5<<*9%i+ZA1;+$poLUHK*Yf9VBz@BB?+ zN0=sy1A2KXAV-H_6S-cJvfkF3zmNCU8hTU_og4)YdbpPIYVKR@H`en1cn-a^P)2ml zp+^zXsktDNw!06*EJ)ZKAq3QYSlh-QjzsH)cu9=)Mj@Z$)yvu%!<8&wWG~ zG4CP<;P=kZA^b7bt%-YuSVC}fE@c3r@!e24o*mDk%}jJ-OrXPM;Oyl(E1OsR>Vy#a2kCQ;(`I+K;Ig6ehWNowlHK zo}d44zxUn;3Jd$CkgkWx!GEW8_(v4T_LwxOaO7jLlLDcizQwrUG{e&e*&Ej(59=r> zq>BX&dsqjrj@=BEX2x_}4cEShlT!-Pp{8JTme23{xSBSa=-|Ve=G6cEhnikC+I&9H zJ&la19a+YaQc&pe9HQnQV>Gm37=~dOhG7_nVHk#C7=~dOhG7_nVHn2y;s<``VI!;A R6#f7J002ovPDHLkV1o7ya_0a5 literal 0 HcmV?d00001 diff --git a/assets/images/3.0x/new_wallet.png b/assets/images/3.0x/new_wallet.png new file mode 100644 index 0000000000000000000000000000000000000000..0590e02aea11c99fceef690bd2e4bee12ef6182f GIT binary patch literal 474 zcmV<00VV#4P)4my0u{PSCjBz7UHjWD>nE85JR>(H%05*^fU<2F$H_#2r2Dm|S0@&d9V#)(GO)l3I_};q*ye5~Q zOOxD%C=&o);h4}hfZtqR6#jErQSfs)QRpX0R6z=O5W^oe+dZ58UUt8I?AacRqWGko zu!xdv!PX+39oqxt;6%s{!x%1#9n{K*ghZ930WK)etcrL3%Nrv)C>i9RSDoZ?Kp; zBE}A61b*za4^KDP$r1yjlNGpC6C%$kogkdE zyCB9MCDWc~TRUZ2>c>!iLW`udg7$$12HFhIL${xW1pP#4O<{7@R(0h0R+0m?lnKPs zo5`W7h@E9K8VF>Ws5vx#7c^Gy*tW00e{@j8BV{Qvl;eY6H!Y#GU5I zkFIb$5oK4OWaErsqmq8}5fD}>g*9wX(s7dS7;(H`w1XHr-Z5JCovq2GzaM9&?G2mk;807*qoM6N<$g1ad8#{d8T literal 0 HcmV?d00001 diff --git a/assets/images/eye_action.png b/assets/images/eye_action.png new file mode 100644 index 0000000000000000000000000000000000000000..5ffd96f5589e3f6827cabe9e461d597d6451700b GIT binary patch literal 481 zcmV<70UrK|P)1ttb^lUD89XGrzO{_ zzEmzYxdfZdMRbB`Kxw%NIQ4<#sKgrr@eEF%Q48wPitTY}Qt4*960_&rJF+z}-@QIo z#!^XE1$;De&b@>C@P%^rF?P2Lynt7TTP<@|=J|VeB;G5f=c8dIchn{v#Ac7-{nAez zSg|v>beCZG_=Jw3pS%gg`3Uv}$DQ6Q&V{oGwrfSFsUp-bBJN@dF-U?|3DhV)(}T5G zH7eKl*2l<_e&G5sdV_H@x^%GRF_kT{1_ch5?JpEd->Lrn&-hc= z`^AnX*(SCX!CyFsxY75AH4ot=K9FQ Zed`0y%oVfleFhrK;OXk;vd$@?2>@aLJGlS= literal 0 HcmV?d00001 diff --git a/assets/images/restore_wallet.png b/assets/images/restore_wallet.png new file mode 100644 index 0000000000000000000000000000000000000000..a16b4744f5056b9166db38b6b719ddf617f92c19 GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^JV4CH!3HFy_x^nYq&N#aB8wRqxP?KOkzv*x37{Zj zage(c!@6@aFM%AEbVpxD28NCO+sOnzeX zXzjr{%p7|*uor$VneSk8pi-;N1lccdp?9ua3NevI#)< OGI+ZBxvX { 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 { ) ])) ], - ), + ),*/ )); } }