💄 move advanced mode toggle (#4587)

This commit is contained in:
Ian Richardson 2020-01-24 11:50:20 -06:00 committed by Paulus Schoutsen
parent 1f44b4b5a9
commit f3f32c800e
4 changed files with 104 additions and 102 deletions

View File

@ -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`
<ha-card>
<div class="card-header">
<div class="title">
${this.hass.localize("ui.panel.profile.advanced_mode.title")}
</div>
<ha-switch
.checked=${this.coreUserData && this.coreUserData.showAdvanced}
.disabled=${this.coreUserData === undefined}
@change=${this._advancedToggled}
></ha-switch>
</div>
<div class="card-content">
${this.hass.localize("ui.panel.profile.advanced_mode.description")}
</div>
</ha-card>
`;
}
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;
}
}

View File

@ -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`
<ha-settings-row .narrow=${this.narrow}>
<span slot="heading">
${this.hass.localize("ui.panel.profile.advanced_mode.title")}
</span>
<span slot="description">
${this.hass.localize("ui.panel.profile.advanced_mode.description")}
<a
href="https://www.home-assistant.io/blog/2019/07/17/release-96/#advanced-mode"
target="_blank"
>${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")}
</a>
</span>
<ha-switch
.checked=${this.coreUserData && this.coreUserData.showAdvanced}
.disabled=${this.coreUserData === undefined}
@change=${this._advancedToggled}
></ha-switch>
</ha-settings-row>
`;
}
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;
}
}

View File

@ -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}
></ha-push-notifications-row>
${this.hass.user!.is_admin
? html`
<ha-advanced-mode-row
.hass=${this.hass}
.narrow=${this.narrow}
.coreUserData=${this._coreUserData}
></ha-advanced-mode-row>
`
: ""}
<div class="card-actions">
<mwc-button class="warning" @click=${this._handleLogOut}>
@ -142,15 +149,6 @@ class HaPanelProfile extends LitElement {
.mfaModules=${this.hass.user!.mfa_modules}
></ha-mfa-modules-card>
${this.hass.user!.is_admin
? html`
<ha-advanced-mode-card
.hass=${this.hass}
.coreUserData=${this._coreUserData}
></ha-advanced-mode-card>
`
: ""}
<ha-refresh-tokens-card
.hass=${this.hass}
.refreshTokens=${this._refreshTokens}

View File

@ -1942,9 +1942,10 @@
},
"advanced_mode": {
"title": "Advanced Mode",
"description": "Home Assistant hides advanced features and options by default. You can make these features accessible by checking this toggle. This is a user-specific setting and does not impact other users using Home Assistant.",
"description": "Unlocks advanced features.",
"hint_enable": "Missing config options? Enable advanced mode on",
"link_profile_page": "your profile page"
"link_profile_page": "your profile page",
"link_promo": "Learn more"
},
"refresh_tokens": {
"header": "Refresh Tokens",