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

Cleanup cards (#2870)

Browse Source 
* Cleanup cards

* Update hui-iframe-card.ts

* address review comments

* Apply paper-styles

https://github.com/PolymerElements/paper-styles/blob/v3.0.1/classes/typography.js

I didn't find `paper-font-common-nowrap` in anything after v1.0.0 but did end up applying what I found here: 923ede74eb/third_party/polymer/v1_0/components/paper-styles/typography.html

* Added comments on paper-style usage
This commit is contained in:
Ian Richardson 2019-03-07 12:52:39 -06:00 committed by Paulus Schoutsen
parent a9cecb55ac
commit 57be7ac873
17 changed files with 656 additions and 608 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -6,6 +6,7 @@ import {
CSSResult, CSSResult,
css, css,
property, property,
customElement,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
@ -39,6 +40,7 @@ export interface Config extends LovelaceCardConfig {
states?: string[]; states?: string[];
} }
@customElement("hui-alarm-panel-card")
class HuiAlarmPanelCard extends LitElement implements LovelaceCard { class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
public static async getConfigElement() { public static async getConfigElement() {
await import(/* webpackChunkName: "hui-alarm-panel-card-editor" */ "../editor/config-elements/hui-alarm-panel-card-editor"); await import(/* webpackChunkName: "hui-alarm-panel-card-editor" */ "../editor/config-elements/hui-alarm-panel-card-editor");
@ -50,7 +52,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
} }
@property() public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
@property() private _config?: Config; @property() private _config?: Config;
@property() private _code?: string; @property() private _code?: string;
public getCardSize(): number { public getCardSize(): number {
@ -205,98 +209,109 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
this._code = ""; this._code = "";
} }
static get styles(): CSSResult[] { static get styles(): CSSResult {
return [ return css`
css` ha-card {
ha-card { padding-bottom: 16px;
padding-bottom: 16px; position: relative;
position: relative; --alarm-color-disarmed: var(--label-badge-green);
--alarm-color-disarmed: var(--label-badge-green); --alarm-color-pending: var(--label-badge-yellow);
--alarm-color-pending: var(--label-badge-yellow); --alarm-color-triggered: var(--label-badge-red);
--alarm-color-triggered: var(--label-badge-red); --alarm-color-armed: var(--label-badge-red);
--alarm-color-armed: var(--label-badge-red); --alarm-color-autoarm: rgba(0, 153, 255, 0.1);
--alarm-color-autoarm: rgba(0, 153, 255, 0.1); --alarm-state-color: var(--alarm-color-armed);
--alarm-state-color: var(--alarm-color-armed); --base-unit: 15px;
--base-unit: 15px; font-size: calc(var(--base-unit));
font-size: calc(var(--base-unit)); }
}
ha-label-badge { ha-label-badge {
--ha-label-badge-color: var(--alarm-state-color);
--label-badge-text-color: var(--alarm-state-color);
--label-badge-background-color: var(--paper-card-background-color);
color: var(--alarm-state-color);
position: absolute;
right: 12px;
top: 12px;
}
.disarmed {
--alarm-state-color: var(--alarm-color-disarmed);
}
.triggered {
--alarm-state-color: var(--alarm-color-triggered);
animation: pulse 1s infinite;
}
.arming {
--alarm-state-color: var(--alarm-color-pending);
animation: pulse 1s infinite;
}
.pending {
--alarm-state-color: var(--alarm-color-pending);
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
--ha-label-badge-color: var(--alarm-state-color); --ha-label-badge-color: var(--alarm-state-color);
--label-badge-text-color: var(--alarm-state-color);
--label-badge-background-color: var(--paper-card-background-color);
color: var(--alarm-state-color);
position: absolute;
right: 12px;
top: 12px;
} }
.disarmed { 100% {
--alarm-state-color: var(--alarm-color-disarmed); --ha-label-badge-color: rgba(255, 153, 0, 0.3);
} }
.triggered { }
--alarm-state-color: var(--alarm-color-triggered);
animation: pulse 1s infinite; paper-input {
} margin: 0 auto 8px;
.arming { max-width: 150px;
--alarm-state-color: var(--alarm-color-pending); font-size: calc(var(--base-unit));
animation: pulse 1s infinite; text-align: center;
} }
.pending {
--alarm-state-color: var(--alarm-color-pending); .state {
animation: pulse 1s infinite; margin-left: 16px;
} font-size: calc(var(--base-unit) * 0.9);
@keyframes pulse { position: relative;
0% { bottom: 16px;
--ha-label-badge-color: var(--alarm-state-color); color: var(--alarm-state-color);
} animation: none;
100% { }
--ha-label-badge-color: rgba(255, 153, 0, 0.3);
} #keypad {
} display: flex;
paper-input { justify-content: center;
margin: 0 auto 8px; flex-wrap: wrap;
max-width: 150px; margin: auto;
font-size: calc(var(--base-unit)); width: 300px;
text-align: center; }
}
.state { #keypad mwc-button {
margin-left: 16px; margin-bottom: 5%;
font-size: calc(var(--base-unit) * 0.9); width: 30%;
position: relative; padding: calc(var(--base-unit));
bottom: 16px; font-size: calc(var(--base-unit) * 1.1);
color: var(--alarm-state-color); box-sizing: border-box;
animation: none; }
}
#keypad { .actions {
display: flex; margin: 0 8px;
justify-content: center; padding-top: 20px;
flex-wrap: wrap; display: flex;
margin: auto; flex-wrap: wrap;
width: 300px; justify-content: center;
} font-size: calc(var(--base-unit) * 1);
#keypad mwc-button { }
margin-bottom: 5%;
width: 30%; .actions mwc-button {
padding: calc(var(--base-unit)); min-width: calc(var(--base-unit) * 9);
font-size: calc(var(--base-unit) * 1.1); margin: 0 4px;
box-sizing: border-box; }
}
.actions { mwc-button#disarm {
margin: 0 8px; color: var(--google-red-500);
padding-top: 20px; }
display: flex; `;
flex-wrap: wrap;
justify-content: center;
font-size: calc(var(--base-unit) * 1);
}
.actions mwc-button {
min-width: calc(var(--base-unit) * 9);
margin: 0 4px;
}
mwc-button#disarm {
color: var(--google-red-500);
}
`,
];
} }
} }
@ -305,5 +320,3 @@ declare global {
"hui-alarm-panel-card": HuiAlarmPanelCard; "hui-alarm-panel-card": HuiAlarmPanelCard;
} }
} }
customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);

14
src/panels/lovelace/cards/hui-empty-state-card.ts
View File

@ -1,10 +1,11 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
TemplateResult, TemplateResult,
CSSResult, CSSResult,
css, css,
customElement,
property,
} from "lit-element"; } from "lit-element";
import "@polymer/paper-card/paper-card"; import "@polymer/paper-card/paper-card";
@ -18,8 +19,9 @@ export interface Config extends LovelaceCardConfig {
title?: string; title?: string;
} }
@customElement("hui-empty-state-card")
export class HuiEmptyStateCard extends LitElement implements LovelaceCard { export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
public getCardSize(): number { public getCardSize(): number {
return 2; return 2;
@ -29,12 +31,6 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
// tslint:disable-next-line // tslint:disable-next-line
} }
static get properties(): PropertyDeclarations {
return {
hass: {},
};
}
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
if (!this.hass) { if (!this.hass) {
return html``; return html``;
@ -83,5 +79,3 @@ declare global {
"hui-empty-state-card": HuiEmptyStateCard; "hui-empty-state-card": HuiEmptyStateCard;
} }
} }
customElements.define("hui-empty-state-card", HuiEmptyStateCard);

97
src/panels/lovelace/cards/hui-entities-card.ts
View File

@ -1,9 +1,12 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import "../../../components/ha-card"; import "../../../components/ha-card";
@ -36,6 +39,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
theme?: string; theme?: string;
} }
@customElement("hui-entities-card")
class HuiEntitiesCard extends LitElement implements LovelaceCard { class HuiEntitiesCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-entities-card-editor" */ "../editor/config-elements/hui-entities-card-editor"); await import(/* webpackChunkName: "hui-entities-card-editor" */ "../editor/config-elements/hui-entities-card-editor");
@ -46,8 +50,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
return { entities: [] }; return { entities: [] };
} }
@property() protected _config?: EntitiesCardConfig;
protected _hass?: HomeAssistant; protected _hass?: HomeAssistant;
protected _config?: EntitiesCardConfig;
protected _configEntities?: EntitiesCardEntityConfig[]; protected _configEntities?: EntitiesCardEntityConfig[];
set hass(hass: HomeAssistant) { set hass(hass: HomeAssistant) {
@ -65,12 +71,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
} }
} }
static get properties(): PropertyDeclarations {
return {
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
if (!this._config) { if (!this._config) {
return 0; return 0;
@ -100,7 +100,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
const { show_header_toggle, title } = this._config; const { show_header_toggle, title } = this._config;
return html` return html`
${this.renderStyle()}
<ha-card> <ha-card>
${!title && !show_header_toggle ${!title && !show_header_toggle
? html`` ? html``
@ -128,38 +127,52 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> ha-card {
ha-card { padding: 16px;
padding: 16px; }
}
#states { #states {
margin: -4px 0; margin: -4px 0;
} }
#states > * {
margin: 8px 0; #states > * {
} margin: 8px 0;
#states > div > * { }
overflow: hidden;
} #states > div > * {
.header { overflow: hidden;
@apply --paper-font-headline; }
/* overwriting line-height +8 because entity-toggle can be 40px height,
compensating this with reduced padding */ .header {
line-height: 40px; /* start paper-font-headline style */
color: var(--primary-text-color); font-family: "Roboto", "Noto", sans-serif;
padding: 4px 0 12px; -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
display: flex; text-rendering: optimizeLegibility;
justify-content: space-between; font-size: 24px;
} font-weight: 400;
.header .name { letter-spacing: -0.012em;
@apply --paper-font-common-nowrap; /* end paper-font-headline style */
}
.state-card-dialog { line-height: 40px;
cursor: pointer; color: var(--primary-text-color);
} padding: 4px 0 12px;
</style> display: flex;
justify-content: space-between;
}
.header .name {
/* start paper-font-common-nowrap style */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* end paper-font-common-nowrap */
}
.state-card-dialog {
cursor: pointer;
}
`; `;
} }
@ -192,5 +205,3 @@ declare global {
"hui-entities-card": HuiEntitiesCard; "hui-entities-card": HuiEntitiesCard;
} }
} }
customElements.define("hui-entities-card", HuiEntitiesCard);

19
src/panels/lovelace/cards/hui-entity-button-card.ts
View File

@ -1,11 +1,12 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
CSSResult, CSSResult,
css, css,
customElement,
property,
} from "lit-element"; } from "lit-element";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
@ -34,6 +35,7 @@ export interface Config extends LovelaceCardConfig {
hold_action?: ActionConfig; hold_action?: ActionConfig;
} }
@customElement("hui-entity-button-card")
class HuiEntityButtonCard extends LitElement implements LovelaceCard { class HuiEntityButtonCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-entity-button-card-editor" */ "../editor/config-elements/hui-entity-button-card-editor"); await import(/* webpackChunkName: "hui-entity-button-card-editor" */ "../editor/config-elements/hui-entity-button-card-editor");
@ -47,15 +49,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
}; };
} }
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config;
static get properties(): PropertyDeclarations { @property() private _config?: Config;
return {
hass: {},
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
return 2; return 2;
@ -147,11 +143,13 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
padding: 4% 0; padding: 4% 0;
font-size: 1.2rem; font-size: 1.2rem;
} }
ha-icon { ha-icon {
width: 40%; width: 40%;
height: auto; height: auto;
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
} }
ha-icon[data-domain="light"][data-state="on"], ha-icon[data-domain="light"][data-state="on"],
ha-icon[data-domain="switch"][data-state="on"], ha-icon[data-domain="switch"][data-state="on"],
ha-icon[data-domain="binary_sensor"][data-state="on"], ha-icon[data-domain="binary_sensor"][data-state="on"],
@ -159,6 +157,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
ha-icon[data-domain="sun"][data-state="above_horizon"] { ha-icon[data-domain="sun"][data-state="above_horizon"] {
color: var(--paper-item-icon-active-color, #fdd835); color: var(--paper-item-icon-active-color, #fdd835);
} }
ha-icon[data-state="unavailable"] { ha-icon[data-state="unavailable"] {
color: var(--state-icon-unavailable-color); color: var(--state-icon-unavailable-color);
} }
@ -198,5 +197,3 @@ declare global {
"hui-entity-button-card": HuiEntityButtonCard; "hui-entity-button-card": HuiEntityButtonCard;
} }
} }
customElements.define("hui-entity-button-card", HuiEntityButtonCard);

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

@ -1,4 +1,12 @@
import { html, LitElement, TemplateResult } from "lit-element"; import {
html,
LitElement,
TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element";
import { LovelaceCard } from "../types"; import { LovelaceCard } from "../types";
import { LovelaceCardConfig } from "../../../data/lovelace"; import { LovelaceCardConfig } from "../../../data/lovelace";
@ -21,15 +29,11 @@ export const createErrorCardConfig = (error, origConfig) => ({
origConfig, origConfig,
}); });
@customElement("hui-error-card")
export class HuiErrorCard extends LitElement implements LovelaceCard { export class HuiErrorCard extends LitElement implements LovelaceCard {
public hass?: HomeAssistant; public hass?: HomeAssistant;
private _config?: Config;
static get properties() { @property() private _config?: Config;
return {
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
return 4; return 4;
@ -45,22 +49,20 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()} ${this._config.error} ${this._config.error}
<pre>${this._toStr(this._config.origConfig)}</pre> <pre>${this._toStr(this._config.origConfig)}</pre>
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> :host {
:host { display: block;
display: block; background-color: #ef5350;
background-color: #ef5350; color: white;
color: white; padding: 8px;
padding: 8px; font-weight: 500;
font-weight: 500; }
}
</style>
`; `;
} }
@ -74,5 +76,3 @@ declare global {
"hui-error-card": HuiErrorCard; "hui-error-card": HuiErrorCard;
} }
} }
customElements.define("hui-error-card", HuiErrorCard);

6
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -6,6 +6,7 @@ import {
css, css,
CSSResult, CSSResult,
property, property,
customElement,
} from "lit-element"; } from "lit-element";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
@ -45,6 +46,7 @@ export const severityMap = {
normal: "var(--label-badge-blue)", normal: "var(--label-badge-blue)",
}; };
@customElement("hui-gauge-card")
class HuiGaugeCard extends LitElement implements LovelaceCard { class HuiGaugeCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-gauge-card-editor" */ "../editor/config-elements/hui-gauge-card-editor"); await import(/* webpackChunkName: "hui-gauge-card-editor" */ "../editor/config-elements/hui-gauge-card-editor");
@ -55,7 +57,9 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
} }
@property() public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
@property() private _config?: Config; @property() private _config?: Config;
private _updated?: boolean; private _updated?: boolean;
public getCardSize(): number { public getCardSize(): number {
@ -306,5 +310,3 @@ declare global {
"hui-gauge-card": HuiGaugeCard; "hui-gauge-card": HuiGaugeCard;
} }
} }
customElements.define("hui-gauge-card", HuiGaugeCard);

90
src/panels/lovelace/cards/hui-glance-card.ts
View File

@ -2,8 +2,11 @@ import {
html, html,
LitElement, LitElement,
PropertyValues, PropertyValues,
PropertyDeclarations,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
@ -38,6 +41,7 @@ export interface Config extends LovelaceCardConfig {
columns?: number; columns?: number;
} }
@customElement("hui-glance-card")
export class HuiGlanceCard extends LitElement implements LovelaceCard { export class HuiGlanceCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-glance-card-editor" */ "../editor/config-elements/hui-glance-card-editor"); await import(/* webpackChunkName: "hui-glance-card-editor" */ "../editor/config-elements/hui-glance-card-editor");
@ -47,16 +51,11 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
return { entities: [] }; return { entities: [] };
} }
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config;
private _configEntities?: ConfigEntity[];
static get properties(): PropertyDeclarations { @property() private _config?: Config;
return {
hass: {}, private _configEntities?: ConfigEntity[];
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
return ( return (
@ -120,7 +119,6 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
const { title } = this._config; const { title } = this._config;
return html` return html`
${this.renderStyle()}
<ha-card .header="${title}"> <ha-card .header="${title}">
<div class="entities ${classMap({ "no-header": !title })}"> <div class="entities ${classMap({ "no-header": !title })}">
${this._configEntities!.map((entityConf) => ${this._configEntities!.map((entityConf) =>
@ -143,41 +141,39 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
} }
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> .entities {
.entities { display: flex;
display: flex; padding: 0 16px 4px;
padding: 0 16px 4px; flex-wrap: wrap;
flex-wrap: wrap; }
} .entities.no-header {
.entities.no-header { padding-top: 16px;
padding-top: 16px; }
} .entity {
.entity { box-sizing: border-box;
box-sizing: border-box; padding: 0 4px;
padding: 0 4px; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; cursor: pointer;
cursor: pointer; margin-bottom: 12px;
margin-bottom: 12px; width: var(--glance-column-width, 20%);
width: var(--glance-column-width, 20%); }
} .entity div {
.entity div { width: 100%;
width: 100%; text-align: center;
text-align: center; white-space: nowrap;
white-space: nowrap; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; }
} .name {
.name { min-height: var(--paper-font-body1_-_line-height, 20px);
min-height: var(--paper-font-body1_-_line-height, 20px); }
} state-badge {
state-badge { margin: 8px 0;
margin: 8px 0; }
}
</style>
`; `;
} }
@ -248,5 +244,3 @@ declare global {
"hui-glance-card": HuiGlanceCard; "hui-glance-card": HuiGlanceCard;
} }
} }
customElements.define("hui-glance-card", HuiGlanceCard);

55
src/panels/lovelace/cards/hui-iframe-card.ts
View File

@ -1,8 +1,11 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import "../../../components/ha-card"; import "../../../components/ha-card";
@ -17,6 +20,7 @@ export interface Config extends LovelaceCardConfig {
url: string; url: string;
} }
@customElement("hui-iframe-card")
export class HuiIframeCard extends LitElement implements LovelaceCard { export class HuiIframeCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-iframe-card-editor" */ "../editor/config-elements/hui-iframe-card-editor"); await import(/* webpackChunkName: "hui-iframe-card-editor" */ "../editor/config-elements/hui-iframe-card-editor");
@ -26,13 +30,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
return { url: "https://www.home-assistant.io", aspect_ratio: "50%" }; return { url: "https://www.home-assistant.io", aspect_ratio: "50%" };
} }
protected _config?: Config; @property() protected _config?: Config;
static get properties(): PropertyDeclarations {
return {
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
if (!this._config) { if (!this._config) {
@ -60,7 +58,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
const aspectRatio = this._config.aspect_ratio || "50%"; const aspectRatio = this._config.aspect_ratio || "50%";
return html` return html`
${this.renderStyle()}
<ha-card .header="${this._config.title}"> <ha-card .header="${this._config.title}">
<div <div
id="root" id="root"
@ -74,25 +71,25 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> ha-card {
ha-card { overflow: hidden;
overflow: hidden; }
}
#root { #root {
width: 100%; width: 100%;
position: relative; position: relative;
} }
iframe {
position: absolute; iframe {
border: none; position: absolute;
width: 100%; border: none;
height: 100%; width: 100%;
top: 0; height: 100%;
left: 0; top: 0;
} left: 0;
</style> }
`; `;
} }
} }
@ -102,5 +99,3 @@ declare global {
"hui-iframe-card": HuiIframeCard; "hui-iframe-card": HuiIframeCard;
} }
} }
customElements.define("hui-iframe-card", HuiIframeCard);

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

@ -4,6 +4,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
property, property,
customElement,
} from "lit-element"; } from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-icon-button/paper-icon-button";
@ -45,6 +46,7 @@ export interface Config extends LovelaceCardConfig {
theme?: string; theme?: string;
} }
@customElement("hui-light-card")
export class HuiLightCard extends LitElement implements LovelaceCard { export class HuiLightCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-light-card-editor" */ "../editor/config-elements/hui-light-card-editor"); await import(/* webpackChunkName: "hui-light-card-editor" */ "../editor/config-elements/hui-light-card-editor");
@ -55,9 +57,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
} }
@property() public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
@property() private _config?: Config; @property() private _config?: Config;
@property() private _roundSliderStyle?: TemplateResult; @property() private _roundSliderStyle?: TemplateResult;
@property() private _jQuery?: any; @property() private _jQuery?: any;
private _brightnessTimout?: number; private _brightnessTimout?: number;
public getCardSize(): number { public getCardSize(): number {
@ -183,6 +189,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
:host { :host {
display: block; display: block;
} }
ha-card { ha-card {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -193,6 +200,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
--brightness-font-size: 1.2rem; --brightness-font-size: 1.2rem;
--rail-border-color: transparent; --rail-border-color: transparent;
} }
#tooltip { #tooltip {
position: absolute; position: absolute;
top: 0; top: 0;
@ -202,6 +210,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
text-align: center; text-align: center;
z-index: 15; z-index: 15;
} }
.icon-state { .icon-state {
display: block; display: block;
margin: auto; margin: auto;
@ -209,40 +218,50 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
height: 100%; height: 100%;
transform: translate(0, 25%); transform: translate(0, 25%);
} }
#light { #light {
margin: 0 auto; margin: 0 auto;
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
} }
#light .rs-bar.rs-transition.rs-first, #light .rs-bar.rs-transition.rs-first,
.rs-bar.rs-transition.rs-second { .rs-bar.rs-transition.rs-second {
z-index: 20 !important; z-index: 20 !important;
} }
#light .rs-range-color { #light .rs-range-color {
background-color: var(--primary-color); background-color: var(--primary-color);
} }
#light .rs-path-color { #light .rs-path-color {
background-color: var(--disabled-text-color); background-color: var(--disabled-text-color);
} }
#light .rs-handle { #light .rs-handle {
background-color: var(--paper-card-background-color, white); background-color: var(--paper-card-background-color, white);
padding: 7px; padding: 7px;
border: 2px solid var(--disabled-text-color); border: 2px solid var(--disabled-text-color);
} }
#light .rs-handle.rs-focus { #light .rs-handle.rs-focus {
border-color: var(--primary-color); border-color: var(--primary-color);
} }
#light .rs-handle:after { #light .rs-handle:after {
border-color: var(--primary-color); border-color: var(--primary-color);
background-color: var(--primary-color); background-color: var(--primary-color);
} }
#light .rs-border { #light .rs-border {
border-color: var(--rail-border-color); border-color: var(--rail-border-color);
} }
#light .rs-inner.rs-bg-color.rs-border, #light .rs-inner.rs-bg-color.rs-border,
#light .rs-overlay.rs-transition.rs-bg-color { #light .rs-overlay.rs-transition.rs-bg-color {
background-color: var(--paper-card-background-color, white); background-color: var(--paper-card-background-color, white);
} }
.light-icon { .light-icon {
margin: auto; margin: auto;
width: 76px; width: 76px;
@ -250,16 +269,20 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
cursor: pointer; cursor: pointer;
} }
.light-icon[data-state="on"] { .light-icon[data-state="on"] {
color: var(--paper-item-icon-active-color, #fdd835); color: var(--paper-item-icon-active-color, #fdd835);
} }
.light-icon[data-state="unavailable"] { .light-icon[data-state="unavailable"] {
color: var(--state-icon-unavailable-color); color: var(--state-icon-unavailable-color);
} }
.name { .name {
padding-top: 40px; padding-top: 40px;
font-size: var(--name-font-size); font-size: var(--name-font-size);
} }
.brightness { .brightness {
font-size: var(--brightness-font-size); font-size: var(--brightness-font-size);
position: absolute; position: absolute;
@ -276,9 +299,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
text-shadow: var(--brightness-font-text-shadow); text-shadow: var(--brightness-font-text-shadow);
pointer-events: none; pointer-events: none;
} }
.show_brightness { .show_brightness {
opacity: 1; opacity: 1;
} }
.more-info { .more-info {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
@ -352,5 +377,3 @@ declare global {
"hui-light-card": HuiLightCard; "hui-light-card": HuiLightCard;
} }
} }
customElements.define("hui-light-card", HuiLightCard);

81
src/panels/lovelace/cards/hui-markdown-card.ts
View File

@ -1,8 +1,11 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
@ -17,22 +20,18 @@ export interface Config extends LovelaceCardConfig {
title?: string; title?: string;
} }
@customElement("hui-markdown-card")
export class HuiMarkdownCard extends LitElement implements LovelaceCard { export class HuiMarkdownCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-markdown-card-editor" */ "../editor/config-elements/hui-markdown-card-editor"); await import(/* webpackChunkName: "hui-markdown-card-editor" */ "../editor/config-elements/hui-markdown-card-editor");
return document.createElement("hui-markdown-card-editor"); return document.createElement("hui-markdown-card-editor");
} }
public static getStubConfig(): object { public static getStubConfig(): object {
return { content: " " }; return { content: " " };
} }
private _config?: Config; @property() private _config?: Config;
static get properties(): PropertyDeclarations {
return {
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
return this._config!.content.split("\n").length; return this._config!.content.split("\n").length;
@ -52,7 +51,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()}
<ha-card .header="${this._config.title}"> <ha-card .header="${this._config.title}">
<ha-markdown <ha-markdown
class="markdown ${classMap({ class="markdown ${classMap({
@ -64,35 +62,40 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> :host {
:host { /* start paper-font-headline style */
@apply --paper-font-body1; font-family: "Roboto", "Noto", sans-serif;
} -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
ha-markdown { text-rendering: optimizeLegibility;
display: block; font-size: 24px;
padding: 0 16px 16px; font-weight: 400;
-ms-user-select: initial; letter-spacing: -0.012em;
-webkit-user-select: initial; /* end paper-font-headline style */
-moz-user-select: initial; }
} ha-markdown {
.markdown.no-header { display: block;
padding-top: 16px; padding: 0 16px 16px;
} -ms-user-select: initial;
ha-markdown > *:first-child { -webkit-user-select: initial;
margin-top: 0; -moz-user-select: initial;
} }
ha-markdown > *:last-child { .markdown.no-header {
margin-bottom: 0; padding-top: 16px;
} }
ha-markdown a { ha-markdown > *:first-child {
color: var(--primary-color); margin-top: 0;
} }
ha-markdown img { ha-markdown > *:last-child {
max-width: 100%; margin-bottom: 0;
} }
</style> ha-markdown a {
color: var(--primary-color);
}
ha-markdown img {
max-width: 100%;
}
`; `;
} }
} }
@ -102,5 +105,3 @@ declare global {
"hui-markdown-card": HuiMarkdownCard; "hui-markdown-card": HuiMarkdownCard;
} }
} }
customElements.define("hui-markdown-card", HuiMarkdownCard);

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

@ -1,8 +1,11 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import "../../../components/ha-card"; import "../../../components/ha-card";
@ -20,6 +23,7 @@ export interface Config extends LovelaceCardConfig {
hold_action?: ActionConfig; hold_action?: ActionConfig;
} }
@customElement("hui-picture-card")
export class HuiPictureCard extends LitElement implements LovelaceCard { export class HuiPictureCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-picture-card-editor" */ "../editor/config-elements/hui-picture-card-editor"); await import(/* webpackChunkName: "hui-picture-card-editor" */ "../editor/config-elements/hui-picture-card-editor");
@ -35,11 +39,8 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
} }
public hass?: HomeAssistant; public hass?: HomeAssistant;
protected _config?: Config;
static get properties(): PropertyDeclarations { @property() protected _config?: Config;
return { _config: {} };
}
public getCardSize(): number { public getCardSize(): number {
return 3; return 3;
@ -59,7 +60,6 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()}
<ha-card <ha-card
@ha-click="${this._handleTap}" @ha-click="${this._handleTap}"
@ha-hold="${this._handleHold}" @ha-hold="${this._handleHold}"
@ -75,20 +75,20 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> ha-card {
ha-card { overflow: hidden;
overflow: hidden; }
}
ha-card.clickable { ha-card.clickable {
cursor: pointer; cursor: pointer;
} }
img {
display: block; img {
width: 100%; display: block;
} width: 100%;
</style> }
`; `;
} }
@ -106,5 +106,3 @@ declare global {
"hui-picture-card": HuiPictureCard; "hui-picture-card": HuiPictureCard;
} }
} }
customElements.define("hui-picture-card", HuiPictureCard);

51
src/panels/lovelace/cards/hui-picture-elements-card.ts
View File

@ -1,4 +1,12 @@
import { html, LitElement, TemplateResult } from "lit-element"; import {
html,
LitElement,
TemplateResult,
property,
customElement,
css,
CSSResult,
} from "lit-element";
import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element"; import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element";
@ -17,15 +25,11 @@ interface Config extends LovelaceCardConfig {
elements: LovelaceElementConfig[]; elements: LovelaceElementConfig[];
} }
@customElement("hui-picture-elements-card")
class HuiPictureElementsCard extends LitElement implements LovelaceCard { class HuiPictureElementsCard extends LitElement implements LovelaceCard {
private _config?: Config; @property() private _config?: Config;
private _hass?: HomeAssistant;
static get properties() { private _hass?: HomeAssistant;
return {
_config: {},
};
}
set hass(hass: HomeAssistant) { set hass(hass: HomeAssistant) {
this._hass = hass; this._hass = hass;
@ -60,7 +64,6 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()}
<ha-card .header="${this._config.title}"> <ha-card .header="${this._config.title}">
<div id="root"> <div id="root">
<hui-image <hui-image
@ -84,20 +87,20 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> #root {
#root { position: relative;
position: relative; }
}
.element { .element {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
ha-card {
overflow: hidden; ha-card {
} overflow: hidden;
</style> }
`; `;
} }
} }
@ -107,5 +110,3 @@ declare global {
"hui-picture-elements-card": HuiPictureElementsCard; "hui-picture-elements-card": HuiPictureElementsCard;
} }
} }
customElements.define("hui-picture-elements-card", HuiPictureElementsCard);

88
src/panels/lovelace/cards/hui-picture-entity-card.ts
View File

@ -1,8 +1,11 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
@ -34,16 +37,11 @@ interface Config extends LovelaceCardConfig {
show_state?: boolean; show_state?: boolean;
} }
@customElement("hui-picture-entity-card")
class HuiPictureEntityCard extends LitElement implements LovelaceCard { class HuiPictureEntityCard extends LitElement implements LovelaceCard {
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config;
static get properties(): PropertyDeclarations { @property() private _config?: Config;
return {
hass: {},
_config: {},
};
}
public getCardSize(): number { public getCardSize(): number {
return 3; return 3;
@ -109,7 +107,6 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()}
<ha-card> <ha-card>
<hui-image <hui-image
.hass="${this.hass}" .hass="${this.hass}"
@ -132,37 +129,44 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> ha-card {
ha-card { min-height: 75px;
min-height: 75px; overflow: hidden;
overflow: hidden; position: relative;
position: relative; }
}
hui-image.clickable { hui-image.clickable {
cursor: pointer; cursor: pointer;
} }
.footer {
@apply --paper-font-common-nowrap; .footer {
position: absolute; /* start paper-font-common-nowrap style */
left: 0; white-space: nowrap;
right: 0; overflow: hidden;
bottom: 0; text-overflow: ellipsis;
background-color: rgba(0, 0, 0, 0.3); /* end paper-font-common-nowrap style */
padding: 16px;
font-size: 16px; position: absolute;
line-height: 16px; left: 0;
color: white; right: 0;
} bottom: 0;
.both { background-color: rgba(0, 0, 0, 0.3);
display: flex; padding: 16px;
justify-content: space-between; font-size: 16px;
} line-height: 16px;
.state { color: white;
text-align: right; }
}
</style> .both {
display: flex;
justify-content: space-between;
}
.state {
text-align: right;
}
`; `;
} }
@ -180,5 +184,3 @@ declare global {
"hui-picture-entity-card": HuiPictureEntityCard; "hui-picture-entity-card": HuiPictureEntityCard;
} }
} }
customElements.define("hui-picture-entity-card", HuiPictureEntityCard);

109
src/panels/lovelace/cards/hui-picture-glance-card.ts
View File

@ -1,8 +1,11 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
@ -39,18 +42,15 @@ interface Config extends LovelaceCardConfig {
hold_action?: ActionConfig; hold_action?: ActionConfig;
} }
@customElement("hui-picture-glance-card")
class HuiPictureGlanceCard extends LitElement implements LovelaceCard { class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config;
private _entitiesDialog?: EntityConfig[];
private _entitiesToggle?: EntityConfig[];
static get properties(): PropertyDeclarations { @property() private _config?: Config;
return {
hass: {}, private _entitiesDialog?: EntityConfig[];
_config: {},
}; private _entitiesToggle?: EntityConfig[];
}
public getCardSize(): number { public getCardSize(): number {
return 3; return 3;
@ -91,7 +91,6 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()}
<ha-card> <ha-card>
<hui-image <hui-image
class="${classMap({ class="${classMap({
@ -177,44 +176,52 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
toggleEntity(this.hass!, (ev.target as any).entity); toggleEntity(this.hass!, (ev.target as any).entity);
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> ha-card {
ha-card { position: relative;
position: relative; min-height: 48px;
min-height: 48px; overflow: hidden;
overflow: hidden; }
}
hui-image.clickable { hui-image.clickable {
cursor: pointer; cursor: pointer;
} }
.box {
@apply --paper-font-common-nowrap; .box {
position: absolute; /* start paper-font-common-nowrap style */
left: 0; white-space: nowrap;
right: 0; overflow: hidden;
bottom: 0; text-overflow: ellipsis;
background-color: rgba(0, 0, 0, 0.3); /* end paper-font-common-nowrap style */
padding: 4px 8px;
font-size: 16px; position: absolute;
line-height: 40px; left: 0;
color: white; right: 0;
display: flex; bottom: 0;
justify-content: space-between; background-color: rgba(0, 0, 0, 0.3);
} padding: 4px 8px;
.box .title { font-size: 16px;
font-weight: 500; line-height: 40px;
margin-left: 8px; color: white;
} display: flex;
ha-icon { justify-content: space-between;
cursor: pointer; }
padding: 8px;
color: #a9a9a9; .box .title {
} font-weight: 500;
ha-icon.state-on { margin-left: 8px;
color: white; }
}
</style> ha-icon {
cursor: pointer;
padding: 8px;
color: #a9a9a9;
}
ha-icon.state-on {
color: white;
}
`; `;
} }
} }
@ -224,5 +231,3 @@ declare global {
"hui-picture-glance-card": HuiPictureGlanceCard; "hui-picture-glance-card": HuiPictureGlanceCard;
} }
} }
customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);

196
src/panels/lovelace/cards/hui-sensor-card.ts
View File

@ -2,9 +2,12 @@ import {
html, html,
svg, svg,
LitElement, LitElement,
PropertyDeclarations,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
customElement,
property,
css,
CSSResult,
} from "lit-element"; } from "lit-element";
import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-spinner/paper-spinner";
@ -145,6 +148,7 @@ export interface Config extends LovelaceCardConfig {
hours_to_show?: number; hours_to_show?: number;
} }
@customElement("hui-sensor-card")
class HuiSensorCard extends LitElement implements LovelaceCard { class HuiSensorCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-sensor-card-editor" */ "../editor/config-elements/hui-sensor-card-editor"); await import(/* webpackChunkName: "hui-sensor-card-editor" */ "../editor/config-elements/hui-sensor-card-editor");
@ -155,18 +159,13 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
return {}; return {};
} }
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config;
private _history?: any;
private _date?: Date;
static get properties(): PropertyDeclarations { @property() private _config?: Config;
return {
hass: {}, @property() private _history?: any;
_config: {},
_history: {}, private _date?: Date;
};
}
public setConfig(config: Config): void { public setConfig(config: Config): void {
if (!config.entity || config.entity.split(".")[0] !== "sensor") { if (!config.entity || config.entity.split(".")[0] !== "sensor") {
@ -244,7 +243,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
graph = ""; graph = "";
} }
return html` return html`
${this.renderStyle()}
<ha-card @click="${this._handleClick}"> <ha-card @click="${this._handleClick}">
<div class="flex"> <div class="flex">
<div class="icon"> <div class="icon">
@ -324,87 +322,95 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
this._date = new Date(); this._date = new Date();
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult {
return html` return css`
<style> :host {
:host { display: flex;
display: flex; flex-direction: column;
flex-direction: column; }
}
ha-card { ha-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
padding: 16px; padding: 16px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.flex {
display: flex; .flex {
} display: flex;
.header { }
align-items: center;
display: flex; .header {
min-width: 0; align-items: center;
opacity: 0.8; display: flex;
position: relative; min-width: 0;
} opacity: 0.8;
.name { position: relative;
display: block; }
display: -webkit-box;
font-size: 1.2rem; .name {
font-weight: 500; display: block;
max-height: 1.4rem; display: -webkit-box;
margin-top: 2px; font-size: 1.2rem;
opacity: 0.8; font-weight: 500;
overflow: hidden; max-height: 1.4rem;
text-overflow: ellipsis; margin-top: 2px;
-webkit-line-clamp: 1; opacity: 0.8;
-webkit-box-orient: vertical; overflow: hidden;
word-wrap: break-word; text-overflow: ellipsis;
word-break: break-all; -webkit-line-clamp: 1;
} -webkit-box-orient: vertical;
.icon { word-wrap: break-word;
color: var(--paper-item-icon-color, #44739e); word-break: break-all;
display: inline-block; }
flex: 0 0 40px;
line-height: 40px; .icon {
position: relative; color: var(--paper-item-icon-color, #44739e);
text-align: center; display: inline-block;
width: 40px; flex: 0 0 40px;
} line-height: 40px;
.info { position: relative;
flex-wrap: wrap; text-align: center;
margin: 16px 0 16px 8px; width: 40px;
} }
#value {
display: inline-block; .info {
font-size: 2rem; flex-wrap: wrap;
font-weight: 400; margin: 16px 0 16px 8px;
line-height: 1em; }
margin-right: 4px;
} #value {
#measurement { display: inline-block;
align-self: flex-end; font-size: 2rem;
display: inline-block; font-weight: 400;
font-size: 1.3rem; line-height: 1em;
line-height: 1.2em; margin-right: 4px;
margin-top: 0.1em; }
opacity: 0.6;
vertical-align: bottom; #measurement {
} align-self: flex-end;
.graph { display: inline-block;
align-self: flex-end; font-size: 1.3rem;
margin: auto; line-height: 1.2em;
margin-bottom: 0px; margin-top: 0.1em;
position: relative; opacity: 0.6;
width: 100%; vertical-align: bottom;
} }
.graph > div {
align-self: flex-end; .graph {
margin: auto 8px; align-self: flex-end;
} margin: auto;
</style> margin-bottom: 0px;
position: relative;
width: 100%;
}
.graph > div {
align-self: flex-end;
margin: auto 8px;
}
`; `;
} }
} }
@ -414,5 +420,3 @@ declare global {
"hui-sensor-card": HuiSensorCard; "hui-sensor-card": HuiSensorCard;
} }
} }
customElements.define("hui-sensor-card", HuiSensorCard);

119
src/panels/lovelace/cards/hui-shopping-list-card.ts
View File

@ -5,6 +5,7 @@ import {
css, css,
CSSResult, CSSResult,
property, property,
customElement,
} from "lit-element"; } from "lit-element";
import { repeat } from "lit-html/directives/repeat"; import { repeat } from "lit-html/directives/repeat";
import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { PaperInputElement } from "@polymer/paper-input/paper-input";
@ -28,6 +29,7 @@ export interface Config extends LovelaceCardConfig {
title?: string; title?: string;
} }
@customElement("hui-shopping-list-card")
class HuiShoppingListCard extends LitElement implements LovelaceCard { class HuiShoppingListCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-shopping-list-editor" */ "../editor/config-elements/hui-shopping-list-editor"); await import(/* webpackChunkName: "hui-shopping-list-editor" */ "../editor/config-elements/hui-shopping-list-editor");
@ -39,9 +41,13 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
} }
@property() public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
@property() private _config?: Config; @property() private _config?: Config;
@property() private _uncheckedItems?: ShoppingListItem[]; @property() private _uncheckedItems?: ShoppingListItem[];
@property() private _checkedItems?: ShoppingListItem[]; @property() private _checkedItems?: ShoppingListItem[];
private _unsubEvents?: Promise<() => Promise<void>>; private _unsubEvents?: Promise<() => Promise<void>>;
public getCardSize(): number { public getCardSize(): number {
@ -178,61 +184,68 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
`; `;
} }
static get styles(): CSSResult[] { static get styles(): CSSResult {
return [ return css`
css` .editRow,
.editRow, .addRow {
.addRow { display: flex;
display: flex; flex-direction: row;
flex-direction: row; }
.addButton {
padding: 9px 15px 11px 15px;
cursor: pointer;
}
paper-item-body {
width: 75%;
}
paper-checkbox {
padding: 11px 11px 11px 18px;
}
paper-input {
--paper-input-container-underline: {
display: none;
} }
.addButton { --paper-input-container-underline-focus: {
padding: 9px 15px 11px 15px; display: none;
cursor: pointer;
} }
paper-item-body { --paper-input-container-underline-disabled: {
width: 75%; display: none;
} }
paper-checkbox { position: relative;
padding: 11px 11px 11px 18px; top: 1px;
} }
paper-input {
--paper-input-container-underline: { .checked {
display: none; margin-left: 17px;
} margin-bottom: 11px;
--paper-input-container-underline-focus: { margin-top: 11px;
display: none; }
}
--paper-input-container-underline-disabled: { .label {
display: none; color: var(--primary-color);
} }
position: relative;
top: 1px; .divider {
} height: 1px;
.checked { background-color: var(--divider-color);
margin-left: 17px; margin: 10px;
margin-bottom: 11px; }
margin-top: 11px;
} .clearall {
.label { cursor: pointer;
color: var(--primary-color); margin-bottom: 3px;
} float: right;
.divider { padding-right: 10px;
height: 1px; }
background-color: var(--divider-color);
margin: 10px; .addRow > ha-icon {
} color: var(--secondary-text-color);
.clearall { }
cursor: pointer; `;
margin-bottom: 3px;
float: right;
padding-right: 10px;
}
.addRow > ha-icon {
color: var(--secondary-text-color);
}
`,
];
} }
private async _fetchData(): Promise<void> { private async _fetchData(): Promise<void> {
@ -301,5 +314,3 @@ declare global {
"hui-shopping-list-card": HuiShoppingListCard; "hui-shopping-list-card": HuiShoppingListCard;
} }
} }
customElements.define("hui-shopping-list-card", HuiShoppingListCard);

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

@ -1,9 +1,10 @@
import { import {
html, html,
LitElement, LitElement,
PropertyDeclarations,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
customElement,
property,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-icon-button/paper-icon-button";
@ -52,6 +53,7 @@ export interface Config extends LovelaceCardConfig {
name?: string; name?: string;
} }
@customElement("hui-thermostat-card")
export class HuiThermostatCard extends LitElement implements LovelaceCard { export class HuiThermostatCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import(/* webpackChunkName: "hui-thermostat-card-editor" */ "../editor/config-elements/hui-thermostat-card-editor"); await import(/* webpackChunkName: "hui-thermostat-card-editor" */ "../editor/config-elements/hui-thermostat-card-editor");
@ -62,22 +64,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
return { entity: "" }; return { entity: "" };
} }
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config;
private _roundSliderStyle?: TemplateResult;
private _jQuery?: any;
private _broadCard?: boolean;
private _loaded?: boolean;
private _updated?: boolean;
static get properties(): PropertyDeclarations { @property() private _config?: Config;
return {
hass: {}, @property() private _roundSliderStyle?: TemplateResult;
_config: {},
roundSliderStyle: {}, @property() private _jQuery?: any;
_jQuery: {},
}; private _broadCard?: boolean;
}
private _loaded?: boolean;
private _updated?: boolean;
public getCardSize(): number { public getCardSize(): number {
return 4; return 4;
@ -574,5 +573,3 @@ declare global {
"hui-thermostat-card": HuiThermostatCard; "hui-thermostat-card": HuiThermostatCard;
} }
} }
customElements.define("hui-thermostat-card", HuiThermostatCard);