Codesplit Supervisor panel icons (#5809)

This commit is contained in:
Bram Kragten 2020-05-08 13:10:24 +02:00 committed by GitHub
parent 20203f7bdb
commit 3febf059ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 419 additions and 422 deletions

View File

@ -1,4 +1,4 @@
import "@polymer/paper-card/paper-card";
import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
import {
css,
CSSResultArray,
@ -10,6 +10,7 @@ import {
import memoizeOne from "memoize-one";
import { atLeastVersion } from "../../../src/common/config/version";
import { navigate } from "../../../src/common/navigate";
import "../../../src/components/ha-card";
import {
HassioAddonInfo,
HassioAddonRepository,
@ -66,7 +67,7 @@ class HassioAddonRepositoryEl extends LitElement {
<div class="card-group">
${addons.map(
(addon) => html`
<paper-card
<ha-card
.addon=${addon}
class=${addon.available ? "" : "not_available"}
@click=${this._addonTapped}
@ -78,8 +79,8 @@ class HassioAddonRepositoryEl extends LitElement {
.description=${addon.description}
.available=${addon.available}
.icon=${addon.installed && addon.installed !== addon.version
? "hassio:arrow-up-bold-circle"
: "hassio:puzzle"}
? mdiArrowUpBoldCircle
: mdiPuzzle}
.iconTitle=${addon.installed
? addon.installed !== addon.version
? "New version available"
@ -111,7 +112,7 @@ class HassioAddonRepositoryEl extends LitElement {
: ""}
></hassio-card-content>
</div>
</paper-card>
</ha-card>
`
)}
</div>
@ -127,7 +128,7 @@ class HassioAddonRepositoryEl extends LitElement {
return [
hassioStyle,
css`
paper-card {
ha-card {
cursor: pointer;
}
.not_available {

View File

@ -1,3 +1,6 @@
import "@material/mwc-icon-button/mwc-icon-button";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import {
css,
CSSResult,
@ -6,22 +9,21 @@ import {
PropertyValues,
} from "lit-element";
import { html, TemplateResult } from "lit-html";
import "../../../src/common/search/search-input";
import "../../../src/components/ha-button-menu";
import "../../../src/components/ha-svg-icon";
import {
fetchHassioAddonsInfo,
HassioAddonInfo,
HassioAddonRepository,
reloadHassioAddons,
} from "../../../src/data/hassio/addon";
import "../../../src/components/ha-icon-button";
import "../../../src/layouts/loading-screen";
import "../../../src/layouts/hass-tabs-subpage";
import "../../../src/layouts/loading-screen";
import { HomeAssistant, Route } from "../../../src/types";
import "../../../src/common/search/search-input";
import "./hassio-addon-repository";
import { supervisorTabs } from "../hassio-panel";
import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
import { supervisorTabs } from "../hassio-panel";
import "./hassio-addon-repository";
const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
if (a.slug === "local") {
@ -94,27 +96,17 @@ class HassioAddonStore extends LitElement {
.tabs=${supervisorTabs}
>
<span slot="header">Add-on store</span>
<paper-menu-button
close-on-activate
no-animations
horizontal-align="right"
horizontal-offset="-5"
slot="toolbar-icon"
>
<ha-icon-button
icon="hassio:dots-vertical"
slot="dropdown-trigger"
alt="menu"
></ha-icon-button>
<paper-listbox slot="dropdown-content" role="listbox">
<paper-item @tap=${this._manageRepositories}>
Repositories
</paper-item>
<paper-item @tap=${this.refreshData}>
Reload
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
<mwc-icon-button slot="trigger" alt="menu">
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @tap=${this._manageRepositories}>
Repositories
</mwc-list-item>
<mwc-list-item @tap=${this.refreshData}>
Reload
</mwc-list-item>
</ha-button-menu>
${repos.length === 0
? html`<loading-screen></loading-screen>`
: html`

View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -14,6 +13,7 @@ import {
TemplateResult,
} from "lit-element";
import "web-animations-js/web-animations-next-lite.min";
import "../../../../src/components/ha-card";
import {
HassioAddonDetails,
HassioAddonSetOptionParams,
@ -23,9 +23,9 @@ import {
fetchHassioHardwareAudio,
HassioHardwareAudioDevice,
} from "../../../../src/data/hassio/hardware";
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
import { hassioStyle } from "../../resources/hassio-style";
@customElement("hassio-addon-audio")
@ -46,7 +46,7 @@ class HassioAddonAudio extends LitElement {
protected render(): TemplateResult {
return html`
<paper-card heading="Audio">
<ha-card header="Audio">
<div class="card-content">
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
@ -92,7 +92,7 @@ class HassioAddonAudio extends LitElement {
<div class="card-actions">
<mwc-button @click=${this._saveSettings}>Save</mwc-button>
</div>
</paper-card>
</ha-card>
`;
}
@ -102,7 +102,7 @@ class HassioAddonAudio extends LitElement {
hassioStyle,
css`
:host,
paper-card,
ha-card,
paper-dropdown-menu {
display: block;
}

View File

@ -8,12 +8,10 @@ import {
property,
TemplateResult,
} from "lit-element";
import { HomeAssistant } from "../../../../src/types";
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
import { hassioStyle } from "../../resources/hassio-style";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { hassioStyle } from "../../resources/hassio-style";
import "./hassio-addon-audio";
import "./hassio-addon-config";
import "./hassio-addon-network";

View File

@ -1,6 +1,5 @@
import "@material/mwc-button";
import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
import "@polymer/paper-card/paper-card";
import {
css,
CSSResult,
@ -13,6 +12,7 @@ import {
TemplateResult,
} from "lit-element";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
import {
@ -23,9 +23,8 @@ import {
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types";
import { hassioStyle } from "../../resources/hassio-style";
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
import { hassioStyle } from "../../resources/hassio-style";
@customElement("hassio-addon-config")
class HassioAddonConfig extends LitElement {
@ -46,7 +45,7 @@ class HassioAddonConfig extends LitElement {
return html`
<h1>${this.addon.name}</h1>
<paper-card heading="Configuration">
<ha-card header="Configuration">
<div class="card-content">
<ha-yaml-editor
@value-changed=${this._configChanged}
@ -65,7 +64,7 @@ class HassioAddonConfig extends LitElement {
Save
</mwc-button>
</div>
</paper-card>
</ha-card>
`;
}
@ -77,7 +76,7 @@ class HassioAddonConfig extends LitElement {
:host {
display: block;
}
paper-card {
ha-card {
display: block;
}
.card-actions {

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
@ -11,15 +10,15 @@ import {
TemplateResult,
} from "lit-element";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-card";
import {
HassioAddonDetails,
HassioAddonSetOptionParams,
setHassioAddonOption,
} from "../../../../src/data/hassio/addon";
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
import { hassioStyle } from "../../resources/hassio-style";
interface NetworkItem {
@ -53,7 +52,7 @@ class HassioAddonNetwork extends LitElement {
}
return html`
<paper-card heading="Network">
<ha-card header="Network">
<div class="card-content">
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
@ -90,7 +89,7 @@ class HassioAddonNetwork extends LitElement {
</mwc-button>
<mwc-button @click=${this._saveTapped}>Save</mwc-button>
</div>
</paper-card>
</ha-card>
`;
}
@ -102,7 +101,7 @@ class HassioAddonNetwork extends LitElement {
:host {
display: block;
}
paper-card {
ha-card {
display: block;
}
.errors {

View File

@ -1,5 +1,4 @@
import "@polymer/paper-spinner/paper-spinner-lite";
import "@polymer/paper-card/paper-card";
import {
css,
CSSResult,
@ -9,16 +8,15 @@ import {
property,
TemplateResult,
} from "lit-element";
import { HomeAssistant } from "../../../../src/types";
import {
HassioAddonDetails,
fetchHassioAddonDocumentation,
} from "../../../../src/data/hassio/addon";
import "../../../../src/components/ha-markdown";
import {
fetchHassioAddonDocumentation,
HassioAddonDetails,
} from "../../../../src/data/hassio/addon";
import "../../../../src/layouts/loading-screen";
import { hassioStyle } from "../../resources/hassio-style";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { hassioStyle } from "../../resources/hassio-style";
@customElement("hassio-addon-documentation-tab")
class HassioAddonDocumentationDashboard extends LitElement {
@ -41,14 +39,14 @@ class HassioAddonDocumentationDashboard extends LitElement {
}
return html`
<div class="content">
<paper-card>
<ha-card>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
<div class="card-content">
${this._content
? html`<ha-markdown .content=${this._content}></ha-markdown>`
: html`<loading-screen></loading-screen>`}
</div>
</paper-card>
</ha-card>
</div>
`;
}
@ -58,7 +56,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
haStyle,
hassioStyle,
css`
paper-card {
ha-card {
display: block;
}
.content {

View File

@ -1,4 +1,9 @@
import "../../../src/components/ha-icon-button";
import {
mdiCogs,
mdiFileDocument,
mdiInformationVariant,
mdiMathLog,
} from "@mdi/js";
import "@polymer/paper-spinner/paper-spinner-lite";
import {
css,
@ -14,18 +19,17 @@ import {
fetchHassioAddonInfo,
HassioAddonDetails,
} from "../../../src/data/hassio/addon";
import "../../../src/layouts/hass-tabs-subpage";
import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant, Route } from "../../../src/types";
import { hassioStyle } from "../resources/hassio-style";
import "./config/hassio-addon-audio";
import "./config/hassio-addon-config";
import "./config/hassio-addon-network";
import "./hassio-addon-router";
import "./info/hassio-addon-info";
import "./log/hassio-addon-logs";
import "./config/hassio-addon-network";
import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
import "../../../src/layouts/hass-tabs-subpage";
import "./hassio-addon-router";
@customElement("hassio-addon-dashboard")
class HassioAddonDashboard extends LitElement {
@ -59,7 +63,7 @@ class HassioAddonDashboard extends LitElement {
{
name: "Info",
path: `/hassio/addon/${this.addon.slug}/info`,
icon: "hassio:information-variant",
iconPath: mdiInformationVariant,
},
];
@ -67,7 +71,7 @@ class HassioAddonDashboard extends LitElement {
addonTabs.push({
name: "Documentation",
path: `/hassio/addon/${this.addon.slug}/documentation`,
icon: "hassio:file-document",
iconPath: mdiFileDocument,
});
}
@ -76,12 +80,12 @@ class HassioAddonDashboard extends LitElement {
{
name: "Configuration",
path: `/hassio/addon/${this.addon.slug}/config`,
icon: "hassio:cogs",
iconPath: mdiCogs,
},
{
name: "Log",
path: `/hassio/addon/${this.addon.slug}/logs`,
icon: "hassio:math-log",
iconPath: mdiMathLog,
}
);
}
@ -115,7 +119,6 @@ class HassioAddonDashboard extends LitElement {
css`
:host {
color: var(--primary-text-color);
--paper-card-header-color: var(--primary-text-color);
}
.content {
padding: 24px 0 32px;

View File

@ -1,15 +1,15 @@
import { customElement, property } from "lit-element";
import { HassioAddonDetails } from "../../../src/data/hassio/addon";
import {
HassRouterPage,
RouterOptions,
} from "../../../src/layouts/hass-router-page";
import { customElement, property } from "lit-element";
import { HomeAssistant } from "../../../src/types";
import "./config/hassio-addon-config-tab";
import "./documentation/hassio-addon-documentation-tab";
// Don't codesplit the others, because it breaks the UI when pushed to a Pi
import "./info/hassio-addon-info-tab";
import "./config/hassio-addon-config-tab";
import "./log/hassio-addon-log-tab";
import "./documentation/hassio-addon-documentation-tab";
import { HassioAddonDetails } from "../../../src/data/hassio/addon";
@customElement("hassio-addon-router")
class HassioAddonRouter extends HassRouterPage {

View File

@ -8,12 +8,10 @@ import {
property,
TemplateResult,
} from "lit-element";
import { HomeAssistant } from "../../../../src/types";
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
import { hassioStyle } from "../../resources/hassio-style";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { hassioStyle } from "../../resources/hassio-style";
import "./hassio-addon-info";
@customElement("hassio-addon-info-tab")

View File

@ -1,5 +1,20 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import {
mdiArrowUpBoldCircle,
mdiCheckCircle,
mdiChip,
mdiCircle,
mdiCursorDefaultClickOutline,
mdiDocker,
mdiExclamationThick,
mdiFlask,
mdiHomeAssistant,
mdiInformation,
mdiKey,
mdiNetwork,
mdiPound,
mdiShield,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,
@ -16,10 +31,11 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
import { navigate } from "../../../../src/common/navigate";
import "../../../../src/components/buttons/ha-call-api-button";
import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-label-badge";
import "../../../../src/components/ha-markdown";
import "../../../../src/components/ha-svg-icon";
import "../../../../src/components/ha-switch";
import "../../../../src/components/ha-icon";
import {
fetchHassioAddonChangelog,
HassioAddonDetails,
@ -30,23 +46,23 @@ import {
setHassioAddonSecurity,
uninstallHassioAddon,
} from "../../../../src/data/hassio/addon";
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import "../../components/hassio-card-content";
import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
import { hassioStyle } from "../../resources/hassio-style";
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
const STAGE_ICON = {
stable: "mdi:check-circle",
experimental: "mdi:flask",
deprecated: "mdi:exclamation-thick",
stable: mdiCheckCircle,
experimental: mdiFlask,
deprecated: mdiExclamationThick,
};
const PERMIS_DESC = {
stage: {
title: "Add-on Stage",
description: `Add-ons can have one of three stages:\n\n<ha-icon icon='${STAGE_ICON.stable}'></ha-icon>**Stable**: These are add-ons ready to be used in production.\n<ha-icon icon='${STAGE_ICON.experimental}'></ha-icon>**Experimental**: These may contain bugs, and may be unfinished.\n<ha-icon icon='${STAGE_ICON.deprecated}'></ha-icon>**Deprecated**: These add-ons will no longer receive any updates.`,
description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
},
rating: {
title: "Add-on Security Rating",
@ -116,7 +132,7 @@ class HassioAddonInfo extends LitElement {
return html`
${this._computeUpdateAvailable
? html`
<paper-card heading="Update available! 🎉">
<ha-card header="Update available! 🎉">
<div class="card-content">
<hassio-card-content
.hass=${this.hass}
@ -124,7 +140,7 @@ class HassioAddonInfo extends LitElement {
.version_latest} is available"
.description="You are currently running version ${this.addon
.version}"
icon="hassio:arrow-up-bold-circle"
icon=${mdiArrowUpBoldCircle}
iconClass="update"
></hassio-card-content>
${!this.addon.available
@ -151,12 +167,13 @@ class HassioAddonInfo extends LitElement {
`
: ""}
</div>
</paper-card>
</ha-card>
`
: ""}
${!this.addon.protected
? html`
<paper-card heading="Warning: Protection mode is disabled!" class="warning">
<ha-card class="warning">
<div class="card-header">Warning: Protection mode is disabled!</div>
<div class="card-content">
Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
</div>
@ -164,11 +181,11 @@ class HassioAddonInfo extends LitElement {
<mwc-button @click=${this._protectionToggled}>Enable Protection mode</mwc-button>
</div>
</div>
</paper-card>
</ha-card>
`
: ""}
<paper-card>
<ha-card>
<div class="card-content">
<div class="addon-header">
${!this.narrow ? this.addon.name : ""}
@ -177,18 +194,18 @@ class HassioAddonInfo extends LitElement {
? html`
${this._computeIsRunning
? html`
<ha-icon
<ha-svg-icon
title="Add-on is running"
class="running"
icon="hassio:circle"
></ha-icon>
path=${mdiCircle}
></ha-svg-icon>
`
: html`
<ha-icon
<ha-svg-icon
title="Add-on is stopped"
class="stopped"
icon="hassio:circle"
></ha-icon>
path=${mdiCircle}
></ha-svg-icon>
`}
`
: html` ${this.addon.version_latest} `}
@ -232,10 +249,11 @@ class HassioAddonInfo extends LitElement {
})}
@click=${this._showMoreInfo}
id="stage"
.icon=${STAGE_ICON[this.addon.stage]}
label="stage"
description=""
></ha-label-badge>
>
<ha-svg-icon .path=${STAGE_ICON[this.addon.stage]}></ha-svg-icon>
</ha-label-badge>
<ha-label-badge
class=${classMap({
green: [5, 6].includes(Number(this.addon.rating)),
@ -253,10 +271,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="host_network"
icon="hassio:network"
label="host"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiNetwork}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.full_access
@ -264,10 +283,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="full_access"
icon="hassio:chip"
label="hardware"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiChip}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.homeassistant_api
@ -275,10 +295,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="homeassistant_api"
icon="hassio:home-assistant"
label="hass"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this._computeHassioApi
@ -286,10 +307,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="hassio_api"
icon="hassio:home-assistant"
label="hassio"
.description=${this.addon.hassio_role}
></ha-label-badge>
>
<ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.docker_api
@ -297,10 +319,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="docker_api"
icon="hassio:docker"
label="docker"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiDocker}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.host_pid
@ -308,10 +331,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="host_pid"
icon="hassio:pound"
label="host pid"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiPound}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.apparmor
@ -320,10 +344,11 @@ class HassioAddonInfo extends LitElement {
@click=${this._showMoreInfo}
class=${this._computeApparmorClassName}
id="apparmor"
icon="hassio:shield"
label="apparmor"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiShield}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.auth_api
@ -331,10 +356,11 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="auth_api"
icon="hassio:key"
label="auth"
description=""
></ha-label-badge>
>
<ha-svg-icon path=${mdiKey}></ha-svg-icon>
</ha-label-badge>
`
: ""}
${this.addon.ingress
@ -342,10 +368,13 @@ class HassioAddonInfo extends LitElement {
<ha-label-badge
@click=${this._showMoreInfo}
id="ingress"
icon="hassio:cursor-default-click-outline"
label="ingress"
description=""
></ha-label-badge>
>
<ha-svg-icon
path=${mdiCursorDefaultClickOutline}
></ha-svg-icon>
</ha-label-badge>
`
: ""}
</div>
@ -399,7 +428,7 @@ class HassioAddonInfo extends LitElement {
<div>
Protection mode
<span>
<ha-icon icon="hassio:information"></ha-icon>
<ha-svg-icon path=${mdiInformation}></ha-svg-icon>
<paper-tooltip>
Grant the add-on elevated system access.
</paper-tooltip>
@ -502,17 +531,17 @@ class HassioAddonInfo extends LitElement {
</ha-progress-button>
`}
</div>
</paper-card>
</ha-card>
${this.addon.long_description
? html`
<paper-card>
<ha-card>
<div class="card-content">
<ha-markdown
.content=${this.addon.long_description}
></ha-markdown>
</div>
</paper-card>
</ha-card>
`
: ""}
`;
@ -526,16 +555,21 @@ class HassioAddonInfo extends LitElement {
:host {
display: block;
}
paper-card {
ha-card {
display: block;
margin-bottom: 16px;
}
paper-card.warning {
ha-card.warning {
background-color: var(--google-red-500);
color: white;
--paper-card-header-color: white;
}
paper-card.warning mwc-button {
ha-card.warning .card-header {
color: white;
}
ha-card.warning .card-content {
color: white;
}
ha-card.warning mwc-button {
--mdc-theme-primary: white !important;
}
.warning {
@ -548,7 +582,7 @@ class HassioAddonInfo extends LitElement {
.addon-header {
padding-left: 8px;
font-size: 24px;
color: var(--paper-card-header-color, --primary-text-color);
color: var(--ha-card-header-color, --primary-text-color);
}
.addon-version {
float: right;
@ -575,7 +609,7 @@ class HassioAddonInfo extends LitElement {
width: 180px;
display: inline-block;
}
.state ha-icon {
.state ha-svg-icon {
width: 16px;
height: 16px;
color: var(--secondary-text-color);
@ -583,10 +617,10 @@ class HassioAddonInfo extends LitElement {
ha-switch {
display: flex;
}
ha-icon.running {
ha-svg-icon.running {
color: var(--paper-green-400);
}
ha-icon.stopped {
ha-svg-icon.stopped {
color: var(--google-red-300);
}
ha-call-api-button {
@ -664,7 +698,7 @@ class HassioAddonInfo extends LitElement {
}
private _showMoreInfo(ev): void {
const id = ev.target.getAttribute("id");
const id = ev.currentTarget.id;
showHassioMarkdownDialog(this, {
title: PERMIS_DESC[id].title,
content: PERMIS_DESC[id].description,

View File

@ -1,5 +1,4 @@
import "@polymer/paper-spinner/paper-spinner-lite";
import {
css,
CSSResult,
@ -9,12 +8,10 @@ import {
property,
TemplateResult,
} from "lit-element";
import { HomeAssistant } from "../../../../src/types";
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
import { hassioStyle } from "../../resources/hassio-style";
import { haStyle } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { hassioStyle } from "../../resources/hassio-style";
import "./hassio-addon-logs";
@customElement("hassio-addon-log-tab")

View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import {
css,
CSSResult,
@ -9,6 +8,7 @@ import {
property,
TemplateResult,
} from "lit-element";
import "../../../../src/components/ha-card";
import {
fetchHassioAddonLogs,
HassioAddonDetails,
@ -36,7 +36,7 @@ class HassioAddonLogs extends LitElement {
protected render(): TemplateResult {
return html`
<h1>${this.addon.name}</h1>
<paper-card>
<ha-card>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
<div class="card-content">
${this._content
@ -48,7 +48,7 @@ class HassioAddonLogs extends LitElement {
<div class="card-actions">
<mwc-button @click=${this._refresh}>Refresh</mwc-button>
</div>
</paper-card>
</ha-card>
`;
}
@ -58,7 +58,7 @@ class HassioAddonLogs extends LitElement {
hassioStyle,
css`
:host,
paper-card {
ha-card {
display: block;
}
.errors {

View File

@ -1,3 +1,4 @@
import { mdiHelpCircle } from "@mdi/js";
import {
css,
CSSResult,
@ -8,7 +9,7 @@ import {
TemplateResult,
} from "lit-element";
import "../../../src/components/ha-relative-time";
import "../../../src/components/ha-icon";
import "../../../src/components/ha-svg-icon";
import { HomeAssistant } from "../../../src/types";
@customElement("hassio-card-content")
@ -31,7 +32,7 @@ class HassioCardContent extends LitElement {
@property() public iconClass?: string;
@property() public icon = "hass:help-circle";
@property() public icon = mdiHelpCircle;
@property() public iconImage?: string;
@ -48,11 +49,11 @@ class HassioCardContent extends LitElement {
</div>
`
: html`
<ha-icon
<ha-svg-icon
class=${this.iconClass}
.icon=${this.icon}
.path=${this.icon}
.title=${this.iconTitle}
></ha-icon>
></ha-svg-icon>
`}
<div>
<div class="title">
@ -78,25 +79,25 @@ class HassioCardContent extends LitElement {
static get styles(): CSSResult {
return css`
ha-icon {
ha-svg-icon {
margin-right: 24px;
margin-left: 8px;
margin-top: 12px;
float: left;
color: var(--secondary-text-color);
}
ha-icon.update {
ha-svg-icon.update {
color: var(--paper-orange-400);
}
ha-icon.running,
ha-icon.installed {
ha-svg-icon.running,
ha-svg-icon.installed {
color: var(--paper-green-400);
}
ha-icon.hassupdate,
ha-icon.snapshot {
ha-svg-icon.hassupdate,
ha-svg-icon.snapshot {
color: var(--paper-item-icon-color);
}
ha-icon.not_available {
ha-svg-icon.not_available {
color: var(--google-red-500);
}
.title {

View File

@ -1,4 +1,4 @@
import "@polymer/paper-card/paper-card";
import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
import {
css,
CSSResult,
@ -10,6 +10,7 @@ import {
} from "lit-element";
import { atLeastVersion } from "../../../src/common/config/version";
import { navigate } from "../../../src/common/navigate";
import "../../../src/components/ha-card";
import { HassioAddonInfo } from "../../../src/data/hassio/addon";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
@ -29,19 +30,19 @@ class HassioAddons extends LitElement {
<div class="card-group">
${!this.addons
? html`
<paper-card>
<ha-card>
<div class="card-content">
You don't have any add-ons installed yet. Head over to
<a href="#" @click=${this._openStore}>the add-on store</a>
to get started!
</div>
</paper-card>
</ha-card>
`
: this.addons
.sort((a, b) => (a.name > b.name ? 1 : -1))
.map(
(addon) => html`
<paper-card .addon=${addon} @click=${this._addonTapped}>
<ha-card .addon=${addon} @click=${this._addonTapped}>
<div class="card-content">
<hassio-card-content
.hass=${this.hass}
@ -51,8 +52,8 @@ class HassioAddons extends LitElement {
.showTopbar=${addon.installed !== addon.version}
topbarClass="update"
.icon=${addon.installed !== addon.version
? "hassio:arrow-up-bold-circle"
: "hassio:puzzle"}
? mdiArrowUpBoldCircle
: mdiPuzzle}
.iconTitle=${addon.state !== "started"
? "Add-on is stopped"
: addon.installed !== addon.version
@ -75,7 +76,7 @@ class HassioAddons extends LitElement {
: undefined}
></hassio-card-content>
</div>
</paper-card>
</ha-card>
`
)}
</div>
@ -88,7 +89,7 @@ class HassioAddons extends LitElement {
haStyle,
hassioStyle,
css`
paper-card {
ha-card {
cursor: pointer;
}
`,

View File

@ -12,14 +12,13 @@ import {
HassioHomeAssistantInfo,
HassioSupervisorInfo,
} from "../../../src/data/hassio/supervisor";
import "../../../src/layouts/hass-tabs-subpage";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant, Route } from "../../../src/types";
import "../../../src/layouts/hass-tabs-subpage";
import { supervisorTabs } from "../hassio-panel";
import "./hassio-addons";
import "./hassio-update";
import { supervisorTabs } from "../hassio-panel";
@customElement("hassio-dashboard")
class HassioDashboard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;

View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { mdiHomeAssistant } from "@mdi/js";
import {
css,
CSSResult,
@ -10,15 +10,15 @@ import {
TemplateResult,
} from "lit-element";
import "../../../src/components/buttons/ha-call-api-button";
import "../../../src/components/ha-card";
import "../../../src/components/ha-svg-icon";
import { HassioHassOSInfo } from "../../../src/data/hassio/host";
import {
HassioHomeAssistantInfo,
HassioSupervisorInfo,
} from "../../../src/data/hassio/supervisor";
import { haStyle } from "../../../src/resources/styles";
import "../../../src/components/ha-icon";
import { HomeAssistant } from "../../../src/types";
import "../components/hassio-card-content";
import { hassioStyle } from "../resources/hassio-style";
@customElement("hassio-update")
@ -72,7 +72,7 @@ export class HassioUpdate extends LitElement {
`https://${
this.hassInfo.version_latest.includes("b") ? "rc" : "www"
}.home-assistant.io/latest-release-notes/`,
"hassio:home-assistant"
mdiHomeAssistant
)}
${this._renderUpdateCard(
"Supervisor",
@ -107,12 +107,12 @@ export class HassioUpdate extends LitElement {
return html``;
}
return html`
<paper-card>
<ha-card>
<div class="card-content">
${icon
? html`
<div class="icon">
<ha-icon .icon=${icon}></ha-icon>
<ha-svg-icon .path=${icon}></ha-svg-icon>
</div>
`
: ""}
@ -133,7 +133,7 @@ export class HassioUpdate extends LitElement {
Update
</ha-call-api-button>
</div>
</paper-card>
</ha-card>
`;
}

View File

@ -1,7 +1,3 @@
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { PaperDialogElement } from "@polymer/paper-dialog";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "../../../../src/components/ha-icon-button";
import {
css,
CSSResult,
@ -9,46 +5,50 @@ import {
html,
LitElement,
property,
query,
TemplateResult,
} from "lit-element";
import "../../../../src/components/dialog/ha-paper-dialog";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-markdown";
import { haStyleDialog } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { hassioStyle } from "../../resources/hassio-style";
import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
@customElement("dialog-hassio-markdown")
class HassioMarkdownDialog extends LitElement {
@property() public hass!: HomeAssistant;
@property() public title!: string;
@property() public content!: string;
@query("#dialog") private _dialog!: PaperDialogElement;
@property() private _opened = false;
public showDialog(params: HassioMarkdownDialogParams) {
this.title = params.title;
this.content = params.content;
this._dialog.open();
this._opened = true;
}
protected render(): TemplateResult {
if (!this._opened) {
return html``;
}
return html`
<ha-paper-dialog id="dialog" with-backdrop="">
<app-toolbar>
<ha-icon-button
icon="hassio:close"
dialog-dismiss=""
></ha-icon-button>
<div main-title="">${this.title}</div>
</app-toolbar>
<paper-dialog-scrollable>
<ha-markdown .content=${this.content || ""}></ha-markdown>
</paper-dialog-scrollable>
</ha-paper-dialog>
<ha-dialog
open
@closing=${this._closeDialog}
.heading=${createCloseHeading(this.hass, this.title)}
>
<ha-markdown .content=${this.content || ""}></ha-markdown>
</ha-dialog>
`;
}
private _closeDialog(): void {
this._opened = false;
}
static get styles(): CSSResult[] {
return [
haStyleDialog,

View File

@ -1,9 +1,11 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-icon-button/mwc-icon-button";
import { mdiDelete } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-spinner/paper-spinner";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-spinner/paper-spinner";
import {
css,
CSSResult,
@ -16,16 +18,14 @@ import {
} from "lit-element";
import memoizeOne from "memoize-one";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-icon-button";
import "../../../../src/components/ha-svg-icon";
import {
fetchHassioAddonsInfo,
HassioAddonRepository,
} from "../../../../src/data/hassio/addon";
import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types";
import {
HassioAddonRepository,
fetchHassioAddonsInfo,
} from "../../../../src/data/hassio/addon";
import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
@customElement("dialog-hassio-repositories")
@ -84,12 +84,13 @@ class HassioRepositoriesDialog extends LitElement {
<div secondary>${repo.maintainer}</div>
<div secondary>${repo.url}</div>
</paper-item-body>
<ha-icon-button
<mwc-icon-button
.slug=${repo.slug}
title="Remove"
@click=${this._removeRepository}
icon="hassio:delete"
></ha-icon-button>
>
<ha-svg-icon path=${mdiDelete}></ha-svg-icon>
</mwc-icon-button>
</paper-item>
`;
})

View File

@ -1,6 +1,6 @@
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "./dialog-hassio-repositories";
import { HassioAddonRepository } from "../../../../src/data/hassio/addon";
import "./dialog-hassio-repositories";
export interface HassioRepositoryDialogParams {
repos: HassioAddonRepository[];

View File

@ -1,10 +1,6 @@
import "@material/mwc-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import { PaperDialogElement } from "@polymer/paper-dialog";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "../../../../src/components/ha-icon-button";
import "../../../../src/components/ha-icon";
import "@polymer/paper-input/paper-input";
import {
css,
@ -13,10 +9,10 @@ import {
html,
LitElement,
property,
query,
TemplateResult,
} from "lit-element";
import "../../../../src/components/dialog/ha-paper-dialog";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-svg-icon";
import { getSignedPath } from "../../../../src/data/auth";
import {
fetchHassioSnapshotInfo,
@ -76,7 +72,7 @@ class HassioSnapshotDialog extends LitElement {
@property() private _error?: string;
@property() private snapshot?: HassioSnapshotDetail;
@property() private _snapshot?: HassioSnapshotDetail;
@property() private _folders!: FolderItem[];
@ -88,49 +84,35 @@ class HassioSnapshotDialog extends LitElement {
@property() private _restoreHass: boolean | null | undefined = true;
@query("#dialog") private _dialog!: PaperDialogElement;
public async showDialog(params: HassioSnapshotDialogParams) {
this.snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
this._folders = _computeFolders(
this.snapshot.folders
this._snapshot.folders
).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
this._addons = _computeAddons(
this.snapshot.addons
this._snapshot.addons
).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
this._dialogParams = params;
try {
this._dialog.open();
} catch {
await this.showDialog(params);
}
}
protected render(): TemplateResult {
if (!this.snapshot) {
if (!this._dialogParams || !this._snapshot) {
return html``;
}
return html`
<ha-paper-dialog
id="dialog"
with-backdrop=""
.on-iron-overlay-closed=${this._dialogClosed}
<ha-dialog
open
stacked
@closing=${this._closeDialog}
.heading=${createCloseHeading(this.hass, this._computeName)}
>
<app-toolbar>
<ha-icon-button
icon="hassio:close"
dialog-dismiss=""
></ha-icon-button>
<div main-title="">${this._computeName}</div>
</app-toolbar>
<div class="details">
${this.snapshot.type === "full"
${this._snapshot.type === "full"
? "Full snapshot"
: "Partial snapshot"}
(${this._computeSize})<br />
${this._formatDatetime(this.snapshot.date)}
${this._formatDatetime(this._snapshot.date)}
</div>
<div>Home Assistant:</div>
<paper-checkbox
@ -139,7 +121,7 @@ class HassioSnapshotDialog extends LitElement {
this._restoreHass = (ev.target as PaperCheckboxElement).checked;
}}"
>
Home Assistant ${this.snapshot.homeassistant}
Home Assistant ${this._snapshot.homeassistant}
</paper-checkbox>
${this._folders.length
? html`
@ -183,7 +165,7 @@ class HassioSnapshotDialog extends LitElement {
</paper-dialog-scrollable>
`
: ""}
${this.snapshot.protected
${this._snapshot.protected
? html`
<paper-input
autofocus=""
@ -197,37 +179,35 @@ class HassioSnapshotDialog extends LitElement {
${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
<div>Actions:</div>
<ul class="buttons">
<li>
<mwc-button @click=${this._downloadClicked}>
<ha-icon icon="hassio:download" class="icon"></ha-icon>
Download Snapshot
</mwc-button>
</li>
<li>
<mwc-button @click=${this._partialRestoreClicked}>
<ha-icon icon="hassio:history" class="icon"> </ha-icon>
Restore Selected
</mwc-button>
</li>
${this.snapshot.type === "full"
? html`
<li>
<mwc-button @click=${this._fullRestoreClicked}>
<ha-icon icon="hassio:history" class="icon"> </ha-icon>
Wipe &amp; restore
</mwc-button>
</li>
`
: ""}
<li>
<mwc-button @click=${this._deleteClicked}>
<ha-icon icon="hassio:delete" class="icon warning"> </ha-icon>
<span class="warning">Delete Snapshot</span>
</mwc-button>
</li>
</ul>
</ha-paper-dialog>
<mwc-button @click=${this._downloadClicked} slot="primaryAction">
<ha-svg-icon path=${mdiDownload} class="icon"></ha-svg-icon>
Download Snapshot
</mwc-button>
<mwc-button
@click=${this._partialRestoreClicked}
slot="secondaryAction"
>
<ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
Restore Selected
</mwc-button>
${this._snapshot.type === "full"
? html`
<mwc-button
@click=${this._fullRestoreClicked}
slot="secondaryAction"
>
<ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
Wipe &amp; restore
</mwc-button>
`
: ""}
<mwc-button @click=${this._deleteClicked} slot="secondaryAction">
<ha-svg-icon path=${mdiDelete} class="icon warning"></ha-svg-icon>
<span class="warning">Delete Snapshot</span>
</mwc-button>
</ha-dialog>
`;
}
@ -235,37 +215,10 @@ class HassioSnapshotDialog extends LitElement {
return [
haStyleDialog,
css`
ha-paper-dialog {
min-width: 350px;
font-size: 14px;
border-radius: 2px;
}
app-toolbar {
margin: 0;
padding: 0 16px;
color: var(--primary-text-color);
background-color: var(--secondary-background-color);
}
app-toolbar [main-title] {
margin-left: 16px;
}
ha-paper-dialog-scrollable {
margin: 0;
}
paper-checkbox {
display: block;
margin: 4px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-paper-dialog {
max-height: 100%;
height: 100%;
}
app-toolbar {
color: var(--text-primary-color);
background-color: var(--primary-color);
}
}
.details {
color: var(--secondary-text-color);
}
@ -336,7 +289,7 @@ class HassioSnapshotDialog extends LitElement {
folders,
};
if (this.snapshot!.protected) {
if (this._snapshot!.protected) {
data.password = this._snapshotPassword;
}
@ -344,13 +297,13 @@ class HassioSnapshotDialog extends LitElement {
.callApi(
"POST",
`hassio/snapshots/${this.snapshot!.slug}/restore/partial`,
`hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
data
)
.then(
() => {
alert("Snapshot restored!");
this._dialog.close();
this._closeDialog();
},
(error) => {
this._error = error.body.message;
@ -363,20 +316,20 @@ class HassioSnapshotDialog extends LitElement {
return;
}
const data = this.snapshot!.protected
const data = this._snapshot!.protected
? { password: this._snapshotPassword }
: undefined;
this.hass
.callApi(
"POST",
`hassio/snapshots/${this.snapshot!.slug}/restore/full`,
`hassio/snapshots/${this._snapshot!.slug}/restore/full`,
data
)
.then(
() => {
alert("Snapshot restored!");
this._dialog.close();
this._closeDialog();
},
(error) => {
this._error = error.body.message;
@ -391,11 +344,11 @@ class HassioSnapshotDialog extends LitElement {
this.hass
.callApi("POST", `hassio/snapshots/${this.snapshot!.slug}/remove`)
.callApi("POST", `hassio/snapshots/${this._snapshot!.slug}/remove`)
.then(
() => {
this._dialog.close();
this._dialogParams!.onDelete();
this._closeDialog();
},
(error) => {
this._error = error.body.message;
@ -408,7 +361,7 @@ class HassioSnapshotDialog extends LitElement {
try {
signedPath = await getSignedPath(
this.hass,
`/api/hassio/snapshots/${this.snapshot!.slug}/download`
`/api/hassio/snapshots/${this._snapshot!.slug}/download`
);
} catch (err) {
alert(`Error: ${err.message}`);
@ -419,19 +372,19 @@ class HassioSnapshotDialog extends LitElement {
const a = document.createElement("a");
a.href = signedPath.path;
a.download = `Hass_io_${name}.tar`;
this._dialog.appendChild(a);
this.shadowRoot!.appendChild(a);
a.click();
this._dialog.removeChild(a);
this.shadowRoot!.removeChild(a);
}
private get _computeName() {
return this.snapshot
? this.snapshot.name || this.snapshot.slug
return this._snapshot
? this._snapshot.name || this._snapshot.slug
: "Unnamed snapshot";
}
private get _computeSize() {
return Math.ceil(this.snapshot!.size * 10) / 10 + " MB";
return Math.ceil(this._snapshot!.size * 10) / 10 + " MB";
}
private _formatDatetime(datetime) {
@ -445,9 +398,9 @@ class HassioSnapshotDialog extends LitElement {
});
}
private _dialogClosed() {
private _closeDialog() {
this._dialogParams = undefined;
this.snapshot = undefined;
this._snapshot = undefined;
this._snapshotPassword = "";
this._folders = [];
this._addons = [];

View File

@ -3,11 +3,11 @@ import {
HassioAddonDetails,
restartHassioAddon,
} from "../../../src/data/hassio/addon";
import { HomeAssistant } from "../../../src/types";
import {
showConfirmationDialog,
showAlertDialog,
showConfirmationDialog,
} from "../../../src/dialogs/generic/show-dialog-box";
import { HomeAssistant } from "../../../src/types";
export const suggestAddonRestart = async (
element: LitElement,

View File

@ -1,4 +1,3 @@
import "../../src/components/ha-icon-button";
import { PolymerElement } from "@polymer/polymer";
import { customElement, property, PropertyValues } from "lit-element";
import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
@ -34,12 +33,6 @@ import { HomeAssistant } from "../../src/types";
// Don't codesplit it, that way the dashboard always loads fast.
import "./hassio-panel";
// The register callback of the IronA11yKeysBehavior inside ha-icon-button
// is not called, causing _keyBindings to be uninitiliazed for ha-icon-button,
// causing an exception when added to DOM. When transpiled to ES5, this will
// break the build.
customElements.get("ha-icon-button").prototype._keyBindings = {};
@customElement("hassio-main")
class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
@property() public hass!: HomeAssistant;

View File

@ -1,3 +1,4 @@
import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
import {
customElement,
html,
@ -5,37 +6,36 @@ import {
property,
TemplateResult,
} from "lit-element";
import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
import {
HassioHomeAssistantInfo,
HassioSupervisorInfo,
} from "../../src/data/hassio/supervisor";
import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
import "../../src/resources/ha-style";
import { HomeAssistant, Route } from "../../src/types";
import "./hassio-panel-router";
import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
export const supervisorTabs: PageNavigation[] = [
{
name: "Dashboard",
path: `/hassio/dashboard`,
icon: "hassio:view-dashboard",
iconPath: mdiViewDashboard,
},
{
name: "Add-on store",
path: `/hassio/store`,
icon: "hassio:store",
iconPath: mdiStore,
},
{
name: "Snapshots",
path: `/hassio/snapshots`,
icon: "hassio:backup-restore",
iconPath: mdiBackupRestore,
},
{
name: "System",
path: `/hassio/system`,
icon: "hassio:cogs",
iconPath: mdiCogs,
},
];

View File

@ -86,9 +86,6 @@ class HassioIngressView extends LitElement {
height: 100%;
border: 0;
}
ha-icon-button {
color: var(--text-primary-color);
}
`;
}
}

View File

@ -1,5 +1,6 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@material/mwc-icon-button";
import { mdiPackageVariant, mdiPackageVariantClosed, mdiReload } from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
@ -18,6 +19,8 @@ import {
TemplateResult,
} from "lit-element";
import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/ha-card";
import "../../../src/components/ha-svg-icon";
import {
createHassioFullSnapshot,
createHassioPartialSnapshot,
@ -28,15 +31,14 @@ import {
reloadHassioSnapshots,
} from "../../../src/data/hassio/snapshot";
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
import "../../../src/layouts/hass-tabs-subpage";
import { PolymerChangedEvent } from "../../../src/polymer-types";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant, Route } from "../../../src/types";
import "../../../src/layouts/hass-tabs-subpage";
import "../components/hassio-card-content";
import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
import { hassioStyle } from "../resources/hassio-style";
import { supervisorTabs } from "../hassio-panel";
import { hassioStyle } from "../resources/hassio-style";
interface CheckboxItem {
slug: string;
@ -98,12 +100,13 @@ class HassioSnapshots extends LitElement {
>
<span slot="header">Snapshots</span>
<ha-icon-button
icon="hassio:reload"
<mwc-icon-button
slot="toolbar-icon"
aria-label="Reload snapshots"
@click=${this.refreshData}
></ha-icon-button>
>
<ha-svg-icon path=${mdiReload}></ha-svg-icon>
</mwc-icon-button>
<div class="content">
<h1>
@ -114,7 +117,7 @@ class HassioSnapshots extends LitElement {
Home Assistant instance.
</p>
<div class="card-group">
<paper-card>
<ha-card>
<div class="card-content">
<paper-input
autofocus
@ -195,7 +198,7 @@ class HassioSnapshots extends LitElement {
Create
</mwc-button>
</div>
</paper-card>
</ha-card>
</div>
<h1>Available snapshots</h1>
@ -204,15 +207,15 @@ class HassioSnapshots extends LitElement {
? undefined
: this._snapshots.length === 0
? html`
<paper-card>
<ha-card>
<div class="card-content">
You don't have any snapshots yet.
</div>
</paper-card>
</ha-card>
`
: this._snapshots.map(
(snapshot) => html`
<paper-card
<ha-card
class="pointer"
.snapshot=${snapshot}
@click=${this._snapshotClicked}
@ -224,12 +227,12 @@ class HassioSnapshots extends LitElement {
.description=${this._computeDetails(snapshot)}
.datetime=${snapshot.date}
.icon=${snapshot.type === "full"
? "hassio:package-variant-closed"
: "hassio:package-variant"}
? mdiPackageVariantClosed
: mdiPackageVariant}
.icon-class="snapshot"
></hassio-card-content>
</div>
</paper-card>
</ha-card>
`
)}
</div>

View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import {
css,
CSSResult,
@ -12,23 +11,23 @@ import {
import "../../../src/components/buttons/ha-call-api-button";
import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
import {
changeHostOptions,
fetchHassioHostInfo,
HassioHassOSInfo,
HassioHostInfo as HassioHostInfoType,
rebootHost,
shutdownHost,
updateOS,
changeHostOptions,
} from "../../../src/data/hassio/host";
import {
showAlertDialog,
showConfirmationDialog,
showPromptDialog,
} from "../../../src/dialogs/generic/show-dialog-box";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
import { hassioStyle } from "../resources/hassio-style";
import {
showConfirmationDialog,
showAlertDialog,
showPromptDialog,
} from "../../../src/dialogs/generic/show-dialog-box";
@customElement("hassio-host-info")
class HassioHostInfo extends LitElement {
@ -42,7 +41,7 @@ class HassioHostInfo extends LitElement {
public render(): TemplateResult | void {
return html`
<paper-card>
<ha-card>
<div class="card-content">
<h2>Host system</h2>
<table class="info">
@ -113,7 +112,7 @@ class HassioHostInfo extends LitElement {
? html` <mwc-button @click=${this._updateOS}>Update</mwc-button> `
: ""}
</div>
</paper-card>
</ha-card>
`;
}
@ -122,7 +121,7 @@ class HassioHostInfo extends LitElement {
haStyle,
hassioStyle,
css`
paper-card {
ha-card {
height: 100%;
width: 100%;
}

View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import {
css,
CSSResult,
@ -11,15 +10,16 @@ import {
} from "lit-element";
import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/buttons/ha-call-api-button";
import "../../../src/components/ha-card";
import {
HassioSupervisorInfo as HassioSupervisorInfoType,
setSupervisorOption,
SupervisorOptions,
} from "../../../src/data/hassio/supervisor";
import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
import { hassioStyle } from "../resources/hassio-style";
import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
@customElement("hassio-supervisor-info")
class HassioSupervisorInfo extends LitElement {
@ -31,7 +31,7 @@ class HassioSupervisorInfo extends LitElement {
public render(): TemplateResult | void {
return html`
<paper-card>
<ha-card>
<div class="card-content">
<h2>Supervisor</h2>
<table class="info">
@ -92,7 +92,7 @@ class HassioSupervisorInfo extends LitElement {
`
: ""}
</div>
</paper-card>
</ha-card>
`;
}
@ -101,7 +101,7 @@ class HassioSupervisorInfo extends LitElement {
haStyle,
hassioStyle,
css`
paper-card {
ha-card {
height: 100%;
width: 100%;
}

View File

@ -2,7 +2,6 @@ import "@material/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-card/paper-card";
import {
css,
CSSResult,
@ -12,14 +11,13 @@ import {
property,
TemplateResult,
} from "lit-element";
import "../../../src/components/ha-card";
import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
import "../../../src/layouts/loading-screen";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
import "../components/hassio-ansi-to-html";
import { hassioStyle } from "../resources/hassio-style";
import "../../../src/layouts/loading-screen";
interface LogProvider {
key: string;
@ -70,7 +68,7 @@ class HassioSupervisorLog extends LitElement {
public render(): TemplateResult | void {
return html`
<paper-card>
<ha-card>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
${this.hass.userData?.showAdvanced
? html`
@ -105,7 +103,7 @@ class HassioSupervisorLog extends LitElement {
<div class="card-actions">
<mwc-button @click=${this._refresh}>Refresh</mwc-button>
</div>
</paper-card>
</ha-card>
`;
}
@ -114,7 +112,7 @@ class HassioSupervisorLog extends LitElement {
haStyle,
hassioStyle,
css`
paper-card {
ha-card {
width: 100%;
}
pre {

View File

@ -13,16 +13,15 @@ import {
HassioHostInfo,
} from "../../../src/data/hassio/host";
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
import { haStyle } from "../../../src/resources/styles";
import "../../../src/layouts/hass-tabs-subpage";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant, Route } from "../../../src/types";
import { supervisorTabs } from "../hassio-panel";
import { hassioStyle } from "../resources/hassio-style";
import "./hassio-host-info";
import "./hassio-supervisor-info";
import "./hassio-supervisor-log";
import { supervisorTabs } from "../hassio-panel";
@customElement("hassio-system")
class HassioSystem extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;

View File

@ -1,4 +1,3 @@
import "../../components/ha-icon-button";
import "@polymer/paper-input/paper-input";
import {
css,
@ -9,8 +8,10 @@ import {
} from "lit-element";
import { html, TemplateResult } from "lit-html";
import { classMap } from "lit-html/directives/class-map";
import "../../components/ha-icon";
import "../../components/ha-svg-icon";
import { fireEvent } from "../dom/fire_event";
import { mdiMagnify, mdiClose } from "@mdi/js";
import "@material/mwc-icon-button/mwc-icon-button";
@customElement("search-input")
class SearchInput extends LitElement {
@ -47,17 +48,22 @@ class SearchInput extends LitElement {
@value-changed=${this._filterInputChanged}
.noLabelFloat=${this.noLabelFloat}
>
<ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
<ha-svg-icon
path=${mdiMagnify}
slot="prefix"
class="prefix"
></ha-svg-icon>
${this.filter &&
html`
<ha-icon-button
<mwc-icon-button
slot="suffix"
class="suffix"
@click=${this._clearSearch}
icon="hass:close"
alt="Clear"
title="Clear"
></ha-icon-button>
>
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
`}
</paper-input>
`;
@ -77,11 +83,14 @@ class SearchInput extends LitElement {
static get styles(): CSSResult {
return css`
ha-icon,
ha-icon-button {
ha-svg-icon,
mwc-icon-button {
color: var(--primary-text-color);
}
ha-icon {
mwc-icon-button {
--mdc-icon-button-size: 24px;
}
ha-svg-icon.prefix {
margin: 8px;
}
`;

View File

@ -6,18 +6,19 @@ import {
CSSResult,
css,
query,
property,
} from "lit-element";
import "@material/mwc-button";
import "@material/mwc-menu";
import "@material/mwc-list/mwc-list-item";
import type { Menu } from "@material/mwc-menu";
import { haStyle } from "../resources/styles";
import type { Menu, Corner } from "@material/mwc-menu";
import "./ha-icon-button";
@customElement("ha-button-menu")
export class HaButtonMenu extends LitElement {
@property() public corner: Corner = "TOP_START";
@query("mwc-menu") private _menu?: Menu;
protected render(): TemplateResult {
@ -25,7 +26,7 @@ export class HaButtonMenu extends LitElement {
<div @click=${this._handleClick}>
<slot name="trigger"></slot>
</div>
<mwc-menu>
<mwc-menu .corner=${this.corner}>
<slot></slot>
</mwc-menu>
`;
@ -36,15 +37,13 @@ export class HaButtonMenu extends LitElement {
this._menu!.show();
}
static get styles(): CSSResult[] {
return [
haStyle,
css`
:host {
position: relative;
}
`,
];
static get styles(): CSSResult {
return css`
:host {
display: block;
position: relative;
}
`;
}
}

View File

@ -4,17 +4,19 @@ import { style } from "@material/mwc-dialog/mwc-dialog-css";
import "./ha-icon-button";
import { css, CSSResult, customElement, html } from "lit-element";
import type { Constructor, HomeAssistant } from "../types";
import { mdiClose } from "@mdi/js";
const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
${title}
<ha-icon-button
<mwc-icon-button
aria-label=${hass.localize("ui.dialogs.generic.close")}
icon="hass:close"
dialogAction="close"
class="close_button"
></ha-icon-button>
>
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
`;
@customElement("ha-dialog")

View File

@ -1,17 +1,28 @@
import { HaIconButton } from "./ha-icon-button";
import { LitElement, property, TemplateResult, html } from "lit-element";
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
import "@material/mwc-icon-button/mwc-icon-button";
import "./ha-svg-icon";
export class HaIconButtonArrowPrev extends LitElement {
@property() private _icon = mdiArrowLeft;
export class HaIconButtonArrowPrev extends HaIconButton {
public connectedCallback() {
super.connectedCallback();
// wait to check for direction since otherwise direction is wrong even though top level is RTL
setTimeout(() => {
this.icon =
this._icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:arrow-left"
: "hass:arrow-right";
? mdiArrowLeft
: mdiArrowRight;
}, 100);
}
protected render(): TemplateResult {
return html`<mwc-icon-button>
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
</mwc-icon-button> `;
}
}
declare global {

View File

@ -31,12 +31,14 @@ class HaLabelBadge extends LitElement {
big: Boolean(this.value && this.value.length > 4),
})}"
>
${this.icon && !this.value && !this.image
? html` <ha-icon .icon="${this.icon}"></ha-icon> `
: ""}
${this.value && !this.image
? html` <span>${this.value}</span> `
: ""}
<slot>
${this.icon && !this.value && !this.image
? html` <ha-icon .icon=${this.icon}></ha-icon> `
: ""}
${this.value && !this.image
? html` <span>${this.value}</span> `
: ""}
</slot>
</div>
${this.label
? html`

View File

@ -13,6 +13,7 @@ import { computeDomain } from "../common/entity/compute_domain";
import { subscribeNotifications } from "../data/persistent_notification";
import { HomeAssistant } from "../types";
import "./ha-icon-button";
import { mdiMenu } from "@mdi/js";
@customElement("ha-menu-button")
class HaMenuButton extends LitElement {
@ -55,11 +56,12 @@ class HaMenuButton extends LitElement {
(entityId) => computeDomain(entityId) === "configurator"
));
return html`
<ha-icon-button
<mwc-icon-button
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
icon="hass:menu"
@click=${this._toggleMenu}
></ha-icon-button>
>
<ha-svg-icon path=${mdiMenu}></ha-svg-icon>
</mwc-icon-button>
${hasNotifications ? html` <div class="dot"></div> ` : ""}
`;
}
@ -133,8 +135,8 @@ class HaMenuButton extends LitElement {
background-color: var(--accent-color);
width: 12px;
height: 12px;
top: 5px;
right: 2px;
top: 9px;
right: 7px;
border-radius: 50%;
border: 2px solid var(--app-header-background-color);
}

View File

@ -16,6 +16,7 @@ import { navigate } from "../common/navigate";
import "../components/ha-menu-button";
import "../components/ha-icon-button-arrow-prev";
import { HomeAssistant, Route } from "../types";
import "../components/ha-svg-icon";
import "../components/ha-icon";
export interface PageNavigation {
@ -26,6 +27,7 @@ export interface PageNavigation {
core?: boolean;
advancedOnly?: boolean;
icon?: string;
iconPath?: string;
info?: any;
}
@ -33,12 +35,12 @@ export interface PageNavigation {
class HassTabsSubpage extends LitElement {
@property() public hass!: HomeAssistant;
@property({ type: Boolean }) public hassio = false;
@property({ type: String, attribute: "back-path" }) public backPath?: string;
@property() public backCallback?: () => void;
@property({ type: Boolean }) public hassio = false;
@property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
@property() public route!: Route;
@ -77,7 +79,9 @@ class HassTabsSubpage extends LitElement {
.path=${page.path}
>
${this.narrow
? html` <ha-icon .icon=${page.icon}></ha-icon> `
? page.iconPath
? html`<ha-svg-icon .path=${page.iconPath}></ha-svg-icon>`
: html`<ha-icon .icon=${page.icon}></ha-icon>`
: ""}
${!this.narrow || page === activeTab
? html`
@ -119,8 +123,8 @@ class HassTabsSubpage extends LitElement {
${this.mainPage
? html`
<ha-menu-button
.hass=${this.hass}
.hassio=${this.hassio}
.hass=${this.hass}
.narrow=${this.narrow}
></ha-menu-button>
`
@ -174,6 +178,10 @@ class HassTabsSubpage extends LitElement {
background-color: var(--primary-background-color);
}
ha-menu-button {
margin-right: 24px;
}
.toolbar {
display: flex;
align-items: center;

View File

@ -21,6 +21,7 @@ export const renderMarkdown = (
whiteListNormal = {
...filterXSS.whiteList,
"ha-icon": ["icon"],
"ha-svg-icon": ["path"],
};
}