mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 18:06:36 +00:00
border-radius fixes for state-badge (#23212)
This commit is contained in:
parent
6b230b6142
commit
d71b29d089
@ -113,71 +113,74 @@ export class StateBadge extends LitElement {
|
||||
|
||||
this.icon = true;
|
||||
|
||||
if (stateObj && this.overrideImage === undefined) {
|
||||
// hide icon if we have entity picture
|
||||
if (
|
||||
(stateObj.attributes.entity_picture_local ||
|
||||
stateObj.attributes.entity_picture) &&
|
||||
!this.overrideIcon
|
||||
) {
|
||||
let imageUrl =
|
||||
stateObj.attributes.entity_picture_local ||
|
||||
stateObj.attributes.entity_picture;
|
||||
if (stateObj) {
|
||||
const domain = computeDomain(stateObj.entity_id);
|
||||
if (this.overrideImage === undefined) {
|
||||
// hide icon if we have entity picture
|
||||
if (
|
||||
(stateObj.attributes.entity_picture_local ||
|
||||
stateObj.attributes.entity_picture) &&
|
||||
!this.overrideIcon
|
||||
) {
|
||||
let imageUrl =
|
||||
stateObj.attributes.entity_picture_local ||
|
||||
stateObj.attributes.entity_picture;
|
||||
if (this.hass) {
|
||||
imageUrl = this.hass.hassUrl(imageUrl);
|
||||
}
|
||||
if (domain === "camera") {
|
||||
imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
|
||||
}
|
||||
backgroundImage = `url(${imageUrl})`;
|
||||
this.icon = false;
|
||||
} else if (this.color) {
|
||||
// Externally provided overriding color wins over state color
|
||||
iconStyle.color = this.color;
|
||||
} else if (this._stateColor) {
|
||||
const color = stateColorCss(stateObj);
|
||||
if (color) {
|
||||
iconStyle.color = color;
|
||||
}
|
||||
if (stateObj.attributes.rgb_color) {
|
||||
iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`;
|
||||
}
|
||||
if (stateObj.attributes.brightness) {
|
||||
const brightness = stateObj.attributes.brightness;
|
||||
if (typeof brightness !== "number") {
|
||||
const errorMessage = `Type error: state-badge expected number, but type of ${
|
||||
stateObj.entity_id
|
||||
}.attributes.brightness is ${typeof brightness} (${brightness})`;
|
||||
// eslint-disable-next-line
|
||||
console.warn(errorMessage);
|
||||
}
|
||||
iconStyle.filter = stateColorBrightness(stateObj);
|
||||
}
|
||||
if (stateObj.attributes.hvac_action) {
|
||||
const hvacAction = stateObj.attributes.hvac_action;
|
||||
if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
|
||||
iconStyle.color = stateColorCss(
|
||||
stateObj,
|
||||
CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
|
||||
)!;
|
||||
} else {
|
||||
delete iconStyle.color;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (this.overrideImage) {
|
||||
let imageUrl = this.overrideImage;
|
||||
if (this.hass) {
|
||||
imageUrl = this.hass.hassUrl(imageUrl);
|
||||
}
|
||||
const domain = computeDomain(stateObj.entity_id);
|
||||
if (domain === "camera") {
|
||||
imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
|
||||
}
|
||||
backgroundImage = `url(${imageUrl})`;
|
||||
this.icon = false;
|
||||
if (domain === "update") {
|
||||
this.style.borderRadius = "0";
|
||||
} else if (domain === "media_player") {
|
||||
this.style.borderRadius = "8%";
|
||||
}
|
||||
} else if (this.color) {
|
||||
// Externally provided overriding color wins over state color
|
||||
iconStyle.color = this.color;
|
||||
} else if (this._stateColor) {
|
||||
const color = stateColorCss(stateObj);
|
||||
if (color) {
|
||||
iconStyle.color = color;
|
||||
}
|
||||
if (stateObj.attributes.rgb_color) {
|
||||
iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`;
|
||||
}
|
||||
if (stateObj.attributes.brightness) {
|
||||
const brightness = stateObj.attributes.brightness;
|
||||
if (typeof brightness !== "number") {
|
||||
const errorMessage = `Type error: state-badge expected number, but type of ${
|
||||
stateObj.entity_id
|
||||
}.attributes.brightness is ${typeof brightness} (${brightness})`;
|
||||
// eslint-disable-next-line
|
||||
console.warn(errorMessage);
|
||||
}
|
||||
iconStyle.filter = stateColorBrightness(stateObj);
|
||||
}
|
||||
if (stateObj.attributes.hvac_action) {
|
||||
const hvacAction = stateObj.attributes.hvac_action;
|
||||
if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
|
||||
iconStyle.color = stateColorCss(
|
||||
stateObj,
|
||||
CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
|
||||
)!;
|
||||
} else {
|
||||
delete iconStyle.color;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (this.overrideImage) {
|
||||
let imageUrl = this.overrideImage;
|
||||
if (this.hass) {
|
||||
imageUrl = this.hass.hassUrl(imageUrl);
|
||||
|
||||
if (domain === "update") {
|
||||
this.style.borderRadius = "0";
|
||||
} else if (domain === "media_player" || domain === "camera") {
|
||||
this.style.borderRadius = "8%";
|
||||
}
|
||||
backgroundImage = `url(${imageUrl})`;
|
||||
this.icon = false;
|
||||
}
|
||||
|
||||
this._iconStyle = iconStyle;
|
||||
|
Loading…
x
Reference in New Issue
Block a user