Attempt to make the stocks example more more material-friendly.

http://www.google.com/design/spec/components/lists.html#lists-specs
http://www.google.com/design/spec/style/color.html#

R=abarth@chromium.org

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

examples/stocks/stock.sky

@@ -9,30 +9,28 @@
 <template>
   <style>
   :host {
-    height: 50px;
+    // TODO(eseidel): Why does setting height here make this too big?
+    // height: 48px;
+    max-height: 48px;
     display: flex;
-    width: 100%;
-    border: 1px solid black;
+    border-bottom: 1px solid black;
+    padding-top: 16px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-bottom: 20px;
   }
   #ticker {
-    padding: 10px;
     flex-grow: 1;
   }
   #last-sale {
-    padding: 10px;
+    padding-right: 20px;
   }
   #change {
-    padding: 10px;
     border-radius: 5px;
-    min-width: 70px;
+    min-width: 72px;
+    padding-right: 10px;
     text-align: right;
   }
-  .positive {
-    background-color: green;
-  }
-  .negative {
-    background-color: red;
-  }
   </style>
   <div id="ticker" />
   <div id="last-sale" />
@@ -40,6 +38,45 @@
 </template>
 <script>
 import "dart:sky";
+import "dart:math";
+
+List<String> redColors = [
+  '#FFEBEE',
+  '#FFCDD2',
+  '#EF9A9A',
+  '#E57373',
+  '#EF5350',
+  '#F44336',
+  '#E53935',
+  '#D32F2F',
+  '#C62828',
+  '#B71C1C',
+];
+
+List<String> greenColors = [
+  '#E8F5E9',
+  '#C8E6C9',
+  '#A5D6A7',
+  '#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) * greenColors.length).floor());
+}
+
+String colorForPercentChange(double percentChange) {
+  if (percentChange > 0)
+    return greenColors[colorIndexForPercentChange(percentChange)];
+  return redColors[colorIndexForPercentChange(percentChange)];
+}
 
 @Tagname('stock')
 class Stock extends SkyElement {
@@ -56,7 +93,7 @@ class Stock extends SkyElement {
     if (model.percentChange > 0)
       changeString = "+" + changeString;
     change.textContent = changeString;
-    change.classList.add((model.percentChange < 0) ? 'negative' : 'positive');
+    change.style['background-color'] = colorForPercentChange(model.percentChange);
   }
 }
 

examples/stocks/stocks.sky

@@ -16,7 +16,8 @@
       display: flex;
       flex-direction: column;
       height: -webkit-fill-available;
-      font: 'Helvetica';
+      font-family: 'Roboto Regular', 'Helvetica';
+      font-size: 16px;
     }
     sky-drawer {
       position: absolute;
@@ -66,6 +67,15 @@
 import "dart:sky";
 import "dart:math";
 
+List pick(List list, int count) {
+  var rng = new Random();
+  List picked = new List();
+  for (int i = 0; i < count; i++) {
+    picked.add(list[rng.nextInt(list.length)]);
+  }
+  return picked;
+}
+
 @Tagname('stocks')
 class Stocks extends SkyElement {
   Element _drawer;
@@ -80,10 +90,9 @@ class Stocks extends SkyElement {
   void populateStockList() {
     Element stockList = shadowRoot.getElementById('stock_list');
     // Limit to 100 to avoid taking seconds to load.
-    var rng = new Random();
-    for (var i = 0; i < 100; i++) {
-      List<model.Stock> list = model.oracle.stocks;
-      model.Stock stock = list[rng.nextInt(list.length)];
+    List<model.Stock> picked = pick(model.oracle.stocks, 100);
+    picked.sort((a, b) => a.symbol.compareTo(b.symbol));
+    for (model.Stock stock in picked) {
       stockList.appendChild(new view.Stock()..model = stock);
     }
   }