From 66aebb4d657b37522547cabdcdbd525bac25888f Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Tue, 5 May 2020 20:59:56 +0300 Subject: [PATCH] CWA-209 | applied new design to receive page --- assets/images/2.0x/copy_content.png | Bin 0 -> 517 bytes assets/images/2.0x/share.png | Bin 0 -> 319 bytes assets/images/3.0x/copy_content.png | Bin 0 -> 599 bytes assets/images/3.0x/share.png | Bin 0 -> 498 bytes assets/images/copy_content.png | Bin 0 -> 348 bytes assets/images/share.png | Bin 0 -> 277 bytes .../dashboard/widgets/wallet_card.dart | 7 +- .../exchange_trade/exchange_trade_page.dart | 2 +- lib/src/screens/receive/receive_page.dart | 471 ++++++++++-------- .../receive/{ => widgets}/qr_image.dart | 2 +- .../receive/{ => widgets}/qr_painter.dart | 0 11 files changed, 279 insertions(+), 203 deletions(-) create mode 100644 assets/images/2.0x/copy_content.png create mode 100644 assets/images/2.0x/share.png create mode 100644 assets/images/3.0x/copy_content.png create mode 100644 assets/images/3.0x/share.png create mode 100644 assets/images/copy_content.png create mode 100644 assets/images/share.png rename lib/src/screens/receive/{ => widgets}/qr_image.dart (90%) rename lib/src/screens/receive/{ => widgets}/qr_painter.dart (100%) diff --git a/assets/images/2.0x/copy_content.png b/assets/images/2.0x/copy_content.png new file mode 100644 index 0000000000000000000000000000000000000000..cf639846a21ce37619fd6cd6ee47aa583d2f6e41 GIT binary patch literal 517 zcmV+g0{Z=lP);s)4p1ib+!CcsJzxNs$`!Qc*Ap*PSI$PQTP5$X*vCL~tc@eOfm zOG45*16DI%Lg=KE$(Nbe2mKM&=nkh126)N=Y}f{wtlc^}c!@jR3JPDn?KhBdCfIRK*CYVgyzBJA&u+(pUsL^7EF-Ez= literal 0 HcmV?d00001 diff --git a/assets/images/2.0x/share.png b/assets/images/2.0x/share.png new file mode 100644 index 0000000000000000000000000000000000000000..dc4610066b64fe3f6607bc86b402e19b8dd47b41 GIT binary patch literal 319 zcmeAS@N?(olHy`uVBq!ia0vp^Qb4T6!3HF6ed?9~Qk(@Ik;M!QVyYm_=ozH)0Vv2= z9OUlAu^*ZFthk?vt_0QtxnDT?`ND`sZ|8-oZ2KfBnI;vOgbwWXSp-oz+sjuQFQpn$kKq!7nZ{ z3gJg&BXie1yK=O*Te` Lu6{1-oD!M<;?8&T literal 0 HcmV?d00001 diff --git a/assets/images/3.0x/copy_content.png b/assets/images/3.0x/copy_content.png new file mode 100644 index 0000000000000000000000000000000000000000..eb5f094b6d0aa1bd4c090269a15b8435c747f190 GIT binary patch literal 599 zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw1|+Ti+$;i8oCO|{#S9FJ79h;%I?XTvD9BhG zflp|Ih!*Ak(Ovp=@YY z&0^aaCY1b;y|Z)b#!U`PVr>^5az0^8N}RywuW+v+tg-T(O2mfUEN2vUSMH17T4{aq zUH48nzQy!Hg_yY(l3`hp`6OJ=)<3a*OK$rsI#vAt}h+-?PS+8g`OE7mZZt6 zp0aAnIIw1IZ0bVJ|DuM8+PfJK9+_og_}oHl$+q6@6P4ya{>VP9N}Ae`)FBx6dxj@D(tfxM|1Rq}u4srr+(vk6Z6u aVsxM7z(nzg1GS)(!rLi&A735O9;Jo_->%7A5Auz7RT7Q8I zV9px5Wgzs4IbXX28xvVA@E!`~qGoXm@_bPP z=0tq&T9#Ri$86j@vb9*b_774J5Ap;Vv68lTqLm+)tid*M+aRbjI0XCV?BA-`Wg#Yr zm#W21yd3mpfr|=qQ9&*$$VCOYs2~>=0(!gj$A^G%c9N-rmt*iizb=}4=75pwPXk#c8 z`S^YMJCS3DuXfB-u25R(RK1}mYw9J7;EIW=pEk^1?;Q9k()3JfWdB^n(~FnHX>Oh1 z9Hr z9OUlAu>8Dg2ofNNY zJl0lMTHiP`HH6nK+0I0Do_zQLJvKqs`x+|_I?iRhvi_E6UBn3$$J{G(GB(DSF*&Es VPq#a`tr_TQ22WQ%mvv4FO#t4^WB&jE literal 0 HcmV?d00001 diff --git a/lib/src/screens/dashboard/widgets/wallet_card.dart b/lib/src/screens/dashboard/widgets/wallet_card.dart index 4c4f7a511..a1bd18528 100644 --- a/lib/src/screens/dashboard/widgets/wallet_card.dart +++ b/lib/src/screens/dashboard/widgets/wallet_card.dart @@ -12,7 +12,8 @@ import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/domain/common/sync_status.dart'; -import 'package:cake_wallet/src/screens/receive/qr_image.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart'; +import 'package:cake_wallet/routes.dart'; class WalletCard extends StatefulWidget { @override @@ -425,7 +426,9 @@ class WalletCardState extends State { color: PaletteDark.walletCardSubAddressField ), child: InkWell( - onTap: () {}, + onTap: () => Navigator.of(context, + rootNavigator: true) + .pushNamed(Routes.receive), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ diff --git a/lib/src/screens/exchange_trade/exchange_trade_page.dart b/lib/src/screens/exchange_trade/exchange_trade_page.dart index 418b4e7d9..8409f9838 100644 --- a/lib/src/screens/exchange_trade/exchange_trade_page.dart +++ b/lib/src/screens/exchange_trade/exchange_trade_page.dart @@ -13,7 +13,7 @@ import 'package:cake_wallet/src/stores/send/send_store.dart'; import 'package:cake_wallet/src/stores/send/sending_state.dart'; import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; import 'package:cake_wallet/src/screens/exchange_trade/widgets/copy_button.dart'; -import 'package:cake_wallet/src/screens/receive/qr_image.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; diff --git a/lib/src/screens/receive/receive_page.dart b/lib/src/screens/receive/receive_page.dart index 718f2bb1c..b7f7fb33c 100644 --- a/lib/src/screens/receive/receive_page.dart +++ b/lib/src/screens/receive/receive_page.dart @@ -9,12 +9,15 @@ import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/stores/subaddress_list/subaddress_list_store.dart'; import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; -import 'package:cake_wallet/src/screens/receive/qr_image.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; class ReceivePage extends BasePage { @override - bool get isModalBackButton => true; + Color get backgroundColor => PaletteDark.mainBackgroundColor; + + @override + bool get resizeToAvoidBottomPadding => false; @override String get title => S.current.receive; @@ -22,6 +25,7 @@ class ReceivePage extends BasePage { @override Widget trailing(BuildContext context) { final walletStore = Provider.of(context); + final shareImage = Image.asset('assets/images/share.png'); return SizedBox( height: 37.0, @@ -34,17 +38,13 @@ class ReceivePage extends BasePage { padding: EdgeInsets.all(0), onPressed: () => Share.text( 'Share address', walletStore.subaddress.address, 'text/plain'), - child: Icon( - Icons.share, - size: 30.0, - )), + child: shareImage), ), ); } @override - Widget body(BuildContext context) => - SingleChildScrollView(child: ReceiveBody()); + Widget body(BuildContext context) => ReceiveBody(); } class ReceiveBody extends StatefulWidget { @@ -67,8 +67,10 @@ class ReceiveBodyState extends State { final walletStore = Provider.of(context); final subaddressListStore = Provider.of(context); - final currentColor = Theme.of(context).selectedRowColor; - final notCurrentColor = Theme.of(context).scaffoldBackgroundColor; + final copyImage = Image.asset('assets/images/copy_content.png'); + + final currentColor = PaletteDark.menuList; + final notCurrentColor = Colors.transparent; amountController.addListener(() { if (_formKey.currentState.validate()) { @@ -78,202 +80,273 @@ class ReceiveBodyState extends State { } }); - return SafeArea( - child: SingleChildScrollView( - child: Column( - children: [ - Container( - padding: EdgeInsets.all(35.0), - color: Theme.of(context).backgroundColor, - child: Column( - children: [ - Observer(builder: (_) { - return Row( - children: [ - Spacer( - flex: 1, - ), - Flexible( - flex: 2, + return Container( + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, + color: PaletteDark.mainBackgroundColor, + padding: EdgeInsets.only(top: 24), + child: Column( + children: [ + Flexible( + flex: 2, + child: Observer(builder: (_) { + return Row( + children: [ + Spacer( + flex: 1, + ), + Flexible( + flex: 2, + child: Center( child: AspectRatio( aspectRatio: 1.0, - child: Container( - padding: EdgeInsets.all(5), - color: Colors.white, - child: QrImage( - data: walletStore.subaddress.address + - walletStore.amountValue, - backgroundColor: Colors.transparent, - ), - ), - )), - Spacer( - flex: 1, - ) - ], - ); - }), - Observer(builder: (_) { - return Row( - children: [ - Expanded( - child: Container( - padding: EdgeInsets.all(20.0), - child: Center( - child: GestureDetector( - onTap: () { - Clipboard.setData(ClipboardData( - text: walletStore.subaddress.address)); - Scaffold.of(context).showSnackBar(SnackBar( - content: Text( - S.of(context).copied_to_clipboard, - style: TextStyle(color: Colors.white), - ), - backgroundColor: Colors.green, - )); - }, - child: Text( - walletStore.subaddress.address, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme - .title - .color), + child: QrImage( + data: walletStore.subaddress.address + + walletStore.amountValue, + backgroundColor: Colors.transparent, + foregroundColor: PaletteDark.walletCardText, ), ), - ), - )) - ], - ); - }), - Row( - children: [ - Expanded( - child: Form( - key: _formKey, - child: TextFormField( - keyboardType: - TextInputType.numberWithOptions(decimal: true), - inputFormatters: [ - BlacklistingTextInputFormatter( - RegExp('[\\-|\\ |\\,]')) - ], - style: TextStyle( - fontSize: 14.0, - ), - decoration: InputDecoration( - hintStyle: TextStyle( - color: Theme.of(context).hintColor), - hintText: S.of(context).amount, - focusedBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Palette.cakeGreen, width: 2.0)), - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Theme.of(context).focusColor, - width: 1.0))), - validator: (value) { - walletStore.validateAmount(value); - return walletStore.errorMessage; - }, - autovalidate: true, - controller: amountController, - ))) - ], - ) - ], - ), - ), - Row( - children: [ - Expanded( - child: Container( - color: Theme.of(context).accentTextTheme.headline.color, - child: Column( - children: [ - ListTile( - title: Text( - S.of(context).subaddresses, - style: TextStyle( - fontSize: 16.0, - color: Theme.of(context) - .primaryTextTheme - .headline - .color), - ), - trailing: Container( - width: 28.0, - height: 28.0, - decoration: BoxDecoration( - color: Theme.of(context).selectedRowColor, - shape: BoxShape.circle), - child: InkWell( - onTap: () => Navigator.of(context) - .pushNamed(Routes.newSubaddress), - borderRadius: BorderRadius.all(Radius.circular(14.0)), - child: Icon( - Icons.add, - color: Palette.violet, - size: 22.0, - ), - ), - ), - ), - Divider( - color: Theme.of(context).dividerTheme.color, - height: 1.0, + )), + Spacer( + flex: 1, ) ], - ), - )) - ], - ), - Observer(builder: (_) { - return ListView.separated( - shrinkWrap: true, - physics: NeverScrollableScrollPhysics(), - itemCount: subaddressListStore.subaddresses.length, - separatorBuilder: (context, i) { - return Divider( - color: Theme.of(context).dividerTheme.color, - height: 1.0, - ); - }, - itemBuilder: (context, i) { - return Observer(builder: (_) { - final subaddress = subaddressListStore.subaddresses[i]; - final isCurrent = - walletStore.subaddress.address == subaddress.address; - final label = subaddress.label.isNotEmpty - ? subaddress.label - : subaddress.address; - - return InkWell( - onTap: () => walletStore.setSubaddress(subaddress), - child: Container( - color: isCurrent ? currentColor : notCurrentColor, - child: Column(children: [ - ListTile( - title: Text( - label, - style: TextStyle( - fontSize: 16.0, - color: Theme.of(context) - .primaryTextTheme - .headline - .color), + ); + }), + ), + Padding( + padding: EdgeInsets.all(24), + child: Row( + children: [ + Expanded( + child: Form( + key: _formKey, + child: TextFormField( + keyboardType: + TextInputType.numberWithOptions(decimal: true), + inputFormatters: [ + BlacklistingTextInputFormatter( + RegExp('[\\-|\\ |\\,]')) + ], + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20.0, + color: Colors.white ), - ) - ]), + decoration: InputDecoration( + hintStyle: TextStyle( + fontSize: 20, + color: PaletteDark.walletCardText), + hintText: S.of(context).amount, + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: PaletteDark.walletCardText, width: 1.0)), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: PaletteDark.walletCardText, + width: 1.0))), + validator: (value) { + walletStore.validateAmount(value); + return walletStore.errorMessage; + }, + autovalidate: true, + controller: amountController, + ))) + ], + ), + ), + Padding( + padding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + child: Observer( + builder: (_) => GestureDetector( + onTap: () { + Clipboard.setData(ClipboardData( + text: walletStore.subaddress.address)); + Scaffold.of(context).showSnackBar(SnackBar( + content: Text( + S.of(context).copied_to_clipboard, + style: TextStyle(color: Colors.white), ), - ); - }); - }); - }) - ], - ))); + backgroundColor: Colors.green, + duration: Duration(milliseconds: 500), + )); + }, + child: Container( + height: 54, + padding: EdgeInsets.only(left: 24, right: 24), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(27)), + color: PaletteDark.walletCardSubAddressField + ), + child: Row( + mainAxisSize: MainAxisSize.max, + children: [ + Expanded( + child: Text( + walletStore.subaddress.address, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Colors.white + ), + ), + ), + Padding( + padding: EdgeInsets.only(left: 12), + child: copyImage, + ) + ], + ), + ), + ) + ), + ), + Flexible( + flex: 3, + child: ClipRRect( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(24), + topRight: Radius.circular(24), + ), + child: Container( + color: PaletteDark.historyPanel, + child: Observer( + builder: (_) => ListView.separated( + separatorBuilder: (context, index) => Divider( + height: 1, + color: PaletteDark.menuList, + ), + itemCount: subaddressListStore.subaddresses.length + 2, + itemBuilder: (context, index) { + + if (index == 0) { + return accountTile( + onTap: () {}, + title: walletStore.account.label, + icon: Icon( + Icons.arrow_forward_ios, + size: 14, + color: Colors.white, + ) + ); + } + + if (index == 1) { + return accountTile( + onTap: () => Navigator.of(context) + .pushNamed(Routes.newSubaddress), + title: S.of(context).subaddresses, + icon: Icon( + Icons.add, + size: 20, + color: Colors.white, + ) + ); + } + + index -= 2; + + return Observer( + builder: (_) { + final subaddress = subaddressListStore.subaddresses[index]; + final isCurrent = + walletStore.subaddress.address == subaddress.address; + + final label = subaddress.label; + final address = subaddress.address; + + return InkWell( + onTap: () => walletStore.setSubaddress(subaddress), + child: Container( + color: isCurrent ? currentColor : notCurrentColor, + padding: EdgeInsets.only( + left: 24, + right: 24, + top: 32, + bottom: 32 + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + label.isNotEmpty + ? Text( + label, + style: TextStyle( + fontSize: 14, + color: PaletteDark.walletCardText + ), + ) + : Offstage(), + Padding( + padding: label.isNotEmpty + ? EdgeInsets.only(top: 10) + : EdgeInsets.only(top: 0), + child: Text( + address, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Colors.white + ), + ), + ) + ]), + ), + ); + } + ); + } + ) + ), + ), + ) + ) + ], + ), + ); } + + Widget accountTile({ + @required VoidCallback onTap, + @required String title, + @required Icon icon + }) => GestureDetector( + onTap: onTap, + child: Container( + padding: EdgeInsets.only( + left: 24, + right: 24, + top: 32, + bottom: 32 + ), + color: Colors.transparent, + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + title, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + color: Colors.white + ), + ), + Container( + height: 32, + width: 32, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: PaletteDark.menuList + ), + child: icon, + ) + ], + ), + ), + ); } diff --git a/lib/src/screens/receive/qr_image.dart b/lib/src/screens/receive/widgets/qr_image.dart similarity index 90% rename from lib/src/screens/receive/qr_image.dart rename to lib/src/screens/receive/widgets/qr_image.dart index 7beb689d2..fceb61518 100644 --- a/lib/src/screens/receive/qr_image.dart +++ b/lib/src/screens/receive/widgets/qr_image.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; import 'package:qr/qr.dart'; -import 'package:cake_wallet/src/screens/receive/qr_painter.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_painter.dart'; class QrImage extends StatelessWidget { QrImage({ diff --git a/lib/src/screens/receive/qr_painter.dart b/lib/src/screens/receive/widgets/qr_painter.dart similarity index 100% rename from lib/src/screens/receive/qr_painter.dart rename to lib/src/screens/receive/widgets/qr_painter.dart