jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 22:07:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generalize filtering in datatable sub page (#8734)

Browse Source
This commit is contained in:
Bram Kragten 2021-03-28 18:29:55 +02:00 committed by GitHub
parent 1865e0661f
commit 0393970a80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 286 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -1,4 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiFilterVariant } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,
@ -10,7 +11,7 @@ import {
query,
TemplateResult,
} from "lit-element";
import { navigate } from "../common/navigate";
import { fireEvent } from "../common/dom/fire_event";
import { computeRTLDirection } from "../common/util/compute_rtl";
import "../components/data-table/ha-data-table";
import type {
@ -22,6 +23,14 @@ import type { HomeAssistant, Route } from "../types";
import "./hass-tabs-subpage";
import type { PageNavigation } from "./hass-tabs-subpage";
declare global {
// for fire event
interface HASSDomEvents {
"search-changed": { value: string };
"clear-filter": undefined;
}
}
@customElement("hass-tabs-subpage-data-table")
export class HaTabsSubpageDataTable extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -64,7 +73,7 @@ export class HaTabsSubpageDataTable extends LitElement {
* Add an extra row at the bottom of the data table
* @type {TemplateResult}
*/
@property({ attribute: false }) public appendRow?;
@property({ attribute: false }) public appendRow?: TemplateResult;
/**
* Field with a unique id per entry in data.
@ -78,12 +87,26 @@ export class HaTabsSubpageDataTable extends LitElement {
*/
@property({ type: String }) public filter = "";
@property() public searchLabel?: string;
/**
* List of strings that show what the data is currently filtered by.
* @type {Array}
*/
@property({ type: Array }) public activeFilters?;
/**
* Text to how how many items are hidden.
* @type {String}
*/
@property() public hiddenLabel?: string;
/**
* How many items are hidden because of active filters.
* @type {Number}
*/
@property({ type: Number }) public numHidden = 0;
/**
* What path to use when the back button is pressed.
* @type {String}
@ -118,6 +141,47 @@ export class HaTabsSubpageDataTable extends LitElement {
}
protected render(): TemplateResult {
const hiddenLabel = this.numHidden
? this.hiddenLabel ||
this.hass.localize(
"ui.components.data-table.hidden",
"number",
this.numHidden
) ||
this.numHidden
: undefined;
const filterInfo = this.activeFilters
? html`${this.hass.localize("ui.components.data-table.filtering_by")}
${this.activeFilters.join(", ")}
${hiddenLabel ? `(${hiddenLabel})` : ""}`
: hiddenLabel;
const headerToolbar = html`<search-input
.filter=${this.filter}
no-label-float
no-underline
@value-changed=${this._handleSearchChange}
.label=${this.searchLabel ||
this.hass.localize("ui.components.data-table.search")}
>
</search-input
>${filterInfo
? html`<div class="active-filters">
${this.narrow
? html`<div>
<ha-svg-icon .path="${mdiFilterVariant}"></ha-svg-icon>
<paper-tooltip animation-delay="0" position="left">
${filterInfo}
</paper-tooltip>
</div>`
: filterInfo}
<mwc-button @click=${this._clearFilter}>
${this.hass.localize("ui.components.data-table.clear")}
</mwc-button>
</div>`
: ""}<slot name="filter-menu"></slot>`;
return html`
<hass-tabs-subpage
.hass=${this.hass}
@ -134,34 +198,7 @@ export class HaTabsSubpageDataTable extends LitElement {
<div slot="header">
<slot name="header">
<div class="search-toolbar">
<search-input
.filter=${this.filter}
class="header"
no-label-float
no-underline
@value-changed=${this._handleSearchChange}
.label=${this.hass.localize(
"ui.components.data-table.search"
)}
></search-input>
${this.activeFilters
? html`<div class="active-filters">
<div>
<ha-icon icon="hass:filter-variant"></ha-icon>
<paper-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
)}
${this.activeFilters.join(", ")}
</paper-tooltip>
</div>
<mwc-button @click=${this._clearFilter}
>${this.hass.localize(
"ui.panel.config.filtering.clear"
)}</mwc-button
>
</div>`
: ""}
${headerToolbar}
</div>
</slot>
</div>
@ -184,29 +221,7 @@ export class HaTabsSubpageDataTable extends LitElement {
<div slot="header">
<slot name="header">
<div class="table-header">
<search-input
.filter=${this.filter}
no-label-float
no-underline
@value-changed=${this._handleSearchChange}
.label=${this.hass.localize(
"ui.components.data-table.search"
)}
>
</search-input>
${this.activeFilters
? html`<div class="active-filters">
${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
)}
${this.activeFilters.join(", ")}
<mwc-button @click=${this._clearFilter}
>${this.hass.localize(
"ui.panel.config.filtering.clear"
)}</mwc-button
>
</div>`
: ""}
${headerToolbar}
</div>
</slot>
</div>
@ -220,10 +235,11 @@ export class HaTabsSubpageDataTable extends LitElement {
private _handleSearchChange(ev: CustomEvent) {
this.filter = ev.detail.value;
fireEvent(this, "search-changed", { value: this.filter });
}
private _clearFilter() {
navigate(this, window.location.pathname);
fireEvent(this, "clear-filter");
}
static get styles(): CSSResult {
@ -247,7 +263,6 @@ export class HaTabsSubpageDataTable extends LitElement {
display: flex;
align-items: center;
color: var(--secondary-text-color);
padding: 0 16px;
}
search-input {
position: relative;
@ -283,10 +298,6 @@ export class HaTabsSubpageDataTable extends LitElement {
left: 0;
content: "";
}
.search-toolbar .active-filters {
top: -8px;
right: -16px;
}
`;
}
}

6
src/layouts/hass-tabs-subpage.ts
View File

@ -155,7 +155,7 @@ class HassTabsSubpage extends LitElement {
></ha-icon-button-arrow-prev>
`}
${this.narrow
? html` <div class="main-title"><slot name="header"></slot></div> `
? html`<div class="main-title"><slot name="header"></slot></div>`
: ""}
${showTabs
? html`
@ -270,9 +270,7 @@ class HassTabsSubpage extends LitElement {
.main-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
max-height: 58px;
max-height: var(--header-height);
line-height: 20px;
}

265
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -12,7 +12,6 @@ import {
property,
TemplateResult,
} from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import memoizeOne from "memoize-one";
import { HASSDomEvent } from "../../../common/dom/fire_event";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@ -357,110 +356,6 @@ export class HaConfigDeviceDashboard extends LitElement {
this.hass.localize
);
const headerToolbar = html`
<search-input
no-label-float
no-underline
@value-changed=${this._handleSearchChange}
.filter=${this._filter}
.label=${this.hass.localize("ui.panel.config.devices.picker.search")}
></search-input
>${activeFilters
? html`<div class="active-filters">
${this.narrow
? html` <div>
<ha-icon icon="hass:filter-variant"></ha-icon>
<paper-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
)}
${activeFilters.join(", ")}
${this._numHiddenDevices
? "(" +
this.hass.localize(
"ui.panel.config.devices.picker.filter.hidden_devices",
"number",
this._numHiddenDevices
) +
")"
: ""}
</paper-tooltip>
</div>`
: `${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
)} ${activeFilters.join(", ")}
${
this._numHiddenDevices
? "(" +
this.hass.localize(
"ui.panel.config.devices.picker.filter.hidden_devices",
"number",
this._numHiddenDevices
) +
")"
: ""
}
`}
<mwc-button @click=${this._clearFilter}
>${this.hass.localize(
"ui.panel.config.filtering.clear"
)}</mwc-button
>
</div>`
: ""}
${this._numHiddenDevices && !activeFilters
? html`<div class="active-filters">
${this.narrow
? html` <div>
<ha-icon icon="hass:filter-variant"></ha-icon>
<paper-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.devices.picker.filter.hidden_devices",
"number",
this._numHiddenDevices
)}
</paper-tooltip>
</div>`
: `${this.hass.localize(
"ui.panel.config.devices.picker.filter.hidden_devices",
"number",
this._numHiddenDevices
)}`}
<mwc-button @click=${this._showAll}
>${this.hass.localize(
"ui.panel.config.devices.picker.filter.show_all"
)}</mwc-button
>
</div>`
: ""}
<ha-button-menu corner="BOTTOM_START" multi>
<mwc-icon-button
slot="trigger"
.label=${this.hass!.localize(
"ui.panel.config.devices.picker.filter.filter"
)}
.title=${this.hass!.localize(
"ui.panel.config.devices.picker.filter.filter"
)}
>
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@request-selected="${this._showDisabledChanged}"
graphic="control"
.selected=${this._showDisabled}
>
<ha-checkbox
slot="graphic"
.checked=${this._showDisabled}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.devices.picker.filter.show_disabled"
)}
</mwc-list-item>
</ha-button-menu>
`;
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@ -470,9 +365,21 @@ export class HaConfigDeviceDashboard extends LitElement {
: "/config"}
.tabs=${configSections.integrations}
.route=${this.route}
.activeFilters=${activeFilters}
.numHidden=${this._numHiddenDevices}
.searchLabel=${this.hass.localize(
"ui.panel.config.devices.picker.search"
)}
.hiddenLabel=${this.hass.localize(
"ui.panel.config.devices.picker.filter.hidden_devices",
"number",
this._numHiddenDevices
)}
.columns=${this._columns(this.narrow, this._showDisabled)}
.data=${devicesOutput}
.filter=${this._filter}
@clear-filter=${this._clearFilter}
@search-changed=${this._handleSearchChange}
@row-click=${this._handleRowClicked}
clickable
.hasFab=${includeZHAFab}
@ -488,15 +395,32 @@ export class HaConfigDeviceDashboard extends LitElement {
</ha-fab>
</a>`
: html``}
<div
class=${classMap({
"search-toolbar": this.narrow,
"table-header": !this.narrow,
})}
slot="header"
>
${headerToolbar}
</div>
<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
<mwc-icon-button
slot="trigger"
.label=${this.hass!.localize(
"ui.panel.config.devices.picker.filter.filter"
)}
.title=${this.hass!.localize(
"ui.panel.config.devices.picker.filter.filter"
)}
>
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@request-selected="${this._showDisabledChanged}"
graphic="control"
.selected=${this._showDisabled}
>
<ha-checkbox
slot="graphic"
.checked=${this._showDisabled}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.devices.picker.filter.show_disabled"
)}
</mwc-list-item>
</ha-button-menu>
</hass-tabs-subpage-data-table>
`;
}
@ -540,121 +464,22 @@ export class HaConfigDeviceDashboard extends LitElement {
}
private _clearFilter() {
navigate(this, window.location.pathname, true);
}
private _showAll() {
if (
this._activeFilters(this.entries, this._searchParms, this.hass.localize)
) {
navigate(this, window.location.pathname, true);
}
this._showDisabled = true;
}
static get styles(): CSSResult[] {
return [
haStyle,
css`
hass-loading-screen {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
a {
color: var(--primary-color);
}
h2 {
margin-top: 0;
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity);
}
p {
font-family: var(--paper-font-subhead_-_font-family);
-webkit-font-smoothing: var(
--paper-font-subhead_-_-webkit-font-smoothing
);
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
}
ha-data-table {
width: 100%;
--data-table-border-width: 0;
}
:host(:not([narrow])) ha-data-table {
height: calc(100vh - 1px - var(--header-height));
display: block;
}
ha-button-menu {
margin-right: 8px;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
}
search-input {
margin-left: 16px;
flex-grow: 1;
position: relative;
top: 2px;
}
.search-toolbar search-input {
margin-left: 8px;
top: 1px;
}
.search-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--secondary-text-color);
}
.search-toolbar ha-button-menu {
position: static;
}
.selected-txt {
font-weight: bold;
padding-left: 16px;
}
.table-header .selected-txt {
margin-top: 20px;
}
.search-toolbar .selected-txt {
font-size: 16px;
}
.header-btns > mwc-button,
.header-btns > ha-icon-button {
margin: 8px;
}
.active-filters {
color: var(--primary-text-color);
position: relative;
display: flex;
align-items: center;
padding: 2px 2px 2px 8px;
margin-left: 4px;
font-size: 14px;
}
.active-filters ha-icon {
color: var(--primary-color);
}
.active-filters mwc-button {
margin-left: 8px;
}
.active-filters::before {
background-color: var(--primary-color);
opacity: 0.12;
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
margin: 0 -8px 0 8px;
}
`,
haStyle,
];
}
}

441
src/panels/config/entities/ha-config-entities.ts
View File

@ -1,6 +1,12 @@
import "@material/mwc-list/mwc-list-item";
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import { mdiFilterVariant, mdiPlus } from "@mdi/js";
import {
mdiCancel,
mdiDelete,
mdiFilterVariant,
mdiPlus,
mdiUndo,
} from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item";
@ -36,7 +42,7 @@ import type {
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-button-menu";
import "../../../components/ha-icon";
import "../../../components/ha-svg-icon";
import {
AreaRegistryEntry,
subscribeAreaRegistry,
@ -457,200 +463,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
);
const includeZHAFab = filteredDomains.includes("zha");
const headerToolbar = this._selectedEntities.length
? html`
<p class="selected-txt">
${this.hass.localize(
"ui.panel.config.entities.picker.selected",
"number",
this._selectedEntities.length
)}
</p>
<div class="header-btns">
${!this.narrow
? html`
<mwc-button @click=${this._enableSelected}
>${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}</mwc-button
>
<mwc-button @click=${this._disableSelected}
>${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}</mwc-button
>
<mwc-button @click=${this._removeSelected} class="warning"
>${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}</mwc-button
>
`
: html`
<ha-icon-button
id="enable-btn"
icon="hass:undo"
@click=${this._enableSelected}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="enable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}
</paper-tooltip>
<ha-icon-button
id="disable-btn"
icon="hass:cancel"
@click=${this._disableSelected}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="disable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}
</paper-tooltip>
<ha-icon-button
class="warning"
id="remove-btn"
icon="hass:delete"
@click=${this._removeSelected}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="remove-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}
</paper-tooltip>
`}
</div>
`
: html`
<search-input
no-label-float
no-underline
@value-changed=${this._handleSearchChange}
.filter=${this._filter}
.label=${this.hass.localize(
"ui.panel.config.entities.picker.search"
)}
></search-input
>${activeFilters
? html`<div class="active-filters">
${this.narrow
? html` <div>
<ha-icon icon="hass:filter-variant"></ha-icon>
<paper-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
)}
${activeFilters.join(", ")}
${this._numHiddenEntities
? "(" +
this.hass.localize(
"ui.panel.config.entities.picker.filter.hidden_entities",
"number",
this._numHiddenEntities
) +
")"
: ""}
</paper-tooltip>
</div>`
: `${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
)} ${activeFilters.join(", ")}
${
this._numHiddenEntities
? "(" +
this.hass.localize(
"ui.panel.config.entities.picker.filter.hidden_entities",
"number",
this._numHiddenEntities
) +
")"
: ""
}
`}
<mwc-button @click=${this._clearFilter}
>${this.hass.localize(
"ui.panel.config.filtering.clear"
)}</mwc-button
>
</div>`
: ""}
${this._numHiddenEntities && !activeFilters
? html`<div class="active-filters">
${this.narrow
? html` <div>
<ha-icon icon="hass:filter-variant"></ha-icon>
<paper-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.entities.picker.filter.hidden_entities",
"number",
this._numHiddenEntities
)}
</paper-tooltip>
</div>`
: `${this.hass.localize(
"ui.panel.config.entities.picker.filter.hidden_entities",
"number",
this._numHiddenEntities
)}`}
<mwc-button @click=${this._showAll}
>${this.hass.localize(
"ui.panel.config.entities.picker.filter.show_all"
)}</mwc-button
>
</div>`
: ""}
<ha-button-menu corner="BOTTOM_START" multi>
<mwc-icon-button
slot="trigger"
.label=${this.hass!.localize(
"ui.panel.config.entities.picker.filter.filter"
)}
.title=${this.hass!.localize(
"ui.panel.config.entities.picker.filter.filter"
)}
>
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@request-selected="${this._showDisabledChanged}"
graphic="control"
.selected=${this._showDisabled}
>
<ha-checkbox
slot="graphic"
.checked=${this._showDisabled}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_disabled"
)}
</mwc-list-item>
<mwc-list-item
@request-selected="${this._showRestoredChanged}"
graphic="control"
.selected=${this._showUnavailable}
>
<ha-checkbox
slot="graphic"
.checked=${this._showUnavailable}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_unavailable"
)}
</mwc-list-item>
<mwc-list-item
@request-selected="${this._showReadOnlyChanged}"
graphic="control"
.selected=${this._showReadOnly}
>
<ha-checkbox
slot="graphic"
.checked=${this._showReadOnly}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_readonly"
)}
</mwc-list-item>
</ha-button-menu>
`;
return html`
<hass-tabs-subpage-data-table
@ -663,23 +475,147 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.tabs=${configSections.integrations}
.columns=${this._columns(this.narrow, this.hass.language)}
.data=${filteredEntities}
.activeFilters=${activeFilters}
.numHidden=${this._numHiddenEntities}
.searchLabel=${this.hass.localize(
"ui.panel.config.entities.picker.search"
)}
.hiddenLabel=${this.hass.localize(
"ui.panel.config.entities.picker.filter.hidden_entities",
"number",
this._numHiddenEntities
)}
.filter=${this._filter}
selectable
clickable
@selection-changed=${this._handleSelectionChanged}
@clear-filter=${this._clearFilter}
@search-changed=${this._handleSearchChange}
@row-click=${this._openEditEntry}
id="entity_id"
.hasFab=${includeZHAFab}
>
<div
class=${classMap({
"search-toolbar": this.narrow,
"table-header": !this.narrow,
})}
slot="header"
>
${headerToolbar}
</div>
${this._selectedEntities.length
? html`<div
class=${classMap({
"header-toolbar": this.narrow,
"table-header": !this.narrow,
})}
slot="header"
>
<p class="selected-txt">
${this.hass.localize(
"ui.panel.config.entities.picker.selected",
"number",
this._selectedEntities.length
)}
</p>
<div class="header-btns">
${!this.narrow
? html`
<mwc-button @click=${this._enableSelected}
>${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}</mwc-button
>
<mwc-button @click=${this._disableSelected}
>${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}</mwc-button
>
<mwc-button @click=${this._removeSelected} class="warning"
>${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}</mwc-button
>
`
: html`
<mwc-icon-button
id="enable-btn"
@click=${this._enableSelected}
><ha-svg-icon .path=${mdiUndo}></ha-svg-icon
></mwc-icon-button>
<paper-tooltip animation-delay="0" for="enable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}
</paper-tooltip>
<mwc-icon-button
id="disable-btn"
@click=${this._disableSelected}
><ha-svg-icon .path=${mdiCancel}></ha-svg-icon
></mwc-icon-button>
<paper-tooltip animation-delay="0" for="disable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}
</paper-tooltip>
<mwc-icon-button
class="warning"
id="remove-btn"
@click=${this._removeSelected}
><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
></mwc-icon-button>
<paper-tooltip animation-delay="0" for="remove-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}
</paper-tooltip>
`}
</div>
</div> `
: html`<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
<mwc-icon-button
slot="trigger"
.label=${this.hass!.localize(
"ui.panel.config.entities.picker.filter.filter"
)}
.title=${this.hass!.localize(
"ui.panel.config.entities.picker.filter.filter"
)}
>
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@request-selected="${this._showDisabledChanged}"
graphic="control"
.selected=${this._showDisabled}
>
<ha-checkbox
slot="graphic"
.checked=${this._showDisabled}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_disabled"
)}
</mwc-list-item>
<mwc-list-item
@request-selected="${this._showRestoredChanged}"
graphic="control"
.selected=${this._showUnavailable}
>
<ha-checkbox
slot="graphic"
.checked=${this._showUnavailable}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_unavailable"
)}
</mwc-list-item>
<mwc-list-item
@request-selected="${this._showReadOnlyChanged}"
graphic="control"
.selected=${this._showReadOnly}
>
<ha-checkbox
slot="graphic"
.checked=${this._showReadOnly}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_readonly"
)}
</mwc-list-item>
</ha-button-menu>`}
${includeZHAFab
? html`<a href="/config/zha/add" slot="fab">
<ha-fab
@ -899,10 +835,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
}
private _clearFilter() {
navigate(this, window.location.pathname, true);
}
private _showAll() {
if (
this._activeFilters(this._searchParms, this.hass.localize, this._entries)
) {
navigate(this, window.location.pathname, true);
}
this._showDisabled = true;
this._showReadOnly = true;
this._showUnavailable = true;
@ -916,64 +853,20 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
a {
color: var(--primary-color);
}
h2 {
margin-top: 0;
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity);
}
p {
font-family: var(--paper-font-subhead_-_font-family);
-webkit-font-smoothing: var(
--paper-font-subhead_-_-webkit-font-smoothing
);
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
}
ha-data-table {
width: 100%;
--data-table-border-width: 0;
}
:host(:not([narrow])) ha-data-table {
height: calc(100vh - 1px - var(--header-height));
display: block;
}
ha-button-menu {
margin-right: 8px;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 58px;
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
}
search-input {
margin-left: 16px;
flex-grow: 1;
position: relative;
top: 2px;
}
.search-toolbar search-input {
margin-left: 8px;
top: 1px;
}
.search-toolbar {
.header-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--secondary-text-color);
}
.search-toolbar ha-button-menu {
position: static;
position: relative;
top: -4px;
}
.selected-txt {
font-weight: bold;
@ -982,38 +875,18 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.table-header .selected-txt {
margin-top: 20px;
}
.search-toolbar .selected-txt {
.header-toolbar .selected-txt {
font-size: 16px;
}
.header-toolbar .header-btns {
margin-right: -12px;
}
.header-btns > mwc-button,
.header-btns > ha-icon-button {
.header-btns > mwc-icon-button {
margin: 8px;
}
.active-filters {
color: var(--primary-text-color);
position: relative;
display: flex;
align-items: center;
padding: 2px 2px 2px 8px;
margin-left: 4px;
font-size: 14px;
}
.active-filters ha-icon {
color: var(--primary-color);
}
.active-filters mwc-button {
margin-left: 8px;
}
.active-filters::before {
background-color: var(--primary-color);
opacity: 0.12;
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
ha-button-menu {
margin: 0 -8px 0 8px;
}
`,
];

10
src/panels/config/integrations/ha-config-integrations.ts
View File

@ -348,11 +348,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
"number",
disabledConfigEntries.size
)}
<mwc-button @click=${this._toggleShowDisabled}
>${this.hass.localize(
"ui.panel.config.filtering.show"
)}</mwc-button
>
<mwc-button @click=${this._toggleShowDisabled}>
${this.hass.localize(
"ui.panel.config.integrations.disable.show"
)}
</mwc-button>
</div>`
: ""}
</div>

15
src/translations/en.json
View File

@ -459,7 +459,10 @@
},
"data-table": {
"search": "Search",
"no-data": "No data"
"no-data": "No data",
"filtering_by": "Filtering by",
"hidden": "{number} hidden",
"clear": "Clear"
},
"media-browser": {
"pick": "Pick",
@ -848,11 +851,6 @@
"config": {
"header": "Configure Home Assistant",
"introduction": "In this view it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.",
"filtering": {
"filtering_by": "Filtering by",
"clear": "Clear",
"show": "Show"
},
"advanced_mode": {
"hint_enable": "Missing config options? Enable advanced mode on",
"link_profile_page": "your profile page"
@ -2071,7 +2069,8 @@
"disable": {
"show_disabled": "Show disabled integrations",
"hide_disabled": "Hide disabled integrations",
"disabled_integrations": "{number} disabled"
"disabled_integrations": "{number} disabled",
"show": "Show"
},
"ignore": {
"ignore": "Ignore",
@ -3852,4 +3851,4 @@
}
}
}
}
}