Make the popup menu animation correct

This CL wires up the opacity of the popup menu items and teaches the popup menu
how to draw its background at the right size.

R=ianh@google.com

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

examples/stocks2/lib/stock_arrow.dart

@@ -32,12 +32,12 @@ class StockArrow extends Component {
   UINode build() {
     // TODO(jackson): This should change colors with the theme
     Color color = _colorForPercentChange(percentChange);
-    const double size = 40.0;
-    var arrow = new CustomPaint(callback: (sky.Canvas canvas) {
+    const double kSize = 40.0;
+    var arrow = new CustomPaint(callback: (sky.Canvas canvas, Size size) {
       Paint paint = new Paint()..color = color;
       paint.strokeWidth = 1.0;
       var padding = paint.strokeWidth * 3.0;
-      var r = size / 2.0 - padding;
+      var r = kSize / 2.0 - padding;
       canvas.save();
       canvas.translate(padding, padding);
 
@@ -68,8 +68,8 @@ class StockArrow extends Component {
 
     return new Container(
         child: arrow,
-        width: size,
-        height: size,
+        width: kSize,
+        height: kSize,
         margin: const EdgeDims.symmetric(horizontal: 5.0));
   }
 

sdk/lib/framework/components2/checkbox.dart

@@ -32,23 +32,23 @@ class Checkbox extends ButtonBase {
   UINode buildContent() {
     // TODO(jackson): This should change colors with the theme
     sky.Color color = highlight ? colors.Purple[500] : const sky.Color(0x8A000000);
-    const double edgeSize = 20.0;
-    const double edgeRadius = 1.0;
+    const double kEdgeSize = 20.0;
+    const double kEdgeRadius = 1.0;
     return new EventListenerNode(
       new Container(
         margin: const EdgeDims.symmetric(horizontal: 5.0),
-        width: edgeSize + 2.0,
-        height: edgeSize + 2.0,
+        width: kEdgeSize + 2.0,
+        height: kEdgeSize + 2.0,
         child: new CustomPaint(
-          callback: (sky.Canvas canvas) {
+          callback: (sky.Canvas canvas, Size size) {
 
             sky.Paint paint = new sky.Paint()..color = color
                                              ..strokeWidth = 2.0;
 
             // Draw the outer rrect
             paint.setStyle(checked ? sky.PaintingStyle.strokeAndFill : sky.PaintingStyle.stroke);
-            sky.Rect rect = new sky.Rect.fromLTRB(0.0, 0.0, edgeSize, edgeSize);
-            sky.RRect rrect = new sky.RRect()..setRectXY(rect, edgeRadius, edgeRadius);
+            sky.Rect rect = new sky.Rect.fromLTRB(0.0, 0.0, kEdgeSize, kEdgeSize);
+            sky.RRect rrect = new sky.RRect()..setRectXY(rect, kEdgeRadius, kEdgeRadius);
             canvas.drawRRect(rrect, paint);
 
             // Draw the inner check
@@ -57,9 +57,9 @@ class Checkbox extends ButtonBase {
               paint.color = const sky.Color(0xFFFFFFFF);
               paint.setStyle(sky.PaintingStyle.stroke);
               sky.Path path = new sky.Path();
-              path.moveTo(edgeSize * 0.2, edgeSize * 0.5);
-              path.lineTo(edgeSize * 0.4, edgeSize * 0.7);
-              path.lineTo(edgeSize * 0.8, edgeSize * 0.3);
+              path.moveTo(kEdgeSize * 0.2, kEdgeSize * 0.5);
+              path.lineTo(kEdgeSize * 0.4, kEdgeSize * 0.7);
+              path.lineTo(kEdgeSize * 0.8, kEdgeSize * 0.3);
               canvas.drawPath(path, paint);
             }
           }

sdk/lib/framework/components2/floating_action_button.dart

@@ -30,7 +30,7 @@ class FloatingActionButton extends Component {
 
     return new Material(
       content: new CustomPaint(
-        callback: (sky.Canvas canvas) {
+        callback: (sky.Canvas canvas, Size size) {
           const double radius = _kSize / 2.0;
           sky.Paint paint = new sky.Paint()..color = Red[500];
           var builder = new ShadowDrawLooperBuilder()

sdk/lib/framework/components2/popup_menu.dart

@@ -2,13 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:async';
+import 'dart:math' as math;
+import 'dart:sky' as sky;
+
 import '../animation/animated_value.dart';
 import '../fn2.dart';
+import '../painting/box_painter.dart';
 import '../theme2/colors.dart';
 import '../theme2/shadows.dart';
 import 'animated_component.dart';
-import 'dart:async';
-import 'dart:math' as math;
 import 'material.dart';
 import 'popup_menu_item.dart';
 
@@ -54,6 +57,11 @@ class PopupMenu extends AnimatedComponent {
 
   PopupMenu({ Object key, this.controller, this.items, this.level })
       : super(key: key) {
+    _painter = new BoxPainter(new BoxDecoration(
+      backgroundColor: Grey[50],
+      borderRadius: 2.0,
+      boxShadow: Shadow[level]));
+
     animate(controller.position, (double value) {
       _position = value;
     });
@@ -67,45 +75,22 @@ class PopupMenu extends AnimatedComponent {
     controller = source.controller;
     items = source.items;
     level = source.level;
+    _painter = source._painter;
     super.syncFields(source);
   }
 
   double _position;
-  // int _width;
-  // int _height;
+  BoxPainter _painter;
 
   double _opacityFor(int i) {
     if (_position == null || _position == 1.0)
-      return null;
+      return 1.0;
     double unit = 1.0 / items.length;
     double duration = 1.5 * unit;
     double start = i * unit;
     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 didMount() {
-  //   _measureSize();
-  //   super.didMount();
-  // }
-
-  // void _measureSize() {
-  //   setState(() {
-  //     var root = getRoot();
-  //     _width = root.width.round();
-  //     _height = root.height.round();
-  //   });
-  // }
-
   UINode build() {
     int i = 0;
     List<UINode> children = new List.from(items.map((List<UINode> item) {
@@ -113,17 +98,19 @@ class PopupMenu extends AnimatedComponent {
       return new PopupMenuItem(key: i++, children: item, opacity: opacity);
     }));
 
-    // inlineStyle: _inlineStyle(),
     return new Opacity(
       opacity: math.min(1.0, _position * 3.0),
       child: new ShrinkWrapWidth(
-        child: new Container(
-          padding: const EdgeDims.all(8.0),
-          decoration: new BoxDecoration(
-            backgroundColor: Grey[50],
-            borderRadius: 2.0,
-            boxShadow: Shadow[level]),
-          child: new Block(children)
+        child: new CustomPaint(
+          callback: (sky.Canvas canvas, Size size) {
+            double width = math.min(size.width, size.width * (0.5 + _position * 2.0));
+            double height = math.min(size.height, size.height * _position * 1.5);
+            _painter.paint(canvas, new Rect.fromLTRB(size.width - width, 0.0, width, height));
+          },
+          child: new Container(
+            padding: const EdgeDims.all(8.0),
+            child: new Block(children)
+          )
         )
       )
     );

sdk/lib/framework/components2/popup_menu_item.dart

@@ -12,11 +12,15 @@ class PopupMenuItem extends Component {
   final double opacity;
 
   UINode build() {
-    return new Container(
-      constraints: const BoxConstraints(minWidth: 112.0),
-      padding: const EdgeDims.all(16.0),
-      // TODO(abarth): opacity: opacity,
-      child: new Flex(children)
+    return new Opacity(
+      opacity: opacity,
+      child: new InkWell(
+        children: [new Container(
+          constraints: const BoxConstraints(minWidth: 112.0),
+          padding: const EdgeDims.all(16.0),
+          child: new Flex(children)
+        )]
+      )
     );
   }
 }

sdk/lib/framework/components2/radio.dart

@@ -35,28 +35,28 @@ class Radio extends ButtonBase {
   UINode buildContent() {
     // TODO(jackson): This should change colors with the theme
     Color color = highlight ? colors.Purple[500] : const Color(0x8A000000);
-    const double diameter = 16.0;
-    const double outerRadius = diameter / 2;
-    const double innerRadius = 5.0;
+    const double kDiameter = 16.0;
+    const double kOuterRadius = kDiameter / 2;
+    const double kInnerRadius = 5.0;
     return new EventListenerNode(
       new Container(
         margin: const EdgeDims.symmetric(horizontal: 5.0),
-        width: diameter,
-        height: diameter,
+        width: kDiameter,
+        height: kDiameter,
         child: new CustomPaint(
-          callback: (sky.Canvas canvas) {
+          callback: (sky.Canvas canvas, Size size) {
 
             Paint paint = new Paint()..color = color;
 
             // Draw the outer circle
             paint.setStyle(sky.PaintingStyle.stroke);
             paint.strokeWidth = 2.0;
-            canvas.drawCircle(outerRadius, outerRadius, outerRadius, paint);
+            canvas.drawCircle(kOuterRadius, kOuterRadius, kOuterRadius, paint);
 
             // Draw the inner circle
             if (value == groupValue) {
               paint.setStyle(sky.PaintingStyle.fill);
-              canvas.drawCircle(outerRadius, outerRadius, innerRadius, paint);
+              canvas.drawCircle(kOuterRadius, kOuterRadius, kInnerRadius, paint);
             }
           }
         )

sdk/lib/framework/rendering/box.dart

@@ -811,7 +811,7 @@ class RenderSizeObserver extends RenderProxyBox {
   }
 }
 
-typedef void CustomPaintCallback(sky.Canvas canvas);
+typedef void CustomPaintCallback(sky.Canvas canvas, Size size);
 
 class RenderCustomPaint extends RenderProxyBox {
 
@@ -839,7 +839,7 @@ class RenderCustomPaint extends RenderProxyBox {
 
   void paint(RenderObjectDisplayList canvas) {
     assert(_callback != null);
-    _callback(canvas);
+    _callback(canvas, size);
     super.paint(canvas);
   }
 }

specs/style-guide.md

@@ -19,9 +19,9 @@ Use assert()s liberally.
 
 Types (i.e. classes, typedefs (function signature definitions) and
 enums) are named UpperCamelCase. Everything else (methods, fields,
-variables, constants, enum values, etc) is lowerCamelCase. Global
-double and string constants are prefixed with k. Prefer using a static
-const in a relevant class than using a global constant.
+variables, constants, enum values, etc) is lowerCamelCase. Constant
+doubles and strings are prefixed with k. Prefer using a local const
+or a static const in a relevant class than using a global constant.
 
 Don't name your libraries (no ```library``` keyword). Name the files
 in ```lower_under_score.dart``` format.