pica: port to use polymer-ui-elements instead of the deprecated

toolkit-ui.  After this change the only element pica is still using from
toolkit-ui is g-panels.

pica/components/css/pi-app.css

@@ -27,6 +27,10 @@
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
  }
+
+[hidden] {
+  display: none;
+}
 
 #panels, #contentPanels, #Topics {
   -webkit-box-flex: 1;

pica/components/css/pi-explore.css

@@ -41,7 +41,7 @@ pi-feed-viewer#viewer {
   right: 0;
 }
 
-#searchBox > g-icon {
+#searchBox > polymer-ui-icon {
   position: absolute;
   top: 13px;
   bottom: 0;

pica/components/css/pi-items-view.css

@@ -145,7 +145,7 @@
   cursor: pointer;
 }
 
-#more g-icon {
+#more polymer-ui-icon {
   padding-right: 10px;
 }
 

pica/components/css/pi-toolbar.css

@@ -3,13 +3,18 @@
   margin: 0;
 }
 
+[hidden] {
+	visibility: hidden;
+}
+
+/*@polyfill polymer-ui-toolbar > *:not(#actionbar) */
+content::-webkit-distributed(> *) {
+  margin: 0px 8px 0 8px;
+}
+
 @media screen and (max-width: 800px) {
-  /*@polyfill #actionbar > .toolbar > *:not(:last-child):not([hidden]) */
+  /*@polyfill #actionbar > *:not(:last-child):not([hidden]) */
   #actionbar content::-webkit-distributed(*:not(:last-child):not([hidden])) {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;

pica/components/pi-accounts.html

@@ -5,9 +5,9 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../../../toolkit-ui/elements/g-icon-button.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-button.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-item.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-button/polymer-ui-menu-button.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html"/>
 <link rel="import" href="pi-gfeeds.html"/>
 <polymer-element name="pi-accounts" attributes="accounts">
   <template>
@@ -21,48 +21,48 @@
       <template repeat="{{accounts.stocks}}">
         <div class="item">
           <div class="flex">{{}}</div>
-          <g-icon-button src="../images/clear.png" on-tap="removeStock"></g-icon-button>
+          <polymer-ui-icon-button icon="close" on-tap="removeStock"></polymer-ui-icon-button>
         </div>
       </template>
     </div>
     <div class="item">
       <div class="item-input-label">Symbol: </div>
       <input id="symbol" autocorrect="off" operation="addStock" on-keyup="keyupHandler" />
-      <g-icon-button src="../images/add.png" on-tap="addStock"></g-icon-button>
+      <polymer-ui-icon-button icon="plus" on-tap="addStock"></polymer-ui-icon-button>
     </div>
     <div class="header item">Topics</div>
     <div class="item accounts-title">Add New Feed</div>
     <div class="item no-border">
       <div class="item-input-label">Url: </div>
       <input id="feed" type="url" class="flex" operation="addFeed" on-keyup="keyupHandler" />
-      <g-icon-button src="../images/add.png" on-tap="addFeed"></g-icon-button>
+      <polymer-ui-icon-button icon="plus" on-tap="addFeed"></polymer-ui-icon-button>
     </div>
     <div class="item">
       <div class="item-input-label">Category: </div>
       <span class="category-select-value">{{selectedCategory}}</span>
-      <g-menu-button id="categorySelect" selected="{{selectedCategory}}" src="../images/arrow_dropdown.png">
+      <polymer-ui-menu-button id="categorySelect" selected="{{selectedCategory}}" icon="dropdown">
         <template repeat="{{accounts.categories}}">
-          <g-menu-item name="{{}}">{{}}</g-menu-item>
+          <polymer-ui-menu-item name="{{}}">{{}}</polmer-ui-menu-item>
         </template>
-      </g-menu-button>
+      </polymer-ui-menu-button>
     </div>
     <div class="item accounts-title">Add New Category</div>
     <div class="item">
       <div class="item-input-label">Name: </div>
       <input id="category" class="flex" operation='addCategory' on-keyup="keyupHandler" />
-      <g-icon-button src="../images/add.png" on-tap="addCategory"></g-icon-button>
+      <polymer-ui-icon-button icon="plus" on-tap="addCategory"></polymer-ui-icon-button>
     </div>
     <div>
       <template repeat="{{accounts.topics}}">
         <div class="item accounts-title">
-          <g-icon class="accounts-title-icon" src="../images/folder.png"></g-icon>
+          <polymer-ui-icon class="accounts-title-icon" icon="favorite"></polymer-ui-icon>
           <div class="flex">{{title}}</div>
-          <g-icon-button src="../images/clear.png" on-tap="removeTopic"></g-icon-button>
+          <polymer-ui-icon-button icon="close" on-tap="removeTopic"></polymer-ui-icon-button>
         </div>
         <template repeat="{{feed}}">
           <div class="item">
             <div class="flex accounts-feed-title">{{title}}</div>
-            <g-icon-button src="../images/clear.png" on-tap="removeFeed"></g-icon-button>
+            <polymer-ui-icon-button icon="close" on-tap="removeFeed"></polymer-ui-icon-button>
           </div>
         </template>
       </template>

pica/components/pi-app.html

@@ -6,8 +6,8 @@
  */
 -->
 <link rel="import" href="../../../toolkit-ui/elements/g-panels.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-item.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-ribbon.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html"/>
 <link rel="import" href="pi-toolbar.html"/>
 <link rel="import" href="pi-toolbar-buttons.html"/>
 <link rel="import" href="pi-feed-viewer.html"/>
@@ -19,20 +19,21 @@
   <template>
     <link rel="stylesheet" href="css/pi-app.css" />
     <g-panels id="panels" selected="{{selectedPanel}}" transition="flow" autoselect on-g-panels-select="panelSelectAction">
-      <g-ribbon id="ribbon" class="custom-panel" label="Pica" selected="{{ribbonSelected}}" valueattr="label" on-activate="showMain">
+      <polymer-ui-sidebar-menu id="ribbon" class="custom-panel" label="Pica" selected="{{ribbonSelected}}" valueattr="label" 
+          on-polymer-activate="showMain" theme="polymer-ui-dark-theme">
         <template if="{{activatedPanels.ribbon}}">
-          <g-menu-item label="Home" src="../images/ribbon_home_lightreg.png" iconsize="32"></g-menu-item>
-          <g-menu-item label="Topics" src="../images/ribbon_topics_lightreg.png" iconsize="32"></g-menu-item>
-          <g-menu-item label="Explore" src="../images/ribbon_explore_lightreg.png" iconsize="32"></g-menu-item>
-          <g-menu-item label="Accounts" src="../images/ribbon_accounts_lightreg.png" iconsize="32"></g-menu-item>
+          <polymer-ui-menu-item label="Home" src="../images/ribbon_home_lightreg.png"></polymer-ui-menu-item>
+          <polymer-ui-menu-item label="Topics" src="../images/ribbon_topics_lightreg.png"></polymer-ui-menu-item>
+          <polymer-ui-menu-item label="Explore" src="../images/ribbon_explore_lightreg.png"></polymer-ui-menu-item>
+          <polymer-ui-menu-item label="Accounts" src="../images/ribbon_accounts_lightreg.png"></polymer-ui-menu-item>
         </template>
-      </g-ribbon>
+      </polymer-ui-sidebar-menu>
       <div id="main" on-tap="showMain">
         <pi-toolbar label="{{toolbarLabel}}" nav="{{nav}}" hideActionbar="{{hideActionbar}}" on-nav-action="navAction">
           <pi-link-button id="linkButton" link="{{story.link}}" hidden?="{{hideLinkButton}}"></pi-link-button>
-          <pi-view-button id="viewButton" layout="{{selectedLayout}}" hidden?="{{hideViewButton}}"></pi-view-button>
-          <pi-action-button></pi-action-button>
-          <g-icon-button src="../images/refresh.png" on-tap="reloadAction"></g-icon-button>
+          <pi-view-button id="viewButton" layout="{{selectedLayout}}" halign="right" hidden?="{{hideViewButton}}"></pi-view-button>
+          <pi-action-button halign="right"></pi-action-button>
+          <polymer-ui-icon-button icon="refresh" on-tap="reloadAction"></polymer-ui-icon-button>
         </pi-toolbar>
         <g-panels id="contentPanels" selected="{{ribbonSelected}}" transition="none" hideActionbar="{{hideActionbar}}">
           <div id="Home"><template if="{{activatedPanels.Home}}">
@@ -111,7 +112,7 @@
           var p = this.getSelectedContentPanel();
           this.toolbarLabel = p && p.canPrevious && p.topic ?
               p.topic.title : this.ribbonSelected;
-          this.nav = p && p.canPrevious ? 'back' : 'menu';
+          this.nav = p && p.canPrevious ? 'left' : 'menu';
           this.hideActionbar = this.ribbonSelected !== 'Topics';
           this.hideViewButton = this.selectedViewPanel !== 'stories';
           this.hideLinkButton = this.selectedViewPanel !== 'story';

pica/components/pi-explore.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../../../toolkit-ui/elements/g-icon.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html"/>
 <link rel="import" href="../../../more-elements/speech-mic/speech-mic.html"/>
 <link rel="import" href="pi-gfeeds.html"/>
 <link rel="import" href="pi-feed-viewer.html"/>
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="css/pi-explore.css" />
     <div id="searchBox">
       <input id="searchInput" on-input="inputChange"/>
-      <g-icon src="../images/search.png"></g-icon>
+      <polymer-ui-icon icon="search"></polymer-ui-icon>
       <speech-mic id="speech" on-result="speechResult"></speech-mic>
     </div>
     <pi-feed-viewer id="viewer" topics="{{topics}}" topic="{{topic}}" panel="{{panel}}"

pica/components/pi-items-view.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../../../toolkit-ui/elements/g-icon.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html"/>
 <polymer-element name="pi-items-view" attributes="layout view items selected">
   <template>
     <link rel="stylesheet" href="css/pi-items-view.css" />
@@ -33,7 +33,7 @@
         </div>
       </template>
       <div id="more" on-tap="loadMore">
-        <g-icon src="../images/refresh_lightreg.png"></g-icon>
+        <polymer-ui-icon icon="refresh" theme="polymer-ui-dark-theme"></polymer-ui-icon>
           Load more articles
       </div>
     </div>
@@ -82,7 +82,7 @@
         updateMoreShowing: function() {
           this.$.more.style.display = 
               (this.viewItems && this.viewItems.length < 
-                  (this.items && this.items.length)) ? null : 'none';
+                  (this.items && this.items.length)) ? '' : 'none';
         },
         loadMore: function() {
           var l = this.viewItems.length;

pica/components/pi-toolbar-buttons.html

@@ -5,60 +5,60 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-button.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-item.html"/>
-<polymer-element name="pi-view-button" attributes="layout">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-button/polymer-ui-menu-button.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html"/>
+<polymer-element name="pi-view-button" attributes="layout halign">
   <template>
     <style>
-      g-menu-item.hidden-wide {
+      polymer-ui-menu-item.hidden-wide {
         display: none;
       }
 
       @media screen and (max-width: 800px) {
-        g-menu-item.hidden-narrow {
+        polymer-ui-menu-item.hidden-narrow {
           display: none;
         }
 
-        g-menu-item.hidden-wide {
+        polymer-ui-menu-item.hidden-wide {
           display: block;
         }
       }
     </style>
-    <g-menu-button id="viewButton" responsive="true" src="../images/view_quilt.png" selected="{{layout}}">
-      <g-menu-item name="quilt" label="Quilt" class="hidden-narrow" src="../images/view_quilt.png"></g-menu-item>
-      <g-menu-item name="quilt-horiz" label="Quilt (Horizontal)" class="hidden-narrow" src="../images/view_quilt.png"></g-menu-item>
-      <g-menu-item name="grid" label="Grid" src="../images/view_module.png"></g-menu-item>
-      <g-menu-item name="list" label="List" class="hidden-wide" src="../images/view_list.png"></g-menu-item>
-      <g-menu-item name="stream" label="Stream" src="../images/view_stream.png"></g-menu-item>
-      <g-menu-item name="column" label="Column" src="../images/view_column.png"></g-menu-item>
-    </g-menu-button>
+    <polymer-ui-menu-button id="viewButton" responsive="true" icon="quilt" selected="{{layout}}" halign="{{halign}}">
+      <polymer-ui-menu-item name="quilt" label="Quilt" class="hidden-narrow" src="../images/view_quilt.png"></polymer-ui-menu-item>
+      <polymer-ui-menu-item name="quilt-horiz" label="Quilt (Horizontal)" class="hidden-narrow" src="../images/view_quilt.png"></polymer-ui-menu-item>
+      <polymer-ui-menu-item name="grid" label="Grid" src="../images/view_module.png"></polymer-ui-menu-item>
+      <polymer-ui-menu-item name="list" label="List" class="hidden-wide" src="../images/view_list.png"></polymer-ui-menu-item>
+      <polymer-ui-menu-item name="stream" label="Stream" src="../images/view_stream.png"></polymer-ui-menu-item>
+      <polymer-ui-menu-item name="column" label="Column" src="../images/view_column.png"></polymer-ui-menu-item>
+    </polymer-ui-menu-button>
   </template>
   <script>
     Polymer('pi-view-button');
   </script>
 </polymer-element>
 
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-button.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-menu-item.html"/>
-<polymer-element name="pi-action-button">
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-button/polymer-ui-menu-button.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html"/>
+<polymer-element name="pi-action-button" attributes="halign">
   <template>
-    <g-menu-button src="../images/plus.png" responsive="true" valign="right">
-      <g-menu-item src="../images/comment.png">Post a Comment</g-menu-item>
-      <g-menu-item src="../images/hangout.png">Share Link</g-menu-item>
-      <g-menu-item src="../images/mail.png">Email Link</g-menu-item>
-      <g-menu-item src="../images/favorite.png">Add to Favorites</g-menu-item>
-    </g-menu-button>
+    <polymer-ui-menu-button icon="plus" responsive="true" halign="{{halign}}">
+      <polymer-ui-menu-item src="../images/comment.png">Post a Comment</polymer-ui-menu-item>
+      <polymer-ui-menu-item src="../images/hangout.png">Share Link</polymer-ui-menu-item>
+      <polymer-ui-menu-item src="../images/mail.png">Email Link</polymer-ui-menu-item>
+      <polymer-ui-menu-item src="../images/favorite.png">Add to Favorites</polymer-ui-menu-item>
+    </polymer-ui-menu-button>
   </template>
   <script>
     Polymer('pi-action-button');
   </script>
 </polymer-element>
 
-<link rel="import" href="../../../toolkit-ui/elements/g-icon-button.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html"/>
 <polymer-element name="pi-link-button" attributes="link">
   <template>
     <a href="{{link}}" target="_blank">
-      <g-icon-button src="../images/web.png"></g-icon-button>
+      <polymer-ui-icon-button src="../images/web.png"></polymer-ui-icon-button>
     </a>
   </template>
   <script>

pica/components/pi-toolbar.html

@@ -5,34 +5,26 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../../../toolkit-ui/elements/g-toolbar.html"/>
-<link rel="import" href="../../../toolkit-ui/elements/g-icon-button.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html"/>
+<link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html"/>
 <polymer-element name="pi-toolbar" attributes="label nav hideActionbar">
   <template>
     <link rel="stylesheet" href="css/pi-toolbar.css" />
-    <g-toolbar>
-      <g-icon-button src="{{navIconSrc}}" on-tap="navAction"></g-icon-button>
+    <polymer-ui-toolbar>
+      <polymer-ui-icon-button icon="{{nav}}" on-tap="navAction"></polymer-ui-icon-button>
       <div class="toolbar-label flex">{{label}}</div>
-      <g-toolbar id="actionbar" hidden?="{{hideActionbar}}" responsive="true">
+      <polymer-ui-toolbar id="actionbar" hidden?="{{hideActionbar}}" responsive>
         <content></content>
-      </g-toolbar>
-    </g-toolbar>
+      </polymer-ui-toolbar>
+    </polymer-ui-toolbar>
   </template>
   <script>
     Polymer('pi-toolbar', {
       nav: 'menu',
-      created: function() {
-        this.navChanged();
-      },
       navAction: function(event) {
         this.fire('nav-action');
         event.cancelBubble = true;
         event.stopPropagation();
-      },
-      navChanged: function() {
-        if (this.nav) {
-          this.navIconSrc = this.resolvePath('../images/' + this.nav + '.png');
-        }
       }
     });
   </script>

pica/index.html

@@ -41,7 +41,7 @@
   </style>
 </head>
 <body>
-  <pi-app>
+  <pi-app theme="polymer-ui-light-theme">
     <div class="app-loading"></div>
   </pi-app>
 </body>

pica/workbench/accounts.html

@@ -25,7 +25,7 @@
 </head>
 <body>
   <pi-accounts-model></pi-accounts-model>
-  <pi-accounts></pi-accounts>
+  <pi-accounts theme="polymer-ui-light-theme"></pi-accounts>
 
   <script>
     document.addEventListener('WebComponentsReady', function() {

pica/workbench/toolbar.html

@@ -23,11 +23,11 @@
   </style>
 </head>
 <body>
-  <pi-toolbar label="Topics">
+  <pi-toolbar label="Topics" theme="polymer-ui-light-theme">
     <pi-link-button id="linkButton" link="http://www.google.com"></pi-link-button>
-    <pi-view-button id="viewButton" layout="grid"></pi-view-button>
-    <pi-action-button></pi-action-button>
-    <g-icon-button src="../images/refresh.png"></g-icon-button>
+    <pi-view-button id="viewButton" layout="grid" halign="right"></pi-view-button>
+    <pi-action-button halign="right"></pi-action-button>
+    <polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
   </pi-toolbar>
 </body>
 </html>