dsc
/
cake_wallet
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

CAKE-28 | reworked standart_list_row (added image); applied new design, light and dark themes to exchange trade page

Browse Source
wownero
Oleksandr Sobol 4 years ago
parent 76cde0530d
commit 56519bbe86
7 changed files with 182 additions and 285 deletions
Show Stats Download Patch File Download Diff File

6
lib/src/screens/exchange_trade/exchange_trade_item.dart
Unescape View File

@ -7,7 +7,7 @@ class ExchangeTradeItem {
@required this.isCopied, @required this.isCopied,
}); });
final String title; String title;
final String data; String data;
final bool isCopied; bool isCopied;
} }

297
lib/src/screens/exchange_trade/exchange_trade_page.dart
Unescape View File

@ -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/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/exchange_trade_item.dart';
import 'package:cake_wallet/src/screens/exchange_trade/information_page.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:cake_wallet/view_model/exchange/exchange_trade_view_model.dart';
import 'package:mobx/mobx.dart'; import 'package:mobx/mobx.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@ -86,7 +87,6 @@ class ExchangeTradeForm extends StatefulWidget {
class ExchangeTradeState extends State<ExchangeTradeForm> { class ExchangeTradeState extends State<ExchangeTradeForm> {
final fetchingLabel = S.current.fetching; final fetchingLabel = S.current.fetching;
String get title => S.current.exchange; String get title => S.current.exchange;
List<ExchangeTradeItem> items;
bool _effectsInstalled = false; bool _effectsInstalled = false;
@ -94,25 +94,6 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
void initState() { void initState() {
super.initState(); super.initState();
WidgetsBinding.instance.addPostFrameCallback(afterLayout); 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 _) { void afterLayout(dynamic _) {
@ -121,190 +102,100 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
@override @override
Widget build(BuildContext context) { 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); //_setEffects(context);
return Container( return Container(
child: ScrollableWithBottomSection( child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, top: 24), contentPadding: EdgeInsets.only(top: 10, bottom: 16),
content: Observer(builder: (_) { content: Observer(builder: (_) {
final trade = widget.exchangeTradeViewModel.trade; final trade = widget.exchangeTradeViewModel.trade;
return Column( return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[ children: <Widget>[
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 trade.expiredAt != null
? Row( ? Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Text( Text(
S.of(context).offer_expires_in, S.of(context).offer_expires_in,
style: TextStyle( style: TextStyle(
fontSize: 14.0, fontSize: 14.0,
color: Theme.of(context).primaryTextTheme.title.color), fontWeight: FontWeight.w500,
color: Theme.of(context).primaryTextTheme.overline.color),
), ),
TimerWidget(trade.expiredAt, TimerWidget(trade.expiredAt,
color: Theme.of(context).primaryTextTheme.caption.color) color: Theme.of(context).primaryTextTheme.title.color)
], ])
) : Offstage(),
: Container(),
],
),
],
),
),
Padding( Padding(
padding: EdgeInsets.only(top: 20), padding: EdgeInsets.only(top: 32),
child: Row( child: Row(children: <Widget>[
children: <Widget>[ Spacer(flex: 3),
Spacer(
flex: 1,
),
Flexible( Flexible(
flex: 1, flex: 4,
child: Center( child: Center(
child: AspectRatio( child: AspectRatio(
aspectRatio: 1.0, aspectRatio: 1.0,
child: QrImage( child: QrImage(
data: trade.inputAddress ?? fetchingLabel, data: trade.inputAddress ?? fetchingLabel,
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
foregroundColor: Theme.of(context).primaryTextTheme.display4.color, foregroundColor: Theme.of(context)
), .accentTextTheme.subtitle.color,
), )))),
)), Spacer(flex: 3)
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(
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,
), ),
Container( itemBuilder: (context, index) {
child: Row( final item = widget.exchangeTradeViewModel.items[index];
children: <Widget>[ String value;
Flexible(
child: Container( final content = Observer(
padding: EdgeInsets.only(right: 5.0), builder: (_) {
child: Builder( switch (index) {
builder: (context) => PrimaryButton( case 0:
onPressed: () { value = '${widget.exchangeTradeViewModel.trade.id ?? fetchingLabel}';
Clipboard.setData(ClipboardData(text: trade.inputAddress)); 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( Scaffold.of(context).showSnackBar(SnackBar(
content: Text( content: Text(
S.of(context).copied_to_clipboard, S.of(context).copied_to_clipboard,
@ -315,63 +206,17 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
duration: Duration(milliseconds: 1500), duration: Duration(milliseconds: 1500),
)); ));
}, },
text: S.of(context).copy_address, child: content,
color: Theme.of(context).accentTextTheme.title.backgroundColor, )
textColor: Theme.of(context).primaryTextTheme.title.color) )
), : content;
)),
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( bottomSection: PrimaryButton(
onPressed: () {}, onPressed: () {},
text: S.of(context).confirm, text: S.of(context).confirm,

8
lib/src/screens/exchange_trade/widgets/exchange_trade_row.dart
Unescape View File

@ -1,8 +0,0 @@
import 'package:flutter/material.dart';
class ExchangeTradeRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}

10
lib/src/screens/exchange_trade/widgets/timer_widget.dart
Unescape View File

@ -53,10 +53,16 @@ class TimerWidgetState extends State<TimerWidget> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return _isExpired return _isExpired
? Text(S.of(context).expired, ? 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( : Text(
S.of(context).time(_minutes.toString(), _seconds.toString()), 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),
); );
} }

26
lib/src/widgets/standart_list_row.dart
Unescape View File

@ -1,13 +1,20 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class StandartListRow extends StatelessWidget { class StandartListRow extends StatelessWidget {
StandartListRow( StandartListRow(
{this.title, {this.title,
this.value, this.value,
this.titleFontSize = 14,
this.valueFontSize = 16,
this.image,
this.isDrawBottom = false}); this.isDrawBottom = false});
final String title; final String title;
final String value; final String value;
final double titleFontSize;
final double valueFontSize;
final Image image;
final bool isDrawBottom; final bool isDrawBottom;
@override @override
@ -25,21 +32,36 @@ class StandartListRow extends StatelessWidget {
children: <Widget>[ children: <Widget>[
Text(title, Text(title,
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: titleFontSize,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: color:
Theme.of(context).primaryTextTheme.overline.color), Theme.of(context).primaryTextTheme.overline.color),
textAlign: TextAlign.left), textAlign: TextAlign.left),
Padding( Padding(
padding: const EdgeInsets.only(top: 12), padding: const EdgeInsets.only(top: 12),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(value, child: Text(value,
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: valueFontSize,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme .primaryTextTheme
.title .title
.color)), .color)),
),
image != null
? Padding(
padding: EdgeInsets.only(left: 24),
child: image,
)
: Offstage()
],
),
) )
]), ]),
), ),

20
lib/themes.dart
Unescape View File

@ -129,14 +129,18 @@ class Themes {
backgroundColor: Palette.moderateLavender, // button background (confirm exchange) backgroundColor: Palette.moderateLavender, // button background (confirm exchange)
decorationColor: Palette.darkBlueCraiola, // text color (information page) decorationColor: Palette.darkBlueCraiola, // text color (information page)
), ),
subtitle: TextStyle(
color: Palette.darkBlueCraiola, // QR code (exchange trade page)
backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
subtitle: TextStyle(
color: Palette.lightBlueGrey, // border color, wallet label
backgroundColor: Palette.lavender, // address field, wallet card
decorationColor: Palette.darkLavender // selected item decorationColor: Palette.darkLavender // selected item
), ),
headline: TextStyle( headline: TextStyle(
color: Palette.darkLavender, // faq background color: Palette.darkLavender, // faq background
backgroundColor: Palette.lavender // faq extension backgroundColor: Palette.lavender // faq extension
@ -281,14 +285,18 @@ class Themes {
backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
decorationColor: Palette.darkLavender, // text color (information page) decorationColor: Palette.darkLavender, // text color (information page)
), ),
subtitle: TextStyle(
color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page)
subtitle: TextStyle(
color: PaletteDark.darkNightBlue, // border color, wallet label
backgroundColor: PaletteDark.violetBlue, // address field, wallet card
decorationColor: PaletteDark.headerNightBlue // selected item decorationColor: PaletteDark.headerNightBlue // selected item
), ),
headline: TextStyle( headline: TextStyle(
color: PaletteDark.lightNightBlue, // faq background color: PaletteDark.lightNightBlue, // faq background
backgroundColor: PaletteDark.headerNightBlue // faq extension backgroundColor: PaletteDark.headerNightBlue // faq extension

24
lib/view_model/exchange/exchange_trade_view_model.dart
Unescape View File

@ -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:cake_wallet/store/dashboard/trades_store.dart';
import 'package:hive/hive.dart'; import 'package:hive/hive.dart';
import 'package:mobx/mobx.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'; part 'exchange_trade_view_model.g.dart';
@ -33,6 +35,25 @@ abstract class ExchangeTradeViewModelBase with Store {
break; 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(); _updateTrade();
_timer = Timer.periodic(Duration(seconds: 20), (_) async => _updateTrade()); _timer = Timer.periodic(Duration(seconds: 20), (_) async => _updateTrade());
} }
@ -47,6 +68,9 @@ abstract class ExchangeTradeViewModelBase with Store {
@observable @observable
bool isSendable; bool isSendable;
@observable
ObservableList<ExchangeTradeItem> items;// = ObservableList();
ExchangeProvider _provider; ExchangeProvider _provider;
Timer _timer; Timer _timer;

Write Preview
Loading…
Cancel
Save