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

Add per domain style for tile card image (#19419)

Browse Source
This commit is contained in:
Paul Bottein 2024-01-16 15:04:18 +01:00 committed by GitHub
parent df2514d79f
commit 490ed86e86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tile/ha-tile-image.ts
View File

@ -1,16 +1,19 @@
import { CSSResultGroup, html, css, LitElement, nothing } from "lit";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
export type TileImageStyle = "square" | "rounded-square" | "circle";
@customElement("ha-tile-image")
export class HaTileImage extends LitElement {
@property() public imageUrl?: string;
@property() public imageAlt?: string;
@property() public imageStyle: TileImageStyle = "circle";
protected render() {
return html`
<div class="image">
<div class="image ${this.imageStyle}">
${this.imageUrl
? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
: nothing}
@ -31,6 +34,12 @@ export class HaTileImage extends LitElement {
justify-content: center;
overflow: hidden;
}
.image.rounded-square {
border-radius: 8%;
}
.image.square {
border-radius: 0;
}
.image img {
width: 100%;
height: 100%;

11
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -33,22 +33,23 @@ import "../../../components/ha-card";
import "../../../components/tile/ha-tile-badge";
import "../../../components/tile/ha-tile-icon";
import "../../../components/tile/ha-tile-image";
import type { TileImageStyle } from "../../../components/tile/ha-tile-image";
import "../../../components/tile/ha-tile-info";
import { cameraUrlWithWidthHeight } from "../../../data/camera";
import { isUnavailableState } from "../../../data/entity";
import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
import { UpdateEntity, computeUpdateStateDisplay } from "../../../data/update";
import { HomeAssistant } from "../../../types";
import "../card-features/hui-card-features";
import { actionHandler } from "../common/directives/action-handler-directive";
import { findEntities } from "../common/find-entities";
import { handleAction } from "../common/handle-action";
import { hasAction } from "../common/has-action";
import "../components/hui-timestamp-display";
import "../card-features/hui-card-features";
import type { LovelaceCard, LovelaceCardEditor } from "../types";
import { computeTileBadge } from "./tile/badges/tile-badge";
import type { ThermostatCardConfig, TileCardConfig } from "./types";
import { UpdateEntity, computeUpdateStateDisplay } from "../../../data/update";
const TIMESTAMP_STATE_DOMAINS = ["button", "input_button", "scene"];
@ -61,6 +62,11 @@ export const getEntityDefaultTileIconAction = (entityId: string) => {
return supportsIconAction ? "toggle" : "more-info";
};
const DOMAIN_IMAGE_STYLE: Record<string, TileImageStyle> = {
update: "square",
media_player: "rounded-square",
};
@customElement("hui-tile-card")
export class HuiTileCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> {
@ -413,6 +419,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
${imageUrl
? html`
<ha-tile-image
.imageStyle=${DOMAIN_IMAGE_STYLE[domain] || "circle"}
class="icon"
.imageUrl=${imageUrl}
></ha-tile-image>