20200403.0

setup.py

@@ -2,7 +2,7 @@
 
 setup(
     name="home-assistant-frontend",
-    version="20200401.0",
+    version="20200403.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/search/search-input.ts

@@ -27,7 +27,7 @@ class SearchInput extends LitElement {
   protected render(): TemplateResult {
     return html`
       <style>
-        .no-underline {
+        .no-underline:not(.focused) {
           --paper-input-container-underline: {
             display: none;
             height: 0;

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`
+                    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
+                                    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 mdc-data-table__cell--checkbox"
+                                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
+                                        : "",
+                                    })
+                                  : ""}
                               >
-                                <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>
+                                ${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>
               `}

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}
@@ -95,6 +100,8 @@ export class HaTabsSubpageDataTable extends LitElement {
                 <slot name="header">
                   <div class="search-toolbar">
                     <search-input
+                      .filter=${this.filter}
+                      class="header"
                       no-label-float
                       no-underline
                       @value-changed=${this._handleSearchChange}
@@ -109,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}
         >
@@ -119,6 +127,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                     <slot name="header">
                       <div class="table-header">
                         <search-input
+                          .filter=${this.filter}
                           no-label-float
                           no-underline
                           @value-changed=${this._handleSearchChange}
@@ -153,13 +162,16 @@ export class HaTabsSubpageDataTable extends LitElement {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
       }
       .search-toolbar {
-        margin-left: -24px;
         color: var(--secondary-text-color);
       }
       search-input {
         position: relative;
         top: 2px;
       }
+      search-input.header {
+        left: -8px;
+        top: -7px;
+      }
     `;
   }
 }

src/layouts/hass-tabs-subpage.ts

@@ -45,7 +45,8 @@ class HassTabsSubpage extends LitElement {
       activeTab: PageNavigation | undefined,
       showAdvanced: boolean | undefined,
       _components,
-      _language
+      _language,
+      _narrow
     ) => {
       const shownTabs = tabs.filter(
         (page) =>
@@ -101,7 +102,8 @@ class HassTabsSubpage extends LitElement {
       this._activeTab,
       this.hass.userData?.showAdvanced,
       this.hass.config.components,
-      this.hass.language
+      this.hass.language,
+      this.narrow
     );
 
     return html`
@@ -113,7 +115,7 @@ class HassTabsSubpage extends LitElement {
         ></ha-paper-icon-button-arrow-prev>
         ${this.narrow
           ? html`
-              <div main-title><slot name="header"></slot></div>
+              <div class="main-title"><slot name="header"></slot></div>
             `
           : ""}
         ${tabs.length > 1 || !this.narrow
@@ -190,10 +192,8 @@ class HassTabsSubpage extends LitElement {
       }
 
       #tabbar:not(.bottom-bar) {
-        margin: auto;
-        left: 50%;
-        position: absolute;
-        transform: translate(-50%, 0);
+        flex: 1;
+        justify-content: center;
       }
 
       .tab {
@@ -228,14 +228,17 @@ class HassTabsSubpage extends LitElement {
       ha-menu-button,
       ha-paper-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
+        flex-shrink: 0;
         pointer-events: auto;
         color: var(--sidebar-icon-color);
       }
 
-      [main-title] {
-        margin: 0 0 0 24px;
+      .main-title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 40px;
         line-height: 20px;
-        flex-grow: 1;
       }
 
       .content {
@@ -247,11 +250,6 @@ class HassTabsSubpage extends LitElement {
         -webkit-overflow-scrolling: touch;
       }
 
-      #toolbar-icon {
-        position: absolute;
-        right: 16px;
-      }
-
       :host([narrow]) .content {
         height: calc(100% - 128px);
       }

src/managers/notification-manager.ts

@@ -82,9 +82,10 @@ class NotificationManager extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      :host {
+      ha-toast {
         display: flex;
         align-items: center;
+        justify-content: space-between;
       }
       mwc-button {
         color: var(--primary-color);

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"

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

src/panels/config/entities/ha-config-entities.ts

@@ -108,7 +108,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         type: "icon",
         sortable: true,
         filterable: true,
-        width: "55px",
+        width: "68px",
         template: (_status, entity: any) =>
           entity.unavailable || entity.disabled_by || entity.readonly
             ? html`
@@ -169,7 +169,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         ),
         sortable: true,
         filterable: true,
-        width: "20%",
+        width: "25%",
       };
       columns.platform = {
         title: this.hass.localize(

src/panels/config/ha-panel-config.ts

@@ -152,8 +152,6 @@ class HaPanelConfig extends HassRouterPage {
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",
-    cacheAll: true,
-    preloadAll: true,
     routes: {
       areas: {
         tag: "ha-config-areas",

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