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
diff --git a/sky/engine/core/painting/Size.dart b/sky/engine/core/painting/Size.dart
index f2d43a6..4b364bb 100644
--- a/sky/engine/core/painting/Size.dart
+++ b/sky/engine/core/painting/Size.dart
@@ -13,6 +13,9 @@
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;
diff --git a/sky/examples/stocks2/lib/stock_app.dart b/sky/examples/stocks2/lib/stock_app.dart
index c9f8de2..6f72f8c 100644
--- a/sky/examples/stocks2/lib/stock_app.dart
+++ b/sky/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/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 @@
// }
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 @@
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
- );
+ // );
}
}
diff --git a/sky/sdk/lib/framework/components2/icon.dart b/sky/sdk/lib/framework/components2/icon.dart
index 460ad8a..08913b0 100644
--- a/sky/sdk/lib/framework/components2/icon.dart
+++ b/sky/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 @@
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');
}
}
diff --git a/sky/sdk/lib/framework/components2/icon_button.dart b/sky/sdk/lib/framework/components2/icon_button.dart
index 765f75b..9fc79de 100644
--- a/sky/sdk/lib/framework/components2/icon_button.dart
+++ b/sky/sdk/lib/framework/components2/icon_button.dart
@@ -7,9 +7,6 @@
import 'icon.dart';
class IconButton extends Component {
- static Style _style = new Style('''
- padding: 8px;''');
-
String icon;
GestureEventListener onGestureTap;
@@ -18,7 +15,9 @@
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);
}
}
diff --git a/sky/sdk/lib/framework/components2/tool_bar.dart b/sky/sdk/lib/framework/components2/tool_bar.dart
index f0f3ee4..7b8b252 100644
--- a/sky/sdk/lib/framework/components2/tool_bar.dart
+++ b/sky/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)
+ );
}
}
diff --git a/sky/sdk/lib/framework/fn2.dart b/sky/sdk/lib/framework/fn2.dart
index d1f66af..427f58b 100644
--- a/sky/sdk/lib/framework/fn2.dart
+++ b/sky/sdk/lib/framework/fn2.dart
@@ -577,7 +577,7 @@
class Paragraph extends RenderNodeWrapper {
RenderParagraph root;
- RenderParagraph createNode() => new RenderParagraph(text);
+ RenderParagraph createNode() => new RenderParagraph(text: text);
final String text;
@@ -926,40 +926,3 @@
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);
-}
diff --git a/sky/sdk/lib/framework/rendering/box.dart b/sky/sdk/lib/framework/rendering/box.dart
index b3ee6cd..803c85b 100644
--- a/sky/sdk/lib/framework/rendering/box.dart
+++ b/sky/sdk/lib/framework/rendering/box.dart
@@ -14,6 +14,15 @@
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 @@
class RenderSizedBox extends RenderProxyBox {
RenderSizedBox({
- RenderBox child,
+ RenderBox child,
sky.Size desiredSize: const sky.Size.infinite()
}) : super(child) {
assert(desiredSize != null);
diff --git a/sky/sdk/lib/framework/theme/colors.dart b/sky/sdk/lib/framework/theme/colors.dart
index e7abfbc..73f2c19 100644
--- a/sky/sdk/lib/framework/theme/colors.dart
+++ b/sky/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 @@
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
