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

Fix tile card interaction when border width is set to 0 (#18941)

Browse Source
This commit is contained in:
Paul Bottein 2023-12-07 14:40:23 +01:00 committed by GitHub
parent eebcab435d
commit 8d08aa8c79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -310,24 +310,22 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
if (!stateObj) { if (!stateObj) {
return html` return html`
<ha-card> <ha-card>
<div class="tile"> <div class="content ${classMap(contentClasses)}">
<div class="content ${classMap(contentClasses)}"> <div class="icon-container">
<div class="icon-container"> <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
<ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon> <ha-tile-badge
<ha-tile-badge class="badge"
class="badge" .iconPath=${mdiExclamationThick}
.iconPath=${mdiExclamationThick} style=${styleMap({
style=${styleMap({ "--tile-badge-background-color": `var(--red-color)`,
"--tile-badge-background-color": `var(--red-color)`, })}
})} ></ha-tile-badge>
></ha-tile-badge>
</div>
<ha-tile-info
class="info"
.primary=${entityId}
secondary=${this.hass.localize("ui.card.tile.not_found")}
></ha-tile-info>
</div> </div>
<ha-tile-info
class="info"
.primary=${entityId}
secondary=${this.hass.localize("ui.card.tile.not_found")}
></ha-tile-info>
</div> </div>
</ha-card> </ha-card>
`; `;
@ -359,73 +357,71 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
return html` return html`
<ha-card style=${styleMap(style)} class=${classMap({ active })}> <ha-card style=${styleMap(style)} class=${classMap({ active })}>
<div class="tile"> <div
class="background"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
hasDoubleClick: hasAction(this._config!.double_tap_action),
})}
role="button"
tabindex="0"
aria-labelledby="info"
@mousedown=${this.handleRippleActivate}
@mouseup=${this.handleRippleDeactivate}
@mouseenter=${this.handleRippleMouseEnter}
@mouseleave=${this.handleRippleMouseLeave}
@touchstart=${this.handleRippleActivate}
@touchend=${this.handleRippleDeactivate}
@touchcancel=${this.handleRippleDeactivate}
>
${this._shouldRenderRipple
? html`<mwc-ripple></mwc-ripple>`
: nothing}
</div>
<div class="content ${classMap(contentClasses)}">
<div <div
class="background" class="icon-container"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
hasDoubleClick: hasAction(this._config!.double_tap_action),
})}
role="button" role="button"
tabindex="0" tabindex="0"
aria-labelledby="info" @action=${this._handleIconAction}
@mousedown=${this.handleRippleActivate} .actionHandler=${actionHandler()}
@mouseup=${this.handleRippleDeactivate}
@mouseenter=${this.handleRippleMouseEnter}
@mouseleave=${this.handleRippleMouseLeave}
@touchstart=${this.handleRippleActivate}
@touchend=${this.handleRippleDeactivate}
@touchcancel=${this.handleRippleDeactivate}
> >
${this._shouldRenderRipple ${imageUrl
? html`<mwc-ripple></mwc-ripple>` ? html`
<ha-tile-image
class="icon"
.imageUrl=${imageUrl}
></ha-tile-image>
`
: html`
<ha-tile-icon
data-domain=${ifDefined(domain)}
data-state=${ifDefined(stateObj?.state)}
class="icon"
.icon=${icon}
.iconPath=${iconPath}
></ha-tile-icon>
`}
${badge
? html`
<ha-tile-badge
class="badge"
.icon=${badge.icon}
.iconPath=${badge.iconPath}
style=${styleMap({
"--tile-badge-background-color": badge.color,
})}
></ha-tile-badge>
`
: nothing} : nothing}
</div> </div>
<div class="content ${classMap(contentClasses)}"> <ha-tile-info
<div id="info"
class="icon-container" class="info"
role="button" .primary=${name}
tabindex="0" .secondary=${localizedState}
@action=${this._handleIconAction} ></ha-tile-info>
.actionHandler=${actionHandler()}
>
${imageUrl
? html`
<ha-tile-image
class="icon"
.imageUrl=${imageUrl}
></ha-tile-image>
`
: html`
<ha-tile-icon
data-domain=${ifDefined(domain)}
data-state=${ifDefined(stateObj?.state)}
class="icon"
.icon=${icon}
.iconPath=${iconPath}
></ha-tile-icon>
`}
${badge
? html`
<ha-tile-badge
class="badge"
.icon=${badge.icon}
.iconPath=${badge.iconPath}
style=${styleMap({
"--tile-badge-background-color": badge.color,
})}
></ha-tile-badge>
`
: nothing}
</div>
<ha-tile-info
id="info"
class="info"
.primary=${name}
.secondary=${localizedState}
></ha-tile-info>
</div>
</div> </div>
<hui-card-features <hui-card-features
.hass=${this.hass} .hass=${this.hass}
@ -472,7 +468,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
bottom: 0; bottom: 0;
right: 0; right: 0;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
inset: calc(-1 * var(--ha-card-border-width, 1px)); margin: calc(-1 * var(--ha-card-border-width, 1px));
overflow: hidden; overflow: hidden;
} }
.content { .content {