mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
💄 move advanced mode toggle (#4587)
This commit is contained in:
parent
1f44b4b5a9
commit
f3f32c800e
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
67
src/panels/profile/ha-advanced-mode-row.ts
Normal file
67
src/panels/profile/ha-advanced-mode-row.ts
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -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 {
|
import {
|
||||||
LitElement,
|
LitElement,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
@ -33,6 +6,31 @@ import {
|
|||||||
css,
|
css,
|
||||||
property,
|
property,
|
||||||
} from "lit-element";
|
} 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 { haStyle } from "../../resources/styles";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
@ -119,6 +117,15 @@ class HaPanelProfile extends LitElement {
|
|||||||
.narrow=${this.narrow}
|
.narrow=${this.narrow}
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
></ha-push-notifications-row>
|
></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">
|
<div class="card-actions">
|
||||||
<mwc-button class="warning" @click=${this._handleLogOut}>
|
<mwc-button class="warning" @click=${this._handleLogOut}>
|
||||||
@ -142,15 +149,6 @@ class HaPanelProfile extends LitElement {
|
|||||||
.mfaModules=${this.hass.user!.mfa_modules}
|
.mfaModules=${this.hass.user!.mfa_modules}
|
||||||
></ha-mfa-modules-card>
|
></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
|
<ha-refresh-tokens-card
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.refreshTokens=${this._refreshTokens}
|
.refreshTokens=${this._refreshTokens}
|
||||||
|
@ -1942,9 +1942,10 @@
|
|||||||
},
|
},
|
||||||
"advanced_mode": {
|
"advanced_mode": {
|
||||||
"title": "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",
|
"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": {
|
"refresh_tokens": {
|
||||||
"header": "Refresh Tokens",
|
"header": "Refresh Tokens",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user