From 56519bbe8607e3e4e12582ae9559e3bed5b66e7e Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Thu, 27 Aug 2020 22:42:28 +0300 Subject: [PATCH] CAKE-28 | reworked standart_list_row (added image); applied new design, light and dark themes to exchange trade page --- .../exchange_trade/exchange_trade_item.dart | 6 +- .../exchange_trade/exchange_trade_page.dart | 351 +++++------------- .../widgets/exchange_trade_row.dart | 8 - .../exchange_trade/widgets/timer_widget.dart | 10 +- lib/src/widgets/standart_list_row.dart | 42 ++- lib/themes.dart | 28 +- .../exchange/exchange_trade_view_model.dart | 24 ++ 7 files changed, 183 insertions(+), 286 deletions(-) delete mode 100644 lib/src/screens/exchange_trade/widgets/exchange_trade_row.dart diff --git a/lib/src/screens/exchange_trade/exchange_trade_item.dart b/lib/src/screens/exchange_trade/exchange_trade_item.dart index 78e9995ad..4de324e9c 100644 --- a/lib/src/screens/exchange_trade/exchange_trade_item.dart +++ b/lib/src/screens/exchange_trade/exchange_trade_item.dart @@ -7,7 +7,7 @@ class ExchangeTradeItem { @required this.isCopied, }); - final String title; - final String data; - final bool isCopied; + String title; + String data; + bool isCopied; } \ No newline at end of file diff --git a/lib/src/screens/exchange_trade/exchange_trade_page.dart b/lib/src/screens/exchange_trade/exchange_trade_page.dart index 5b8ce2525..61b1b024d 100644 --- a/lib/src/screens/exchange_trade/exchange_trade_page.dart +++ b/lib/src/screens/exchange_trade/exchange_trade_page.dart @@ -3,6 +3,7 @@ import 'package:cake_wallet/src/domain/common/crypto_currency.dart'; import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart'; import 'package:cake_wallet/src/screens/exchange_trade/exchange_trade_item.dart'; import 'package:cake_wallet/src/screens/exchange_trade/information_page.dart'; +import 'package:cake_wallet/src/widgets/standart_list_row.dart'; import 'package:cake_wallet/view_model/exchange/exchange_trade_view_model.dart'; import 'package:mobx/mobx.dart'; import 'package:provider/provider.dart'; @@ -86,7 +87,6 @@ class ExchangeTradeForm extends StatefulWidget { class ExchangeTradeState extends State { final fetchingLabel = S.current.fetching; String get title => S.current.exchange; - List items; bool _effectsInstalled = false; @@ -94,25 +94,6 @@ class ExchangeTradeState extends State { void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback(afterLayout); - - items = [ - ExchangeTradeItem( - title: S.current.id, - data: '${widget.exchangeTradeViewModel.trade.id ?? fetchingLabel}', - isCopied: true), - ExchangeTradeItem( - title: S.current.amount, - data: '${widget.exchangeTradeViewModel.trade.amount ?? fetchingLabel}', - isCopied: false), - ExchangeTradeItem( - title: S.current.status, - data: '${widget.exchangeTradeViewModel.trade.state ?? fetchingLabel}', - isCopied: false), - ExchangeTradeItem( - title: S.current.widgets_address, - data: widget.exchangeTradeViewModel.trade.inputAddress ?? fetchingLabel, - isCopied: true), - ]; } void afterLayout(dynamic _) { @@ -121,257 +102,121 @@ class ExchangeTradeState extends State { @override Widget build(BuildContext context) { + final copyImage = Image.asset('assets/images/copy_content.png', + height: 16, width: 16, + color: Theme.of(context).primaryTextTheme.overline.color); //_setEffects(context); return Container( child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, top: 24), + contentPadding: EdgeInsets.only(top: 10, bottom: 16), content: Observer(builder: (_) { final trade = widget.exchangeTradeViewModel.trade; return Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - S.of(context).id, - style: TextStyle( - height: 2, - fontWeight: FontWeight.bold, - fontSize: 14.0, - color: Theme.of(context).primaryTextTheme.title.color), - ), - Text( - '${trade.id ?? fetchingLabel}', - style: TextStyle( - fontSize: 14.0, - height: 2, - color: Theme.of(context).primaryTextTheme.caption.color), - ) - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - S.of(context).amount, - style: TextStyle( - height: 2, - fontWeight: FontWeight.bold, - fontSize: 14.0, - color: Theme.of(context).primaryTextTheme.title.color), - ), - Text( - '${trade.amount ?? fetchingLabel}', - style: TextStyle( - fontSize: 14.0, - height: 2, - color: Theme.of(context).primaryTextTheme.caption.color), - ) - ], - ), - trade.extraId != null - ? Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - S.of(context).payment_id, - style: TextStyle( - height: 2, - fontWeight: FontWeight.bold, - fontSize: 14.0, - color: Theme.of(context).primaryTextTheme.title.color), - ), - Text( - '${trade.extraId ?? fetchingLabel}', - style: TextStyle( - fontSize: 14.0, - height: 2, - color: Theme.of(context).primaryTextTheme.caption.color), - ) - ], - ) - : Container(), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - S.of(context).status, - style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.bold, - color: Theme.of(context).primaryTextTheme.title.color, - height: 2), - ), - Text( - '${trade.state ?? fetchingLabel}', - style: TextStyle( - fontSize: 14.0, - height: 2, - color: Theme.of(context).primaryTextTheme.caption.color), - ) - ], - ), - trade.expiredAt != null - ? Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - S.of(context).offer_expires_in, - style: TextStyle( - fontSize: 14.0, - color: Theme.of(context).primaryTextTheme.title.color), - ), - TimerWidget(trade.expiredAt, - color: Theme.of(context).primaryTextTheme.caption.color) - ], - ) - : Container(), - ], - ), - ], - ), + trade.expiredAt != null + ? Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + S.of(context).offer_expires_in, + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme.overline.color), + ), + TimerWidget(trade.expiredAt, + color: Theme.of(context).primaryTextTheme.title.color) + ]) + : Offstage(), + Padding( + padding: EdgeInsets.only(top: 32), + child: Row(children: [ + Spacer(flex: 3), + Flexible( + flex: 4, + child: Center( + child: AspectRatio( + aspectRatio: 1.0, + child: QrImage( + data: trade.inputAddress ?? fetchingLabel, + backgroundColor: Colors.transparent, + foregroundColor: Theme.of(context) + .accentTextTheme.subtitle.color, + )))), + Spacer(flex: 3) + ]), ), Padding( - padding: EdgeInsets.only(top: 20), - child: Row( - children: [ - Spacer( - flex: 1, - ), - Flexible( - flex: 1, - child: Center( - child: AspectRatio( - aspectRatio: 1.0, - child: QrImage( - data: trade.inputAddress ?? fetchingLabel, - backgroundColor: Colors.transparent, - foregroundColor: Theme.of(context).primaryTextTheme.display4.color, - ), - ), - )), - Spacer( - flex: 1, - ) - ], - ), - ), - SizedBox( - height: 20.0, - ), - Center( - child: Text( - S.of(context).trade_is_powered_by(trade.provider != null - ? trade.provider.title - : fetchingLabel), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.bold, - color: Theme.of(context).primaryTextTheme.title.color), - ), - ), - Container( - padding: EdgeInsets.only(top: 20, bottom: 20), - child: Center( - child: Text( - trade.inputAddress ?? fetchingLabel, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14.0, - color: Theme.of(context).primaryTextTheme.caption.color), + padding: EdgeInsets.only(top: 16), + child: ListView.separated( + shrinkWrap: true, + physics: NeverScrollableScrollPhysics(), + itemCount: widget.exchangeTradeViewModel.items.length, + separatorBuilder: (context, index) => Container( + height: 1, + color: Theme.of(context).accentTextTheme.subtitle.backgroundColor, ), + itemBuilder: (context, index) { + final item = widget.exchangeTradeViewModel.items[index]; + String value; + + final content = Observer( + builder: (_) { + switch (index) { + case 0: + value = '${widget.exchangeTradeViewModel.trade.id ?? fetchingLabel}'; + break; + case 1: + value = '${widget.exchangeTradeViewModel.trade.amount ?? fetchingLabel}'; + break; + case 2: + value = '${widget.exchangeTradeViewModel.trade.state ?? fetchingLabel}'; + break; + case 3: + value = widget.exchangeTradeViewModel.trade.inputAddress ?? fetchingLabel; + break; + } + + return StandartListRow( + title: item.title, + value: value, + valueFontSize: 14, + image: item.isCopied ? copyImage : null, + ); + } + ); + + return item.isCopied + ? Builder( + builder: (context) => + GestureDetector( + onTap: () { + Clipboard.setData(ClipboardData(text: value)); + 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: content, + ) + ) + : content; + }, ), ), - Container( - child: Row( - children: [ - Flexible( - child: Container( - padding: EdgeInsets.only(right: 5.0), - child: Builder( - builder: (context) => PrimaryButton( - onPressed: () { - Clipboard.setData(ClipboardData(text: trade.inputAddress)); - 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_address, - color: Theme.of(context).accentTextTheme.title.backgroundColor, - textColor: Theme.of(context).primaryTextTheme.title.color) - ), - )), - Flexible( - child: Container( - padding: EdgeInsets.only(left: 5.0), - 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.title.backgroundColor, - textColor: Theme.of(context).primaryTextTheme.title.color) - ), - )) - ], - ), - ), - /*Container( - padding: EdgeInsets.only(top: 20), - child: Text( - widget.exchangeTradeViewModel.isSendable - ? S.of(context).exchange_result_confirm( - trade.amount ?? fetchingLabel, - trade.from.toString(), - walletName) - : S.of(context).exchange_result_description( - trade.amount ?? fetchingLabel, trade.from.toString()), - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 13.0, - color: Theme.of(context).primaryTextTheme.title.color), - ), - ),*/ - Text( - S.of(context).exchange_result_write_down_ID, - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 13.0, - color: Theme.of(context).primaryTextTheme.title.color), - ) ], ); }), - bottomSectionPadding: EdgeInsets.all(24), + bottomSectionPadding: EdgeInsets.fromLTRB(24, 0, 24, 24), bottomSection: PrimaryButton( onPressed: () {}, text: S.of(context).confirm, diff --git a/lib/src/screens/exchange_trade/widgets/exchange_trade_row.dart b/lib/src/screens/exchange_trade/widgets/exchange_trade_row.dart deleted file mode 100644 index ba20dd413..000000000 --- a/lib/src/screens/exchange_trade/widgets/exchange_trade_row.dart +++ /dev/null @@ -1,8 +0,0 @@ -import 'package:flutter/material.dart'; - -class ExchangeTradeRow extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Container(); - } -} \ No newline at end of file diff --git a/lib/src/screens/exchange_trade/widgets/timer_widget.dart b/lib/src/screens/exchange_trade/widgets/timer_widget.dart index 713148fed..e826993fd 100644 --- a/lib/src/screens/exchange_trade/widgets/timer_widget.dart +++ b/lib/src/screens/exchange_trade/widgets/timer_widget.dart @@ -53,10 +53,16 @@ class TimerWidgetState extends State { Widget build(BuildContext context) { return _isExpired ? Text(S.of(context).expired, - style: TextStyle(fontSize: 14.0, color: Colors.red)) + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w500, + color: Colors.red)) : Text( S.of(context).time(_minutes.toString(), _seconds.toString()), - style: TextStyle(fontSize: 14.0, color: widget.color), + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w500, + color: widget.color), ); } diff --git a/lib/src/widgets/standart_list_row.dart b/lib/src/widgets/standart_list_row.dart index d573e6e5f..d29e84065 100644 --- a/lib/src/widgets/standart_list_row.dart +++ b/lib/src/widgets/standart_list_row.dart @@ -1,13 +1,20 @@ +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class StandartListRow extends StatelessWidget { StandartListRow( {this.title, this.value, + this.titleFontSize = 14, + this.valueFontSize = 16, + this.image, this.isDrawBottom = false}); final String title; final String value; + final double titleFontSize; + final double valueFontSize; + final Image image; final bool isDrawBottom; @override @@ -19,27 +26,42 @@ class StandartListRow extends StatelessWidget { color: Theme.of(context).backgroundColor, child: Padding( padding: - const EdgeInsets.only(left: 24, top: 16, bottom: 16, right: 24), + const EdgeInsets.only(left: 24, top: 16, bottom: 16, right: 24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(title, style: TextStyle( - fontSize: 14, + fontSize: titleFontSize, fontWeight: FontWeight.w500, color: Theme.of(context).primaryTextTheme.overline.color), textAlign: TextAlign.left), Padding( padding: const EdgeInsets.only(top: 12), - child: Text(value, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Theme.of(context) - .primaryTextTheme - .title - .color)), + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Text(value, + style: TextStyle( + fontSize: valueFontSize, + fontWeight: FontWeight.w500, + color: Theme.of(context) + .primaryTextTheme + .title + .color)), + ), + image != null + ? Padding( + padding: EdgeInsets.only(left: 24), + child: image, + ) + : Offstage() + ], + ), ) ]), ), diff --git a/lib/themes.dart b/lib/themes.dart index f92eb2fa6..ecf41da62 100644 --- a/lib/themes.dart +++ b/lib/themes.dart @@ -129,14 +129,18 @@ class Themes { backgroundColor: Palette.moderateLavender, // button background (confirm exchange) decorationColor: Palette.darkBlueCraiola, // text color (information page) ), + subtitle: TextStyle( + color: Palette.darkBlueCraiola, // QR code (exchange trade page) + backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) + + + + decorationColor: Palette.darkLavender // selected item + ), + - 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 @@ -281,14 +285,18 @@ class Themes { backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) decorationColor: Palette.darkLavender, // text color (information page) ), + subtitle: TextStyle( + color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) + backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) + + + + decorationColor: PaletteDark.headerNightBlue // selected item + ), + - 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 diff --git a/lib/view_model/exchange/exchange_trade_view_model.dart b/lib/view_model/exchange/exchange_trade_view_model.dart index af988428c..b623673ed 100644 --- a/lib/view_model/exchange/exchange_trade_view_model.dart +++ b/lib/view_model/exchange/exchange_trade_view_model.dart @@ -9,6 +9,8 @@ import 'package:cake_wallet/src/domain/exchange/xmrto/xmrto_exchange_provider.da import 'package:cake_wallet/store/dashboard/trades_store.dart'; import 'package:hive/hive.dart'; import 'package:mobx/mobx.dart'; +import 'package:cake_wallet/src/screens/exchange_trade/exchange_trade_item.dart'; +import 'package:cake_wallet/generated/i18n.dart'; part 'exchange_trade_view_model.g.dart'; @@ -33,6 +35,25 @@ abstract class ExchangeTradeViewModelBase with Store { break; } + items = ObservableList.of([ + ExchangeTradeItem( + title: S.current.id, + data: '${trade.id}', + isCopied: true), + ExchangeTradeItem( + title: S.current.amount, + data: '${trade.amount}', + isCopied: false), + ExchangeTradeItem( + title: S.current.status, + data: '${trade.state}', + isCopied: false), + ExchangeTradeItem( + title: S.current.widgets_address + ':', + data: trade.inputAddress, + isCopied: true), + ]); + _updateTrade(); _timer = Timer.periodic(Duration(seconds: 20), (_) async => _updateTrade()); } @@ -47,6 +68,9 @@ abstract class ExchangeTradeViewModelBase with Store { @observable bool isSendable; + @observable + ObservableList items;// = ObservableList(); + ExchangeProvider _provider; Timer _timer;