separate activeTheme and theme concepts from theme-aware controls, so that an inherited theme is not expressed as an attribute

Author: Scott J. Miles

polymer-ui-icon/polymer-ui-icon.html

@@ -136,10 +136,10 @@
           this.style.backgroundImage = 'url(' + this.src + ')';
           this.updateIcon();
         },
-        themeChanged: function(old) {
+        activeThemeChanged: function(old) {
           this.super(arguments);
           this.style.backgroundPosition = '';
-          this.bx = calcThemeOffset(this.theme, this);
+          this.bx = calcThemeOffset(this.activeTheme, this);
           this.updateIcon();
         },
         updateIcon: function() {

polymer-ui-menu/polymer-ui-menu.html

@@ -57,22 +57,23 @@
 <link rel="import" href="../../polymer-elements/polymer-selector/polymer-selector.html">
 <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
 
-<polymer-element name="polymer-ui-menu" extends="polymer-selector"
-    attributes="theme" on-polymer-select="selectionChange">
+<polymer-element name="polymer-ui-menu" extends="polymer-selector" attributes="theme" on-polymer-select="selectionChange">
   <template>
     <link rel="stylesheet" href="polymer-ui-menu.css">
     <shadow></shadow>
   </template>
   <script>
     Polymer('polymer-ui-menu', {
+      activeTheme: '',
+      validateTheme: PolymerUI.validateTheme,
       enteredView: function() {
-        if (!this.theme) {
-          this.findTheme();
-        }
+        this.validateTheme();
+      },
+      themeChanged: function() {
+        this.activeTheme = this.theme;
       },
-      findTheme: PolymerUI.findTheme,
-      themeChanged: function(old) {
-        this.classList.switch(old, this.theme);
+      activeThemeChanged: function(old) {
+        this.classList.switch(old, this.activeTheme);
       },
       selectionChange: function(e, detail) {
         if (detail.isSelected) {

polymer-ui-sidebar-menu/metadata.html

@@ -12,10 +12,10 @@
         <polymer-ui-menu-item label="Favorites 3"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Favorites 4"></polymer-ui-menu-item>
       </polymer-ui-submenu-item>
-      <polymer-ui-menu-item icon="settings" label="Explore">
+      <polymer-ui-submenu-item icon="settings" label="Explore">
         <polymer-ui-menu-item label="Explore 1"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Explore 2"></polymer-ui-menu-item>
-      </polymer-ui-menu-item>
+      </polymer-ui-submenu-item>
     </polymer-ui-sidebar-menu>
   </template>
   <template id="imports">

polymer-ui-theme-aware/polymer-ui-theme-aware.html

@@ -5,25 +5,30 @@
 -->
 <polymer-element name="polymer-ui-theme-aware" attributes="theme">
   <script>
-    PolymerUI = { 
-      findTheme: function() {
-        var p = this, theme = null;
-        while (p && !theme) {
-          theme = p.getAttribute && p.getAttribute('theme');
-          p = p.parentNode || p.host;
+    PolymerUI = {
+      validateTheme: function() {
+        var theme = this.theme;
+        if (!theme) {
+          var p = this;
+          while (p && !theme) {
+            theme = p.getAttribute && p.getAttribute('theme');
+            p = p.parentNode || p.host;
+          }
         }
-        this.theme = theme;
+        this.activeTheme = this.theme || theme;
       }
     };
     Polymer('polymer-ui-theme-aware', {
+      activeTheme: '',
+      validateTheme: PolymerUI.validateTheme,
       enteredView: function() {
-        if (!this.theme) {
-          this.findTheme();
-        }
+        this.validateTheme();
+      },
+      themeChanged: function() {
+        this.activeTheme = this.theme;
       },
-      findTheme: PolymerUI.findTheme,
-      themeChanged: function(old) {
-        this.classList.switch(old, this.theme);
+      activeThemeChanged: function(old) {
+        this.classList.switch(old, this.activeTheme);
       }
     });
   </script>