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/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.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-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
@ -17,24 +17,54 @@
-moz-user-select: none; -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 { paper-tab {
text-transform: uppercase; text-transform: uppercase;
} }
</style> </style>
<template> <template>
<paper-header-panel mode="waterfall"> <paper-scroll-header-panel
<paper-toolbar class='medium'> 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> <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
<template is='dom-if' if='[[!hasViews]]'> <span class='title flex'>[[computeTitle(hasViews, locationName)]]</span>
<div class='title'>[[locationName]]</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>
</div>
<template is='dom-if' if='[[hasViews]]'> <template is='dom-if' if='[[hasViews]]'>
<div class='flex'> <div class='fit bottom'>
<paper-tabs selected='[[currentView]]' attr-for-selected='data-entity' <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> <paper-tab data-entity=''>[[locationName]]</paper-tab>
<template is='dom-repeat' items='[[views]]'> <template is='dom-repeat' items='[[views]]'>
<paper-tab data-entity$='[[item.entityId]]'> <paper-tab data-entity$='[[item.entityId]]'>
@ -49,22 +79,11 @@
</paper-tabs> </paper-tabs>
</div> </div>
</template> </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> </paper-toolbar>
<div class='fit'>
<ha-cards <ha-cards
show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]' show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
states='[[states]]' columns='[[columns]]'></ha-cards> states='[[states]]' columns='[[columns]]'></ha-cards>
</div>
</paper-header-panel> </paper-header-panel>
</template> </template>

View File

@ -136,14 +136,31 @@ export default new Polymer({
voiceActions.listen(); 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) { computeMenuButtonClass(narrow, showMenu) {
return !narrow && showMenu ? 'invisible' : ''; return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
}, },
computeRefreshButtonClass(isFetching) { computeRefreshButtonClass(isFetching) {
return isFetching ? 'ha-spin' : ''; return isFetching ? 'ha-spin' : '';
}, },
computeTitle(hasViews, locationName) {
return hasViews ? 'Home Assistant' : locationName;
},
computeShowIntroduction(currentView, introductionLoaded, states) { computeShowIntroduction(currentView, introductionLoaded, states) {
return currentView === '' && (introductionLoaded || states.size === 0); return currentView === '' && (introductionLoaded || states.size === 0);
}, },