Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Filter fixes #11664

Merged
merged 4 commits into from
Feb 11, 2022
Merged

Filter fixes #11664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
584f265
Filter fixes
bramkragten Feb 11, 2022
1796cb9
prevent focus of input
bramkragten Feb 11, 2022
fcb08e3
Update step-flow-pick-handler.ts
bramkragten Feb 11, 2022
aa9a5d9
Make it clickable
bramkragten Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/components/ha-button-related-filter-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { mdiFilterVariant } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name";
import { computeDeviceName } from "../data/device_registry";
import { findRelated, RelatedResult } from "../data/search";
Expand Down Expand Up @@ -65,6 +66,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
.fullwidth=${this.narrow}
.corner=${this.corner}
@closed=${this._onClosed}
@input=${stopPropagation}
>
<ha-area-picker
.label=${this.hass.localize(
Expand All @@ -75,6 +77,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
no-add
.excludeDomains=${this.excludeDomains}
@value-changed=${this._areaPicked}
@click=${this._preventDefault}
></ha-area-picker>
<ha-device-picker
.label=${this.hass.localize(
Expand All @@ -84,6 +87,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
.value=${this.value?.device}
.excludeDomains=${this.excludeDomains}
@value-changed=${this._devicePicked}
@click=${this._preventDefault}
></ha-device-picker>
<ha-entity-picker
.label=${this.hass.localize(
Expand All @@ -93,6 +97,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
.value=${this.value?.entity}
.excludeDomains=${this.excludeDomains}
@value-changed=${this._entityPicked}
@click=${this._preventDefault}
></ha-entity-picker>
</mwc-menu-surface>
`;
Expand All @@ -110,7 +115,12 @@ export class HaRelatedFilterButtonMenu extends LitElement {
this._open = false;
}

private _preventDefault(ev) {
ev.preventDefault();
}

private async _entityPicked(ev: CustomEvent) {
ev.stopPropagation();
const entityId = ev.detail.value;
if (!entityId) {
fireEvent(this, "related-changed", { value: undefined });
Expand All @@ -130,6 +140,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
}

private async _devicePicked(ev: CustomEvent) {
ev.stopPropagation();
const deviceId = ev.detail.value;
if (!deviceId) {
fireEvent(this, "related-changed", { value: undefined });
Expand All @@ -153,6 +164,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
}

private async _areaPicked(ev: CustomEvent) {
ev.stopPropagation();
const areaId = ev.detail.value;
if (!areaId) {
fireEvent(this, "related-changed", { value: undefined });
Expand All @@ -176,7 +188,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
:host {
display: inline-block;
position: relative;
--mdc-menu-min-width: 200px;
--mdc-menu-min-width: 250px;
}
ha-area-picker,
ha-device-picker,
Expand All @@ -186,6 +198,12 @@ export class HaRelatedFilterButtonMenu extends LitElement {
padding: 4px 16px;
box-sizing: border-box;
}
ha-area-picker {
padding-top: 16px;
}
ha-entity-picker {
padding-bottom: 16px;
}
:host([narrow]) ha-area-picker,
:host([narrow]) ha-device-picker,
:host([narrow]) ha-entity-picker {
Expand Down
60 changes: 28 additions & 32 deletions src/dialogs/config-flow/step-flow-pick-handler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import Fuse from "fuse.js";
import {
css,
CSSResultGroup,
html,
LitElement,
TemplateResult,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
Expand Down Expand Up @@ -102,8 +103,7 @@ class StepFlowPickHandler extends LitElement {
.label=${this.hass.localize("ui.panel.config.integrations.search")}
@keypress=${this._maybeSubmit}
></search-input>
<div
class="container"
<mwc-list
style=${styleMap({
width: `${this._width}px`,
height: `${this._height}px`,
Expand All @@ -112,7 +112,7 @@ class StepFlowPickHandler extends LitElement {
${addDeviceRows.length
? html`
${addDeviceRows.map((handler) => this._renderRow(handler))}
<div class="divider"></div>
<li divider padded class="divider" role="separator"></li>
`
: ""}
${handlers.length
Expand All @@ -139,7 +139,7 @@ class StepFlowPickHandler extends LitElement {
>.
</p>
`}
</div>
</mwc-list>
`;
}

Expand Down Expand Up @@ -169,10 +169,26 @@ class StepFlowPickHandler extends LitElement {
}

public willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (this._filter === undefined && this.initialFilter !== undefined) {
this._filter = this.initialFilter;
}
super.willUpdate(changedProps);
if (this.initialFilter !== undefined && this._filter === "") {
this.initialFilter = undefined;
this._filter = "";
this._width = undefined;
this._height = undefined;
} else if (
this.hasUpdated &&
changedProps.has("_filter") &&
(!this._width || !this._height)
) {
// Store the width and height so that when we search, box doesn't jump
const boundingRect =
this.shadowRoot!.querySelector("mwc-list")!.getBoundingClientRect();
this._width = boundingRect.width;
this._height = boundingRect.height;
}
}

protected firstUpdated(changedProps) {
Expand All @@ -183,21 +199,6 @@ class StepFlowPickHandler extends LitElement {
);
}

protected updated(changedProps) {
super.updated(changedProps);
if (!changedProps.has("handlers")) {
return;
}
// Wait until list item initialized
const firstListItem = this.shadowRoot!.querySelector("mwc-list-item")!;
firstListItem.updateComplete.then(() => {
// Store the width and height so that when we search, box doesn't jump
const div = this.shadowRoot!.querySelector("div.container")!;
this._width = div.clientWidth;
this._height = div.clientHeight;
});
}

private _getHandlers() {
return this._filterHandlers(
this.handlers,
Expand Down Expand Up @@ -263,31 +264,26 @@ class StepFlowPickHandler extends LitElement {
}
search-input {
display: block;
margin-top: 8px;
}
.divider {
margin: 8px 0;
border-top: 1px solid var(--divider-color);
margin: 16px 16px 0;
}
ha-icon-next {
margin-right: 8px;
}
div {
mwc-list {
overflow: auto;
max-height: 600px;
}
.divider {
border-bottom-color: var(--divider-color);
}
h2 {
padding-right: 66px;
}
@media all and (max-height: 900px) {
div {
mwc-list {
max-height: calc(100vh - 134px);
}
}
paper-icon-item {
cursor: pointer;
margin-bottom: 4px;
}
p {
text-align: center;
padding: 16px;
Expand Down
4 changes: 3 additions & 1 deletion src/dialogs/more-info/ha-more-info-dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,9 @@ export class MoreInfoDialog extends LitElement {
flex-shrink: 0;
display: block;
}

.content {
outline: none;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-header-bar {
--mdc-theme-primary: var(--app-header-background-color);
Expand Down
21 changes: 16 additions & 5 deletions src/layouts/hass-tabs-subpage-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,11 @@ export class HaTabsSubpageDataTable extends LitElement {
this.hass.localize("ui.components.data-table.search")}
>
${!this.narrow
? html`<div class="filters" slot="suffix">
? html`<div
class="filters"
slot="suffix"
@click=${this._preventDefault}
>
${filterInfo
? html`<div class="active-filters">
${filterInfo}
Expand Down Expand Up @@ -194,10 +198,10 @@ export class HaTabsSubpageDataTable extends LitElement {
<div slot="toolbar-icon">
${this.narrow
? html`<div class="filter-menu">
<slot name="filter-menu"></slot>${this.numHidden ||
this.activeFilters
${this.numHidden || this.activeFilters
? html`<span class="badge">${this.numHidden || "!"}</span>`
: ""}
<slot name="filter-menu"></slot>
</div>`
: ""}<slot name="toolbar-icon"></slot>
</div>
Expand Down Expand Up @@ -238,6 +242,10 @@ export class HaTabsSubpageDataTable extends LitElement {
`;
}

private _preventDefault(ev) {
ev.preventDefault();
}

private _handleSearchChange(ev: CustomEvent) {
if (this.filter === ev.detail.value) {
return;
Expand Down Expand Up @@ -292,12 +300,14 @@ export class HaTabsSubpageDataTable extends LitElement {
--mdc-ripple-color: transparant;
}
.filters {
--mdc-text-field-fill-color: initial;
--mdc-text-field-idle-line-color: initial;
--mdc-text-field-fill-color: var(--input-fill-color);
--mdc-text-field-idle-line-color: var(--input-idle-line-color);
--mdc-shape-small: 4px;
--text-field-overflow: initial;
display: flex;
justify-content: flex-end;
margin-right: 8px;
color: var(--primary-text-color);
}
.active-filters {
color: var(--primary-text-color);
Expand All @@ -308,6 +318,7 @@ export class HaTabsSubpageDataTable extends LitElement {
margin-left: 4px;
font-size: 14px;
width: max-content;
cursor: initial;
}
.active-filters ha-svg-icon {
color: var(--primary-color);
Expand Down
21 changes: 17 additions & 4 deletions src/panels/config/integrations/ha-config-integrations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,10 +300,14 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
const filterMenu = html`<div
slot=${ifDefined(this.narrow ? "toolbar-icon" : "suffix")}
>
${!this._showDisabled && this.narrow && disabledCount
? html`<span class="badge">${disabledCount}</span>`
: ""}
<ha-button-menu
corner="BOTTOM_START"
multi
@action=${this._handleMenuAction}
@click=${this._preventDefault}
>
<ha-icon-button
slot="trigger"
Expand All @@ -322,9 +326,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
)}
</ha-check-list-item>
</ha-button-menu>
${!this._showDisabled && this.narrow && disabledCount
? html`<span class="badge">${disabledCount}</span>`
: ""}
</div>`;

return html`
Expand Down Expand Up @@ -362,7 +363,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
)}
>
${!this._showDisabled && disabledCount
? html`<div class="active-filters" slot="suffix">
? html`<div
class="active-filters"
slot="suffix"
@click=${this._preventDefault}
>
${this.hass.localize(
"ui.panel.config.integrations.disable.disabled_integrations",
{ number: disabledCount }
Expand Down Expand Up @@ -507,6 +512,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
`;
}

private _preventDefault(ev) {
ev.preventDefault();
}

private _loadConfigEntries() {
getConfigEntries(this.hass).then((configEntries) => {
this._configEntries = configEntries
Expand Down Expand Up @@ -724,6 +733,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
padding: 2px 2px 2px 8px;
font-size: 14px;
width: max-content;
cursor: initial;
}
.active-filters mwc-button {
margin-left: 8px;
Expand Down Expand Up @@ -754,6 +764,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
top: 8px;
font-size: 0.65em;
}
ha-button-menu {
color: var(--primary-text-color);
}
`,
];
}
Expand Down