jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style unavailable/unknown cards (#5104)

Browse Source 
* Style unavailable/unknown cards

* Hide default image if unavailable

* Style map

Co-authored-by: Zack Arnett <arnett.zackary@gmail.com>
This commit is contained in:
Paulus Schoutsen 2020-03-08 14:19:58 -07:00 committed by GitHub
parent 814fcf63a8
commit 64ee7456dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 126 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -27,7 +27,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
import { contrast } from "../common/color/contrast"; import { contrast } from "../common/color/contrast";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { LovelaceConfig } from "../../../data/lovelace"; import { LovelaceConfig } from "../../../data/lovelace";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
import { import {
OFF_STATES, OFF_STATES,
SUPPORT_PAUSE, SUPPORT_PAUSE,
@ -165,24 +165,32 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
width: `${this._cardHeight}px`, width: `${this._cardHeight}px`,
}; };
const isOffState = OFF_STATES.includes(stateObj.state);
const isUnavailable =
stateObj.state === UNAVAILABLE ||
stateObj.state === UNKNOWN ||
(stateObj.state === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON));
const hasNoImage = !this._image;
return html` return html`
<ha-card> <ha-card>
<div <div
class="background ${classMap({ class="background ${classMap({
"no-image": !this._image, "no-image": hasNoImage,
off: OFF_STATES.includes(stateObj.state), off: isOffState || isUnavailable,
unavailable: isUnavailable,
})}" })}"
> >
<div <div
class="color-block" class="color-block"
style="background-color: ${this._backgroundColor}" style=${styleMap({ "background-color": this._backgroundColor! })}
></div> ></div>
<div <div
class="no-img" class="no-img"
style="background-color: ${this._backgroundColor}" style=${styleMap({ "background-color": this._backgroundColor! })}
></div> ></div>
<div class="image" style=${styleMap(imageStyle)}></div> <div class="image" style=${styleMap(imageStyle)}></div>
${!this._image ${hasNoImage
? "" ? ""
: html` : html`
<div <div
@ -193,12 +201,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
</div> </div>
<div <div
class="player ${classMap({ class="player ${classMap({
"no-image": !this._image, "no-image": hasNoImage,
narrow: this._narrow && !this._veryNarrow, narrow: this._narrow && !this._veryNarrow,
off: OFF_STATES.includes(stateObj.state), off: isOffState || isUnavailable,
"no-progress": !this._showProgressBar && !this._veryNarrow, "no-progress": !this._showProgressBar && !this._veryNarrow,
})}" })}"
style="color: ${this._foregroundColor}" style=${styleMap({ color: this._foregroundColor! })}
> >
<div class="top-info"> <div class="top-info">
<div class="icon-name"> <div class="icon-name">
@ -216,13 +224,18 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
></paper-icon-button> ></paper-icon-button>
</div> </div>
</div> </div>
${isUnavailable
? ""
: html`
<div <div
class="title-controls" class="title-controls"
style="padding-right: ${OFF_STATES.includes(stateObj.state) style=${styleMap({
? 0 paddingRight: isOffState
: this._cardHeight - 40}px" ? "0"
: `${this._cardHeight - 40}px`,
})}
> >
${OFF_STATES.includes(stateObj.state) ${isOffState
? "" ? ""
: html` : html`
<div class="media-info"> <div class="media-info">
@ -235,14 +248,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
: computeMediaDescription(stateObj)} : computeMediaDescription(stateObj)}
</div> </div>
`} `}
${this._veryNarrow && !OFF_STATES.includes(stateObj.state) ${this._veryNarrow && !isOffState
? "" ? ""
: html` : html`
<div class="controls"> <div class="controls">
<div> <div>
${(stateObj.state === "off" && ${(stateObj.state === "off" &&
!supportsFeature(stateObj, SUPPORT_TURN_ON)) || !supportsFeature(stateObj, SUPPORT_TURN_ON)) ||
!OFF_STATES.includes(stateObj.state) !isOffState
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
@ -254,11 +267,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
></paper-icon-button> ></paper-icon-button>
`} `}
</div> </div>
${OFF_STATES.includes(stateObj.state) ${isOffState
? "" ? ""
: html` : html`
<div class="playback-controls"> <div class="playback-controls">
${!supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) ${!supportsFeature(
stateObj,
SUPPORT_PREVIOUS_TRACK
)
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
@ -268,7 +284,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
></paper-icon-button> ></paper-icon-button>
`} `}
${(stateObj.state !== "playing" && ${(stateObj.state !== "playing" &&
!supportsFeature(stateObj, SUPPORTS_PLAY)) || !supportsFeature(
stateObj,
SUPPORTS_PLAY
)) ||
stateObj.state === UNAVAILABLE || stateObj.state === UNAVAILABLE ||
(stateObj.state === "playing" && (stateObj.state === "playing" &&
!supportsFeature(stateObj, SUPPORT_PAUSE) && !supportsFeature(stateObj, SUPPORT_PAUSE) &&
@ -279,14 +298,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
class="playPauseButton" class="playPauseButton"
.icon=${stateObj.state !== "playing" .icon=${stateObj.state !== "playing"
? "hass:play" ? "hass:play"
: supportsFeature(stateObj, SUPPORT_PAUSE) : supportsFeature(
stateObj,
SUPPORT_PAUSE
)
? "hass:pause" ? "hass:pause"
: "hass:stop"} : "hass:stop"}
.action=${"media_play_pause"} .action=${"media_play_pause"}
@click=${this._handleClick} @click=${this._handleClick}
></paper-icon-button> ></paper-icon-button>
`} `}
${!supportsFeature(stateObj, SUPPORT_NEXT_TRACK) ${!supportsFeature(
stateObj,
SUPPORT_NEXT_TRACK
)
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
@ -309,9 +334,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
class="progress" class="progress"
style="--paper-progress-active-color: ${this style="--paper-progress-active-color: ${this
._foregroundColor || "var(--accent-color)"}" ._foregroundColor || "var(--accent-color)"}"
@click=${(e: MouseEvent) => this._handleSeek(e, stateObj)} @click=${(e: MouseEvent) =>
this._handleSeek(e, stateObj)}
></paper-progress> ></paper-progress>
`} `}
`}
</div> </div>
</ha-card> </ha-card>
`; `;
@ -584,6 +611,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
width: 0; width: 0;
} }
.unavailable .no-img,
.background:not(.off):not(.no-image) .no-img { .background:not(.off):not(.no-image) .no-img {
opacity: 0; opacity: 0;
} }
@ -687,7 +715,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
.off.player, .off.player,
.narrow.player { .narrow.player {
padding-bottom: 8px !important; padding-bottom: 16px !important;
} }
.narrow .controls, .narrow .controls,