diff --git a/assets/images/2.0x/back_vector.png b/assets/images/2.0x/back_vector.png new file mode 100644 index 000000000..8d9239aa9 Binary files /dev/null and b/assets/images/2.0x/back_vector.png differ diff --git a/assets/images/3.0x/back_vector.png b/assets/images/3.0x/back_vector.png new file mode 100644 index 000000000..d01030e5d Binary files /dev/null and b/assets/images/3.0x/back_vector.png differ diff --git a/assets/images/back_vector.png b/assets/images/back_vector.png new file mode 100644 index 000000000..8717a3463 Binary files /dev/null and b/assets/images/back_vector.png differ diff --git a/lib/palette.dart b/lib/palette.dart index d73ad9ba1..809c4f085 100644 --- a/lib/palette.dart +++ b/lib/palette.dart @@ -9,11 +9,20 @@ class Palette { 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 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 darkLavender = Color.fromRGBO(229, 238, 250, 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 static const Color blueCraiola = Color.fromRGBO(69, 110, 255, 1.0); static const Color darkBlueCraiola = Color.fromRGBO(53, 86, 136, 1.0); diff --git a/lib/src/screens/dashboard/widgets/filter_tile.dart b/lib/src/screens/dashboard/widgets/filter_tile.dart new file mode 100644 index 000000000..3dbd5b5bc --- /dev/null +++ b/lib/src/screens/dashboard/widgets/filter_tile.dart @@ -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, + ); + } +} \ No newline at end of file diff --git a/lib/src/screens/dashboard/widgets/filter_widget.dart b/lib/src/screens/dashboard/widgets/filter_widget.dart new file mode 100644 index 000000000..d5197c355 --- /dev/null +++ b/lib/src/screens/dashboard/widgets/filter_widget.dart @@ -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: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + 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: [ + 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 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) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/screens/dashboard/widgets/header_row.dart b/lib/src/screens/dashboard/widgets/header_row.dart index 7542e7371..a878ff11f 100644 --- a/lib/src/screens/dashboard/widgets/header_row.dart +++ b/lib/src/screens/dashboard/widgets/header_row.dart @@ -1,9 +1,7 @@ +import 'package:cake_wallet/src/screens/dashboard/widgets/filter_widget.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.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 { HeaderRow({this.dashboardViewModel}); @@ -31,148 +29,13 @@ class HeaderRow extends StatelessWidget { color: Colors.white ), ), - PopupMenuButton( - itemBuilder: (context) => [ - PopupMenuItem( - enabled: false, - value: -1, - 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), - ) - ]))) - ], + GestureDetector( + onTap: () { + showDialog( + context: context, + builder: (context) => FilterWidget(dashboardViewModel: dashboardViewModel) + ); + }, child: Container( height: 36, width: 36, @@ -182,27 +45,7 @@ class HeaderRow extends StatelessWidget { ), 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); - } - } - }, - ), + ) ], ), ); diff --git a/lib/src/screens/dashboard/widgets/menu_widget.dart b/lib/src/screens/dashboard/widgets/menu_widget.dart index ed32d755d..6cf6570db 100644 --- a/lib/src/screens/dashboard/widgets/menu_widget.dart +++ b/lib/src/screens/dashboard/widgets/menu_widget.dart @@ -17,8 +17,8 @@ class MenuWidget extends StatefulWidget { } class MenuWidgetState extends State { - final moneroIcon = Image.asset('assets/images/monero_menu.png'); - final bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png'); + Image moneroIcon; + Image bitcoinIcon; final largeScreen = 731; double menuWidth; @@ -36,10 +36,10 @@ class MenuWidgetState extends State { screenWidth = 0; screenHeight = 0; - headerHeight = 125; + headerHeight = 137; tileHeight = 75; - fromTopEdge = 30; - fromBottomEdge = 21; + fromTopEdge = 50; + fromBottomEdge = 30; super.initState(); WidgetsBinding.instance.addPostFrameCallback(afterLayout); @@ -67,6 +67,15 @@ class MenuWidgetState extends State { final walletMenu = WalletMenu(context); 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( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, @@ -87,17 +96,22 @@ class MenuWidgetState extends State { topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)), child: Container( - width: menuWidth, - height: double.infinity, - color: Theme.of(context).textTheme.body2.color, - alignment: Alignment.topCenter, + color: Theme.of(context).textTheme.body2.decorationColor, child: ListView.separated( + padding: EdgeInsets.only(top: 0), itemBuilder: (_, index) { if (index == 0) { return Container( 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( left: 24, top: fromTopEdge, @@ -121,8 +135,7 @@ class MenuWidgetState extends State { Text( widget.name, style: TextStyle( - color: Theme.of(context).textTheme - .display2.color, + color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold), ), @@ -131,8 +144,8 @@ class MenuWidgetState extends State { widget.subname, style: TextStyle( color: Theme.of(context) - .primaryTextTheme - .caption.color, + .accentTextTheme + .overline.decorationColor, fontWeight: FontWeight.w500, fontSize: 12), ) @@ -194,7 +207,7 @@ class MenuWidgetState extends State { color: Theme.of(context).primaryTextTheme.caption.decorationColor, ), itemCount: itemCount + 1), - ), + ) ) ) ], diff --git a/lib/src/screens/send/widgets/base_send_widget.dart b/lib/src/screens/send/widgets/base_send_widget.dart index 0ce6e55ac..c8d03f389 100644 --- a/lib/src/screens/send/widgets/base_send_widget.dart +++ b/lib/src/screens/send/widgets/base_send_widget.dart @@ -247,26 +247,44 @@ class BaseSendWidget extends StatelessWidget { ), isTemplate ? Offstage() - : Padding( - padding: const EdgeInsets.only(top: 24), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text(S.of(context).send_estimated_fee, - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.w500, - 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, - )) - ], + : GestureDetector( + onTap: () {}, + child: Container( + padding: EdgeInsets.only(top: 24), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(S.of(context).send_estimated_fee, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w500, + //color: Theme.of(context).primaryTextTheme.display2.color, + color: Colors.white + )), + Container( + child: Row( + children: [ + 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,), + ) + ], + ), + ) + ], + ), ), ) ], diff --git a/lib/src/screens/wallet_list/wallet_list_page.dart b/lib/src/screens/wallet_list/wallet_list_page.dart index 6b8e047cf..bac8e0990 100644 --- a/lib/src/screens/wallet_list/wallet_list_page.dart +++ b/lib/src/screens/wallet_list/wallet_list_page.dart @@ -37,11 +37,14 @@ class WalletListBodyState extends State { final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24); final scrollController = ScrollController(); + final double tileHeight = 60; @override Widget build(BuildContext context) { 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', height: 12, width: 12, @@ -58,7 +61,7 @@ class WalletListBodyState extends State { shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), separatorBuilder: (_, index) => Divider( - color: Theme.of(context).backgroundColor, height: 16), + color: Theme.of(context).backgroundColor, height: 32), itemCount: widget.walletListViewModel.wallets.length, itemBuilder: (__, index) { final wallet = widget.walletListViewModel.wallets[index]; @@ -80,7 +83,7 @@ class WalletListBodyState extends State { .generateImagesForWalletMenu(wallet.isCurrent); return Container( - height: 108, + height: tileHeight, width: double.infinity, child: CustomScrollView( scrollDirection: Axis.horizontal, @@ -90,7 +93,7 @@ class WalletListBodyState extends State { pinned: false, floating: true, delegate: WalletTile( - min: screenWidth - 228, + min: screenWidth - 170, max: screenWidth, image: _imageFor(type: wallet.type), walletName: wallet.name, @@ -101,10 +104,11 @@ class WalletListBodyState extends State { delegate: SliverChildBuilderDelegate((context, index) { final item = items[index]; - final color = colors[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( onTap: () { @@ -117,8 +121,8 @@ class WalletListBodyState extends State { wallet.isCurrent); }, child: Container( - height: 108, - width: 108, + height: tileHeight, + width: 80, color: Theme.of(context).backgroundColor, child: Container( padding: EdgeInsets.only(left: 5, right: 5), @@ -126,18 +130,27 @@ class WalletListBodyState extends State { borderRadius: BorderRadius.only( topLeft: Radius.circular(radius), bottomLeft: Radius.circular(radius)), - color: color), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + firstColor, + secondColor + ] + ) + ), child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ image, - SizedBox(height: 5), + SizedBox(height: 2), Text( item, textAlign: TextAlign.center, style: TextStyle( - fontSize: 12, + fontSize: 7, + fontWeight: FontWeight.w500, color: Colors.white), ) ], @@ -159,9 +172,8 @@ class WalletListBodyState extends State { Navigator.of(context).pushNamed(Routes.newWalletType), image: newWalletImage, text: S.of(context).wallet_list_create_new_wallet, - color: Colors.white, - textColor: Palette.oceanBlue, - borderColor: Palette.oceanBlue, + color: Theme.of(context).accentTextTheme.subtitle.decorationColor, + textColor: Theme.of(context).accentTextTheme.headline.decorationColor, ), SizedBox(height: 10.0), PrimaryImageButton( @@ -169,7 +181,7 @@ class WalletListBodyState extends State { .pushNamed(Routes.restoreWalletType), image: restoreWalletImage, 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) ])), )); diff --git a/lib/src/screens/wallet_list/wallet_menu.dart b/lib/src/screens/wallet_list/wallet_menu.dart index b6654d0e8..360f55759 100644 --- a/lib/src/screens/wallet_list/wallet_menu.dart +++ b/lib/src/screens/wallet_list/wallet_menu.dart @@ -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/view_model/wallet_list/wallet_list_item.dart'; import 'package:cake_wallet/src/screens/auth/auth_page.dart'; +import 'package:cake_wallet/palette.dart'; class WalletMenu { WalletMenu(this.context, this.walletListViewModel); @@ -20,18 +21,25 @@ class WalletMenu { S.current.rescan ]; - final List listColors = [ - Colors.blue, - Colors.orange, - Colors.red, - Colors.green + final List firstColors = [ + Palette.cornflower, + Palette.moderateOrangeYellow, + Palette.lightRed, + Palette.shineGreen + ]; + + final List secondColors = [ + Palette.royalBlue, + Palette.moderateOrange, + Palette.persianRed, + Palette.moderateGreen ]; final List listImages = [ - Image.asset('assets/images/load.png', height: 32, width: 32, color: Colors.white), - Image.asset('assets/images/eye_action.png', height: 32, width: 32, color: Colors.white), - Image.asset('assets/images/trash.png', height: 32, width: 32, color: Colors.white), - Image.asset('assets/images/scanner.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: 24, width: 24, color: Colors.white), + Image.asset('assets/images/trash.png', height: 24, width: 24, color: Colors.white), + Image.asset('assets/images/scanner.png', height: 24, width: 24, color: Colors.white) ]; List generateItemsForWalletMenu(bool isCurrentWallet) { @@ -46,18 +54,30 @@ class WalletMenu { } List generateColorsForWalletMenu(bool isCurrentWallet) { - final colors = List(); + final colors = []; - if (!isCurrentWallet) colors.add(listColors[0]); - if (isCurrentWallet) colors.add(listColors[1]); - if (!isCurrentWallet) colors.add(listColors[2]); - if (isCurrentWallet) colors.add(listColors[3]); + if (!isCurrentWallet) { + colors.add(firstColors[0]); + colors.add(secondColors[0]); + } + 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; } List generateImagesForWalletMenu(bool isCurrentWallet) { - final images = List(); + final images = []; if (!isCurrentWallet) images.add(listImages[0]); if (isCurrentWallet) images.add(listImages[1]); diff --git a/lib/src/screens/wallet_list/widgets/wallet_tile.dart b/lib/src/screens/wallet_list/widgets/wallet_tile.dart index 42a2301a9..4e4165341 100644 --- a/lib/src/screens/wallet_list/widgets/wallet_tile.dart +++ b/lib/src/screens/wallet_list/widgets/wallet_tile.dart @@ -17,17 +17,18 @@ class WalletTile extends SliverPersistentHeaderDelegate { final String walletName; final String walletAddress; final bool isCurrent; + final double tileHeight = 60; @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { var opacity = 1 - shrinkOffset / (max - min); opacity = opacity >= 0 ? opacity : 0; - var panelWidth = 12 * opacity; - panelWidth = panelWidth < 12 ? 0 : 12; + var panelWidth = 10 * opacity; + panelWidth = panelWidth < 10 ? 0 : 10; final currentColor = isCurrent - ? Theme.of(context).accentTextTheme.caption.color + ? Theme.of(context).accentTextTheme.subtitle.decorationColor : Theme.of(context).backgroundColor; return Stack( @@ -38,7 +39,7 @@ class WalletTile extends SliverPersistentHeaderDelegate { top: 0, right: max - 4, child: Container( - height: 108, + height: tileHeight, width: 4, decoration: BoxDecoration( borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)), @@ -48,13 +49,30 @@ class WalletTile extends SliverPersistentHeaderDelegate { ), Positioned( top: 0, - right: 12, + right: 10, child: Container( - height: 108, - width: max - 16, + height: tileHeight, + width: max - 14, padding: EdgeInsets.only(left: 20, right: 20), color: Theme.of(context).backgroundColor, - child: Column( + alignment: Alignment.centerLeft, + child: Row( + //mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + image, + SizedBox(width: 10), + Text( + walletName, + style: TextStyle( + fontSize: 22, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.title.color + ), + ) + ], + ), + /*Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -92,7 +110,7 @@ class WalletTile extends SliverPersistentHeaderDelegate { ) : Offstage() ], - ), + ),*/ ), ), Positioned( @@ -101,29 +119,18 @@ class WalletTile extends SliverPersistentHeaderDelegate { child: Opacity( opacity: opacity, child: Container( - height: 108, + height: tileHeight, width: panelWidth, - padding: EdgeInsets.only( - top: 1, - left: 1, - bottom: 1 - ), decoration: BoxDecoration( - borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)), - color: Theme.of(context).accentTextTheme.subtitle.color - ), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)), - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - Theme.of(context).accentTextTheme.caption.backgroundColor, - Theme.of(context).accentTextTheme.caption.decorationColor - ] - ) - ), + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Theme.of(context).accentTextTheme.headline.color, + Theme.of(context).accentTextTheme.headline.backgroundColor + ] + ) ), ), ) diff --git a/lib/src/widgets/checkbox_widget.dart b/lib/src/widgets/checkbox_widget.dart new file mode 100644 index 000000000..9bb8b74a8 --- /dev/null +++ b/lib/src/widgets/checkbox_widget.dart @@ -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 { + 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: [ + 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 + ), + ), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/store/dashboard/trade_filter_store.dart b/lib/store/dashboard/trade_filter_store.dart index 064b092f6..181f9b0f0 100644 --- a/lib/store/dashboard/trade_filter_store.dart +++ b/lib/store/dashboard/trade_filter_store.dart @@ -43,7 +43,7 @@ abstract class TradeFilterStoreBase with Store { final needToFilter = !displayChangeNow || !displayXMRTO || !displayMorphToken; return needToFilter - ? trades + ? _trades .where((item) => (displayXMRTO && item.trade.provider == ExchangeProviderDescription.xmrto) || diff --git a/lib/themes.dart b/lib/themes.dart index ecf41da62..6b9241664 100644 --- a/lib/themes.dart +++ b/lib/themes.dart @@ -132,19 +132,26 @@ class Themes { subtitle: TextStyle( color: Palette.darkBlueCraiola, // QR code (exchange trade page) backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) - - - - decorationColor: Palette.darkLavender // selected item + decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page) + ), + headline: TextStyle( + 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( color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) - - - - decorationColor: PaletteDark.headerNightBlue // selected item + decorationColor: Colors.white // crete new wallet button background (wallet list page) + ), + headline: TextStyle( + 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 - ) ), diff --git a/lib/view_model/dashboard/dashboard_view_model.dart b/lib/view_model/dashboard/dashboard_view_model.dart index c2c96eace..705b4e8fe 100644 --- a/lib/view_model/dashboard/dashboard_view_model.dart +++ b/lib/view_model/dashboard/dashboard_view_model.dart @@ -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/trade.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/transaction_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.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; wallet ??= appStore.wallet; type = wallet.type; @@ -125,6 +164,8 @@ abstract class DashboardViewModelBase with Store { TransactionFilterStore transactionFilterStore; + Map> filterItems; + ReactionDisposer _reaction; void _onWalletChange(WalletBase wallet) { diff --git a/lib/view_model/dashboard/filter_item.dart b/lib/view_model/dashboard/filter_item.dart new file mode 100644 index 000000000..33500b345 --- /dev/null +++ b/lib/view_model/dashboard/filter_item.dart @@ -0,0 +1,7 @@ +class FilterItem { + FilterItem({this.value, this.caption, this.onChanged}); + + bool value; + String caption; + Function(bool) onChanged; +} \ No newline at end of file diff --git a/lib/view_model/exchange/exchange_trade_view_model.dart b/lib/view_model/exchange/exchange_trade_view_model.dart index b623673ed..f773cab37 100644 --- a/lib/view_model/exchange/exchange_trade_view_model.dart +++ b/lib/view_model/exchange/exchange_trade_view_model.dart @@ -35,7 +35,8 @@ abstract class ExchangeTradeViewModelBase with Store { break; } - items = ObservableList.of([ + items = ObservableList(); + items.addAll([ ExchangeTradeItem( title: S.current.id, data: '${trade.id}', @@ -69,7 +70,7 @@ abstract class ExchangeTradeViewModelBase with Store { bool isSendable; @observable - ObservableList items;// = ObservableList(); + ObservableList items; ExchangeProvider _provider;