OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="/sky/framework/sky-element.sky" /> | 6 <import src="/sky/framework/sky-element.sky" /> |
| 7 <import src="stock-arrow.sky" /> |
7 | 8 |
8 <sky-element> | 9 <sky-element> |
9 <template> | 10 <template> |
10 <style> | 11 <style> |
11 :host { | 12 :host { |
12 // TODO(eseidel): Why does setting height here make this too big? | 13 // TODO(eseidel): Why does setting height here make this too big? |
13 // height: 48px; | 14 // height: 48px; |
14 max-height: 48px; | 15 max-height: 48px; |
15 display: flex; | 16 display: flex; |
| 17 align-items: center; |
16 border-bottom: 1px solid #F4F4F4; | 18 border-bottom: 1px solid #F4F4F4; |
17 padding-top: 16px; | 19 padding-top: 16px; |
18 padding-left: 16px; | 20 padding-left: 16px; |
19 padding-right: 16px; | 21 padding-right: 16px; |
20 padding-bottom: 20px; | 22 padding-bottom: 20px; |
21 } | 23 } |
| 24 stock-arrow { |
| 25 margin-right: 16px; |
| 26 } |
22 #ticker { | 27 #ticker { |
23 flex-grow: 1; | 28 flex: 1; |
| 29 font-family: 'Roboto Medium', 'Helvetica'; |
24 } | 30 } |
25 #last-sale { | 31 #last-sale { |
26 padding-right: 20px; | 32 text-align: right; |
| 33 padding-right: 16px; |
27 } | 34 } |
28 #change { | 35 #change { |
29 border-radius: 5px; | 36 color: #8A8A8A; |
30 min-width: 72px; | |
31 padding: 2px; | |
32 padding-right: 10px; | |
33 text-align: right; | 37 text-align: right; |
34 } | 38 } |
35 </style> | 39 </style> |
| 40 <stock-arrow id="arrow" /> |
36 <div id="ticker" /> | 41 <div id="ticker" /> |
37 <div id="last-sale" /> | 42 <div id="last-sale" /> |
38 <div id="change" /> | 43 <div id="change" /> |
39 </template> | 44 </template> |
40 <script> | 45 <script> |
41 import "dart:sky"; | 46 import "dart:sky"; |
42 import "dart:math"; | |
43 | |
44 List<String> redColors = [ | |
45 '#FFEBEE', | |
46 '#FFCDD2', | |
47 '#EF9A9A', | |
48 '#E57373', | |
49 '#EF5350', | |
50 '#F44336', | |
51 '#E53935', | |
52 '#D32F2F', | |
53 '#C62828', | |
54 '#B71C1C', | |
55 ]; | |
56 | |
57 List<String> greenColors = [ | |
58 '#E8F5E9', | |
59 '#C8E6C9', | |
60 '#A5D6A7', | |
61 '#81C784', | |
62 '#66BB6A', | |
63 '#4CAF50', | |
64 '#43A047', | |
65 '#388E3C', | |
66 '#2E7D32', | |
67 '#1B5E20', | |
68 ]; | |
69 | |
70 int colorIndexForPercentChange(double percentChange) { | |
71 // Currently the max is 10%. | |
72 double maxPercent = 10.0; | |
73 return max(0, ((percentChange.abs() / maxPercent) * greenColors.length).floor(
)); | |
74 } | |
75 | |
76 String colorForPercentChange(double percentChange) { | |
77 if (percentChange > 0) | |
78 return greenColors[colorIndexForPercentChange(percentChange)]; | |
79 return redColors[colorIndexForPercentChange(percentChange)]; | |
80 } | |
81 | 47 |
82 @Tagname('stock') | 48 @Tagname('stock') |
83 class Stock extends SkyElement { | 49 class Stock extends SkyElement { |
84 var model; // model.Stock | 50 var model; // model.Stock |
85 | 51 |
86 void shadowRootReady() { | 52 void shadowRootReady() { |
87 shadowRoot.getElementById('ticker').textContent = model.symbol; | 53 shadowRoot.getElementById('ticker').textContent = model.symbol; |
88 | 54 |
89 Element lastSale = shadowRoot.getElementById('last-sale'); | 55 Element lastSale = shadowRoot.getElementById('last-sale'); |
90 lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}"; | 56 lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}"; |
91 | 57 |
92 Element change = shadowRoot.getElementById('change'); | 58 Element change = shadowRoot.getElementById('change'); |
93 String changeString = "${model.percentChange.toStringAsFixed(2)}%"; | 59 String changeString = "${model.percentChange.toStringAsFixed(2)}%"; |
94 if (model.percentChange > 0) | 60 if (model.percentChange > 0) |
95 changeString = "+" + changeString; | 61 changeString = "+" + changeString; |
96 change.textContent = changeString; | 62 change.textContent = changeString; |
97 change.style['background-color'] = colorForPercentChange(model.percentChange
); | 63 |
| 64 StockArrow arrow = shadowRoot.getElementById('arrow'); |
| 65 arrow.change = model.percentChange; |
98 } | 66 } |
99 } | 67 } |
100 | 68 |
101 _init(script) => register(script, Stock); | 69 _init(script) => register(script, Stock); |
102 </script> | 70 </script> |
103 </sky-element> | 71 </sky-element> |
OLD | NEW |