jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

If entity has "entity_picture" - allow using a CSS theme var for border-radius (#24248)

Browse Source 
* added CSS theme var for border-radius

* prettier

* moved "50%" out of "styles"

* small refactoring

* lint

* lint

* lint

* revert to this.style.borderRadius

* prettier

* adding classes

* fixed styles + setting a class

* clean-up

* remove old classes in render()

* "!important" not needed

* using map
This commit is contained in:
ildar170975 2025-04-14 09:09:52 +03:00 committed by GitHub
parent 6793753755
commit 4fca09f9ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/entity/state-badge.ts
View File

@ -79,6 +79,17 @@ export class StateBadge extends LitElement {
</div>`;
}
const cls = this.getClass();
if (cls) {
cls.forEach((toSet, className) => {
if (!toSet) {
this.classList.remove(className);
} else {
this.classList.add(className);
}
});
}
if (!this.icon) {
return nothing;
}
@ -175,18 +186,32 @@ export class StateBadge extends LitElement {
backgroundImage = `url(${imageUrl})`;
this.icon = false;
}
if (domain === "update") {
this.style.borderRadius = "0";
} else if (domain === "media_player" || domain === "camera") {
this.style.borderRadius = "8%";
}
}
this._iconStyle = iconStyle;
this.style.backgroundImage = backgroundImage;
}
protected getClass() {
const cls = new Map(
["has-no-radius", "has-media-image", "has-image"].map((_cls) => [
_cls,
false,
])
);
if (this.stateObj) {
const domain = computeDomain(this.stateObj.entity_id);
if (domain === "update") {
cls.set("has-no-radius", true);
} else if (domain === "media_player" || domain === "camera") {
cls.set("has-media-image", true);
} else if (this.style.backgroundImage !== "") {
cls.set("has-image", true);
}
}
return cls;
}
static get styles(): CSSResultGroup {
return [
iconColorCSS,
@ -196,7 +221,7 @@ export class StateBadge extends LitElement {
display: inline-flex;
width: 40px;
color: var(--paper-item-icon-color, #44739e);
border-radius: 50%;
border-radius: var(--state-badge-border-radius, 50%);
height: 40px;
background-size: cover;
box-sizing: border-box;
@ -204,6 +229,15 @@ export class StateBadge extends LitElement {
align-items: center;
justify-content: center;
}
:host(.has-image) {
border-radius: var(--state-badge-with-image-border-radius, 50%);
}
:host(.has-media-image) {
border-radius: var(--state-badge-with-media-image-border-radius, 8%);
}
:host(.has-no-radius) {
border-radius: 0;
}
:host(:focus) {
outline: none;
}