Fix thermostat card (#4258)

* Fix thermostat card

* Change styling

* Remove margin on mode buttons
This commit is contained in:
Bram Kragten 2019-11-21 15:18:16 +01:00 committed by GitHub
parent 85ca73db84
commit 0acd41b7f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -14,7 +14,6 @@ import "@polymer/paper-icon-button/paper-icon-button";
import "@thomasloven/round-slider";
import "../../../components/ha-card";
import "../../../components/ha-icon";
import "../components/hui-warning";
import "../components/hui-unavailable";
@ -34,7 +33,6 @@ import {
CLIMATE_PRESET_NONE,
} from "../../../data/climate";
import { HassEntity } from "home-assistant-js-websocket";
import { actionHandler } from "../common/directives/action-handler-directive";
const modeIcons: { [mode in HvacMode]: string } = {
auto: "hass:calendar-repeat",
@ -132,13 +130,14 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
? svg`
<svg viewBox="0 0 40 20">
<text
x=${23 - (stateObj.attributes.current_temperature < 0 ? 2 : 0)}
y="75%"
x="50%"
dx="1"
y="60%"
text-anchor="middle"
style="font-size: 15px;"
style="font-size: 13px;"
>
${stateObj.attributes.current_temperature}
<tspan dx="-4" dy="-7" style="font-size: 5px;">
<tspan dx="-3" dy="-6.5" style="font-size: 4px;">
${this.hass.config.unit_system.temperature}
</tspan>
</text>
@ -149,7 +148,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
const setValues = svg`
<svg id="set-values">
<g>
<text text-anchor="middle" style="font-size: 20px;" class="set-value">
<text text-anchor="middle" class="set-value">
${
!this._setTemp
? ""
@ -166,7 +165,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
<text
dy="22"
text-anchor="middle"
style="font-size: 16px"
id="set-mode"
>
${
@ -355,14 +353,13 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
return html``;
}
return html`
<ha-icon
<paper-icon-button
class="${classMap({ "selected-icon": currentMode === mode })}"
.mode="${mode}"
.icon="${modeIcons[mode]}"
@action="${this._handleModeClick}"
.actionHandler=${actionHandler()}
@click="${this._handleModeClick}"
tabindex="0"
></ha-icon>
></paper-icon-button>
`;
}
@ -455,7 +452,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
height: 100%;
width: 100%;
position: relative;
max-width: 300px;
max-width: 250px;
min-width: 100px;
}
@ -490,10 +487,12 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
#set-values {
max-width: 80%;
transform: translate(0, -50%);
font-size: 20px;
}
#set-mode {
fill: var(--secondary-text-color);
font-size: 16px;
}
#info {
@ -505,24 +504,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
font-size: var(--name-font-size);
}
#modes {
}
#modes ha-icon {
#modes > * {
color: var(--disabled-text-color);
cursor: pointer;
display: inline-block;
margin: 0 10px;
border-radius: 100%;
}
#modes ha-icon:focus {
outline: none;
background: var(--divider-color);
}
#modes ha-icon.selected-icon {
#modes .selected-icon {
color: var(--mode-color);
}
text {
fill: var(--primary-text-color);
}
`;
}
}