diff --git a/lib/src/screens/dashboard/widgets/button_header.dart b/lib/src/screens/dashboard/widgets/button_header.dart new file mode 100644 index 000000000..3daa39ec7 --- /dev/null +++ b/lib/src/screens/dashboard/widgets/button_header.dart @@ -0,0 +1,297 @@ +import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart'; +import 'package:cake_wallet/src/stores/action_list/action_list_store.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:provider/provider.dart'; +import 'package:cake_wallet/routes.dart'; +import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker; + +class ButtonHeader extends SliverPersistentHeaderDelegate { + final sendImage = Image.asset('assets/images/send.png'); + final exchangeImage = Image.asset('assets/images/exchange.png'); + final buyImage = Image.asset('assets/images/coins.png'); + final filterButton = Image.asset('assets/images/filter_button.png'); + + @override + Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { + final actionListStore = Provider.of(context); + final historyPanelWidth = MediaQuery.of(context).size.width; + + double buttonsOpacity = 1 - shrinkOffset / (maxExtent - minExtent); + double buttonsHeight = maxExtent - minExtent - shrinkOffset; + + buttonsOpacity = buttonsOpacity >= 0 ? buttonsOpacity : 0; + buttonsHeight = buttonsHeight >= 0 ? buttonsHeight : 0; + + return Stack( + fit: StackFit.expand, + overflow: Overflow.visible, + children: [ + Opacity( + opacity: buttonsOpacity, + child: Container( + height: buttonsHeight, + padding: EdgeInsets.only(left: 44, right: 44), + child: Row( + children: [ + Flexible( + child: actionButton( + context: context, + image: sendImage, + title: S.of(context).send, + route: Routes.send + ) + ), + Flexible( + child: actionButton( + context: context, + image: exchangeImage, + title: S.of(context).exchange, + route: Routes.exchange + ) + ), + Flexible( + child: actionButton( + context: context, + image: buyImage, + title: S.of(context).buy, + route: '' + ) + ) + ], + ), + ), + ), + Positioned( + top: buttonsHeight, + left: 0, + child: Container( + width: historyPanelWidth, + height: 66, + padding: EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 10), + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)), + color: PaletteDark.historyPanel, + ), + child: Stack( + alignment: Alignment.center, + children: [ + Text( + S.of(context).trade_history_title, + style: TextStyle( + fontSize: 20, + color: Colors.white + ), + ), + Positioned( + right: 0, + child: PopupMenuButton( + itemBuilder: (context) => [ + PopupMenuItem( + enabled: false, + value: -1, + child: Text(S.of(context).transactions, + style: TextStyle( + fontWeight: FontWeight.bold, + color: Theme.of(context).primaryTextTheme.caption.color))), + PopupMenuItem( + value: 0, + child: Observer( + builder: (_) => Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Text(S.of(context).incoming), + Checkbox( + value: actionListStore + .transactionFilterStore + .displayIncoming, + onChanged: (value) => + actionListStore + .transactionFilterStore + .toggleIncoming(), + ) + ]))), + PopupMenuItem( + value: 1, + child: Observer( + builder: (_) => Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Text(S.of(context).outgoing), + Checkbox( + value: actionListStore + .transactionFilterStore + .displayOutgoing, + onChanged: (value) => + actionListStore + .transactionFilterStore + .toggleOutgoing(), + ) + ]))), + PopupMenuItem( + value: 2, + child: + Text(S.of(context).transactions_by_date)), + PopupMenuDivider(), + PopupMenuItem( + enabled: false, + value: -1, + child: Text(S.of(context).trades, + style: TextStyle( + fontWeight: FontWeight.bold, + color: Theme.of(context).primaryTextTheme.caption.color))), + PopupMenuItem( + value: 3, + child: Observer( + builder: (_) => Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Text('XMR.TO'), + Checkbox( + value: actionListStore + .tradeFilterStore + .displayXMRTO, + onChanged: (value) => + actionListStore + .tradeFilterStore + .toggleDisplayExchange( + ExchangeProviderDescription + .xmrto), + ) + ]))), + PopupMenuItem( + value: 4, + child: Observer( + builder: (_) => Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Text('Change.NOW'), + Checkbox( + value: actionListStore + .tradeFilterStore + .displayChangeNow, + onChanged: (value) => + actionListStore + .tradeFilterStore + .toggleDisplayExchange( + ExchangeProviderDescription + .changeNow), + ) + ]))), + PopupMenuItem( + value: 5, + child: Observer( + builder: (_) => Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Text('MorphToken'), + Checkbox( + value: actionListStore + .tradeFilterStore + .displayMorphToken, + onChanged: (value) => + actionListStore + .tradeFilterStore + .toggleDisplayExchange( + ExchangeProviderDescription + .morphToken), + ) + ]))) + ], + child: filterButton, + onSelected: (item) async { + if (item == 2) { + 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) { + actionListStore.transactionFilterStore + .changeStartDate(picked.first); + actionListStore.transactionFilterStore + .changeEndDate(picked.last); + } + } + }, + ), + ) + ], + ), + ) + ) + ], + ); + } + + @override + double get maxExtent => 174; + + @override + double get minExtent => 66; + + @override + bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; + + Widget actionButton({ + BuildContext context, + @required Image image, + @required String title, + @required String route}) { + + return Container( + width: MediaQuery.of(context).size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + GestureDetector( + onTap: () { + if (route.isNotEmpty) { + Navigator.of(context, rootNavigator: true).pushNamed(route); + } + }, + child: Container( + height: 48, + width: 48, + alignment: Alignment.center, + decoration: BoxDecoration( + color: Colors.white, + shape: BoxShape.circle + ), + child: image, + ), + ), + Padding( + padding: EdgeInsets.only(top: 10), + child: Text( + title, + style: TextStyle( + fontSize: 16, + color: PaletteDark.walletCardText + ), + ), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/screens/dashboard/widgets/date_section_raw.dart b/lib/src/screens/dashboard/widgets/date_section_raw.dart index 595171cb4..4ec9382fd 100644 --- a/lib/src/screens/dashboard/widgets/date_section_raw.dart +++ b/lib/src/screens/dashboard/widgets/date_section_raw.dart @@ -36,6 +36,7 @@ class DateSectionRaw extends StatelessWidget { } return Container( + height: 36, padding: EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 20), alignment: Alignment.center, decoration: BoxDecoration( diff --git a/lib/src/screens/dashboard/widgets/trade_history_panel.dart b/lib/src/screens/dashboard/widgets/trade_history_panel.dart index b1716c9de..99035a6d9 100644 --- a/lib/src/screens/dashboard/widgets/trade_history_panel.dart +++ b/lib/src/screens/dashboard/widgets/trade_history_panel.dart @@ -1,5 +1,4 @@ import 'package:cake_wallet/src/domain/common/balance_display_mode.dart'; -import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart'; import 'package:cake_wallet/src/stores/action_list/action_list_store.dart'; import 'package:cake_wallet/src/stores/action_list/date_section_item.dart'; import 'package:cake_wallet/src/stores/action_list/trade_list_item.dart'; @@ -8,7 +7,6 @@ import 'package:cake_wallet/src/stores/settings/settings_store.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; -import 'package:cake_wallet/generated/i18n.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:intl/intl.dart'; import 'package:provider/provider.dart'; @@ -16,7 +14,7 @@ import 'package:cake_wallet/routes.dart'; import 'date_section_raw.dart'; import 'trade_row.dart'; import 'transaction_raw.dart'; -import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker; +import 'button_header.dart'; class TradeHistoryPanel extends StatefulWidget { @override @@ -58,7 +56,7 @@ class TradeHistoryPanelState extends State { child: AnimatedContainer( width: MediaQuery.of(context).size.width, height: panelHeight, - duration: Duration(milliseconds: 500), + duration: Duration(milliseconds: 1000), curve: Curves.fastOutSlowIn, child: CustomScrollView( slivers: [ @@ -75,7 +73,7 @@ class TradeHistoryPanelState extends State { : actionListStore.items; final itemsCount = items.length + 1; final symbol = settingsStore.fiatCurrency.toString(); - double freeSpaceHeight = MediaQuery.of(context).size.height - 496; // FIXME + double freeSpaceHeight = MediaQuery.of(context).size.height - 496; return SliverList( key: _listKey, @@ -95,12 +93,12 @@ class TradeHistoryPanelState extends State { final item = items[index]; if (item is DateSectionItem) { - freeSpaceHeight -= 32; // FIXME + freeSpaceHeight -= 38; return DateSectionRaw(date: item.date); } if (item is TransactionListItem) { - freeSpaceHeight -= 45; // FIXME + freeSpaceHeight -= 58; final transaction = item.transaction; final savedDisplayMode = settingsStore.balanceDisplayMode; final formattedAmount = @@ -125,7 +123,7 @@ class TradeHistoryPanelState extends State { } if (item is TradeListItem) { - freeSpaceHeight -= 45; // FIXME + freeSpaceHeight -= 58; final trade = item.trade; final savedDisplayMode = settingsStore.balanceDisplayMode; final formattedAmount = trade.amount != null @@ -159,291 +157,4 @@ class TradeHistoryPanelState extends State { ), ); } -} - -class ButtonHeader extends SliverPersistentHeaderDelegate { - final sendImage = Image.asset('assets/images/send.png'); - final exchangeImage = Image.asset('assets/images/exchange.png'); - final buyImage = Image.asset('assets/images/coins.png'); - final filterButton = Image.asset('assets/images/filter_button.png'); - - @override - Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { - final actionListStore = Provider.of(context); - final historyPanelWidth = MediaQuery.of(context).size.width; - - double buttonsOpacity = 1 - shrinkOffset / (maxExtent - minExtent); - double buttonsHeight = maxExtent - minExtent - shrinkOffset; - - buttonsOpacity = buttonsOpacity >= 0 ? buttonsOpacity : 0; - buttonsHeight = buttonsHeight >= 0 ? buttonsHeight : 0; - - return Stack( - fit: StackFit.expand, - overflow: Overflow.visible, - children: [ - Opacity( - opacity: buttonsOpacity, - child: Container( - height: buttonsHeight, - padding: EdgeInsets.only(left: 44, right: 44), - child: Row( - children: [ - Flexible( - child: actionButton( - context: context, - image: sendImage, - title: S.of(context).send, - route: Routes.send - ) - ), - Flexible( - child: actionButton( - context: context, - image: exchangeImage, - title: S.of(context).exchange, - route: Routes.exchange - ) - ), - Flexible( - child: actionButton( - context: context, - image: buyImage, - title: S.of(context).buy, - route: '' - ) - ) - ], - ), - ), - ), - Positioned( - top: buttonsHeight, - left: 0, - child: Container( - width: historyPanelWidth, - height: 66, - padding: EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 10), - decoration: BoxDecoration( - borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)), - color: PaletteDark.historyPanel, - ), - child: Stack( - alignment: Alignment.center, - children: [ - Text( - S.of(context).trade_history_title, - style: TextStyle( - fontSize: 20, - color: Colors.white - ), - ), - Positioned( - right: 0, - child: PopupMenuButton( - itemBuilder: (context) => [ - PopupMenuItem( - enabled: false, - value: -1, - child: Text(S.of(context).transactions, - style: TextStyle( - fontWeight: FontWeight.bold, - color: Theme.of(context).primaryTextTheme.caption.color))), - PopupMenuItem( - value: 0, - child: Observer( - builder: (_) => Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Text(S.of(context).incoming), - Checkbox( - value: actionListStore - .transactionFilterStore - .displayIncoming, - onChanged: (value) => - actionListStore - .transactionFilterStore - .toggleIncoming(), - ) - ]))), - PopupMenuItem( - value: 1, - child: Observer( - builder: (_) => Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Text(S.of(context).outgoing), - Checkbox( - value: actionListStore - .transactionFilterStore - .displayOutgoing, - onChanged: (value) => - actionListStore - .transactionFilterStore - .toggleOutgoing(), - ) - ]))), - PopupMenuItem( - value: 2, - child: - Text(S.of(context).transactions_by_date)), - PopupMenuDivider(), - PopupMenuItem( - enabled: false, - value: -1, - child: Text(S.of(context).trades, - style: TextStyle( - fontWeight: FontWeight.bold, - color: Theme.of(context).primaryTextTheme.caption.color))), - PopupMenuItem( - value: 3, - child: Observer( - builder: (_) => Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Text('XMR.TO'), - Checkbox( - value: actionListStore - .tradeFilterStore - .displayXMRTO, - onChanged: (value) => - actionListStore - .tradeFilterStore - .toggleDisplayExchange( - ExchangeProviderDescription - .xmrto), - ) - ]))), - PopupMenuItem( - value: 4, - child: Observer( - builder: (_) => Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Text('Change.NOW'), - Checkbox( - value: actionListStore - .tradeFilterStore - .displayChangeNow, - onChanged: (value) => - actionListStore - .tradeFilterStore - .toggleDisplayExchange( - ExchangeProviderDescription - .changeNow), - ) - ]))), - PopupMenuItem( - value: 5, - child: Observer( - builder: (_) => Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Text('MorphToken'), - Checkbox( - value: actionListStore - .tradeFilterStore - .displayMorphToken, - onChanged: (value) => - actionListStore - .tradeFilterStore - .toggleDisplayExchange( - ExchangeProviderDescription - .morphToken), - ) - ]))) - ], - child: filterButton, - onSelected: (item) async { - if (item == 2) { - 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) { - actionListStore.transactionFilterStore - .changeStartDate(picked.first); - actionListStore.transactionFilterStore - .changeEndDate(picked.last); - } - } - }, - ), - ) - ], - ), - ) - ) - ], - ); - } - - @override - double get maxExtent => 174; - - @override - double get minExtent => 66; - - @override - bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; - - Widget actionButton({ - BuildContext context, - @required Image image, - @required String title, - @required String route}) { - - return Container( - width: MediaQuery.of(context).size.width, - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - GestureDetector( - onTap: () { - if (route.isNotEmpty) { - Navigator.of(context, rootNavigator: true).pushNamed(route); - } - }, - child: Container( - height: 48, - width: 48, - alignment: Alignment.center, - decoration: BoxDecoration( - color: Colors.white, - shape: BoxShape.circle - ), - child: image, - ), - ), - Padding( - padding: EdgeInsets.only(top: 10), - child: Text( - title, - style: TextStyle( - fontSize: 16, - color: PaletteDark.walletCardText - ), - ), - ) - ], - ), - ); - } } \ No newline at end of file diff --git a/lib/src/screens/dashboard/widgets/trade_row.dart b/lib/src/screens/dashboard/widgets/trade_row.dart index e74fe5912..1ea5f098d 100644 --- a/lib/src/screens/dashboard/widgets/trade_row.dart +++ b/lib/src/screens/dashboard/widgets/trade_row.dart @@ -26,10 +26,11 @@ class TradeRow extends StatelessWidget { return InkWell( onTap: onTap, child: Container( + height: 56, decoration: BoxDecoration( color: PaletteDark.historyPanel, border: Border.all( - width: 0.5, + width: 1, color: PaletteDark.historyPanel ), ), diff --git a/lib/src/screens/dashboard/widgets/transaction_raw.dart b/lib/src/screens/dashboard/widgets/transaction_raw.dart index 0aa79b2c8..517318260 100644 --- a/lib/src/screens/dashboard/widgets/transaction_raw.dart +++ b/lib/src/screens/dashboard/widgets/transaction_raw.dart @@ -24,10 +24,11 @@ class TransactionRow extends StatelessWidget { return InkWell( onTap: onTap, child: Container( + height: 56, decoration: BoxDecoration( color: PaletteDark.historyPanel, border: Border.all( - width: 0.5, + width: 1, color: PaletteDark.historyPanel ), ),