Add person badge (#6785)

* Add person badge

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

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>

* Revert screwup by @ludeeus

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
Co-authored-by: Ludeeus <ludeeus@ludeeus.dev>
This commit is contained in:
Bram Kragten 2020-09-04 15:54:42 +02:00 committed by GitHub
parent faee2c3e1b
commit d1a9cb488a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 56 deletions

View File

@ -0,0 +1,71 @@
import {
css,
CSSResult,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import { styleMap } from "lit-html/directives/style-map";
import { Person } from "../../data/person";
import { computeInitials } from "./ha-user-badge";
@customElement("ha-person-badge")
class PersonBadge extends LitElement {
@property({ attribute: false }) public person?: Person;
protected render(): TemplateResult {
if (!this.person) {
return html``;
}
const picture = this.person.picture;
if (picture) {
return html`<div
style=${styleMap({ backgroundImage: `url(${picture})` })}
class="picture"
></div>`;
}
const initials = computeInitials(this.person.name);
return html`<div
class="initials ${classMap({ long: initials!.length > 2 })}"
>
${initials}
</div>`;
}
static get styles(): CSSResult {
return css`
.picture {
width: 40px;
height: 40px;
background-size: cover;
border-radius: 50%;
}
.initials {
display: inline-block;
box-sizing: border-box;
width: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
background-color: var(--light-primary-color);
text-decoration: none;
color: var(--text-light-primary-color, var(--primary-text-color));
overflow: hidden;
}
.initials.long {
font-size: 80%;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-person-badge": PersonBadge;
}
}

View File

@ -8,15 +8,15 @@ import {
property, property,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
import { toggleAttribute } from "../../common/dom/toggle_attribute";
import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { User } from "../../data/user"; import { User } from "../../data/user";
import { CurrentUser, HomeAssistant } from "../../types"; import { CurrentUser, HomeAssistant } from "../../types";
const computeInitials = (name: string) => { export const computeInitials = (name: string) => {
if (!name) { if (!name) {
return "user"; return "?";
} }
return ( return (
name name
@ -31,7 +31,7 @@ const computeInitials = (name: string) => {
}; };
@customElement("ha-user-badge") @customElement("ha-user-badge")
class StateBadge extends LitElement { class UserBadge extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public user?: User | CurrentUser; @property({ attribute: false }) public user?: User | CurrentUser;
@ -44,14 +44,6 @@ class StateBadge extends LitElement {
super.updated(changedProps); super.updated(changedProps);
if (changedProps.has("user")) { if (changedProps.has("user")) {
this._getPersonPicture(); this._getPersonPicture();
if (!this._personPicture) {
toggleAttribute(
this,
"long",
(this.hass.user ? computeInitials(this.hass.user.name) : "?").length >
2
);
}
return; return;
} }
const oldHass = changedProps.get("hass"); const oldHass = changedProps.get("hass");
@ -67,6 +59,8 @@ class StateBadge extends LitElement {
} else { } else {
this._getPersonPicture(); this._getPersonPicture();
} }
} else if (!this._personEntityId && oldHass) {
this._getPersonPicture();
} }
} }
@ -74,22 +68,20 @@ class StateBadge extends LitElement {
if (!this.hass || !this.user) { if (!this.hass || !this.user) {
return html``; return html``;
} }
const user = this.user;
const picture = this._personPicture; const picture = this._personPicture;
return html` if (picture) {
${picture return html`<div
? html`<div
style=${styleMap({ backgroundImage: `url(${picture})` })} style=${styleMap({ backgroundImage: `url(${picture})` })}
class="picture" class="picture"
></div>` ></div>`;
: html`<div }
class="initials" const initials = computeInitials(this.user.name);
?long=${(user ? computeInitials(user.name) : "?").length > 2} return html`<div
class="initials ${classMap({ long: initials!.length > 2 })}"
> >
${computeInitials(user?.name!)} ${initials}
</div>`} </div>`;
`;
} }
private _getPersonPicture() { private _getPersonPicture() {
@ -100,7 +92,7 @@ class StateBadge extends LitElement {
} }
for (const entity of Object.values(this.hass.states)) { for (const entity of Object.values(this.hass.states)) {
if ( if (
entity.attributes.user_id === this.user!.id && entity.attributes.user_id === this.user.id &&
computeStateDomain(entity) === "person" computeStateDomain(entity) === "person"
) { ) {
this._personEntityId = entity.entity_id; this._personEntityId = entity.entity_id;
@ -130,7 +122,7 @@ class StateBadge extends LitElement {
color: var(--text-light-primary-color, var(--primary-text-color)); color: var(--text-light-primary-color, var(--primary-text-color));
overflow: hidden; overflow: hidden;
} }
:host([long]) .initials { .initials.long {
font-size: 80%; font-size: 80%;
} }
`; `;
@ -139,6 +131,6 @@ class StateBadge extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-user-badge": StateBadge; "ha-user-badge": UserBadge;
} }
} }

View File

@ -1,4 +1,3 @@
import "@material/mwc-fab";
import { mdiPlus } from "@mdi/js"; import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item-body";
@ -11,11 +10,10 @@ import {
property, property,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { styleMap } from "lit-html/directives/style-map";
import { compare } from "../../../common/string/compare"; import { compare } from "../../../common/string/compare";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/user/ha-user-badge"; import "../../../components/user/ha-person-badge";
import { import {
createPerson, createPerson,
deletePerson, deletePerson,
@ -87,15 +85,10 @@ class HaConfigPerson extends LitElement {
${this._storageItems.map((entry) => { ${this._storageItems.map((entry) => {
return html` return html`
<paper-icon-item @click=${this._openEditEntry} .entry=${entry}> <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
${entry.picture <ha-person-badge
? html`<div
style=${styleMap({
backgroundImage: `url(${entry.picture})`,
})}
class="picture"
slot="item-icon" slot="item-icon"
></div>` .person=${entry}
: ""} ></ha-person-badge>
<paper-item-body> <paper-item-body>
${entry.name} ${entry.name}
</paper-item-body> </paper-item-body>
@ -123,15 +116,10 @@ class HaConfigPerson extends LitElement {
${this._configItems.map((entry) => { ${this._configItems.map((entry) => {
return html` return html`
<paper-icon-item> <paper-icon-item>
${entry.picture <ha-person-badge
? html`<div
style=${styleMap({
backgroundImage: `url(${entry.picture})`,
})}
class="picture"
slot="item-icon" slot="item-icon"
></div>` .person=${entry}
: ""} ></ha-person-badge>
<paper-item-body> <paper-item-body>
${entry.name} ${entry.name}
</paper-item-body> </paper-item-body>
@ -248,12 +236,6 @@ class HaConfigPerson extends LitElement {
margin: 16px auto; margin: 16px auto;
overflow: hidden; overflow: hidden;
} }
.picture {
width: 40px;
height: 40px;
background-size: cover;
border-radius: 50%;
}
.empty { .empty {
text-align: center; text-align: center;
padding: 8px; padding: 8px;