Give the tabs more breathing space

This commit is contained in:
Paulus Schoutsen 2016-05-27 01:28:02 -07:00
parent e933aa8708
commit 6d2dd25a4c
2 changed files with 60 additions and 24 deletions

View File

@ -1,6 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.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">
@ -17,24 +17,54 @@
-moz-user-select: none;
}
paper-scroll-header-panel[has-views] paper-toolbar {
height: 128px;
}
.menu-icon {
margin-right: 24px;
}
#menu > .title {
line-height: 40px;
}
paper-tabs {
--paper-tabs-selection-bar-color: var(--accent-color);
}
paper-tab {
text-transform: uppercase;
}
</style>
<template>
<paper-header-panel mode="waterfall">
<paper-toolbar class='medium'>
<paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
<paper-scroll-header-panel
condenses keep-condensed-header class='fit' has-views$='[[hasViews]]'
header-height="[[computeHeaderHeight(hasViews)]]"
condensed-header-height="[[computeCondensedHeaderHeight(hasViews)]]"
on-paper-header-transform='headerScrollAdjust'
>
<paper-toolbar>
<div class='flex layout horizontal' id='menu'>
<paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
<template is='dom-if' if='[[!hasViews]]'>
<div class='title'>[[locationName]]</div>
</template>
<span class='title flex'>[[computeTitle(hasViews, locationName)]]</span>
<paper-icon-button
icon="mdi:refresh"
class$="[[computeRefreshButtonClass(isFetching)]]"
on-tap="handleRefresh" hidden$="[[isStreaming]]"
></paper-icon-button>
<paper-icon-button
icon="mdi:microphone" hidden$='[[!canListen]]'
on-tap="handleListenClick"></paper-icon-button>
</div>
<template is='dom-if' if='[[hasViews]]'>
<div class='flex'>
<div class='fit bottom'>
<paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
on-iron-select='viewSelected' scrollable='true'>
on-iron-select='viewSelected' scrollable=''>
<paper-tab data-entity=''>[[locationName]]</paper-tab>
<template is='dom-repeat' items='[[views]]'>
<paper-tab data-entity$='[[item.entityId]]'>
@ -49,22 +79,11 @@
</paper-tabs>
</div>
</template>
<paper-icon-button
icon="mdi:refresh"
class$="[[computeRefreshButtonClass(isFetching)]]"
on-tap="handleRefresh" hidden$="[[isStreaming]]"
></paper-icon-button>
<paper-icon-button
icon="mdi:microphone" hidden$='[[!canListen]]'
on-tap="handleListenClick"></paper-icon-button>
</paper-toolbar>
<div class='fit'>
<ha-cards
show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
states='[[states]]' columns='[[columns]]'></ha-cards>
</div>
<ha-cards
show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
states='[[states]]' columns='[[columns]]'></ha-cards>
</paper-header-panel>
</template>

View File

@ -136,14 +136,31 @@ export default new Polymer({
voiceActions.listen();
},
headerScrollAdjust(ev) {
if (!this.hasViews) return;
Polymer.Base.transform(`translateY(-${ev.detail.y}px)`, this.$.menu);
},
computeHeaderHeight(hasViews) {
return hasViews ? 128 : 64;
},
computeCondensedHeaderHeight(hasViews) {
return hasViews ? 48 : 64;
},
computeMenuButtonClass(narrow, showMenu) {
return !narrow && showMenu ? 'invisible' : '';
return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
},
computeRefreshButtonClass(isFetching) {
return isFetching ? 'ha-spin' : '';
},
computeTitle(hasViews, locationName) {
return hasViews ? 'Home Assistant' : locationName;
},
computeShowIntroduction(currentView, introductionLoaded, states) {
return currentView === '' && (introductionLoaded || states.size === 0);
},