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[]; @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; @query("ha-data-table", true) private _dataTable!: HaDataTable;
public clearSelection() { public clearSelection() {
@ -195,16 +201,24 @@ export class HaTabsSubpageDataTable extends LitElement {
.mainPage=${this.mainPage} .mainPage=${this.mainPage}
.supervisor=${this.supervisor} .supervisor=${this.supervisor}
> >
${!this.hideFilterMenu
? html`
<div slot="toolbar-icon"> <div slot="toolbar-icon">
${this.narrow ${this.narrow
? html`<div class="filter-menu"> ? html`
<div class="filter-menu">
${this.numHidden || this.activeFilters ${this.numHidden || this.activeFilters
? html`<span class="badge">${this.numHidden || "!"}</span>` ? html`<span class="badge"
>${this.numHidden || "!"}</span
>`
: ""} : ""}
<slot name="filter-menu"></slot> <slot name="filter-menu"></slot>
</div>` </div>
`
: ""}<slot name="toolbar-icon"></slot> : ""}<slot name="toolbar-icon"></slot>
</div> </div>
`
: ""}
${this.narrow ${this.narrow
? html` ? html`
<div slot="header"> <div slot="header">

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

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