From 171ff643ef7ba77898eddcb707b516c8d8f3ba63 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Wed, 25 Mar 2015 10:43:12 -0700
Subject: [PATCH] Disentangle Material and InkSplash

Most of the elements that want to be Material (i.e., have a level and cast a
shadow) don't want to be InkWells (i.e., have an ink splash effect). This CL
disentangles these two components, fixing bugs in the Drawer and in the
PopupMenu. Separating these concepts also lets us use Material for the
ActionBar and the FloatingActionButton.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1037673002
---
 framework/components/action_bar.dart            |  9 +++++----
 framework/components/button.dart                |  4 +++-
 framework/components/drawer.dart                | 13 ++++++-------
 .../components/floating_action_button.dart      |  9 +++++----
 framework/components/material.dart              | 16 ++++------------
 framework/components/popup_menu.dart            | 17 ++++++++++-------
 6 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/framework/components/action_bar.dart b/framework/components/action_bar.dart
index 2abdc0d01e5..cf8bc6ff208 100644
--- a/framework/components/action_bar.dart
+++ b/framework/components/action_bar.dart
@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import '../fn.dart';
-import '../theme/shadows.dart';
 import '../theme/view-configuration.dart';
+import 'material.dart';
 
 class ActionBar extends Component {
   static final Style _style = new Style('''
@@ -13,8 +13,7 @@ class ActionBar extends Component {
     height: 56px;
     padding: 0 8px;
     transition: background-color 0.3s;
-    padding-top: ${kStatusBarHeight}px;
-    box-shadow: ${Shadow[2]};''');
+    padding-top: ${kStatusBarHeight}px;''');
 
   static Style _centerStyle = new Style('''
     padding-left: 24px;
@@ -37,6 +36,8 @@ class ActionBar extends Component {
     if (right != null)
       children.addAll(right);
 
-    return new Container(style: _style, children: children);
+    return new Material(
+      content: new Container(style: _style, children: children),
+      level: 2);
   }
 }
diff --git a/framework/components/button.dart b/framework/components/button.dart
index bcaa0ad4867..589253ab3d9 100644
--- a/framework/components/button.dart
+++ b/framework/components/button.dart
@@ -26,7 +26,9 @@ class Button extends Component {
 
   Node build() {
     return new StyleNode(
-      new Material(children: [content], level: level),
+      new Material(
+        content: new InkWell(children: [content]),
+        level: level),
       _style);
   }
 }
diff --git a/framework/components/drawer.dart b/framework/components/drawer.dart
index 2c3cb3aabc0..29e94ca48a7 100644
--- a/framework/components/drawer.dart
+++ b/framework/components/drawer.dart
@@ -126,7 +126,6 @@ class Drawer extends AnimatedComponent {
 
     var mask = new EventTarget(
       new Container(
-        key: 'Mask',
         style: _maskStyle,
         inlineStyle: maskInlineStyle
       ),
@@ -134,13 +133,13 @@ class Drawer extends AnimatedComponent {
       onGestureFlingStart: controller.handleFlingStart
     );
 
-    Node content = new StyleNode(
-      new Material(
-        key: 'Content',
+    Material content = new Material(
+      content: new Container(
+        style: _contentStyle,
         inlineStyle: contentInlineStyle,
-        children: children,
-        level: level),
-      _contentStyle);
+        children: children
+      ),
+      level: level);
 
     return new EventTarget(
       new Container(
diff --git a/framework/components/floating_action_button.dart b/framework/components/floating_action_button.dart
index 0fe36f3e466..3d548d3ba84 100644
--- a/framework/components/floating_action_button.dart
+++ b/framework/components/floating_action_button.dart
@@ -41,9 +41,10 @@ class FloatingActionButton extends Component {
     if (content != null)
       children.add(content);
 
-    return new Container(
-      style: level > 0 ? _style.extend(Material.shadowStyle[level]) : _style,
-      children: [new StyleNode(new InkWell(children: children), _clipStyle)]
-    );
+    return new Material(
+      content: new Container(
+        style: _style,
+        children: [new StyleNode(new InkWell(children: children), _clipStyle)]),
+      level: level);
   }
 }
diff --git a/framework/components/material.dart b/framework/components/material.dart
index 38eeb583579..88ba6e30be4 100644
--- a/framework/components/material.dart
+++ b/framework/components/material.dart
@@ -7,7 +7,7 @@ import '../theme/shadows.dart';
 import 'ink_well.dart';
 
 class Material extends Component {
-  static final List<Style> shadowStyle = [
+  static final List<Style> _shadowStyle = [
     null,
     new Style('box-shadow: ${Shadow[1]}'),
     new Style('box-shadow: ${Shadow[2]}'),
@@ -16,20 +16,12 @@ class Material extends Component {
     new Style('box-shadow: ${Shadow[5]}'),
   ];
 
-  String inlineStyle;
-  List<Node> children;
+  Node content;
   int level;
 
-  Material({
-    Object key,
-    this.inlineStyle,
-    this.children,
-    this.level: 0
-  }) : super(key: key);
+  Material({ Object key, this.content, this.level: 0 }) : super(key: key);
 
   Node build() {
-    return new StyleNode(
-      new InkWell(inlineStyle: inlineStyle, children: children),
-      shadowStyle[level]);
+    return new StyleNode(content, _shadowStyle[level]);
   }
 }
diff --git a/framework/components/popup_menu.dart b/framework/components/popup_menu.dart
index d5a2e89939d..9b42bc50a68 100644
--- a/framework/components/popup_menu.dart
+++ b/framework/components/popup_menu.dart
@@ -14,7 +14,8 @@ import 'material.dart';
 import 'popup_menu_item.dart';
 
 const double _kMenuOpenDuration = 300.0;
-const double _kMenuCloneDuration = 200.0;
+const double _kMenuCloseDuration = 200.0;
+const double _kMenuCloseDelay = 100.0;
 
 class PopupMenuController {
   bool isOpen = false;
@@ -26,7 +27,8 @@ class PopupMenuController {
   }
 
   Future close() {
-    return position.animateTo(0.0, _kMenuCloneDuration).then((_) {
+    return position.animateTo(0.0, _kMenuCloseDuration,
+        initialDelay: _kMenuCloseDelay).then((_) {
       isOpen = false;
     });
   }
@@ -87,11 +89,12 @@ class PopupMenu extends AnimatedComponent {
       return new PopupMenuItem(key: i++, children: item, opacity: opacity);
     }));
 
-    return new StyleNode(
-      new Material(
+    return new Material(
+      content: new Container(
+        style: _style,
         inlineStyle: _inlineStyle(),
-        children: children,
-        level: level),
-      _style);
+        children: children
+      ),
+      level: level);
   }
 }