From 8e6fac5bf189913fb34f3f9c381e32f5cc429cf6 Mon Sep 17 00:00:00 2001
From: Ludeeus <ludeeus@ludeeus.dev>
Date: Wed, 9 Sep 2020 13:44:55 +0000
Subject: [PATCH] Add ha-user-badge to view visibility editor

---
 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 70c47d60234b..eead0784c2a3 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 09972237fcae..cb978dd00432 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 8bb8f62f0741..f5ed39cf9b81 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>
         `
       )}
     `;