| 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 |