googlearchive · dfreedm · Aug 15, 2013 · Aug 9, 2013 · Aug 9, 2013 · Aug 9, 2013
diff --git a/basic.css b/basic.css
@@ -16,7 +16,7 @@ license that can be found in the LICENSE file.
   width: 100%;
   height: 100%;
 }
-    
+
 .polymer-ui-light-bg {
   background: #f2f2f2 -webkit-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
   background: #f2f2f2 -moz-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
@@ -37,34 +37,3 @@ license that can be found in the LICENSE file.
   font: 16px 'Helvetica Neue', Helvetica, Arial, Roboto;
 }
 
-/*
-.polymer-ui-light-bg {
-  background-color: #d9d9d9;      
-  color: #333;
-}
-
-.polymer-ui-dark-bg {
-  background-color: #262626;
-  color: #eee;
-}
-
-.polymer-ui-bg-gray {
-  background-color: #d9d9d9;      
-}
-
-.polymer-ui-bg-jl-dark-theme {
-  background-color: #4d4d4d;
-}
-
-.polymer-ui-header-gray {
-  background-color: #262626;
-}
-
-.polymer-ui-header-jl-dark-theme {
-  background-color: #262626;
-}
-
-.polymer-ui-header {
-  background-color: #f3f3f0;
-}
-*/
diff --git a/polymer-ui-arrow/polymer-ui-arrow.css b/polymer-ui-arrow/polymer-ui-arrow.css
@@ -1,3 +1,8 @@
+/*
+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.
+*/
 @host {
 	* {
     display: inline-block;

diff --git a/polymer-ui-arrow/polymer-ui-arrow.html b/polymer-ui-arrow/polymer-ui-arrow.html
@@ -14,8 +14,8 @@
 <polymer-element name="polymer-ui-arrow" attributes="direction size color borderColor borderWidth">
   <template>
     <link rel="stylesheet" href="polymer-ui-arrow.css">
-    <div id="outer" class="arrow arrow-outer" style="border-width: {{size}}px;"></div>
-    <div id="inner" class="arrow arrow-inner" style="border-width: {{size}}px;"></div>
+    <div id="outer" class="arrow arrow-outer"></div>
+    <div id="inner" class="arrow arrow-inner"></div>
   </template>
   <script>
     Polymer('polymer-ui-arrow', {
@@ -42,7 +42,7 @@
       color: '#fff',
       borderColor: '#ccc',
       borderWidth: 1,
-      ready: function() {
+      created: function() {
         this.asyncUpdate();
       },
       directionChanged: function() {
@@ -66,6 +66,8 @@
       update: function() {
         var os = this.$.outer.style;
         var is = this.$.inner.style;
+        os.borderWidth = this.size + 'px';
+        is.borderWidth = this.size + 'px';
         os.borderColor = 'transparent';
         is.borderColor = 'transparent';
         var bc = 'border' + this.borders[this.direction] + 'Color';

diff --git a/polymer-ui-breadcrumbs/index.html b/polymer-ui-breadcrumbs/index.html
@@ -0,0 +1,51 @@
+
+<!doctype html>
+<!--
+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.
+-->
+<html>
+  <head>
+    <title>Breadcrumbs</title>
+    <script src="../../polymer/polymer.js"></script>
+    <link rel="import" href="polymer-ui-breadcrumbs.html">
+    <link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html">
+    <link rel="stylesheet" href="../basic.css">
+    <style>
+      html, body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body class="polymer-ui-body-text">
+    <polymer-element name="x-test">
+      <template>
+        <style>
+          polymer-ui-breadcrumbs {
+            padding-left: 20px;
+          }
+        </style>
+        <polymer-ui-toolbar>
+          <polymer-ui-breadcrumbs crumbs="{{crumbs}}" selectedCrumb="{{selectedCrumb}}"></polymer-ui-breadcrumbs>
+        </polymer-ui-toolbar>
+        <br><br>
+        <div>{{selectedCrumb.label}}</div>
+      </template>
+      <script>
+        Polymer('x-test', {
+          created: function() {
+            this.crumbs = [
+              {label: 'Overview'}, 
+              {label: 'Subitem1'}, 
+              {label: 'Subitem2'},
+              {label: 'Subitem3'}
+            ];
+          }
+        });
+      </script>
+    </polymer-element>
+
+    <x-test></x-test>
+  </body>
+</html>
diff --git a/polymer-ui-breadcrumbs/polymer-ui-breadcrumbs.css b/polymer-ui-breadcrumbs/polymer-ui-breadcrumbs.css
@@ -0,0 +1,41 @@
+/*
+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.
+*/
+@host {
+	* {
+	  display: inline-block;
+	}
+}
+
+.label {
+	display: inline-block;
+	vertical-align: middle;
+	font-size: 14px;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.label > a {
+	text-decoration: none;
+	color: #75d0df;
+}
+
+.label:last-of-type > a {
+  color: black;
+}
+
+a[disabled] {
+	pointer-events: none;
+}
+
+polymer-ui-icon {
+	-moz-transform: rotate(270deg);
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+polymer-ui-icon:last-of-type {
+	display: none !important;
+}
diff --git a/polymer-ui-breadcrumbs/polymer-ui-breadcrumbs.html b/polymer-ui-breadcrumbs/polymer-ui-breadcrumbs.html
@@ -0,0 +1,31 @@
+<!--
+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.
+-->
+<!--
+/**
+ * @module Polymer UI Elements
+ */
+/**
+ * @class polymer-ui-breadcrumbs
+ */
+-->
+<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
+<link rel="import" href="../../polymer-elements/polymer-selector/polymer-selector.html">
+
+<polymer-element name="polymer-ui-breadcrumbs" attributes="crumbs selected selectedCrumb">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-breadcrumbs.css">
+    <div id="crumbs">
+      <template repeat="{{crumbs}}">
+        <li class="label"><a href="{{href}}" disabled?="{{!href}}">{{label}}</a></li>
+        <polymer-ui-icon icon="dropdown"></polymer-ui-icon>
+      </template>
+    </div>
+    <polymer-selector target="{{$.crumbs}}" itemsSelector="li" selected="{{selected}}" selectedModel="{{selectedCrumb}}"></polymer-selector>
+  </template>
+  <script>
+    Polymer('polymer-ui-breadcrumbs');
+  </script>
+</polymer-element>
diff --git a/polymer-ui-collapsible/index.html b/polymer-ui-collapsible/index.html
@@ -29,12 +29,19 @@
       }
     </style>
   </head>
-  <body class="polymer-ui-body-text"">
-    <polymer-ui-collapsible>
+  <body class="polymer-ui-body-text">
+    <polymer-ui-collapsible active>
       <div class="polymer-ui-collapsible-header">Header 1</div>
       <div class="content">
         Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
       </div>
     </polymer-ui-collapsible>
+    <br>
+    <polymer-ui-collapsible>
+      <div class="polymer-ui-collapsible-header">Header 2</div>
+      <div class="content">
+        Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
+      </div>
+    </polymer-ui-collapsible>
   </body>
 </html>
diff --git a/polymer-ui-collapsible/polymer-ui-collapsible.html b/polymer-ui-collapsible/polymer-ui-collapsible.html
@@ -41,6 +41,7 @@
   <script>
     Polymer('polymer-ui-collapsible', {
       notap: false,
+      active: false,
       toggle: function() {
         this.active = !this.active;
       },
@@ -50,7 +51,11 @@
         }
       },
       bodyTap: function(e) {
+        // TODO(ffu): cancelBubble is confusing and sometimes need to use
+        // stopPropagation to actually stop event propagation.
+        // https://github.com/Polymer/polymer/issues/74
         e.cancelBubble = true;
+        e.stopPropagation();
       }
     });
   </script>

diff --git a/polymer-ui-icon/index.html b/polymer-ui-icon/index.html
@@ -1,23 +1,11 @@
-
 <!doctype html>
-<!--
-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.
--->
 <html>
   <head>
     <title>polymer-ui-icon</title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <!-- load toolkit -->
     <script src="../../polymer/polymer.js"></script>
-    <!-- import elements-->
     <link rel="import" href="polymer-ui-icon.html">
-    <!-- -->
-    <link rel="stylesheet" href="../basic.css">
   </head>
-  <body class="polymer-ui-body-text">
+  <body>
     <div>
       <template repeat="{{}}">
         <polymer-ui-icon icon="{{}}"></polymer-ui-icon>
@@ -28,7 +16,7 @@
         <polymer-ui-icon icon="{{}}"></polymer-ui-icon>
       </template>
     </div>
-    <div theme="polymer-ui-dark-theme" class="polymer-ui-dark-bg">
+    <div theme="polymer-ui-dark-theme" style="background-color: #333;">
       <template repeat="{{}}">
         <polymer-ui-icon icon="{{}}"></polymer-ui-icon>
       </template>

diff --git a/polymer-ui-icon/polymer-ui-icon.html b/polymer-ui-icon/polymer-ui-icon.html
@@ -116,7 +116,7 @@
         bx: 0,
         by: 0,
         icons: icons,
-        ready: function() {
+        created: function() {
           this.sizeChanged();
         },
         sizeChanged: function() {
@@ -138,18 +138,32 @@
         themeChanged: function(old) {
           this.style.backgroundPosition = '';
           this.classList.switch(old, this.theme);
+          this.bx = calcThemeOffset(this.theme, this);
           this.asyncMethod('updateIcon');
         },
         updateIcon: function() {
           if (this.src) {
             this.style.backgroundPosition = 'center';
           } else {
-            //this.bx = parseFloat(getComputedStyle(this).backgroundPosition.split(' ').shift());
-            //this.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
-            this.style.backgroundPositionY = this.by + 'px';
+            // TODO(sorvell): FF cannot set Y only so we go to trouble
+            // to find the x offset and use it here.
+            this.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
+            //this.style.backgroundPositionY = this.by + 'px';
           }
         }
       });
+
+      // memoize offset by theme name since getComputedStyle
+      // is $$
+      var themes = {};
+      function calcThemeOffset(theme, node) {
+        if (themes[theme] === undefined) {
+          var offset = parseFloat(
+              getComputedStyle(node).backgroundPosition.split(' ').shift());
+          themes[theme] = offset;
+        }
+        return themes[theme]; 
+      }
     })();
   </script>
 </polymer-element>