${scroll({
items: this.entries,
renderItem: (item: LogbookEntry, index?: number) =>
@@ -154,13 +156,16 @@ class HaLogbook extends LitElement {
color: var(--primary-color);
}
+ .container {
+ padding: 0 16px;
+ }
+
.uni-virtualizer-host {
display: block;
position: relative;
contain: strict;
height: 100%;
overflow: auto;
- padding: 0 16px;
}
.uni-virtualizer-host > * {
diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 7ecfd6ec15..5e57fa5abf 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -9,6 +9,7 @@ import {
PropertyValues,
} from "lit-element";
import { repeat } from "lit-html/directives/repeat";
+import { classMap } from "lit-html/directives/class-map";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-checkbox/paper-checkbox";
@@ -26,8 +27,6 @@ import {
} from "../../../data/shopping-list";
import { ShoppingListCardConfig, SensorCardConfig } from "./types";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { actionHandler } from "../common/directives/action-handler-directive";
-import { classMap } from "lit-html/directives/class-map";
@customElement("hui-shopping-list-card")
class HuiShoppingListCard extends LitElement implements LovelaceCard {
@@ -118,46 +117,40 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
${repeat(
this._uncheckedItems!,
(item) => item.id,
- (item, index) =>
+ (item) =>
html`
`
)}
@@ -165,45 +158,40 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
? html`
-
+
${this.hass!.localize(
"ui.panel.lovelace.cards.shopping-list.checked_items"
)}
${repeat(
this._checkedItems!,
(item) => item.id,
- (item, index) =>
+ (item) =>
html`
`
)}
@@ -216,8 +204,7 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult {
return css`
ha-card {
- padding-bottom: 16px;
- padding-top: 16px;
+ padding: 16px;
}
.has-header {
@@ -225,63 +212,51 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
}
.editRow,
- .addRow {
+ .addRow,
+ .checked {
display: flex;
flex-direction: row;
+ align-items: center;
+ }
+
+ .addRow ha-icon {
+ color: var(--secondary-text-color);
+ --iron-icon-width: 26px;
+ --iron-icon-height: 26px;
}
.addButton {
- padding: 9px 15px 11px 15px;
+ padding-right: 16px;
cursor: pointer;
}
- paper-item-body {
- width: 75%;
- }
-
paper-checkbox {
- padding: 11px 11px 11px 18px;
+ padding-left: 4px;
+ padding-right: 20px;
+ --paper-checkbox-label-spacing: 0px;
}
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;
+ flex-grow: 1;
}
.checked {
- margin-left: 17px;
- margin-bottom: 11px;
- margin-top: 11px;
+ margin: 12px 0;
+ justify-content: space-between;
}
- .label {
+ .checked span {
color: var(--primary-color);
}
.divider {
height: 1px;
background-color: var(--divider-color);
- margin: 10px;
+ margin: 10px 0;
}
.clearall {
cursor: pointer;
- margin-bottom: 3px;
- float: right;
- padding-right: 10px;
- }
-
- .addRow > ha-icon {
- color: var(--secondary-text-color);
}
`;
}
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index ace26dfa5f..d0f1299c17 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -10,6 +10,7 @@ import "@polymer/paper-input/paper-input";
import "../../components/hui-action-editor";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
+import "../../../../components/ha-icon-input";
import { struct } from "../../common/structs/struct";
import {
@@ -23,6 +24,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { configElementStyle } from "./config-elements-style";
import { ActionConfig } from "../../../../data/lovelace";
import { ButtonCardConfig } from "../../cards/types";
+import { stateIcon } from "../../../../common/entity/state_icon";
const cardConfigStruct = struct({
type: "string",
@@ -127,16 +129,18 @@ export class HuiButtonCardEditor extends LitElement
.configValue="${"name"}"
@value-changed="${this._valueChanged}"
>
-
+ .value=${this._icon}
+ .placeholder=${this._icon ||
+ stateIcon(this.hass.states[this._entity])}
+ .configValue=${"icon"}
+ @value-changed=${this._valueChanged}
+ >