diff --git a/assets/images/2.0x/eye.png b/assets/images/2.0x/eye.png new file mode 100644 index 000000000..4389fb7e4 Binary files /dev/null and b/assets/images/2.0x/eye.png differ diff --git a/assets/images/2.0x/key.png b/assets/images/2.0x/key.png new file mode 100644 index 000000000..439ef2f2e Binary files /dev/null and b/assets/images/2.0x/key.png differ diff --git a/assets/images/2.0x/monero.png b/assets/images/2.0x/monero.png new file mode 100644 index 000000000..01b0d0a96 Binary files /dev/null and b/assets/images/2.0x/monero.png differ diff --git a/assets/images/2.0x/nodes.png b/assets/images/2.0x/nodes.png new file mode 100644 index 000000000..4fcc89960 Binary files /dev/null and b/assets/images/2.0x/nodes.png differ diff --git a/assets/images/2.0x/open_book.png b/assets/images/2.0x/open_book.png new file mode 100644 index 000000000..84c2428ce Binary files /dev/null and b/assets/images/2.0x/open_book.png differ diff --git a/assets/images/2.0x/reconnect.png b/assets/images/2.0x/reconnect.png new file mode 100644 index 000000000..dda61e316 Binary files /dev/null and b/assets/images/2.0x/reconnect.png differ diff --git a/assets/images/2.0x/settings.png b/assets/images/2.0x/settings.png new file mode 100644 index 000000000..53918cb0a Binary files /dev/null and b/assets/images/2.0x/settings.png differ diff --git a/assets/images/2.0x/wallet.png b/assets/images/2.0x/wallet.png new file mode 100644 index 000000000..ce150f587 Binary files /dev/null and b/assets/images/2.0x/wallet.png differ diff --git a/assets/images/3.0x/eye.png b/assets/images/3.0x/eye.png new file mode 100644 index 000000000..4a5fb12b1 Binary files /dev/null and b/assets/images/3.0x/eye.png differ diff --git a/assets/images/3.0x/key.png b/assets/images/3.0x/key.png new file mode 100644 index 000000000..f09db4efd Binary files /dev/null and b/assets/images/3.0x/key.png differ diff --git a/assets/images/3.0x/monero.png b/assets/images/3.0x/monero.png new file mode 100644 index 000000000..94eed5046 Binary files /dev/null and b/assets/images/3.0x/monero.png differ diff --git a/assets/images/3.0x/nodes.png b/assets/images/3.0x/nodes.png new file mode 100644 index 000000000..29caea111 Binary files /dev/null and b/assets/images/3.0x/nodes.png differ diff --git a/assets/images/3.0x/open_book.png b/assets/images/3.0x/open_book.png new file mode 100644 index 000000000..3e41ebc25 Binary files /dev/null and b/assets/images/3.0x/open_book.png differ diff --git a/assets/images/3.0x/reconnect.png b/assets/images/3.0x/reconnect.png new file mode 100644 index 000000000..2aab6ec12 Binary files /dev/null and b/assets/images/3.0x/reconnect.png differ diff --git a/assets/images/3.0x/settings.png b/assets/images/3.0x/settings.png new file mode 100644 index 000000000..b6cfb5b08 Binary files /dev/null and b/assets/images/3.0x/settings.png differ diff --git a/assets/images/3.0x/wallet.png b/assets/images/3.0x/wallet.png new file mode 100644 index 000000000..afc427964 Binary files /dev/null and b/assets/images/3.0x/wallet.png differ diff --git a/assets/images/eye.png b/assets/images/eye.png new file mode 100644 index 000000000..05340553d Binary files /dev/null and b/assets/images/eye.png differ diff --git a/assets/images/key.png b/assets/images/key.png new file mode 100644 index 000000000..0fb694f8d Binary files /dev/null and b/assets/images/key.png differ diff --git a/assets/images/monero.png b/assets/images/monero.png new file mode 100644 index 000000000..1f9781814 Binary files /dev/null and b/assets/images/monero.png differ diff --git a/assets/images/nodes.png b/assets/images/nodes.png new file mode 100644 index 000000000..1f5df2705 Binary files /dev/null and b/assets/images/nodes.png differ diff --git a/assets/images/open_book.png b/assets/images/open_book.png new file mode 100644 index 000000000..5ec7aac78 Binary files /dev/null and b/assets/images/open_book.png differ diff --git a/assets/images/reconnect.png b/assets/images/reconnect.png new file mode 100644 index 000000000..42639ad52 Binary files /dev/null and b/assets/images/reconnect.png differ diff --git a/assets/images/settings.png b/assets/images/settings.png new file mode 100644 index 000000000..dbfee77ec Binary files /dev/null and b/assets/images/settings.png differ diff --git a/assets/images/wallet.png b/assets/images/wallet.png new file mode 100644 index 000000000..dff4cc163 Binary files /dev/null and b/assets/images/wallet.png differ diff --git a/lib/palette.dart b/lib/palette.dart index ce7d9e28b..8e08253f8 100644 --- a/lib/palette.dart +++ b/lib/palette.dart @@ -85,4 +85,7 @@ class PaletteDark { static const Color historyPanel = Color.fromRGBO(33, 43, 73, 1.0); static const Color historyPanelText = Color.fromRGBO(91, 112, 146, 1.0); static const Color historyPanelButton = Color.fromRGBO(39, 53, 96, 1.0); + static const Color menuHeader = Color.fromRGBO(41, 52, 84, 1.0); + static const Color menuList = Color.fromRGBO(48, 59, 95, 1.0); + static const Color menuDivider = Color.fromRGBO(48, 59, 95, 1.0); } \ No newline at end of file diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 0a4e57a15..792097214 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -4,6 +4,7 @@ import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart'; +import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart'; class DashboardPage extends BasePage { final _bodyKey = GlobalKey(); @@ -52,7 +53,10 @@ class DashboardPageBodyState extends State { highlightColor: Colors.transparent, splashColor: Colors.transparent, padding: EdgeInsets.all(0), - onPressed: () {}, + onPressed: () => showDialog( + builder: (_) => MenuWidget(), + context: context + ), child: menuButton), ), ), diff --git a/lib/src/screens/dashboard/wallet_menu.dart b/lib/src/screens/dashboard/wallet_menu.dart index 1e48ee325..ecc80e700 100644 --- a/lib/src/screens/dashboard/wallet_menu.dart +++ b/lib/src/screens/dashboard/wallet_menu.dart @@ -10,12 +10,22 @@ class WalletMenu { final List items = [ S.current.reconnect, - S.current.rescan, S.current.wallets, + S.current.nodes, S.current.show_seed, S.current.show_keys, - S.current.accounts, - S.current.address_book_menu + S.current.address_book_menu, + S.current.settings_title + ]; + + final List images = [ + Image.asset('assets/images/reconnect.png'), + Image.asset('assets/images/wallet.png'), + Image.asset('assets/images/nodes.png'), + Image.asset('assets/images/eye.png'), + Image.asset('assets/images/key.png'), + Image.asset('assets/images/open_book.png'), + Image.asset('assets/images/settings.png'), ]; final BuildContext context; @@ -26,11 +36,10 @@ class WalletMenu { _presentReconnectAlert(context); break; case 1: - Navigator.of(context).pushNamed(Routes.rescan); + Navigator.of(context).pushNamed(Routes.walletList); break; case 2: - Navigator.of(context).pushNamed(Routes.walletList); - + // FIXME: apply Nodes break; case 3: Navigator.of(context).pushNamed(Routes.auth, @@ -49,10 +58,10 @@ class WalletMenu { : null); break; case 5: - Navigator.of(context).pushNamed(Routes.accountList); + Navigator.of(context).pushNamed(Routes.addressBook); break; case 6: - Navigator.of(context).pushNamed(Routes.addressBook); + Navigator.of(context).pushNamed(Routes.settings); break; default: break; diff --git a/lib/src/screens/dashboard/widgets/menu_widget.dart b/lib/src/screens/dashboard/widgets/menu_widget.dart new file mode 100644 index 000000000..a37e505d2 --- /dev/null +++ b/lib/src/screens/dashboard/widgets/menu_widget.dart @@ -0,0 +1,205 @@ +import 'dart:async'; +import 'dart:ui'; +import 'package:flutter/material.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart'; +import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; +import 'package:provider/provider.dart'; + +class MenuWidget extends StatefulWidget { + @override + MenuWidgetState createState() => MenuWidgetState(); +} + +class MenuWidgetState extends State { + final moneroIcon = Image.asset('assets/images/monero.png'); + double menuWidth; + double screenWidth; + double opacity; + bool isDraw; + + @override + void initState() { + menuWidth = 0; + screenWidth = 0; + opacity = 0; + isDraw = false; + super.initState(); + WidgetsBinding.instance.addPostFrameCallback(afterLayout); + } + + void afterLayout(dynamic _) { + screenWidth = MediaQuery.of(context).size.width; + setState(() { + menuWidth = screenWidth; + opacity = 1; + }); + Timer(Duration(milliseconds: 350), () => + setState(() => isDraw = true) + ); + } + + @override + Widget build(BuildContext context) { + final walletMenu = WalletMenu(context); + final walletStore = Provider.of(context); + final itemCount = walletMenu.items.length; + + return GestureDetector( + onTap: () => Navigator.of(context).pop(), + child: Container( + color: Colors.transparent, + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), + child: Container( + decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)), + child: Padding( + padding: EdgeInsets.only(left: 40), + child: GestureDetector( + onTap: () => null, + child: Container( + width: double.infinity, + height: double.infinity, + alignment: Alignment.centerRight, + child: AnimatedContainer( + alignment: Alignment.centerLeft, + width: menuWidth, + height: double.infinity, + duration: Duration(milliseconds: 500), + curve: Curves.fastOutSlowIn, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)), + color: PaletteDark.menuList.withOpacity(opacity) + ), + child: isDraw + ? ListView.separated( + itemBuilder: (_, index) { + + if (index == 0) { + return Container( + height: 144, + padding: EdgeInsets.only(left: 24, top: 69, right: 24, bottom: 35), + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(24)), + color: PaletteDark.menuHeader + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + moneroIcon, + SizedBox(width: 16), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + walletStore.name, + style: TextStyle( + color: Colors.white, + decoration: TextDecoration.none, + fontFamily: 'Lato', + fontSize: 20, + fontWeight: FontWeight.bold + ), + ), + Text( + walletStore.account.label, + style: TextStyle( + color: PaletteDark.walletCardText, + decoration: TextDecoration.none, + fontFamily: 'Lato', + fontSize: 12 + ), + ) + ], + ) + ) + ], + ), + ); + } + + index -= 1; + final item = walletMenu.items[index]; + final image = walletMenu.images[index] ?? Offstage(); + + return GestureDetector( + onTap: () { + Navigator.of(context).pop(); + walletMenu.action(index); + }, + child: index == itemCount - 1 + ? Container( + height: 144, + padding: EdgeInsets.only(left: 24, right: 24, top: 35, bottom: 69), + alignment: Alignment.topLeft, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)), + color: PaletteDark.menuList, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + image, + SizedBox(width: 16), + Expanded( + child: Text( + item, + style: TextStyle( + decoration: TextDecoration.none, + color: Colors.white, + fontFamily: 'Lato', + fontSize: 20, + fontWeight: FontWeight.bold + ), + ) + ) + ], + ), + ) + : Container( + height: 91, + padding: EdgeInsets.only(left: 24, right: 24), + color: PaletteDark.menuList, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + image, + SizedBox(width: 16), + Expanded( + child: Text( + item, + style: TextStyle( + decoration: TextDecoration.none, + color: Colors.white, + fontFamily: 'Lato', + fontSize: 20, + fontWeight: FontWeight.bold + ), + ) + ) + ], + ), + ), + ); + }, + separatorBuilder: (_, index) => + Divider( + height: 1, + color: PaletteDark.walletCardText, + ), + itemCount: itemCount + 1) + : Offstage() + ), + ), + ) + ), + ), + ), + ), + ); + } +} \ No newline at end of file