From d47ecb8bc5b54925f2bdb5955e1d889af6de33e7 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Wed, 25 Mar 2015 10:43:35 -0700
Subject: [PATCH] Menu in StocksApp should dismiss when tapping elsewhere

When the StocksApp menu is showing, the user shouldn't be able to interact with
the rest of the app. Instead, taps outside the menu should dismiss the menu.

This CL makes that happen by adding a ModalOverlay on top of the app. We might
want to do something fancier in the future using event delegation, but this
works for now.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1031093002
---
 examples/stocks-fn/lib/stock_app.dart | 43 ++++++++++++++-------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/examples/stocks-fn/lib/stock_app.dart b/examples/stocks-fn/lib/stock_app.dart
index 8eacdc827f..8b6ea059cb 100644
--- a/examples/stocks-fn/lib/stock_app.dart
+++ b/examples/stocks-fn/lib/stock_app.dart
@@ -11,6 +11,7 @@ import 'package:sky/framework/components/icon_button.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/modal_overlay.dart';
 import 'package:sky/framework/components/popup_menu.dart';
 import 'package:sky/framework/components/scaffold.dart';
 import 'package:sky/framework/debug/tracing.dart';
@@ -61,19 +62,29 @@ class StocksApp extends App {
     });
   }
 
-  void _handleSearchQueryChanged(query) {
+  void _handleSearchQueryChanged(String query) {
     setState(() {
       _searchQuery = query;
     });
   }
 
-  void _handleMenuClick(_) {
+  void _handleMenuShow(_) {
     setState(() {
       _menuController = new PopupMenuController();
       _menuController.open();
     });
   }
 
+  void _handleMenuHide(_) {
+    setState(() {
+      _menuController.close().then((_) {
+        setState(() {
+          _menuController = null;
+        });
+      });
+    });
+  }
+
   Drawer buildDrawer() {
     return new Drawer(
       controller: _drawerController,
@@ -116,7 +127,7 @@ class StocksApp extends App {
             onGestureTap: _handleSearchBegin),
           new IconButton(
             icon: 'navigation/more_vert_white',
-            onGestureTap: _handleMenuClick)
+            onGestureTap: _handleMenuShow)
         ]),
       _actionBarStyle);
   }
@@ -135,25 +146,17 @@ class StocksApp extends App {
       _searchBarStyle);
   }
 
+  void addMenuToOverlays(List<Node> overlays) {
+    if (_menuController == null)
+      return;
+    overlays.add(new ModalOverlay(
+      children: [new StockMenu(controller: _menuController)],
+      onDismiss: _handleMenuHide));
+  }
+
   Node build() {
     List<Node> overlays = [];
-
-    if (_menuController != null) {
-      overlays.add(new EventTarget(
-        new StockMenu(controller: _menuController),
-        onGestureTap: (_) {
-          // TODO(abarth): We should close the menu when you tap away from the
-          // menu rather than when you tap on the menu.
-          setState(() {
-            _menuController.close().then((_) {
-              setState(() {
-                _menuController = null;
-              });
-            });
-          });
-        }
-      ));
-    }
+    addMenuToOverlays(overlays);
 
     return new Scaffold(
       header: _isSearching ? buildSearchBar() : buildActionBar(),