From 11652e8bba0a9aa053c7a54dbfb218e9fd490669 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 13:15:36 +0000 Subject: [PATCH 01/17] it's a start --- hassio/src/addon-store/hassio-addon-store.ts | 2 + .../addon-store/hassio-repository-editor.ts | 232 ++++++++++++++++++ .../addon-store/show-dialog-repositories.ts | 10 + 3 files changed, 244 insertions(+) create mode 100644 hassio/src/addon-store/hassio-repository-editor.ts create mode 100644 hassio/src/addon-store/show-dialog-repositories.ts diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index c46b8bc780d6..52143b758c50 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -19,6 +19,8 @@ import "../components/hassio-search-input"; import "./hassio-addon-repository"; import "./hassio-repositories-editor"; +import { HassioRepositoryEditor } from "./hassio-repositor-editor"; + import { supervisorTabs } from "../hassio-panel"; const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => { diff --git a/hassio/src/addon-store/hassio-repository-editor.ts b/hassio/src/addon-store/hassio-repository-editor.ts new file mode 100644 index 000000000000..def7ec4aa847 --- /dev/null +++ b/hassio/src/addon-store/hassio-repository-editor.ts @@ -0,0 +1,232 @@ +import "@material/mwc-button/mwc-button"; +import "@polymer/paper-icon-button/paper-icon-button"; +import "@polymer/paper-input/paper-input"; +import type { PaperInputElement } from "@polymer/paper-input/paper-input"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-item/paper-item-body"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + query, + TemplateResult, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; +import { fireEvent } from "../../../src/common/dom/fire_event"; +import "../../../src/components/ha-icon-input"; +import "../../../src/components/ha-switch"; +import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box"; +import { haStyleDialog } from "../../../src/resources/styles"; +import type { HomeAssistant } from "../../../src/types"; + +@customElement("hassio-repository-editor") +export class HassioRepositoryEditor extends LitElement { + @property() public hass!: HomeAssistant; + + @property() private _options: string[] = []; + + @query("#option_input") private _optionInput?: PaperInputElement; + + @property() private _opened = false; + + @property() private _platform?: string; + + @property() private _error?: string; + + @property() private _submitting = false; + + @query(".form") private _form?: HTMLDivElement; + + public async showDialog(): Promise { + this._platform = undefined; + this._item = undefined; + this._opened = true; + await this.updateComplete; + } + + public closeDialog(): void { + this._opened = false; + this._error = ""; + } + + protected render(): TemplateResult { + return html` + +
+ Repositories: + ${this._options.length + ? this._options.map((option, index) => { + return html` + + ${option} + + + `; + }) + : html` + + No repositories + + `} +
+ + Add +
+
+ + ${this.hass!.localize("ui.panel.config.helpers.dialog.create")} + + + Back + + + + ${this.hass!.localize("ui.common.cancel")} + + + `; + } + + private _platformPicked(ev: Event): void { + this._platform = (ev.currentTarget! as any).platform; + this._focusForm(); + } + + private async _focusForm(): Promise { + await this.updateComplete; + (this._form?.lastElementChild as HTMLElement).focus(); + } + + private _goBack() { + this._platform = undefined; + this._item = undefined; + this._error = undefined; + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + ha-dialog.button-left { + --justify-action-buttons: flex-start; + } + paper-icon-item { + cursor: pointer; + } + .form { + color: var(--primary-text-color); + } + .option { + border: 1px solid var(--divider-color); + border-radius: 4px; + margin-top: 4px; + } + mwc-button { + margin-left: 8px; + } + ha-paper-dropdown-menu { + display: block; + } + `, + ]; + } + + public focus() { + this.updateComplete.then(() => + (this.shadowRoot?.querySelector( + "[dialogInitialFocus]" + ) as HTMLElement)?.focus() + ); + } + + private _handleKeyAdd(ev: KeyboardEvent) { + ev.stopPropagation(); + if (ev.keyCode !== 13) { + return; + } + this._addOption(); + } + + private _addOption() { + const input = this._optionInput; + if (!input || !input.value) { + return; + } + fireEvent(this, "value-changed", { + value: { ...this._item, options: [...this._options, input.value] }, + }); + input.value = ""; + } + + private async _removeOption(ev: Event) { + if ( + !(await showConfirmationDialog(this, { + title: "Delete this item?", + text: "Are you sure you want to delete this item?", + })) + ) { + return; + } + const index = (ev.target as any).index; + const options = [...this._options]; + options.splice(index, 1); + fireEvent(this, "value-changed", { + value: { ...this._item, options }, + }); + } + + private _valueChanged(ev: CustomEvent) { + if (!this.new && !this._item) { + return; + } + ev.stopPropagation(); + const configValue = (ev.target as any).configValue; + const value = ev.detail.value; + if (this[`_${configValue}`] === value) { + return; + } + const newValue = { ...this._item }; + if (!value) { + delete newValue[configValue]; + } else { + newValue[configValue] = ev.detail.value; + } + fireEvent(this, "value-changed", { + value: newValue, + }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-repository-editor": HassioRepositoryEditor; + } +} diff --git a/hassio/src/addon-store/show-dialog-repositories.ts b/hassio/src/addon-store/show-dialog-repositories.ts new file mode 100644 index 000000000000..f4ef4caa2b73 --- /dev/null +++ b/hassio/src/addon-store/show-dialog-repositories.ts @@ -0,0 +1,10 @@ +import { fireEvent } from "../../../src/common/dom/fire_event"; +import "./hassio-repository-editor"; + +export const showRepositoriesDialog = (element: HTMLElement) => { + fireEvent(element, "show-dialog", { + dialogTag: "hassio-repository-editor", + dialogImport: "", + dialogParams: {}, + }); +}; From 847c4605e97eda98d48e289ccc19aacefab69ca5 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 16:19:31 +0000 Subject: [PATCH 02/17] progress --- .../addon-store/hassio-addon-repository.ts | 113 ++++++----- hassio/src/addon-store/hassio-addon-store.ts | 78 ++++++-- .../addon-store/hassio-repository-editor.ts | 181 +++++++++--------- .../addon-store/show-dialog-repositories.ts | 9 +- hassio/src/components/hassio-search-input.ts | 82 -------- src/common/search/search-input.ts | 11 +- src/data/hassio/supervisor.ts | 3 +- 7 files changed, 216 insertions(+), 261 deletions(-) delete mode 100644 hassio/src/components/hassio-search-input.ts diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 080d4a3d77fd..60a104bd57db 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -41,13 +41,19 @@ class HassioAddonRepositoryEl extends LitElement { protected render(): TemplateResult { const repo = this.repo; - const addons = this._getAddons(this.addons, this.filter); + let _addons = this.addons; + if (!this.hass.userData?.showAdvanced) { + _addons = _addons.filter((addon) => { + return !addon.advanced; + }); + } + const addons = this._getAddons(_addons, this.filter); if (this.filter && addons.length < 1) { return html`

- No results found in "${repo.name}" + No results found in "${repo.name}."

`; @@ -57,66 +63,55 @@ class HassioAddonRepositoryEl extends LitElement {

${repo.name}

-

- Maintained by ${repo.maintainer}
- - ${repo.url} - -

${addons.map( (addon) => html` - ${addon.advanced && !this.hass.userData?.showAdvanced - ? "" - : html` - -
- -
- - `} + +
+ +
+ ` )}
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 52143b758c50..53fc1a531d09 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -15,14 +15,14 @@ import { import "../../../src/layouts/loading-screen"; import "../../../src/layouts/hass-tabs-subpage"; import { HomeAssistant, Route } from "../../../src/types"; -import "../components/hassio-search-input"; +import "../../../src/common/search/search-input"; import "./hassio-addon-repository"; import "./hassio-repositories-editor"; -import { HassioRepositoryEditor } from "./hassio-repositor-editor"; - import { supervisorTabs } from "../hassio-panel"; +import { showRepositoriesDialog } from "./show-dialog-repositories"; + const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => { if (a.slug === "local") { return -1; @@ -78,7 +78,7 @@ class HassioAddonStore extends LitElement { .hass=${this.hass} .repo=${repo} .addons=${addons} - .filter=${this._filter} + .filter=${this._filter!} > `); } @@ -94,28 +94,53 @@ class HassioAddonStore extends LitElement { .tabs=${supervisorTabs} > Add-on store - + > + + + + Repositories + + + Reload + + + ${repos.length === 0 ? html`` : html` - - - +
+ +
${repos} `} + ${!this.hass.userData?.showAdvanced + ? html` +
+

+ Missing add-ons? Enable advanced mode on + your profile page. +

+
+ ` + : ""} `; } @@ -132,6 +157,10 @@ class HassioAddonStore extends LitElement { } } + private async _manageRepositories() { + showRepositoriesDialog(this); + } + private async _loadData() { try { const addonsInfo = await fetchHassioAddonsInfo(this.hass); @@ -152,8 +181,17 @@ class HassioAddonStore extends LitElement { hassio-addon-repository { margin-top: 24px; } - hassio-search-input { - --iron-icon-fill-color: var(--primary-text-color); + .search { + padding: 0 16px; + background: var(--sidebar-background-color); + border-bottom: 1px solid var(--divider-color); + } + .search search-input { + position: relative; + top: 2px; + } + .advanced { + padding: 12px; } `; } diff --git a/hassio/src/addon-store/hassio-repository-editor.ts b/hassio/src/addon-store/hassio-repository-editor.ts index def7ec4aa847..1a55d235b87b 100644 --- a/hassio/src/addon-store/hassio-repository-editor.ts +++ b/hassio/src/addon-store/hassio-repository-editor.ts @@ -1,6 +1,7 @@ import "@material/mwc-button/mwc-button"; import "@polymer/paper-icon-button/paper-icon-button"; 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"; @@ -14,35 +15,36 @@ import { query, TemplateResult, } from "lit-element"; -import { classMap } from "lit-html/directives/class-map"; -import { fireEvent } from "../../../src/common/dom/fire_event"; +import memoizeOne from "memoize-one"; +import "../../../src/components/ha-dialog"; import "../../../src/components/ha-icon-input"; import "../../../src/components/ha-switch"; -import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box"; -import { haStyleDialog } from "../../../src/resources/styles"; + +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"; @customElement("hassio-repository-editor") -export class HassioRepositoryEditor extends LitElement { - @property() public hass!: HomeAssistant; +class HassioRepositoryEditor extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _options: string[] = []; + @property() private _repos: HassioAddonRepository[] = []; - @query("#option_input") private _optionInput?: PaperInputElement; + @query("#repository_input") private _optionInput?: PaperInputElement; @property() private _opened = false; - @property() private _platform?: string; + @property() private _prosessing = false; @property() private _error?: string; - @property() private _submitting = false; - - @query(".form") private _form?: HTMLDivElement; - - public async showDialog(): Promise { - this._platform = undefined; - this._item = undefined; + public async showDialog(params: any): Promise { + this._repos = params.repos; this._opened = true; await this.updateComplete; } @@ -52,27 +54,37 @@ export class HassioRepositoryEditor extends LitElement { this._error = ""; } + private _filteredRepositories = memoizeOne((repos: HassioAddonRepository[]) => + repos + .filter((repo) => repo.slug !== "core" && repo.slug !== "local") + .sort((a, b) => (a.name < b.name ? -1 : 1)) + ); + protected render(): TemplateResult { + const repositories = this._filteredRepositories(this._repos); return html` + ${this._error ? html`
${this._error}
` : ""}
- Repositories: - ${this._options.length - ? this._options.map((option, index) => { + ${repositories.length + ? repositories.map((repo) => { return html` - ${option} + +
${repo.name}
+
${repo.maintainer}
+
${repo.url}
+ @@ -90,49 +102,23 @@ export class HassioRepositoryEditor extends LitElement { label="Add repository" @keydown=${this._handleKeyAdd} > - Add + + ${this._prosessing + ? html`` + : "Add"} +
- - ${this.hass!.localize("ui.panel.config.helpers.dialog.create")} - - - Back - - - ${this.hass!.localize("ui.common.cancel")} + Cancel `; } - private _platformPicked(ev: Event): void { - this._platform = (ev.currentTarget! as any).platform; - this._focusForm(); - } - - private async _focusForm(): Promise { - await this.updateComplete; - (this._form?.lastElementChild as HTMLElement).focus(); - } - - private _goBack() { - this._platform = undefined; - this._item = undefined; - this._error = undefined; - } - static get styles(): CSSResult[] { return [ + haStyle, haStyleDialog, css` ha-dialog.button-left { @@ -172,56 +158,63 @@ export class HassioRepositoryEditor extends LitElement { if (ev.keyCode !== 13) { return; } - this._addOption(); + this._addRepository(); } - private _addOption() { + private async _addRepository() { const input = this._optionInput; if (!input || !input.value) { return; } - fireEvent(this, "value-changed", { - value: { ...this._item, options: [...this._options, input.value] }, + this._prosessing = true; + const repositories = this._filteredRepositories(this._repos); + const newRepositories = repositories.map((repo) => { + return repo.url; }); - input.value = ""; - } - - private async _removeOption(ev: Event) { - if ( - !(await showConfirmationDialog(this, { - title: "Delete this item?", - text: "Are you sure you want to delete this item?", - })) - ) { - return; + newRepositories.push(input.value); + + try { + await setSupervisorOption(this.hass, { + addons_repositories: newRepositories, + }); + + const addonsInfo = await fetchHassioAddonsInfo(this.hass); + this._repos = addonsInfo.repositories; + input.value = ""; + } catch (err) { + this._error = err; } - const index = (ev.target as any).index; - const options = [...this._options]; - options.splice(index, 1); - fireEvent(this, "value-changed", { - value: { ...this._item, options }, - }); + this._prosessing = false; } - private _valueChanged(ev: CustomEvent) { - if (!this.new && !this._item) { - return; - } - ev.stopPropagation(); - const configValue = (ev.target as any).configValue; - const value = ev.detail.value; - if (this[`_${configValue}`] === value) { + private async _removeRepository(ev: Event) { + const slug = (ev.target as any).slug; + const repositories = this._filteredRepositories(this._repos); + const repository = repositories.find((repo) => { + return repo.slug === slug; + }); + if (!repository) { return; } - const newValue = { ...this._item }; - if (!value) { - delete newValue[configValue]; - } else { - newValue[configValue] = ev.detail.value; + const newRepositories = repositories + .map((repo) => { + return repo.url; + }) + .filter((repo) => { + return repo !== repository.url; + }); + + try { + console.log(newRepositories); + await setSupervisorOption(this.hass, { + addons_repositories: newRepositories, + }); + + const addonsInfo = await fetchHassioAddonsInfo(this.hass); + this._repos = addonsInfo.repositories; + } catch (err) { + this._error = err; } - fireEvent(this, "value-changed", { - value: newValue, - }); } } diff --git a/hassio/src/addon-store/show-dialog-repositories.ts b/hassio/src/addon-store/show-dialog-repositories.ts index f4ef4caa2b73..8618ad0b78f1 100644 --- a/hassio/src/addon-store/show-dialog-repositories.ts +++ b/hassio/src/addon-store/show-dialog-repositories.ts @@ -1,10 +1,13 @@ import { fireEvent } from "../../../src/common/dom/fire_event"; import "./hassio-repository-editor"; -export const showRepositoriesDialog = (element: HTMLElement) => { +export const showRepositoriesDialog = (element: HTMLElement): void => { fireEvent(element, "show-dialog", { dialogTag: "hassio-repository-editor", - dialogImport: "", - dialogParams: {}, + dialogImport: () => + import( + /* webpackChunkName: "hassio-repository-editor" */ "./hassio-repository-editor" + ), + dialogParams: { repos: (element as any)._repos }, }); }; diff --git a/hassio/src/components/hassio-search-input.ts b/hassio/src/components/hassio-search-input.ts deleted file mode 100644 index ba4ac7c22930..000000000000 --- a/hassio/src/components/hassio-search-input.ts +++ /dev/null @@ -1,82 +0,0 @@ -import "@material/mwc-button"; -import "@polymer/iron-icon/iron-icon"; -import "@polymer/paper-icon-button/paper-icon-button"; -import "@polymer/paper-input/paper-input"; -import { - css, - CSSResult, - customElement, - LitElement, - property, -} from "lit-element"; -import { html, TemplateResult } from "lit-html"; -import { fireEvent } from "../../../src/common/dom/fire_event"; - -@customElement("hassio-search-input") -class HassioSearchInput extends LitElement { - @property() private filter?: string; - - protected render(): TemplateResult { - return html` -
- - - ${this.filter && - html` - - `} - -
- `; - } - - private async _filterChanged(value: string) { - fireEvent(this, "value-changed", { value: String(value) }); - } - - private async _filterInputChanged(e) { - this._filterChanged(e.target.value); - } - - private async _clearSearch() { - this._filterChanged(""); - } - - static get styles(): CSSResult { - return css` - paper-input { - flex: 1 1 auto; - margin: 0 16px; - } - .search-container { - display: inline-flex; - width: 100%; - align-items: center; - } - .prefix { - margin: 8px; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "hassio-search-input": HassioSearchInput; - } -} diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts index 46f37453351c..953105e48776 100644 --- a/src/common/search/search-input.ts +++ b/src/common/search/search-input.ts @@ -25,6 +25,9 @@ class SearchInput extends LitElement { @property({ type: Boolean }) public autofocus = false; + @property({ type: Boolean }) + public hassio = false; + public focus() { this.shadowRoot!.querySelector("paper-input")!.focus(); } @@ -47,14 +50,18 @@ class SearchInput extends LitElement { @value-changed=${this._filterInputChanged} .noLabelFloat=${this.noLabelFloat} > - + ${this.filter && html` diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts index 8788b88f1418..65cda7e8b187 100644 --- a/src/data/hassio/supervisor.ts +++ b/src/data/hassio/supervisor.ts @@ -16,7 +16,8 @@ export interface CreateSessionResponse { } export interface SupervisorOptions { - channel: "beta" | "dev" | "stable"; + channel?: "beta" | "dev" | "stable"; + addons_repositories?: string[]; } export const fetchHassioHomeAssistantInfo = async (hass: HomeAssistant) => { From 3187f00e74987d956153e9faeec2d34bddf2ea96 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 16:49:24 +0000 Subject: [PATCH 03/17] fix reload issues --- hassio/src/addon-store/hassio-addon-store.ts | 5 ++++- .../addon-store/hassio-repository-editor.ts | 22 ++++++++++++------- .../addon-store/show-dialog-repositories.ts | 13 +++++++++-- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 53fc1a531d09..f63257daf904 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -158,7 +158,10 @@ class HassioAddonStore extends LitElement { } private async _manageRepositories() { - showRepositoriesDialog(this); + showRepositoriesDialog(this, { + repos: this._repos!, + loadData: () => this._loadData(), + }); } private async _loadData() { diff --git a/hassio/src/addon-store/hassio-repository-editor.ts b/hassio/src/addon-store/hassio-repository-editor.ts index 1a55d235b87b..ae9ca5142eb1 100644 --- a/hassio/src/addon-store/hassio-repository-editor.ts +++ b/hassio/src/addon-store/hassio-repository-editor.ts @@ -28,12 +28,16 @@ import { } from "../../../src/data/hassio/addon"; import { setSupervisorOption } from "../../../src/data/hassio/supervisor"; +import { HassioRepositoryDialogParams } from "./show-dialog-repositories"; @customElement("hassio-repository-editor") class HassioRepositoryEditor extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _repos: HassioAddonRepository[] = []; + @property({ attribute: false }) private _repos: HassioAddonRepository[] = []; + + @property({ attribute: false }) + private _dialogParams?: HassioRepositoryDialogParams; @query("#repository_input") private _optionInput?: PaperInputElement; @@ -43,8 +47,9 @@ class HassioRepositoryEditor extends LitElement { @property() private _error?: string; - public async showDialog(params: any): Promise { - this._repos = params.repos; + public async showDialog(_dialogParams: any): Promise { + this._dialogParams = _dialogParams; + this._repos = _dialogParams.repos; this._opened = true; await this.updateComplete; } @@ -110,7 +115,7 @@ class HassioRepositoryEditor extends LitElement { - Cancel + Close `; @@ -169,7 +174,7 @@ class HassioRepositoryEditor extends LitElement { this._prosessing = true; const repositories = this._filteredRepositories(this._repos); const newRepositories = repositories.map((repo) => { - return repo.url; + return repo.source; }); newRepositories.push(input.value); @@ -180,6 +185,7 @@ class HassioRepositoryEditor extends LitElement { const addonsInfo = await fetchHassioAddonsInfo(this.hass); this._repos = addonsInfo.repositories; + this._dialogParams!.loadData(); input.value = ""; } catch (err) { this._error = err; @@ -198,20 +204,20 @@ class HassioRepositoryEditor extends LitElement { } const newRepositories = repositories .map((repo) => { - return repo.url; + return repo.source; }) .filter((repo) => { - return repo !== repository.url; + return repo !== repository.source; }); try { - console.log(newRepositories); await setSupervisorOption(this.hass, { addons_repositories: newRepositories, }); const addonsInfo = await fetchHassioAddonsInfo(this.hass); this._repos = addonsInfo.repositories; + this._dialogParams!.loadData(); } catch (err) { this._error = err; } diff --git a/hassio/src/addon-store/show-dialog-repositories.ts b/hassio/src/addon-store/show-dialog-repositories.ts index 8618ad0b78f1..51ec8ff6f9a4 100644 --- a/hassio/src/addon-store/show-dialog-repositories.ts +++ b/hassio/src/addon-store/show-dialog-repositories.ts @@ -1,13 +1,22 @@ import { fireEvent } from "../../../src/common/dom/fire_event"; import "./hassio-repository-editor"; +import { HassioAddonRepository } from "../../../src/data/hassio/addon"; -export const showRepositoriesDialog = (element: HTMLElement): void => { +export interface HassioRepositoryDialogParams { + repos: HassioAddonRepository[]; + loadData: () => void; +} + +export const showRepositoriesDialog = ( + element: HTMLElement, + dialogParams: HassioRepositoryDialogParams +): void => { fireEvent(element, "show-dialog", { dialogTag: "hassio-repository-editor", dialogImport: () => import( /* webpackChunkName: "hassio-repository-editor" */ "./hassio-repository-editor" ), - dialogParams: { repos: (element as any)._repos }, + dialogParams, }); }; From 92aa2da2fbdf455ca3795724576a2a194be4673a Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 17:01:13 +0000 Subject: [PATCH 04/17] fix error --- hassio/src/addon-store/hassio-repository-editor.ts | 11 +++++++---- hassio/src/addon-store/show-dialog-repositories.ts | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/hassio/src/addon-store/hassio-repository-editor.ts b/hassio/src/addon-store/hassio-repository-editor.ts index ae9ca5142eb1..f3e17cd3761f 100644 --- a/hassio/src/addon-store/hassio-repository-editor.ts +++ b/hassio/src/addon-store/hassio-repository-editor.ts @@ -185,10 +185,12 @@ class HassioRepositoryEditor extends LitElement { const addonsInfo = await fetchHassioAddonsInfo(this.hass); this._repos = addonsInfo.repositories; - this._dialogParams!.loadData(); + + await this._dialogParams!.loadData(); + input.value = ""; } catch (err) { - this._error = err; + this._error = err.message; } this._prosessing = false; } @@ -217,9 +219,10 @@ class HassioRepositoryEditor extends LitElement { const addonsInfo = await fetchHassioAddonsInfo(this.hass); this._repos = addonsInfo.repositories; - this._dialogParams!.loadData(); + + await this._dialogParams!.loadData(); } catch (err) { - this._error = err; + this._error = err.message; } } } diff --git a/hassio/src/addon-store/show-dialog-repositories.ts b/hassio/src/addon-store/show-dialog-repositories.ts index 51ec8ff6f9a4..e6a995e49897 100644 --- a/hassio/src/addon-store/show-dialog-repositories.ts +++ b/hassio/src/addon-store/show-dialog-repositories.ts @@ -4,7 +4,7 @@ import { HassioAddonRepository } from "../../../src/data/hassio/addon"; export interface HassioRepositoryDialogParams { repos: HassioAddonRepository[]; - loadData: () => void; + loadData: () => Promise; } export const showRepositoriesDialog = ( From 6772cf936ce18cc67fc37c16ed4cbe6de7bc2284 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 17:15:56 +0000 Subject: [PATCH 05/17] Move --- hassio/src/addon-store/hassio-addon-store.ts | 25 ++- .../addon-store/hassio-repositories-editor.ts | 152 ------------------ .../dialog-hassio-repositories.ts} | 20 +-- .../repositories}/show-dialog-repositories.ts | 10 +- 4 files changed, 34 insertions(+), 173 deletions(-) delete mode 100644 hassio/src/addon-store/hassio-repositories-editor.ts rename hassio/src/{addon-store/hassio-repository-editor.ts => dialogs/repositories/dialog-hassio-repositories.ts} (91%) rename hassio/src/{addon-store => dialogs/repositories}/show-dialog-repositories.ts (52%) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index f63257daf904..d7e344e2ce0f 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -14,14 +14,15 @@ import { } from "../../../src/data/hassio/addon"; import "../../../src/layouts/loading-screen"; import "../../../src/layouts/hass-tabs-subpage"; +import { navigate } from "../../../src/common/navigate"; import { HomeAssistant, Route } from "../../../src/types"; import "../../../src/common/search/search-input"; import "./hassio-addon-repository"; -import "./hassio-repositories-editor"; +import "../dialogs/repositories/dialog-hassio-repositories"; import { supervisorTabs } from "../hassio-panel"; -import { showRepositoriesDialog } from "./show-dialog-repositories"; +import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories"; const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => { if (a.slug === "local") { @@ -134,10 +135,11 @@ class HassioAddonStore extends LitElement { ${!this.hass.userData?.showAdvanced ? html`
-

- Missing add-ons? Enable advanced mode on - your profile page. -

+ Missing add-ons? Enable advanced mode on +
+ your profile page +
+ .
` : ""} @@ -179,6 +181,10 @@ class HassioAddonStore extends LitElement { this._filter = e.detail.value; } + private _openProfile(): void { + navigate(this, "/profile"); + } + static get styles(): CSSResult { return css` hassio-addon-repository { @@ -195,6 +201,13 @@ class HassioAddonStore extends LitElement { } .advanced { padding: 12px; + display: flex; + } + .advanced-link { + color: var(--primary-color); + text-decoration: underline; + cursor: pointer; + margin-left: 0.5em; } `; } diff --git a/hassio/src/addon-store/hassio-repositories-editor.ts b/hassio/src/addon-store/hassio-repositories-editor.ts deleted file mode 100644 index 1a23949cdf51..000000000000 --- a/hassio/src/addon-store/hassio-repositories-editor.ts +++ /dev/null @@ -1,152 +0,0 @@ -import "@polymer/iron-icon/iron-icon"; -import "@polymer/paper-card/paper-card"; -import "@polymer/paper-input/paper-input"; -import { - css, - CSSResultArray, - customElement, - html, - LitElement, - property, - PropertyValues, - TemplateResult, -} from "lit-element"; -import { repeat } from "lit-html/directives/repeat"; -import memoizeOne from "memoize-one"; -import "../../../src/components/buttons/ha-call-api-button"; -import { HassioAddonRepository } from "../../../src/data/hassio/addon"; -import { PolymerChangedEvent } from "../../../src/polymer-types"; -import { HomeAssistant } from "../../../src/types"; -import "../components/hassio-card-content"; -import { hassioStyle } from "../resources/hassio-style"; - -@customElement("hassio-repositories-editor") -class HassioRepositoriesEditor extends LitElement { - @property() public hass!: HomeAssistant; - - @property() public repos!: HassioAddonRepository[]; - - @property() private _repoUrl = ""; - - private _sortedRepos = memoizeOne((repos: HassioAddonRepository[]) => - repos - .filter((repo) => repo.slug !== "core" && repo.slug !== "local") - .sort((a, b) => (a.name < b.name ? -1 : 1)) - ); - - protected render(): TemplateResult { - const repos = this._sortedRepos(this.repos); - return html` -
-

- Repositories -

-

- Configure which add-on repositories to fetch data from: -

-
- ${// Use repeat so that the fade-out from call-service-api-button - // stays with the correct repo after we add/delete one. - repeat( - repos, - (repo) => repo.slug, - (repo) => html` - -
- -
-
- - Remove - -
- - ` - )} - - -
- - -
-
- - Add - -
- -
-
- `; - } - - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - - if (changedProps.has("repos")) { - this._repoUrl = ""; - } - } - - private _urlChanged(ev: PolymerChangedEvent) { - this._repoUrl = ev.detail.value; - } - - private computeRemoveRepoData(repoList, url) { - const list = repoList - .filter((repo) => repo.url !== url) - .map((repo) => repo.source); - return { addons_repositories: list }; - } - - private computeAddRepoData(repoList, url) { - const list = repoList ? repoList.map((repo) => repo.source) : []; - list.push(url); - return { addons_repositories: list }; - } - - static get styles(): CSSResultArray { - return [ - hassioStyle, - css` - .add { - padding: 12px 16px; - } - iron-icon { - color: var(--secondary-text-color); - margin-right: 16px; - display: inline-block; - } - paper-input { - width: calc(100% - 49px); - display: inline-block; - margin-top: -4px; - } - `, - ]; - } -} - -declare global { - interface HTMLElementTagNameMap { - "hassio-repositories-editor": HassioRepositoriesEditor; - } -} diff --git a/hassio/src/addon-store/hassio-repository-editor.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts similarity index 91% rename from hassio/src/addon-store/hassio-repository-editor.ts rename to hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index f3e17cd3761f..a0baebcaa675 100644 --- a/hassio/src/addon-store/hassio-repository-editor.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -16,22 +16,22 @@ import { TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; -import "../../../src/components/ha-dialog"; -import "../../../src/components/ha-icon-input"; -import "../../../src/components/ha-switch"; +import "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-icon-input"; +import "../../../../src/components/ha-switch"; -import { haStyle, haStyleDialog } from "../../../src/resources/styles"; -import type { HomeAssistant } from "../../../src/types"; +import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; +import type { HomeAssistant } from "../../../../src/types"; import { HassioAddonRepository, fetchHassioAddonsInfo, -} from "../../../src/data/hassio/addon"; +} from "../../../../src/data/hassio/addon"; -import { setSupervisorOption } from "../../../src/data/hassio/supervisor"; +import { setSupervisorOption } from "../../../../src/data/hassio/supervisor"; import { HassioRepositoryDialogParams } from "./show-dialog-repositories"; -@customElement("hassio-repository-editor") -class HassioRepositoryEditor extends LitElement { +@customElement("dialog-hassio-repositories") +class HassioRepositoriesDialog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) private _repos: HassioAddonRepository[] = []; @@ -229,6 +229,6 @@ class HassioRepositoryEditor extends LitElement { declare global { interface HTMLElementTagNameMap { - "hassio-repository-editor": HassioRepositoryEditor; + "dialog-hassio-repositories": HassioRepositoriesDialog; } } diff --git a/hassio/src/addon-store/show-dialog-repositories.ts b/hassio/src/dialogs/repositories/show-dialog-repositories.ts similarity index 52% rename from hassio/src/addon-store/show-dialog-repositories.ts rename to hassio/src/dialogs/repositories/show-dialog-repositories.ts index e6a995e49897..172825946aa9 100644 --- a/hassio/src/addon-store/show-dialog-repositories.ts +++ b/hassio/src/dialogs/repositories/show-dialog-repositories.ts @@ -1,6 +1,6 @@ -import { fireEvent } from "../../../src/common/dom/fire_event"; -import "./hassio-repository-editor"; -import { HassioAddonRepository } from "../../../src/data/hassio/addon"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; +import "./dialog-hassio-repositories"; +import { HassioAddonRepository } from "../../../../src/data/hassio/addon"; export interface HassioRepositoryDialogParams { repos: HassioAddonRepository[]; @@ -12,10 +12,10 @@ export const showRepositoriesDialog = ( dialogParams: HassioRepositoryDialogParams ): void => { fireEvent(element, "show-dialog", { - dialogTag: "hassio-repository-editor", + dialogTag: "dialog-hassio-repositories", dialogImport: () => import( - /* webpackChunkName: "hassio-repository-editor" */ "./hassio-repository-editor" + /* webpackChunkName: "ialog-hassio-repositories" */ "./dialog-hassio-repositories" ), dialogParams, }); From 30e3755071a1991a24c6b6af83af6c0363307663 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 17:30:18 +0000 Subject: [PATCH 06/17] Remove unused imports --- hassio/src/dialogs/repositories/dialog-hassio-repositories.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index a0baebcaa675..d17492973aed 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -17,8 +17,6 @@ import { } from "lit-element"; import memoizeOne from "memoize-one"; import "../../../../src/components/ha-dialog"; -import "../../../../src/components/ha-icon-input"; -import "../../../../src/components/ha-switch"; import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; From 93ed242fc9483c01a824bd3f99526ef5fb225ee5 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Mon, 4 May 2020 17:37:15 +0000 Subject: [PATCH 07/17] Remove unused import --- hassio/src/addon-store/hassio-addon-store.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index d7e344e2ce0f..93dc857c06c0 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -18,7 +18,6 @@ import { navigate } from "../../../src/common/navigate"; import { HomeAssistant, Route } from "../../../src/types"; import "../../../src/common/search/search-input"; import "./hassio-addon-repository"; -import "../dialogs/repositories/dialog-hassio-repositories"; import { supervisorTabs } from "../hassio-panel"; From 43cb554de9252b76cdfc8e285a7089e1a8c7c953 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 6 May 2020 12:28:36 +0000 Subject: [PATCH 08/17] Fix merge issues --- hassio/src/addon-store/hassio-addon-store.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index e03f3ab704f3..92207082fcaa 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -94,7 +94,6 @@ class HassioAddonStore extends LitElement { .tabs=${supervisorTabs} > Add-on store - <<<<<<< HEAD - ======= - - >>>>>>> 636429ccfa44f3017f9adafe5cd52c6690ea5e6f ${repos.length === 0 ? html`` : html` From c5a8948ca70ff47a37730b7f5e55ff08e117e005 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 6 May 2020 13:35:21 +0000 Subject: [PATCH 09/17] style changes --- hassio/src/addon-store/hassio-addon-store.ts | 1 + hassio/src/dialogs/repositories/dialog-hassio-repositories.ts | 2 +- src/resources/styles.ts | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 92207082fcaa..bddb56d425e2 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -200,6 +200,7 @@ class HassioAddonStore extends LitElement { .advanced { padding: 12px; display: flex; + color: var(--primary-text-color); } .advanced-link { color: var(--primary-color); diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index d17492973aed..18f68edef9ab 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -79,7 +79,7 @@ class HassioRepositoriesDialog extends LitElement { ? repositories.map((repo) => { return html` - +
${repo.name}
${repo.maintainer}
${repo.url}
diff --git a/src/resources/styles.ts b/src/resources/styles.ts index c4c505d52b19..878b483202bf 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -227,6 +227,7 @@ export const haStyleDialog = css` --mdc-dialog-max-width: 600px; --mdc-dialog-heading-ink-color: var(--primary-text-color); --mdc-dialog-content-ink-color: var(--primary-text-color); + --mdc-theme-surface: var(--primary-background-color); --justify-action-buttons: space-between; } From beebd8eb5bdb4b2b65be04e5fd2f257186c9a67c Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 6 May 2020 14:06:49 +0000 Subject: [PATCH 10/17] More style fixes --- src/common/search/search-input.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts index 4c45666f9af5..9614cb31238a 100644 --- a/src/common/search/search-input.ts +++ b/src/common/search/search-input.ts @@ -84,6 +84,10 @@ class SearchInput extends LitElement { static get styles(): CSSResult { return css` + ha-icon, + ha-icon-button { + color: var(--primary-text-color); + } ha-icon { margin: 8px; } From 758dcd51b2d50e51877473726098dca9fa8343c6 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 6 May 2020 14:07:22 +0000 Subject: [PATCH 11/17] Change to ha-icon --- hassio/src/addon-store/hassio-addon-store.ts | 6 ++++-- .../src/dialogs/repositories/dialog-hassio-repositories.ts | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index bddb56d425e2..f5457ffb0b3e 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -12,6 +12,7 @@ import { HassioAddonRepository, reloadHassioAddons, } from "../../../src/data/hassio/addon"; +import "../../../src/components/ha-icon"; import "../../../src/layouts/loading-screen"; import "../../../src/layouts/hass-tabs-subpage"; import { navigate } from "../../../src/common/navigate"; @@ -101,11 +102,11 @@ class HassioAddonStore extends LitElement { horizontal-offset="-5" slot="toolbar-icon" > - + > Repositories @@ -200,6 +201,7 @@ class HassioAddonStore extends LitElement { .advanced { padding: 12px; display: flex; + flex-wrap: wrap; color: var(--primary-text-color); } .advanced-link { diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 18f68edef9ab..fe76c3d6fb26 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-spinner/paper-spinner"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; @@ -17,6 +16,7 @@ import { } from "lit-element"; import memoizeOne from "memoize-one"; import "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-icon"; import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; @@ -84,12 +84,12 @@ class HassioRepositoriesDialog extends LitElement {
${repo.maintainer}
${repo.url}
 - + > `; }) From c776bdfb99604389ace855b41af751a78070469c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Wed, 6 May 2020 22:00:17 +0200 Subject: [PATCH 12/17] Update hassio/src/dialogs/repositories/show-dialog-repositories.ts Co-authored-by: Bram Kragten --- hassio/src/dialogs/repositories/show-dialog-repositories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hassio/src/dialogs/repositories/show-dialog-repositories.ts b/hassio/src/dialogs/repositories/show-dialog-repositories.ts index 172825946aa9..8485cebd7869 100644 --- a/hassio/src/dialogs/repositories/show-dialog-repositories.ts +++ b/hassio/src/dialogs/repositories/show-dialog-repositories.ts @@ -15,7 +15,7 @@ export const showRepositoriesDialog = ( dialogTag: "dialog-hassio-repositories", dialogImport: () => import( - /* webpackChunkName: "ialog-hassio-repositories" */ "./dialog-hassio-repositories" + /* webpackChunkName: "dialog-hassio-repositories" */ "./dialog-hassio-repositories" ), dialogParams, }); From 3832ea6c7507b8c85525dbbc09e116726800a0ed Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 6 May 2020 20:09:59 +0000 Subject: [PATCH 13/17] No need for hassio prefix --- src/common/search/search-input.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts index 9614cb31238a..f3cc169f7b4a 100644 --- a/src/common/search/search-input.ts +++ b/src/common/search/search-input.ts @@ -50,18 +50,14 @@ class SearchInput extends LitElement { @value-changed=${this._filterInputChanged} .noLabelFloat=${this.noLabelFloat} > - + ${this.filter && html` From 082b883e7ea8d8a605266dcbf8427fe0c34c4c91 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 6 May 2020 20:12:23 +0000 Subject: [PATCH 14/17] remove hassio --- hassio/src/addon-store/hassio-addon-store.ts | 1 - src/common/search/search-input.ts | 3 --- 2 files changed, 4 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index f5457ffb0b3e..17c0f0d85289 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -121,7 +121,6 @@ class HassioAddonStore extends LitElement { : html`
Date: Thu, 7 May 2020 12:58:14 +0000 Subject: [PATCH 15/17] Use a tag --- hassio/src/addon-store/hassio-addon-store.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 17c0f0d85289..8bdbe6e39882 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -15,7 +15,6 @@ import { import "../../../src/components/ha-icon"; import "../../../src/layouts/loading-screen"; import "../../../src/layouts/hass-tabs-subpage"; -import { navigate } from "../../../src/common/navigate"; import { HomeAssistant, Route } from "../../../src/types"; import "../../../src/common/search/search-input"; import "./hassio-addon-repository"; @@ -134,9 +133,9 @@ class HassioAddonStore extends LitElement { ? html`
Missing add-ons? Enable advanced mode on -
+ your profile page -
+ .
` @@ -179,10 +178,6 @@ class HassioAddonStore extends LitElement { this._filter = e.detail.value; } - private _openProfile(): void { - navigate(this, "/profile"); - } - static get styles(): CSSResult { return css` hassio-addon-repository { @@ -203,11 +198,9 @@ class HassioAddonStore extends LitElement { flex-wrap: wrap; color: var(--primary-text-color); } - .advanced-link { - color: var(--primary-color); - text-decoration: underline; - cursor: pointer; + .advanced a { margin-left: 0.5em; + color: var(--primary-color); } `; } From 663ed613d915f0e80ece625b492d4c1c15a8a792 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 7 May 2020 13:01:28 +0000 Subject: [PATCH 16/17] Use paper-card-background-color for dialog --- src/resources/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 878b483202bf..c9a2286561c1 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -227,7 +227,7 @@ export const haStyleDialog = css` --mdc-dialog-max-width: 600px; --mdc-dialog-heading-ink-color: var(--primary-text-color); --mdc-dialog-content-ink-color: var(--primary-text-color); - --mdc-theme-surface: var(--primary-background-color); + --mdc-theme-surface: var(--paper-card-background-color); --justify-action-buttons: space-between; } From 6ca9520cabb23983b9105a9f18701844947c59ca Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 7 May 2020 13:09:51 +0000 Subject: [PATCH 17/17] Remove var --- src/resources/styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index c9a2286561c1..c4c505d52b19 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -227,7 +227,6 @@ export const haStyleDialog = css` --mdc-dialog-max-width: 600px; --mdc-dialog-heading-ink-color: var(--primary-text-color); --mdc-dialog-content-ink-color: var(--primary-text-color); - --mdc-theme-surface: var(--paper-card-background-color); --justify-action-buttons: space-between; }