Merge pull request #3370 from home-assistant/fixes-yo

Fixes yo

build-scripts/gulp/entry-html.js

@@ -86,7 +86,7 @@ gulp.task("gen-index-app-dev", (done) => {
     es5CoreJS: "/frontend_es5/core.js",
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
     es5HassIconsJS: "/frontend_es5/hass-icons.js",
-  });
+  }).replace(/#THEMEC/g, "{{ theme_color }}");
 
   fs.outputFileSync(path.resolve(config.root, "index.html"), content);
   done();

src/common/search/search-input.ts

@@ -26,7 +26,7 @@ class SearchInput extends LitElement {
           @value-changed=${this._filterInputChanged}
         >
           <iron-icon
-            icon="mdi:magnify"
+            icon="hass:magnify"
             slot="prefix"
             class="prefix"
           ></iron-icon>
@@ -36,7 +36,7 @@ class SearchInput extends LitElement {
                 slot="suffix"
                 class="suffix"
                 @click=${this._clearSearch}
-                icon="mdi:close"
+                icon="hass:close"
                 alt="Clear"
                 title="Clear"
               ></paper-icon-button>

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -69,9 +69,10 @@ class StepFlowCreateEntry extends LitElement {
                   (device) =>
                     html`
                       <div class="device">
-                        <b>${device.name}</b><br />
+                        <div>
-                        ${device.model} (${device.manufacturer})
+                          <b>${device.name}</b><br />
-
+                          ${device.model} (${device.manufacturer})
+                        </div>
                         <paper-dropdown-menu-light
                           label="Area"
                           .device=${device.id}
@@ -157,6 +158,8 @@ class StepFlowCreateEntry extends LitElement {
           display: flex;
           flex-wrap: wrap;
           margin: -4px;
+          max-height: 600px;
+          overflow-y: auto;
         }
         .device {
           border: 1px solid var(--divider-color);
@@ -178,7 +181,7 @@ class StepFlowCreateEntry extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           .device {
-            width: auto;
+            width: 100%;
           }
         }
       `,

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -18,6 +18,7 @@ import * as Fuse from "fuse.js";
 
 import "../../components/ha-icon-next";
 import "../../common/search/search-input";
+import { styleMap } from "lit-html/directives/style-map";
 
 interface HandlerObj {
   name: string;
@@ -29,6 +30,7 @@ class StepFlowPickHandler extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public handlers!: string[];
   @property() private filter?: string;
+  private _width?: number;
 
   private _getHandlers = memoizeOne((h: string[], filter?: string) => {
     const handlers: HandlerObj[] = h.map((handler) => {
@@ -58,11 +60,11 @@ class StepFlowPickHandler extends LitElement {
 
     return html`
       <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
-      <div>
+      <search-input
-        <search-input
+        .filter=${this.filter}
-          .filter=${this.filter}
+        @value-changed=${this._filterChanged}
-          @value-changed=${this._filterChanged}
+      ></search-input>
-        ></search-input>
+      <div style=${styleMap({ width: `${this._width}px` })}>
         ${handlers.map(
           (handler: HandlerObj) =>
             html`
@@ -80,6 +82,11 @@ class StepFlowPickHandler extends LitElement {
 
   private async _filterChanged(e) {
     this.filter = e.detail.value;
+
+    // Store the width so that when we search, box doesn't jump
+    if (this._width === undefined) {
+      this._width = this.shadowRoot!.querySelector("div")!.clientWidth;
+    }
   }
 
   private async _handlerPicked(ev) {

src/dialogs/notifications/notification-drawer.js

@@ -34,6 +34,8 @@ export class HuiNotificationDrawer extends EventsMixin(
       .notifications {
         overflow-y: auto;
         padding-top: 16px;
+        height: calc(100% - 65px);
+        box-sizing: border-box;
       }
 
       .notification {

src/panels/profile/ha-panel-profile.js

@@ -104,10 +104,12 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
             mfa-modules="[[hass.user.mfa_modules]]"
           ></ha-mfa-modules-card>
 
-          <ha-advanced-mode-card
+          <template is="dom-if" if="[[_isAdmin(hass.user)]]">
-            hass="[[hass]]"
+            <ha-advanced-mode-card
-            core-user-data="[[_coreUserData]]"
+              hass="[[hass]]"
-          ></ha-advanced-mode-card>
+              core-user-data="[[_coreUserData]]"
+            ></ha-advanced-mode-card>
+          </template>
 
           <ha-refresh-tokens-card
             hass="[[hass]]"
@@ -168,6 +170,10 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
       (cred) => cred.auth_provider_type === "homeassistant"
     );
   }
+
+  _isAdmin(user) {
+    return user.is_admin;
+  }
 }
 
 customElements.define("ha-panel-profile", HaPanelProfile);