jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-12 03:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix for Mobile View of Entities Table (#12160)

Browse Source
This commit is contained in:
Zack Barett 2022-03-30 12:52:05 -05:00 committed by GitHub
parent 2b1457e1cd
commit 396791b805
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 177 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,6 +132,12 @@ export class HaTabsSubpageDataTable extends LitElement {
*/
@property() public tabs!: PageNavigation[];
/**
* Force hides the filter menu.
* @type {Boolean}
*/
@property({ type: Boolean }) public hideFilterMenu = false;
@query("ha-data-table", true) private _dataTable!: HaDataTable;
public clearSelection() {
@ -195,16 +201,24 @@ export class HaTabsSubpageDataTable extends LitElement {
.mainPage=${this.mainPage}
.supervisor=${this.supervisor}
>
${!this.hideFilterMenu
? html`
<div slot="toolbar-icon">
${this.narrow
? html`<div class="filter-menu">
? html`
<div class="filter-menu">
${this.numHidden || this.activeFilters
? html`<span class="badge">${this.numHidden || "!"}</span>`
? html`<span class="badge"
>${this.numHidden || "!"}</span
>`
: ""}
<slot name="filter-menu"></slot>
</div>`
</div>
`
: ""}<slot name="toolbar-icon"></slot>
</div>
`
: ""}
${this.narrow
? html`
<div slot="header">

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

@ -29,9 +29,9 @@ import type {
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-button-menu";
import "../../../components/ha-check-list-item";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-check-list-item";
import {
AreaRegistryEntry,
subscribeAreaRegistry,
@ -507,6 +507,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.data=${filteredEntities}
.activeFilters=${activeFilters}
.numHidden=${this._numHiddenEntities}
.hideFilterMenu=${this._selectedEntities.length > 0}
.searchLabel=${this.hass.localize(
"ui.panel.config.entities.picker.search"
)}
@ -526,7 +527,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.hasFab=${includeZHAFab}
>
${this._selectedEntities.length
? html`<div
? html`
<div
class=${classMap({
"header-toolbar": this.narrow,
"table-header": !this.narrow,
@ -558,7 +560,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
"ui.panel.config.entities.picker.hide_selected.button"
)}</mwc-button
>
<mwc-button @click=${this._removeSelected} class="warning"
<mwc-button
@click=${this._removeSelected}
class="warning"
>${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}</mwc-button
@ -590,7 +594,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
<ha-icon-button
id="hide-btn"
@click=${this._hideSelected}
.path=${mdiCancel}
.path=${mdiEyeOff}
.label=${this.hass.localize("ui.common.hide")}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="hide-btn">
@ -612,8 +616,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
</paper-tooltip>
`}
</div>
</div> `
: html`<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
</div>
`
: html`
<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
<ha-icon-button
slot="trigger"
.label=${this.hass!.localize(
@ -668,7 +674,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
"ui.panel.config.entities.picker.filter.show_readonly"
)}
</ha-check-list-item>
</ha-button-menu>`}
</ha-button-menu>
`}
${includeZHAFab
? html`<a href="/config/zha/add" slot="fab">
<ha-fab
@ -974,6 +981,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.header-toolbar .header-btns {
margin-right: -12px;
}
.header-btns {
display: flex;
}
.header-btns > mwc-button,
.header-btns > ha-icon-button {
margin: 8px;