From ef1b69d7578133194fbd4e25b7d7e5bfcba68d76 Mon Sep 17 00:00:00 2001 From: Hixie Date: Fri, 12 Jun 2015 11:46:08 -0700 Subject: [PATCH] Material and RaisedButton. Make Material actually create material, with opinions about what that means. Make FloatingActionButton use this. Make Scrollable use this. Make BoxDecoration support drawing a circle instead of a rectangle, so that floating action button doesn't need a custom painter. Implement RaisedButton (and remove button.dart, since there's no "button" in Material Design). Make InkWell have a "child" argument instead of "children", and not have it introduce a Flex into the hierarchy. Update container.dart example. Clean up some imports. R=abarth@chromium.org Review URL: https://codereview.chromium.org/1179713004. --- examples/stocks2/lib/stock_app.dart | 5 ++-- examples/stocks2/lib/stock_row.dart | 6 ++-- examples/widgets/container.dart | 43 ++++++++++++---------------- examples/widgets/spinning_mixed.dart | 10 +++++-- 4 files changed, 31 insertions(+), 33 deletions(-) diff --git a/examples/stocks2/lib/stock_app.dart b/examples/stocks2/lib/stock_app.dart index db559946e6d..1e4fd64a1c4 100644 --- a/examples/stocks2/lib/stock_app.dart +++ b/examples/stocks2/lib/stock_app.dart @@ -2,7 +2,6 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'package:sky/framework/app.dart'; import 'package:sky/framework/editing2/input.dart'; import 'package:sky/framework/rendering/box.dart'; import 'package:sky/framework/theme2/colors.dart' as colors; @@ -203,8 +202,8 @@ class StocksApp extends App { 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), + child: new Icon(type: 'content/add_white', size: 24) + ), drawer: _drawerShowing ? buildDrawer() : null ), ]; diff --git a/examples/stocks2/lib/stock_row.dart b/examples/stocks2/lib/stock_row.dart index fc0555bce72..1028017247a 100644 --- a/examples/stocks2/lib/stock_row.dart +++ b/examples/stocks2/lib/stock_row.dart @@ -37,8 +37,8 @@ class StockRow extends Component { ]; // TODO(hansmuller): An explicit |height| shouldn't be needed - return new InkWell(children: [ - new Container( + return new InkWell( + child: new Container( padding: const EdgeDims(16.0, 16.0, 20.0, 16.0), height: kHeight, decoration: const BoxDecoration( @@ -46,6 +46,6 @@ class StockRow extends Component { bottom: const BorderSide(color: const sky.Color(0xFFF4F4F4)))), child: new Flex(children) ) - ]); + ); } } diff --git a/examples/widgets/container.dart b/examples/widgets/container.dart index 14b5663d13f..8c842be0b9b 100644 --- a/examples/widgets/container.dart +++ b/examples/widgets/container.dart @@ -2,43 +2,38 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'dart:sky' as sky; - import 'package:sky/framework/rendering/box.dart'; import 'package:sky/framework/rendering/flex.dart'; -import 'package:sky/framework/widgets/ui_node.dart'; +import 'package:sky/framework/widgets/raised_button.dart'; import 'package:sky/framework/widgets/wrappers.dart'; -class Rectangle extends Component { - - Rectangle(this.color, { Object key }) : super(key: key); - - final Color color; - - UINode build() { - return new FlexExpandingChild( - new Container( - decoration: new BoxDecoration(backgroundColor: color) - ) - ); - } - -} - class ContainerApp extends App { UINode build() { return new Flex([ - new Rectangle(const Color(0xFF00FFFF), key: 'a'), new Container( + key: 'a', padding: new EdgeDims.all(10.0), margin: new EdgeDims.all(10.0), decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)), - child: new Image(src: "https://www.dartlang.org/logos/dart-logo.png", - size: new Size(300.0, 300.0), - key: 1 + child: new Image( + src: "https://www.dartlang.org/logos/dart-logo.png", + size: new Size(300.0, 300.0) + ) + ), + new Container( + key: 'b', + decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFF00)), + padding: new EdgeDims.symmetric(horizontal: 50.0, vertical: 75.0), + child: new RaisedButton( + child: new Text('PRESS ME'), + onPressed: () => print("Hello World") + ) + ), + new FlexExpandingChild( + new Container( + decoration: new BoxDecoration(backgroundColor: const Color(0xFF00FFFF)) ) ), - new Rectangle(const Color(0xFFFFFF00), key: 'b'), ], direction: FlexDirection.vertical, justifyContent: FlexJustifyContent.spaceBetween diff --git a/examples/widgets/spinning_mixed.dart b/examples/widgets/spinning_mixed.dart index 407fbde30e9..b42a5bf366b 100644 --- a/examples/widgets/spinning_mixed.dart +++ b/examples/widgets/spinning_mixed.dart @@ -7,6 +7,7 @@ import 'dart:sky' as sky; import 'package:sky/framework/rendering/box.dart'; import 'package:sky/framework/rendering/flex.dart'; import 'package:sky/framework/scheduler.dart'; +import 'package:sky/framework/widgets/raised_button.dart'; import 'package:sky/framework/widgets/ui_node.dart'; import 'package:sky/framework/widgets/wrappers.dart'; import 'package:vector_math/vector_math.dart'; @@ -40,9 +41,12 @@ UINode builder() { padding: new EdgeDims.all(10.0), margin: new EdgeDims.all(10.0), decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)), - child: new Image(src: "https://www.dartlang.org/logos/dart-logo.png", - size: new Size(300.0, 300.0), - key: 1 + child: new RaisedButton( + child: new Flex([ + new Image(src: "https://www.dartlang.org/logos/dart-logo.png"), + new Text('PRESS ME'), + ]), + onPressed: () => print("Hello World") ) ), new Rectangle(const Color(0xFFFFFF00), key: 'b'),