From 42bf350034b7a53f0c6ba76791ea9d2a65bf6d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Wed, 9 Sep 2020 17:26:22 +0200
Subject: [PATCH] Add ha-user-badge to view visibility editor (#6885)

---
 src/components/user/ha-person-badge.ts             |  3 +++
 src/components/user/ha-user-badge.ts               |  3 +++
 .../view-editor/hui-view-visibility-editor.ts      | 14 ++++++++++----
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts
index 70c47d6023..eead0784c2 100644
--- a/src/components/user/ha-person-badge.ts
+++ b/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;
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
index 09972237fc..cb978dd004 100644
--- a/src/components/user/ha-user-badge.ts
+++ b/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;
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
index 8bb8f62f07..f5ed39cf9b 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
@@ -1,13 +1,13 @@
-import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -15,6 +15,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { compare } from "../../../../common/string/compare";
 import { HaSwitch } from "../../../../components/ha-switch";
+import "../../../../components/user/ha-user-badge";
 import { LovelaceViewConfig, ShowViewConfig } from "../../../../data/lovelace";
 import { fetchUsers, User } from "../../../../data/user";
 import { HomeAssistant } from "../../../../types";
@@ -69,14 +70,19 @@ export class HuiViewVisibilityEditor extends LitElement {
       </p>
       ${this._sortedUsers(this._users).map(
         (user) => html`
-          <paper-item>
+          <paper-icon-item>
+            <ha-user-badge
+              slot="item-icon"
+              .hass=${this.hass}
+              .user=${user}
+            ></ha-user-badge>
             <paper-item-body>${user.name}</paper-item-body>
             <ha-switch
               .userId="${user.id}"
               @change=${this.valChange}
               .checked=${this.checkUser(user.id)}
             ></ha-switch>
-          </paper-item>
+          </paper-icon-item>
         `
       )}
     `;