mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
Give the tabs more breathing space
This commit is contained in:
parent
e933aa8708
commit
6d2dd25a4c
@ -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>
|
||||||
|
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user