static styles, decorators and width fix (#2727)

Not sure how the width got messed up, perhaps changes to ha-card?
This commit is contained in:
Ian Richardson 2019-02-12 13:52:02 -06:00 committed by Paulus Schoutsen
parent aae3c26a64
commit 2f2cdad16b

View File

@ -1,4 +1,11 @@
import { html, LitElement, TemplateResult } from "lit-element"; import {
html,
LitElement,
TemplateResult,
css,
CSSResult,
property,
} 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";
import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-checkbox/paper-checkbox";
@ -26,25 +33,17 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
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");
return document.createElement("hui-shopping-list-card-editor"); return document.createElement("hui-shopping-list-card-editor");
} }
public static getStubConfig(): object { public static getStubConfig(): object {
return {}; return {};
} }
public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
private _config?: Config; @property() private _config?: Config;
private _uncheckedItems?: ShoppingListItem[]; @property() private _uncheckedItems?: ShoppingListItem[];
private _checkedItems?: ShoppingListItem[]; @property() private _checkedItems?: ShoppingListItem[];
private _unsubEvents?: Promise<() => Promise<void>>; private _unsubEvents?: Promise<() => Promise<void>>;
static get properties() {
return {
hass: {},
_config: {},
_uncheckedItems: {},
_checkedItems: {},
};
}
public getCardSize(): number { public getCardSize(): number {
return (this._config ? (this._config.title ? 1 : 0) : 0) + 3; return (this._config ? (this._config.title ? 1 : 0) : 0) + 3;
} }
@ -82,7 +81,6 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
} }
return html` return html`
${this.renderStyle()}
<ha-card .header="${this._config.title}"> <ha-card .header="${this._config.title}">
<div class="addRow"> <div class="addRow">
<ha-icon <ha-icon
@ -180,9 +178,9 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderStyle(): TemplateResult { static get styles(): CSSResult[] {
return html` return [
<style> css`
.editRow, .editRow,
.addRow { .addRow {
display: flex; display: flex;
@ -192,6 +190,9 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
padding: 9px 15px 11px 15px; padding: 9px 15px 11px 15px;
cursor: pointer; cursor: pointer;
} }
paper-item-body {
width: 75%;
}
paper-checkbox { paper-checkbox {
padding: 11px 11px 11px 18px; padding: 11px 11px 11px 18px;
} }
@ -230,8 +231,8 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
.addRow > ha-icon { .addRow > ha-icon {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
</style> `,
`; ];
} }
private async _fetchData(): Promise<void> { private async _fetchData(): Promise<void> {