Give the Stocks2 App a new improved toolbar.

Looks horrible.  But it's a start.

R=abarth@chromium.org, ianh@google.com
BUG=

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

engine/core/painting/Size.dart

@@ -13,6 +13,9 @@ class Size {
 
   const Size.infinite() : width = double.INFINITY, height = double.INFINITY;
 
+  const Size.fromWidth(this.width) : height = double.INFINITY;
+  const Size.fromHeight(this.height) : width = double.INFINITY;
+
   bool operator ==(other) {
     if (!(other is Size)) return false;
     return width == other.width && height == other.height;

examples/stocks2/lib/stock_app.dart

@@ -2,12 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// import 'package:sky/framework/components2/tool_bar.dart';
+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/icon_button.dart';
+import 'package:sky/framework/components2/icon_button.dart';
 // import 'package:sky/framework/components2/input.dart';
 // import 'package:sky/framework/components2/menu_divider.dart';
 // import 'package:sky/framework/components2/menu_item.dart';
@@ -19,18 +19,17 @@ import 'package:sky/framework/fn2.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
 import 'package:sky/framework/theme/colors.dart';
 import 'stock_data.dart';
+import 'package:sky/framework/rendering/box.dart';
 // import 'stock_list.dart';
 // import 'stock_menu.dart';
 
 import 'dart:async';
+import 'dart:sky' as sky;
 
 enum StockMode { Optimistic, Pessimistic }
 
 class StocksApp extends App {
 
-  // static final Style _toolBarStyle = new Style('''
-  //   background-color: ${Purple[500]};''');
-
   // static final Style _searchBarStyle = new Style('''
   //   background-color: ${Grey[50]};''');
 
@@ -161,24 +160,21 @@ class StocksApp extends App {
   // }
 
   UINode buildToolBar() {
-    return new Rectangle(0xFF00FF00);
-    // return new StyleNode(
-    //   new ToolBar(
-    //     left: new IconButton(
-    //       icon: 'navigation/menu_white',
-    //       onGestureTap: _drawerController.toggle),
-    //     center: new Container(
-    //       style: _titleStyle,
-    //       children: [new Text('Stocks')]),
-    //     right: [
-    //       new IconButton(
-    //         icon: 'action/search_white',
-    //         onGestureTap: _handleSearchBegin),
-    //       new IconButton(
-    //         icon: 'navigation/more_vert_white',
-    //         onGestureTap: _handleMenuShow)
-    //     ]),
-    //   _toolBarStyle);
+    return new ToolBar(
+        left: new IconButton(
+          icon: 'navigation/menu_white',
+          onGestureTap: (_) => true), // _drawerController.toggle),
+        center: new Text('Stocks'),
+        right: [
+          new IconButton(
+            icon: 'action/search_white',
+            onGestureTap: _handleSearchBegin),
+          new IconButton(
+            icon: 'navigation/more_vert_white',
+            onGestureTap: _handleMenuShow)
+        ],
+        backgroundColor: colorFromCSSHexColorString(Purple[500])
+      );
   }
 
   // TODO(abarth): Should we factor this into a SearchBar in the framework?
@@ -210,16 +206,22 @@ class StocksApp extends App {
   UINode build() {
     // List<UINode> overlays = [];
     // addMenuToOverlays(overlays);
+    return new Container(
+      child: new BlockContainer(children: [buildToolBar()]),
+      decoration: new BoxDecoration(
+        backgroundColor: 0xFFFFFFFF
+      )
+    );
 
-    return new Scaffold(
-       toolbar: _isSearching ? buildSearchBar() : buildToolBar()
+    // return 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),
     //   drawer: _drawerShowing ? buildDrawer() : null,
     //   overlays: overlays
-    );
+    // );
   }
 }
 

sdk/lib/framework/components2/icon.dart

@@ -2,7 +2,9 @@
 // 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 '../fn2.dart';
+import '../rendering/box.dart';
 
 // TODO(eseidel): This should use package:.
 const String kAssetBase = '/packages/sky/assets/material-design-icons';
@@ -25,8 +27,12 @@ class Icon extends Component {
       category = parts[0];
       subtype = parts[1];
     }
-
-    return new Image(width: size, height: size,
-      src: '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png');
+    // TODO(jackson): Use a real image.
+    return new Container(
+      desiredSize: new sky.Size(size.toDouble(), size.toDouble()),
+      decoration: new BoxDecoration(backgroundColor: 0xFFFF0000)
+    );
+    // return new Image(width: size, height: size,
+    //   src: '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png');
   }
 }

sdk/lib/framework/components2/icon_button.dart

@@ -7,9 +7,6 @@ import '../rendering/box.dart';
 import 'icon.dart';
 
 class IconButton extends Component {
-  static Style _style = new Style('''
-    padding: 8px;''');
-
   String icon;
   GestureEventListener onGestureTap;
 
@@ -18,7 +15,9 @@ class IconButton extends Component {
 
   UINode build() {
     return new EventListenerNode(
-      new StyleNode(new Icon(type: icon, size: 24), _style),
+      new Padding(
+        child: new Icon(type: icon, size: 24),
+        padding: const EdgeDims.all(8.0)),
       onGestureTap: onGestureTap);
   }
 }

sdk/lib/framework/components2/tool_bar.dart

@@ -2,44 +2,48 @@
 // 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 '../fn2.dart';
 import '../theme/view_configuration.dart';
-import 'material.dart';
+import '../rendering/box.dart';
+import '../rendering/flex.dart';
+// import 'material.dart';
 
 class ToolBar extends Component {
-  static final Style _style = new Style('''
-    align-items: center;
-    height: 56px;
-    padding: 0 8px;
-    transition: background-color 0.3s;
-    padding-top: ${kStatusBarHeight}px;''');
-
-  static Style _centerStyle = new Style('''
-    padding-left: 24px;''');
-
-  static FlexBoxParentData _centerLayoutSettings = new FlexBoxParentData()..flex = 1;
-
   UINode left;
   UINode center;
   List<UINode> right;
+  sky.Color backgroundColor;
 
   ToolBar({
     String key,
     this.left,
     this.center,
-    this.right
+    this.right,
+    this.backgroundColor
   }) : super(key: key);
 
   UINode build() {
-    List<UINode> children = [left, new StyleNode(new ParentDataNode(center, _centerLayoutSettings), _centerStyle)];
+    List<UINode> children = [
+      left,
+      new FlexExpandingChild(
+        new Padding(
+          child: center,
+          padding: new EdgeDims.onlyLeft(24.0)
+        ))
+    ];
 
     if (right != null)
       children.addAll(right);
 
-    return new Material(
-      content: new FlexContainer(
+    return new Container(
+      child: new FlexContainer(
         children: children,
-        direction: FlexDirection.Row),
-      level: 2);
+        direction: FlexDirection.Horizontal
+      ),
+      desiredSize: new sky.Size.fromHeight(56.0),
+      // padding: new EdgeDims(kStatusBarHeight.toDouble(), 8.0, 0.0, 8.0),
+      decoration: new BoxDecoration(backgroundColor: backgroundColor.value)
+    );
   }
 }

sdk/lib/framework/fn2.dart

@@ -577,7 +577,7 @@ class BlockContainer extends OneChildListRenderNodeWrapper {
 
 class Paragraph extends RenderNodeWrapper {
   RenderParagraph root;
-  RenderParagraph createNode() => new RenderParagraph(text);
+  RenderParagraph createNode() => new RenderParagraph(text: text);
 
   final String text;
 
@@ -926,40 +926,3 @@ class Text extends Component {
   bool get interchangeable => true;
   UINode build() => new Paragraph(text: data);
 }
-
-
-// for now, but only for now:
-
-class RenderSolidColor extends RenderDecoratedBox {
-  final sky.Size desiredSize;
-  final int backgroundColor;
-
-  RenderSolidColor(int backgroundColor, { this.desiredSize })
-      : backgroundColor = backgroundColor,
-        super(decoration: new BoxDecoration(backgroundColor: backgroundColor));
-
-  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
-    return constraints.constrain(desiredSize);
-  }
-
-  void performLayout() {
-    size = constraints.constrain(desiredSize);
-  }
-
-  void handlePointer(sky.PointerEvent event) {
-    if (event.type == 'pointerdown')
-      decoration = new BoxDecoration(backgroundColor: 0xFFFF0000);
-    else if (event.type == 'pointerup')
-      decoration = new BoxDecoration(backgroundColor: backgroundColor);
-  }
-}
-
-class Rectangle extends RenderNodeWrapper {
-  RenderSolidColor root;
-  RenderSolidColor createNode() =>
-      new RenderSolidColor(color, desiredSize: new sky.Size(40.0, 130.0));
-
-  final int color;
-
-  Rectangle(this.color, { Object key }) : super(key: key);
-}

sdk/lib/framework/rendering/box.dart

@@ -14,6 +14,15 @@ class EdgeDims {
   const EdgeDims.all(double value)
       : top = value, right = value, bottom = value, left = value;
 
+  const EdgeDims.onlyLeft(double value)
+      : top = 0.0, right = 0.0, bottom = 0.0, left = value;
+  const EdgeDims.onlyRight(double value)
+    : top = 0.0, right = value, bottom = 0.0, left = 0.0;
+  const EdgeDims.onlyTop(double value)
+    : top = value, right = 0.0, bottom = 0.0, left = 0.0;
+  const EdgeDims.onlyBottom(double value)
+    : top = 0.0, right = 0.0, bottom = value, left = 0.0;
+
   final double top;
   final double right;
   final double bottom;
@@ -148,7 +157,7 @@ abstract class RenderProxyBox extends RenderBox with RenderNodeWithChildMixin<Re
 class RenderSizedBox extends RenderProxyBox {
 
   RenderSizedBox({
-    RenderBox child, 
+    RenderBox child,
     sky.Size desiredSize: const sky.Size.infinite()
   }) : super(child) {
     assert(desiredSize != null);

sdk/lib/framework/theme/colors.dart

@@ -2,6 +2,8 @@
 // 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;
+
 const Map<int, String> Red = const {
    50: '#FFEBEE',
   100: '#FFCDD2',
@@ -248,3 +250,7 @@ const Map<int, String> BlueGrey = const {
   800: '#37474F',
   900: '#263238',
 };
+
+sky.Color colorFromCSSHexColorString(String colorString) {
+  return new sky.Color(int.parse("FF" + colorString.substring(1), radix: 16));
+}
\ No newline at end of file