mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 09:56:36 +00:00
More UI tweaks
This commit is contained in:
parent
6d2dd25a4c
commit
ead2ba36ac
25
src/components/ha-view-tabs.html
Normal file
25
src/components/ha-view-tabs.html
Normal file
@ -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>
|
50
src/components/ha-view-tabs.js
Normal file
50
src/components/ha-view-tabs.js
Normal file
@ -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);
|
||||
}
|
||||
},
|
||||
});
|
@ -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'>
|
||||
|
@ -16,7 +16,7 @@ export default new Polymer({
|
||||
},
|
||||
|
||||
computeMenuButtonClass(narrow, showMenu) {
|
||||
return !narrow && showMenu ? 'invisible' : '';
|
||||
return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
|
||||
},
|
||||
|
||||
toggleMenu() {
|
||||
|
@ -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 {
|
||||
--paper-tabs-selection-bar-color: var(--accent-color);
|
||||
}
|
||||
|
||||
paper-tab {
|
||||
text-transform: uppercase;
|
||||
.views {
|
||||
padding-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,21 +64,8 @@
|
||||
</div>
|
||||
|
||||
<template is='dom-if' if='[[hasViews]]'>
|
||||
<div class='fit bottom'>
|
||||
<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>
|
||||
<div class='fit bottom views'>
|
||||
<ha-view-tabs></ha-view-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</paper-toolbar>
|
||||
|
@ -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);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
@ -34,6 +34,7 @@
|
||||
|
||||
.render-pane {
|
||||
position: relative;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.render-spinner {
|
||||
|
@ -15,6 +15,10 @@
|
||||
.leaflet-top, .leaflet-bottom {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<dom-module id="partial-map">
|
||||
|
@ -73,7 +73,7 @@ export default new Polymer({
|
||||
},
|
||||
|
||||
computeMenuButtonClass(narrow, showMenu) {
|
||||
return !narrow && showMenu ? 'invisible' : '';
|
||||
return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
|
||||
},
|
||||
|
||||
toggleMenu() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user