Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(166)

Side by Side Diff: sky/examples/stocks/stocks.sky

Issue 950073002: Make the stocks app slightly prettier. (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « sky/examples/stocks/stock.sky ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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-drawer.sky" /> 6 <import src="/sky/framework/sky-drawer.sky" />
7 <import src="/sky/framework/sky-element.sky" /> 7 <import src="/sky/framework/sky-element.sky" />
8 <import src="/sky/framework/sky-scrollable.sky" /> 8 <import src="/sky/framework/sky-scrollable.sky" />
9 <import src="stock.sky" as='view'/> 9 <import src="stock.sky" as='view'/>
10 <import src='companylist.sky' as='model'/> 10 <import src='companylist.sky' as='model'/>
11 11
12 <sky-element> 12 <sky-element>
13 <template> 13 <template>
14 <style> 14 <style>
15 :host { 15 :host {
16 display: flex; 16 display: flex;
17 flex-direction: column; 17 flex-direction: column;
18 height: -webkit-fill-available; 18 height: -webkit-fill-available;
19 font: 'Helvetica';
19 } 20 }
20 sky-drawer { 21 sky-drawer {
21 position: absolute; 22 position: absolute;
22 z-index: 1; 23 z-index: 1;
23 top: 0; 24 top: 0;
24 left: 0; 25 left: 0;
25 bottom: 0; 26 bottom: 0;
26 right: 0; 27 right: 0;
27 } 28 }
28 sky-toolbar { 29 sky-toolbar {
(...skipping 13 matching lines...) Expand all
42 margin: 0 8px; 43 margin: 0 8px;
43 background-color: papayawhip; 44 background-color: papayawhip;
44 color: black; 45 color: black;
45 } 46 }
46 #title { 47 #title {
47 flex: 1; 48 flex: 1;
48 margin: 0 8px; 49 margin: 0 8px;
49 } 50 }
50 sky-scrollable { 51 sky-scrollable {
51 flex: 1; 52 flex: 1;
52 background-color: green;
53 } 53 }
54 </style> 54 </style>
55 <sky-drawer id="drawer"> 55 <sky-drawer id="drawer">
56 I am drawer 56 I am drawer
57 </sky-drawer> 57 </sky-drawer>
58 <sky-toolbar> 58 <sky-toolbar>
59 <div id="menu" /> 59 <div id="menu" />
60 I am a stocks app 60 I am a stocks app
61 </sky-toolbar> 61 </sky-toolbar>
62 <sky-scrollable id='stock_list'> 62 <sky-scrollable id='stock_list'>
63 </sky-scrollable> 63 </sky-scrollable>
64 </template> 64 </template>
65 <script> 65 <script>
66 import "dart:sky"; 66 import "dart:sky";
67 import "dart:math";
67 68
68 @Tagname('stocks') 69 @Tagname('stocks')
69 class Stocks extends SkyElement { 70 class Stocks extends SkyElement {
70 Element _drawer; 71 Element _drawer;
71 72
72 void shadowRootReady() { 73 void shadowRootReady() {
73 _drawer = shadowRoot.getElementById('drawer'); 74 _drawer = shadowRoot.getElementById('drawer');
74 Element menu = shadowRoot.getElementById('menu'); 75 Element menu = shadowRoot.getElementById('menu');
75 menu.addEventListener('click', _handleMenuClick); 76 menu.addEventListener('click', _handleMenuClick);
76 populateStockList(); 77 populateStockList();
77 } 78 }
78 79
79 void populateStockList() { 80 void populateStockList() {
80 Element stockList = shadowRoot.getElementById('stock_list'); 81 Element stockList = shadowRoot.getElementById('stock_list');
81 // Limit to first 100 to avoid taking seconds to load. 82 // Limit to 100 to avoid taking seconds to load.
83 var rng = new Random();
82 for (var i = 0; i < 100; i++) { 84 for (var i = 0; i < 100; i++) {
83 model.Stock stock = model.oracle.stocks[i]; 85 List<model.Stock> list = model.oracle.stocks;
84 stockList.appendChild(new view.Stock()..ticker = stock.symbol); 86 model.Stock stock = list[rng.nextInt(list.length)];
87 stockList.appendChild(new view.Stock()..model = stock);
85 } 88 }
86 } 89 }
87 90
88 void _handleMenuClick(_) { 91 void _handleMenuClick(_) {
89 _drawer.toggle(); 92 _drawer.toggle();
90 } 93 }
91 } 94 }
92 95
93 _init(script) => register(script, Stocks); 96 _init(script) => register(script, Stocks);
94 </script> 97 </script>
95 </sky-element> 98 </sky-element>
OLDNEW
« no previous file with comments | « sky/examples/stocks/stock.sky ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698