card slides up

googlearchive · Apr 24, 2014 · 70f426c · 70f426c
1 parent 03b6726
commit 70f426c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/sampler-scaffold.css b/sampler-scaffold.css
@@ -8,7 +8,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 */
 
 #drawerPanel {
-  background-color: #eee;
+  background-color: #fafafa;
 }
 
 [drawer] {
@@ -31,32 +31,41 @@ core-toolbar {
   background-color: #4F7DC9;
 }
 
-.card {
+#card {
   display: block;
   margin: 128px 60px 60px 100px;
   box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 4px, rgba(0, 0, 0, 0.14902) 0px 0px 3px;
 }
 
-/*@polyfill .card > * */
-.card > ::content > * {
+#card.transiting {
+  transition: 0.38s -webkit-transform ease-out;
+  transition: 0.38s transform ease-out;
+}
+
+/*@polyfill #card > * */
+#card > ::content > * {
   display: none;
   background-color: #fff;
 }
 
-/*@polyfill .card > .core-selected */
-.card > ::content > .core-selected {
+/*@polyfill #card > .core-selected */
+#card > ::content > .core-selected {
   display: block;
 }
 
 #drawerPanel[narrow] [main] {
   background-color: #fff;
 }
 
-#drawerPanel[narrow] .card {
+#drawerPanel[narrow] #card {
   margin: 0;
   box-shadow: none;
 }
 
 #drawerPanel:not([narrow]) #menuButton {
   display: none;
 }
+
+.toolbar-label {
+  letter-spacing: 0.05em;
+}
diff --git a/sampler-scaffold.html b/sampler-scaffold.html
@@ -28,28 +28,28 @@
 
   <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" responsiveWidth="{{responsiveWidth}}">
 
-    <core-header-panel drawer mode="waterfall-tall">
+    <core-header-panel drawer mode="waterfall">
 
-      <core-toolbar>
+      <core-toolbar class="{{ {tall : !narrow} | tokenList }}">
         <div>{{label}}</div>
       </core-toolbar>
 
       <core-menu selected="{{selected}}" selectedModel="{{sampleName}}" on-core-activate="{{togglePanel}}">
         <template repeat="{{sampleNames}}">
-          <core-item src="code.png" label="{{}}"></core-item>
+          <core-item src="code.png" label="{{name}}"></core-item>
         </template>
       </core-menu>
 
     </core-header-panel>
 
-    <core-header-panel id="mainHeaderPanel" main mode="{{narrow ? 'waterfall-tall' : 'cover'}}">
+    <core-header-panel id="mainHeaderPanel" main mode="{{narrow ? 'waterfall' : 'cover'}}">
 
-      <core-toolbar class="tall">
+      <core-toolbar class="{{ {tall : !narrow} | tokenList }}">
         <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
-        <div>{{sampleName}}</div>
+        <div class="toolbar-label">{{sampleName.tag ? '&lt;' + sampleName.tag + '&gt;' : sampleName.name}}</div>
       </core-toolbar>
 
-      <core-selector class="card" selected="{{selected}}" selectedItem="{{sample}}">
+      <core-selector id="card" selected="{{selected}}" selectedItem="{{sample}}" on-transitionend="{{cardTransitingDone}}">
 
         <content id="samples" select="*"></content>
 
@@ -64,22 +64,52 @@
 
   Polymer('sampler-scaffold', {
 
-    selected: 0,
-
     responsiveWidth: '800px',
 
     attached: function() {
       this.updateMenu();
+      this.async(function() {
+        this.selected = 0;
+      }, null, 300);
     },
 
     updateMenu: function() {
       this.sampleNames = [];
       Array.prototype.forEach.call(this.$.samples.getDistributedNodes(), 
         function(sample) {
-          this.sampleNames.push(sample.getAttribute('label'));
+          this.sampleNames.push({
+            name: sample.getAttribute('label'),
+            tag: sample.getAttribute('tag')
+          });
         }.bind(this));
     },
 
+    selectedChanged: function() {
+      if (this.narrow) {
+        return;
+      }
+      this.$.card.classList.remove('transiting');
+      this.$.card.style.display = 'none';
+      this.async(function() {
+        this.$.card.style.display = 'block';
+        this.moveCard(this.$.mainHeaderPanel.offsetHeight);
+        this.async(function() {
+          this.$.card.classList.add('transiting');
+          this.moveCard(null);
+        }, null, 100);
+      });
+    },
+
+    moveCard: function(y) {
+      var s = this.$.card.style;
+      s.webkitTransform = s.transform = 
+          y ? 'translate3d(0, ' + y + 'px,0)' : null;
+    },
+
+    cardTransitingDone: function() {
+      this.$.card.classList.remove('transiting');
+    },
+
     togglePanel: function() {
       this.$.drawerPanel.togglePanel();
     }

diff --git a/sampler-section.html b/sampler-section.html
@@ -69,7 +69,6 @@
 
     frameLoaded: function() {
       this.loaded = true;
-      this.updateFrameHeight();
       this.frame.contentWindow.addEventListener('polymer-ready', function() {
         setTimeout(this.updateFrameHeight.bind(this), 100);
       }.bind(this));