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-header.sky" /> |
6 <import src="/sky/framework/sky-drawer.sky" /> | 7 <import src="/sky/framework/sky-drawer.sky" /> |
7 <import src="/sky/framework/sky-element.sky" /> | 8 <import src="/sky/framework/sky-element.sky" /> |
8 <import src="/sky/framework/sky-icon.sky" /> | 9 <import src="/sky/framework/sky-icon.sky" /> |
| 10 <import src="/sky/framework/sky-menu-divider.sky" /> |
| 11 <import src="/sky/framework/sky-menu-item.sky" /> |
9 <import src="/sky/framework/sky-scrollable.sky" /> | 12 <import src="/sky/framework/sky-scrollable.sky" /> |
10 <import src="/sky/framework/sky-toolbar.sky" /> | 13 <import src="/sky/framework/sky-toolbar.sky" /> |
11 <import src="stock.sky" as='view'/> | 14 <import src="stock.sky" as='view'/> |
12 <import src='companylist.sky' as='model'/> | 15 <import src='companylist.sky' as='model'/> |
13 | 16 |
14 <sky-element> | 17 <sky-element> |
15 <template> | 18 <template> |
16 <style> | 19 <style> |
17 :host { | 20 :host { |
18 display: flex; | 21 display: flex; |
19 flex-direction: column; | 22 flex-direction: column; |
20 height: -webkit-fill-available; | 23 height: -webkit-fill-available; |
21 font-family: 'Roboto Regular', 'Helvetica'; | 24 font-family: 'Roboto Regular', 'Helvetica'; |
22 font-size: 16px; | 25 font-size: 16px; |
23 } | 26 } |
24 sky-drawer { | 27 sky-drawer { |
25 position: absolute; | 28 position: absolute; |
26 z-index: 2; | 29 z-index: 2; |
27 top: 0; | 30 top: 0; |
28 left: 0; | 31 left: 0; |
29 bottom: 0; | 32 bottom: 0; |
30 right: 0; | 33 right: 0; |
31 } | 34 } |
32 sky-toolbar { | 35 sky-toolbar { |
33 z-index: 1; | 36 z-index: 1; |
34 background-color: #3F51B5; | 37 background-color: #3F51B5; |
35 color: white; | 38 color: white; |
36 } | 39 } |
37 sky-icon { | 40 sky-icon { |
38 display: flex; | |
39 justify-content: center; | |
40 align-items: center; | |
41 padding: 8px; | 41 padding: 8px; |
42 margin: 0 4px; | 42 margin: 0 4px; |
43 color: black; | |
44 } | 43 } |
45 #title { | 44 #title { |
46 flex: 1; | 45 flex: 1; |
47 margin: 0 4px; | 46 margin: 0 4px; |
48 } | 47 } |
49 sky-scrollable { | 48 sky-scrollable { |
50 flex: 1; | 49 flex: 1; |
51 } | 50 } |
52 </style> | 51 </style> |
53 <sky-drawer id="drawer"> | 52 <sky-drawer id="drawer"> |
54 I am drawer | 53 <sky-drawer-header> |
| 54 Stocks |
| 55 </sky-drawer-header> |
| 56 <sky-menu-item icon="content/inbox">Inbox</sky-menu-item> |
| 57 <sky-menu-item icon="content/drafts">Drafts</sky-menu-item> |
| 58 <sky-menu-divider /> |
| 59 <sky-menu-item icon="action/settings">Settings</sky-menu-item> |
| 60 <sky-menu-item icon="action/help">Help & feedback</sky-menu-item> |
55 </sky-drawer> | 61 </sky-drawer> |
56 <sky-toolbar level="2"> | 62 <sky-toolbar level="2"> |
57 <sky-icon id="menu" type="navigation/menu_white" size="24" /> | 63 <sky-icon id="menu" type="navigation/menu_white" size="24" /> |
58 <div id="title">I am a stocks app</div> | 64 <div id="title">I am a stocks app</div> |
59 <sky-icon type="action/search_white" size="24" /> | 65 <sky-icon type="action/search_white" size="24" /> |
60 <sky-icon type="navigation/more_vert_white" size="24" /> | 66 <sky-icon type="navigation/more_vert_white" size="24" /> |
61 </sky-toolbar> | 67 </sky-toolbar> |
62 <sky-scrollable id='stock_list'> | 68 <sky-scrollable id='stock_list'> |
63 </sky-scrollable> | 69 </sky-scrollable> |
64 </template> | 70 </template> |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
97 } | 103 } |
98 | 104 |
99 void _handleMenuClick(_) { | 105 void _handleMenuClick(_) { |
100 _drawer.toggle(); | 106 _drawer.toggle(); |
101 } | 107 } |
102 } | 108 } |
103 | 109 |
104 _init(script) => register(script, Stocks); | 110 _init(script) => register(script, Stocks); |
105 </script> | 111 </script> |
106 </sky-element> | 112 </sky-element> |
OLD | NEW |