jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-15 13:26:34 +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: {
type: Boolean,
observer: 'handleWindowChange',
},
panelVisible: {
@ -171,23 +170,27 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
};
}
static get observers() {
return ['_updateColumns(narrow, showMenu)'];
}
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)`));
super.ready();
}
connectedCallback() {
super.connectedCallback();
this.mqls.forEach(mql => mql.addListener(this.handleWindowChange));
this.mqls.forEach(mql => mql.addListener(this._updateColumns));
}
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);
// Do -1 column if the menu is docked and open
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() {
super.ready();
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();
static get observers() {
return ['_updateColumns(narrow, showMenu)'];
}
_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);
// Do -1 column if the menu is docked and open
this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));