From 712ddb531be0066c4733fa08f75d9ac42cf01a4c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 3 Apr 2024 16:48:02 +0200 Subject: [PATCH] Make selection bar responsive (#20378) --- .../config/automation/ha-automation-picker.ts | 18 +++++++++++++---- .../config/helpers/ha-config-helpers.ts | 20 ++++++++++++++----- src/panels/config/scene/ha-scene-dashboard.ts | 16 ++++++++++++--- src/panels/config/script/ha-script-picker.ts | 16 ++++++++++++--- 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 28cd56dfc5..2da5c4ec56 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -1,4 +1,5 @@ import { consume } from "@lit-labs/context"; +import { ResizeController } from "@lit-labs/observers/resize-controller"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@material/web/divider/divider"; import { @@ -153,6 +154,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { @query("#overflow-menu") private _overflowMenu!: HaMenu; + private _sizeController = new ResizeController(this, { + callback: (entries) => entries[0]?.contentRect.width, + }); + private _automations = memoizeOne( ( automations: AutomationEntity[], @@ -414,7 +419,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { ${this.hass.localize("ui.panel.config.labels.add_label")} `; - + const labelsInOverflow = + (this._sizeController.value && this._sizeController.value < 700) || + (!this._sizeController.value && this.hass.dockedSidebar === "docked"); return html` ${categoryItems} - ${this.hass.dockedSidebar === "docked" + ${labelsInOverflow ? nothing : html` + this.narrow || labelsInOverflow + ? html`
${this.hass.localize( @@ -1146,6 +1153,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { return [ haStyle, css` + :host { + display: block; + } hass-tabs-subpage-data-table { --data-table-row-height: 60px; } diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index 745fb85572..fa89081415 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -1,4 +1,5 @@ import { consume } from "@lit-labs/context"; +import { ResizeController } from "@lit-labs/observers/resize-controller"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiAlertCircle, @@ -83,12 +84,12 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; import { showAssignCategoryDialog } from "../category/show-dialog-assign-category"; +import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail"; import { configSections } from "../ha-panel-config"; import "../integrations/ha-integration-overflow-menu"; +import { showLabelDetailDialog } from "../labels/show-dialog-label-detail"; import { isHelperDomain } from "./const"; import { showHelperDetailDialog } from "./show-dialog-helper-detail"; -import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail"; -import { showLabelDetailDialog } from "../labels/show-dialog-label-detail"; type HelperItem = { id: string; @@ -163,6 +164,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { @state() private _filteredStateItems?: string[] | null; + private _sizeController = new ResizeController(this, { + callback: (entries) => entries[0]?.contentRect.width, + }); + public hassSubscribe() { return [ subscribeConfigEntries( @@ -478,7 +483,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { ${this.hass.localize("ui.panel.config.labels.add_label")}
`; - + const labelsInOverflow = + (this._sizeController.value && this._sizeController.value < 700) || + (!this._sizeController.value && this.hass.dockedSidebar === "docked"); return html` ${categoryItems} - ${this.hass.dockedSidebar === "docked" + ${labelsInOverflow ? nothing : html` `}` : nothing} - ${this.narrow || this.hass.dockedSidebar === "docked" + ${this.narrow || labelsInOverflow ? html` ${ @@ -958,6 +965,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { return [ haStyle, css` + :host { + display: block; + } hass-tabs-subpage-data-table { --data-table-row-height: 60px; } diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 663d9dc720..ee79904c47 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -1,4 +1,5 @@ import { consume } from "@lit-labs/context"; +import { ResizeController } from "@lit-labs/observers/resize-controller"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiChevronRight, @@ -139,6 +140,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { @consume({ context: fullEntitiesContext, subscribe: true }) _entityReg!: EntityRegistryEntry[]; + private _sizeController = new ResizeController(this, { + callback: (entries) => entries[0]?.contentRect.width, + }); + private _scenes = memoizeOne( ( scenes: SceneEntity[], @@ -417,7 +422,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { ${this.hass.localize("ui.panel.config.labels.add_label")} `; - + const labelsInOverflow = + (this._sizeController.value && this._sizeController.value < 700) || + (!this._sizeController.value && this.hass.dockedSidebar === "docked"); return html` ${categoryItems} - ${this.hass.dockedSidebar === "docked" + ${labelsInOverflow ? nothing : html` `}` : nothing} - ${this.narrow || this.hass.dockedSidebar === "docked" + ${this.narrow || labelsInOverflow ? html` ${ @@ -912,6 +919,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { return [ haStyle, css` + :host { + display: block; + } hass-tabs-subpage-data-table { --data-table-row-height: 60px; } diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index a548613d1a..8e9d5dd566 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -1,4 +1,5 @@ import { consume } from "@lit-labs/context"; +import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiChevronRight, mdiCog, @@ -143,6 +144,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { @consume({ context: fullEntitiesContext, subscribe: true }) _entityReg!: EntityRegistryEntry[]; + private _sizeController = new ResizeController(this, { + callback: (entries) => entries[0]?.contentRect.width, + }); + private _scripts = memoizeOne( ( scripts: ScriptEntity[], @@ -429,7 +434,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { ${this.hass.localize("ui.panel.config.labels.add_label")} `; - + const labelsInOverflow = + (this._sizeController.value && this._sizeController.value < 700) || + (!this._sizeController.value && this.hass.dockedSidebar === "docked"); return html` ${categoryItems} - ${this.hass.dockedSidebar === "docked" + ${labelsInOverflow ? nothing : html` `}` : nothing} - ${this.narrow || this.hass.dockedSidebar === "docked" + ${this.narrow || labelsInOverflow ? html` ${ @@ -1028,6 +1035,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { return [ haStyle, css` + :host { + display: block; + } hass-tabs-subpage-data-table { --data-table-row-height: 60px; }