Add the floating action button to stocks2

The + isn't quite centered properly, but the button is a circle in the right
place.

R=eseidel@chromium.org, ianh@google.com

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

engine/core/painting/Size.dart

@@ -18,6 +18,8 @@ class Size {
   static const Size infinite = const Size(double.INFINITY, double.INFINITY);
 
   bool operator ==(other) => other is Size && width == other.width && height == other.height;
+  Size operator +(Size other) => new Size(width + other.width, height + other.height);
+  Size operator -(Size other) => new Size(width - other.width, height - other.height);
 
   // does the equivalent of "return new Point(0,0) + this"
   Point toPoint() => new Point(this.width, this.height);

examples/stocks2/lib/stock_app.dart

@@ -5,8 +5,8 @@
 import 'package:sky/framework/components2/tool_bar.dart';
 import 'package:sky/framework/components2/drawer.dart';
 // import 'package:sky/framework/components2/drawer_header.dart';
-// import 'package:sky/framework/components2/floating_action_button.dart';
-// import 'package:sky/framework/components2/icon.dart';
+import 'package:sky/framework/components2/floating_action_button.dart';
+import 'package:sky/framework/components2/icon.dart';
 import 'package:sky/framework/components2/icon_button.dart';
 import 'package:sky/framework/components2/menu_divider.dart';
 import 'package:sky/framework/components2/menu_item.dart';
@@ -203,9 +203,9 @@ class StocksApp extends App {
       new Scaffold(
         toolbar: _isSearching ? buildSearchBar() : buildToolBar(),
         body: new Stocklist(stocks: _stocks, query: _searchQuery),
-        // floatingActionButton: new FloatingActionButton(
-        //   content: new Icon(type: 'content/add_white', size: 24),
-        //   level: 3),
+        floatingActionButton: new FloatingActionButton(
+          content: new Icon(type: 'content/add_white', size: 24),
+          level: 3),
         drawer: _drawerShowing ? buildDrawer() : null
       ),
     ];

sdk/lib/framework/components2/floating_action_button.dart

@@ -3,29 +3,15 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../theme/colors.dart';
+import '../rendering/box.dart';
+import '../theme2/colors.dart';
+import 'dart:sky' as sky;
 import 'ink_well.dart';
 import 'material.dart';
 
-class FloatingActionButton extends Component {
-  // TODO(abarth): We need a better way to become a container for absolutely
-  // positioned elements.
-  static final Style _style = new Style('''
-    width: 56px;
-    height: 56px;
-    background-color: ${Red[500]};
-    border-radius: 28px;'''
-  );
-  static final Style _clipStyle = new Style('''
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-clip-path: circle(28px at center);''');
+const double _kSize = 56.0;
 
+class FloatingActionButton extends Component {
   UINode content;
   int level;
 
@@ -39,9 +25,14 @@ class FloatingActionButton extends Component {
       children.add(content);
 
     return new Material(
-      content: new Container(
-        style: _style,
-        children: [new StyleNode(new InkWell(children: children), _clipStyle)]),
+      content: new CustomPaint(
+        callback: (sky.Canvas canvas) {
+          const double radius = _kSize / 2.0;
+          canvas.drawCircle(radius, radius, radius, new sky.Paint()..color = Red[500]);
+        },
+        child: new Container(
+          desiredSize: const sky.Size(_kSize, _kSize),
+          child: new InkWell(children: children))),
       level: level);
   }
 }

sdk/lib/framework/components2/radio.dart

@@ -36,7 +36,7 @@ class Radio extends ButtonBase {
         margin: const EdgeDims.symmetric(horizontal: 5.0),
         desiredSize: new sky.Size(diameter, diameter),
         child: new CustomPaint(
-          callback: (RenderObjectDisplayList canvas) {
+          callback: (sky.Canvas canvas) {
 
             sky.Paint paint = new sky.Paint()..color = color;
 

sdk/lib/framework/components2/scaffold.dart

@@ -117,9 +117,10 @@ class RenderScaffold extends RenderBox {
     }
     if (_slots[ScaffoldSlots.floatingActionButton] != null) {
       RenderBox floatingActionButton = _slots[ScaffoldSlots.floatingActionButton];
-      floatingActionButton.layout(new BoxConstraints(minWidth: 0.0, maxWidth: size.width, minHeight: size.height, maxHeight: size.height));
+      sky.Size area = new sky.Size(size.width + kButtonX, size.height + kButtonY);
+      floatingActionButton.layout(new BoxConstraints.loose(area));
       assert(floatingActionButton.parentData is BoxParentData);
-      floatingActionButton.parentData.position = new sky.Point(size.width - kButtonX, bodyPosition + bodyHeight - kButtonY);
+      floatingActionButton.parentData.position = (area - floatingActionButton.size).toPoint();
     }
   }
 

sdk/lib/framework/rendering/box.dart

@@ -666,7 +666,7 @@ class RenderShadowedBox extends RenderProxyBox {
   }
 }
 
-typedef void CustomPaintCallback(RenderObjectDisplayList canvas);
+typedef void CustomPaintCallback(sky.Canvas canvas);
 
 class RenderCustomPaint extends RenderProxyBox {