Rip out paper-menu because it is broken

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "fe75bfc72100af74c19fa02c000f6f63"
+VERSION = "5fe3c81071fb3a771d93105eb9b911ed"

homeassistant/components/frontend/www_static/frontend.html

@@ -14729,6 +14729,7 @@ document.registerElement('color-picker', { prototype: colorPickerPrototype });
 
 
 
+
 <style is="custom-style">
   :root {
     --dark-primary-color: #0288D1;
@@ -17689,10 +17690,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     },
 
     listeners: {
-      'passwordInput.keydown': 'passwordKeyDown',
+      'keydown': 'passwordKeyDown',
       'loginButton.click': 'validatePassword',
     },
 
+    observers: [
+      'validatingChanged(isValidating, isInvalid)',
+    ],
+
+    validatingChanged: function(isValidating, isInvalid) {
+      if (!isValidating && !isInvalid) {
+        this.$.passwordInput.value = '';
+      }
+    },
+
     isValidatingChanged: function(newVal) {
       if (!newVal) {
         this.debounce('focus-password', function() {
@@ -25097,15 +25108,24 @@ paper-ripple {
       overflow: hidden;
     }
 
-    .sidenav paper-menu {
+    /*.sidenav paper-menu {
       --paper-menu-color: var(--secondary-text-color);
       --paper-menu-background-color: #fafafa;
+    }*/
+
+    div.menu {
+      color: var(--secondary-text-color);
+      background-color: #fafafa;
     }
 
     paper-icon-item {
       cursor: pointer;
     }
 
+    paper-icon-item.selected {
+      font-weight: bold;
+    }
+
     paper-icon-item.logout {
       margin-top: 16px;
     }
@@ -25131,33 +25151,34 @@ paper-ripple {
         <paper-icon-button hidden=""></paper-icon-button>
         <div class="title">Home Assistant</div>
       </paper-toolbar>
-      <paper-menu id="menu" selected="{{menuSelected}}" selectable="[data-panel]" attr-for-selected="data-panel">
+
-        <paper-icon-item data-panel="states">
+      <div class="menu">
+        <paper-icon-item on-click="menuClicked" data-panel="states">
           <iron-icon item-icon="" icon="apps"></iron-icon> States
         </paper-icon-item>
 
         <template is="dom-repeat" items="{{possibleFilters}}">
-          <paper-icon-item data-panel$="[[filterType(item)]]">
+          <paper-icon-item on-click="menuClicked" data-panel$="[[filterType(item)]]">
             <iron-icon item-icon="" icon="[[filterIcon(item)]]"></iron-icon>
             <span>[[filterName(item)]]</span>
           </paper-icon-item>
         </template>
 
         <template is="dom-if" if="[[hasHistoryComponent]]">
-          <paper-icon-item data-panel="history">
+          <paper-icon-item on-click="menuClicked" data-panel="history">
             <iron-icon item-icon="" icon="assessment"></iron-icon>
             History
           </paper-icon-item>
         </template>
 
         <template is="dom-if" if="[[hasLogbookComponent]]">
-          <paper-icon-item data-panel="logbook">
+          <paper-icon-item on-click="menuClicked" data-panel="logbook">
             <iron-icon item-icon="" icon="list"></iron-icon>
             Logbook
           </paper-icon-item>
         </template>
 
-        <paper-icon-item data-panel="logout" class="logout">
+        <paper-icon-item on-click="menuClicked" data-panel="logout" class="logout">
           <iron-icon item-icon="" icon="exit-to-app"></iron-icon>
           Log Out
         </paper-icon-item>
@@ -25173,7 +25194,8 @@ paper-ripple {
           <paper-icon-button icon="settings-ethernet" data-panel="devState" on-click="handleDevClick"></paper-icon-button>
           <paper-icon-button icon="settings-input-antenna" data-panel="devEvent" on-click="handleDevClick"></paper-icon-button>
         </div>
-      </paper-menu>
+      
+      </div>
     </paper-header-panel>
 
   </template>
@@ -25198,7 +25220,7 @@ paper-ripple {
     properties: {
       menuSelected: {
         type: String,
-        observer: 'menuSelectedChanged',
+        // observer: 'menuSelectedChanged',
       },
 
       selected: {
@@ -25227,22 +25249,46 @@ paper-ripple {
       },
     },
 
-    menuSelectedChanged: function(newVal) {
+    // menuSelectedChanged: function(newVal) {
-      if (this.selected !== newVal) {
+    //   if (this.selected !== newVal) {
-        this.selectPanel(newVal);
+    //     this.selectPanel(newVal);
-      }
+    //   }
-    },
+    // },
 
     selectedChanged: function(newVal) {
-      if (this.menuSelected !== newVal) {
+      // if (this.menuSelected !== newVal) {
-        this.menuSelected = newVal;
+      //   this.menuSelected = newVal;
+      // }
+      var menuItems = this.querySelectorAll('.menu [data-panel]');
+
+      for (var i = 0; i < menuItems.length; i++) {
+        if(menuItems[i].dataset.panel === newVal) {
+          menuItems[i].classList.add('selected');
+        } else {
+          menuItems[i].classList.remove('selected');
+        }
       }
     },
 
-    handleDevClick: function(ev, detail, sender) {
+    menuClicked: function(ev) {
+      var target = ev.target;
+      var checks = 5;
+
+      // find panel to select
+      while(checks && !target.dataset.panel) {
+        target = target.parentElement;
+        checks--;
+      }
+
+      if (checks) {
+        this.selectPanel(target.dataset.panel);
+      }
+    },
+
+    handleDevClick: function(ev) {
       // prevent it from highlighting first menu item
       document.activeElement.blur();
-      this.selectPanel(ev.target.parentElement.dataset.panel);
+      this.menuClicked(ev);
     },
 
     selectPanel: function(newChoice) {

homeassistant/components/frontend/www_static/polymer/components/ha-sidebar.html

@@ -3,7 +3,9 @@
 
 <link rel='import' href='../bower_components/paper-header-panel/paper-header-panel.html'>
 <link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
-<link rel='import' href='../bower_components/paper-menu/paper-menu.html'>
+<!--
+Too broken for now.
+<link rel='import' href='../bower_components/paper-menu/paper-menu.html'> -->
 <link rel='import' href='../bower_components/iron-icon/iron-icon.html'>
 <link rel='import' href='../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../bower_components/paper-item/paper-icon-item.html'>
@@ -19,15 +21,24 @@
       overflow: hidden;
     }
 
-    .sidenav paper-menu {
+    /*.sidenav paper-menu {
       --paper-menu-color: var(--secondary-text-color);
       --paper-menu-background-color: #fafafa;
+    }*/
+
+    div.menu {
+      color: var(--secondary-text-color);
+      background-color: #fafafa;
     }
 
     paper-icon-item {
       cursor: pointer;
     }
 
+    paper-icon-item.selected {
+      font-weight: bold;
+    }
+
     paper-icon-item.logout {
       margin-top: 16px;
     }
@@ -53,34 +64,35 @@
         <paper-icon-button hidden></paper-icon-button>
         <div class="title">Home Assistant</div>
       </paper-toolbar>
-      <paper-menu id='menu' selected='{{menuSelected}}'
+<!--       <paper-menu id='menu' selected='{{menuSelected}}'
-        selectable='[data-panel]' attr-for-selected='data-panel'>
+        selectable='[data-panel]' attr-for-selected='data-panel'> -->
-        <paper-icon-item data-panel='states'>
+      <div class='menu'>
+        <paper-icon-item on-click='menuClicked' data-panel='states'>
           <iron-icon item-icon icon='apps'></iron-icon> States
         </paper-icon-item>
 
         <template is='dom-repeat' items='{{possibleFilters}}'>
-          <paper-icon-item data-panel$='[[filterType(item)]]'>
+          <paper-icon-item on-click='menuClicked' data-panel$='[[filterType(item)]]'>
             <iron-icon item-icon icon='[[filterIcon(item)]]'></iron-icon>
             <span>[[filterName(item)]]</span>
           </paper-icon-item>
         </template>
 
         <template is='dom-if' if='[[hasHistoryComponent]]'>
-          <paper-icon-item data-panel='history'>
+          <paper-icon-item on-click='menuClicked' data-panel='history'>
             <iron-icon item-icon icon='assessment'></iron-icon>
             History
           </paper-icon-item>
         </template>
 
         <template is='dom-if' if='[[hasLogbookComponent]]'>
-          <paper-icon-item data-panel='logbook'>
+          <paper-icon-item on-click='menuClicked' data-panel='logbook'>
             <iron-icon item-icon icon='list'></iron-icon>
             Logbook
           </paper-icon-item>
         </template>
 
-        <paper-icon-item data-panel='logout' class='logout'>
+        <paper-icon-item on-click='menuClicked' data-panel='logout' class='logout'>
           <iron-icon item-icon icon='exit-to-app'></iron-icon>
           Log Out
         </paper-icon-item>
@@ -102,7 +114,8 @@
             icon='settings-input-antenna' data-panel='devEvent'
             on-click='handleDevClick'></paper-icon-button>
         </div>
-      </paper-menu>
+      <!-- </paper-menu> -->
+      </div>
     </paper-header-panel>
 
   </template>
@@ -127,7 +140,7 @@
     properties: {
       menuSelected: {
         type: String,
-        observer: 'menuSelectedChanged',
+        // observer: 'menuSelectedChanged',
       },
 
       selected: {
@@ -156,22 +169,46 @@
       },
     },
 
-    menuSelectedChanged: function(newVal) {
+    // menuSelectedChanged: function(newVal) {
-      if (this.selected !== newVal) {
+    //   if (this.selected !== newVal) {
-        this.selectPanel(newVal);
+    //     this.selectPanel(newVal);
-      }
+    //   }
-    },
+    // },
 
     selectedChanged: function(newVal) {
-      if (this.menuSelected !== newVal) {
+      // if (this.menuSelected !== newVal) {
-        this.menuSelected = newVal;
+      //   this.menuSelected = newVal;
+      // }
+      var menuItems = this.querySelectorAll('.menu [data-panel]');
+
+      for (var i = 0; i < menuItems.length; i++) {
+        if(menuItems[i].dataset.panel === newVal) {
+          menuItems[i].classList.add('selected');
+        } else {
+          menuItems[i].classList.remove('selected');
+        }
       }
     },
 
-    handleDevClick: function(ev, detail, sender) {
+    menuClicked: function(ev) {
+      var target = ev.target;
+      var checks = 5;
+
+      // find panel to select
+      while(checks && !target.dataset.panel) {
+        target = target.parentElement;
+        checks--;
+      }
+
+      if (checks) {
+        this.selectPanel(target.dataset.panel);
+      }
+    },
+
+    handleDevClick: function(ev) {
       // prevent it from highlighting first menu item
       document.activeElement.blur();
-      this.selectPanel(ev.target.parentElement.dataset.panel);
+      this.menuClicked(ev);
     },
 
     selectPanel: function(newChoice) {