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

Unified 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, 3 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html b/third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html
new file mode 100644
index 0000000000000000000000000000000000000000..afe3c3f7b1e307fd5f03670be4dc9b9792102965
--- /dev/null
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html
@@ -0,0 +1,104 @@
+<link href="../../core-icons/core-icons.html" rel="import">
+<link href="../../core-icon-button/core-icon-button.html" rel="import">
+<link href="../core-animated-pages.html" rel="import">
+
+<polymer-element name="nested-animated-pages">
+<template>
+ <style>
+ :host {
+ display: block;
+ position: relative;
+ }
+
+ core-animated-pages {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ .tall-toolbar {
+ box-sizing: border-box;
+ height: 240px;
+ }
+
+ .tall-toolbar.colored {
+ fill: #fff;
+ color: #fff;
+ }
+
+ .tall-toolbar [flex] {
+ font-size: 1.5em;
+ }
+
+ core-icon-button {
+ margin: 16px;
+ }
+
+ .body {
+ background-color: #f1f1f1;
+ }
+
+ .square {
+ position: absolute;
+ width: 150px;
+ height: 150px;
+ left: 16px;
+ top: 175px;
+ }
+
+ </style>
+ <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
+
+ <section id="page1" cross-fade>
+ <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
+ <div layout horizontal center>
+ <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
+ <div flex>One</div>
+ <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
+ </div>
+ <div flex></div>
+ </div>
+ <div flex class="body"></div>
+ </section>
+
+ <section layout vertical id="page2" cross-fade>
+ <div class="tall-toolbar" layout vertical>
+ <div layout horizontal center>
+ <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
+ <div flex>Two</div>
+ <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
+ </div>
+ <div flex></div>
+ </div>
+ <div flex class="body"></div>
+ <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
+ </section>
+
+ </core-animated-pages>
+</template>
+<script>
+
+ Polymer({
+
+ publish: {
+ page: {value: 0}
+ },
+
+ selectedItem: null,
+ noTransition: true,
+
+ back: function() {
+ this.noTransition = true;
+ this.fire('nested-back');
+ },
+
+ transition: function() {
+ this.noTransition = false;
+ this.page = this.page === 0 ? 1 : 0;
+ }
+
+ });
+</script>
+</polymer-element>

Powered by Google App Engine
This is Rietveld 408576698