jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-13 04:16: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

34
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}
> >
<div slot="toolbar-icon"> ${!this.hideFilterMenu
${this.narrow ? html`
? html`<div class="filter-menu"> <div slot="toolbar-icon">
${this.numHidden || this.activeFilters ${this.narrow
? html`<span class="badge">${this.numHidden || "!"}</span>` ? html`
: ""} <div class="filter-menu">
<slot name="filter-menu"></slot> ${this.numHidden || this.activeFilters
</div>` ? html`<span class="badge"
: ""}<slot name="toolbar-icon"></slot> >${this.numHidden || "!"}</span
</div> >`
: ""}
<slot name="filter-menu"></slot>
</div>
`
: ""}<slot name="toolbar-icon"></slot>
</div>
`
: ""}
${this.narrow ${this.narrow
? html` ? html`
<div slot="header"> <div slot="header">

296
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,149 +527,155 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.hasFab=${includeZHAFab} .hasFab=${includeZHAFab}
> >
${this._selectedEntities.length ${this._selectedEntities.length
? html`<div ? html`
class=${classMap({ <div
"header-toolbar": this.narrow, class=${classMap({
"table-header": !this.narrow, "header-toolbar": this.narrow,
})} "table-header": !this.narrow,
slot="header" })}
> slot="header"
<p class="selected-txt"> >
${this.hass.localize( <p class="selected-txt">
"ui.panel.config.entities.picker.selected", ${this.hass.localize(
"number", "ui.panel.config.entities.picker.selected",
this._selectedEntities.length "number",
)} this._selectedEntities.length
</p> )}
<div class="header-btns"> </p>
${!this.narrow <div class="header-btns">
? html` ${!this.narrow
<mwc-button @click=${this._enableSelected} ? html`
>${this.hass.localize( <mwc-button @click=${this._enableSelected}
"ui.panel.config.entities.picker.enable_selected.button" >${this.hass.localize(
)}</mwc-button "ui.panel.config.entities.picker.enable_selected.button"
> )}</mwc-button
<mwc-button @click=${this._disableSelected} >
>${this.hass.localize( <mwc-button @click=${this._disableSelected}
"ui.panel.config.entities.picker.disable_selected.button" >${this.hass.localize(
)}</mwc-button "ui.panel.config.entities.picker.disable_selected.button"
> )}</mwc-button
<mwc-button @click=${this._hideSelected} >
>${this.hass.localize( <mwc-button @click=${this._hideSelected}
"ui.panel.config.entities.picker.hide_selected.button" >${this.hass.localize(
)}</mwc-button "ui.panel.config.entities.picker.hide_selected.button"
> )}</mwc-button
<mwc-button @click=${this._removeSelected} class="warning" >
>${this.hass.localize( <mwc-button
"ui.panel.config.entities.picker.remove_selected.button" @click=${this._removeSelected}
)}</mwc-button class="warning"
> >${this.hass.localize(
` "ui.panel.config.entities.picker.remove_selected.button"
: html` )}</mwc-button
<ha-icon-button >
id="enable-btn" `
@click=${this._enableSelected} : html`
.path=${mdiUndo} <ha-icon-button
.label=${this.hass.localize("ui.common.enable")} id="enable-btn"
></ha-icon-button> @click=${this._enableSelected}
<paper-tooltip animation-delay="0" for="enable-btn"> .path=${mdiUndo}
${this.hass.localize( .label=${this.hass.localize("ui.common.enable")}
"ui.panel.config.entities.picker.enable_selected.button" ></ha-icon-button>
)} <paper-tooltip animation-delay="0" for="enable-btn">
</paper-tooltip> ${this.hass.localize(
<ha-icon-button "ui.panel.config.entities.picker.enable_selected.button"
id="disable-btn" )}
@click=${this._disableSelected} </paper-tooltip>
.path=${mdiCancel} <ha-icon-button
.label=${this.hass.localize("ui.common.disable")} id="disable-btn"
></ha-icon-button> @click=${this._disableSelected}
<paper-tooltip animation-delay="0" for="disable-btn"> .path=${mdiCancel}
${this.hass.localize( .label=${this.hass.localize("ui.common.disable")}
"ui.panel.config.entities.picker.disable_selected.button" ></ha-icon-button>
)} <paper-tooltip animation-delay="0" for="disable-btn">
</paper-tooltip> ${this.hass.localize(
<ha-icon-button "ui.panel.config.entities.picker.disable_selected.button"
id="hide-btn" )}
@click=${this._hideSelected} </paper-tooltip>
.path=${mdiCancel} <ha-icon-button
.label=${this.hass.localize("ui.common.hide")} id="hide-btn"
></ha-icon-button> @click=${this._hideSelected}
<paper-tooltip animation-delay="0" for="hide-btn"> .path=${mdiEyeOff}
${this.hass.localize( .label=${this.hass.localize("ui.common.hide")}
"ui.panel.config.entities.picker.hide_selected.button" ></ha-icon-button>
)} <paper-tooltip animation-delay="0" for="hide-btn">
</paper-tooltip> ${this.hass.localize(
<ha-icon-button "ui.panel.config.entities.picker.hide_selected.button"
class="warning" )}
id="remove-btn" </paper-tooltip>
@click=${this._removeSelected} <ha-icon-button
.path=${mdiDelete} class="warning"
.label=${this.hass.localize("ui.common.remove")} id="remove-btn"
></ha-icon-button> @click=${this._removeSelected}
<paper-tooltip animation-delay="0" for="remove-btn"> .path=${mdiDelete}
${this.hass.localize( .label=${this.hass.localize("ui.common.remove")}
"ui.panel.config.entities.picker.remove_selected.button" ></ha-icon-button>
)} <paper-tooltip animation-delay="0" for="remove-btn">
</paper-tooltip> ${this.hass.localize(
`} "ui.panel.config.entities.picker.remove_selected.button"
)}
</paper-tooltip>
`}
</div>
</div> </div>
</div> ` `
: html`<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi> : html`
<ha-icon-button <ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
slot="trigger" <ha-icon-button
.label=${this.hass!.localize( slot="trigger"
"ui.panel.config.entities.picker.filter.filter" .label=${this.hass!.localize(
)} "ui.panel.config.entities.picker.filter.filter"
.path=${mdiFilterVariant} )}
></ha-icon-button> .path=${mdiFilterVariant}
${this.narrow && activeFilters?.length ></ha-icon-button>
? html`<mwc-list-item @click=${this._clearFilter} ${this.narrow && activeFilters?.length
>${this.hass.localize( ? html`<mwc-list-item @click=${this._clearFilter}
"ui.components.data-table.filtering_by" >${this.hass.localize(
)} "ui.components.data-table.filtering_by"
${activeFilters.join(", ")} )}
<span class="clear">Clear</span></mwc-list-item ${activeFilters.join(", ")}
>` <span class="clear">Clear</span></mwc-list-item
: ""} >`
<ha-check-list-item : ""}
@request-selected=${this._showDisabledChanged} <ha-check-list-item
.selected=${this._showDisabled} @request-selected=${this._showDisabledChanged}
left .selected=${this._showDisabled}
> left
${this.hass!.localize( >
"ui.panel.config.entities.picker.filter.show_disabled" ${this.hass!.localize(
)} "ui.panel.config.entities.picker.filter.show_disabled"
</ha-check-list-item> )}
<ha-check-list-item </ha-check-list-item>
@request-selected=${this._showHiddenChanged} <ha-check-list-item
.selected=${this._showHidden} @request-selected=${this._showHiddenChanged}
left .selected=${this._showHidden}
> left
${this.hass!.localize( >
"ui.panel.config.entities.picker.filter.show_hidden" ${this.hass!.localize(
)} "ui.panel.config.entities.picker.filter.show_hidden"
</ha-check-list-item> )}
<ha-check-list-item </ha-check-list-item>
@request-selected=${this._showRestoredChanged} <ha-check-list-item
graphic="control" @request-selected=${this._showRestoredChanged}
.selected=${this._showUnavailable} graphic="control"
left .selected=${this._showUnavailable}
> left
${this.hass!.localize( >
"ui.panel.config.entities.picker.filter.show_unavailable" ${this.hass!.localize(
)} "ui.panel.config.entities.picker.filter.show_unavailable"
</ha-check-list-item> )}
<ha-check-list-item </ha-check-list-item>
@request-selected=${this._showReadOnlyChanged} <ha-check-list-item
graphic="control" @request-selected=${this._showReadOnlyChanged}
.selected=${this._showReadOnly} graphic="control"
left .selected=${this._showReadOnly}
> left
${this.hass!.localize( >
"ui.panel.config.entities.picker.filter.show_readonly" ${this.hass!.localize(
)} "ui.panel.config.entities.picker.filter.show_readonly"
</ha-check-list-item> )}
</ha-button-menu>`} </ha-check-list-item>
</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;