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

Fix unclickable light in light-card. Fix #3679 (#3680)

Browse Source
This commit is contained in:
Thomas Lovén 2019-09-10 19:22:26 +02:00 committed by Paulus Schoutsen
parent 34d50f0c90
commit eba3c535bf
1 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -96,25 +96,23 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
@value-changing=${this._dragEvent} @value-changing=${this._dragEvent}
@value-changed=${this._setBrightness} @value-changed=${this._setBrightness}
></round-slider> ></round-slider>
<ha-icon
class="light-icon"
data-state="${stateObj.state}"
.icon="${stateIcon(stateObj)}"
style="${styleMap({
filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj),
})}"
@click="${this._handleTap}"
></ha-icon>
</div> </div>
<div id="tooltip"> <div id="tooltip">
<div class="icon-state"> <div class="brightness" @ha-click="${this._handleTap}">
<ha-icon ${brightness} %
class="light-icon" </div>
data-state="${stateObj.state}" <div class="name">
.icon="${stateIcon(stateObj)}" ${this._config.name || computeStateName(stateObj)}
style="${styleMap({
filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj),
})}"
@click="${this._handleTap}"
></ha-icon>
<div class="brightness" @ha-click="${this._handleTap}">
${brightness} %
</div>
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div> </div>
</div> </div>
</ha-card> </ha-card>
@ -165,19 +163,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
right: 0; right: 0;
height: 100%; height: 100%;
text-align: center; text-align: center;
z-index: 15;
}
.icon-state {
display: block;
margin: auto;
width: 100%;
height: 100%;
transform: translate(0, 25%);
} }
#light { #light {
margin: 0 auto; margin: auto;
padding-top: 0; padding-top: 0;
padding-bottom: 32px; padding-bottom: 32px;
display: flex; display: flex;
@ -187,19 +176,21 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
width: 160px; width: 160px;
} }
#light round-slider { #light round-slider {
z-index: 20 !important;
margin: 0 auto; margin: 0 auto;
display: inline-block; display: inline-block;
--round-slider-path-color: var(--disabled-text-color); --round-slider-path-color: var(--disabled-text-color);
--round-slider-bar-color: var(--primary-color); --round-slider-bar-color: var(--primary-color);
z-index: 20;
} }
.light-icon { .light-icon {
margin: auto; position: absolute;
margin: 0 auto;
width: 76px; width: 76px;
height: 76px; height: 76px;
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
cursor: pointer; cursor: pointer;
z-index: 20;
} }
.light-icon[data-state="on"] { .light-icon[data-state="on"] {
@ -211,7 +202,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
} }
.name { .name {
padding-top: 32px; position: absolute;
top: 160px;
left: 50%;
transform: translate(-50%);
font-size: var(--name-font-size); font-size: var(--name-font-size);
} }
@ -219,8 +213,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
font-size: var(--brightness-font-size); font-size: var(--brightness-font-size);
position: absolute; position: absolute;
margin: 0 auto; margin: 0 auto;
top: 135px;
left: 50%; left: 50%;
top: 45%;
transform: translate(-50%); transform: translate(-50%);
opacity: 0; opacity: 0;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;