Make selection bar responsive (#20378)

This commit is contained in:
Bram Kragten 2024-04-03 16:48:02 +02:00 committed by GitHub
parent d52afc3f71
commit 712ddb531b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 55 additions and 15 deletions

View File

@ -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")}
</div></ha-menu-item
>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@ -538,7 +545,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
</ha-assist-chip>
${categoryItems}
</ha-button-menu-new>
${this.hass.dockedSidebar === "docked"
${labelsInOverflow
? nothing
: html`<ha-button-menu-new slot="selection-bar">
<ha-assist-chip
@ -600,8 +607,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
: nothing
}
${
this.narrow || this.hass.dockedSidebar === "docked"
? html` <ha-sub-menu>
this.narrow || labelsInOverflow
? html`<ha-sub-menu>
<ha-menu-item slot="item">
<div slot="headline">
${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;
}

View File

@ -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")}
</div>
</ha-menu-item>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@ -570,7 +577,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
</ha-assist-chip>
${categoryItems}
</ha-button-menu-new>
${this.hass.dockedSidebar === "docked"
${labelsInOverflow
? nothing
: html`<ha-button-menu-new slot="selection-bar">
<ha-assist-chip
@ -587,7 +594,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
${labelItems}
</ha-button-menu-new>`}`
: nothing}
${this.narrow || this.hass.dockedSidebar === "docked"
${this.narrow || labelsInOverflow
? html`
<ha-button-menu-new has-overflow slot="selection-bar">
${
@ -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;
}

View File

@ -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")}
</div></ha-menu-item
>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@ -525,7 +532,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
</ha-assist-chip>
${categoryItems}
</ha-button-menu-new>
${this.hass.dockedSidebar === "docked"
${labelsInOverflow
? nothing
: html`<ha-button-menu-new slot="selection-bar">
<ha-assist-chip
@ -542,7 +549,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
${labelItems}
</ha-button-menu-new>`}`
: nothing}
${this.narrow || this.hass.dockedSidebar === "docked"
${this.narrow || labelsInOverflow
? html`
<ha-button-menu-new has-overflow slot="selection-bar">
${
@ -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;
}

View File

@ -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")}
</div></ha-menu-item
>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@ -551,7 +558,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
</ha-assist-chip>
${categoryItems}
</ha-button-menu-new>
${this.hass.dockedSidebar === "docked"
${labelsInOverflow
? nothing
: html`<ha-button-menu-new slot="selection-bar">
<ha-assist-chip
@ -568,7 +575,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
${labelItems}
</ha-button-menu-new>`}`
: nothing}
${this.narrow || this.hass.dockedSidebar === "docked"
${this.narrow || labelsInOverflow
? html`
<ha-button-menu-new has-overflow slot="selection-bar">
${
@ -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;
}