mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
Changes to add-on options (#6706)
This commit is contained in:
Joakim Sørensen
GitHub
parent
35a430e9f4
commit
3e6a759309
@ -9,7 +9,6 @@ import {
|
|||||||
mdiExclamationThick,
|
mdiExclamationThick,
|
||||||
mdiFlask,
|
mdiFlask,
|
||||||
mdiHomeAssistant,
|
mdiHomeAssistant,
|
||||||
mdiInformation,
|
|
||||||
mdiKey,
|
mdiKey,
|
||||||
mdiNetwork,
|
mdiNetwork,
|
||||||
mdiPound,
|
mdiPound,
|
||||||
@ -53,6 +52,7 @@ import { HomeAssistant } from "../../../../src/types";
|
|||||||
import "../../components/hassio-card-content";
|
import "../../components/hassio-card-content";
|
||||||
import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
|
import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
|
import "../../../../src/components/ha-settings-row";
|
||||||
|
|
||||||
const STAGE_ICON = {
|
const STAGE_ICON = {
|
||||||
stable: mdiCheckCircle,
|
stable: mdiCheckCircle,
|
||||||
@ -386,79 +386,94 @@ class HassioAddonInfo extends LitElement {
|
|||||||
|
|
||||||
${this.addon.version
|
${this.addon.version
|
||||||
? html`
|
? html`
|
||||||
<div class="state">
|
<div class="addon-options">
|
||||||
<div>Start on boot</div>
|
<ha-settings-row ?three-line=${this.narrow}>
|
||||||
<ha-switch
|
<span slot="heading">
|
||||||
@change=${this._startOnBootToggled}
|
Start on boot
|
||||||
.checked=${this.addon.boot === "auto"}
|
</span>
|
||||||
haptic
|
<span slot="description">
|
||||||
></ha-switch>
|
Make the add-on start during a system boot
|
||||||
</div>
|
</span>
|
||||||
${this.hass.userData?.showAdvanced
|
<ha-switch
|
||||||
? html`
|
@change=${this._startOnBootToggled}
|
||||||
<div class="state">
|
.checked=${this.addon.boot === "auto"}
|
||||||
<div>Watchdog</div>
|
haptic
|
||||||
<ha-switch
|
></ha-switch>
|
||||||
@change=${this._watchdogToggled}
|
</ha-settings-row>
|
||||||
.checked=${this.addon.watchdog}
|
|
||||||
haptic
|
${this.hass.userData?.showAdvanced
|
||||||
></ha-switch>
|
? html`
|
||||||
</div>
|
<ha-settings-row ?three-line=${this.narrow}>
|
||||||
`
|
<span slot="heading">
|
||||||
: ""}
|
Watchdog
|
||||||
${this.addon.auto_update || this.hass.userData?.showAdvanced
|
|
||||||
? html`
|
|
||||||
<div class="state">
|
|
||||||
<div>Auto update</div>
|
|
||||||
<ha-switch
|
|
||||||
@change=${this._autoUpdateToggled}
|
|
||||||
.checked=${this.addon.auto_update}
|
|
||||||
haptic
|
|
||||||
></ha-switch>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
${this.addon.ingress
|
|
||||||
? html`
|
|
||||||
<div class="state">
|
|
||||||
<div>Show in sidebar</div>
|
|
||||||
<ha-switch
|
|
||||||
@change=${this._panelToggled}
|
|
||||||
.checked=${this.addon.ingress_panel}
|
|
||||||
.disabled=${this._computeCannotIngressSidebar}
|
|
||||||
haptic
|
|
||||||
></ha-switch>
|
|
||||||
${this._computeCannotIngressSidebar
|
|
||||||
? html`
|
|
||||||
<span>
|
|
||||||
This option requires Home Assistant 0.92 or
|
|
||||||
later.
|
|
||||||
</span>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
${this._computeUsesProtectedOptions
|
|
||||||
? html`
|
|
||||||
<div class="state">
|
|
||||||
<div>
|
|
||||||
Protection mode
|
|
||||||
<span>
|
|
||||||
<ha-svg-icon path=${mdiInformation}></ha-svg-icon>
|
|
||||||
<paper-tooltip>
|
|
||||||
Grant the add-on elevated system access.
|
|
||||||
</paper-tooltip>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span slot="description">
|
||||||
<ha-switch
|
This will start the add-on if it crashes
|
||||||
@change=${this._protectionToggled}
|
</span>
|
||||||
.checked=${this.addon.protected}
|
<ha-switch
|
||||||
haptic
|
@change=${this._watchdogToggled}
|
||||||
></ha-switch>
|
.checked=${this.addon.watchdog}
|
||||||
</div>
|
haptic
|
||||||
`
|
></ha-switch>
|
||||||
: ""}
|
</ha-settings-row>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
${this.addon.auto_update || this.hass.userData?.showAdvanced
|
||||||
|
? html`
|
||||||
|
<ha-settings-row ?three-line=${this.narrow}>
|
||||||
|
<span slot="heading">
|
||||||
|
Auto update
|
||||||
|
</span>
|
||||||
|
<span slot="description">
|
||||||
|
Auto update the add-on when there is a new version
|
||||||
|
available
|
||||||
|
</span>
|
||||||
|
<ha-switch
|
||||||
|
@change=${this._autoUpdateToggled}
|
||||||
|
.checked=${this.addon.auto_update}
|
||||||
|
haptic
|
||||||
|
></ha-switch>
|
||||||
|
</ha-settings-row>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
${this.addon.ingress
|
||||||
|
? html`
|
||||||
|
<ha-settings-row ?three-line=${this.narrow}>
|
||||||
|
<span slot="heading">
|
||||||
|
Show in sidebar
|
||||||
|
</span>
|
||||||
|
<span slot="description">
|
||||||
|
${this._computeCannotIngressSidebar
|
||||||
|
? "This option requires Home Assistant 0.92 or later."
|
||||||
|
: "Add this add-on to your sidebar"}
|
||||||
|
</span>
|
||||||
|
<ha-switch
|
||||||
|
@change=${this._panelToggled}
|
||||||
|
.checked=${this.addon.ingress_panel}
|
||||||
|
.disabled=${this._computeCannotIngressSidebar}
|
||||||
|
haptic
|
||||||
|
></ha-switch>
|
||||||
|
</ha-settings-row>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
${this._computeUsesProtectedOptions
|
||||||
|
? html`
|
||||||
|
<ha-settings-row ?three-line=${this.narrow}>
|
||||||
|
<span slot="heading">
|
||||||
|
Protection mode
|
||||||
|
</span>
|
||||||
|
<span slot="description">
|
||||||
|
Blocks elevated system access from the add-on
|
||||||
|
</span>
|
||||||
|
<ha-switch
|
||||||
|
@change=${this._protectionToggled}
|
||||||
|
.checked=${this.addon.protected}
|
||||||
|
haptic
|
||||||
|
></ha-switch>
|
||||||
|
</ha-settings-row>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
</div>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
||||||
@ -564,137 +579,6 @@ class HassioAddonInfo extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
|
||||||
return [
|
|
||||||
haStyle,
|
|
||||||
hassioStyle,
|
|
||||||
css`
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
ha-card {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
ha-card.warning {
|
|
||||||
background-color: var(--error-color);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
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 {
|
|
||||||
color: var(--error-color);
|
|
||||||
--mdc-theme-primary: var(--error-color);
|
|
||||||
}
|
|
||||||
.light-color {
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
.addon-header {
|
|
||||||
padding-left: 8px;
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--ha-card-header-color, --primary-text-color);
|
|
||||||
}
|
|
||||||
.addon-version {
|
|
||||||
float: right;
|
|
||||||
font-size: 15px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.errors {
|
|
||||||
color: var(--error-color);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.description {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
img.logo {
|
|
||||||
max-height: 60px;
|
|
||||||
margin: 16px 0;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.state {
|
|
||||||
display: flex;
|
|
||||||
margin: 33px 0;
|
|
||||||
}
|
|
||||||
.state div {
|
|
||||||
width: 180px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.state ha-svg-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
ha-switch {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
ha-svg-icon.running {
|
|
||||||
color: var(--paper-green-400);
|
|
||||||
}
|
|
||||||
ha-svg-icon.stopped {
|
|
||||||
color: var(--google-red-300);
|
|
||||||
}
|
|
||||||
ha-call-api-button {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
protection-enable mwc-button {
|
|
||||||
--mdc-theme-primary: white;
|
|
||||||
}
|
|
||||||
.description a {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.red {
|
|
||||||
--ha-label-badge-color: var(--label-badge-red, #df4c1e);
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
--ha-label-badge-color: var(--label-badge-blue, #039be5);
|
|
||||||
}
|
|
||||||
.green {
|
|
||||||
--ha-label-badge-color: var(--label-badge-green, #0da035);
|
|
||||||
}
|
|
||||||
.yellow {
|
|
||||||
--ha-label-badge-color: var(--label-badge-yellow, #f4b400);
|
|
||||||
}
|
|
||||||
.security {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.card-actions {
|
|
||||||
display: flow-root;
|
|
||||||
}
|
|
||||||
.security h3 {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
.security ha-label-badge {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 4px;
|
|
||||||
--ha-label-badge-padding: 8px 0 0 0;
|
|
||||||
}
|
|
||||||
.changelog {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
.changelog-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
ha-markdown {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
private get _computeHassioApi(): boolean {
|
private get _computeHassioApi(): boolean {
|
||||||
return (
|
return (
|
||||||
this.addon.hassio_api &&
|
this.addon.hassio_api &&
|
||||||
@ -917,6 +801,146 @@ class HassioAddonInfo extends LitElement {
|
|||||||
this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
|
this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResult[] {
|
||||||
|
return [
|
||||||
|
haStyle,
|
||||||
|
hassioStyle,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
ha-card {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
ha-card.warning {
|
||||||
|
background-color: var(--error-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
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 {
|
||||||
|
color: var(--error-color);
|
||||||
|
--mdc-theme-primary: var(--error-color);
|
||||||
|
}
|
||||||
|
.light-color {
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
.addon-header {
|
||||||
|
padding-left: 8px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--ha-card-header-color, --primary-text-color);
|
||||||
|
}
|
||||||
|
.addon-version {
|
||||||
|
float: right;
|
||||||
|
font-size: 15px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.errors {
|
||||||
|
color: var(--error-color);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
img.logo {
|
||||||
|
max-height: 60px;
|
||||||
|
margin: 16px 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
ha-switch {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
ha-svg-icon.running {
|
||||||
|
color: var(--paper-green-400);
|
||||||
|
}
|
||||||
|
ha-svg-icon.stopped {
|
||||||
|
color: var(--google-red-300);
|
||||||
|
}
|
||||||
|
ha-call-api-button {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
protection-enable mwc-button {
|
||||||
|
--mdc-theme-primary: white;
|
||||||
|
}
|
||||||
|
.description a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
--ha-label-badge-color: var(--label-badge-red, #df4c1e);
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
--ha-label-badge-color: var(--label-badge-blue, #039be5);
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
--ha-label-badge-color: var(--label-badge-green, #0da035);
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
--ha-label-badge-color: var(--label-badge-yellow, #f4b400);
|
||||||
|
}
|
||||||
|
.security {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.card-actions {
|
||||||
|
display: flow-root;
|
||||||
|
}
|
||||||
|
.security h3 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.security ha-label-badge {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 4px;
|
||||||
|
--ha-label-badge-padding: 8px 0 0 0;
|
||||||
|
}
|
||||||
|
.changelog {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
.changelog-link {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
ha-markdown {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
ha-settings-row {
|
||||||
|
padding: 0;
|
||||||
|
height: 54px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
ha-settings-row > span[slot="description"] {
|
||||||
|
white-space: normal;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
ha-settings-row[three-line] {
|
||||||
|
height: 74px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addon-options {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.addon-options {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
|
|||||||
@ -206,7 +206,7 @@ class HassioHostInfo extends LitElement {
|
|||||||
ha-settings-row[three-line] {
|
ha-settings-row[three-line] {
|
||||||
height: 74px;
|
height: 74px;
|
||||||
}
|
}
|
||||||
ha-settings-row[three-line] > div {
|
ha-settings-row > span[slot="description"] {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -173,7 +173,7 @@ class HassioSupervisorInfo extends LitElement {
|
|||||||
ha-settings-row[three-line] {
|
ha-settings-row[three-line] {
|
||||||
height: 74px;
|
height: 74px;
|
||||||
}
|
}
|
||||||
ha-settings-row[three-line] > div {
|
ha-settings-row > span[slot="description"] {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user