modernize you-tube app

googlearchive · Oct 11, 2013 · 135400b · 135400b
1 parent 89effe6
commit 135400b
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 117 deletions.
diff --git a/youtube/index.html b/youtube/index.html
@@ -11,9 +11,10 @@
     <title>YouTube</title>
     <meta charset="UTF-8">
     <script src="../../polymer/polymer.js"></script>
+    <link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
     <link rel="import" href="src/yt-app.html">
   </head>
-  <body>
-    <yt-app></yt-app>
+  <body class="polymer-ui-full-bleed">
+    <yt-app class="polymer-ui-fit"></yt-app>
   </body>
 </html>
diff --git a/youtube/src/css/yt-app.css b/youtube/src/css/yt-app.css
@@ -3,28 +3,25 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
-#panels {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-  min-height: 0;
-  -webkit-user-select: none;
+@host {
+  :scope {
+    font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
 }
 
-#panels > * {
+[main] {
+  position: absolute !important;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: white;
+  overflow: hidden;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5);
   background: white;
 }
 
-#videoPanel {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-flex-flow: column;
-  flex-direction: column;
-}
-
 #listPanel {
   width: 360px;
   display: -webkit-box;
@@ -38,30 +35,11 @@
   color: white;
 }
 
-#listPanel.narrow-layout {
-  left: 0;
-  right: 60px;
-  width: auto;
-}
-
-#morePanel {
-  right: 0;
-  left: auto;
-  width: 200px;
-  padding: 20px;
-  color: #EBEBEB;
-  background: #333;
-}
-
-.list {
+#list {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   flex: 1;
   display: block;
-  /*
-  TODO(sorvell): styling changes due to tabIndex=-1 on panels
-  must isolate. Use max-height to avoid scrolling being compeltely broken.
-  */
   max-height: 100%;
   min-height: 0;
   overflow: auto;
@@ -73,7 +51,8 @@ input {
   -webkit-flex: 1;
   flex: 1;
   -webkit-appearance: none;
-  background: whitesmoke;
+  color: white;
+  background-color: transparent;
   opacity: 0.8;
   font-size: 18px;
   padding: 0 16px;
@@ -95,6 +74,6 @@ input {
   cursor: pointer;
 }
 
-.item.selected {
-  background-color: #777;
+.item.polymer-selected {
+  background-color: #000;
 }
diff --git a/youtube/src/elements.html b/youtube/src/elements.html
@@ -0,0 +1,14 @@
+<!--
+/*
+ * Copyright 2013 The Polymer Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
+<link rel="import" href="../../../polymer-elements/polymer-ajax/polymer-ajax.html">
+<link rel="import" href="../../../polymer-elements/polymer-selector/polymer-selector.html">
+<link rel="import" href="../../../more-elements/Youtube/yt-search/yt-search.html"/>
+<link rel="import" href="../../../more-elements/Youtube/yt-video/yt-video.html"/>
+<link rel="import" href="../../../more-elements/speech-mic/speech-mic.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-scaffold/polymer-ui-scaffold.html">
diff --git a/youtube/src/yt-app.html b/youtube/src/yt-app.html
@@ -5,50 +5,47 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../../../toolkit-ui/elements/g-app.html">
-<link rel="import" href="../../../toolkit-ui/elements/g-panels.html">
-<link rel="import" href="../../../toolkit-ui/elements/g-icon-button.html">
-<link rel="import" href="../../../toolkit-ui/elements/g-toolbar.html">
-<link rel="import" href="../../../toolkit-ui/elements/g-ajax.html">
-<link rel="import" href="../../../toolkit-ui/elements/g-selector.html">
-<link rel="import" href="../../../more-elements/Youtube/yt-search/yt-search.html"/>
-<link rel="import" href="../../../more-elements/speech-mic/speech-mic.html"/>
-<link rel="import" href="yt-videopanel.html">
-<polymer-element name="yt-app" extends="g-app">
+<link rel="import" href="elements.html">
+<polymer-element name="yt-app" theme="polymer-ui-light-theme">
   <template>
     <link rel="stylesheet" href="css/yt-app.css">
-    <yt-search id="search" query="{{query}}"
-         list="{{list}}">
-    </yt-search>
-    <g-panels id="panels" transition="flow">
-      <section id="listPanel">
-        <g-toolbar>
-          <input value="{{query}}" autofocus></input>
-          <speech-mic transcript="{{query}}"></speech-mic>
-        </g-toolbar>
-        <g-selector class="list" on-activate="listToggle" selectedModel="{{selectedModel}}">
+    <link rel="stylesheet" href="../../../polymer-ui-elements/basic.css">
+    <polymer-ui-scaffold id="panels" class="polymer-ui-fit" menuActive="{{menuActive}}" on-polymer-grid-layout="autoFocus">
+      <div id="listPanel" navigation>
+        <yt-search id="search" query="{{query}}" list="{{list}}"></yt-search>
+        <polymer-ui-toolbar theme="polymer-ui-dark-theme">
+          <input value="{{query}}" x-webkit-speech autofocus></input>
+        </polymer-ui-toolbar>
+        <polymer-selector id="list" on-polymer-activate="listActivateAction">
           <template repeat="{{list}}">
             <div class="item">{{title.$t}}</div>
           </template>
-        </g-selector>
-      </section>
-      <yt-videopanel id="videoPanel" video="{{selectedModel}}">
-        <g-icon-button class="left" touch-action="none" src="images/menu.png" on-tap="listToggle"></g-icon-button>
-        <g-icon-button src="images/grid.png" touch-action="none" on-tap="moreToggle"></g-icon-button>
-      </yt-videopanel>
-      <section id="morePanel" class="right" touch-action="none" on-tap="moreToggle">
-        More Stuff!
-      </section>
-    </g-panels>
+        </polymer-selector>
+      </div>
+      <div tool>
+        <template if="{{video}}">
+          {{video.title.$t}}
+        </template>
+      </div>
+      <yt-video  id="videoPanel" main videoEntry="{{video}}"></yt-video>
+    </polymer-ui-scaffold>
   </template>
   <script>
     Polymer('yt-app', {
       query: 'chrome commercial',
-      listToggle: function() {
-        this.$.panels.toggleBetween('listPanel', 'videoPanel');
+      menuActive: true,
+      autoFocus: function() {
+        var node = this.shadowRoot.querySelector('[autofocus]');
+        if (node) {
+          node.focus();
+        }
       },
-      moreToggle: function() {
-        this.$.panels.toggleBetween('morePanel', 'videoPanel');
+      queryChanged: function() {
+        this.$.list.selected = null;
+      },
+      listActivateAction: function() {
+        this.video = this.$.list.selectedModel;
+        this.menuActive = false;
       }
     });
   </script>

diff --git a/youtube/src/yt-videopanel.html b/youtube/src/yt-videopanel.html