From f6d53459aaeac25b8ec81e409d90eca69bb2ff03 Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Wed, 18 Mar 2015 15:21:48 -0700 Subject: [PATCH] Improve the openning animation for PopupMenu We're now doing all of the elements of the popup menu entrance animation from the material design spec, but our timing and curves might not be exactly right yet. I haven't started on the exit animation. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1017193004 --- examples/stocks-fn/lib/stock_app.dart | 19 ++++++++++++------- examples/stocks-fn/lib/stock_menu.dart | 7 ++++--- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/examples/stocks-fn/lib/stock_app.dart b/examples/stocks-fn/lib/stock_app.dart index 14f2e6a741..b0928ddb71 100644 --- a/examples/stocks-fn/lib/stock_app.dart +++ b/examples/stocks-fn/lib/stock_app.dart @@ -10,6 +10,7 @@ import 'package:sky/framework/components/icon.dart'; import 'package:sky/framework/components/input.dart'; import 'package:sky/framework/components/menu_divider.dart'; import 'package:sky/framework/components/menu_item.dart'; +import 'package:sky/framework/components/popup_menu.dart'; import 'package:sky/framework/fn.dart'; import 'package:sky/framework/theme/typography.dart' as typography; import 'stock_data.dart'; @@ -18,7 +19,8 @@ import 'stock_menu.dart'; class StocksApp extends App { - DrawerController _DrawerController = new DrawerController(); + DrawerController _drawerController = new DrawerController(); + PopupMenuController _menuController = new PopupMenuController(); static Style _style = new Style(''' display: flex; @@ -56,7 +58,7 @@ class StocksApp extends App { void _handleMenuClick(_) { setState(() { - _isShowingMenu = !_isShowingMenu; + _menuController.open(); }); } @@ -68,7 +70,7 @@ class StocksApp extends App { Node build() { var drawer = new Drawer( - controller: _DrawerController, + controller: _drawerController, level: 3, children: [ new DrawerHeader( @@ -112,7 +114,7 @@ class StocksApp extends App { new Icon(key: 'menu', style: _iconStyle, size: 24, type: 'navigation/menu_white') - ..events.listen('gesturetap', _DrawerController.toggle), + ..events.listen('gesturetap', _drawerController.toggle), new Container( style: _titleStyle, children: [title] @@ -143,10 +145,13 @@ class StocksApp extends App { drawer ]; - if (_isShowingMenu) { - children.add(new StockMenu()..events.listen('gesturetap', (_) { + if (_menuController.isOpen) { + children.add(new StockMenu(controller: _menuController) + ..events.listen('gesturetap', (_) { + // TODO(abarth): We should close the menu when you tap away from the + // menu rather than when you tap on the menu. setState(() { - _isShowingMenu = false; + _menuController.close(); }); })); } diff --git a/examples/stocks-fn/lib/stock_menu.dart b/examples/stocks-fn/lib/stock_menu.dart index 1f68099210..65db00d3d9 100644 --- a/examples/stocks-fn/lib/stock_menu.dart +++ b/examples/stocks-fn/lib/stock_menu.dart @@ -5,8 +5,6 @@ import 'package:sky/framework/components/popup_menu.dart'; import 'package:sky/framework/fn.dart'; import 'package:sky/framework/theme/view-configuration.dart'; -import 'stock_arrow.dart'; -import 'stock_data.dart'; class StockMenu extends Component { static final Style _style = new Style(''' @@ -14,13 +12,16 @@ class StockMenu extends Component { right: 8px; top: ${8 + kStatusBarHeight}px;'''); - StockMenu({Object key}) : super(key: key); + PopupMenuController controller; + + StockMenu({Object key, this.controller}) : super(key: key); Node build() { return new Container( style: _style, children: [ new PopupMenu( + controller: controller, items: [ [new Text('Add stock')], [new Text('Remove stock')],