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 | 7 |
8 <sky-element attributes="ticker:string"> | 8 <sky-element> |
9 <template> | 9 <template> |
10 <style> | 10 <style> |
11 :host { | 11 :host { |
12 height: 50px; | 12 height: 50px; |
13 display: flex; | 13 display: flex; |
14 width: 100%; | 14 width: 100%; |
15 border: 1px solid black; | 15 border: 1px solid black; |
16 } | 16 } |
17 #ticker { | 17 #ticker { |
18 padding: 10px; | 18 padding: 10px; |
19 flex-grow: 1; | 19 flex-grow: 1; |
20 } | 20 } |
| 21 #last-sale { |
| 22 padding: 10px; |
| 23 } |
21 #change { | 24 #change { |
22 padding: 10px; | 25 padding: 10px; |
23 border-radius: 5px; | 26 border-radius: 5px; |
24 min-width: 60px; | 27 min-width: 70px; |
25 text-align: right; | 28 text-align: right; |
26 } | 29 } |
27 .positive { | 30 .positive { |
28 background-color: green; | 31 background-color: green; |
29 } | 32 } |
30 .negative { | 33 .negative { |
31 background-color: red; | 34 background-color: red; |
32 } | 35 } |
33 </style> | 36 </style> |
34 <div id="ticker" /> | 37 <div id="ticker" /> |
| 38 <div id="last-sale" /> |
35 <div id="change" /> | 39 <div id="change" /> |
36 </template> | 40 </template> |
37 <script> | 41 <script> |
38 import "dart:sky"; | 42 import "dart:sky"; |
39 | 43 |
40 @Tagname('stock') | 44 @Tagname('stock') |
41 class Stock extends SkyElement { | 45 class Stock extends SkyElement { |
42 var model; // model.Stock | 46 var model; // model.Stock |
43 | 47 |
44 void shadowRootReady() { | 48 void shadowRootReady() { |
45 Element ticker = shadowRoot.getElementById('ticker'); | 49 shadowRoot.getElementById('ticker').textContent = model.symbol; |
46 ticker.textContent = model.symbol; | 50 |
| 51 Element lastSale = shadowRoot.getElementById('last-sale'); |
| 52 lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}"; |
47 | 53 |
48 Element change = shadowRoot.getElementById('change'); | 54 Element change = shadowRoot.getElementById('change'); |
49 change.textContent = "${model.percentChange.toStringAsFixed(2)}%"; | 55 String changeString = "${model.percentChange.toStringAsFixed(2)}%"; |
| 56 if (model.percentChange > 0) |
| 57 changeString = "+" + changeString; |
| 58 change.textContent = changeString; |
50 change.classList.add((model.percentChange < 0) ? 'negative' : 'positive'); | 59 change.classList.add((model.percentChange < 0) ? 'negative' : 'positive'); |
51 } | 60 } |
52 } | 61 } |
53 | 62 |
54 _init(script) => register(script, Stock); | 63 _init(script) => register(script, Stock); |
55 </script> | 64 </script> |
56 </sky-element> | 65 </sky-element> |
OLD | NEW |