diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js index c1cac68c8b..9def4e6095 100644 --- a/gallery/src/components/demo-more-info.js +++ b/gallery/src/components/demo-more-info.js @@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../src/components/ha-card"; -import "../../../src/dialogs/more-info/controls/more-info-content"; +import "../../../src/dialogs/more-info/more-info-content"; import "../../../src/state-summary/state-card-content"; class DemoMoreInfo extends PolymerElement { diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 67cd631b87..19677825d5 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -3,7 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../src/components/ha-card"; import { SUPPORT_BRIGHTNESS } from "../../../src/data/light"; -import "../../../src/dialogs/more-info/controls/more-info-content"; +import "../../../src/dialogs/more-info/more-info-content"; import { getEntity } from "../../../src/fake_data/entity"; import { provideHass } from "../../../src/fake_data/provide_hass"; import "../components/demo-more-infos"; diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 31691ed8d7..8881fd2851 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -23,6 +23,12 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html` @customElement("ha-dialog") export class HaDialog extends MwcDialog { + protected renderHeading() { + return html` + ${super.renderHeading()} + `; + } + protected static get styles(): CSSResult[] { return [ style, @@ -43,6 +49,9 @@ export class HaDialog extends MwcDialog { .mdc-dialog .mdc-dialog__content { padding: var(--dialog-content-padding, 20px 24px); } + .mdc-dialog .mdc-dialog__surface { + min-height: var(--mdc-dialog-min-height, auto); + } .header_button { position: absolute; right: 16px; diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js index bbe09e6829..9939db3d1b 100644 --- a/src/components/ha-labeled-slider.js +++ b/src/components/ha-labeled-slider.js @@ -10,6 +10,7 @@ class HaLabeledSlider extends PolymerElement { diff --git a/src/dialogs/ha-more-info-dialog.js b/src/dialogs/ha-more-info-dialog.js deleted file mode 100644 index 1f80d19aec..0000000000 --- a/src/dialogs/ha-more-info-dialog.js +++ /dev/null @@ -1,155 +0,0 @@ -import "@polymer/paper-dialog-behavior/paper-dialog-shared-styles"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { computeStateDomain } from "../common/entity/compute_state_domain"; -import DialogMixin from "../mixins/dialog-mixin"; -import "../styles/polymer-ha-style-dialog"; -import "./more-info/more-info-controls"; - -/* - * @appliesMixin DialogMixin - */ -class HaMoreInfoDialog extends DialogMixin(PolymerElement) { - static get template() { - return html` - - - - `; - } - - static get properties() { - return { - hass: Object, - stateObj: { - type: Object, - computed: "_computeStateObj(hass)", - observer: "_stateObjChanged", - }, - - large: { - type: Boolean, - reflectToAttribute: true, - observer: "_largeChanged", - }, - - dataDomain: { - computed: "_computeDomain(stateObj)", - reflectToAttribute: true, - }, - }; - } - - static get observers() { - return ["_dialogOpenChanged(opened)"]; - } - - _dialogElement() { - return this; - } - - _computeDomain(stateObj) { - return stateObj ? computeStateDomain(stateObj) : ""; - } - - _computeStateObj(hass) { - return hass.states[hass.moreInfoEntityId] || null; - } - - async _stateObjChanged(newVal) { - if (!newVal) { - this.setProperties({ - opened: false, - large: false, - }); - return; - } - - requestAnimationFrame(() => - requestAnimationFrame(() => { - // allow dialog to render content before showing it so it will be - // positioned correctly. - this.opened = true; - }) - ); - } - - _dialogOpenChanged(newVal) { - if (!newVal && this.stateObj) { - this.fire("hass-more-info", { entityId: null }); - } - } - - _equals(a, b) { - return a === b; - } - - _largeChanged() { - this.notifyResize(); - } -} -customElements.define("ha-more-info-dialog", HaMoreInfoDialog); diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js index 83a0abf115..f961c9c6a8 100644 --- a/src/dialogs/more-info/controls/more-info-light.js +++ b/src/dialogs/more-info/controls/more-info-light.js @@ -28,6 +28,12 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) { return html` - - - -
- [[_computeStateName(stateObj)]] -
- - - - - - - - - - - `; - } - - static get properties() { - return { - hass: Object, - - stateObj: { - type: Object, - observer: "_stateObjChanged", - }, - - dialogElement: Object, - registryEntry: Object, - - domain: { - type: String, - reflectToAttribute: true, - computed: "_computeDomain(stateObj)", - }, - - _stateHistory: Object, - _stateHistoryLoading: Boolean, - - large: { - type: Boolean, - value: false, - notify: true, - }, - - _cacheConfig: { - type: Object, - value: { - refresh: 60, - cacheKey: null, - hoursToShow: 24, - }, - }, - rtl: { - type: Boolean, - reflectToAttribute: true, - computed: "_computeRTL(hass)", - }, - }; - } - - enlarge() { - this.large = !this.large; - } - - _computeShowStateInfo(stateObj) { - return !stateObj || !DOMAINS_NO_INFO.includes(computeStateDomain(stateObj)); - } - - _computeShowRestored(stateObj) { - return stateObj && stateObj.attributes.restored; - } - - _computeShowHistoryComponent(hass, stateObj) { - return ( - hass && - stateObj && - isComponentLoaded(hass, "history") && - !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeStateDomain(stateObj)) - ); - } - - _computeDomain(stateObj) { - return stateObj ? computeStateDomain(stateObj) : ""; - } - - _computeStateName(stateObj) { - return stateObj ? computeStateName(stateObj) : ""; - } - - _computeEdit(hass, stateObj) { - const domain = this._computeDomain(stateObj); - return ( - stateObj && - hass.user.is_admin && - ((EDITABLE_DOMAINS_WITH_ID.includes(domain) && stateObj.attributes.id) || - EDITABLE_DOMAINS.includes(domain)) - ); - } - - _stateObjChanged(newVal) { - if (!newVal) { - return; - } - - if (this._cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) { - this._cacheConfig = { - ...this._cacheConfig, - cacheKey: `more_info.${newVal.entity_id}`, - }; - } - } - - _removeEntity() { - showConfirmationDialog(this, { - title: this.localize( - "ui.dialogs.more_info_control.restored.confirm_remove_title" - ), - text: this.localize( - "ui.dialogs.more_info_control.restored.confirm_remove_text" - ), - confirmText: this.localize("ui.common.yes"), - dismissText: this.localize("ui.common.no"), - confirm: () => - removeEntityRegistryEntry(this.hass, this.stateObj.entity_id), - }); - } - - _gotoSettings() { - showEntityEditorDialog(this, { - entity_id: this.stateObj.entity_id, - }); - this.fire("hass-more-info", { entityId: null }); - } - - _gotoEdit() { - const domain = this._computeDomain(this.stateObj); - navigate( - this, - `/config/${domain}/edit/${ - EDITABLE_DOMAINS_WITH_ID.includes(domain) - ? this.stateObj.attributes.id - : this.stateObj.entity_id - }` - ); - this.fire("hass-more-info", { entityId: null }); - } - - _computeRTL(hass) { - return computeRTL(hass); - } -} -customElements.define("more-info-controls", MoreInfoControls); diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts index 1e347183c6..f0c992e30c 100644 --- a/src/panels/lovelace/cards/hui-history-graph-card.ts +++ b/src/panels/lovelace/cards/hui-history-graph-card.ts @@ -147,19 +147,14 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { `; } - private _getStateHistory(): void { - getRecentWithCache( + private async _getStateHistory(): Promise { + this._stateHistory = getRecentWithCache( this.hass!, this._cacheConfig!.cacheKey, this._cacheConfig!, this.hass!.localize, this.hass!.language - ).then((stateHistory) => { - this._stateHistory = { - ...this._stateHistory, - ...stateHistory, - }; - }); + ); } private _clearInterval(): void { diff --git a/src/resources/styles.ts b/src/resources/styles.ts index ea6ba3cfbc..0b3c1b2678 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -241,7 +241,9 @@ export const haStyleDialog = css` @media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: 100vw; - --mdc-dialog-max-height: 100vh; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --mdc-dialog-max-height: 100%; --mdc-shape-medium: 0px; --vertial-align-dialog: flex-end; } diff --git a/src/state/more-info-mixin.ts b/src/state/more-info-mixin.ts index b2d3d852af..3dd6b3ed02 100644 --- a/src/state/more-info-mixin.ts +++ b/src/state/more-info-mixin.ts @@ -20,7 +20,7 @@ export default >(superClass: T) => // Load it once we are having the initial rendering done. import( - /* webpackChunkName: "more-info-dialog" */ "../dialogs/ha-more-info-dialog" + /* webpackChunkName: "more-info-dialog" */ "../dialogs/more-info/ha-more-info-dialog" ); }