20200909.0

setup.py

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

src/common/entity/binary_sensor_icon.ts

@@ -3,49 +3,51 @@ import { HassEntity } from "home-assistant-js-websocket";
 /** Return an icon representing a binary sensor state. */
 
 export const binarySensorIcon = (state: HassEntity) => {
-  const activated = state.state && state.state === "off";
+  const is_off = state.state && state.state === "off";
   switch (state.attributes.device_class) {
     case "battery":
-      return activated ? "hass:battery" : "hass:battery-outline";
+      return is_off ? "hass:battery" : "hass:battery-outline";
+    case "battery_charging":
+      return is_off ? "hass:battery" : "hass:battery-charging";
     case "cold":
-      return activated ? "hass:thermometer" : "hass:snowflake";
+      return is_off ? "hass:thermometer" : "hass:snowflake";
     case "connectivity":
-      return activated ? "hass:server-network-off" : "hass:server-network";
+      return is_off ? "hass:server-network-off" : "hass:server-network";
     case "door":
-      return activated ? "hass:door-closed" : "hass:door-open";
+      return is_off ? "hass:door-closed" : "hass:door-open";
     case "garage_door":
-      return activated ? "hass:garage" : "hass:garage-open";
+      return is_off ? "hass:garage" : "hass:garage-open";
     case "gas":
     case "power":
     case "problem":
     case "safety":
     case "smoke":
-      return activated ? "hass:shield-check" : "hass:alert";
+      return is_off ? "hass:shield-check" : "hass:alert";
     case "heat":
-      return activated ? "hass:thermometer" : "hass:fire";
+      return is_off ? "hass:thermometer" : "hass:fire";
     case "light":
-      return activated ? "hass:brightness-5" : "hass:brightness-7";
+      return is_off ? "hass:brightness-5" : "hass:brightness-7";
     case "lock":
-      return activated ? "hass:lock" : "hass:lock-open";
+      return is_off ? "hass:lock" : "hass:lock-open";
     case "moisture":
-      return activated ? "hass:water-off" : "hass:water";
+      return is_off ? "hass:water-off" : "hass:water";
     case "motion":
-      return activated ? "hass:walk" : "hass:run";
+      return is_off ? "hass:walk" : "hass:run";
     case "occupancy":
-      return activated ? "hass:home-outline" : "hass:home";
+      return is_off ? "hass:home-outline" : "hass:home";
     case "opening":
-      return activated ? "hass:square" : "hass:square-outline";
+      return is_off ? "hass:square" : "hass:square-outline";
     case "plug":
-      return activated ? "hass:power-plug-off" : "hass:power-plug";
+      return is_off ? "hass:power-plug-off" : "hass:power-plug";
     case "presence":
-      return activated ? "hass:home-outline" : "hass:home";
+      return is_off ? "hass:home-outline" : "hass:home";
     case "sound":
-      return activated ? "hass:music-note-off" : "hass:music-note";
+      return is_off ? "hass:music-note-off" : "hass:music-note";
     case "vibration":
-      return activated ? "hass:crop-portrait" : "hass:vibrate";
+      return is_off ? "hass:crop-portrait" : "hass:vibrate";
     case "window":
-      return activated ? "hass:window-closed" : "hass:window-open";
+      return is_off ? "hass:window-closed" : "hass:window-open";
     default:
-      return activated ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
+      return is_off ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
   }
 };

src/components/ha-camera-stream.ts

@@ -35,7 +35,7 @@ class HaCameraStream extends LitElement {
   @internalProperty() private _url?: string;
 
   protected render(): TemplateResult {
-    if (!this.stateObj || (!this._forceMJPEG && !this._url)) {
+    if (!this.stateObj) {
       return html``;
     }
 
@@ -52,16 +52,18 @@ class HaCameraStream extends LitElement {
               )} camera.`}
             />
           `
-        : html`
+        : this._url
+        ? html`
             <ha-hls-player
               autoplay
               muted
               playsinline
               ?controls=${this.showControls}
               .hass=${this.hass}
-              .url=${this._url!}
+              .url=${this._url}
             ></ha-hls-player>
-          `}
+          `
+        : ""}
     `;
   }
 

src/components/ha-sidebar.ts

@@ -526,7 +526,7 @@ class HaSidebar extends LitElement {
 
   private async _hidePanel(ev: Event) {
     ev.preventDefault();
-    const panel = (ev.target as any).panel;
+    const panel = (ev.currentTarget as any).panel;
     if (this._hiddenPanels.includes(panel)) {
       return;
     }
@@ -692,12 +692,13 @@ class HaSidebar extends LitElement {
             : html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
           <span class="item-text">${title}</span>
           ${this._editMode
-            ? html`<ha-svg-icon
+            ? html`<mwc-icon-button
                 class="hide-panel"
                 .panel=${urlPath}
                 @click=${this._hidePanel}
-                .path=${mdiClose}
-              ></ha-svg-icon>`
+              >
+                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              </mwc-icon-button>`
             : ""}
         </paper-icon-item>
       </a>

src/components/media-player/ha-media-player-browse.ts

@@ -21,7 +21,6 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { compare } from "../../common/string/compare";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
 import {
@@ -335,6 +334,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                       .item=${child}
                       graphic="avatar"
                       hasMeta
+                      dir=${computeRTLDirection(this.hass)}
                     >
                       <div
                         class="graphic"
@@ -360,7 +360,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                           ></ha-svg-icon>
                         </mwc-icon-button>
                       </div>
-                      <span>${child.title}</span>
+                      <span class="title">${child.title}</span>
                     </mwc-list-item>
                     <li divider role="separator"></li>
                   `
@@ -477,13 +477,6 @@ export class HaMediaPlayerBrowse extends LitElement {
             mediaContentType
           )
         : await browseLocalMediaPlayer(this.hass, mediaContentId);
-    itemData.children = itemData.children?.sort((first, second) =>
-      !first.can_expand && second.can_expand
-        ? 1
-        : first.can_expand && !second.can_expand
-        ? -1
-        : compare(first.title, second.title)
-    );
 
     return itemData;
   }
@@ -620,6 +613,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         mwc-list {
           --mdc-list-vertical-padding: 0;
+          --mdc-list-item-graphic-margin: 0;
           --mdc-theme-text-icon-on-background: var(--secondary-text-color);
           margin-top: 10px;
         }
@@ -728,6 +722,14 @@ export class HaMediaPlayerBrowse extends LitElement {
           background-color: transparent;
         }
 
+        mwc-list-item .title {
+          margin-left: 16px;
+        }
+        mwc-list-item[dir="rtl"] .title {
+          margin-right: 16px;
+          margin-left: 0;
+        }
+
         /* ============= Narrow ============= */
 
         :host([narrow]) {

src/components/user/ha-person-badge.ts

@@ -39,6 +39,9 @@ class PersonBadge extends LitElement {
 
   static get styles(): CSSResult {
     return css`
+      :host {
+        display: contents;
+      }
       .picture {
         width: 40px;
         height: 40px;

src/components/user/ha-user-badge.ts

@@ -104,6 +104,9 @@ class UserBadge extends LitElement {
 
   static get styles(): CSSResult {
     return css`
+      :host {
+        display: contents;
+      }
       .picture {
         width: 40px;
         height: 40px;

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -97,8 +97,13 @@ export const showConfigFlowDialog = (
     },
 
     renderExternalStepHeader(hass, step) {
-      return hass.localize(
-        `component.${step.handler}.config.step.${step.step_id}.title`
+      return (
+        hass.localize(
+          `component.${step.handler}.config.step.${step.step_id}.title`
+        ) ||
+        hass.localize(
+          "ui.panel.config.integrations.config_flow.external_step.open_site"
+        )
       );
     },
 

src/dialogs/more-info/controls/more-info-automation.ts

@@ -34,7 +34,10 @@ class MoreInfoAutomation extends LitElement {
       </div>
 
       <div class="actions">
-        <mwc-button @click=${this.handleAction}>
+        <mwc-button
+          @click=${this.handleAction}
+          .disabled=${this.stateObj!.state === "unavailable"}
+        >
           ${this.hass.localize("ui.card.automation.trigger")}
         </mwc-button>
       </div>
@@ -52,7 +55,7 @@ class MoreInfoAutomation extends LitElement {
         justify-content: space-between;
       }
       .actions {
-        margin: 36px 0 8px 0;
+        margin: 8px 0;
         text-align: right;
       }
     `;

src/dialogs/more-info/controls/more-info-camera.ts

@@ -4,9 +4,9 @@ import {
   css,
   CSSResult,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -47,7 +47,7 @@ class MoreInfoCamera extends LitElement {
     return html`
       <ha-camera-stream
         .hass=${this.hass}
-        .stateObj="${this.stateObj}"
+        .stateObj=${this.stateObj}
         showcontrols
       ></ha-camera-stream>
       ${this._cameraPrefs

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -29,9 +29,19 @@ import { haStyleDialog } from "../../resources/styles";
 import "../../state-summary/state-card-content";
 import { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
+import "./ha-more-info-history";
 import "./more-info-content";
 
 const DOMAINS_NO_INFO = ["camera", "configurator"];
+const CONTROL_DOMAINS = [
+  "light",
+  "media_player",
+  "vacuum",
+  "alarm_control_panel",
+  "climate",
+  "humidifier",
+  "weather",
+];
 const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
 const EDITABLE_DOMAINS = ["script"];
 
@@ -127,15 +137,16 @@ export class MoreInfoDialog extends LitElement {
                 `
               : ""}
           </ha-header-bar>
-          ${this._computeShowHistoryComponent(entityId)
+          ${CONTROL_DOMAINS.includes(domain) &&
+          this._computeShowHistoryComponent(entityId)
             ? html`
                 <mwc-tab-bar
                   .activeIndex=${this._currTabIndex}
                   @MDCTabBar:activated=${this._handleTabChanged}
                 >
                   <mwc-tab
                     .label=${this.hass.localize(
-                      "ui.dialogs.more_info_control.controls"
+                      "ui.dialogs.more_info_control.details"
                     )}
                   ></mwc-tab>
                   <mwc-tab
@@ -164,6 +175,13 @@ export class MoreInfoDialog extends LitElement {
                     .stateObj=${stateObj}
                     .hass=${this.hass}
                   ></more-info-content>
+                  ${CONTROL_DOMAINS.includes(domain) ||
+                  !this._computeShowHistoryComponent(entityId)
+                    ? ""
+                    : html`<ha-more-info-history
+                        .hass=${this.hass}
+                        .entityId=${this._entityId}
+                      ></ha-more-info-history>`}
                   ${stateObj.attributes.restored
                     ? html`
                         <p>
@@ -188,21 +206,17 @@ export class MoreInfoDialog extends LitElement {
                     : ""}
                 `
               : html`
-                  <ha-more-info-tab-history
+                  <ha-more-info-history
                     .hass=${this.hass}
                     .entityId=${this._entityId}
-                  ></ha-more-info-tab-history>
+                  ></ha-more-info-history>
                 `
           )}
         </div>
       </ha-dialog>
     `;
   }
 
-  protected firstUpdated(): void {
-    import("./ha-more-info-tab-history");
-  }
-
   private _enlarge() {
     this.large = !this.large;
   }