mirror of
https://github.com/home-assistant/frontend.git
synced 2026-02-04 01:10:33 -06:00
Use progress ring for updates on config dashboard (#27731)
* Use progress ring for updates on config dashboard * Prcoess code review
This commit is contained in:
parent
cecadde497
commit
bd2673f311
@ -20,6 +20,7 @@ import { subscribeEntityRegistry } from "../../../data/entity_registry";
|
||||
import type { UpdateEntity } from "../../../data/update";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import "../../../components/ha-progress-ring";
|
||||
|
||||
@customElement("ha-config-updates")
|
||||
class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
@ -56,6 +57,29 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
this._entities?.find((entity) => entity.entity_id === entityId)
|
||||
);
|
||||
|
||||
private _renderUpdateProgress(entity: UpdateEntity) {
|
||||
if (entity.attributes.update_percentage != null) {
|
||||
return html`<ha-progress-ring
|
||||
size="small"
|
||||
.value=${entity.attributes.update_percentage}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.updates.update_in_progress"
|
||||
)}
|
||||
></ha-progress-ring>`;
|
||||
}
|
||||
|
||||
if (entity.attributes.in_progress) {
|
||||
return html`<ha-spinner
|
||||
size="small"
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.panel.config.updates.update_in_progress"
|
||||
)}
|
||||
></ha-spinner>`;
|
||||
}
|
||||
|
||||
return html`<ha-icon-next></ha-icon-next>`;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.updateEntities?.length) {
|
||||
return nothing;
|
||||
@ -106,13 +130,9 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
)}
|
||||
></state-badge>
|
||||
${this.narrow && entity.attributes.in_progress
|
||||
? html`<ha-spinner
|
||||
class="absolute"
|
||||
size="small"
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.panel.config.updates.update_in_progress"
|
||||
)}
|
||||
></ha-spinner>`
|
||||
? html`<div class="absolute">
|
||||
${this._renderUpdateProgress(entity)}
|
||||
</div>`
|
||||
: nothing}
|
||||
</div>
|
||||
<span slot="headline"
|
||||
@ -128,16 +148,9 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
: nothing}
|
||||
</span>
|
||||
${!this.narrow
|
||||
? entity.attributes.in_progress
|
||||
? html`<div slot="end">
|
||||
<ha-spinner
|
||||
size="small"
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.panel.config.updates.update_in_progress"
|
||||
)}
|
||||
></ha-spinner>
|
||||
</div>`
|
||||
: html`<ha-icon-next slot="end"></ha-icon-next>`
|
||||
? html`<div slot="end">
|
||||
${this._renderUpdateProgress(entity)}
|
||||
</div>`
|
||||
: nothing}
|
||||
</ha-md-list-item>
|
||||
`;
|
||||
@ -193,13 +206,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
div[slot="start"] {
|
||||
position: relative;
|
||||
}
|
||||
ha-spinner.absolute {
|
||||
div.absolute {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
state-badge.updating {
|
||||
opacity: 0.5;
|
||||
opacity: 0.2;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user