mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
Cleanup cards (#2870)
* 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
Paulus Schoutsen
parent
a9cecb55ac
commit
57be7ac873
@ -6,6 +6,7 @@ import {
|
||||
CSSResult,
|
||||
css,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
@ -39,6 +40,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
states?: string[];
|
||||
}
|
||||
|
||||
@customElement("hui-alarm-panel-card")
|
||||
class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement() {
|
||||
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() private _config?: Config;
|
||||
|
||||
@property() private _code?: string;
|
||||
|
||||
public getCardSize(): number {
|
||||
@ -205,98 +209,109 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
|
||||
this._code = "";
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
css`
|
||||
ha-card {
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
--alarm-color-disarmed: var(--label-badge-green);
|
||||
--alarm-color-pending: var(--label-badge-yellow);
|
||||
--alarm-color-triggered: var(--label-badge-red);
|
||||
--alarm-color-armed: var(--label-badge-red);
|
||||
--alarm-color-autoarm: rgba(0, 153, 255, 0.1);
|
||||
--alarm-state-color: var(--alarm-color-armed);
|
||||
--base-unit: 15px;
|
||||
font-size: calc(var(--base-unit));
|
||||
}
|
||||
ha-label-badge {
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
--alarm-color-disarmed: var(--label-badge-green);
|
||||
--alarm-color-pending: var(--label-badge-yellow);
|
||||
--alarm-color-triggered: var(--label-badge-red);
|
||||
--alarm-color-armed: var(--label-badge-red);
|
||||
--alarm-color-autoarm: rgba(0, 153, 255, 0.1);
|
||||
--alarm-state-color: var(--alarm-color-armed);
|
||||
--base-unit: 15px;
|
||||
font-size: calc(var(--base-unit));
|
||||
}
|
||||
|
||||
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);
|
||||
--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);
|
||||
100% {
|
||||
--ha-label-badge-color: rgba(255, 153, 0, 0.3);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
100% {
|
||||
--ha-label-badge-color: rgba(255, 153, 0, 0.3);
|
||||
}
|
||||
}
|
||||
paper-input {
|
||||
margin: 0 auto 8px;
|
||||
max-width: 150px;
|
||||
font-size: calc(var(--base-unit));
|
||||
text-align: center;
|
||||
}
|
||||
.state {
|
||||
margin-left: 16px;
|
||||
font-size: calc(var(--base-unit) * 0.9);
|
||||
position: relative;
|
||||
bottom: 16px;
|
||||
color: var(--alarm-state-color);
|
||||
animation: none;
|
||||
}
|
||||
#keypad {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
#keypad mwc-button {
|
||||
margin-bottom: 5%;
|
||||
width: 30%;
|
||||
padding: calc(var(--base-unit));
|
||||
font-size: calc(var(--base-unit) * 1.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.actions {
|
||||
margin: 0 8px;
|
||||
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);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
paper-input {
|
||||
margin: 0 auto 8px;
|
||||
max-width: 150px;
|
||||
font-size: calc(var(--base-unit));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.state {
|
||||
margin-left: 16px;
|
||||
font-size: calc(var(--base-unit) * 0.9);
|
||||
position: relative;
|
||||
bottom: 16px;
|
||||
color: var(--alarm-state-color);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#keypad {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#keypad mwc-button {
|
||||
margin-bottom: 5%;
|
||||
width: 30%;
|
||||
padding: calc(var(--base-unit));
|
||||
font-size: calc(var(--base-unit) * 1.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin: 0 8px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
CSSResult,
|
||||
css,
|
||||
customElement,
|
||||
property,
|
||||
} from "lit-element";
|
||||
|
||||
import "@polymer/paper-card/paper-card";
|
||||
@ -18,8 +19,9 @@ export interface Config extends LovelaceCardConfig {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
@customElement("hui-empty-state-card")
|
||||
export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
|
||||
public hass?: HomeAssistant;
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 2;
|
||||
@ -29,12 +31,6 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
|
||||
// tslint:disable-next-line
|
||||
}
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
};
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this.hass) {
|
||||
return html``;
|
||||
@ -83,5 +79,3 @@ declare global {
|
||||
"hui-empty-state-card": HuiEmptyStateCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-empty-state-card", HuiEmptyStateCard);
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
@ -36,6 +39,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
|
||||
theme?: string;
|
||||
}
|
||||
|
||||
@customElement("hui-entities-card")
|
||||
class HuiEntitiesCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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: [] };
|
||||
}
|
||||
|
||||
@property() protected _config?: EntitiesCardConfig;
|
||||
|
||||
protected _hass?: HomeAssistant;
|
||||
protected _config?: EntitiesCardConfig;
|
||||
|
||||
protected _configEntities?: EntitiesCardEntityConfig[];
|
||||
|
||||
set hass(hass: HomeAssistant) {
|
||||
@ -65,12 +71,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
}
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
|
||||
public getCardSize(): number {
|
||||
if (!this._config) {
|
||||
return 0;
|
||||
@ -100,7 +100,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
|
||||
const { show_header_toggle, title } = this._config;
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card>
|
||||
${!title && !show_header_toggle
|
||||
? html``
|
||||
@ -128,38 +127,52 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
#states {
|
||||
margin: -4px 0;
|
||||
}
|
||||
#states > * {
|
||||
margin: 8px 0;
|
||||
}
|
||||
#states > div > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
@apply --paper-font-headline;
|
||||
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
||||
compensating this with reduced padding */
|
||||
line-height: 40px;
|
||||
color: var(--primary-text-color);
|
||||
padding: 4px 0 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header .name {
|
||||
@apply --paper-font-common-nowrap;
|
||||
}
|
||||
.state-card-dialog {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#states {
|
||||
margin: -4px 0;
|
||||
}
|
||||
|
||||
#states > * {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
#states > div > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
/* start paper-font-headline style */
|
||||
font-family: "Roboto", "Noto", sans-serif;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.012em;
|
||||
/* end paper-font-headline style */
|
||||
|
||||
line-height: 40px;
|
||||
color: var(--primary-text-color);
|
||||
padding: 4px 0 12px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-entities-card", HuiEntitiesCard);
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
CSSResult,
|
||||
css,
|
||||
customElement,
|
||||
property,
|
||||
} from "lit-element";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { styleMap } from "lit-html/directives/style-map";
|
||||
@ -34,6 +35,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
hold_action?: ActionConfig;
|
||||
}
|
||||
|
||||
@customElement("hui-entity-button-card")
|
||||
class HuiEntityButtonCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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;
|
||||
private _config?: Config;
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 2;
|
||||
@ -147,11 +143,13 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
|
||||
padding: 4% 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
ha-icon {
|
||||
width: 40%;
|
||||
height: auto;
|
||||
color: var(--paper-item-icon-color, #44739e);
|
||||
}
|
||||
|
||||
ha-icon[data-domain="light"][data-state="on"],
|
||||
ha-icon[data-domain="switch"][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"] {
|
||||
color: var(--paper-item-icon-active-color, #fdd835);
|
||||
}
|
||||
|
||||
ha-icon[data-state="unavailable"] {
|
||||
color: var(--state-icon-unavailable-color);
|
||||
}
|
||||
@ -198,5 +197,3 @@ declare global {
|
||||
"hui-entity-button-card": HuiEntityButtonCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-entity-button-card", HuiEntityButtonCard);
|
||||
|
||||
@ -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 { LovelaceCardConfig } from "../../../data/lovelace";
|
||||
@ -21,15 +29,11 @@ export const createErrorCardConfig = (error, origConfig) => ({
|
||||
origConfig,
|
||||
});
|
||||
|
||||
@customElement("hui-error-card")
|
||||
export class HuiErrorCard extends LitElement implements LovelaceCard {
|
||||
public hass?: HomeAssistant;
|
||||
private _config?: Config;
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 4;
|
||||
@ -45,22 +49,20 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()} ${this._config.error}
|
||||
${this._config.error}
|
||||
<pre>${this._toStr(this._config.origConfig)}</pre>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
background-color: #ef5350;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
background-color: #ef5350;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -74,5 +76,3 @@ declare global {
|
||||
"hui-error-card": HuiErrorCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-error-card", HuiErrorCard);
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
css,
|
||||
CSSResult,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { styleMap } from "lit-html/directives/style-map";
|
||||
|
||||
@ -45,6 +46,7 @@ export const severityMap = {
|
||||
normal: "var(--label-badge-blue)",
|
||||
};
|
||||
|
||||
@customElement("hui-gauge-card")
|
||||
class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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() private _config?: Config;
|
||||
|
||||
private _updated?: boolean;
|
||||
|
||||
public getCardSize(): number {
|
||||
@ -306,5 +310,3 @@ declare global {
|
||||
"hui-gauge-card": HuiGaugeCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-gauge-card", HuiGaugeCard);
|
||||
|
||||
@ -2,8 +2,11 @@ import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
@ -38,6 +41,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
columns?: number;
|
||||
}
|
||||
|
||||
@customElement("hui-glance-card")
|
||||
export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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: [] };
|
||||
}
|
||||
|
||||
public hass?: HomeAssistant;
|
||||
private _config?: Config;
|
||||
private _configEntities?: ConfigEntity[];
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
private _configEntities?: ConfigEntity[];
|
||||
|
||||
public getCardSize(): number {
|
||||
return (
|
||||
@ -120,7 +119,6 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
const { title } = this._config;
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card .header="${title}">
|
||||
<div class="entities ${classMap({ "no-header": !title })}">
|
||||
${this._configEntities!.map((entityConf) =>
|
||||
@ -143,41 +141,39 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
.entities {
|
||||
display: flex;
|
||||
padding: 0 16px 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.entities.no-header {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.entity {
|
||||
box-sizing: border-box;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
width: var(--glance-column-width, 20%);
|
||||
}
|
||||
.entity div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.name {
|
||||
min-height: var(--paper-font-body1_-_line-height, 20px);
|
||||
}
|
||||
state-badge {
|
||||
margin: 8px 0;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
.entities {
|
||||
display: flex;
|
||||
padding: 0 16px 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.entities.no-header {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.entity {
|
||||
box-sizing: border-box;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
width: var(--glance-column-width, 20%);
|
||||
}
|
||||
.entity div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.name {
|
||||
min-height: var(--paper-font-body1_-_line-height, 20px);
|
||||
}
|
||||
state-badge {
|
||||
margin: 8px 0;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -248,5 +244,3 @@ declare global {
|
||||
"hui-glance-card": HuiGlanceCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-glance-card", HuiGlanceCard);
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
@ -17,6 +20,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
url: string;
|
||||
}
|
||||
|
||||
@customElement("hui-iframe-card")
|
||||
export class HuiIframeCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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%" };
|
||||
}
|
||||
|
||||
protected _config?: Config;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() protected _config?: Config;
|
||||
|
||||
public getCardSize(): number {
|
||||
if (!this._config) {
|
||||
@ -60,7 +58,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
|
||||
const aspectRatio = this._config.aspect_ratio || "50%";
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card .header="${this._config.title}">
|
||||
<div
|
||||
id="root"
|
||||
@ -74,25 +71,25 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
#root {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
iframe {
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -102,5 +99,3 @@ declare global {
|
||||
"hui-iframe-card": HuiIframeCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-iframe-card", HuiIframeCard);
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
|
||||
@ -45,6 +46,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
theme?: string;
|
||||
}
|
||||
|
||||
@customElement("hui-light-card")
|
||||
export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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() private _config?: Config;
|
||||
|
||||
@property() private _roundSliderStyle?: TemplateResult;
|
||||
|
||||
@property() private _jQuery?: any;
|
||||
|
||||
private _brightnessTimout?: number;
|
||||
|
||||
public getCardSize(): number {
|
||||
@ -183,6 +189,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -193,6 +200,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
--brightness-font-size: 1.2rem;
|
||||
--rail-border-color: transparent;
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -202,6 +210,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
text-align: center;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.icon-state {
|
||||
display: block;
|
||||
margin: auto;
|
||||
@ -209,40 +218,50 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
height: 100%;
|
||||
transform: translate(0, 25%);
|
||||
}
|
||||
|
||||
#light {
|
||||
margin: 0 auto;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
#light .rs-bar.rs-transition.rs-first,
|
||||
.rs-bar.rs-transition.rs-second {
|
||||
z-index: 20 !important;
|
||||
}
|
||||
|
||||
#light .rs-range-color {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
#light .rs-path-color {
|
||||
background-color: var(--disabled-text-color);
|
||||
}
|
||||
|
||||
#light .rs-handle {
|
||||
background-color: var(--paper-card-background-color, white);
|
||||
padding: 7px;
|
||||
border: 2px solid var(--disabled-text-color);
|
||||
}
|
||||
|
||||
#light .rs-handle.rs-focus {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
#light .rs-handle:after {
|
||||
border-color: var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
#light .rs-border {
|
||||
border-color: var(--rail-border-color);
|
||||
}
|
||||
|
||||
#light .rs-inner.rs-bg-color.rs-border,
|
||||
#light .rs-overlay.rs-transition.rs-bg-color {
|
||||
background-color: var(--paper-card-background-color, white);
|
||||
}
|
||||
|
||||
.light-icon {
|
||||
margin: auto;
|
||||
width: 76px;
|
||||
@ -250,16 +269,20 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
color: var(--paper-item-icon-color, #44739e);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.light-icon[data-state="on"] {
|
||||
color: var(--paper-item-icon-active-color, #fdd835);
|
||||
}
|
||||
|
||||
.light-icon[data-state="unavailable"] {
|
||||
color: var(--state-icon-unavailable-color);
|
||||
}
|
||||
|
||||
.name {
|
||||
padding-top: 40px;
|
||||
font-size: var(--name-font-size);
|
||||
}
|
||||
|
||||
.brightness {
|
||||
font-size: var(--brightness-font-size);
|
||||
position: absolute;
|
||||
@ -276,9 +299,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
text-shadow: var(--brightness-font-text-shadow);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.show_brightness {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
@ -352,5 +377,3 @@ declare global {
|
||||
"hui-light-card": HuiLightCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-light-card", HuiLightCard);
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
@ -17,22 +20,18 @@ export interface Config extends LovelaceCardConfig {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
@customElement("hui-markdown-card")
|
||||
export class HuiMarkdownCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
await import(/* webpackChunkName: "hui-markdown-card-editor" */ "../editor/config-elements/hui-markdown-card-editor");
|
||||
return document.createElement("hui-markdown-card-editor");
|
||||
}
|
||||
|
||||
public static getStubConfig(): object {
|
||||
return { content: " " };
|
||||
}
|
||||
|
||||
private _config?: Config;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
public getCardSize(): number {
|
||||
return this._config!.content.split("\n").length;
|
||||
@ -52,7 +51,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card .header="${this._config.title}">
|
||||
<ha-markdown
|
||||
class="markdown ${classMap({
|
||||
@ -64,35 +62,40 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
@apply --paper-font-body1;
|
||||
}
|
||||
ha-markdown {
|
||||
display: block;
|
||||
padding: 0 16px 16px;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
.markdown.no-header {
|
||||
padding-top: 16px;
|
||||
}
|
||||
ha-markdown > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
ha-markdown > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ha-markdown a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
ha-markdown img {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
/* start paper-font-headline style */
|
||||
font-family: "Roboto", "Noto", sans-serif;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.012em;
|
||||
/* end paper-font-headline style */
|
||||
}
|
||||
ha-markdown {
|
||||
display: block;
|
||||
padding: 0 16px 16px;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
.markdown.no-header {
|
||||
padding-top: 16px;
|
||||
}
|
||||
ha-markdown > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
ha-markdown > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ha-markdown a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
ha-markdown img {
|
||||
max-width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -102,5 +105,3 @@ declare global {
|
||||
"hui-markdown-card": HuiMarkdownCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-markdown-card", HuiMarkdownCard);
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
@ -20,6 +23,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
hold_action?: ActionConfig;
|
||||
}
|
||||
|
||||
@customElement("hui-picture-card")
|
||||
export class HuiPictureCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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;
|
||||
protected _config?: Config;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return { _config: {} };
|
||||
}
|
||||
@property() protected _config?: Config;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 3;
|
||||
@ -59,7 +60,6 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card
|
||||
@ha-click="${this._handleTap}"
|
||||
@ha-hold="${this._handleHold}"
|
||||
@ -75,20 +75,20 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
ha-card.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ha-card.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -106,5 +106,3 @@ declare global {
|
||||
"hui-picture-card": HuiPictureCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-picture-card", HuiPictureCard);
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -17,15 +25,11 @@ interface Config extends LovelaceCardConfig {
|
||||
elements: LovelaceElementConfig[];
|
||||
}
|
||||
|
||||
@customElement("hui-picture-elements-card")
|
||||
class HuiPictureElementsCard extends LitElement implements LovelaceCard {
|
||||
private _config?: Config;
|
||||
private _hass?: HomeAssistant;
|
||||
@property() private _config?: Config;
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
private _hass?: HomeAssistant;
|
||||
|
||||
set hass(hass: HomeAssistant) {
|
||||
this._hass = hass;
|
||||
@ -60,7 +64,6 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card .header="${this._config.title}">
|
||||
<div id="root">
|
||||
<hui-image
|
||||
@ -84,20 +87,20 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
#root {
|
||||
position: relative;
|
||||
}
|
||||
.element {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
#root {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.element {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -107,5 +110,3 @@ declare global {
|
||||
"hui-picture-elements-card": HuiPictureElementsCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-picture-elements-card", HuiPictureElementsCard);
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
@ -34,16 +37,11 @@ interface Config extends LovelaceCardConfig {
|
||||
show_state?: boolean;
|
||||
}
|
||||
|
||||
@customElement("hui-picture-entity-card")
|
||||
class HuiPictureEntityCard extends LitElement implements LovelaceCard {
|
||||
public hass?: HomeAssistant;
|
||||
private _config?: Config;
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 3;
|
||||
@ -109,7 +107,6 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card>
|
||||
<hui-image
|
||||
.hass="${this.hass}"
|
||||
@ -132,37 +129,44 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
min-height: 75px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
hui-image.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.footer {
|
||||
@apply --paper-font-common-nowrap;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: white;
|
||||
}
|
||||
.both {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.state {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
min-height: 75px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
hui-image.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
/* start paper-font-common-nowrap style */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* end paper-font-common-nowrap style */
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.both {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.state {
|
||||
text-align: right;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -180,5 +184,3 @@ declare global {
|
||||
"hui-picture-entity-card": HuiPictureEntityCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-picture-entity-card", HuiPictureEntityCard);
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
@ -39,18 +42,15 @@ interface Config extends LovelaceCardConfig {
|
||||
hold_action?: ActionConfig;
|
||||
}
|
||||
|
||||
@customElement("hui-picture-glance-card")
|
||||
class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
||||
public hass?: HomeAssistant;
|
||||
private _config?: Config;
|
||||
private _entitiesDialog?: EntityConfig[];
|
||||
private _entitiesToggle?: EntityConfig[];
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
private _entitiesDialog?: EntityConfig[];
|
||||
|
||||
private _entitiesToggle?: EntityConfig[];
|
||||
|
||||
public getCardSize(): number {
|
||||
return 3;
|
||||
@ -91,7 +91,6 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card>
|
||||
<hui-image
|
||||
class="${classMap({
|
||||
@ -177,44 +176,52 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
||||
toggleEntity(this.hass!, (ev.target as any).entity);
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
hui-image.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.box {
|
||||
@apply --paper-font-common-nowrap;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 4px 8px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.box .title {
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
ha-icon {
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
ha-icon.state-on {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-card {
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
hui-image.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box {
|
||||
/* start paper-font-common-nowrap style */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* end paper-font-common-nowrap style */
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 4px 8px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.box .title {
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);
|
||||
|
||||
@ -2,9 +2,12 @@ import {
|
||||
html,
|
||||
svg,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
css,
|
||||
CSSResult,
|
||||
} from "lit-element";
|
||||
import "@polymer/paper-spinner/paper-spinner";
|
||||
|
||||
@ -145,6 +148,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
hours_to_show?: number;
|
||||
}
|
||||
|
||||
@customElement("hui-sensor-card")
|
||||
class HuiSensorCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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 {};
|
||||
}
|
||||
|
||||
public hass?: HomeAssistant;
|
||||
private _config?: Config;
|
||||
private _history?: any;
|
||||
private _date?: Date;
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
_config: {},
|
||||
_history: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
@property() private _history?: any;
|
||||
|
||||
private _date?: Date;
|
||||
|
||||
public setConfig(config: Config): void {
|
||||
if (!config.entity || config.entity.split(".")[0] !== "sensor") {
|
||||
@ -244,7 +243,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
|
||||
graph = "";
|
||||
}
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card @click="${this._handleClick}">
|
||||
<div class="flex">
|
||||
<div class="icon">
|
||||
@ -324,87 +322,95 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
|
||||
this._date = new Date();
|
||||
}
|
||||
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
ha-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
}
|
||||
.name {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
max-height: 1.4rem;
|
||||
margin-top: 2px;
|
||||
opacity: 0.8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
.icon {
|
||||
color: var(--paper-item-icon-color, #44739e);
|
||||
display: inline-block;
|
||||
flex: 0 0 40px;
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
.info {
|
||||
flex-wrap: wrap;
|
||||
margin: 16px 0 16px 8px;
|
||||
}
|
||||
#value {
|
||||
display: inline-block;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
#measurement {
|
||||
align-self: flex-end;
|
||||
display: inline-block;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.2em;
|
||||
margin-top: 0.1em;
|
||||
opacity: 0.6;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.graph {
|
||||
align-self: flex-end;
|
||||
margin: auto;
|
||||
margin-bottom: 0px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.graph > div {
|
||||
align-self: flex-end;
|
||||
margin: auto 8px;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
max-height: 1.4rem;
|
||||
margin-top: 2px;
|
||||
opacity: 0.8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--paper-item-icon-color, #44739e);
|
||||
display: inline-block;
|
||||
flex: 0 0 40px;
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex-wrap: wrap;
|
||||
margin: 16px 0 16px 8px;
|
||||
}
|
||||
|
||||
#value {
|
||||
display: inline-block;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#measurement {
|
||||
align-self: flex-end;
|
||||
display: inline-block;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.2em;
|
||||
margin-top: 0.1em;
|
||||
opacity: 0.6;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.graph {
|
||||
align-self: flex-end;
|
||||
margin: auto;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-sensor-card", HuiSensorCard);
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
css,
|
||||
CSSResult,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { repeat } from "lit-html/directives/repeat";
|
||||
import { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||
@ -28,6 +29,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
@customElement("hui-shopping-list-card")
|
||||
class HuiShoppingListCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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() private _config?: Config;
|
||||
|
||||
@property() private _uncheckedItems?: ShoppingListItem[];
|
||||
|
||||
@property() private _checkedItems?: ShoppingListItem[];
|
||||
|
||||
private _unsubEvents?: Promise<() => Promise<void>>;
|
||||
|
||||
public getCardSize(): number {
|
||||
@ -178,61 +184,68 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
css`
|
||||
.editRow,
|
||||
.addRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
.editRow,
|
||||
.addRow {
|
||||
display: flex;
|
||||
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 {
|
||||
padding: 9px 15px 11px 15px;
|
||||
cursor: pointer;
|
||||
--paper-input-container-underline-focus: {
|
||||
display: none;
|
||||
}
|
||||
paper-item-body {
|
||||
width: 75%;
|
||||
--paper-input-container-underline-disabled: {
|
||||
display: none;
|
||||
}
|
||||
paper-checkbox {
|
||||
padding: 11px 11px 11px 18px;
|
||||
}
|
||||
paper-input {
|
||||
--paper-input-container-underline: {
|
||||
display: none;
|
||||
}
|
||||
--paper-input-container-underline-focus: {
|
||||
display: none;
|
||||
}
|
||||
--paper-input-container-underline-disabled: {
|
||||
display: none;
|
||||
}
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.checked {
|
||||
margin-left: 17px;
|
||||
margin-bottom: 11px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
.label {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
margin: 10px;
|
||||
}
|
||||
.clearall {
|
||||
cursor: pointer;
|
||||
margin-bottom: 3px;
|
||||
float: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.addRow > ha-icon {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.checked {
|
||||
margin-left: 17px;
|
||||
margin-bottom: 11px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.clearall {
|
||||
cursor: pointer;
|
||||
margin-bottom: 3px;
|
||||
float: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.addRow > ha-icon {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
private async _fetchData(): Promise<void> {
|
||||
@ -301,5 +314,3 @@ declare global {
|
||||
"hui-shopping-list-card": HuiShoppingListCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-shopping-list-card", HuiShoppingListCard);
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
@ -52,6 +53,7 @@ export interface Config extends LovelaceCardConfig {
|
||||
name?: string;
|
||||
}
|
||||
|
||||
@customElement("hui-thermostat-card")
|
||||
export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
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: "" };
|
||||
}
|
||||
|
||||
public hass?: HomeAssistant;
|
||||
private _config?: Config;
|
||||
private _roundSliderStyle?: TemplateResult;
|
||||
private _jQuery?: any;
|
||||
private _broadCard?: boolean;
|
||||
private _loaded?: boolean;
|
||||
private _updated?: boolean;
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
_config: {},
|
||||
roundSliderStyle: {},
|
||||
_jQuery: {},
|
||||
};
|
||||
}
|
||||
@property() private _config?: Config;
|
||||
|
||||
@property() private _roundSliderStyle?: TemplateResult;
|
||||
|
||||
@property() private _jQuery?: any;
|
||||
|
||||
private _broadCard?: boolean;
|
||||
|
||||
private _loaded?: boolean;
|
||||
|
||||
private _updated?: boolean;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 4;
|
||||
@ -574,5 +573,3 @@ declare global {
|
||||
"hui-thermostat-card": HuiThermostatCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-thermostat-card", HuiThermostatCard);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user