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

Shopping Cart: CSS HTML updates (#5463)

Browse Source 
* Fix css

* click
This commit is contained in:
Zack Arnett 2020-04-07 09:03:19 -04:00 committed by GitHub
parent c574556deb
commit 6ca944b7ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {
<div class="addRow">
<ha-icon
class="addButton"
@click="${this._addItem}"
icon="hass:plus"
.title="${this.hass!.localize(
.title=${this.hass!.localize(
"ui.panel.lovelace.cards.shopping-list.add_item"
)}"
)}
@click=${this._addItem}
>
</ha-icon>
<paper-item-body>
<paper-input
no-label-float
class="addBox"
placeholder="${this.hass!.localize(
"ui.panel.lovelace.cards.shopping-list.add_item"
)}"
@keydown="${this._addKeyPress}"
></paper-input>
</paper-item-body>
<paper-input
no-label-float
class="addBox"
placeholder=${this.hass!.localize(
"ui.panel.lovelace.cards.shopping-list.add_item"
)}
@keydown=${this._addKeyPress}
></paper-input>
</div>
${repeat(
this._uncheckedItems!,
(item) => item.id,
(item, index) =>
(item) =>
html`
<div class="editRow">
<paper-checkbox
slot="item-icon"
id="${index}"
?checked="${item.complete}"
.itemId="${item.id}"
@click="${this._completeItem}"
tabindex="0"
?checked=${item.complete}
.itemId=${item.id}
@click=${this._completeItem}
></paper-checkbox>
<paper-item-body>
<paper-input
no-label-float
.value="${item.name}"
.itemId="${item.id}"
@change="${this._saveEdit}"
></paper-input>
</paper-item-body>
<paper-input
no-label-float
.value=${item.name}
.itemId=${item.id}
@change=${this._saveEdit}
></paper-input>
</div>
`
)}
@ -165,45 +158,40 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
? html`
<div class="divider"></div>
<div class="checked">
<span class="label">
<span>
${this.hass!.localize(
"ui.panel.lovelace.cards.shopping-list.checked_items"
)}
</span>
<ha-icon
class="clearall"
@action=${this._clearItems}
.actionHandler=${actionHandler()}
tabindex="0"
icon="hass:notification-clear-all"
.title="${this.hass!.localize(
.title=${this.hass!.localize(
"ui.panel.lovelace.cards.shopping-list.clear_items"
)}"
)}
@click=${this._clearItems}
>
</ha-icon>
</div>
${repeat(
this._checkedItems!,
(item) => item.id,
(item, index) =>
(item) =>
html`
<div class="editRow">
<paper-checkbox
slot="item-icon"
id="${index}"
?checked="${item.complete}"
.itemId="${item.id}"
@click="${this._completeItem}"
tabindex="0"
?checked=${item.complete}
.itemId=${item.id}
@click=${this._completeItem}
></paper-checkbox>
<paper-item-body>
<paper-input
no-label-float
.value="${item.name}"
.itemId="${item.id}"
@change="${this._saveEdit}"
></paper-input>
</paper-item-body>
<paper-input
no-label-float
.value=${item.name}
.itemId=${item.id}
@change=${this._saveEdit}
></paper-input>
</div>
`
)}
@ -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);
}
`;
}