mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +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:
Bram Kragten
GitHub
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,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-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 { User } from "../../data/user";
|
||||
import { CurrentUser, HomeAssistant } from "../../types";
|
||||
|
||||
const computeInitials = (name: string) => {
|
||||
export const computeInitials = (name: string) => {
|
||||
if (!name) {
|
||||
return "user";
|
||||
return "?";
|
||||
}
|
||||
return (
|
||||
name
|
||||
@ -31,7 +31,7 @@ const computeInitials = (name: string) => {
|
||||
};
|
||||
|
||||
@customElement("ha-user-badge")
|
||||
class StateBadge extends LitElement {
|
||||
class UserBadge extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public user?: User | CurrentUser;
|
||||
@ -44,14 +44,6 @@ class StateBadge extends LitElement {
|
||||
super.updated(changedProps);
|
||||
if (changedProps.has("user")) {
|
||||
this._getPersonPicture();
|
||||
if (!this._personPicture) {
|
||||
toggleAttribute(
|
||||
this,
|
||||
"long",
|
||||
(this.hass.user ? computeInitials(this.hass.user.name) : "?").length >
|
||||
2
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const oldHass = changedProps.get("hass");
|
||||
@ -67,6 +59,8 @@ class StateBadge extends LitElement {
|
||||
} else {
|
||||
this._getPersonPicture();
|
||||
}
|
||||
} else if (!this._personEntityId && oldHass) {
|
||||
this._getPersonPicture();
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,22 +68,20 @@ class StateBadge extends LitElement {
|
||||
if (!this.hass || !this.user) {
|
||||
return html``;
|
||||
}
|
||||
const user = this.user;
|
||||
const picture = this._personPicture;
|
||||
|
||||
return html`
|
||||
${picture
|
||||
? html`<div
|
||||
style=${styleMap({ backgroundImage: `url(${picture})` })}
|
||||
class="picture"
|
||||
></div>`
|
||||
: html`<div
|
||||
class="initials"
|
||||
?long=${(user ? computeInitials(user.name) : "?").length > 2}
|
||||
>
|
||||
${computeInitials(user?.name!)}
|
||||
</div>`}
|
||||
`;
|
||||
if (picture) {
|
||||
return html`<div
|
||||
style=${styleMap({ backgroundImage: `url(${picture})` })}
|
||||
class="picture"
|
||||
></div>`;
|
||||
}
|
||||
const initials = computeInitials(this.user.name);
|
||||
return html`<div
|
||||
class="initials ${classMap({ long: initials!.length > 2 })}"
|
||||
>
|
||||
${initials}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
private _getPersonPicture() {
|
||||
@ -100,7 +92,7 @@ class StateBadge extends LitElement {
|
||||
}
|
||||
for (const entity of Object.values(this.hass.states)) {
|
||||
if (
|
||||
entity.attributes.user_id === this.user!.id &&
|
||||
entity.attributes.user_id === this.user.id &&
|
||||
computeStateDomain(entity) === "person"
|
||||
) {
|
||||
this._personEntityId = entity.entity_id;
|
||||
@ -130,7 +122,7 @@ class StateBadge extends LitElement {
|
||||
color: var(--text-light-primary-color, var(--primary-text-color));
|
||||
overflow: hidden;
|
||||
}
|
||||
:host([long]) .initials {
|
||||
.initials.long {
|
||||
font-size: 80%;
|
||||
}
|
||||
`;
|
||||
@ -139,6 +131,6 @@ class StateBadge extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-user-badge": StateBadge;
|
||||
"ha-user-badge": UserBadge;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-fab";
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
@ -11,11 +10,10 @@ import {
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { styleMap } from "lit-html/directives/style-map";
|
||||
import { compare } from "../../../common/string/compare";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/user/ha-user-badge";
|
||||
import "../../../components/user/ha-person-badge";
|
||||
import {
|
||||
createPerson,
|
||||
deletePerson,
|
||||
@ -87,15 +85,10 @@ class HaConfigPerson extends LitElement {
|
||||
${this._storageItems.map((entry) => {
|
||||
return html`
|
||||
<paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
|
||||
${entry.picture
|
||||
? html`<div
|
||||
style=${styleMap({
|
||||
backgroundImage: `url(${entry.picture})`,
|
||||
})}
|
||||
class="picture"
|
||||
slot="item-icon"
|
||||
></div>`
|
||||
: ""}
|
||||
<ha-person-badge
|
||||
slot="item-icon"
|
||||
.person=${entry}
|
||||
></ha-person-badge>
|
||||
<paper-item-body>
|
||||
${entry.name}
|
||||
</paper-item-body>
|
||||
@ -123,15 +116,10 @@ class HaConfigPerson extends LitElement {
|
||||
${this._configItems.map((entry) => {
|
||||
return html`
|
||||
<paper-icon-item>
|
||||
${entry.picture
|
||||
? html`<div
|
||||
style=${styleMap({
|
||||
backgroundImage: `url(${entry.picture})`,
|
||||
})}
|
||||
class="picture"
|
||||
slot="item-icon"
|
||||
></div>`
|
||||
: ""}
|
||||
<ha-person-badge
|
||||
slot="item-icon"
|
||||
.person=${entry}
|
||||
></ha-person-badge>
|
||||
<paper-item-body>
|
||||
${entry.name}
|
||||
</paper-item-body>
|
||||
@ -248,12 +236,6 @@ class HaConfigPerson extends LitElement {
|
||||
margin: 16px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.picture {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user