More UI tweaks

src/components/ha-view-tabs.html

@@ -0,0 +1,25 @@
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
+
+<dom-module id="ha-view-tabs">
+  <style>
+    paper-tab {
+      text-transform: uppercase;
+    }
+  </style>
+  <template>
+    <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
+      on-iron-select='viewSelected' scrollable=''>
+        <paper-tab data-entity=''>[[locationName]]</paper-tab>
+        <template is='dom-repeat' items='[[views]]'>
+          <paper-tab data-entity$='[[item.entityId]]'>
+            <template is='dom-if' if='[[item.attributes.icon]]'>
+              <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
+            </template>
+            <template is='dom-if' if='[[!item.attributes.icon]]'>
+              [[item.entityDisplay]]
+            </template>
+          </paper-tab>
+        </template>
+    </paper-tabs>
+  </template>
+</dom-module>

src/components/ha-view-tabs.js

@@ -0,0 +1,50 @@
+import hass from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import nuclearObserver from '../util/bound-nuclear-behavior';
+
+const {
+  configGetters,
+  viewActions,
+  viewGetters,
+} = hass;
+
+export default new Polymer({
+  is: 'ha-view-tabs',
+
+  behaviors: [nuclearObserver],
+
+  properties: {
+    locationName: {
+      type: String,
+      bindNuclear: configGetters.locationName,
+    },
+
+    currentView: {
+      type: String,
+      bindNuclear: [
+        viewGetters.currentView,
+        view => view || '',
+      ],
+    },
+
+    views: {
+      type: Array,
+      bindNuclear: [
+        viewGetters.views,
+        views => views.valueSeq()
+                    .sortBy(view => view.attributes.order)
+                    .toArray(),
+      ],
+    },
+  },
+
+  viewSelected(ev) {
+    const view = ev.detail.item.getAttribute('data-entity') || null;
+    const current = this.currentView || null;
+    this.expectChange = true;
+    if (view !== current) {
+      this.async(() => viewActions.selectView(view), 0);
+    }
+  },
+});

src/layouts/partial-base.html

@@ -13,6 +13,10 @@
       -webkit-user-select: none;
       -moz-user-select: none;
     }
+
+    .menu-icon {
+      margin-right: 24px;
+    }
   </style>
   <template>
     <paper-scroll-header-panel class='fit'>

src/layouts/partial-base.js

@@ -16,7 +16,7 @@ export default new Polymer({
   },
 
   computeMenuButtonClass(narrow, showMenu) {
-    return !narrow && showMenu ? 'invisible' : '';
+    return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
   },
 
   toggleMenu() {

src/layouts/partial-cards.html

@@ -2,9 +2,9 @@
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 
 <link rel="import" href="../components/ha-cards.html">
+<link rel="import" href="../components/ha-view-tabs.html">
 
 <dom-module id="partial-cards">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
@@ -17,6 +17,12 @@
       -moz-user-select: none;
     }
 
+    paper-scroll-header-panel {
+      --paper-scroll-header-panel-condensed-header: {
+        background-color: red;
+      };
+    }
+
     paper-scroll-header-panel[has-views] paper-toolbar {
       height: 128px;
     }
@@ -29,12 +35,8 @@
       line-height: 40px;
     }
 
-    paper-tabs {
+    .views {
-      --paper-tabs-selection-bar-color: var(--accent-color);
+      padding-left: 12px;
-    }
-
-    paper-tab {
-      text-transform: uppercase;
     }
   </style>
 
@@ -62,21 +64,8 @@
         </div>
 
         <template is='dom-if' if='[[hasViews]]'>
-          <div class='fit bottom'>
+          <div class='fit bottom views'>
-            <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
+            <ha-view-tabs></ha-view-tabs>
-              on-iron-select='viewSelected' scrollable=''>
-                <paper-tab data-entity=''>[[locationName]]</paper-tab>
-                <template is='dom-repeat' items='[[views]]'>
-                  <paper-tab data-entity$='[[item.entityId]]'>
-                    <template is='dom-if' if='[[item.attributes.icon]]'>
-                      <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
-                    </template>
-                    <template is='dom-if' if='[[!item.attributes.icon]]'>
-                      [[item.entityDisplay]]
-                    </template>
-                  </paper-tab>
-                </template>
-            </paper-tabs>
           </div>
         </template>
       </paper-toolbar>

src/layouts/partial-cards.js

@@ -5,10 +5,10 @@ import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('./partial-base');
 require('../components/ha-cards');
+require('../components/ha-view-tabs');
 
 const {
   configGetters,
-  viewActions,
   viewGetters,
   voiceGetters,
   streamGetters,
@@ -69,22 +69,14 @@ export default new Polymer({
         viewGetters.currentView,
         view => view || '',
       ],
-      observer: 'removeFocus',
-    },
-
-    views: {
-      type: Array,
-      bindNuclear: [
-        viewGetters.views,
-        views => views.valueSeq()
-                    .sortBy(view => view.attributes.order)
-                    .toArray(),
-      ],
     },
 
     hasViews: {
       type: Boolean,
-      computed: 'computeHasViews(views)',
+      bindNuclear: [
+        viewGetters.views,
+        views => views.size > 0,
+      ],
     },
 
     states: {
@@ -121,13 +113,6 @@ export default new Polymer({
     this.columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
   },
 
-  // When user changes tab by pressing back button, blur former tab
-  removeFocus() {
-    if (document.activeElement) {
-      document.activeElement.blur();
-    }
-  },
-
   handleRefresh() {
     syncActions.fetchAll();
   },
@@ -172,12 +157,4 @@ export default new Polymer({
   toggleMenu() {
     this.fire('open-menu');
   },
-
-  viewSelected(ev) {
-    const view = ev.detail.item.getAttribute('data-entity') || null;
-    const current = this.currentView || null;
-    if (view !== current) {
-      this.async(() => viewActions.selectView(view), 0);
-    }
-  },
 });

src/layouts/partial-dev-template.html

@@ -34,6 +34,7 @@
 
     .render-pane {
       position: relative;
+      max-width: 50%;
     }
 
     .render-spinner {

src/layouts/partial-map.html

@@ -15,6 +15,10 @@
   .leaflet-top, .leaflet-bottom {
     z-index: 0;
   }
+
+  .menu-icon {
+    margin-right: 24px;
+  }
 </style>
 
 <dom-module id="partial-map">

src/layouts/partial-map.js

@@ -73,7 +73,7 @@ export default new Polymer({
   },
 
   computeMenuButtonClass(narrow, showMenu) {
-    return !narrow && showMenu ? 'invisible' : '';
+    return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
   },
 
   toggleMenu() {