From 707968b1db7425fc3ebbcad3b503fde6fe2a3683 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 +++++++++++++------------
 framework/components/modal_overlay.dart | 27 ++++++++++++++++
 2 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 framework/components/modal_overlay.dart

diff --git a/examples/stocks-fn/lib/stock_app.dart b/examples/stocks-fn/lib/stock_app.dart
index 8eacdc827fb..8b6ea059cb3 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(),
diff --git a/framework/components/modal_overlay.dart b/framework/components/modal_overlay.dart
new file mode 100644
index 00000000000..95854f63f71
--- /dev/null
+++ b/framework/components/modal_overlay.dart
@@ -0,0 +1,27 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../fn.dart';
+
+class ModalOverlay extends Component {
+  static final Style _style = new Style('''
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;''');
+
+  List<Node> children;
+  GestureEventListener onDismiss;
+
+  ModalOverlay({ Object key, this.children, this.onDismiss }) : super(key: key);
+
+  Node build() {
+    return new EventTarget(
+      new Container(
+        style: _style,
+        children: children),
+      onGestureTap: onDismiss);
+  }
+}