mirror of
https://github.com/home-assistant/frontend.git
synced 2026-01-09 08:47:27 +00:00
Compare commits
4 Commits
Event-Ha-f
...
sidebar-de
| Author | SHA1 | Date | |
|---|---|---|---|
|
d4bdfeea81 | ||
|
|
d4ed377277 | ||
|
|
db7cac5782 | ||
|
|
099fa706a0 |
@@ -87,7 +87,7 @@ export class HaForm extends LitElement implements HaFormElement {
|
||||
.value=${getValue(this.data, item)}
|
||||
.label=${this._computeLabel(item)}
|
||||
.disabled=${this.disabled}
|
||||
.required=${item.required}
|
||||
.required=${item.required || false}
|
||||
></ha-selector>`
|
||||
: dynamicElement(`ha-form-${item.type}`, {
|
||||
schema: item,
|
||||
|
||||
@@ -18,6 +18,7 @@ import { toggleAttribute } from "../common/dom/toggle_attribute";
|
||||
import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
|
||||
import type { HomeAssistant, Route } from "../types";
|
||||
import "./partial-panel-resolver";
|
||||
import "../panels/developer-tools/ha-panel-developer-tools";
|
||||
|
||||
const NON_SWIPABLE_PANELS = ["map"];
|
||||
|
||||
@@ -45,6 +46,8 @@ export class HomeAssistantMain extends LitElement {
|
||||
|
||||
@property({ type: Boolean }) public narrow!: boolean;
|
||||
|
||||
@property({ type: Boolean }) public showDevToolsDrawer?: boolean;
|
||||
|
||||
@state() private _sidebarEditMode = false;
|
||||
|
||||
@state() private _externalSidebar = false;
|
||||
@@ -80,7 +83,7 @@ export class HomeAssistantMain extends LitElement {
|
||||
responsive-width="0"
|
||||
>
|
||||
<app-drawer
|
||||
id="drawer"
|
||||
id="sidebarDrawer"
|
||||
align="start"
|
||||
slot="drawer"
|
||||
.disableSwipe=${disableSwipe}
|
||||
@@ -98,6 +101,18 @@ export class HomeAssistantMain extends LitElement {
|
||||
></ha-sidebar>
|
||||
</app-drawer>
|
||||
|
||||
<app-drawer
|
||||
id="devToolsDrawer"
|
||||
align="end"
|
||||
slot="drawer"
|
||||
.disableSwipe=${true}
|
||||
.swipeOpen=${false}
|
||||
.persistent=${true}
|
||||
.opened=${this.showDevToolsDrawer}
|
||||
>
|
||||
<div>test</div>
|
||||
</app-drawer>
|
||||
|
||||
<partial-panel-resolver
|
||||
.narrow=${this.narrow}
|
||||
.hass=${hass}
|
||||
@@ -125,7 +140,7 @@ export class HomeAssistantMain extends LitElement {
|
||||
|
||||
if (this._sidebarEditMode) {
|
||||
if (this._sidebarNarrow) {
|
||||
this.drawer.open();
|
||||
this.sidebarDrawer.open();
|
||||
} else {
|
||||
fireEvent(this, "hass-dock-sidebar", {
|
||||
dock: "docked",
|
||||
@@ -147,10 +162,10 @@ export class HomeAssistantMain extends LitElement {
|
||||
return;
|
||||
}
|
||||
if (this._sidebarNarrow) {
|
||||
if (this.drawer.opened) {
|
||||
this.drawer.close();
|
||||
if (this.sidebarDrawer.opened) {
|
||||
this.sidebarDrawer.close();
|
||||
} else {
|
||||
this.drawer.open();
|
||||
this.sidebarDrawer.open();
|
||||
}
|
||||
} else {
|
||||
fireEvent(this, "hass-dock-sidebar", {
|
||||
@@ -177,14 +192,14 @@ export class HomeAssistantMain extends LitElement {
|
||||
);
|
||||
|
||||
if (changedProps.has("route") && this._sidebarNarrow) {
|
||||
this.drawer.close();
|
||||
this.sidebarDrawer.close();
|
||||
}
|
||||
|
||||
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
|
||||
|
||||
// Make app-drawer adjust to a potential LTR/RTL change
|
||||
if (oldHass && oldHass.language !== this.hass!.language) {
|
||||
this.drawer._resetPosition();
|
||||
this.sidebarDrawer._resetPosition();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,8 +207,8 @@ export class HomeAssistantMain extends LitElement {
|
||||
return this.narrow || this.hass.dockedSidebar === "always_hidden";
|
||||
}
|
||||
|
||||
private get drawer(): AppDrawerElement {
|
||||
return this.shadowRoot!.querySelector("app-drawer")!;
|
||||
private get sidebarDrawer(): AppDrawerElement {
|
||||
return this.shadowRoot!.querySelector("#sidebarDrawer")!;
|
||||
}
|
||||
|
||||
private get appLayout(): AppDrawerLayoutElement {
|
||||
|
||||
@@ -5,7 +5,7 @@ import { navigate } from "../common/navigate";
|
||||
import { getStorageDefaultPanelUrlPath } from "../data/panel";
|
||||
import "../resources/custom-card-support";
|
||||
import { HassElement } from "../state/hass-element";
|
||||
import QuickBarMixin from "../state/quick-bar-mixin";
|
||||
import ShortcutsMixin from "../state/shortcuts-mixin";
|
||||
import { HomeAssistant, Route } from "../types";
|
||||
import { storeState } from "../util/ha-pref-storage";
|
||||
import {
|
||||
@@ -29,7 +29,7 @@ const panelUrl = (path: string) => {
|
||||
};
|
||||
|
||||
@customElement("home-assistant")
|
||||
export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
|
||||
export class HomeAssistantAppEl extends ShortcutsMixin(HassElement) {
|
||||
@state() private _route: Route;
|
||||
|
||||
private _panelUrl: string;
|
||||
@@ -85,6 +85,16 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
|
||||
storeState(this.hass!);
|
||||
});
|
||||
|
||||
this.addEventListener("dev-tools-toggle", () => {
|
||||
const main = this.shadowRoot?.querySelector("home-assistant-main");
|
||||
|
||||
if (!main) {
|
||||
return;
|
||||
}
|
||||
|
||||
main.showDevToolsDrawer = !main.showDevToolsDrawer;
|
||||
});
|
||||
|
||||
// Navigation
|
||||
const updateRoute = (path = curPath()) => {
|
||||
if (this._route && path === this._route.path) {
|
||||
|
||||
@@ -276,137 +276,153 @@ class HUIRoot extends LitElement {
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
${this.narrow &&
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<mwc-list-item
|
||||
${this._showButtonMenu
|
||||
? html`
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this._showVoiceCommandDialog}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiMicrophone}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this._yamlMode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.common.refresh"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this._handleRefresh}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize("ui.common.refresh")}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiRefresh}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this._handleUnusedEntities}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiShape}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${(this.hass.panels.lovelace?.config as LovelacePanelConfig)
|
||||
?.mode === "yaml"
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
@request-selected=${this._handleReloadResources}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiRefresh}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this.hass!.user?.is_admin && !this.hass!.config.safe_mode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
@request-selected=${this._handleEnableEditMode}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiPencil}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this._editMode
|
||||
? html`
|
||||
<a
|
||||
href=${documentationUrl(this.hass, "/lovelace/")}
|
||||
rel="noreferrer"
|
||||
class="menu-link"
|
||||
target="_blank"
|
||||
>
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiHelp}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
</a>
|
||||
`
|
||||
: ""}
|
||||
</ha-button-menu>
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
${this.narrow &&
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<mwc-list-item
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this
|
||||
._showVoiceCommandDialog}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiMicrophone}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this._yamlMode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.common.refresh"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this._handleRefresh}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.common.refresh"
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiRefresh}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this
|
||||
._handleUnusedEntities}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiShape}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${(
|
||||
this.hass.panels.lovelace
|
||||
?.config as LovelacePanelConfig
|
||||
)?.mode === "yaml"
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
@request-selected=${this
|
||||
._handleReloadResources}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiRefresh}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this.hass!.user?.is_admin &&
|
||||
!this.hass!.config.safe_mode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
@request-selected=${this
|
||||
._handleEnableEditMode}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiPencil}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this._editMode
|
||||
? html`
|
||||
<a
|
||||
href=${documentationUrl(
|
||||
this.hass,
|
||||
"/lovelace/"
|
||||
)}
|
||||
rel="noreferrer"
|
||||
class="menu-link"
|
||||
target="_blank"
|
||||
>
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiHelp}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
</a>
|
||||
`
|
||||
: ""}
|
||||
</ha-button-menu>
|
||||
`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
`}
|
||||
${this._editMode
|
||||
@@ -621,6 +637,17 @@ class HUIRoot extends LitElement {
|
||||
return this.shadowRoot!.getElementById("view") as HTMLDivElement;
|
||||
}
|
||||
|
||||
private get _showButtonMenu(): boolean {
|
||||
return (
|
||||
(this.narrow && this._conversation(this.hass.config.components)) ||
|
||||
this._editMode ||
|
||||
(this.hass!.user?.is_admin && !this.hass!.config.safe_mode) ||
|
||||
(this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
|
||||
"yaml" ||
|
||||
this._yamlMode
|
||||
);
|
||||
}
|
||||
|
||||
private _handleRefresh(ev: CustomEvent<RequestSelectedDetail>): void {
|
||||
if (!shouldHandleRequestSelectedEvent(ev)) {
|
||||
return;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { PropertyValues } from "lit";
|
||||
import tinykeys from "tinykeys";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import {
|
||||
QuickBarParams,
|
||||
showQuickBar,
|
||||
@@ -12,6 +13,7 @@ declare global {
|
||||
interface HASSDomEvents {
|
||||
"hass-quick-bar": QuickBarParams;
|
||||
"hass-enable-shortcuts": HomeAssistant["enableShortcuts"];
|
||||
"dev-tools-toggle": never;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +34,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
|
||||
tinykeys(window, {
|
||||
e: (ev) => this._showQuickBar(ev),
|
||||
c: (ev) => this._showQuickBar(ev, true),
|
||||
d: () => this._toggleDeveloperToolsSidebar(),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -51,6 +54,13 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
|
||||
);
|
||||
}
|
||||
|
||||
private _toggleDeveloperToolsSidebar(): void {
|
||||
localStorage.showDeveloperTools =
|
||||
localStorage.showDeveloperTools !== "true";
|
||||
fireEvent(this, "dev-tools-toggle");
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private _canOverrideAlphanumericInput(e: KeyboardEvent) {
|
||||
const el = e.composedPath()[0] as any;
|
||||
|
||||
Reference in New Issue
Block a user