From b4385bcebe3847439218363e5471ddf8db0c1d50 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Tue, 24 Feb 2015 15:41:35 -0800
Subject: [PATCH] Make the stock app demo list view prettier

This CL makes the list view in the stocks app more consistent with the material
spec by using a colored circle instead of color-coding the percentage change.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/932103004
---
 examples/stocks/stock-arrow.sky | 98 +++++++++++++++++++++++++++++++++
 examples/stocks/stock.sky       | 60 +++++---------------
 2 files changed, 112 insertions(+), 46 deletions(-)
 create mode 100644 examples/stocks/stock-arrow.sky

diff --git a/examples/stocks/stock-arrow.sky b/examples/stocks/stock-arrow.sky
new file mode 100644
index 0000000000..0ebe9cfba3
--- /dev/null
+++ b/examples/stocks/stock-arrow.sky
@@ -0,0 +1,98 @@
+<!--
+// 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 src="/sky/framework/sky-element.sky" />
+
+<sky-element attributes="change:number">
+<template>
+  <style>
+  :host {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40px;
+    border: 1px solid transparent;
+  }
+  #arrow {
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+  }
+  .up {
+    margin-bottom: 3px;
+    border-bottom: 9px solid white;
+  }
+  .down {
+    margin-top: 3px;
+    border-top: 9px solid white;
+  }
+  </style>
+  <div id="arrow" />
+</template>
+<script>
+import "dart:sky";
+import "dart:math";
+
+final List<String> _kRedColors = [
+  '#E57373',
+  '#EF5350',
+  '#F44336',
+  '#E53935',
+  '#D32F2F',
+  '#C62828',
+  '#B71C1C',
+];
+
+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)];
+}
+
+@Tagname('stock-arrow')
+class StockArrow extends SkyElement {
+  Element _arrow;
+
+  void _updateArrow(double percentChange) {
+    String border = _colorForPercentChange(percentChange).toString();
+    String type = percentChange > 0 ? 'bottom' : 'top';
+    _arrow.style['border-$type-color'] = border;
+    style['border-color'] = border;
+    _arrow.setAttribute('class', percentChange > 0 ? 'up' : 'down');
+  }
+
+  void shadowRootReady() {
+    _arrow = shadowRoot.getElementById('arrow');
+    _updateArrow(change);
+  }
+
+  void changeChanged(double oldValue, double newValue) {
+    if (_arrow != null)
+      _updateArrow(newValue);
+  }
+}
+
+_init(script) => register(script, StockArrow);
+</script>
+</sky-element>
diff --git a/examples/stocks/stock.sky b/examples/stocks/stock.sky
index 9bc505185d..71261f6f11 100644
--- a/examples/stocks/stock.sky
+++ b/examples/stocks/stock.sky
@@ -4,6 +4,7 @@
 // found in the LICENSE file.
 -->
 <import src="/sky/framework/sky-element.sky" />
+<import src="stock-arrow.sky" />
 
 <sky-element>
 <template>
@@ -13,71 +14,36 @@
     // height: 48px;
     max-height: 48px;
     display: flex;
+    align-items: center;
     border-bottom: 1px solid #F4F4F4;
     padding-top: 16px;
     padding-left: 16px;
     padding-right: 16px;
     padding-bottom: 20px;
   }
+  stock-arrow {
+    margin-right: 16px;
+  }
   #ticker {
-    flex-grow: 1;
+    flex: 1;
+    font-family: 'Roboto Medium', 'Helvetica';
   }
   #last-sale {
-    padding-right: 20px;
+    text-align: right;
+    padding-right: 16px;
   }
   #change {
-    border-radius: 5px;
-    min-width: 72px;
-    padding: 2px;
-    padding-right: 10px;
+    color: #8A8A8A;
     text-align: right;
   }
   </style>
+  <stock-arrow id="arrow" />
   <div id="ticker" />
   <div id="last-sale" />
   <div id="change" />
 </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 {
@@ -94,7 +60,9 @@ class Stock extends SkyElement {
     if (model.percentChange > 0)
       changeString = "+" + changeString;
     change.textContent = changeString;
-    change.style['background-color'] = colorForPercentChange(model.percentChange);
+
+    StockArrow arrow = shadowRoot.getElementById('arrow');
+    arrow.change = model.percentChange;
   }
 }