OLD | NEW |
| (Empty) |
1 <!-- | |
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 | |
4 // found in the LICENSE file. | |
5 --> | |
6 <import src="/sky/framework/elements/material-element.sky" /> | |
7 <import src="/sky/framework/elements/sky-element.sky" /> | |
8 <import src="stock-arrow.sky" /> | |
9 | |
10 <sky-element> | |
11 <template> | |
12 <style> | |
13 :host { | |
14 // TODO(eseidel): Why does setting height here make this too big? | |
15 // height: 48px; | |
16 max-height: 48px; | |
17 display: flex; | |
18 align-items: center; | |
19 border-bottom: 1px solid #F4F4F4; | |
20 padding-top: 16px; | |
21 padding-left: 16px; | |
22 padding-right: 16px; | |
23 padding-bottom: 20px; | |
24 } | |
25 stock-arrow { | |
26 margin-right: 16px; | |
27 } | |
28 #ticker { | |
29 flex: 1; | |
30 font-family: 'Roboto Medium', 'Helvetica'; | |
31 } | |
32 #last-sale { | |
33 text-align: right; | |
34 padding-right: 16px; | |
35 } | |
36 #change { | |
37 color: #8A8A8A; | |
38 text-align: right; | |
39 } | |
40 </style> | |
41 <stock-arrow id="arrow" /> | |
42 <div id="ticker" /> | |
43 <div id="last-sale" /> | |
44 <div id="change" /> | |
45 </template> | |
46 <script> | |
47 import "dart:sky"; | |
48 | |
49 @Tagname('stock') | |
50 class Stock extends MaterialElement { | |
51 var model; // model.Stock | |
52 | |
53 void shadowRootReady() { | |
54 shadowRoot.getElementById('ticker').textContent = model.symbol; | |
55 | |
56 Element lastSale = shadowRoot.getElementById('last-sale'); | |
57 lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}"; | |
58 | |
59 Element change = shadowRoot.getElementById('change'); | |
60 String changeString = "${model.percentChange.toStringAsFixed(2)}%"; | |
61 if (model.percentChange > 0) | |
62 changeString = "+" + changeString; | |
63 change.textContent = changeString; | |
64 | |
65 StockArrow arrow = shadowRoot.getElementById('arrow'); | |
66 arrow.change = model.percentChange; | |
67 } | |
68 } | |
69 | |
70 _init(script) => register(script, Stock); | |
71 </script> | |
72 </sky-element> | |
OLD | NEW |