Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-02-02 19:26:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Oleksandr Sobol 2020-08-27 22:42:28 +03:00
parent 76cde0530d
commit 56519bbe86
7 changed files with 183 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/src/screens/exchange_trade/exchange_trade_item.dart
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;
} }

351
lib/src/screens/exchange_trade/exchange_trade_page.dart
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,257 +102,121 @@ 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>[ children: <Widget>[
Container( trade.expiredAt != null
child: Row( ? Row(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max,
children: [ mainAxisAlignment: MainAxisAlignment.center,
Column( children: <Widget>[
crossAxisAlignment: CrossAxisAlignment.start, Text(
children: <Widget>[ S.of(context).offer_expires_in,
Row( style: TextStyle(
mainAxisAlignment: MainAxisAlignment.start, fontSize: 14.0,
children: <Widget>[ fontWeight: FontWeight.w500,
Text( color: Theme.of(context).primaryTextTheme.overline.color),
S.of(context).id, ),
style: TextStyle( TimerWidget(trade.expiredAt,
height: 2, color: Theme.of(context).primaryTextTheme.title.color)
fontWeight: FontWeight.bold, ])
fontSize: 14.0, : Offstage(),
color: Theme.of(context).primaryTextTheme.title.color), Padding(
), padding: EdgeInsets.only(top: 32),
Text( child: Row(children: <Widget>[
'${trade.id ?? fetchingLabel}', Spacer(flex: 3),
style: TextStyle( Flexible(
fontSize: 14.0, flex: 4,
height: 2, child: Center(
color: Theme.of(context).primaryTextTheme.caption.color), child: AspectRatio(
) aspectRatio: 1.0,
], child: QrImage(
), data: trade.inputAddress ?? fetchingLabel,
Row( backgroundColor: Colors.transparent,
mainAxisAlignment: MainAxisAlignment.start, foregroundColor: Theme.of(context)
children: <Widget>[ .accentTextTheme.subtitle.color,
Text( )))),
S.of(context).amount, Spacer(flex: 3)
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>[
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: <Widget>[
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(),
],
),
],
),
), ),
Padding( Padding(
padding: EdgeInsets.only(top: 20), padding: EdgeInsets.only(top: 16),
child: Row( child: ListView.separated(
children: <Widget>[ shrinkWrap: true,
Spacer( physics: NeverScrollableScrollPhysics(),
flex: 1, itemCount: widget.exchangeTradeViewModel.items.length,
), separatorBuilder: (context, index) => Container(
Flexible( height: 1,
flex: 1, color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
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),
), ),
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: <Widget>[
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( 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
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
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),
); );
} }

42
lib/src/widgets/standart_list_row.dart
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
@ -19,27 +26,42 @@ class StandartListRow extends StatelessWidget {
color: Theme.of(context).backgroundColor, color: Theme.of(context).backgroundColor,
child: Padding( child: Padding(
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( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
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: Text(value, child: Row(
style: TextStyle( mainAxisSize: MainAxisSize.max,
fontSize: 16, mainAxisAlignment: MainAxisAlignment.spaceBetween,
fontWeight: FontWeight.w500, crossAxisAlignment: CrossAxisAlignment.start,
color: Theme.of(context) children: <Widget>[
.primaryTextTheme Expanded(
.title child: Text(value,
.color)), 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()
],
),
) )
]), ]),
), ),

28
lib/themes.dart
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)
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( 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)
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( 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
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;