mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-01-23 11:15:33 +00:00
CAKE-28 | reworked standart_list_row (added image); applied new design, light and dark themes to exchange trade page
This commit is contained in:
parent
76cde0530d
commit
56519bbe86
7 changed files with 183 additions and 286 deletions
|
@ -7,7 +7,7 @@ class ExchangeTradeItem {
|
|||
@required this.isCopied,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String data;
|
||||
final bool isCopied;
|
||||
String title;
|
||||
String data;
|
||||
bool isCopied;
|
||||
}
|
|
@ -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<ExchangeTradeForm> {
|
||||
final fetchingLabel = S.current.fetching;
|
||||
String get title => S.current.exchange;
|
||||
List<ExchangeTradeItem> items;
|
||||
|
||||
bool _effectsInstalled = false;
|
||||
|
||||
|
@ -94,25 +94,6 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
|
|||
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<ExchangeTradeForm> {
|
|||
|
||||
@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: <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>[
|
||||
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(),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
trade.expiredAt != null
|
||||
? Row(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
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: <Widget>[
|
||||
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: <Widget>[
|
||||
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: <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(
|
||||
onPressed: () {},
|
||||
text: S.of(context).confirm,
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
class ExchangeTradeRow extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container();
|
||||
}
|
||||
}
|
|
@ -53,10 +53,16 @@ class TimerWidgetState extends State<TimerWidget> {
|
|||
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),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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: <Widget>[
|
||||
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: <Widget>[
|
||||
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()
|
||||
],
|
||||
),
|
||||
)
|
||||
]),
|
||||
),
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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<ExchangeTradeItem> items;// = ObservableList();
|
||||
|
||||
ExchangeProvider _provider;
|
||||
|
||||
Timer _timer;
|
||||
|
|
Loading…
Reference in a new issue