From a8f9f7ac7ace6eb7ab6c02dd053884bbefb33d49 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 3 Apr 2020 17:46:19 +0200
Subject: [PATCH] Datatable fab padding (#5432)

* Add padding for fab

* Add hasFab property

* Simplify

* Remove query

* Change to empty row
---
 src/components/data-table/ha-data-table.ts    | 145 ++++++++++--------
 src/layouts/hass-tabs-subpage-data-table.ts   |   6 +
 .../config/areas/ha-config-areas-dashboard.ts |   1 +
 .../config/automation/ha-automation-picker.ts |   1 +
 .../config/helpers/ha-config-helpers.ts       |   1 +
 .../ha-config-lovelace-dashboards.ts          |   1 +
 .../resources/ha-config-lovelace-resources.ts |   1 +
 src/panels/config/scene/ha-scene-dashboard.ts |   1 +
 src/panels/config/script/ha-script-picker.ts  |   1 +
 src/panels/config/users/ha-config-users.ts    |   1 +
 10 files changed, 92 insertions(+), 67 deletions(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index ad3f1d0a2c..b091357df9 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -86,6 +86,7 @@ export class HaDataTable extends LitElement {
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
   @property({ type: Array }) public data: DataTableRowData[] = [];
   @property({ type: Boolean }) public selectable = false;
+  @property({ type: Boolean }) public hasFab = false;
   @property({ type: Boolean, attribute: "auto-height" })
   public autoHeight = false;
   @property({ type: String }) public id = "id";
@@ -98,6 +99,7 @@ export class HaDataTable extends LitElement {
   @property({ type: Array }) private _filteredData: DataTableRowData[] = [];
   @query("slot[name='header']") private _header!: HTMLSlotElement;
   @query(".mdc-data-table__table") private _table!: HTMLDivElement;
+
   private _checkableRowsCount?: number;
   private _checkedRows: string[] = [];
   private _sortColumns: {
@@ -281,75 +283,84 @@ export class HaDataTable extends LitElement {
             : html`
                 <div class="mdc-data-table__content scroller">
                   ${scroll({
-                    items: this._filteredData,
-                    renderItem: (row: DataTableRowData) => html`
-                      <div
-                        .rowId="${row[this.id]}"
-                        @click=${this._handleRowClick}
-                        class="mdc-data-table__row ${classMap({
-                          "mdc-data-table__row--selected": this._checkedRows.includes(
-                            String(row[this.id])
-                          ),
-                        })}"
-                        aria-selected=${ifDefined(
-                          this._checkedRows.includes(String(row[this.id]))
-                            ? true
-                            : undefined
-                        )}
-                        .selectable=${row.selectable !== false}
-                      >
-                        ${this.selectable
-                          ? html`
-                              <div
-                                class="mdc-data-table__cell mdc-data-table__cell--checkbox"
-                              >
-                                <ha-checkbox
-                                  class="mdc-data-table__row-checkbox"
-                                  @change=${this._handleRowCheckboxClick}
-                                  .disabled=${row.selectable === false}
-                                  .checked=${this._checkedRows.includes(
-                                    String(row[this.id])
-                                  )}
+                    items: !this.hasFab
+                      ? this._filteredData
+                      : [...this._filteredData, ...[{ empty: true }]],
+                    renderItem: (row: DataTableRowData) => {
+                      if (row.empty) {
+                        return html`
+                          <div class="mdc-data-table__row"></div>
+                        `;
+                      }
+                      return html`
+                        <div
+                          .rowId="${row[this.id]}"
+                          @click=${this._handleRowClick}
+                          class="mdc-data-table__row ${classMap({
+                            "mdc-data-table__row--selected": this._checkedRows.includes(
+                              String(row[this.id])
+                            ),
+                          })}"
+                          aria-selected=${ifDefined(
+                            this._checkedRows.includes(String(row[this.id]))
+                              ? true
+                              : undefined
+                          )}
+                          .selectable=${row.selectable !== false}
+                        >
+                          ${this.selectable
+                            ? html`
+                                <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>
-                            `
-                          : ""}
-                        ${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>
-                    `,
+                            `;
+                          })}
+                        </div>
+                      `;
+                    },
                   })}
                 </div>
               `}
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 0d7c6ce4ad..143b965cbf 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -40,6 +40,11 @@ export class HaTabsSubpageDataTable extends LitElement {
    * @type {Boolean}
    */
   @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.
    * @type {String}
@@ -111,6 +116,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .data=${this.data}
           .filter=${this.filter}
           .selectable=${this.selectable}
+          .hasFab=${this.hasFab}
           .id=${this.id}
           .noDataText=${this.noDataText}
         >
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index 81256f562a..021a731b45 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -108,6 +108,7 @@ export class HaConfigAreasDashboard extends LitElement {
           "ui.panel.config.areas.picker.no_areas"
         )}
         id="area_id"
+        hasFab
       >
         <paper-icon-button
           slot="toolbar-icon"
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 217cb416d9..aeea0c3b9e 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -160,6 +160,7 @@ class HaAutomationPicker extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.automation.picker.no_automations"
         )}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index 25366851a1..db9c3409d5 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -148,6 +148,7 @@ export class HaConfigHelpers extends LitElement {
         .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._getItems(this._stateItems)}
         @row-click=${this._openEditDialog}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 614eaa0774..384e5a5acf 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -229,6 +229,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         .data=${this._getItems(this._dashboards)}
         @row-click=${this._editDashboard}
         id="url_path"
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index bccecb2ce3..c6c2d7be2f 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -97,6 +97,7 @@ export class HaConfigLovelaceRescources extends LitElement {
           "ui.panel.config.lovelace.resources.picker.no_resources"
         )}
         @row-click=${this._editResource}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index de6da85887..e65c80f599 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -131,6 +131,7 @@ class HaSceneDashboard extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.scene.picker.no_scenes"
         )}
+        hasFab
       >
         <paper-icon-button
           slot="toolbar-icon"
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index bc2cee95fe..7447e3fa04 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -126,6 +126,7 @@ class HaScriptPicker extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.script.picker.no_scripts"
         )}
+        hasFab
       >
         <paper-icon-button
           slot="toolbar-icon"
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 13776ea117..404f9cf9f8 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -94,6 +94,7 @@ export class HaConfigUsers extends LitElement {
         .columns=${this._columns(this.hass.language)}
         .data=${this._users}
         @row-click=${this._editUser}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab