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,
});
final String title;
final String data;
final bool isCopied;
String title;
String data;
bool isCopied;
}

349
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/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(),
],
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: Row(
trade.expiredAt != null
? Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
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,
Text(
S.of(context).offer_expires_in,
style: TextStyle(
fontSize: 14.0,
color: Theme.of(context).primaryTextTheme.caption.color),
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)
]),
),
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)
),
))
],
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,
),
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(
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,

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) {
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),
);
}

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

@ -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()
],
),
)
]),
),

28
lib/themes.dart
Unescape View File

@ -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

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: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;

Write Preview
Loading…
Cancel
Save