${this.description}
${/* treat as available when undefined */
@@ -53,8 +73,9 @@ class HassioCardContent extends LitElement {
static get styles(): CSSResult {
return css`
iron-icon {
- margin-right: 16px;
- margin-top: 16px;
+ margin-right: 24px;
+ margin-left: 8px;
+ margin-top: 12px;
float: left;
color: var(--secondary-text-color);
}
@@ -88,6 +109,44 @@ class HassioCardContent extends LitElement {
ha-relative-time {
display: block;
}
+ .icon_image img {
+ max-height: 40px;
+ max-width: 40px;
+ margin-top: 4px;
+ margin-right: 16px;
+ float: left;
+ }
+ .icon_image.stopped,
+ .icon_image.not_available {
+ filter: grayscale(1);
+ }
+ .dot {
+ position: absolute;
+ background-color: var(--paper-orange-400);
+ width: 12px;
+ height: 12px;
+ top: 8px;
+ right: 8px;
+ border-radius: 50%;
+ }
+ .topbar {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ top: 0;
+ left: 0;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ }
+ .topbar.installed {
+ background-color: var(--primary-color);
+ }
+ .topbar.update {
+ background-color: var(--accent-color);
+ }
+ .topbar.unavailable {
+ background-color: var(--error-color);
+ }
`;
}
}
diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts
index e0403b4cf2..801afd1854 100644
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/hassio/src/dashboard/hassio-addons.ts
@@ -22,6 +22,9 @@ class HassioAddons extends LitElement {
@property() public addons?: HassioAddonInfo[];
protected render(): TemplateResult {
+ const [major, minor] = this.hass.config.version.split(".", 2);
+ const ha105pluss =
+ Number(major) > 0 || (major === "0" && Number(minor) >= 105);
return html`
Add-ons
@@ -44,12 +47,30 @@ class HassioAddons extends LitElement {
@@ -72,28 +93,6 @@ class HassioAddons extends LitElement {
];
}
- private _computeIcon(addon: HassioAddonInfo): string {
- return addon.installed !== addon.version
- ? "hassio:arrow-up-bold-circle"
- : "hassio:puzzle";
- }
-
- private _computeIconTitle(addon: HassioAddonInfo): string {
- if (addon.installed !== addon.version) {
- return "New version available";
- }
- return addon.state === "started"
- ? "Add-on is running"
- : "Add-on is stopped";
- }
-
- private _computeIconClass(addon: HassioAddonInfo): string {
- if (addon.installed !== addon.version) {
- return "update";
- }
- return addon.state === "started" ? "running" : "";
- }
-
private _addonTapped(ev: any): void {
navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
}
diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts
index 13e57019fd..935d5676d7 100644
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -1,9 +1,12 @@
window.loadES5Adapter().then(() => {
+ // eslint-disable-next-line
+ import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
// eslint-disable-next-line
import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
// eslint-disable-next-line
import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
});
+
const styleEl = document.createElement("style");
styleEl.innerHTML = `
body {
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index fa33f100b3..a12a21b954 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -17,11 +17,11 @@ export const hassioStyle = css`
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
- padding-left: 16px;
+ padding-left: 8px;
}
.description {
margin-top: 4px;
- padding-left: 16px;
+ padding-left: 8px;
}
.card-group {
display: grid;