${this.stateObj.attributes.title}
+ ${this._error + ? html`
+
-
+ ${this.hass.formatEntityAttributeName(
+ this.stateObj,
+ "installed_version"
+ )}
+
+
+ ${this.stateObj.attributes.installed_version ??
+ this.hass.localize("state.default.unavailable")}
+
- ${this.stateObj.attributes.installed_version ??
- this.hass.localize("state.default.unavailable")}
+
-
+
-
+ ${this.hass.formatEntityAttributeName(
+ this.stateObj,
+ "latest_version"
+ )}
+
+
+ ${this.stateObj.attributes.latest_version ??
+ this.hass.localize("state.default.unavailable")}
+
-
- ${this.stateObj.attributes.release_url
- ? html``
- : ""}
- ${supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES) &&
- !this._error
- ? this._releaseNotes === undefined
- ? html`
- ${this.hass.formatEntityAttributeName(
- this.stateObj,
- "latest_version"
- )}
-
-
- ${this.stateObj.attributes.latest_version ??
- this.hass.localize("state.default.unavailable")}
-
-
-
-
- `
- : this.stateObj.attributes.release_summary
- ? html`
-
-
- `
- : ""}
-
-
-
-
- ${this.stateObj.state === BINARY_STATE_OFF &&
- this.stateObj.attributes.skipped_version
+ : nothing}
+ ${supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES) &&
+ !this._error
+ ? this._releaseNotes === undefined
+ ? html`
+
+ ${this._markdownLoading ? this._renderLoader() : nothing} + ` + : html` +
+
+
+
+ `;
+ }
+
+ private _renderLoader() {
+ return html`
+ + ${this._markdownLoading ? this._renderLoader() : nothing} + ` + : html` +
+
+
+
`;
}
protected firstUpdated(): void {
if (supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES)) {
- updateReleaseNotes(this.hass, this.stateObj!.entity_id)
- .then((result) => {
- this._releaseNotes = result;
- })
- .catch((err) => {
- this._error = err.message;
- });
+ this._fetchReleaseNotes();
+ }
+ }
+
+ private async _markdownLoaded() {
+ if (this._markdownLoading) {
+ this._markdownLoading = false;
+ }
+ }
+
+ private async _fetchReleaseNotes() {
+ try {
+ this._releaseNotes = await updateReleaseNotes(
+ this.hass,
+ this.stateObj!.entity_id
+ );
+ } catch (err: any) {
+ this._error = err.message;
}
}
@@ -183,9 +225,11 @@ class MoreInfoUpdate extends LitElement {
if (!supportsFeature(this.stateObj!, UpdateEntityFeature.BACKUP)) {
return null;
}
- const checkbox = this.shadowRoot?.querySelector("ha-checkbox");
- if (checkbox) {
- return checkbox.checked;
+ const createBackupSwitch = this.shadowRoot?.getElementById(
+ "create-backup"
+ ) as HaSwitch;
+ if (createBackupSwitch) {
+ return createBackupSwitch.checked;
}
return true;
}
@@ -234,6 +278,12 @@ class MoreInfoUpdate extends LitElement {
static get styles(): CSSResultGroup {
return css`
+ :host {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ justify-content: space-between;
+ }
hr {
border-color: var(--divider-color);
border-bottom: none;
@@ -248,26 +298,44 @@ class MoreInfoUpdate extends LitElement {
flex-direction: row;
justify-content: space-between;
}
- .actions {
+
+ .footer {
border-top: 1px solid var(--divider-color);
background: var(
--ha-dialog-surface-background,
var(--mdc-theme-surface, #fff)
);
- margin: 8px 0 0;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
position: sticky;
bottom: 0;
- padding: 12px 0;
- margin-bottom: -24px;
- z-index: 1;
+ margin: 0 -24px -24px -24px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
+ z-index: 10;
}
- .actions mwc-button {
- margin: 0 4px 4px;
+ ha-settings-row {
+ width: 100%;
+ padding: 0 24px;
+ box-sizing: border-box;
+ margin-bottom: -16px;
+ margin-top: -4px;
}
+
+ .actions {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ box-sizing: border-box;
+ padding: 12px;
+ z-index: 1;
+ gap: 8px;
+ }
+
a {
color: var(--primary-color);
}
@@ -282,6 +350,16 @@ class MoreInfoUpdate extends LitElement {
}
ha-markdown {
direction: ltr;
+ padding-bottom: 16px;
+ box-sizing: border-box;
+ }
+ ha-markdown.hidden {
+ display: none;
+ }
+ .loader {
+ height: 80px;
+ box-sizing: border-box;
+ padding-bottom: 16px;
}
`;
}
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index 99e8a95448..95394b0206 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -9,6 +9,7 @@ import {
computeShowHistoryComponent,
computeShowLogBookComponent,
computeShowNewMoreInfo,
+ DOMAINS_FULL_HEIGHT_MORE_INFO,
DOMAINS_NO_INFO,
DOMAINS_WITH_MORE_INFO,
} from "./const";
@@ -40,6 +41,8 @@ export class MoreInfoInfo extends LitElement {
const entityRegObj = this.hass.entities[entityId];
const domain = computeDomain(entityId);
const isNewMoreInfo = stateObj && computeShowNewMoreInfo(stateObj);
+ const isFullHeight =
+ isNewMoreInfo || DOMAINS_FULL_HEIGHT_MORE_INFO.includes(domain);
return html`
@@ -89,7 +92,7 @@ export class MoreInfoInfo extends LitElement {
.entityId=${this.entityId}
>`}