Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-05-09 09:32:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CAKE-28 | created filter tile, filter widget, checkbox widget and filter item; applied filter items to filter widget, also applied filter widget to dashboard page; reworked wallet list page and menu widget; applied light and dark themes to filter widget and wallet list age; fixed filtered method in the trade filter store

Browse source
This commit is contained in:
Oleksandr Sobol 2020-08-28 23:04:48 +03:00
parent 56519bbe86
commit 4ed7f6ec18
18 changed files with 531 additions and 289 deletions

BIN
assets/images/2.0x/back_vector.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 337 B

BIN
assets/images/3.0x/back_vector.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 459 B

BIN
assets/images/back_vector.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 251 B

11
lib/palette.dart
View file

@ -9,11 +9,20 @@ class Palette {
static const Color lavender = Color.fromRGBO(237, 245, 252, 1.0); static const Color lavender = Color.fromRGBO(237, 245, 252, 1.0);
static const Color oceanBlue = Color.fromRGBO(30, 52, 78, 1.0); static const Color oceanBlue = Color.fromRGBO(30, 52, 78, 1.0);
static const Color lightBlueGrey = Color.fromRGBO(118, 131, 169, 1.0); static const Color lightBlueGrey = Color.fromRGBO(118, 131, 169, 1.0);
static const Color periwinkle = Color.fromRGBO(197, 208, 230, 1.0); static const Color periwinkle = Color.fromRGBO(195, 210, 227, 1.0);
static const Color blue = Color.fromRGBO(88, 143, 252, 1.0); static const Color blue = Color.fromRGBO(88, 143, 252, 1.0);
static const Color darkLavender = Color.fromRGBO(229, 238, 250, 1.0); static const Color darkLavender = Color.fromRGBO(229, 238, 250, 1.0);
static const Color nightBlue = Color.fromRGBO(46, 57, 96, 1.0); static const Color nightBlue = Color.fromRGBO(46, 57, 96, 1.0);
static const Color moderateOrangeYellow = Color.fromRGBO(245, 134, 82, 1.0);
static const Color moderateOrange = Color.fromRGBO(235, 117, 63, 1.0);
static const Color shineGreen = Color.fromRGBO(76, 189, 87, 1.0);
static const Color moderateGreen = Color.fromRGBO(45, 158, 56, 1.0);
static const Color cornflower = Color.fromRGBO(85, 147, 240, 1.0);
static const Color royalBlue = Color.fromRGBO(43, 114, 221, 1.0);
static const Color lightRed = Color.fromRGBO(227, 87, 87, 1.0);
static const Color persianRed = Color.fromRGBO(206, 55, 55, 1.0);
// NEW DESIGN // NEW DESIGN
static const Color blueCraiola = Color.fromRGBO(69, 110, 255, 1.0); static const Color blueCraiola = Color.fromRGBO(69, 110, 255, 1.0);
static const Color darkBlueCraiola = Color.fromRGBO(53, 86, 136, 1.0); static const Color darkBlueCraiola = Color.fromRGBO(53, 86, 136, 1.0);

21
lib/src/screens/dashboard/widgets/filter_tile.dart Normal file
View file

@ -0,0 +1,21 @@
import 'package:flutter/material.dart';
class FilterTile extends StatelessWidget {
FilterTile({@required this.child});
final Widget child;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: EdgeInsets.only(
top: 18,
bottom: 18,
left: 24,
right: 24
),
child: child,
);
}
}

155
lib/src/screens/dashboard/widgets/filter_widget.dart Normal file
View file

@ -0,0 +1,155 @@
import 'dart:ui';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/filter_tile.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/alert_background.dart';
import 'package:cake_wallet/src/widgets/alert_close_button.dart';
import 'package:cake_wallet/src/widgets/checkbox_widget.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker;
class FilterWidget extends StatelessWidget {
FilterWidget({@required this.dashboardViewModel});
final DashboardViewModel dashboardViewModel;
final backVector = Image.asset('assets/images/back_vector.png',
color: Palette.darkBlueCraiola
);
@override
Widget build(BuildContext context) {
return AlertBackground(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
S.of(context).filters,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
decoration: TextDecoration.none,
),
),
Padding(
padding: EdgeInsets.only(
left: 24,
right: 24,
top: 24
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(14)),
child: Container(
color: Theme.of(context).textTheme.body2.decorationColor,
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: dashboardViewModel.filterItems.length,
separatorBuilder: (context, _) => Container(
height: 1,
color: Theme.of(context).accentTextTheme.subhead.backgroundColor,
),
itemBuilder: (_, index1) {
final title = dashboardViewModel.filterItems.keys.elementAt(index1);
final section = dashboardViewModel.filterItems.values.elementAt(index1);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 20,
left: 24,
right: 24
),
child: Text(
title,
style: TextStyle(
color: Theme.of(context).accentTextTheme.subhead.color,
fontSize: 16,
fontWeight: FontWeight.w500,
fontFamily: 'Poppins',
decoration: TextDecoration.none
),
),
),
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: section.length,
separatorBuilder: (context, _) => Container(
height: 1,
padding: EdgeInsets.only(left: 24),
color: Theme.of(context).textTheme.body2.decorationColor,
child: Container(
height: 1,
color: Theme.of(context).accentTextTheme.subhead.backgroundColor,
),
),
itemBuilder: (_, index2) {
final item = section[index2];
final content = item.onChanged != null
? CheckboxWidget(
value: item.value,
caption: item.caption,
onChanged: item.onChanged
)
: GestureDetector(
onTap: () async {
final List<DateTime> picked =
await date_rage_picker.showDatePicker(
context: context,
initialFirstDate: DateTime.now()
.subtract(Duration(days: 1)),
initialLastDate: (DateTime.now()),
firstDate: DateTime(2015),
lastDate: DateTime.now()
.add(Duration(days: 1)));
if (picked != null && picked.length == 2) {
dashboardViewModel.transactionFilterStore
.changeStartDate(picked.first);
dashboardViewModel.transactionFilterStore
.changeEndDate(picked.last);
}
},
child: Padding(
padding: EdgeInsets.only(left: 32),
child: Text(
item.caption,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color,
fontSize: 18,
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
decoration: TextDecoration.none
),
),
),
);
return FilterTile(child: content);
},
)
],
);
},
),
),
),
),
],
),
AlertCloseButton(image: backVector)
],
),
);
}
}

175
lib/src/screens/dashboard/widgets/header_row.dart
View file

@ -1,9 +1,7 @@
import 'package:cake_wallet/src/screens/dashboard/widgets/filter_widget.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart';
import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker;
import 'package:flutter_mobx/flutter_mobx.dart';
class HeaderRow extends StatelessWidget { class HeaderRow extends StatelessWidget {
HeaderRow({this.dashboardViewModel}); HeaderRow({this.dashboardViewModel});
@ -31,148 +29,13 @@ class HeaderRow extends StatelessWidget {
color: Colors.white color: Colors.white
), ),
), ),
PopupMenuButton<int>( GestureDetector(
itemBuilder: (context) => [ onTap: () {
PopupMenuItem( showDialog<void>(
enabled: false, context: context,
value: -1, builder: (context) => FilterWidget(dashboardViewModel: dashboardViewModel)
child: Text(S.of(context).transactions, );
style: TextStyle( },
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryTextTheme.title.color))),
PopupMenuItem(
value: 0,
child: Observer(
builder: (_) => Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(S.of(context).incoming,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
),
),
Checkbox(
value: dashboardViewModel
.transactionFilterStore
.displayIncoming,
onChanged: (value) => dashboardViewModel
.transactionFilterStore
.toggleIncoming()
)
]))),
PopupMenuItem(
value: 1,
child: Observer(
builder: (_) => Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(S.of(context).outgoing,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.transactionFilterStore
.displayOutgoing,
onChanged: (value) => dashboardViewModel
.transactionFilterStore
.toggleOutgoing(),
)
]))),
PopupMenuItem(
value: 2,
child:
Text(S.of(context).transactions_by_date,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
)),
PopupMenuDivider(),
PopupMenuItem(
enabled: false,
value: -1,
child: Text(S.of(context).trades,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryTextTheme.title.color))),
PopupMenuItem(
value: 3,
child: Observer(
builder: (_) => Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text('XMR.TO',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.tradeFilterStore
.displayXMRTO,
onChanged: (value) => dashboardViewModel
.tradeFilterStore
.toggleDisplayExchange(
ExchangeProviderDescription
.xmrto),
)
]))),
PopupMenuItem(
value: 4,
child: Observer(
builder: (_) => Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text('Change.NOW',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.tradeFilterStore
.displayChangeNow,
onChanged: (value) => dashboardViewModel
.tradeFilterStore
.toggleDisplayExchange(
ExchangeProviderDescription
.changeNow),
)
]))),
PopupMenuItem(
value: 5,
child: Observer(
builder: (_) => Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text('MorphToken',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.tradeFilterStore
.displayMorphToken,
onChanged: (value) => dashboardViewModel
.tradeFilterStore
.toggleDisplayExchange(
ExchangeProviderDescription
.morphToken),
)
])))
],
child: Container( child: Container(
height: 36, height: 36,
width: 36, width: 36,
@ -182,27 +45,7 @@ class HeaderRow extends StatelessWidget {
), ),
child: filterIcon, child: filterIcon,
), ),
onSelected: (item) async { )
if (item == 2) {
final picked =
await date_rage_picker.showDatePicker(
context: context,
initialFirstDate: DateTime.now()
.subtract(Duration(days: 1)),
initialLastDate: (DateTime.now()),
firstDate: DateTime(2015),
lastDate: DateTime.now()
.add(Duration(days: 1)));
if (picked != null && picked.length == 2) {
dashboardViewModel.transactionFilterStore
.changeStartDate(picked.first);
dashboardViewModel.transactionFilterStore
.changeEndDate(picked.last);
}
}
},
),
], ],
), ),
); );

43
lib/src/screens/dashboard/widgets/menu_widget.dart
View file

@ -17,8 +17,8 @@ class MenuWidget extends StatefulWidget {
} }
class MenuWidgetState extends State<MenuWidget> { class MenuWidgetState extends State<MenuWidget> {
final moneroIcon = Image.asset('assets/images/monero_menu.png'); Image moneroIcon;
final bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png'); Image bitcoinIcon;
final largeScreen = 731; final largeScreen = 731;
double menuWidth; double menuWidth;
@ -36,10 +36,10 @@ class MenuWidgetState extends State<MenuWidget> {
screenWidth = 0; screenWidth = 0;
screenHeight = 0; screenHeight = 0;
headerHeight = 125; headerHeight = 137;
tileHeight = 75; tileHeight = 75;
fromTopEdge = 30; fromTopEdge = 50;
fromBottomEdge = 21; fromBottomEdge = 30;
super.initState(); super.initState();
WidgetsBinding.instance.addPostFrameCallback(afterLayout); WidgetsBinding.instance.addPostFrameCallback(afterLayout);
@ -67,6 +67,15 @@ class MenuWidgetState extends State<MenuWidget> {
final walletMenu = WalletMenu(context); final walletMenu = WalletMenu(context);
final itemCount = walletMenu.items.length; final itemCount = walletMenu.items.length;
moneroIcon = Image.asset('assets/images/monero_menu.png',
color: Theme.of(context)
.accentTextTheme
.overline.decorationColor);
bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png',
color: Theme.of(context)
.accentTextTheme
.overline.decorationColor);
return Row( return Row(
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@ -87,17 +96,22 @@ class MenuWidgetState extends State<MenuWidget> {
topLeft: Radius.circular(24), topLeft: Radius.circular(24),
bottomLeft: Radius.circular(24)), bottomLeft: Radius.circular(24)),
child: Container( child: Container(
width: menuWidth, color: Theme.of(context).textTheme.body2.decorationColor,
height: double.infinity,
color: Theme.of(context).textTheme.body2.color,
alignment: Alignment.topCenter,
child: ListView.separated( child: ListView.separated(
padding: EdgeInsets.only(top: 0),
itemBuilder: (_, index) { itemBuilder: (_, index) {
if (index == 0) { if (index == 0) {
return Container( return Container(
height: headerHeight, height: headerHeight,
color: Theme.of(context).textTheme.body2.color, decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Theme.of(context).accentTextTheme.display1.color,
Theme.of(context).accentTextTheme.display1.decorationColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 24, left: 24,
top: fromTopEdge, top: fromTopEdge,
@ -121,8 +135,7 @@ class MenuWidgetState extends State<MenuWidget> {
Text( Text(
widget.name, widget.name,
style: TextStyle( style: TextStyle(
color: Theme.of(context).textTheme color: Colors.white,
.display2.color,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold), fontWeight: FontWeight.bold),
), ),
@ -131,8 +144,8 @@ class MenuWidgetState extends State<MenuWidget> {
widget.subname, widget.subname,
style: TextStyle( style: TextStyle(
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme .accentTextTheme
.caption.color, .overline.decorationColor,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12), fontSize: 12),
) )
@ -194,7 +207,7 @@ class MenuWidgetState extends State<MenuWidget> {
color: Theme.of(context).primaryTextTheme.caption.decorationColor, color: Theme.of(context).primaryTextTheme.caption.decorationColor,
), ),
itemCount: itemCount + 1), itemCount: itemCount + 1),
), )
) )
) )
], ],

58
lib/src/screens/send/widgets/base_send_widget.dart
View file

@ -247,26 +247,44 @@ class BaseSendWidget extends StatelessWidget {
), ),
isTemplate isTemplate
? Offstage() ? Offstage()
: Padding( : GestureDetector(
padding: const EdgeInsets.only(top: 24), onTap: () {},
child: Row( child: Container(
mainAxisAlignment: MainAxisAlignment.spaceBetween, padding: EdgeInsets.only(top: 24),
children: <Widget>[ child: Row(
Text(S.of(context).send_estimated_fee, mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: TextStyle( children: <Widget>[
fontSize: 12, Text(S.of(context).send_estimated_fee,
fontWeight: FontWeight.w500, style: TextStyle(
color: Theme.of(context).primaryTextTheme.display2.color, fontSize: 12,
)), fontWeight: FontWeight.w500,
Text( //color: Theme.of(context).primaryTextTheme.display2.color,
sendViewModel.estimatedFee.toString() + ' ' color: Colors.white
+ sendViewModel.currency.title, )),
style: TextStyle( Container(
fontSize: 12, child: Row(
fontWeight: FontWeight.w600, children: <Widget>[
color: Theme.of(context).primaryTextTheme.display2.color, Text(
)) sendViewModel.estimatedFee.toString() + ' '
], + sendViewModel.currency.title,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
//color: Theme.of(context).primaryTextTheme.display2.color,
color: Colors.white
)),
Padding(
padding: EdgeInsets.only(left: 5),
child: Icon(
Icons.arrow_forward_ios,
size: 12,
color: Colors.white,),
)
],
),
)
],
),
), ),
) )
], ],

42
lib/src/screens/wallet_list/wallet_list_page.dart
View file

@ -37,11 +37,14 @@ class WalletListBodyState extends State<WalletListBody> {
final bitcoinIcon = final bitcoinIcon =
Image.asset('assets/images/bitcoin.png', height: 24, width: 24); Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
final scrollController = ScrollController(); final scrollController = ScrollController();
final double tileHeight = 60;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final newWalletImage = Image.asset('assets/images/new_wallet.png', final newWalletImage = Image.asset('assets/images/new_wallet.png',
height: 12, width: 12, color: Palette.oceanBlue); height: 12,
width: 12,
color: Theme.of(context).accentTextTheme.headline.decorationColor);
final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', final restoreWalletImage = Image.asset('assets/images/restore_wallet.png',
height: 12, height: 12,
width: 12, width: 12,
@ -58,7 +61,7 @@ class WalletListBodyState extends State<WalletListBody> {
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
separatorBuilder: (_, index) => Divider( separatorBuilder: (_, index) => Divider(
color: Theme.of(context).backgroundColor, height: 16), color: Theme.of(context).backgroundColor, height: 32),
itemCount: widget.walletListViewModel.wallets.length, itemCount: widget.walletListViewModel.wallets.length,
itemBuilder: (__, index) { itemBuilder: (__, index) {
final wallet = widget.walletListViewModel.wallets[index]; final wallet = widget.walletListViewModel.wallets[index];
@ -80,7 +83,7 @@ class WalletListBodyState extends State<WalletListBody> {
.generateImagesForWalletMenu(wallet.isCurrent); .generateImagesForWalletMenu(wallet.isCurrent);
return Container( return Container(
height: 108, height: tileHeight,
width: double.infinity, width: double.infinity,
child: CustomScrollView( child: CustomScrollView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
@ -90,7 +93,7 @@ class WalletListBodyState extends State<WalletListBody> {
pinned: false, pinned: false,
floating: true, floating: true,
delegate: WalletTile( delegate: WalletTile(
min: screenWidth - 228, min: screenWidth - 170,
max: screenWidth, max: screenWidth,
image: _imageFor(type: wallet.type), image: _imageFor(type: wallet.type),
walletName: wallet.name, walletName: wallet.name,
@ -101,10 +104,11 @@ class WalletListBodyState extends State<WalletListBody> {
delegate: delegate:
SliverChildBuilderDelegate((context, index) { SliverChildBuilderDelegate((context, index) {
final item = items[index]; final item = items[index];
final color = colors[index];
final image = images[index]; final image = images[index];
final firstColor = colors[index*2];
final secondColor = colors[index*2 + 1];
final radius = index == 0 ? 12.0 : 0.0; final radius = index == 0 ? 10.0 : 0.0;
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
@ -117,8 +121,8 @@ class WalletListBodyState extends State<WalletListBody> {
wallet.isCurrent); wallet.isCurrent);
}, },
child: Container( child: Container(
height: 108, height: tileHeight,
width: 108, width: 80,
color: Theme.of(context).backgroundColor, color: Theme.of(context).backgroundColor,
child: Container( child: Container(
padding: EdgeInsets.only(left: 5, right: 5), padding: EdgeInsets.only(left: 5, right: 5),
@ -126,18 +130,27 @@ class WalletListBodyState extends State<WalletListBody> {
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius), topLeft: Radius.circular(radius),
bottomLeft: Radius.circular(radius)), bottomLeft: Radius.circular(radius)),
color: color), gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
firstColor,
secondColor
]
)
),
child: Center( child: Center(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
image, image,
SizedBox(height: 5), SizedBox(height: 2),
Text( Text(
item, item,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 7,
fontWeight: FontWeight.w500,
color: Colors.white), color: Colors.white),
) )
], ],
@ -159,9 +172,8 @@ class WalletListBodyState extends State<WalletListBody> {
Navigator.of(context).pushNamed(Routes.newWalletType), Navigator.of(context).pushNamed(Routes.newWalletType),
image: newWalletImage, image: newWalletImage,
text: S.of(context).wallet_list_create_new_wallet, text: S.of(context).wallet_list_create_new_wallet,
color: Colors.white, color: Theme.of(context).accentTextTheme.subtitle.decorationColor,
textColor: Palette.oceanBlue, textColor: Theme.of(context).accentTextTheme.headline.decorationColor,
borderColor: Palette.oceanBlue,
), ),
SizedBox(height: 10.0), SizedBox(height: 10.0),
PrimaryImageButton( PrimaryImageButton(
@ -169,7 +181,7 @@ class WalletListBodyState extends State<WalletListBody> {
.pushNamed(Routes.restoreWalletType), .pushNamed(Routes.restoreWalletType),
image: restoreWalletImage, image: restoreWalletImage,
text: S.of(context).wallet_list_restore_wallet, text: S.of(context).wallet_list_restore_wallet,
color: Theme.of(context).primaryTextTheme.overline.color, color: Theme.of(context).accentTextTheme.caption.color,
textColor: Theme.of(context).primaryTextTheme.title.color) textColor: Theme.of(context).primaryTextTheme.title.color)
])), ])),
)); ));

50
lib/src/screens/wallet_list/wallet_menu.dart
View file

@ -6,6 +6,7 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart'; import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart'; import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
import 'package:cake_wallet/src/screens/auth/auth_page.dart'; import 'package:cake_wallet/src/screens/auth/auth_page.dart';
import 'package:cake_wallet/palette.dart';
class WalletMenu { class WalletMenu {
WalletMenu(this.context, this.walletListViewModel); WalletMenu(this.context, this.walletListViewModel);
@ -20,18 +21,25 @@ class WalletMenu {
S.current.rescan S.current.rescan
]; ];
final List<Color> listColors = [ final List<Color> firstColors = [
Colors.blue, Palette.cornflower,
Colors.orange, Palette.moderateOrangeYellow,
Colors.red, Palette.lightRed,
Colors.green Palette.shineGreen
];
final List<Color> secondColors = [
Palette.royalBlue,
Palette.moderateOrange,
Palette.persianRed,
Palette.moderateGreen
]; ];
final List<Image> listImages = [ final List<Image> listImages = [
Image.asset('assets/images/load.png', height: 32, width: 32, color: Colors.white), Image.asset('assets/images/load.png', height: 24, width: 24, color: Colors.white),
Image.asset('assets/images/eye_action.png', height: 32, width: 32, color: Colors.white), Image.asset('assets/images/eye_action.png', height: 24, width: 24, color: Colors.white),
Image.asset('assets/images/trash.png', height: 32, width: 32, color: Colors.white), Image.asset('assets/images/trash.png', height: 24, width: 24, color: Colors.white),
Image.asset('assets/images/scanner.png', height: 32, width: 32, color: Colors.white) Image.asset('assets/images/scanner.png', height: 24, width: 24, color: Colors.white)
]; ];
List<String> generateItemsForWalletMenu(bool isCurrentWallet) { List<String> generateItemsForWalletMenu(bool isCurrentWallet) {
@ -46,18 +54,30 @@ class WalletMenu {
} }
List<Color> generateColorsForWalletMenu(bool isCurrentWallet) { List<Color> generateColorsForWalletMenu(bool isCurrentWallet) {
final colors = List<Color>(); final colors = <Color>[];
if (!isCurrentWallet) colors.add(listColors[0]); if (!isCurrentWallet) {
if (isCurrentWallet) colors.add(listColors[1]); colors.add(firstColors[0]);
if (!isCurrentWallet) colors.add(listColors[2]); colors.add(secondColors[0]);
if (isCurrentWallet) colors.add(listColors[3]); }
if (isCurrentWallet) {
colors.add(firstColors[1]);
colors.add(secondColors[1]);
}
if (!isCurrentWallet) {
colors.add(firstColors[2]);
colors.add(secondColors[2]);
}
if (isCurrentWallet) {
colors.add(firstColors[3]);
colors.add(secondColors[3]);
}
return colors; return colors;
} }
List<Image> generateImagesForWalletMenu(bool isCurrentWallet) { List<Image> generateImagesForWalletMenu(bool isCurrentWallet) {
final images = List<Image>(); final images = <Image>[];
if (!isCurrentWallet) images.add(listImages[0]); if (!isCurrentWallet) images.add(listImages[0]);
if (isCurrentWallet) images.add(listImages[1]); if (isCurrentWallet) images.add(listImages[1]);

67
lib/src/screens/wallet_list/widgets/wallet_tile.dart
View file

@ -17,17 +17,18 @@ class WalletTile extends SliverPersistentHeaderDelegate {
final String walletName; final String walletName;
final String walletAddress; final String walletAddress;
final bool isCurrent; final bool isCurrent;
final double tileHeight = 60;
@override @override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
var opacity = 1 - shrinkOffset / (max - min); var opacity = 1 - shrinkOffset / (max - min);
opacity = opacity >= 0 ? opacity : 0; opacity = opacity >= 0 ? opacity : 0;
var panelWidth = 12 * opacity; var panelWidth = 10 * opacity;
panelWidth = panelWidth < 12 ? 0 : 12; panelWidth = panelWidth < 10 ? 0 : 10;
final currentColor = isCurrent final currentColor = isCurrent
? Theme.of(context).accentTextTheme.caption.color ? Theme.of(context).accentTextTheme.subtitle.decorationColor
: Theme.of(context).backgroundColor; : Theme.of(context).backgroundColor;
return Stack( return Stack(
@ -38,7 +39,7 @@ class WalletTile extends SliverPersistentHeaderDelegate {
top: 0, top: 0,
right: max - 4, right: max - 4,
child: Container( child: Container(
height: 108, height: tileHeight,
width: 4, width: 4,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)), borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
@ -48,13 +49,30 @@ class WalletTile extends SliverPersistentHeaderDelegate {
), ),
Positioned( Positioned(
top: 0, top: 0,
right: 12, right: 10,
child: Container( child: Container(
height: 108, height: tileHeight,
width: max - 16, width: max - 14,
padding: EdgeInsets.only(left: 20, right: 20), padding: EdgeInsets.only(left: 20, right: 20),
color: Theme.of(context).backgroundColor, color: Theme.of(context).backgroundColor,
child: Column( alignment: Alignment.centerLeft,
child: Row(
//mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
image,
SizedBox(width: 10),
Text(
walletName,
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryTextTheme.title.color
),
)
],
),
/*Column(
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ children: <Widget>[
@ -92,7 +110,7 @@ class WalletTile extends SliverPersistentHeaderDelegate {
) )
: Offstage() : Offstage()
], ],
), ),*/
), ),
), ),
Positioned( Positioned(
@ -101,29 +119,18 @@ class WalletTile extends SliverPersistentHeaderDelegate {
child: Opacity( child: Opacity(
opacity: opacity, opacity: opacity,
child: Container( child: Container(
height: 108, height: tileHeight,
width: panelWidth, width: panelWidth,
padding: EdgeInsets.only(
top: 1,
left: 1,
bottom: 1
),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)), borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
color: Theme.of(context).accentTextTheme.subtitle.color gradient: LinearGradient(
), begin: Alignment.topCenter,
child: Container( end: Alignment.bottomCenter,
decoration: BoxDecoration( colors: [
borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)), Theme.of(context).accentTextTheme.headline.color,
gradient: LinearGradient( Theme.of(context).accentTextTheme.headline.backgroundColor
begin: Alignment.topCenter, ]
end: Alignment.bottomCenter, )
colors: [
Theme.of(context).accentTextTheme.caption.backgroundColor,
Theme.of(context).accentTextTheme.caption.decorationColor
]
)
),
), ),
), ),
) )

81
lib/src/widgets/checkbox_widget.dart Normal file
View file

@ -0,0 +1,81 @@
import 'dart:ui';
import 'package:cake_wallet/palette.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CheckboxWidget extends StatefulWidget {
CheckboxWidget({
@required this.value,
@required this.caption,
@required this.onChanged});
final bool value;
final String caption;
final Function(bool) onChanged;
@override
CheckboxWidgetState createState() => CheckboxWidgetState(value, caption, onChanged);
}
class CheckboxWidgetState extends State<CheckboxWidget> {
CheckboxWidgetState(this.value, this.caption, this.onChanged);
bool value;
String caption;
Function(bool) onChanged;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
value = !value;
onChanged(value);
setState(() {});
},
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 16,
width: 16,
decoration: BoxDecoration(
color: value
? Palette.blueCraiola
: Theme.of(context).accentTextTheme.subhead.decorationColor,
borderRadius: BorderRadius.all(Radius.circular(2)),
border: Border.all(
color: value
? Palette.blueCraiola
: Theme.of(context).accentTextTheme.overline.color,
width: 1
)
),
child: value
? Center(
child: Icon(
Icons.done,
color: Colors.white,
size: 14,
),
)
: Offstage(),
),
Padding(
padding: EdgeInsets.only(left: 16),
child: Text(
caption,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color,
fontSize: 18,
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
decoration: TextDecoration.none
),
),
)
],
),
);
}
}

2
lib/store/dashboard/trade_filter_store.dart
View file

@ -43,7 +43,7 @@ abstract class TradeFilterStoreBase with Store {
final needToFilter = !displayChangeNow || !displayXMRTO || !displayMorphToken; final needToFilter = !displayChangeNow || !displayXMRTO || !displayMorphToken;
return needToFilter return needToFilter
? trades ? _trades
.where((item) => .where((item) =>
(displayXMRTO && (displayXMRTO &&
item.trade.provider == ExchangeProviderDescription.xmrto) || item.trade.provider == ExchangeProviderDescription.xmrto) ||

62
lib/themes.dart
View file

@ -132,19 +132,26 @@ class Themes {
subtitle: TextStyle( subtitle: TextStyle(
color: Palette.darkBlueCraiola, // QR code (exchange trade page) color: Palette.darkBlueCraiola, // QR code (exchange trade page)
backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
),
headline: TextStyle(
decorationColor: Palette.darkLavender // selected item color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
decorationColor: Colors.white // restore wallet button text color (wallet list page)
),
subhead: TextStyle(
color: Palette.darkGray, // titles color (filter widget)
backgroundColor: Palette.periwinkle, // divider color (filter widget)
decorationColor: Colors.white // checkbox background (filter widget)
),
overline: TextStyle(
color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
decorationColor: Colors.white, // menu subname
),
display1: TextStyle(
color: Palette.blueCraiola, // first gradient color (menu header)
decorationColor: Palette.pinkFlamingo // second gradient color(menu header)
), ),
headline: TextStyle(
color: Palette.darkLavender, // faq background
backgroundColor: Palette.lavender // faq extension
)
), ),
@ -288,19 +295,26 @@ class Themes {
subtitle: TextStyle( subtitle: TextStyle(
color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page)
decorationColor: Colors.white // crete new wallet button background (wallet list page)
),
headline: TextStyle(
decorationColor: PaletteDark.headerNightBlue // selected item color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page)
backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page)
decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page)
),
subhead: TextStyle(
color: Colors.white, // titles color (filter widget)
backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget)
decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget)
),
overline: TextStyle(
color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
decorationColor: PaletteDark.darkCyanBlue, // menu subname
),
display1: TextStyle(
color: PaletteDark.deepPurpleBlue, // first gradient color (menu header)
decorationColor: PaletteDark.deepPurpleBlue // second gradient color(menu header)
), ),
headline: TextStyle(
color: PaletteDark.lightNightBlue, // faq background
backgroundColor: PaletteDark.headerNightBlue // faq extension
)
), ),

41
lib/view_model/dashboard/dashboard_view_model.dart
View file

@ -8,6 +8,7 @@ import 'package:cake_wallet/src/domain/common/transaction_info.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/domain/exchange/trade.dart'; import 'package:cake_wallet/src/domain/exchange/trade.dart';
import 'package:cake_wallet/view_model/dashboard/balance_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/balance_view_model.dart';
import 'package:cake_wallet/view_model/dashboard/filter_item.dart';
import 'package:cake_wallet/view_model/dashboard/trade_list_item.dart'; import 'package:cake_wallet/view_model/dashboard/trade_list_item.dart';
import 'package:cake_wallet/view_model/dashboard/transaction_list_item.dart'; import 'package:cake_wallet/view_model/dashboard/transaction_list_item.dart';
import 'package:cake_wallet/view_model/dashboard/action_list_item.dart'; import 'package:cake_wallet/view_model/dashboard/action_list_item.dart';
@ -35,6 +36,44 @@ abstract class DashboardViewModelBase with Store {
this.tradeFilterStore, this.tradeFilterStore,
this.transactionFilterStore}) { this.transactionFilterStore}) {
filterItems = {S.current.transactions : [
FilterItem(
value: transactionFilterStore.displayIncoming,
caption: S.current.incoming,
onChanged: (value) => transactionFilterStore.toggleIncoming()
),
FilterItem(
value: transactionFilterStore.displayOutgoing,
caption: S.current.outgoing,
onChanged: (value) => transactionFilterStore.toggleOutgoing()
),
FilterItem(
value: false,
caption: S.current.transactions_by_date,
onChanged: null
),
],
S.current.trades : [
FilterItem(
value: tradeFilterStore.displayXMRTO,
caption: 'XMR.TO',
onChanged: (value) => tradeFilterStore
.toggleDisplayExchange(ExchangeProviderDescription.xmrto)
),
FilterItem(
value: tradeFilterStore.displayChangeNow,
caption: 'Change.NOW',
onChanged: (value) => tradeFilterStore
.toggleDisplayExchange(ExchangeProviderDescription.changeNow)
),
FilterItem(
value: tradeFilterStore.displayMorphToken,
caption: 'MorphToken',
onChanged: (value) => tradeFilterStore
.toggleDisplayExchange(ExchangeProviderDescription.morphToken)
),
]};
name = appStore.wallet?.name; name = appStore.wallet?.name;
wallet ??= appStore.wallet; wallet ??= appStore.wallet;
type = wallet.type; type = wallet.type;
@ -125,6 +164,8 @@ abstract class DashboardViewModelBase with Store {
TransactionFilterStore transactionFilterStore; TransactionFilterStore transactionFilterStore;
Map<String, List<FilterItem>> filterItems;
ReactionDisposer _reaction; ReactionDisposer _reaction;
void _onWalletChange(WalletBase wallet) { void _onWalletChange(WalletBase wallet) {

7
lib/view_model/dashboard/filter_item.dart Normal file
View file

@ -0,0 +1,7 @@
class FilterItem {
FilterItem({this.value, this.caption, this.onChanged});
bool value;
String caption;
Function(bool) onChanged;
}

5
lib/view_model/exchange/exchange_trade_view_model.dart
View file

@ -35,7 +35,8 @@ abstract class ExchangeTradeViewModelBase with Store {
break; break;
} }
items = ObservableList.of([ items = ObservableList<ExchangeTradeItem>();
items.addAll([
ExchangeTradeItem( ExchangeTradeItem(
title: S.current.id, title: S.current.id,
data: '${trade.id}', data: '${trade.id}',
@ -69,7 +70,7 @@ abstract class ExchangeTradeViewModelBase with Store {
bool isSendable; bool isSendable;
@observable @observable
ObservableList<ExchangeTradeItem> items;// = ObservableList(); ObservableList<ExchangeTradeItem> items;
ExchangeProvider _provider; ExchangeProvider _provider;