Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-01-08 20:09:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #50 from cake-tech/CWA-200-implement-menu-screen

Browse source 
Cwa 200 implement menu screen
This commit is contained in:
Oleksandr Sobol 2020-05-01 22:25:44 +03:00 committed by GitHub
commit 89f8ff66b0
28 changed files with 291 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 873 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 667 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 685 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 793 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 830 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 551 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 906 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1,005 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 733 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 475 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 422 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 633 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 377 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 476 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 498 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 365 B

3
lib/palette.dart
View file

@ -87,4 +87,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);
}

8
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cake_wallet/palette.dart';
@ -24,7 +25,12 @@ class DashboardPage extends BasePage {
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () {},
onPressed: () async {
await showDialog<void>(
builder: (_) => MenuWidget(),
context: context
);
},
child: menuButton),
),
);

25
lib/src/screens/dashboard/wallet_menu.dart
View file

@ -10,12 +10,22 @@ class WalletMenu {
final List<String> 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<Image> 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;

264
lib/src/screens/dashboard/widgets/menu_widget.dart Normal file
View file

@ -0,0 +1,264 @@
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<MenuWidget> {
final moneroIcon = Image.asset('assets/images/monero.png');
final largeScreen = 731;
double menuWidth;
double screenWidth;
double screenHeight;
double opacity;
bool isDraw;
double headerHeight;
double tileHeight;
double fromTopEdge;
double fromBottomEdge;
@override
void initState() {
menuWidth = 0;
screenWidth = 0;
screenHeight = 0;
opacity = 0;
isDraw = false;
headerHeight = 120;
tileHeight = 75;
fromTopEdge = 50;
fromBottomEdge = 30;
super.initState();
WidgetsBinding.instance.addPostFrameCallback(afterLayout);
}
void afterLayout(dynamic _) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
setState(() {
menuWidth = screenWidth;
opacity = 1;
if (screenHeight > largeScreen) {
final scale = screenHeight / largeScreen;
tileHeight *= scale;
headerHeight *= scale;
fromTopEdge *= scale;
fromBottomEdge *= scale;
}
});
Timer(Duration(milliseconds: 350), () =>
setState(() => isDraw = true)
);
}
@override
Widget build(BuildContext context) {
final walletMenu = WalletMenu(context);
final walletStore = Provider.of<WalletStore>(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: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 24),
child: isDraw
? Container(
height: 60,
width: 4,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(2)),
color: PaletteDark.walletCardText
),
)
: Container(
height: 60,
width: 4,
)
),
SizedBox(width: 12),
Expanded(
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: headerHeight,
padding: EdgeInsets.only(
left: 24,
top: fromTopEdge,
right: 24,
bottom: fromBottomEdge),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(24)),
color: PaletteDark.menuHeader
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
moneroIcon,
SizedBox(width: 16),
Expanded(
child: Container(
height: 40,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
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: headerHeight,
padding: EdgeInsets.only(
left: 24,
right: 24,
top: fromBottomEdge,
bottom: fromTopEdge),
alignment: Alignment.topLeft,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
color: PaletteDark.menuList,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
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: tileHeight,
padding: EdgeInsets.only(left: 24, right: 24),
color: PaletteDark.menuList,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
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()
),
),
)
)
],
)
),
),
),
);
}
}