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

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

Issue 951413002: Make the stocks drawer look more realistic (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 | « no previous file | sky/framework/sky-drawer.sky » ('j') | 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-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 &amp; 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
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>
OLDNEW
« no previous file with comments | « no previous file | sky/framework/sky-drawer.sky » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698