Merge pull request #1304 from abarth/simple_widgets

Port some widgets to fn3

packages/flutter/lib/src/fn3/button_state.dart

@@ -0,0 +1,41 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/framework.dart';
+
+abstract class ButtonState<T extends StatefulComponent> extends ComponentState<T> {
+  ButtonState(T config) : super(config);
+
+  bool highlight;
+
+  void _handlePointerDown(_) {
+    setState(() {
+      highlight = true;
+    });
+  }
+
+  void _handlePointerUp(_) {
+    setState(() {
+      highlight = false;
+    });
+  }
+
+  void _handlePointerCancel(_) {
+    setState(() {
+      highlight = false;
+    });
+  }
+
+  Widget build(BuildContext context) {
+    return new Listener(
+      onPointerDown: _handlePointerDown,
+      onPointerUp: _handlePointerUp,
+      onPointerCancel: _handlePointerCancel,
+      child: buildContent()
+    );
+  }
+
+  Widget buildContent();
+}

packages/flutter/lib/src/fn3/icon.dart

@@ -0,0 +1,102 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// 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/services.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/theme.dart';
+import 'package:sky/src/fn3/framework.dart';
+
+enum IconThemeColor { white, black }
+
+class IconThemeData {
+  const IconThemeData({ this.color });
+  final IconThemeColor color;
+}
+
+class IconTheme extends InheritedWidget {
+
+  IconTheme({
+    Key key,
+    this.data,
+    Widget child
+  }) : super(key: key, child: child) {
+    assert(data != null);
+    assert(child != null);
+  }
+
+  final IconThemeData data;
+
+  static IconThemeData of(BuildContext context) {
+    IconTheme result = context.inheritedWidgetOfType(IconTheme);
+    return result?.data;
+  }
+
+  bool updateShouldNotify(IconTheme old) => data != old.data;
+
+}
+
+AssetBundle _initIconBundle() {
+  if (rootBundle != null)
+    return rootBundle;
+  const String _kAssetBase = '/packages/material_design_icons/icons/';
+  return new NetworkAssetBundle(Uri.base.resolve(_kAssetBase));
+}
+
+final AssetBundle _iconBundle = _initIconBundle();
+
+class Icon extends StatelessComponent {
+  Icon({
+    Key key,
+    this.size,
+    this.type: '',
+    this.color,
+    this.colorFilter
+  }) : super(key: key);
+
+  final int size;
+  final String type;
+  final IconThemeColor color;
+  final sky.ColorFilter colorFilter;
+
+  String getColorSuffix(BuildContext context) {
+    IconThemeColor iconThemeColor = color;
+    if (iconThemeColor == null) {
+      IconThemeData iconThemeData = IconTheme.of(context);
+      iconThemeColor = iconThemeData == null ? null : iconThemeData.color;
+    }
+    if (iconThemeColor == null) {
+      ThemeBrightness themeBrightness = Theme.of(context).brightness;
+      iconThemeColor = themeBrightness == ThemeBrightness.dark ? IconThemeColor.white : IconThemeColor.black;
+    }
+    switch(iconThemeColor) {
+      case IconThemeColor.white:
+        return "white";
+      case IconThemeColor.black:
+        return "black";
+    }
+  }
+
+  Widget build(BuildContext context) {
+    String category = '';
+    String subtype = '';
+    List<String> parts = type.split('/');
+    if (parts.length == 2) {
+      category = parts[0];
+      subtype = parts[1];
+    }
+    // TODO(eseidel): This clearly isn't correct.  Not sure what would be.
+    // Should we use the ios images on ios?
+    String density = 'drawable-xxhdpi';
+    String colorSuffix = getColorSuffix(context);
+    return new AssetImage(
+      bundle: _iconBundle,
+      name: '${category}/${density}/ic_${subtype}_${colorSuffix}_${size}dp.png',
+      width: size.toDouble(),
+      height: size.toDouble(),
+      colorFilter: colorFilter
+    );
+  }
+}

packages/flutter/lib/src/fn3/theme.dart

@@ -0,0 +1,30 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:sky/material.dart';
+import 'package:sky/src/fn3/framework.dart';
+
+export 'package:sky/material.dart' show ThemeData, ThemeBrightness;
+
+class Theme extends InheritedWidget {
+  Theme({
+    Key key,
+    this.data,
+    Widget child
+  }) : super(key: key, child: child) {
+    assert(child != null);
+    assert(data != null);
+  }
+
+  final ThemeData data;
+
+  static final ThemeData _kFallbackTheme = new ThemeData.fallback();
+
+  static ThemeData of(BuildContext context) {
+    Theme theme = context.inheritedWidgetOfType(Theme);
+    return theme == null ? _kFallbackTheme : theme.data;
+  }
+
+  bool updateShouldNotify(Theme old) => data != old.data;
+}

packages/flutter/lib/src/fn3/title.dart

@@ -0,0 +1,19 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:sky/services.dart';
+import 'package:sky/src/fn3/theme.dart';
+import 'package:sky/src/fn3/framework.dart';
+
+class Title extends StatelessComponent {
+  Title({ this.title, this.child });
+
+  final Widget child;
+  final String title;
+
+  Widget build(BuildContext context) {
+    updateTaskDescription(title, Theme.of(context).primaryColor);
+    return child;
+  }
+}

packages/flutter/lib/src/fn3/tool_bar.dart

@@ -0,0 +1,89 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:sky/material.dart';
+import 'package:sky/painting.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/icon.dart';
+import 'package:sky/src/fn3/theme.dart';
+import 'package:sky/src/rendering/flex.dart';
+
+class ToolBar extends StatelessComponent {
+
+  ToolBar({
+    Key key,
+    this.left,
+    this.center,
+    this.right,
+    this.backgroundColor
+  }) : super(key: key);
+
+  final Widget left;
+  final Widget center;
+  final List<Widget> right;
+  final Color backgroundColor;
+
+  Widget build(BuildContext context) {
+    Color toolbarColor = backgroundColor;
+    IconThemeData iconThemeData;
+    TextStyle centerStyle = Typography.white.title;
+    TextStyle sideStyle = Typography.white.body1;
+    if (toolbarColor == null) {
+      ThemeData themeData = Theme.of(context);
+      toolbarColor = themeData.primaryColor;
+      if (themeData.primaryColorBrightness == ThemeBrightness.light) {
+        centerStyle = Typography.black.title;
+        sideStyle = Typography.black.body2;
+        iconThemeData = const IconThemeData(color: IconThemeColor.black);
+      } else {
+        iconThemeData = const IconThemeData(color: IconThemeColor.white);
+      }
+    }
+
+    List<Widget> children = new List<Widget>();
+
+    // left children
+    if (left != null)
+      children.add(left);
+
+    // center children (left-aligned, but takes all remaining space)
+    children.add(
+      new Flexible(
+        child: new Padding(
+          child: center != null ? new DefaultTextStyle(child: center, style: centerStyle) : null,
+          padding: new EdgeDims.only(left: 24.0)
+        )
+      )
+    );
+
+    // right children
+    if (right != null)
+      children.addAll(right);
+
+    Widget content = new Container(
+      child: new DefaultTextStyle(
+        style: sideStyle,
+        child: new Column([
+            new Container(
+              child: new Row(children),
+              height: kToolBarHeight
+            ),
+          ],
+          justifyContent: FlexJustifyContent.end
+        )
+      ),
+      padding: new EdgeDims.symmetric(horizontal: 8.0),
+      decoration: new BoxDecoration(
+        backgroundColor: toolbarColor,
+        boxShadow: shadows[2]
+      )
+    );
+
+    if (iconThemeData != null)
+      content = new IconTheme(data: iconThemeData, child: content);
+    return content;
+  }
+
+}