Remove border from chip and use ha-label for label (#20205)
This commit is contained in:
parent
2c4b31dcaa
commit
7427e17926
|
@ -1,10 +1,10 @@
|
|||
import { css, html, LitElement, nothing, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../chips/ha-assist-chip";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import { LabelRegistryEntry } from "../../data/label_registry";
|
||||
import { computeCssColor } from "../../common/color/compute-color";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../ha-label";
|
||||
|
||||
@customElement("ha-data-table-labels")
|
||||
class HaDataTableLabels extends LitElement {
|
||||
|
@ -21,23 +21,22 @@ class HaDataTableLabels extends LitElement {
|
|||
${this.labels.length > 2
|
||||
? html`<ha-button-menu
|
||||
absolute
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click=${this._handleIconOverflowMenuOpened}
|
||||
@closed=${this._handleIconOverflowMenuClosed}
|
||||
>
|
||||
<ha-assist-chip
|
||||
slot="trigger"
|
||||
.label=${`+${this.labels.length - 2}`}
|
||||
></ha-assist-chip>
|
||||
<ha-label slot="trigger" class="plus" dense>
|
||||
+${this.labels.length - 2}
|
||||
</ha-label>
|
||||
${repeat(
|
||||
this.labels.slice(2),
|
||||
(label) => label.label_id,
|
||||
(label) =>
|
||||
html`<ha-list-item
|
||||
@click=${this._labelClicked}
|
||||
.item=${label}
|
||||
>
|
||||
(label) => html`
|
||||
<ha-list-item @click=${this._labelClicked} .item=${label}>
|
||||
${this._renderLabel(label, false)}
|
||||
</ha-list-item>`
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-button-menu>`
|
||||
: nothing}
|
||||
|
@ -47,20 +46,29 @@ class HaDataTableLabels extends LitElement {
|
|||
|
||||
private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
|
||||
const color = label?.color ? computeCssColor(label.color) : undefined;
|
||||
return html`<ha-assist-chip
|
||||
.item=${label}
|
||||
@click=${clickAction ? this._labelClicked : undefined}
|
||||
.label=${label?.name}
|
||||
active
|
||||
style=${color ? `--color: ${color}` : ""}
|
||||
>
|
||||
${label?.icon
|
||||
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
|
||||
: nothing}
|
||||
</ha-assist-chip>`;
|
||||
return html`
|
||||
<ha-label
|
||||
dense
|
||||
role="button"
|
||||
tabindex="0"
|
||||
.item=${label}
|
||||
@click=${clickAction ? this._labelClicked : undefined}
|
||||
@keydown=${clickAction ? this._labelClicked : undefined}
|
||||
style=${color ? `--color: ${color}` : ""}
|
||||
>
|
||||
${label?.icon
|
||||
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
|
||||
: nothing}
|
||||
${label.name}
|
||||
</ha-label>
|
||||
`;
|
||||
}
|
||||
|
||||
private _labelClicked(ev: Event) {
|
||||
private _labelClicked(ev) {
|
||||
ev.stopPropagation();
|
||||
if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
|
||||
return;
|
||||
}
|
||||
const label = (ev.currentTarget as any).item as LabelRegistryEntry;
|
||||
fireEvent(this, "label-clicked", { label });
|
||||
}
|
||||
|
@ -95,14 +103,15 @@ class HaDataTableLabels extends LitElement {
|
|||
position: fixed;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
ha-assist-chip {
|
||||
border: 1px solid var(--color);
|
||||
--md-assist-chip-icon-size: 16px;
|
||||
--md-assist-chip-container-height: 20px;
|
||||
--md-assist-chip-leading-space: 12px;
|
||||
--md-assist-chip-trailing-space: 12px;
|
||||
--ha-assist-chip-active-container-color: var(--color);
|
||||
--ha-assist-chip-active-container-opacity: 0.3;
|
||||
ha-label {
|
||||
--ha-label-background-color: var(--color);
|
||||
--ha-label-background-opacity: 0.5;
|
||||
}
|
||||
ha-button-menu {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.plus {
|
||||
border: 1px solid var(--divider-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
|
|
@ -12,10 +12,10 @@ import {
|
|||
import { SubscribeMixin } from "../mixins/subscribe-mixin";
|
||||
import { haStyleScrollbar } from "../resources/styles";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./chips/ha-assist-chip";
|
||||
import "./ha-check-list-item";
|
||||
import "./ha-expansion-panel";
|
||||
import "./ha-icon";
|
||||
import "./ha-check-list-item";
|
||||
import "./ha-label";
|
||||
|
||||
@customElement("ha-filter-labels")
|
||||
export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
||||
|
@ -69,18 +69,15 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
|||
.selected=${this.value?.includes(label.label_id)}
|
||||
hasMeta
|
||||
>
|
||||
<ha-assist-chip
|
||||
.label=${label.name}
|
||||
active
|
||||
style=${color ? `--color: ${color}` : ""}
|
||||
>
|
||||
<ha-label style=${color ? `--color: ${color}` : ""}>
|
||||
${label.icon
|
||||
? html`<ha-icon
|
||||
slot="icon"
|
||||
.icon=${label.icon}
|
||||
></ha-icon>`
|
||||
: nothing}
|
||||
</ha-assist-chip>
|
||||
${label.name}
|
||||
</ha-label>
|
||||
</ha-check-list-item>`;
|
||||
})}
|
||||
</mwc-list>
|
||||
|
@ -170,13 +167,9 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
|||
.warning {
|
||||
color: var(--error-color);
|
||||
}
|
||||
ha-assist-chip {
|
||||
border: 1px solid var(--color);
|
||||
--md-assist-chip-icon-size: 16px;
|
||||
--md-assist-chip-leading-space: 12px;
|
||||
--md-assist-chip-trailing-space: 12px;
|
||||
--ha-assist-chip-active-container-color: var(--color);
|
||||
--ha-assist-chip-active-container-opacity: 0.3;
|
||||
ha-label {
|
||||
--ha-label-background-color: var(--color);
|
||||
--ha-label-background-opacity: 0.5;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
@ -1,13 +1,17 @@
|
|||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "@material/web/ripple/ripple";
|
||||
|
||||
@customElement("ha-label")
|
||||
class HaLabel extends LitElement {
|
||||
@property({ type: Boolean, reflect: true }) dense = false;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<span class="label">
|
||||
<span class="content">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
<md-ripple></md-ripple>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
@ -22,8 +26,10 @@ class HaLabel extends LitElement {
|
|||
var(--rgb-primary-text-color),
|
||||
0.15
|
||||
);
|
||||
}
|
||||
.label {
|
||||
--ha-label-background-opacity: 1;
|
||||
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
@ -35,9 +41,22 @@ class HaLabel extends LitElement {
|
|||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 18px;
|
||||
background-color: var(--ha-label-background-color);
|
||||
color: var(--ha-label-text-color);
|
||||
--mdc-icon-size: 18px;
|
||||
--mdc-icon-size: 12px;
|
||||
}
|
||||
.content > * {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
:host:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-color: var(--ha-label-background-color);
|
||||
opacity: var(--ha-label-background-opacity);
|
||||
}
|
||||
::slotted([slot="icon"]) {
|
||||
margin-right: 8px;
|
||||
|
@ -45,11 +64,23 @@ class HaLabel extends LitElement {
|
|||
margin-inline-start: -8px;
|
||||
margin-inline-end: 8px;
|
||||
display: flex;
|
||||
color: var(--ha-label-icon-color);
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
:host([dense]) {
|
||||
height: 20px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
:host([dense]) ::slotted([slot="icon"]) {
|
||||
margin-right: 4px;
|
||||
margin-left: -4px;
|
||||
margin-inline-start: -4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
|
|
@ -199,9 +199,8 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
|
|||
margin-bottom: 8px;
|
||||
}
|
||||
ha-input-chip {
|
||||
border: 1px solid var(--color);
|
||||
--md-input-chip-selected-container-color: var(--color);
|
||||
--ha-input-chip-selected-container-opacity: 0.3;
|
||||
--ha-input-chip-selected-container-opacity: 0.5;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue