From ecf7a5ba7856c2005903a5f0df44c3cfdc5c50c9 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Tue, 25 Aug 2020 21:12:14 +0300 Subject: [PATCH] CAKE-28 | reworked exchange confirm page; applied light and dark themes to exchange confirm page, currency picker, picker, base alert dialog, alert with one action; applied maximum characters parameter to crypto currency text field in the exchange card --- assets/images/2.0x/question_mark.png | Bin 0 -> 1240 bytes assets/images/3.0x/question_mark.png | Bin 0 -> 1662 bytes assets/images/question_mark.png | Bin 0 -> 713 bytes lib/palette.dart | 2 + .../exchange/widgets/currency_picker.dart | 169 +++++++++--------- .../exchange/widgets/exchange_card.dart | 1 + .../exchange_trade/exchange_confirm_page.dart | 162 ++++++++++------- .../monero_account_list_page.dart | 4 +- lib/src/widgets/alert_with_one_action.dart | 11 +- lib/src/widgets/base_alert_dialog.dart | 133 ++++++-------- lib/src/widgets/base_text_form_field.dart | 5 +- lib/src/widgets/picker.dart | 154 ++++++++++------ lib/themes.dart | 99 +++++----- .../dashboard/dashboard_view_model.dart | 3 +- .../exchange/exchange_view_model.dart | 2 +- 15 files changed, 404 insertions(+), 341 deletions(-) create mode 100644 assets/images/2.0x/question_mark.png create mode 100644 assets/images/3.0x/question_mark.png create mode 100644 assets/images/question_mark.png diff --git a/assets/images/2.0x/question_mark.png b/assets/images/2.0x/question_mark.png new file mode 100644 index 0000000000000000000000000000000000000000..37f5edfcc923275940547fc9472d59792c020938 GIT binary patch literal 1240 zcmV;}1Sk86P)pJ%kpNLl2=8RIrP0m1+t-D$ttHOYFZOGL*({50*~Cz1aQ>n%qik zTIF72`BF-4hz@P(Eh@Anwrbn^huq*Q?#x(Kz{nu{EC6eD>|zH}Abc$f0U| zbMCZQY7pWlKv)5wIWQC z=bi5MI;{a1sB)`a7Cux9D7ND+M!@dzV513nfhSnD?>bcL<#m*ez>ecHh&yqg zhv%2f(9EfwsW_7LX3LHxu3@ z0A$SwTFN!GxuEhnUy4VuMK#^v@*_HD4ICg*0K{8(1ruDvan3$U3yF!)e6y}Qye^~^ zx5Kb%L7f-u`E03v&J85(c+TndN-J4)z}v{v_cn($fCqx$NL*=am)R_f49YxBY6T_eFZY4p!sP;^9!P?V8Uv6 z%y;Bb)|XZ4+x$eR5+3tBd4JM;*D1DQL*)v)6lBP8io4;@e4`Z+pQK~mQfU}pte*!OvaqgR!XC!MU)B>zld*-f zGznIPzg}m(4~DuB3#(l)36_2S-boOb&2=Hb&o5oxPJ-p#ZxyDLb>M}sI3Xffi40nT zRkCkkU&ix%bV>>Vd=xSd?|(xbJej&dg2n$i7R2wrNgPGwZp$vL1)s0jS{&ZY`sNy3HYt*7CA-gVBdnl?ymYg7&4xKuBWMi7eRQ0W_;urDp{HTd&Bz4mew6el**cGF!K3Y4;A|9GThg$_4;*6fw zt2`uLYkH2nFH~+z(r-livZ3)(AQh)+krro0j46 zZW+{f<2bCUTN}`>d+DZ6wCba1c+OCJOHP9gXL#qEfnRKGlAvaIOf^3Q_bT$7MdXn# ztkSu5>wka!a`f(v&lF`fG&~0dtiSjE(!+oMKCl|2^S~wozfS19uuADi1_|z=Dqdv& z6x?tzb&<68Y#MAP@I>efQWmUI<|)zy_pmM32T3+pHQ z>svbWGhHGq)wiAT#BEd^&nYY(9G$78i?Eyb`0NE>(ZEj`>jLBe0000?zB literal 0 HcmV?d00001 diff --git a/assets/images/3.0x/question_mark.png b/assets/images/3.0x/question_mark.png new file mode 100644 index 0000000000000000000000000000000000000000..7b08436f2769cf02f019f49315fd11b07bc51296 GIT binary patch literal 1662 zcmV-^27&pBP)wkTq&Ta7sw|FTmYvB;Lsv+iTep^Zb^W~ zoT^GikXr>Paiq5Dt$S#z9^FGyX2UKa{Z@T*@qNBNXYeDtHT|_Z`FwxAqxnqUW-BI6AaE+iC7OG7UP&o8T^-GMk*j3aDiyduJd1Rj)0 z^~1<=JfeP}FVrzz%Qz8{M+xx%k8~qL%DKbMyOrZ(91o=>{@!Q5R@LF z$)L_v(UxLbyG>m&+kS#H>@(P}#N~s{@|^Bu_zE68T)d6yGukgB4#h1Mz5RAe25JQo z4onC{DjL3Dwe2jaVq7w8s2*-EtUw6+{27F*VRH#AU>PdTRJ0q3ibClq=(ZuX*TI59 z>AvbHk#?Ug)hB?c$j&#qw^8l8paL;iK-AvW?h|2Hn0j~z8(&)G69xxg4jVT4aY|Tl zeAEZI3*!BYU_qaA8WxZ;C((NPTZNqz7t?lM<1H<1F>AX?xr%7L{Cy;KWT=f+1-`_MN;ioK=mu1SLVr z-JoBp$9Gj4m|Tbms}2DqX6m(h9~_Z+)!=3lQ9kZBYlR)0Q8Q;xz#*B7kR5nz%3JUV zSa#&+`&$cEK1W3IIp8bJ$4ID7d>ebau7w&1lLvr?di4&;q;I-VNQ>)MTacydC8XVG1 z1{?CA%7HM={_s4bJcqlkWbk?nHEVTW9jL$$0;-PO{Mt!ps<%$VG}Lc5<+=!Fe+&sx z9t*gWfp3%m9)v;4gf3P&PX7hXXUpT%I~YFaMuzr>VY(AKQC95q(tm*no+;*KG^P)` zEg5czB7yrZy=3r7hl1Q2~4Crc=9MC zO$iJ_48j6vkZR*)fh5;$7o&y2Luo`&A`o}_-rN>5(GyDq6DlJI*krq6-}f1znq-P? z%FpUf;JnI6lJ~T}H#~PT2xbpA7uUd&ME@;-Wn8*4zV1OVe9k1t$pbYtMj3nhUHJz{ zK?f^P*FkYXB%iaec%eIj~7{9qL?sq~shwf%>SsjRvD4}3uWxMO#_X8-^I07*qo IM6N<$f(- zJ!7K17Lz8%QuaBs!{V^rT_EW;W?eUJ_~l3)tk&lc_WoB56xoJXHxvidTo zD%76Rw1R|Sv0u+d#1Hw{Uc_lFrs_5FHL|RXL_r#3$=75r)N^x%+}4fot+l`BKs4e` z5p^w=tekWA@c8mi#B7yD^J|jFz(-~)GveEB@z>YXc~L}|ro#-neZb3!kK zFDz!DC=o#?$d|zix>&n?%%M6T4zI@a;zq#YlXRftOWHMC`QeR#`Dbt_{>g&$BIrtB z{vC^g4g1a9$7Sq8u%yP!dH^ekM~tQzh=vkm7_yiiy0UZZtDR)UX7JsaY(kdZ!9=#}00000NkvXXu0mjf*y>QQ literal 0 HcmV?d00001 diff --git a/lib/palette.dart b/lib/palette.dart index aa962f1da..d2c761bff 100644 --- a/lib/palette.dart +++ b/lib/palette.dart @@ -31,6 +31,7 @@ class Palette { static const Color darkGray = Color.fromRGBO(122, 147, 186, 1.0); static const Color shadowWhite = Color.fromRGBO(242, 245, 255, 1.0); static const Color niagara = Color.fromRGBO(152, 172, 201, 1.0); + static const Color alizarinRed = Color.fromRGBO(233, 45, 45, 1.0); // FIXME: Rename. static const Color eee = Color.fromRGBO(236, 239, 245, 1.0); @@ -79,6 +80,7 @@ class PaletteDark { static const Color violetBlue = Color.fromRGBO(59, 72, 119, 1.0); static const Color distantBlue = Color.fromRGBO(72, 85, 131, 1.0); static const Color moderateVioletBlue = Color.fromRGBO(62, 73, 113, 1.0); + static const Color deepVioletBlue = Color.fromRGBO(52, 66, 104, 1.0); // FIXME: Rename. static const Color eee = Color.fromRGBO(236, 239, 245, 1.0); diff --git a/lib/src/screens/exchange/widgets/currency_picker.dart b/lib/src/screens/exchange/widgets/currency_picker.dart index 32398de65..2cc106b2c 100644 --- a/lib/src/screens/exchange/widgets/currency_picker.dart +++ b/lib/src/screens/exchange/widgets/currency_picker.dart @@ -1,8 +1,10 @@ import 'dart:ui'; +import 'package:cake_wallet/palette.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; -import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/src/domain/common/crypto_currency.dart'; +import 'package:cake_wallet/src/widgets/alert_background.dart'; +import 'package:cake_wallet/src/widgets/alert_close_button.dart'; class CurrencyPicker extends StatelessWidget { CurrencyPicker({ @@ -16,104 +18,103 @@ class CurrencyPicker extends StatelessWidget { final List items; final String title; final Function(CryptoCurrency) onItemSelected; + final closeButton = Image.asset('assets/images/close.png', + color: Palette.darkBlueCraiola, + ); @override Widget build(BuildContext context) { - return GestureDetector( - onTap: () => Navigator.of(context).pop(), - child: Container( - color: Colors.transparent, - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), - child: Container( - decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)), - child: Center( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - padding: EdgeInsets.only(left: 24, right: 24), - child: Text( - title, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - decoration: TextDecoration.none, - color: Colors.white - ), + return AlertBackground( + child: Stack( + alignment: Alignment.center, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.only(left: 24, right: 24), + child: Text( + title, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 18, + fontFamily: 'Poppins', + fontWeight: FontWeight.bold, + decoration: TextDecoration.none, + color: Colors.white ), ), - Padding( - padding: EdgeInsets.only(top: 24), - child: GestureDetector( - onTap: () => null, - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(14)), - child: Container( - height: 400, - width: 300, - color: Theme.of(context).dividerColor, - child: GridView.count( - shrinkWrap: true, - crossAxisCount: 3, - childAspectRatio: 1.25, - physics: const NeverScrollableScrollPhysics(), - crossAxisSpacing: 1, - mainAxisSpacing: 1, - children: List.generate(15, (index) { + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: GestureDetector( + onTap: () => null, + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(14)), + child: Container( + height: 400, + width: 300, + color: Theme.of(context).accentTextTheme.title.backgroundColor, + child: GridView.count( + shrinkWrap: true, + crossAxisCount: 3, + childAspectRatio: 1.25, + physics: const NeverScrollableScrollPhysics(), + crossAxisSpacing: 1, + mainAxisSpacing: 1, + children: List.generate(15, (index) { - if (index == 14) { - return Container( - color: Theme.of(context).primaryTextTheme.display1.color, - ); - } + if (index == 14) { + return Container( + color: Theme.of(context).accentTextTheme.title.color, + ); + } - final item = items[index]; - final isItemSelected = index == selectedAtIndex; + final item = items[index]; + final isItemSelected = index == selectedAtIndex; - final color = isItemSelected - ? Theme.of(context).accentTextTheme.subtitle.decorationColor - : Theme.of(context).primaryTextTheme.display1.color; - final textColor = isItemSelected - ? Colors.blue - : Theme.of(context).primaryTextTheme.title.color; + final color = isItemSelected + ? Theme.of(context).textTheme.body2.color + : Theme.of(context).accentTextTheme.title.color; + final textColor = isItemSelected + ? Palette.blueCraiola + : Theme.of(context).primaryTextTheme.title.color; - return GestureDetector( - onTap: () { - if (onItemSelected == null) { - return; - } - Navigator.of(context).pop(); - onItemSelected(item); - }, - child: Container( - color: color, - child: Center( - child: Text( - item.toString(), - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - decoration: TextDecoration.none, - color: textColor - ), + return GestureDetector( + onTap: () { + if (onItemSelected == null) { + return; + } + Navigator.of(context).pop(); + onItemSelected(item); + }, + child: Container( + color: color, + child: Center( + child: Text( + item.toString(), + style: TextStyle( + fontSize: 18, + fontFamily: 'Poppins', + fontWeight: FontWeight.w600, + decoration: TextDecoration.none, + color: textColor ), ), ), - ); - }) - ), + ), + ); + }) ), ), ), - ) - ], - ), - ) - ), - ), - ), + ), + ) + ], + ), + AlertCloseButton(image: closeButton) + ], + ) ); } } \ No newline at end of file diff --git a/lib/src/screens/exchange/widgets/exchange_card.dart b/lib/src/screens/exchange/widgets/exchange_card.dart index f42ea58f4..9be446fb8 100644 --- a/lib/src/screens/exchange/widgets/exchange_card.dart +++ b/lib/src/screens/exchange/widgets/exchange_card.dart @@ -146,6 +146,7 @@ class ExchangeCardState extends State { keyboardType: TextInputType.numberWithOptions( signed: false, decimal: true), inputFormatters: [ + LengthLimitingTextInputFormatter(15), BlacklistingTextInputFormatter( RegExp('[\\-|\\ |\\,]')) ], diff --git a/lib/src/screens/exchange_trade/exchange_confirm_page.dart b/lib/src/screens/exchange_trade/exchange_confirm_page.dart index 97d3b316c..0ad35f423 100644 --- a/lib/src/screens/exchange_trade/exchange_confirm_page.dart +++ b/lib/src/screens/exchange_trade/exchange_confirm_page.dart @@ -6,6 +6,7 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/domain/exchange/trade.dart'; +import 'package:cake_wallet/palette.dart'; class ExchangeConfirmPage extends BasePage { ExchangeConfirmPage({@required this.trade}); @@ -16,94 +17,123 @@ class ExchangeConfirmPage extends BasePage { String get title => S.current.copy_id; @override - Widget body(BuildContext context) { - final copyImage = Image.asset('assets/images/copy_content.png', + Widget trailing(BuildContext context) { + final questionImage = Image.asset('assets/images/question_mark.png', color: Theme.of(context).primaryTextTheme.title.color); + return SizedBox( + height: 20.0, + width: 20.0, + child: ButtonTheme( + minWidth: double.minPositive, + child: FlatButton( + highlightColor: Colors.transparent, + splashColor: Colors.transparent, + padding: EdgeInsets.all(0), + onPressed: () {}, + child: questionImage), + ), + ); + } + + @override + Widget body(BuildContext context) { return Container( - padding: EdgeInsets.all(24), + padding: EdgeInsets.fromLTRB(24, 0, 24, 24), child: Column( children: [ Expanded( - child: Center( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - S.of(context).exchange_result_write_down_trade_id, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme.title.color), - ), - Padding( - padding: EdgeInsets.only(top: 60), + child: Column( + children: [ + Flexible( + child: Center( child: Text( - S.of(context).trade_id, + S.of(context).exchange_result_write_down_trade_id, textAlign: TextAlign.center, style: TextStyle( - fontSize: 16.0, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme.title.color), + fontSize: 18.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme.title.color), ), + ) + ), + Container( + height: 178, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(30)), + border: Border.all( + width: 1, + color: Theme.of(context).accentTextTheme.caption.color + ), + color: Theme.of(context).accentTextTheme.title.color ), - Padding( - padding: EdgeInsets.only(top: 24), - child: Builder( - builder: (context) => GestureDetector( - onTap: () { - Clipboard.setData(ClipboardData(text: trade.id)); - Scaffold.of(context).showSnackBar(SnackBar( - content: Text( - S.of(context).copied_to_clipboard, - textAlign: TextAlign.center, - style: TextStyle(color: Colors.white), - ), - backgroundColor: Colors.green, - duration: Duration(milliseconds: 1500), - )); - }, - child: Container( - height: 60, - padding: EdgeInsets.only(left: 24, right: 24), - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(30)), - color: Theme.of(context).accentTextTheme.title.backgroundColor - ), - child: Row( - mainAxisSize: MainAxisSize.max, + child: Column( + children: [ + Expanded( + child: Padding( + padding: EdgeInsets.all(24), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - Expanded( - child: Text( - trade.id, - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme.title.color - ), + Text( + S.of(context).trade_id, + style: TextStyle( + fontSize: 12.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme.overline.color + ), + ), + Text( + trade.id, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.title.color ), ), - Padding( - padding: EdgeInsets.only(left: 12), - child: copyImage, - ) ], ), + ) + ), + Padding( + padding: EdgeInsets.fromLTRB(10, 0, 10, 10), + child: Builder( + builder: (context) => PrimaryButton( + onPressed: () { + Clipboard.setData(ClipboardData(text: trade.id)); + Scaffold.of(context).showSnackBar(SnackBar( + content: Text( + S.of(context).copied_to_clipboard, + textAlign: TextAlign.center, + style: TextStyle(color: Colors.white), + ), + backgroundColor: Colors.green, + duration: Duration(milliseconds: 1500), + )); + }, + text: S.of(context).copy_id, + color: Theme.of(context).accentTextTheme.caption.backgroundColor, + textColor: Theme.of(context).primaryTextTheme.title.color + ), ), ) - ), - ) - ], - ), - )), + ], + ), + ), + Flexible( + child: Offstage() + ), + ], + ) + ), PrimaryButton( onPressed: () => Navigator.of(context) .pushReplacementNamed(Routes.exchangeTrade, arguments: trade), text: S.of(context).saved_the_trade_id, - color: Colors.green, + color: Palette.blueCraiola, textColor: Colors.white) ], ), diff --git a/lib/src/screens/monero_accounts/monero_account_list_page.dart b/lib/src/screens/monero_accounts/monero_account_list_page.dart index 8c3a5503e..0f4d493fe 100644 --- a/lib/src/screens/monero_accounts/monero_account_list_page.dart +++ b/lib/src/screens/monero_accounts/monero_account_list_page.dart @@ -27,7 +27,9 @@ class MoneroAccountListPage extends StatelessWidget { } final MoneroAccountListViewModel accountListViewModel; - final closeIcon = Image.asset('assets/images/close.png'); + final closeIcon = Image.asset('assets/images/close.png', + color: Palette.darkBlueCraiola, + ); ScrollController controller; double backgroundHeight; diff --git a/lib/src/widgets/alert_with_one_action.dart b/lib/src/widgets/alert_with_one_action.dart index 704243591..e7f1a0d15 100644 --- a/lib/src/widgets/alert_with_one_action.dart +++ b/lib/src/widgets/alert_with_one_action.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:cake_wallet/src/widgets/base_alert_dialog.dart'; +import 'package:cake_wallet/palette.dart'; class AlertWithOneAction extends BaseAlertDialog { AlertWithOneAction({ @@ -31,13 +32,7 @@ class AlertWithOneAction extends BaseAlertDialog { width: 300, height: 52, padding: EdgeInsets.only(left: 12, right: 12), - decoration: BoxDecoration( - borderRadius: BorderRadius.only( - bottomLeft: Radius.circular(24), - bottomRight: Radius.circular(24) - ), - color: Colors.white - ), + color: Palette.blueCraiola, child: ButtonTheme( minWidth: double.infinity, child: FlatButton( @@ -50,7 +45,7 @@ class AlertWithOneAction extends BaseAlertDialog { style: TextStyle( fontSize: 15, fontWeight: FontWeight.w600, - color: Colors.blue, + color: Colors.white, decoration: TextDecoration.none, ), )), diff --git a/lib/src/widgets/base_alert_dialog.dart b/lib/src/widgets/base_alert_dialog.dart index 8a10d1d3f..30fb6fc23 100644 --- a/lib/src/widgets/base_alert_dialog.dart +++ b/lib/src/widgets/base_alert_dialog.dart @@ -17,6 +17,7 @@ class BaseAlertDialog extends StatelessWidget { textAlign: TextAlign.center, style: TextStyle( fontSize: 20, + fontFamily: 'Poppins', fontWeight: FontWeight.w600, color: Theme.of(context).primaryTextTheme.title.color, decoration: TextDecoration.none, @@ -30,7 +31,7 @@ class BaseAlertDialog extends StatelessWidget { textAlign: TextAlign.center, style: TextStyle( fontSize: 16, - fontWeight: FontWeight.w600, + fontFamily: 'Poppins', color: Theme.of(context).primaryTextTheme.title.color, decoration: TextDecoration.none, ), @@ -38,55 +39,39 @@ class BaseAlertDialog extends StatelessWidget { } Widget actionButtons(BuildContext context) { - return Container( - width: 300, - height: 52, - decoration: BoxDecoration( - borderRadius: BorderRadius.only( - bottomLeft: Radius.circular(24), - bottomRight: Radius.circular(24) - ), - color: Colors.white - ), - child: Row( - mainAxisSize: MainAxisSize.max, - children: [ - Flexible( + return Row( + mainAxisSize: MainAxisSize.max, + children: [ + Flexible( child: Container( + height: 52, padding: EdgeInsets.only(left: 12, right: 12), - decoration: BoxDecoration( - borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)), - ), + color: Palette.blueCraiola, child: ButtonTheme( minWidth: double.infinity, child: FlatButton( - onPressed: actionLeft, - highlightColor: Colors.transparent, - splashColor: Colors.transparent, - child: Text( - leftActionButtonText, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: Colors.blue, - decoration: TextDecoration.none, - ), - )), + onPressed: actionLeft, + highlightColor: Colors.transparent, + splashColor: Colors.transparent, + child: Text( + leftActionButtonText, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 15, + fontFamily: 'Poppins', + fontWeight: FontWeight.w600, + color: Colors.white, + decoration: TextDecoration.none, + ), + )), ), ) - ), - Container( - height: 52, - width: 1, - color: Colors.grey.withOpacity(0.2), - ), - Flexible( + ), + Flexible( child: Container( + height: 52, padding: EdgeInsets.only(left: 12, right: 12), - decoration: BoxDecoration( - borderRadius: BorderRadius.only(bottomRight: Radius.circular(24)), - ), + color: Palette.alizarinRed, child: ButtonTheme( minWidth: double.infinity, child: FlatButton( @@ -98,16 +83,16 @@ class BaseAlertDialog extends StatelessWidget { textAlign: TextAlign.center, style: TextStyle( fontSize: 15, + fontFamily: 'Poppins', fontWeight: FontWeight.w600, - color: Colors.red, + color: Colors.white, decoration: TextDecoration.none, ), )), ), ) - ) - ], - ), + ) + ], ); } @@ -126,44 +111,30 @@ class BaseAlertDialog extends StatelessWidget { child: Center( child: GestureDetector( onTap: () => null, - child: Container( - width: 300, - height: 257, - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(24)), - color: Theme.of(context).accentTextTheme.title.backgroundColor - ), - child: Column( - children: [ - Container( - width: 300, - height: 77, - padding: EdgeInsets.only(left: 24, right: 24), - decoration: BoxDecoration( - borderRadius: BorderRadius.only( - topLeft: Radius.circular(24), - topRight: Radius.circular(24) + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(30)), + child: Container( + width: 300, + color: Theme.of(context).accentTextTheme.title.decorationColor, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.fromLTRB(24, 32, 24, 32), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + title(context), + Padding( + padding: EdgeInsets.only(top: 8), + child: content(context), + ) + ], ), ), - child: Center( - child: title(context), - ), - ), - Container( - width: 300, - height: 1, - color: Theme.of(context).dividerColor, - ), - Container( - width: 300, - height: 127, - padding: EdgeInsets.all(24), - child: Center( - child: content(context), - ), - ), - actionButtons(context) - ], + actionButtons(context) + ], + ), ), ), ), diff --git a/lib/src/widgets/base_text_form_field.dart b/lib/src/widgets/base_text_form_field.dart index 21ae78cc5..c1c34345b 100644 --- a/lib/src/widgets/base_text_form_field.dart +++ b/lib/src/widgets/base_text_form_field.dart @@ -21,7 +21,8 @@ class BaseTextFormField extends StatelessWidget { this.enabled = true, this.validator, this.textStyle, - this.placeholderTextStyle}); + this.placeholderTextStyle, + this.maxLength}); final TextEditingController controller; final TextInputType keyboardType; @@ -42,6 +43,7 @@ class BaseTextFormField extends StatelessWidget { final FormFieldValidator validator; final TextStyle placeholderTextStyle; final TextStyle textStyle; + final int maxLength; @override Widget build(BuildContext context) { @@ -54,6 +56,7 @@ class BaseTextFormField extends StatelessWidget { maxLines: maxLines, inputFormatters: inputFormatters, enabled: enabled, + maxLength: maxLength, style: textStyle ?? TextStyle( fontSize: 16.0, color: textColor ?? Theme.of(context).primaryTextTheme.title.color), diff --git a/lib/src/widgets/picker.dart b/lib/src/widgets/picker.dart index e9573c1e6..732c2118d 100644 --- a/lib/src/widgets/picker.dart +++ b/lib/src/widgets/picker.dart @@ -1,15 +1,20 @@ import 'dart:ui'; +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/cake_scrollbar.dart'; +import 'package:cake_wallet/src/widgets/alert_close_button.dart'; import 'package:cake_wallet/palette.dart'; -class Picker extends StatelessWidget { +class Picker extends StatefulWidget { Picker({ @required this.selectedAtIndex, @required this.items, this.images, @required this.title, @required this.onItemSelected, - this.mainAxisAlignment = MainAxisAlignment.start + this.mainAxisAlignment = MainAxisAlignment.start, + this.isAlwaysShowScrollThumb = false }); final int selectedAtIndex; @@ -18,59 +23,87 @@ class Picker extends StatelessWidget { final String title; final Function(Item) onItemSelected; final MainAxisAlignment mainAxisAlignment; + final bool isAlwaysShowScrollThumb; + + @override + PickerState createState() => PickerState(items, images, onItemSelected); +} + +class PickerState extends State { + PickerState(this.items, this.images, this.onItemSelected); + + final Function(Item) onItemSelected; + final List items; + final List images; + + final closeButton = Image.asset('assets/images/close.png', + color: Palette.darkBlueCraiola, + ); + ScrollController controller = ScrollController(); + + final double backgroundHeight = 193; + final double thumbHeight = 72; + double fromTop = 0; @override Widget build(BuildContext context) { - return GestureDetector( - onTap: () => Navigator.of(context).pop(), - child: Container( - color: Colors.transparent, - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), - child: Container( - decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)), - child: Center( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - padding: EdgeInsets.only(left: 24, right: 24), - child: Text( - title, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - decoration: TextDecoration.none, - color: Colors.white - ), - ), + controller.addListener(() { + fromTop = controller.hasClients + ? (controller.offset / controller.position.maxScrollExtent * (backgroundHeight - thumbHeight)) + : 0; + setState(() {}); + }); + + return AlertBackground( + child: Stack( + alignment: Alignment.center, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.only(left: 24, right: 24), + child: Text( + widget.title, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 18, + fontFamily: 'Poppins', + fontWeight: FontWeight.bold, + decoration: TextDecoration.none, + color: Colors.white ), - Padding( - padding: EdgeInsets.only(left: 24, right: 24, top: 24), - child: GestureDetector( - onTap: () => null, - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(14)), - child: Container( - height: 233, - color: Theme.of(context).accentTextTheme.title.backgroundColor, - child: ListView.separated( + ), + ), + Padding( + padding: EdgeInsets.only(left: 24, right: 24, top: 24), + child: GestureDetector( + onTap: () => null, + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(14)), + child: Container( + height: 233, + color: Theme.of(context).accentTextTheme.title.color, + child: Stack( + alignment: Alignment.center, + children: [ + ListView.separated( + controller: controller, separatorBuilder: (context, index) => Divider( - color: Theme.of(context).dividerColor, + color: Theme.of(context).accentTextTheme.title.backgroundColor, height: 1, ), itemCount: items == null ? 0 : items.length, itemBuilder: (context, index) { final item = items[index]; final image = images != null? images[index] : null; - final isItemSelected = index == selectedAtIndex; + final isItemSelected = index == widget.selectedAtIndex; final color = isItemSelected - ? Theme.of(context).accentTextTheme.subtitle.decorationColor - : Colors.transparent; + ? Theme.of(context).textTheme.body2.color + : Theme.of(context).accentTextTheme.title.color; final textColor = isItemSelected - ? Colors.blue + ? Palette.blueCraiola : Theme.of(context).primaryTextTheme.title.color; return GestureDetector( @@ -87,21 +120,22 @@ class Picker extends StatelessWidget { color: color, child: Row( mainAxisSize: MainAxisSize.max, - mainAxisAlignment: mainAxisAlignment, + mainAxisAlignment: widget.mainAxisAlignment, crossAxisAlignment: CrossAxisAlignment.center, children: [ image != null - ? image - : Offstage(), + ? image + : Offstage(), Padding( padding: EdgeInsets.only( - left: image != null ? 12 : 0 + left: image != null ? 12 : 0 ), child: Text( item.toString(), style: TextStyle( fontSize: 18, - fontWeight: FontWeight.bold, + fontFamily: 'Poppins', + fontWeight: FontWeight.w600, color: textColor, decoration: TextDecoration.none, ), @@ -112,17 +146,25 @@ class Picker extends StatelessWidget { ), ); }, + ), + widget.isAlwaysShowScrollThumb + ? CakeScrollbar( + backgroundHeight: backgroundHeight, + thumbHeight: thumbHeight, + fromTop: fromTop ) - ), - ), + : Offstage(), + ], + ) ), - ) - ], - ), - ) - ), - ), - ), + ), + ), + ) + ], + ), + AlertCloseButton(image: closeButton) + ], + ) ); } -} +} \ No newline at end of file diff --git a/lib/themes.dart b/lib/themes.dart index beadff9e0..be4a5d1d4 100644 --- a/lib/themes.dart +++ b/lib/themes.dart @@ -118,6 +118,34 @@ class Themes { ) ), focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: Colors.white, // picker background + backgroundColor: Palette.periwinkleCraiola, // picker divider + decorationColor: Colors.white // dialog background + ), + caption: TextStyle( + color: Palette.moderateLavender, // container (confirm exchange) + backgroundColor: Palette.moderateLavender, // button background (confirm exchange) + + + + + decorationColor: Palette.lavender, // gradient end, wallet label + ), + + + + subtitle: TextStyle( + color: Palette.lightBlueGrey, // border color, wallet label + backgroundColor: Palette.lavender, // address field, wallet card + decorationColor: Palette.darkLavender // selected item + ), + headline: TextStyle( + color: Palette.darkLavender, // faq background + backgroundColor: Palette.lavender // faq extension + ) + ), @@ -127,27 +155,7 @@ class Themes { ), - accentTextTheme: TextTheme( - title: TextStyle( - color: Palette.darkLavender, // top panel - backgroundColor: Palette.lavender, // bottom panel - decorationColor: PaletteDark.distantBlue // select button background color - ), - caption: TextStyle( - color: Palette.blue, // current wallet label - backgroundColor: Colors.white, // gradient start, wallet label - decorationColor: Palette.lavender, // gradient end, wallet label - ), - subtitle: TextStyle( - color: Palette.lightBlueGrey, // border color, wallet label - backgroundColor: Palette.lavender, // address field, wallet card - decorationColor: Palette.darkLavender // selected item - ), - headline: TextStyle( - color: Palette.darkLavender, // faq background - backgroundColor: Palette.lavender // faq extension - ) - ), + ); @@ -266,6 +274,33 @@ class Themes { ) ), focusColor: PaletteDark.moderateBlue, // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: PaletteDark.nightBlue, // picker background + backgroundColor: PaletteDark.dividerColor, // picker divider + decorationColor: PaletteDark.darkNightBlue // dialog background + ), + caption: TextStyle( + color: PaletteDark.nightBlue, // container (confirm exchange) + backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) + + + + decorationColor: PaletteDark.nightBlue, // gradient end, wallet label + ), + + + + subtitle: TextStyle( + color: PaletteDark.darkNightBlue, // border color, wallet label + backgroundColor: PaletteDark.violetBlue, // address field, wallet card + decorationColor: PaletteDark.headerNightBlue // selected item + ), + headline: TextStyle( + color: PaletteDark.lightNightBlue, // faq background + backgroundColor: PaletteDark.headerNightBlue // faq extension + ) + ), @@ -276,27 +311,7 @@ class Themes { - accentTextTheme: TextTheme( - title: TextStyle( - color: PaletteDark.moderateBlue, // top panel - backgroundColor: PaletteDark.lightNightBlue, // bottom panel - decorationColor: Colors.white // select button background color - ), - caption: TextStyle( - color: Colors.white, // current wallet label - backgroundColor: PaletteDark.distantBlue, // gradient start, wallet label - decorationColor: PaletteDark.nightBlue, // gradient end, wallet label - ), - subtitle: TextStyle( - color: PaletteDark.darkNightBlue, // border color, wallet label - backgroundColor: PaletteDark.violetBlue, // address field, wallet card - decorationColor: PaletteDark.headerNightBlue // selected item - ), - headline: TextStyle( - color: PaletteDark.lightNightBlue, // faq background - backgroundColor: PaletteDark.headerNightBlue // faq extension - ) - ), + ); } \ No newline at end of file diff --git a/lib/view_model/dashboard/dashboard_view_model.dart b/lib/view_model/dashboard/dashboard_view_model.dart index 65deb5f92..c98ddc1e9 100644 --- a/lib/view_model/dashboard/dashboard_view_model.dart +++ b/lib/view_model/dashboard/dashboard_view_model.dart @@ -108,7 +108,8 @@ abstract class DashboardViewModelBase with Store { _items .addAll(transactionFilterStore.filtered(transactions: transactions)); - _items.addAll(tradeFilterStore.filtered(trades: trades)); + //_items.addAll(tradeFilterStore.filtered(trades: trades)); + _items.addAll(trades); // FIXME return formattedItemsList(_items); } diff --git a/lib/view_model/exchange/exchange_view_model.dart b/lib/view_model/exchange/exchange_view_model.dart index 4fb5a1dbf..bec3a5754 100644 --- a/lib/view_model/exchange/exchange_view_model.dart +++ b/lib/view_model/exchange/exchange_view_model.dart @@ -227,7 +227,7 @@ abstract class ExchangeViewModelBase with Store { } } } else { - tradeState = TradeIsCreatedFailure(error: S.current.error_text_limits_loading_failed("${provider.description}")); + tradeState = TradeIsCreatedFailure(error: S.current.error_text_limits_loading_failed('${provider.description}')); } }