jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 12:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix thermostat card (#4258)

Browse Source 
* 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
1 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

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