mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
💄 move advanced mode toggle (#4587)
This commit is contained in:
Ian Richardson
Paulus Schoutsen
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 {
|
||||
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}
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user