jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-16 05:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix opening menu triggers column change (#1400)

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-07-03 14:47:36 -04:00 committed by GitHub
parent ad4814dfad
commit c201a9073f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/layouts/partial-cards.js
View File

@ -118,7 +118,6 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
showMenu: { showMenu: {
type: Boolean, type: Boolean,
observer: 'handleWindowChange',
}, },
panelVisible: { panelVisible: {
@ -171,23 +170,27 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
}; };
} }
static get observers() {
return ['_updateColumns(narrow, showMenu)'];
}
ready() { ready() {
this.handleWindowChange = this.handleWindowChange.bind(this); this._updateColumns = this._updateColumns.bind(this);
this.mqls = [300, 600, 900, 1200].map(width => matchMedia(`(min-width: ${width}px)`)); this.mqls = [300, 600, 900, 1200].map(width => matchMedia(`(min-width: ${width}px)`));
super.ready(); super.ready();
} }
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this.mqls.forEach(mql => mql.addListener(this.handleWindowChange)); this.mqls.forEach(mql => mql.addListener(this._updateColumns));
} }
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.mqls.forEach(mql => mql.removeListener(this.handleWindowChange)); this.mqls.forEach(mql => mql.removeListener(this._updateColumns));
} }
handleWindowChange() { _updateColumns() {
const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0); const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
// Do -1 column if the menu is docked and open // Do -1 column if the menu is docked and open
this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu)); this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));

26
src/panels/lovelace/ha-panel-lovelace.js
View File

@ -80,19 +80,23 @@ class Lovelace extends PolymerElement {
}; };
} }
ready() { static get observers() {
super.ready(); return ['_updateColumns(narrow, showMenu)'];
this._fetchConfig();
this._handleWindowChange = this._handleWindowChange.bind(this);
this.mqls = [300, 600, 900, 1200].map((width) => {
const mql = matchMedia(`(min-width: ${width}px)`);
mql.addListener(this._handleWindowChange);
return mql;
});
this._handleWindowChange();
} }
_handleWindowChange() { ready() {
this._fetchConfig();
this._updateColumns = this._updateColumns.bind(this);
this.mqls = [300, 600, 900, 1200].map((width) => {
const mql = matchMedia(`(min-width: ${width}px)`);
mql.addListener(this._updateColumns);
return mql;
});
this._updateColumns();
super.ready();
}
_updateColumns() {
const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0); const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
// Do -1 column if the menu is docked and open // Do -1 column if the menu is docked and open
this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu)); this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));