jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 05:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Datatable fab padding (#5432)

Browse Source 
* Add padding for fab

* Add hasFab property

* Simplify

* Remove query

* Change to empty row
This commit is contained in:
Bram Kragten 2020-04-03 17:46:19 +02:00 committed by GitHub
parent 006d989943
commit a8f9f7ac7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 92 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/data-table/ha-data-table.ts
View File

@ -86,6 +86,7 @@ export class HaDataTable extends LitElement {
@property({ type: Object }) public columns: DataTableColumnContainer = {}; @property({ type: Object }) public columns: DataTableColumnContainer = {};
@property({ type: Array }) public data: DataTableRowData[] = []; @property({ type: Array }) public data: DataTableRowData[] = [];
@property({ type: Boolean }) public selectable = false; @property({ type: Boolean }) public selectable = false;
@property({ type: Boolean }) public hasFab = false;
@property({ type: Boolean, attribute: "auto-height" }) @property({ type: Boolean, attribute: "auto-height" })
public autoHeight = false; public autoHeight = false;
@property({ type: String }) public id = "id"; @property({ type: String }) public id = "id";
@ -98,6 +99,7 @@ export class HaDataTable extends LitElement {
@property({ type: Array }) private _filteredData: DataTableRowData[] = []; @property({ type: Array }) private _filteredData: DataTableRowData[] = [];
@query("slot[name='header']") private _header!: HTMLSlotElement; @query("slot[name='header']") private _header!: HTMLSlotElement;
@query(".mdc-data-table__table") private _table!: HTMLDivElement; @query(".mdc-data-table__table") private _table!: HTMLDivElement;
private _checkableRowsCount?: number; private _checkableRowsCount?: number;
private _checkedRows: string[] = []; private _checkedRows: string[] = [];
private _sortColumns: { private _sortColumns: {
@ -281,75 +283,84 @@ export class HaDataTable extends LitElement {
: html` : html`
<div class="mdc-data-table__content scroller"> <div class="mdc-data-table__content scroller">
${scroll({ ${scroll({
items: this._filteredData, items: !this.hasFab
renderItem: (row: DataTableRowData) => html` ? this._filteredData
<div : [...this._filteredData, ...[{ empty: true }]],
.rowId="${row[this.id]}" renderItem: (row: DataTableRowData) => {
@click=${this._handleRowClick} if (row.empty) {
class="mdc-data-table__row ${classMap({ return html`
"mdc-data-table__row--selected": this._checkedRows.includes( <div class="mdc-data-table__row"></div>
String(row[this.id]) `;
), }
})}" return html`
aria-selected=${ifDefined( <div
this._checkedRows.includes(String(row[this.id])) .rowId="${row[this.id]}"
? true @click=${this._handleRowClick}
: undefined class="mdc-data-table__row ${classMap({
)} "mdc-data-table__row--selected": this._checkedRows.includes(
.selectable=${row.selectable !== false} String(row[this.id])
> ),
${this.selectable })}"
? html` aria-selected=${ifDefined(
<div this._checkedRows.includes(String(row[this.id]))
class="mdc-data-table__cell mdc-data-table__cell--checkbox" ? true
> : undefined
<ha-checkbox )}
class="mdc-data-table__row-checkbox" .selectable=${row.selectable !== false}
@change=${this._handleRowCheckboxClick} >
.disabled=${row.selectable === false} ${this.selectable
.checked=${this._checkedRows.includes( ? html`
String(row[this.id]) <div
)} class="mdc-data-table__cell mdc-data-table__cell--checkbox"
> >
</ha-checkbox> <ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleRowCheckboxClick}
.disabled=${row.selectable === false}
.checked=${this._checkedRows.includes(
String(row[this.id])
)}
>
</ha-checkbox>
</div>
`
: ""}
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
return html`
<div
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": Boolean(
column.type === "numeric"
),
"mdc-data-table__cell--icon": Boolean(
column.type === "icon"
),
"mdc-data-table__cell--icon-button": Boolean(
column.type === "icon-button"
),
grows: Boolean(column.grows),
})}"
style=${column.width
? styleMap({
[column.grows
? "minWidth"
: "width"]: column.width,
maxWidth: column.maxWidth
? column.maxWidth
: "",
})
: ""}
>
${column.template
? column.template(row[key], row)
: row[key]}
</div> </div>
` `;
: ""} })}
${Object.entries(this.columns).map((columnEntry) => { </div>
const [key, column] = columnEntry; `;
return html` },
<div
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": Boolean(
column.type === "numeric"
),
"mdc-data-table__cell--icon": Boolean(
column.type === "icon"
),
"mdc-data-table__cell--icon-button": Boolean(
column.type === "icon-button"
),
grows: Boolean(column.grows),
})}"
style=${column.width
? styleMap({
[column.grows
? "minWidth"
: "width"]: column.width,
maxWidth: column.maxWidth
? column.maxWidth
: "",
})
: ""}
>
${column.template
? column.template(row[key], row)
: row[key]}
</div>
`;
})}
</div>
`,
})} })}
</div> </div>
`} `}

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

@ -40,6 +40,11 @@ export class HaTabsSubpageDataTable extends LitElement {
* @type {Boolean} * @type {Boolean}
*/ */
@property({ type: Boolean }) public selectable = false; @property({ type: Boolean }) public selectable = false;
/**
* Do we need to add padding for a fab.
* @type {Boolean}
*/
@property({ type: Boolean }) public hasFab = false;
/** /**
* Field with a unique id per entry in data. * Field with a unique id per entry in data.
* @type {String} * @type {String}
@ -111,6 +116,7 @@ export class HaTabsSubpageDataTable extends LitElement {
.data=${this.data} .data=${this.data}
.filter=${this.filter} .filter=${this.filter}
.selectable=${this.selectable} .selectable=${this.selectable}
.hasFab=${this.hasFab}
.id=${this.id} .id=${this.id}
.noDataText=${this.noDataText} .noDataText=${this.noDataText}
> >

1
src/panels/config/areas/ha-config-areas-dashboard.ts
View File

@ -108,6 +108,7 @@ export class HaConfigAreasDashboard extends LitElement {
"ui.panel.config.areas.picker.no_areas" "ui.panel.config.areas.picker.no_areas"
)} )}
id="area_id" id="area_id"
hasFab
> >
<paper-icon-button <paper-icon-button
slot="toolbar-icon" slot="toolbar-icon"

1
src/panels/config/automation/ha-automation-picker.ts
View File

@ -160,6 +160,7 @@ class HaAutomationPicker extends LitElement {
.noDataText=${this.hass.localize( .noDataText=${this.hass.localize(
"ui.panel.config.automation.picker.no_automations" "ui.panel.config.automation.picker.no_automations"
)} )}
hasFab
> >
</hass-tabs-subpage-data-table> </hass-tabs-subpage-data-table>
<ha-fab <ha-fab

1
src/panels/config/helpers/ha-config-helpers.ts
View File

@ -148,6 +148,7 @@ export class HaConfigHelpers extends LitElement {
.columns=${this._columns(this.narrow, this.hass.language)} .columns=${this._columns(this.narrow, this.hass.language)}
.data=${this._getItems(this._stateItems)} .data=${this._getItems(this._stateItems)}
@row-click=${this._openEditDialog} @row-click=${this._openEditDialog}
hasFab
> >
</hass-tabs-subpage-data-table> </hass-tabs-subpage-data-table>
<ha-fab <ha-fab

1
src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
View File

@ -229,6 +229,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
.data=${this._getItems(this._dashboards)} .data=${this._getItems(this._dashboards)}
@row-click=${this._editDashboard} @row-click=${this._editDashboard}
id="url_path" id="url_path"
hasFab
> >
</hass-tabs-subpage-data-table> </hass-tabs-subpage-data-table>
<ha-fab <ha-fab

1
src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
View File

@ -97,6 +97,7 @@ export class HaConfigLovelaceRescources extends LitElement {
"ui.panel.config.lovelace.resources.picker.no_resources" "ui.panel.config.lovelace.resources.picker.no_resources"
)} )}
@row-click=${this._editResource} @row-click=${this._editResource}
hasFab
> >
</hass-tabs-subpage-data-table> </hass-tabs-subpage-data-table>
<ha-fab <ha-fab

1
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -131,6 +131,7 @@ class HaSceneDashboard extends LitElement {
.noDataText=${this.hass.localize( .noDataText=${this.hass.localize(
"ui.panel.config.scene.picker.no_scenes" "ui.panel.config.scene.picker.no_scenes"
)} )}
hasFab
> >
<paper-icon-button <paper-icon-button
slot="toolbar-icon" slot="toolbar-icon"

1
src/panels/config/script/ha-script-picker.ts
View File

@ -126,6 +126,7 @@ class HaScriptPicker extends LitElement {
.noDataText=${this.hass.localize( .noDataText=${this.hass.localize(
"ui.panel.config.script.picker.no_scripts" "ui.panel.config.script.picker.no_scripts"
)} )}
hasFab
> >
<paper-icon-button <paper-icon-button
slot="toolbar-icon" slot="toolbar-icon"

1
src/panels/config/users/ha-config-users.ts
View File

@ -94,6 +94,7 @@ export class HaConfigUsers extends LitElement {
.columns=${this._columns(this.hass.language)} .columns=${this._columns(this.hass.language)}
.data=${this._users} .data=${this._users}
@row-click=${this._editUser} @row-click=${this._editUser}
hasFab
> >
</hass-tabs-subpage-data-table> </hass-tabs-subpage-data-table>
<ha-fab <ha-fab