mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
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:
parent
faee2c3e1b
commit
d1a9cb488a
71
src/components/user/ha-person-badge.ts
Normal file
71
src/components/user/ha-person-badge.ts
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user