Easier to use frontend options. Set sidebar title.
This commit is contained in:
294
js/config_panel/browser-mod-settings-table.ts
Normal file
294
js/config_panel/browser-mod-settings-table.ts
Normal file
@@ -0,0 +1,294 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { property } from "lit/decorators.js";
|
||||
import { selectTree } from "../helpers";
|
||||
|
||||
class BrowserModSettingsTable extends LitElement {
|
||||
@property() settingKey;
|
||||
@property() settingSelector = {
|
||||
template: {},
|
||||
};
|
||||
|
||||
@property() hass;
|
||||
@property() default;
|
||||
|
||||
@property() tableData = [];
|
||||
|
||||
_users = undefined;
|
||||
|
||||
firstUpdated() {
|
||||
window.browser_mod.addEventListener("browser-mod-config-update", () =>
|
||||
this.updateTable()
|
||||
);
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has("settingKey")) this.updateTable();
|
||||
if (
|
||||
changedProperties.has("hass") &&
|
||||
changedProperties.get("hass") === undefined
|
||||
)
|
||||
this.updateTable();
|
||||
}
|
||||
|
||||
async fetchUsers(): Promise<any[]> {
|
||||
if (this._users === undefined)
|
||||
this._users = await this.hass.callWS({ type: "config/auth/list" });
|
||||
return this._users;
|
||||
}
|
||||
|
||||
clearSetting(type, target) {
|
||||
const clearSettingCallback = async () => {
|
||||
if (this.settingKey === "sidebarPanelOrder") {
|
||||
const sideBar: any = await selectTree(
|
||||
document,
|
||||
"home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar"
|
||||
);
|
||||
window.browser_mod.setSetting(type, target, {
|
||||
sidebarHiddenPanels: "[]",
|
||||
sidebarPanelOrder: "[]",
|
||||
});
|
||||
window.browser_mod.setSetting(type, target, {
|
||||
sidebarHiddenPanels: undefined,
|
||||
sidebarPanelOrder: undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.default)
|
||||
window.browser_mod.setSetting(type, target, {
|
||||
[this.settingKey]: this.default,
|
||||
});
|
||||
window.browser_mod.setSetting(type, target, {
|
||||
[this.settingKey]: undefined,
|
||||
});
|
||||
};
|
||||
window.browser_mod?.showPopup(
|
||||
"Are you sure",
|
||||
"Do you wish to clear this setting?",
|
||||
{
|
||||
right_button: "Yes",
|
||||
right_button_action: clearSettingCallback,
|
||||
left_button: "No",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
changeSetting(type, target) {
|
||||
const changeSettingCallback = async (newValue) => {
|
||||
if (this.settingKey === "sidebarPanelOrder") {
|
||||
const sideBar: any = await selectTree(
|
||||
document,
|
||||
"home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar"
|
||||
);
|
||||
|
||||
window.browser_mod.setSetting(type, target, {
|
||||
sidebarHiddenPanels: JSON.stringify(sideBar._hiddenPanels),
|
||||
sidebarPanelOrder: JSON.stringify(sideBar._panelOrder),
|
||||
});
|
||||
|
||||
console.log(sideBar._hiddenPanels, sideBar._panelOrder);
|
||||
return;
|
||||
}
|
||||
let value = newValue.value;
|
||||
window.browser_mod.setSetting(type, target, { [this.settingKey]: value });
|
||||
};
|
||||
|
||||
const settings = window.browser_mod?.getSetting?.(this.settingKey);
|
||||
const def =
|
||||
(type === "global" ? settings.global : settings[type][target]) ??
|
||||
this.default;
|
||||
window.browser_mod?.showPopup(
|
||||
"Change value",
|
||||
(this.settingSelector as any).plaintext ?? [
|
||||
{
|
||||
name: "value",
|
||||
label: (this.settingSelector as any).label ?? "",
|
||||
default: def,
|
||||
selector: this.settingSelector,
|
||||
},
|
||||
],
|
||||
{
|
||||
right_button: "OK",
|
||||
right_button_action: changeSettingCallback,
|
||||
left_button: "Cancel",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
addBrowserSetting() {
|
||||
const settings = window.browser_mod?.getSetting?.(this.settingKey);
|
||||
const allBrowsers = window.browser_mod._data.browsers;
|
||||
const browsers = [];
|
||||
for (const target of Object.keys(allBrowsers)) {
|
||||
if (settings.browser[target] == null) browsers.push(target);
|
||||
}
|
||||
|
||||
if (browsers.length === 0) {
|
||||
window.browser_mod.showPopup(
|
||||
"No browsers to configure",
|
||||
"All registered browsers have already been configured.",
|
||||
{ right_button: "OK" }
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
window.browser_mod.showPopup(
|
||||
"Select browser to configure",
|
||||
[
|
||||
{
|
||||
name: "browser",
|
||||
label: "",
|
||||
selector: {
|
||||
select: { options: browsers },
|
||||
},
|
||||
},
|
||||
],
|
||||
{
|
||||
right_button: "Next",
|
||||
right_button_action: (value) =>
|
||||
this.changeSetting("browser", value.browser),
|
||||
left_button: "Cancel",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async addUserSetting() {
|
||||
const settings = window.browser_mod?.getSetting?.(this.settingKey);
|
||||
const allUsers = await this.fetchUsers();
|
||||
const users = [];
|
||||
for (const target of allUsers) {
|
||||
if (target.username && settings.user[target.id] == null)
|
||||
users.push({ label: target.name, value: target.id });
|
||||
}
|
||||
|
||||
if (users.length === 0) {
|
||||
window.browser_mod.showPopup(
|
||||
"No users to configure",
|
||||
"All users have already been configured.",
|
||||
{ right_button: "OK" }
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
window.browser_mod.showPopup(
|
||||
"Select user to configure",
|
||||
[
|
||||
{
|
||||
name: "user",
|
||||
label: "",
|
||||
selector: {
|
||||
select: { options: users },
|
||||
},
|
||||
},
|
||||
],
|
||||
{
|
||||
right_button: "Next",
|
||||
right_button_action: (value) => this.changeSetting("user", value.user),
|
||||
left_button: "Cancel",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async updateTable() {
|
||||
if (this.hass === undefined) return;
|
||||
const users = await this.fetchUsers();
|
||||
const settings = window.browser_mod?.getSetting?.(this.settingKey);
|
||||
const data = [];
|
||||
for (const [k, v] of Object.entries(settings.user)) {
|
||||
const user = users.find((usr) => usr.id === k);
|
||||
data.push({
|
||||
name: `User: ${user.name}`,
|
||||
value: String(v),
|
||||
controls: html`
|
||||
<ha-icon-button @click=${() => this.changeSetting("user", k)}>
|
||||
<ha-icon .icon=${"mdi:pencil"} style="display:flex;"></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button @click=${() => this.clearSetting("user", k)}>
|
||||
<ha-icon .icon=${"mdi:delete"} style="display:flex;"></ha-icon>
|
||||
</ha-icon-button>
|
||||
`,
|
||||
});
|
||||
}
|
||||
|
||||
data.push({
|
||||
name: "",
|
||||
value: html`
|
||||
<mwc-button @click=${() => this.addUserSetting()}>
|
||||
<ha-icon .icon=${"mdi:plus"}></ha-icon>
|
||||
Add user setting
|
||||
</mwc-button>
|
||||
`,
|
||||
});
|
||||
|
||||
for (const [k, v] of Object.entries(settings.browser)) {
|
||||
data.push({
|
||||
name: `Browser: ${k}`,
|
||||
value: String(v),
|
||||
controls: html`
|
||||
<ha-icon-button @click=${() => this.changeSetting("browser", k)}>
|
||||
<ha-icon .icon=${"mdi:pencil"} style="display:flex;"></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button @click=${() => this.clearSetting("browser", k)}>
|
||||
<ha-icon .icon=${"mdi:delete"} style="display:flex;"></ha-icon>
|
||||
</ha-icon-button>
|
||||
`,
|
||||
});
|
||||
}
|
||||
|
||||
data.push({
|
||||
name: "",
|
||||
value: html`
|
||||
<mwc-button @click=${() => this.addBrowserSetting()}>
|
||||
<ha-icon .icon=${"mdi:plus"}></ha-icon>
|
||||
Add browser setting
|
||||
</mwc-button>
|
||||
`,
|
||||
});
|
||||
|
||||
data.push({
|
||||
name: "GLOBAL",
|
||||
value:
|
||||
settings.global != null
|
||||
? String(settings.global)
|
||||
: html`<span style="color: var(--warning-color);">DEFAULT</span>`,
|
||||
controls: html`
|
||||
<ha-icon-button @click=${() => this.changeSetting("global", null)}>
|
||||
<ha-icon .icon=${"mdi:pencil"} style="display:flex;"></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button @click=${() => this.clearSetting("global", null)}>
|
||||
<ha-icon .icon=${"mdi:delete"} style="display:flex;"></ha-icon>
|
||||
</ha-icon-button>
|
||||
`,
|
||||
});
|
||||
this.tableData = data;
|
||||
}
|
||||
|
||||
render() {
|
||||
const global = window.browser_mod?.global_settings?.[this.settingKey];
|
||||
const columns = {
|
||||
name: {
|
||||
title: "Name",
|
||||
grows: true,
|
||||
},
|
||||
value: {
|
||||
title: "Value",
|
||||
grows: true,
|
||||
},
|
||||
controls: {},
|
||||
};
|
||||
|
||||
return html`
|
||||
<ha-data-table .columns=${columns} .data=${this.tableData} auto-height>
|
||||
</ha-data-table>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("browser-mod-settings-table", BrowserModSettingsTable);
|
||||
@@ -136,7 +136,7 @@ class BrowserModRegisteredBrowsersCard extends LitElement {
|
||||
private _renderInteractionAlert() {
|
||||
return html`
|
||||
<ha-alert title="Interaction requirement">
|
||||
For security reasons many browsers require the user to interact with a
|
||||
For privacy reasons many browsers require the user to interact with a
|
||||
webpage before allowing audio playback or video capture. This may affect
|
||||
the
|
||||
<code>media_player</code> and <code>camera</code> components of Browser
|
||||
|
||||
@@ -1,277 +1,197 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { property, state } from "lit/decorators.js";
|
||||
import { loadDeveloperToolsTemplate } from "../helpers";
|
||||
import { loadDeveloperToolsTemplate, selectTree } from "../helpers";
|
||||
|
||||
import "./browser-mod-settings-table";
|
||||
|
||||
loadDeveloperToolsTemplate();
|
||||
|
||||
class BrowserModFrontendSettingsCard extends LitElement {
|
||||
@property() hass;
|
||||
|
||||
@state() _selectedTab = 0;
|
||||
@state() _dashboards = [];
|
||||
|
||||
@state() _editSidebar = false;
|
||||
_savedSidebar = { panelOrder: [], hiddenPanels: [] };
|
||||
|
||||
firstUpdated() {
|
||||
window.browser_mod.addEventListener("browser-mod-config-update", () =>
|
||||
this.requestUpdate()
|
||||
);
|
||||
window.browser_mod.addEventListener("browser-mod-favicon-update", () =>
|
||||
this.requestUpdate()
|
||||
);
|
||||
}
|
||||
|
||||
_handleSwitchTab(ev: CustomEvent) {
|
||||
this._selectedTab = parseInt(ev.detail.index, 10);
|
||||
updated(changedProperties) {
|
||||
if (
|
||||
changedProperties.has("hass") &&
|
||||
changedProperties.get("hass") === undefined
|
||||
) {
|
||||
(async () =>
|
||||
(this._dashboards = await this.hass.callWS({
|
||||
type: "lovelace/dashboards/list",
|
||||
})))();
|
||||
}
|
||||
}
|
||||
|
||||
async toggleEditSidebar() {
|
||||
const sideBar: any = await selectTree(
|
||||
document,
|
||||
"home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar"
|
||||
);
|
||||
sideBar.editMode = !sideBar.editMode;
|
||||
this._editSidebar = sideBar.editMode;
|
||||
if (this._editSidebar) {
|
||||
this._savedSidebar = {
|
||||
panelOrder: sideBar._panelOrder,
|
||||
hiddenPanels: sideBar._hiddenPanels,
|
||||
};
|
||||
} else {
|
||||
sideBar._panelOrder = this._savedSidebar.panelOrder ?? [];
|
||||
sideBar._hiddenPanels = this._savedSidebar.hiddenPanels ?? [];
|
||||
this._savedSidebar = { panelOrder: [], hiddenPanels: [] };
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const level = ["user", "browser", "global"][this._selectedTab];
|
||||
const db = this._dashboards.map((d) => {
|
||||
return { value: d.url_path, label: d.title };
|
||||
});
|
||||
const dashboardSelector = {
|
||||
select: {
|
||||
options: [{ value: "lovelace", label: "lovelace (default)" }, ...db],
|
||||
custom_value: true,
|
||||
},
|
||||
};
|
||||
return html`
|
||||
<ha-card header="Frontend Settings" outlined>
|
||||
<div class="card-content">
|
||||
<ha-alert alert-type="warning">
|
||||
<p>
|
||||
Please note: The settings in this section severely change the way the Home
|
||||
<ha-alert alert-type="warning" title="Please note:">
|
||||
The settings in this section severely change the way the Home
|
||||
Assistant frontend works and looks. It is very easy to forget that
|
||||
you made a setting here when you switch devices or user.
|
||||
</p>
|
||||
<p>
|
||||
Do not report any issues to Home Assistant before clearing
|
||||
<b>EVERY</b> setting here and thouroghly clearing all your browser
|
||||
caches. Failure to do so means you risk wasting a lot of peoples
|
||||
time, and you will be severly and rightfully ridiculed.
|
||||
</p>
|
||||
<p>
|
||||
Do not report any issues to Home Assistant before clearing
|
||||
<b>EVERY</b> setting here and thouroghly clearing all your browser
|
||||
caches. Failure to do so means you risk wasting a lot of peoples
|
||||
time, and you will be severly and rightfully ridiculed.
|
||||
</p>
|
||||
</ha-alert>
|
||||
<p>
|
||||
Global settings are applied for all users and browsers.</br>
|
||||
User settings are applied to the current user and overrides any Global settings.</br>
|
||||
Browser settings are applied for the current browser and overrides any User or Global settings.
|
||||
Settings below are applied by first match. I.e. if a matching User
|
||||
setting exists, it will be applied. Otherwise any matching Browser
|
||||
setting and otherwise the GLOBAL setting if that differs from
|
||||
DEFAULT.
|
||||
</p>
|
||||
<mwc-tab-bar
|
||||
.activeIndex=${this._selectedTab}
|
||||
@MDCTabBar:activated=${this._handleSwitchTab}
|
||||
>
|
||||
<mwc-tab .label=${"User (" + this.hass.user.name + ")"}></mwc-tab>
|
||||
<ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
|
||||
<mwc-tab .label=${"Browser"}></mwc-tab>
|
||||
<ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
|
||||
<mwc-tab .label=${"Global"}></mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
|
||||
${this._render_settings(level)}
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Title template</span>
|
||||
<span slot="description">
|
||||
Jinja template for the browser window/tab title
|
||||
</span>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"titleTemplate"}
|
||||
></browser-mod-settings-table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Favicon template</span>
|
||||
<span slot="description">
|
||||
Jinja template for the browser favicon
|
||||
</span>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"faviconTemplate"}
|
||||
></browser-mod-settings-table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Hide sidebar</span>
|
||||
<span slot="description">
|
||||
Completely remove the sidebar from all panels
|
||||
</span>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"hideSidebar"}
|
||||
.settingSelector=${{ boolean: {}, label: "Hide sidebar" }}
|
||||
></browser-mod-settings-table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Hide header</span>
|
||||
<span slot="description">
|
||||
Completely remove the header from all panels
|
||||
</span>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"hideHeader"}
|
||||
.settingSelector=${{ boolean: {}, label: "Hide header" }}
|
||||
></browser-mod-settings-table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Default dashboard</span>
|
||||
<span slot="description">
|
||||
The dashboard that is showed when navigating to
|
||||
${location.origin}/
|
||||
</span>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"defaultPanel"}
|
||||
.settingSelector=${dashboardSelector}
|
||||
.default=${"lovelace"}
|
||||
></browser-mod-settings-table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Sidebar order</span>
|
||||
<span slot="description">
|
||||
Order and visibility of sidebar items. <br />Click EDIT and set
|
||||
the sidebar up as you want. Then save the settings and finally
|
||||
click RESTORE.
|
||||
</span>
|
||||
<mwc-button @click=${() => this.toggleEditSidebar()}>
|
||||
${this._editSidebar ? "Restore" : "Edit"}
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"sidebarPanelOrder"}
|
||||
.settingSelector=${{
|
||||
plaintext: "Press OK to store the current sidebar order",
|
||||
}}
|
||||
.default=${"lovelace"}
|
||||
></browser-mod-settings-table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Sidebar title</span>
|
||||
<span slot="description">
|
||||
The title at the top of the sidebar
|
||||
</span>
|
||||
</ha-settings-row>
|
||||
<browser-mod-settings-table
|
||||
.hass=${this.hass}
|
||||
.settingKey=${"sidebarTitle"}
|
||||
.settingSelector=${{ text: {} }}
|
||||
></browser-mod-settings-table>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
_render_settings(level) {
|
||||
const global = window.browser_mod.global_settings;
|
||||
const browser = window.browser_mod.browser_settings;
|
||||
const user = window.browser_mod.user_settings;
|
||||
const current = { global, browser, user }[level];
|
||||
|
||||
const DESC_BOOLEAN = (val) =>
|
||||
({ true: "Enabled", false: "Disabled", undefined: "Unset" }[String(val)]);
|
||||
const DESC_SET_UNSET = (val) => (val === undefined ? "Unset" : "Set");
|
||||
const OVERRIDDEN = (key) => {
|
||||
if (level !== "browser" && browser[key] !== undefined)
|
||||
return html`<br />Overridden by browser setting`;
|
||||
if (level === "global" && user[key] !== undefined)
|
||||
return html`<br />Overridden by user setting`;
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="box">
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Favicon template</span>
|
||||
${OVERRIDDEN("faviconTemplate")}
|
||||
<img src="${window.browser_mod._currentFavicon}" class="favicon" />
|
||||
</ha-settings-row>
|
||||
<ha-code-editor
|
||||
.hass=${this.hass}
|
||||
.value=${current.faviconTemplate}
|
||||
@value-changed=${(ev) => {
|
||||
const tpl = ev.detail.value || undefined;
|
||||
window.browser_mod.set_setting("faviconTemplate", tpl, level);
|
||||
}}
|
||||
></ha-code-editor>
|
||||
<ha-settings-row>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting(
|
||||
"faviconTemplate",
|
||||
undefined,
|
||||
level
|
||||
)}
|
||||
>
|
||||
Clear
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Title template</span>
|
||||
${OVERRIDDEN("titleTemplate")}
|
||||
</ha-settings-row>
|
||||
<ha-code-editor
|
||||
.hass=${this.hass}
|
||||
.value=${current.titleTemplate}
|
||||
@value-changed=${(ev) => {
|
||||
const tpl = ev.detail.value || undefined;
|
||||
window.browser_mod.set_setting("titleTemplate", tpl, level);
|
||||
}}
|
||||
></ha-code-editor>
|
||||
<ha-settings-row>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("titleTemplate", undefined, level)}
|
||||
>
|
||||
Clear
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Hide Sidebar</span>
|
||||
<span slot="description">Hide the sidebar and hamburger menu</span>
|
||||
Currently: ${DESC_BOOLEAN(current.hideSidebar)}
|
||||
${OVERRIDDEN("hideSidebar")}
|
||||
</ha-settings-row>
|
||||
<ha-settings-row>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("hideSidebar", true, level)}
|
||||
>
|
||||
Enable
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("hideSidebar", false, level)}
|
||||
>
|
||||
Disable
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("hideSidebar", undefined, level)}
|
||||
>
|
||||
Clear
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Hide Header</span>
|
||||
<span slot="description">Hide the header on all pages</span>
|
||||
Currently: ${DESC_BOOLEAN(current.hideHeader)}
|
||||
${OVERRIDDEN("hideHeader")}
|
||||
</ha-settings-row>
|
||||
<ha-settings-row>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("hideHeader", true, level)}
|
||||
>
|
||||
Enable
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("hideHeader", false, level)}
|
||||
>
|
||||
Disable
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${() =>
|
||||
window.browser_mod.set_setting("hideHeader", undefined, level)}
|
||||
>
|
||||
Clear
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Sidebar order</span>
|
||||
<span slot="description">
|
||||
Order and visibility of sidebar buttons
|
||||
</span>
|
||||
Currently: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
|
||||
${OVERRIDDEN("sidebarPanelOrder")}
|
||||
</ha-settings-row>
|
||||
<ha-settings-row>
|
||||
<span slot="description">
|
||||
Clearing this does NOT restore the original default order.
|
||||
</span>
|
||||
<mwc-button
|
||||
@click=${() => {
|
||||
window.browser_mod.set_setting(
|
||||
"sidebarPanelOrder",
|
||||
localStorage.getItem("sidebarPanelOrder"),
|
||||
level
|
||||
);
|
||||
window.browser_mod.set_setting(
|
||||
"sidebarHiddenPanels",
|
||||
localStorage.getItem("sidebarHiddenPanels"),
|
||||
level
|
||||
);
|
||||
}}
|
||||
>
|
||||
Set
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${() => {
|
||||
window.browser_mod.set_setting(
|
||||
"sidebarPanelOrder",
|
||||
undefined,
|
||||
level
|
||||
);
|
||||
window.browser_mod.set_setting(
|
||||
"sidebarHiddenPanels",
|
||||
undefined,
|
||||
level
|
||||
);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Default dashboard</span>
|
||||
<span slot="description"
|
||||
>The dashboard that's displayed by default</span
|
||||
>
|
||||
Currently: ${DESC_SET_UNSET(current.defaultPanel)}
|
||||
${OVERRIDDEN("defaultPanel")}
|
||||
</ha-settings-row>
|
||||
<ha-settings-row>
|
||||
<span slot="description">
|
||||
Clearing this does NOT restore the original default dashboard.
|
||||
</span>
|
||||
<mwc-button
|
||||
@click=${() => {
|
||||
window.browser_mod.set_setting(
|
||||
"defaultPanel",
|
||||
localStorage.getItem("defaultPanel"),
|
||||
level
|
||||
);
|
||||
}}
|
||||
>
|
||||
Set
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${() => {
|
||||
window.browser_mod.set_setting("defaultPanel", undefined, level);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</mwc-button>
|
||||
</ha-settings-row>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
.box {
|
||||
@@ -280,7 +200,7 @@ class BrowserModFrontendSettingsCard extends LitElement {
|
||||
}
|
||||
.separator {
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
margin: 0 -8px;
|
||||
margin: 16px -16px 0px;
|
||||
}
|
||||
img.favicon {
|
||||
width: 64px;
|
||||
|
||||
@@ -15,12 +15,13 @@ loadConfigDashboard().then(() => {
|
||||
@property() connection;
|
||||
|
||||
firstUpdated() {
|
||||
window.browser_mod.addEventListener("browser-mod-config-update", () =>
|
||||
window.addEventListener("browser-mod-config-update", () =>
|
||||
this.requestUpdate()
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!window.browser_mod) return html``;
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header" fixed>
|
||||
|
||||
Reference in New Issue
Block a user