diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index b42c15fb6b..4584f2e9b7 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -9,7 +9,12 @@ import { } from "../../../../../data/zha"; import "../../../../../layouts/hass-tabs-subpage"; import type { HomeAssistant, Route } from "../../../../../types"; -import { Network, Edge, Node, EdgeOptions } from "vis-network/peer"; +import { + Network, + Edge, + Node, + EdgeOptions, +} from "vis-network/peer/esm/vis-network"; import "../../../../../common/search/search-input"; import "../../../../../components/device/ha-device-picker"; import "../../../../../components/ha-button-menu"; @@ -21,6 +26,7 @@ import "../../../../../components/ha-checkbox"; import type { HaCheckbox } from "../../../../../components/ha-checkbox"; import { zhaTabs } from "./zha-config-dashboard"; import { customElement, property, query, state } from "lit/decorators"; +import "../../../../../components/ha-formfield"; @customElement("zha-network-visualization-page") export class ZHANetworkVisualizationPage extends LitElement { @@ -28,7 +34,7 @@ export class ZHANetworkVisualizationPage extends LitElement { @property({ attribute: false }) public route!: Route; - @property({ type: Boolean }) public narrow!: boolean; + @property({ type: Boolean, reflect: true }) public narrow!: boolean; @property({ type: Boolean }) public isWide!: boolean; @@ -67,8 +73,6 @@ export class ZHANetworkVisualizationPage extends LitElement { {}, { autoResize: true, - height: window.innerHeight + "px", - width: window.innerWidth + "px", layout: { improvedLayout: true, }, @@ -135,17 +139,35 @@ export class ZHANetworkVisualizationPage extends LitElement { "ui.panel.config.zha.visualization.header" )} > -
- - + ${this.narrow + ? html` +
+ + +
+ ` + : ""} +
+ ${!this.narrow + ? html`` + : ""} this._filterDevices(device)} @value-changed=${this._onZoomToDevice} > - ${this.hass!.localize("ui.panel.config.zha.visualization.auto_zoom")} - ${this.hass!.localize( - "ui.panel.config.zha.visualization.refresh_topology" - )} +
+ + + + + + ${this.hass!.localize( + "ui.panel.config.zha.visualization.refresh_topology" + )} + +
@@ -352,30 +382,23 @@ export class ZHANetworkVisualizationPage extends LitElement { return [ css` .header { - font-family: var(--paper-font-display1_-_font-family); - -webkit-font-smoothing: var( - --paper-font-display1_-_-webkit-font-smoothing - ); - font-size: var(--paper-font-display1_-_font-size); - font-weight: var(--paper-font-display1_-_font-weight); - letter-spacing: var(--paper-font-display1_-_letter-spacing); - line-height: var(--paper-font-display1_-_line-height); - opacity: var(--dark-primary-opacity); - } - - .table-header { - border-bottom: 1px solid --divider-color; - padding: 0 16px; + border-bottom: 1px solid var(--divider-color); + padding: 0 8px; display: flex; align-items: center; - flex-direction: row; + justify-content: space-between; height: var(--header-height); + box-sizing: border-box; } - :host([narrow]) .table-header { + .header > * { + padding: 0 8px; + } + + :host([narrow]) .header { flex-direction: column; align-items: stretch; - height: var(--header-height) * 3; + height: var(--header-height) * 2; } .search-toolbar { @@ -386,34 +409,34 @@ export class ZHANetworkVisualizationPage extends LitElement { } search-input { - position: relative; - top: 2px; flex: 1; } - :host(:not([narrow])) search-input { - margin: 5px; - } - search-input.header { - left: -8px; + display: block; + position: relative; + top: -2px; + color: var(--secondary-text-color); } ha-device-picker { flex: 1; + position: relative; + top: -4px; } - :host(:not([narrow])) ha-device-picker { - margin: 5px; + .controls { + display: flex; + align-items: center; + justify-content: space-between; } - mwc-button { - font-weight: 500; - color: var(--primary-color); + #visualization { + height: calc(100% - var(--header-height)); + width: 100%; } - - :host(:not([narrow])) mwc-button { - margin: 5px; + :host([narrow]) #visualization { + height: calc(100% - (var(--header-height) * 2)); } `, ];