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

Side by Side Diff: sky/examples/appish/example-scaffold.sky

Issue 942413002: Port sky-drawer to Dart (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/appish.sky ('k') | sky/examples/appish/index.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.sky" /> 6 <import src="/sky/framework/sky-drawer.sky" />
7 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> 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 9
10 <sky-element name="example-scaffold"> 10 <sky-element>
11 <template> 11 <template>
12 <style> 12 <style>
13 :host { 13 :host {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 height: -webkit-fill-available; 16 height: -webkit-fill-available;
17 } 17 }
18 sky-drawer { 18 sky-drawer {
19 position: absolute; 19 position: absolute;
20 z-index: 1; 20 z-index: 1;
(...skipping 26 matching lines...) Expand all
47 } 47 }
48 sky-scrollable { 48 sky-scrollable {
49 flex: 1; 49 flex: 1;
50 background-color: green; 50 background-color: green;
51 } 51 }
52 </style> 52 </style>
53 <sky-drawer id="drawer"> 53 <sky-drawer id="drawer">
54 <content select=".menu"/> 54 <content select=".menu"/>
55 </sky-drawer> 55 </sky-drawer>
56 <sky-toolbar> 56 <sky-toolbar>
57 <div id="menu" on-click="handleMenuClick"/> 57 <div id="menu" />
58 <content id="title" select=".title"/> 58 <content id="title" select=".title"/>
59 </sky-toolbar> 59 </sky-toolbar>
60 <sky-scrollable> 60 <sky-scrollable>
61 <content /> 61 <content />
62 </sky-scrollable> 62 </sky-scrollable>
63 </template> 63 </template>
64 <script> 64 <script>
65 module.exports = class extends SkyElement { 65 import "dart:sky";
66 created() { 66
67 this.toolbar_ = null; 67 @Tagname('example-scaffold')
68 class ExampleScaffold extends SkyElement {
69 Element _drawer;
70
71 void shadowRootReady() {
72 _drawer = shadowRoot.getElementById('drawer');
73 Element menu = shadowRoot.getElementById('menu');
74 menu.addEventListener('click', _handleMenuClick);
68 } 75 }
69 76
70 shadowRootReady() { 77 void _handleMenuClick(_) {
71 this.toolbar_ = this.shadowRoot.getElementById('drawer'); 78 _drawer.toggle();
72 } 79 }
80 }
73 81
74 handleMenuClick() { 82 _init(script) => register(script, ExampleScaffold);
75 this.toolbar_.toggle();
76 }
77 }.register();
78 </script> 83 </script>
79 </sky-element> 84 </sky-element>
OLDNEW
« no previous file with comments | « sky/examples/appish.sky ('k') | sky/examples/appish/index.sky » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698