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

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 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
OLDNEW
(Empty)
1 <link href="../../core-icons/core-icons.html" rel="import">
2 <link href="../../core-icon-button/core-icon-button.html" rel="import">
3 <link href="../core-animated-pages.html" rel="import">
4
5 <polymer-element name="nested-animated-pages">
6 <template>
7 <style>
8 :host {
9 display: block;
10 position: relative;
11 }
12
13 core-animated-pages {
14 position: absolute;
15 top: 0;
16 left: 0;
17 right: 0;
18 bottom: 0;
19 }
20
21 .tall-toolbar {
22 box-sizing: border-box;
23 height: 240px;
24 }
25
26 .tall-toolbar.colored {
27 fill: #fff;
28 color: #fff;
29 }
30
31 .tall-toolbar [flex] {
32 font-size: 1.5em;
33 }
34
35 core-icon-button {
36 margin: 16px;
37 }
38
39 .body {
40 background-color: #f1f1f1;
41 }
42
43 .square {
44 position: absolute;
45 width: 150px;
46 height: 150px;
47 left: 16px;
48 top: 175px;
49 }
50
51 </style>
52 <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedIt em}}" transitions="hero-transition" no-transition?="{{noTransition}}">
53
54 <section id="page1" cross-fade>
55 <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
56 <div layout horizontal center>
57 <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
58 <div flex>One</div>
59 <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core- icon-button>
60 </div>
61 <div flex></div>
62 </div>
63 <div flex class="body"></div>
64 </section>
65
66 <section layout vertical id="page2" cross-fade>
67 <div class="tall-toolbar" layout vertical>
68 <div layout horizontal center>
69 <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
70 <div flex>Two</div>
71 <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core- icon-button>
72 </div>
73 <div flex></div>
74 </div>
75 <div flex class="body"></div>
76 <div class="square" style="background-color:orange;" hero-id="thing" hero? ="{{page === 1 || !noTransition}}"></div>
77 </section>
78
79 </core-animated-pages>
80 </template>
81 <script>
82
83 Polymer({
84
85 publish: {
86 page: {value: 0}
87 },
88
89 selectedItem: null,
90 noTransition: true,
91
92 back: function() {
93 this.noTransition = true;
94 this.fire('nested-back');
95 },
96
97 transition: function() {
98 this.noTransition = false;
99 this.page = this.page === 0 ? 1 : 0;
100 }
101
102 });
103 </script>
104 </polymer-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698