Add a basic popup menu implementation to stocks2

The popup menu is displayed in the wrong location with the wrong width, but it
does draw. I've also removed the checkbox because the flex container was
causing me trouble.  I'll add it back in a later CL.

R=ianh@google.com

Review URL: https://codereview.chromium.org/1166153002

examples/stocks2/lib/stock_app.dart

@@ -11,8 +11,8 @@ import 'package:sky/framework/components2/icon_button.dart';
 import 'package:sky/framework/components2/menu_divider.dart';
 import 'package:sky/framework/components2/menu_item.dart';
 import 'package:sky/framework/components2/input.dart';
-// import 'package:sky/framework/components2/modal_overlay.dart';
-// import 'package:sky/framework/components2/popup_menu.dart';
+import 'package:sky/framework/components2/modal_overlay.dart';
+import 'package:sky/framework/components2/popup_menu.dart';
 import 'package:sky/framework/components2/radio.dart';
 import 'package:sky/framework/components2/scaffold.dart';
 import 'package:sky/framework/fn2.dart';
@@ -21,7 +21,7 @@ import 'package:sky/framework/theme2/colors.dart' as colors;
 import 'stock_data.dart';
 import 'package:sky/framework/rendering/box.dart';
 import 'stock_list.dart';
-// import 'stock_menu.dart';
+import 'stock_menu.dart';
 
 import 'dart:async';
 import 'dart:sky' as sky;
@@ -77,22 +77,22 @@ class StocksApp extends App {
     });
   }
 
-  // PopupMenuController _menuController;
+  PopupMenuController _menuController;
 
   void _handleMenuShow(_) {
     setState(() {
-      // _menuController = new PopupMenuController();
-      // _menuController.open();
+      _menuController = new PopupMenuController();
+      _menuController.open();
     });
   }
 
   void _handleMenuHide(_) {
     setState(() {
-      // _menuController.close().then((_) {
-      //   setState(() {
-      //     _menuController = null;
-      //   });
-      // });
+      _menuController.close().then((_) {
+        setState(() {
+          _menuController = null;
+        });
+      });
     });
   }
 
@@ -187,15 +187,15 @@ class StocksApp extends App {
   }
 
   void addMenuToOverlays(List<UINode> overlays) {
-    // if (_menuController == null)
-    //   return;
-    // overlays.add(new ModalOverlay(
-    //   children: [new StockMenu(
-    //     controller: _menuController,
-    //     autorefresh: _autorefresh,
-    //     onAutorefreshChanged: _handleAutorefreshChanged
-    //   )],
-    //   onDismiss: _handleMenuHide));
+    if (_menuController == null)
+      return;
+    overlays.add(new ModalOverlay(
+      children: [new StockMenu(
+        controller: _menuController,
+        autorefresh: _autorefresh,
+        onAutorefreshChanged: _handleAutorefreshChanged
+      )],
+      onDismiss: _handleMenuHide));
   }
 
   UINode build() {

examples/stocks2/lib/stock_menu.dart

@@ -8,10 +8,10 @@ import 'package:sky/framework/components2/checkbox.dart';
 import 'package:sky/framework/theme/view_configuration.dart';
 
 class StockMenu extends Component {
-  static final Style _style = new Style('''
-    position: absolute;
-    right: 8px;
-    top: ${8 + kStatusBarHeight}px;''');
+  // static final Style _style = new Style('''
+  //   position: absolute;
+  //   right: 8px;
+  //   top: ${8 + kStatusBarHeight}px;''');
 
   PopupMenuController controller;
 
@@ -20,24 +20,20 @@ class StockMenu extends Component {
   final bool autorefresh;
   final ValueChanged onAutorefreshChanged;
 
-  static FlexBoxParentData _flex1 = new FlexBoxParentData()..flex = 1;
-
   UINode build() {
     var checkbox = new Checkbox(
       checked: this.autorefresh,
       onChanged: this.onAutorefreshChanged
     );
 
-    return new StyleNode(
-      new PopupMenu(
-        controller: controller,
-        items: [
-          [new Text('Add stock')],
-          [new Text('Remove stock')],
-          [new ParentDataNode(new Text('Autorefresh'), _flex1), checkbox],
-        ],
-        level: 4),
-        _style
+    return new PopupMenu(
+      controller: controller,
+      items: [
+        [new Text('Add stock')],
+        [new Text('Remove stock')],
+        // [new FlexExpandingChild(new Text('Autorefresh')), checkbox],
+      ],
+      level: 4
     );
   }
 }

sdk/lib/framework/components2/checkbox.dart

@@ -35,8 +35,8 @@ class Checkbox extends ButtonBase {
         child: new CustomPaint(
           callback: (sky.Canvas canvas) {
 
-            sky.Paint paint = new sky.Paint()..color = color;
-                                             ..isAntiAlias = true;
+            sky.Paint paint = new sky.Paint()..color = color
+                                             ..isAntiAlias = true
                                              ..strokeWidth = 2.0;
 
             // Draw the outer rrect

sdk/lib/framework/components2/modal_overlay.dart

@@ -5,12 +5,12 @@
 import '../fn2.dart';
 
 class ModalOverlay extends Component {
-  static final Style _style = new Style('''
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;''');
+  // static final Style _style = new Style('''
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   bottom: 0;
+  //   right: 0;''');
 
   List<UINode> children;
   GestureEventListener onDismiss;
@@ -19,9 +19,7 @@ class ModalOverlay extends Component {
 
   UINode build() {
     return new EventListenerNode(
-      new Container(
-        style: _style,
-        children: children),
+      new StackContainer(children: children),
       onGestureTap: onDismiss);
   }
 }

sdk/lib/framework/components2/popup_menu.dart

@@ -5,7 +5,7 @@
 import 'animated_component.dart';
 import '../animation/animated_value.dart';
 import '../fn2.dart';
-import '../theme/colors.dart';
+import '../theme2/colors.dart';
 import 'dart:async';
 import 'dart:math' as math;
 import 'material.dart';
@@ -50,24 +50,18 @@ class PopupMenuController {
 }
 
 class PopupMenu extends AnimatedComponent {
-  static final Style _style = new Style('''
-    border-radius: 2px;
-    padding: 8px 0;
-    box-sizing: border-box;
-    background-color: ${Grey[50]};''');
-
   List<List<UINode>> items;
   int level;
   PopupMenuController controller;
 
   double _position;
-  int _width;
-  int _height;
+  // int _width;
+  // int _height;
 
   PopupMenu({ Object key, this.controller, this.items, this.level })
       : super(key: key) {
     animateField(controller.position, #_position);
-    onDidMount(_measureSize);
+    // onDidMount(_measureSize);
   }
 
   double _opacityFor(int i) {
@@ -79,23 +73,23 @@ class PopupMenu extends AnimatedComponent {
     return math.max(0.0, math.min(1.0, (_position - start) / duration));
   }
 
-  String _inlineStyle() {
-    if (_position == null || _position == 1.0 ||
-        _height == null || _width == null)
-      return null;
-    return '''
-      opacity: ${math.min(1.0, _position * 3.0)};
-      width: ${math.min(_width, _width * (0.5 + _position * 2.0))}px;
-      height: ${math.min(_height, _height * _position * 1.5)}px;''';
-  }
-
-  void _measureSize() {
-    setState(() {
-      var root = getRoot();
-      _width = root.width.round();
-      _height = root.height.round();
-    });
-  }
+  // String _inlineStyle() {
+  //   if (_position == null || _position == 1.0 ||
+  //       _height == null || _width == null)
+  //     return null;
+  //   return '''
+  //     opacity: ${math.min(1.0, _position * 3.0)};
+  //     width: ${math.min(_width, _width * (0.5 + _position * 2.0))}px;
+  //     height: ${math.min(_height, _height * _position * 1.5)}px;''';
+  // }
+
+  // void _measureSize() {
+  //   setState(() {
+  //     var root = getRoot();
+  //     _width = root.width.round();
+  //     _height = root.height.round();
+  //   });
+  // }
 
   UINode build() {
     int i = 0;
@@ -106,9 +100,11 @@ class PopupMenu extends AnimatedComponent {
 
     return new Material(
       content: new Container(
-        style: _style,
-        inlineStyle: _inlineStyle(),
-        children: children
+        padding: const EdgeDims.all(8.0),
+        // border-radius: 2px
+        decoration: new BoxDecoration(backgroundColor: Grey[50]),
+        // inlineStyle: _inlineStyle(),
+        child: new BlockContainer(children: children)
       ),
       level: level);
   }

sdk/lib/framework/components2/popup_menu_item.dart

@@ -16,7 +16,7 @@ class PopupMenuItem extends Component {
       constraints: const BoxConstraints(minWidth: 112.0),
       padding: const EdgeDims.all(16.0),
       // TODO(abarth): opacity: opacity,
-      child: new InkWell(children: children)
+      child: new BlockContainer(children: children)
     );
   }
 }

sdk/lib/framework/fn2.dart

@@ -981,7 +981,7 @@ class Container extends Component {
       current = new SizedBox(desiredSize: desiredSize, child: current);
 
     if (constraints != null)
-      current = new ConstrainedBox(constraints: constraints);
+      current = new ConstrainedBox(constraints: constraints, child: current);
 
     if (margin != null)
       current = new Padding(padding: margin, child: current);