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

Revise hassio update card design (#4041)

Browse Source 
* Revise hassio update card design

See https://github.com/home-assistant/home-assistant-polymer/issues/3916

* Remove available text; use secondary text color instead of yellow/orange

* Less bold text for update header
This commit is contained in:
Josh McCarty 2019-10-22 14:06:18 -07:00 committed by Bram Kragten
parent 49d0f2359b
commit 1e7497ad33
1 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
hassio/src/dashboard/hassio-update.ts
View File

@ -7,6 +7,7 @@ import {
property,
customElement,
} from "lit-element";
import "@polymer/iron-icon/iron-icon";
import { HomeAssistant } from "../../../src/types";
import {
@ -33,12 +34,15 @@ export class HassioUpdate extends LitElement {
@property() public error?: string;
protected render(): TemplateResult | void {
if (
this.hassInfo.version === this.hassInfo.last_version &&
this.supervisorInfo.version === this.supervisorInfo.last_version &&
(!this.hassOsInfo ||
this.hassOsInfo.version === this.hassOsInfo.version_latest)
) {
const updatesAvailable: number = [
this.hassInfo,
this.supervisorInfo,
this.hassOsInfo,
].filter((value) => {
return !!value && value.version !== value.last_version;
}).length;
if (!updatesAvailable) {
return html``;
}
@ -50,6 +54,11 @@ export class HassioUpdate extends LitElement {
`
: ""}
<div class="card-group">
<div class="title">
${updatesAvailable > 1
? "Updates Available 🎉"
: "Update Available 🎉"}
</div>
${this._renderUpdateCard(
"Home Assistant",
this.hassInfo.version,
@ -57,7 +66,8 @@ export class HassioUpdate extends LitElement {
"hassio/homeassistant/update",
`https://${
this.hassInfo.last_version.includes("b") ? "rc" : "www"
}.home-assistant.io/latest-release-notes/`
}.home-assistant.io/latest-release-notes/`,
"hassio:home-assistant"
)}
${this._renderUpdateCard(
"Hass.io Supervisor",
@ -89,18 +99,31 @@ export class HassioUpdate extends LitElement {
curVersion: string,
lastVersion: string,
apiPath: string,
releaseNotesUrl: string
releaseNotesUrl: string,
icon?: string
): TemplateResult {
if (lastVersion === curVersion) {
return html``;
}
return html`
<paper-card heading="${name} update available! 🎉">
<paper-card>
<div class="card-content">
${name} ${lastVersion} is available and you are currently running
${name} ${curVersion}.
${icon
? html`
<div class="icon">
<iron-icon .icon="${icon}" />
</div>
`
: ""}
<div class="update-heading">${name} ${lastVersion}</div>
<div class="warning">
You are currently running version ${curVersion}
</div>
</div>
<div class="card-actions">
<a href="${releaseNotesUrl}" target="_blank">
<mwc-button>Release notes</mwc-button>
</a>
<ha-call-api-button
.hass=${this.hass}
.path=${apiPath}
@ -108,9 +131,6 @@ export class HassioUpdate extends LitElement {
>
Update
</ha-call-api-button>
<a href="${releaseNotesUrl}" target="_blank">
<mwc-button>Release notes</mwc-button>
</a>
</div>
</paper-card>
`;
@ -140,6 +160,23 @@ export class HassioUpdate extends LitElement {
display: inline-block;
margin-bottom: 32px;
}
.icon {
--iron-icon-height: 48px;
--iron-icon-width: 48px;
float: right;
margin: 0 0 2px 10px;
}
.update-heading {
font-size: var(--paper-font-subhead_-_font-size);
font-weight: 500;
margin-bottom: 0.5em;
}
.warning {
color: var(--secondary-text-color);
}
.card-actions {
text-align: right;
}
.errors {
color: var(--google-red-500);
padding: 16px;