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-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-icon.sky" /> | 8 <import src="/sky/framework/sky-icon.sky" /> |
9 <import src="/sky/framework/sky-scrollable.sky" /> | 9 <import src="/sky/framework/sky-scrollable.sky" /> |
10 <import src="stock.sky" as='view'/> | 10 <import src="stock.sky" as='view'/> |
(...skipping 18 matching lines...) Expand all Loading... |
29 right: 0; | 29 right: 0; |
30 } | 30 } |
31 sky-toolbar { | 31 sky-toolbar { |
32 display: flex; | 32 display: flex; |
33 align-items: center; | 33 align-items: center; |
34 background-color: #3F51B5; | 34 background-color: #3F51B5; |
35 color: white; | 35 color: white; |
36 height: 56px; | 36 height: 56px; |
37 box-shadow: 0px 4px 4px grey; | 37 box-shadow: 0px 4px 4px grey; |
38 } | 38 } |
39 #menu { | 39 sky-icon { |
40 display: flex; | 40 display: flex; |
41 justify-content: center; | 41 justify-content: center; |
42 align-items: center; | 42 align-items: center; |
43 padding: 7px; | 43 padding: 7px; |
44 margin: 0 8px; | 44 margin: 0 4px; |
45 color: black; | 45 color: black; |
46 } | 46 } |
47 #title { | 47 #title { |
48 flex: 1; | 48 flex: 1; |
49 margin: 0 8px; | 49 margin: 0 4px; |
50 } | 50 } |
51 sky-scrollable { | 51 sky-scrollable { |
52 flex: 1; | 52 flex: 1; |
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 <sky-icon id="menu" type="navigation/menu_white" size="24" /> | 59 <sky-icon id="menu" type="navigation/menu_white" size="24" /> |
60 I am a stocks app | 60 <div id="title">I am a stocks app</div> |
| 61 <sky-icon type="action/search_white" size="24" /> |
| 62 <sky-icon type="navigation/more_vert_white" size="24" /> |
61 </sky-toolbar> | 63 </sky-toolbar> |
62 <sky-scrollable id='stock_list'> | 64 <sky-scrollable id='stock_list'> |
63 </sky-scrollable> | 65 </sky-scrollable> |
64 </template> | 66 </template> |
65 <script> | 67 <script> |
66 import "dart:sky"; | 68 import "dart:sky"; |
67 import "dart:math"; | 69 import "dart:math"; |
68 | 70 |
69 List pick(List list, int count) { | 71 List pick(List list, int count) { |
70 var rng = new Random(); | 72 var rng = new Random(); |
(...skipping 26 matching lines...) Expand all Loading... |
97 } | 99 } |
98 | 100 |
99 void _handleMenuClick(_) { | 101 void _handleMenuClick(_) { |
100 _drawer.toggle(); | 102 _drawer.toggle(); |
101 } | 103 } |
102 } | 104 } |
103 | 105 |
104 _init(script) => register(script, Stocks); | 106 _init(script) => register(script, Stocks); |
105 </script> | 107 </script> |
106 </sky-element> | 108 </sky-element> |
OLD | NEW |