[Effen] Fork stocks and fn.dart so we have something to work on during the porting process

R=eseidel@chromium.org

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

examples/stocks2/README.md

+This is a copy of the stocks app... with everything removed.
+
+The goal is to eventually replace the stocks app with this one, by
+adding it back bit by bit as we port it to RenderNode.

examples/stocks2/lib/stock_app.dart

+// 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/framework/components/tool_bar.dart';
+// import 'package:sky/framework/components/drawer.dart';
+// import 'package:sky/framework/components/drawer_header.dart';
+// import 'package:sky/framework/components/floating_action_button.dart';
+// import 'package:sky/framework/components/icon.dart';
+// import 'package:sky/framework/components/icon_button.dart';
+// import 'package:sky/framework/components/input.dart';
+// import 'package:sky/framework/components/menu_divider.dart';
+// import 'package:sky/framework/components/menu_item.dart';
+// import 'package:sky/framework/components/modal_overlay.dart';
+// import 'package:sky/framework/components/popup_menu.dart';
+// import 'package:sky/framework/components/radio.dart';
+// import 'package:sky/framework/components/scaffold.dart';
+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 'stock_list.dart';
+// import 'stock_menu.dart';
+
+import 'dart:async';
+import 'package:sky/framework/layout2.dart';
+
+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]};''');
+
+  // static final Style _titleStyle = new Style('''
+  //   ${typography.white.title};''');
+
+  List<Stock> _stocks = [];
+
+  StocksApp() : super() {
+    // if (debug)
+    //   new Timer(new Duration(seconds: 1), dumpState);
+    new StockDataFetcher((StockData data) {
+      setState(() {
+        data.appendTo(_stocks);
+      });
+    });
+    // _drawerController = new DrawerController(_handleDrawerStatusChanged);
+  }
+
+  bool _isSearching = false;
+  String _searchQuery;
+
+  void _handleSearchBegin(_) {
+    setState(() {
+      _isSearching = true;
+    });
+  }
+
+  void _handleSearchEnd(_) {
+    setState(() {
+      _isSearching = false;
+      _searchQuery = null;
+    });
+  }
+
+  void _handleSearchQueryChanged(String query) {
+    setState(() {
+      _searchQuery = query;
+    });
+  }
+
+  // DrawerController _drawerController;
+  bool _drawerShowing = false;
+
+  void _handleDrawerStatusChanged(bool showing) {
+    setState(() {
+      _drawerShowing = showing;
+    });
+  }
+
+  // PopupMenuController _menuController;
+
+  void _handleMenuShow(_) {
+    setState(() {
+      // _menuController = new PopupMenuController();
+      // _menuController.open();
+    });
+  }
+
+  void _handleMenuHide(_) {
+    setState(() {
+      // _menuController.close().then((_) {
+      //   setState(() {
+      //     _menuController = null;
+      //   });
+      // });
+    });
+  }
+
+  bool _autorefresh = false;
+  void _handleAutorefreshChanged(bool value) {
+    setState(() {
+      _autorefresh = value;
+    });
+  }
+
+  StockMode _stockMode = StockMode.Optimistic;
+  void _handleStockModeChange(StockMode value) {
+    setState(() {
+      _stockMode = value;
+    });
+  }
+
+  // static FlexBoxParentData _flex1 = new FlexBoxParentData()..flex = 1;
+
+  // Drawer buildDrawer() {
+  //   return new Drawer(
+  //     controller: _drawerController,
+  //     level: 3,
+  //     children: [
+  //       new DrawerHeader(children: [new Text('Stocks')]),
+  //       new MenuItem(
+  //         key: 'Stock list',
+  //         icon: 'action/assessment',
+  //         children: [new Text('Stock List')]),
+  //       new MenuItem(
+  //         key: 'Account Balance',
+  //         icon: 'action/account_balance',
+  //         children: [new Text('Account Balance')]),
+  //       new MenuDivider(key: 'div1'),
+  //       new MenuItem(
+  //         key: 'Optimistic Menu Item',
+  //         icon: 'action/thumb_up',
+  //         onGestureTap: (event) => _handleStockModeChange(StockMode.Optimistic),
+  //         children: [
+  //           new ParentDataNode(new Text('Optimistic'), _flex1),
+  //           new Radio(key: 'optimistic-radio', value: StockMode.Optimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
+  //         ]),
+  //       new MenuItem(
+  //         key: 'Pessimistic Menu Item',
+  //         icon: 'action/thumb_down',
+  //         onGestureTap: (event) => _handleStockModeChange(StockMode.Pessimistic),
+  //         children: [
+  //           new ParentDataNode(new Text('Pessimistic'), _flex1),
+  //           new Radio(key: 'pessimistic-radio', value: StockMode.Pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
+  //         ]),
+  //       new MenuDivider(key: 'div2'),
+  //       new MenuItem(
+  //         key: 'Settings',
+  //         icon: 'action/settings',
+  //         children: [new Text('Settings')]),
+  //       new MenuItem(
+  //         key: 'Help & Feedback',
+  //         icon: 'action/help',
+  //         children: [new Text('Help & Feedback')])
+  //     ]
+  //   );
+  // }
+
+  // UINode buildToolBar() {
+  //   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);
+  // }
+
+  // // TODO(abarth): Should we factor this into a SearchBar in the framework?
+  // UINode buildSearchBar() {
+  //   return new StyleNode(
+  //     new ToolBar(
+  //       left: new IconButton(
+  //         icon: 'navigation/arrow_back_grey600',
+  //         onGestureTap: _handleSearchEnd),
+  //       center: new Input(
+  //         focused: true,
+  //         placeholder: 'Search stocks',
+  //         onChanged: _handleSearchQueryChanged)),
+  //     _searchBarStyle);
+  // }
+
+  // void addMenuToOverlays(List<UINode> overlays) {
+  //   if (_menuController == null)
+  //     return;
+  //   overlays.add(new ModalOverlay(
+  //     children: [new StockMenu(
+  //       controller: _menuController,
+  //       autorefresh: _autorefresh,
+  //       onAutorefreshChanged: _handleAutorefreshChanged
+  //     )],
+  //     onDismiss: _handleMenuHide));
+  // }
+
+  UINode build() {
+    // List<UINode> overlays = [];
+    // addMenuToOverlays(overlays);
+
+    // return new Scaffold(
+    //   header: _isSearching ? buildSearchBar() : buildToolBar(),
+    //   content: new Stocklist(stocks: _stocks, query: _searchQuery),
+    //   fab: new FloatingActionButton(
+    //     content: new Icon(type: 'content/add_white', size: 24), level: 3),
+    //   drawer: _drawerShowing ? buildDrawer() : null,
+    //   overlays: overlays
+    // );
+  }
+}
+
+void main() {
+  new StocksApp();
+}

examples/stocks2/lib/stock_arrow.dart

+// 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:math';
+import 'package:sky/framework/fn.dart';
+import 'package:sky/framework/layout.dart';
+
+class StockArrow extends Component {
+  static final Style _style = new Style('''
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40px;
+    margin-right: 16px;
+    border: 1px solid transparent;'''
+  );
+
+  static final Style _upStyle = new Style('''
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    margin-bottom: 3px;
+    border-bottom: 9px solid white;'''
+  );
+
+  static final Style _downStyle = new Style('''
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    margin-top: 3px;
+    border-top: 9px solid white'''
+  );
+
+  double percentChange;
+
+  StockArrow({ Object key, this.percentChange }) : super(key: key);
+
+  // TODO(abarth): These should use sky/framework/theme/colors.dart.
+  final List<String> _kRedColors = [
+    '#E57373',
+    '#EF5350',
+    '#F44336',
+    '#E53935',
+    '#D32F2F',
+    '#C62828',
+    '#B71C1C',
+  ];
+
+  // TODO(abarth): These should use sky/framework/theme/colors.dart.
+  final List<String> _kGreenColors = [
+    '#81C784',
+    '#66BB6A',
+    '#4CAF50',
+    '#43A047',
+    '#388E3C',
+    '#2E7D32',
+    '#1B5E20',
+  ];
+
+  int _colorIndexForPercentChange(double percentChange) {
+    // Currently the max is 10%.
+    double maxPercent = 10.0;
+    return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floor());
+  }
+
+  String _colorForPercentChange(double percentChange) {
+    if (percentChange > 0)
+      return _kGreenColors[_colorIndexForPercentChange(percentChange)];
+    return _kRedColors[_colorIndexForPercentChange(percentChange)];
+  }
+
+  UINode build() {
+    String border = _colorForPercentChange(percentChange).toString();
+    bool up = percentChange > 0;
+    String type = up ? 'bottom' : 'top';
+
+    return new FlexContainer(
+      inlineStyle: 'border-color: $border',
+      direction: FlexDirection.Row,
+      style: _style,
+      children: [
+        new Container(
+          inlineStyle: 'border-$type-color: $border',
+          style: up ? _upStyle : _downStyle
+        )
+      ]
+    );
+  }
+}

examples/stocks2/pubspec.yaml

+name: stocks
+author: Chromium Authors <sky-dev@googlegroups.com>
+description: A demo application using Sky that shows stock data
+homepage: https://github.com/domokit/sky_sdk/tree/master/examples/stocks
+version: 0.0.1
+dependencies:
+  sky: '>=0.0.1 <1.0.0'