Make the stocks app slightly prettier.

I removed the green background and added display
of percent change (which is random for now).
I also display a random assortment of stocks every time
instead of always the top 100.

R=rafaelw@chromium.org

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

examples/stocks/companylist.sky

@@ -1,4 +1,6 @@
 <script>
+import "dart:math";
+
 // Snapshot from http://www.nasdaq.com/screening/company-list.aspx
 // Fetched 2/23/2014.
 // "Symbol","Name","LastSale","MarketCap","IPOyear","Sector","industry","Summary Quote",
@@ -2973,6 +2975,7 @@ class Stock {
   String name;
   double lastSale;
   String marketCap;
+  double percentChange;
 
   Stock(this.symbol, this.name, this.lastSale, this.marketCap);
 
@@ -2986,6 +2989,8 @@ class Stock {
     symbol = fields[0];
     name = fields[1];
     marketCap = fields[4];
+    var rng = new Random();
+    percentChange = (rng.nextDouble() * 20) - 10;
   }
 }
 

examples/stocks/stock.sky

@@ -8,19 +8,46 @@
 <sky-element attributes="ticker:string">
 <template>
   <style>
+  :host {
+    height: 50px;
+    display: flex;
+    width: 100%;
+    border: 1px solid black;
+  }
+  #ticker {
+    padding: 10px;
+    flex-grow: 1;
+  }
+  #change {
+    padding: 10px;
+    border-radius: 5px;
+    min-width: 60px;
+    text-align: right;
+  }
+  .positive {
+    background-color: green;
+  }
+  .negative {
+    background-color: red;
+  }
   </style>
   <div id="ticker" />
+  <div id="change" />
 </template>
 <script>
 import "dart:sky";
 
 @Tagname('stock')
 class Stock extends SkyElement {
-  Element _ticker;
+  var model; // model.Stock
 
   void shadowRootReady() {
-    _ticker = shadowRoot.getElementById('ticker');
-    _ticker.textContent = ticker;
+    Element ticker = shadowRoot.getElementById('ticker');
+    ticker.textContent = model.symbol;
+
+    Element change = shadowRoot.getElementById('change');
+    change.textContent = "${model.percentChange.toStringAsFixed(2)}%";
+    change.classList.add((model.percentChange < 0) ? 'negative' : 'positive');
   }
 }
 

examples/stocks/stocks.sky

@@ -16,6 +16,7 @@
       display: flex;
       flex-direction: column;
       height: -webkit-fill-available;
+      font: 'Helvetica';
     }
     sky-drawer {
       position: absolute;
@@ -49,7 +50,6 @@
     }
     sky-scrollable {
       flex: 1;
-      background-color: green;
     }
   </style>
   <sky-drawer id="drawer">
@@ -64,6 +64,7 @@
 </template>
 <script>
 import "dart:sky";
+import "dart:math";
 
 @Tagname('stocks')
 class Stocks extends SkyElement {
@@ -78,10 +79,12 @@ class Stocks extends SkyElement {
 
   void populateStockList() {
     Element stockList = shadowRoot.getElementById('stock_list');
-    // Limit to first 100 to avoid taking seconds to load.
+    // Limit to 100 to avoid taking seconds to load.
+    var rng = new Random();
     for (var i = 0; i < 100; i++) {
-      model.Stock stock = model.oracle.stocks[i];
-      stockList.appendChild(new view.Stock()..ticker = stock.symbol);
+      List<model.Stock> list = model.oracle.stocks;
+      model.Stock stock = list[rng.nextInt(list.length)];
+      stockList.appendChild(new view.Stock()..model = stock);
     }
   }