mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
Fix thermostat card (#4258)
* Fix thermostat card * Change styling * Remove margin on mode buttons
This commit is contained in:
parent
85ca73db84
commit
0acd41b7f0
@ -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);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user