diff --git a/src/panels/profile/ha-advanced-mode-card.ts b/src/panels/profile/ha-advanced-mode-card.ts deleted file mode 100644 index 74b959917d..0000000000 --- a/src/panels/profile/ha-advanced-mode-card.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { - LitElement, - property, - TemplateResult, - html, - customElement, - CSSResult, - css, -} from "lit-element"; -import "../../components/ha-card"; -import { HomeAssistant } from "../../types"; -import { - CoreFrontendUserData, - getOptimisticFrontendUserDataCollection, -} from "../../data/frontend"; - -@customElement("ha-advanced-mode-card") -class AdvancedModeCard extends LitElement { - @property() public hass!: HomeAssistant; - @property() public coreUserData?: CoreFrontendUserData; - - protected render(): TemplateResult | void { - return html` - -
-
- ${this.hass.localize("ui.panel.profile.advanced_mode.title")} -
- -
-
- ${this.hass.localize("ui.panel.profile.advanced_mode.description")} -
-
- `; - } - - private async _advancedToggled(ev) { - getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({ - showAdvanced: ev.currentTarget.checked, - }); - } - - static get styles(): CSSResult { - return css` - .card-header { - display: flex; - } - .title { - flex: 1; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "ha-advanced-mode-card": AdvancedModeCard; - } -} diff --git a/src/panels/profile/ha-advanced-mode-row.ts b/src/panels/profile/ha-advanced-mode-row.ts new file mode 100644 index 0000000000..8121b3f92a --- /dev/null +++ b/src/panels/profile/ha-advanced-mode-row.ts @@ -0,0 +1,67 @@ +import { + LitElement, + property, + TemplateResult, + html, + customElement, + CSSResult, + css, +} from "lit-element"; + +import "../../components/ha-card"; + +import { HomeAssistant } from "../../types"; +import { + CoreFrontendUserData, + getOptimisticFrontendUserDataCollection, +} from "../../data/frontend"; + +@customElement("ha-advanced-mode-row") +class AdvancedModeRow extends LitElement { + @property() public hass!: HomeAssistant; + @property() public narrow!: boolean; + @property() public coreUserData?: CoreFrontendUserData; + + protected render(): TemplateResult | void { + return html` + + + ${this.hass.localize("ui.panel.profile.advanced_mode.title")} + + + ${this.hass.localize("ui.panel.profile.advanced_mode.description")} + ${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")} + + + + + `; + } + + private async _advancedToggled(ev) { + getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({ + showAdvanced: ev.currentTarget.checked, + }); + } + + static get styles(): CSSResult { + return css` + a { + color: var(--primary-color); + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-advanced-mode-row": AdvancedModeRow; + } +} diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts index 1331e068fd..69a6d85c74 100644 --- a/src/panels/profile/ha-panel-profile.ts +++ b/src/panels/profile/ha-panel-profile.ts @@ -1,30 +1,3 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-item/paper-item"; -import "@material/mwc-button"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; - -import "../../components/ha-card"; -import "../../components/ha-menu-button"; -import "../../resources/ha-style"; - -import { - getOptimisticFrontendUserDataCollection, - CoreFrontendUserData, -} from "../../data/frontend"; - -import "./ha-change-password-card"; -import "./ha-mfa-modules-card"; -import "./ha-advanced-mode-card"; -import "./ha-refresh-tokens-card"; -import "./ha-long-lived-access-tokens-card"; - -import "./ha-pick-language-row"; -import "./ha-pick-theme-row"; -import "./ha-push-notifications-row"; -import "./ha-force-narrow-row"; -import "./ha-set-vibrate-row"; import { LitElement, TemplateResult, @@ -33,6 +6,31 @@ import { css, property, } from "lit-element"; +import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "@polymer/app-layout/app-header/app-header"; +import "@polymer/paper-item/paper-item-body"; +import "@polymer/paper-item/paper-item"; +import "@material/mwc-button"; +import "@polymer/app-layout/app-toolbar/app-toolbar"; + +import "./ha-change-password-card"; +import "./ha-mfa-modules-card"; +import "./ha-refresh-tokens-card"; +import "./ha-long-lived-access-tokens-card"; +import "./ha-advanced-mode-row"; +import "./ha-pick-language-row"; +import "./ha-pick-theme-row"; +import "./ha-push-notifications-row"; +import "./ha-force-narrow-row"; +import "./ha-set-vibrate-row"; +import "../../components/ha-card"; +import "../../components/ha-menu-button"; +import "../../resources/ha-style"; + +import { + getOptimisticFrontendUserDataCollection, + CoreFrontendUserData, +} from "../../data/frontend"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import { fireEvent } from "../../common/dom/fire_event"; @@ -119,6 +117,15 @@ class HaPanelProfile extends LitElement { .narrow=${this.narrow} .hass=${this.hass} > + ${this.hass.user!.is_admin + ? html` + + ` + : ""}
@@ -142,15 +149,6 @@ class HaPanelProfile extends LitElement { .mfaModules=${this.hass.user!.mfa_modules} > - ${this.hass.user!.is_admin - ? html` - - ` - : ""} -