From 247344193d286faf780698587e8d294dd79b417e Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Fri, 5 Jun 2015 10:07:51 -0700 Subject: [PATCH] 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 | 2 ++ examples/stocks2/lib/stock_app.dart | 10 +++--- .../components2/floating_action_button.dart | 35 +++++++------------ sdk/lib/framework/components2/radio.dart | 2 +- sdk/lib/framework/components2/scaffold.dart | 5 +-- sdk/lib/framework/rendering/box.dart | 2 +- 6 files changed, 25 insertions(+), 31 deletions(-) diff --git a/engine/core/painting/Size.dart b/engine/core/painting/Size.dart index 6747a65523e..139fc16db17 100644 --- a/engine/core/painting/Size.dart +++ b/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); diff --git a/examples/stocks2/lib/stock_app.dart b/examples/stocks2/lib/stock_app.dart index 26f44a094fa..12d8ad8088c 100644 --- a/examples/stocks2/lib/stock_app.dart +++ b/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 ), ]; diff --git a/sdk/lib/framework/components2/floating_action_button.dart b/sdk/lib/framework/components2/floating_action_button.dart index 711ae188705..e4beed8b3c5 100644 --- a/sdk/lib/framework/components2/floating_action_button.dart +++ b/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); } } diff --git a/sdk/lib/framework/components2/radio.dart b/sdk/lib/framework/components2/radio.dart index 33d4fb2e26c..ab6672fe04f 100644 --- a/sdk/lib/framework/components2/radio.dart +++ b/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; diff --git a/sdk/lib/framework/components2/scaffold.dart b/sdk/lib/framework/components2/scaffold.dart index e5c6c7d0f63..9b3dbefb304 100644 --- a/sdk/lib/framework/components2/scaffold.dart +++ b/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(); } } diff --git a/sdk/lib/framework/rendering/box.dart b/sdk/lib/framework/rendering/box.dart index 41f9ed5af36..1bec0dec9de 100644 --- a/sdk/lib/framework/rendering/box.dart +++ b/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 {