mirror of
https://github.com/home-assistant/core.git
synced 2025-07-10 06:47:09 +00:00
tab bar autohides on scroll down
This commit is contained in:
parent
a4dab870ce
commit
04e58bd375
@ -24,10 +24,28 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
core-toolbar.tall {
|
||||||
|
/* 2x normal height */
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
core-toolbar .bottom {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.30s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
core-toolbar.tall .bottom {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
paper-tab {
|
paper-tab {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-menu-button {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
paper-dropdown {
|
paper-dropdown {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
@ -50,9 +68,9 @@
|
|||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<core-header-panel fit>
|
<core-header-panel fit mode="{{hasCustomGroups && 'waterfall-tall'}}">
|
||||||
|
|
||||||
<core-toolbar class='medium-tall'>
|
<core-toolbar>
|
||||||
<div flex>Home Assistant</div>
|
<div flex>Home Assistant</div>
|
||||||
<paper-icon-button icon="refresh"
|
<paper-icon-button icon="refresh"
|
||||||
on-click="{{handleRefreshClick}}"></paper-icon-button>
|
on-click="{{handleRefreshClick}}"></paper-icon-button>
|
||||||
@ -82,12 +100,10 @@
|
|||||||
|
|
||||||
<paper-tab>ALL</paper-tab>
|
<paper-tab>ALL</paper-tab>
|
||||||
|
|
||||||
<template repeat="{{state in api.states}}">
|
<template repeat="{{group in customGroups}}">
|
||||||
<template if="{{state.isCustomGroup}}">
|
<paper-tab data-entity="{{group.entity_id}}">
|
||||||
<paper-tab data-entity="{{state.entity_id}}">
|
{{group.entityDisplay}}
|
||||||
{{state.entityDisplay}}
|
</paper-tab>
|
||||||
</paper-tab>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</paper-tabs>
|
</paper-tabs>
|
||||||
@ -106,6 +122,11 @@
|
|||||||
Polymer({
|
Polymer({
|
||||||
selectedTab: null,
|
selectedTab: null,
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
customGroups: "getCustomGroups(api.states)",
|
||||||
|
hasCustomGroups: "customGroups.length > 0"
|
||||||
|
},
|
||||||
|
|
||||||
tabClicked: function(ev) {
|
tabClicked: function(ev) {
|
||||||
if(ev.detail.isSelected) {
|
if(ev.detail.isSelected) {
|
||||||
// will be null for ALL tab
|
// will be null for ALL tab
|
||||||
@ -131,6 +152,11 @@
|
|||||||
|
|
||||||
handleLogOutClick: function() {
|
handleLogOutClick: function() {
|
||||||
this.api.logOut();
|
this.api.logOut();
|
||||||
|
},
|
||||||
|
|
||||||
|
getCustomGroups: function(states) {
|
||||||
|
return states ?
|
||||||
|
states.filter(function(state) { return state.isCustomGroup;}) : [];
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user