mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Fix selected icon of picker elements (#9606)
This commit is contained in:
parent
9dd6b3b72d
commit
a432cf8405
@ -1,6 +1,6 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import "@material/mwc-icon-button/mwc-icon-button";
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@polymer/paper-item/paper-item-body";
|
import "@polymer/paper-item/paper-item-body";
|
||||||
@ -52,20 +52,27 @@ interface AreaDevices {
|
|||||||
|
|
||||||
const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
|
const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
|
||||||
paper-item {
|
paper-item {
|
||||||
width: 100%;
|
|
||||||
margin: -10px 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -10px;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
mwc-icon-button {
|
#content {
|
||||||
float: right;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.devices {
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-right: -2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.devices.visible {
|
:host([selected]) paper-item {
|
||||||
display: block;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-item>
|
<paper-item>
|
||||||
<paper-item-body two-line="">
|
<paper-item-body two-line="">
|
||||||
<div class="name">${item.name}</div>
|
<div class="name">${item.name}</div>
|
||||||
|
@ -12,6 +12,7 @@ import {
|
|||||||
import { customElement, property, state, query } from "lit/decorators";
|
import { customElement, property, state, query } from "lit/decorators";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
|
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
|
||||||
|
import { mdiCheck } from "@mdi/js";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { computeDomain } from "../../common/entity/compute_domain";
|
import { computeDomain } from "../../common/entity/compute_domain";
|
||||||
import { compare } from "../../common/string/compare";
|
import { compare } from "../../common/string/compare";
|
||||||
@ -47,10 +48,27 @@ export type HaDevicePickerDeviceFilterFunc = (
|
|||||||
|
|
||||||
const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
|
const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
|
||||||
paper-item {
|
paper-item {
|
||||||
margin: -10px 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -10px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-right: -2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-item {
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-item>
|
<paper-item>
|
||||||
<paper-item-body two-line>
|
<paper-item-body two-line>
|
||||||
${item.name}
|
${item.name}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "@material/mwc-icon-button/mwc-icon-button";
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
|
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
|
||||||
@ -25,10 +25,27 @@ export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
|
|||||||
|
|
||||||
const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
|
const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
|
||||||
paper-item {
|
paper-item {
|
||||||
margin: -5px -10px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -10px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-right: -2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-item {
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-item>${formatAttributeName(item)}</paper-item>`;
|
<paper-item>${formatAttributeName(item)}</paper-item>`;
|
||||||
|
|
||||||
@customElement("ha-entity-attribute-picker")
|
@customElement("ha-entity-attribute-picker")
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "@material/mwc-icon-button/mwc-icon-button";
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-item/paper-icon-item";
|
import "@polymer/paper-item/paper-icon-item";
|
||||||
import "@polymer/paper-item/paper-item-body";
|
import "@polymer/paper-item/paper-item-body";
|
||||||
@ -28,10 +28,25 @@ export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
|
|||||||
|
|
||||||
const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
|
const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
|
||||||
paper-icon-item {
|
paper-icon-item {
|
||||||
margin: -10px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -8px;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-icon-item {
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-icon-item>
|
<paper-icon-item>
|
||||||
<state-badge slot="item-icon" .stateObj=${item}></state-badge>
|
<state-badge slot="item-icon" .stateObj=${item}></state-badge>
|
||||||
<paper-item-body two-line="">
|
<paper-item-body two-line="">
|
||||||
|
@ -27,6 +27,8 @@ import type { HaComboBox } from "../ha-combo-box";
|
|||||||
import "../ha-svg-icon";
|
import "../ha-svg-icon";
|
||||||
import "./state-badge";
|
import "./state-badge";
|
||||||
|
|
||||||
|
// vaadin-combo-box-item
|
||||||
|
|
||||||
const rowRenderer: ComboBoxLitRenderer<{
|
const rowRenderer: ComboBoxLitRenderer<{
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
@ -34,23 +36,22 @@ const rowRenderer: ComboBoxLitRenderer<{
|
|||||||
}> = (item) => html`<style>
|
}> = (item) => html`<style>
|
||||||
paper-icon-item {
|
paper-icon-item {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: -10px;
|
margin: -8px;
|
||||||
}
|
}
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
:host([selected]) paper-icon-item {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
ha-svg-icon {
|
ha-svg-icon {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
margin-right: -2px;
|
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
:host(:not([selected])) ha-svg-icon {
|
:host(:not([selected])) ha-svg-icon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
:host([selected]) paper-icon-item {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-icon-item>
|
<paper-icon-item>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
|
import { mdiCheck } from "@mdi/js";
|
||||||
import { html, LitElement, TemplateResult } from "lit";
|
import { html, LitElement, TemplateResult } from "lit";
|
||||||
import { customElement, property, state, query } from "lit/decorators";
|
|
||||||
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
|
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
|
||||||
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
import { isComponentLoaded } from "../common/config/is_component_loaded";
|
import { isComponentLoaded } from "../common/config/is_component_loaded";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { compare } from "../common/string/compare";
|
import { compare } from "../common/string/compare";
|
||||||
@ -13,10 +14,30 @@ import { HaComboBox } from "./ha-combo-box";
|
|||||||
|
|
||||||
const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
|
const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
|
||||||
paper-item {
|
paper-item {
|
||||||
margin: -10px 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -10px;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-item {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-right: -2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-icon-item {
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-item>
|
<paper-item>
|
||||||
<paper-item-body two-line>
|
<paper-item-body two-line>
|
||||||
${item.name}
|
${item.name}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "@material/mwc-icon-button/mwc-icon-button";
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@polymer/paper-item/paper-item-body";
|
import "@polymer/paper-item/paper-item-body";
|
||||||
@ -48,13 +48,27 @@ const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
|
|||||||
item
|
item
|
||||||
) => html`<style>
|
) => html`<style>
|
||||||
paper-item {
|
paper-item {
|
||||||
margin: -10px 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -10px;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
paper-item.add-new {
|
#content {
|
||||||
font-weight: 500;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-right: -2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-item {
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
|
<paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
|
||||||
<paper-item-body two-line>${item.name}</paper-item-body>
|
<paper-item-body two-line>${item.name}</paper-item-body>
|
||||||
</paper-item>`;
|
</paper-item>`;
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { mdiCheck } from "@mdi/js";
|
||||||
import { html, LitElement } from "lit";
|
import { html, LitElement } from "lit";
|
||||||
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
|
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
|
||||||
import { property, state } from "lit/decorators";
|
import { property, state } from "lit/decorators";
|
||||||
@ -12,10 +13,30 @@ const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
|
|||||||
item
|
item
|
||||||
) => html`<style>
|
) => html`<style>
|
||||||
paper-item {
|
paper-item {
|
||||||
margin: -10px 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -10px;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-item {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
ha-svg-icon {
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-right: -2px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
:host(:not([selected])) ha-svg-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([selected]) paper-icon-item {
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
|
||||||
<paper-item>
|
<paper-item>
|
||||||
<paper-item-body two-line>
|
<paper-item-body two-line>
|
||||||
${item.name}
|
${item.name}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user