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

Unified Diff: third_party/polymer/components-chromium/core-animated-pages/demos/music.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/music.html
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/music.html b/third_party/polymer/components-chromium/core-animated-pages/demos/music.html
new file mode 100644
index 0000000000000000000000000000000000000000..8cb66e002484aafe275e5a7817197073e3efce9c
--- /dev/null
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/music.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html>
+<head>
+ <title>core-animated-pages</title>
+
+ <script src="../../platform/platform.js"></script>
+ <link href="../core-animated-pages.html" rel="import">
+
+ <style>
+ body {
+ font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ margin: 0;
+ background: #f1f1f1;
+ }
+
+ .green {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: 350px;
+ background: #70c26f;
+ }
+ </style>
+</head>
+<body>
+
+ <polymer-element name="music-demo">
+ <template>
+
+ <style>
+ .chip-container {
+ position: absolute;
+ top: 275px;
+ right: 0;
+ left: 0;
+ text-align: center;
+ }
+
+ .chip {
+ display: inline-block;
+ position: relative;
+ border-radius: 3px;
+ margin: 4px;
+ overflow: hidden;
+ text-align: start;
+ background-color: #fff;
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
+ }
+
+ .chip-top {
+ width: 200px;
+ height: 200px;
+ }
+
+ .chip-bottom {
+ padding: 8px;
+ line-height: 1.5;
+ }
+
+ .chip-album-title {
+ font-weight: bold;
+ }
+
+ #details {
+ padding: 200px 10% 0;
+ }
+
+ .card {
+ height: 400px;
+ border-radius: 3px;
+ text-align: start;
+ overflow: hidden;
+ background: #fff;
+ box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ }
+
+ .card-left {
+ width: 400px;
+ }
+
+ .card-right {
+ padding: 24px;
+ }
+
+ .card-icon {
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
+ margin-right: 16px;
+ }
+
+ .card-album-title {
+ font-size: 2em;
+ }
+ </style>
+
+ <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
+
+ <section>
+
+ <div class="chip-container" hero-p on-tap="{{transition}}">
+
+ <template repeat="{{items as item}}">
+
+ <div class="chip" hero-id="{{item.artist}}-{{item.album}}" hero?="{{selectedAlbum === item }}">
+ <div class="chip-top" style="background:{{item.color}};" hero-id="{{item.artist}}-{{item.album}}-art" hero?="{{selectedAlbum === item}}"></div>
+ <div class="chip-bottom">
+ <div class="chip-album-title">{{item.album}}</div>
+ <div class="chip-artist">{{item.artist}}</div>
+ </div>
+ </div>
+
+ </template>
+
+ </div>
+ </section>
+
+ <section id="details">
+
+ <div class="card" layout horizontal hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}" hero on-tap="{{transition}}">
+ <div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}-art" hero></div>
+ <div class="card-right" flex>
+ <div layout horizontal center>
+ <div>
+ <div class="card-icon" style="background:{{selectedAlbum.color}};"></div>
+ </div>
+ <div flex>
+ <div class="card-album-title">{{selectedAlbum.album}}</div>
+ <div class="card-album-artist">{{selectedAlbum.artist}}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </section>
+
+ </core-animated-pages>
+
+ </template>
+ <script>
+
+ Polymer('music-demo', {
+
+ page: 0,
+
+ items: [
+ { artist: 'Tycho', album: 'Fragments', color: '#f4db33' },
+ { artist: 'Tycho', album: 'Past Prologue', color: '#972ff8' },
+ { artist: 'Tycho', album: 'Spectre', color: '#7dd6fe' },
+ { artist: 'Tycho', album: 'Awake', color: '#dc3c84' }
+ ],
+
+ selectedAlbum: null,
+
+ transition: function(e) {
+ if (this.page === 0 && e.target.templateInstance.model.item) {
+ this.selectedAlbum = e.target.templateInstance.model.item;
+ this.page = 1;
+ } else {
+ this.page = 0;
+ }
+ }
+ });
+
+ </script>
+ </polymer-element>
+
+ <div class="green"></div>
+
+ <music-demo></music-demo>
+</body>
+</html>

Powered by Google App Engine
This is Rietveld 408576698