Use chips for button rows (#10770)

This commit is contained in:
Bram Kragten 2021-12-02 23:29:52 +01:00 committed by GitHub
parent 48d12ceafe
commit a580904c52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 129 additions and 50 deletions

View File

@ -14,11 +14,17 @@ import { customElement, property } from "lit/decorators";
export class HaChip extends LitElement {
@property({ type: Boolean }) public hasIcon = false;
@property({ type: Boolean }) public noText = false;
protected render(): TemplateResult {
return html`
<div class="mdc-chip">
${this.hasIcon
? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
? html`<div
class="mdc-chip__icon mdc-chip__icon--leading ${this.noText
? "no-text"
: ""}"
>
<slot name="icon"></slot>
</div>`
: null}
@ -51,6 +57,10 @@ export class HaChip extends LitElement {
--mdc-icon-size: 20px;
color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
}
.mdc-chip
.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden).no-text {
margin-right: -4px;
}
`;
}
}

View File

@ -134,7 +134,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
}
if (this._config.header) {
this._headerElement = createHeaderFooterElement(this._config.header);
this._headerElement = createHeaderFooterElement(
this._config.header
) as LovelaceHeaderFooter;
this._headerElement.type = "header";
if (this._hass) {
this._headerElement.hass = this._hass;
}
@ -143,7 +146,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
}
if (this._config.footer) {
this._footerElement = createHeaderFooterElement(this._config.footer);
this._footerElement = createHeaderFooterElement(
this._config.footer
) as LovelaceHeaderFooter;
this._footerElement.type = "footer";
if (this._hass) {
this._footerElement.hass = this._hass;
}

View File

@ -9,6 +9,8 @@ import { computeTooltip } from "../common/compute-tooltip";
import { actionHandler } from "../common/directives/action-handler-directive";
import { handleAction } from "../common/handle-action";
import { hasAction } from "../common/has-action";
import "../../../components/ha-chip";
import { haStyleScrollbar } from "../../../resources/styles";
@customElement("hui-buttons-base")
export class HuiButtonsBase extends LitElement {
@ -18,40 +20,46 @@ export class HuiButtonsBase extends LitElement {
protected render(): TemplateResult {
return html`
${(this.configEntities || []).map((entityConf) => {
const stateObj = this.hass.states[entityConf.entity];
<div class="ha-scrollbar">
${(this.configEntities || []).map((entityConf) => {
const stateObj = this.hass.states[entityConf.entity];
return html`
<div
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(entityConf.hold_action),
hasDoubleClick: hasAction(entityConf.double_tap_action),
})}
.config=${entityConf}
tabindex="0"
>
${entityConf.show_icon !== false
? html`
<state-badge
title=${computeTooltip(this.hass, entityConf)}
.hass=${this.hass}
.stateObj=${stateObj}
.overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image}
stateColor
></state-badge>
`
: ""}
<span>
${(entityConf.show_name && stateObj) ||
(entityConf.name && entityConf.show_name !== false)
? entityConf.name || computeStateName(stateObj)
const name =
(entityConf.show_name && stateObj) ||
(entityConf.name && entityConf.show_name !== false)
? entityConf.name || computeStateName(stateObj)
: "";
return html`
<ha-chip
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(entityConf.hold_action),
hasDoubleClick: hasAction(entityConf.double_tap_action),
})}
.config=${entityConf}
tabindex="0"
.hasIcon=${entityConf.show_icon !== false}
.noText=${!name}
>
${entityConf.show_icon !== false
? html`
<state-badge
title=${computeTooltip(this.hass, entityConf)}
.hass=${this.hass}
.stateObj=${stateObj}
.overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image}
stateColor
slot="icon"
></state-badge>
`
: ""}
</span>
</div>
`;
})}
${name}
</ha-chip>
`;
})}
</div>
`;
}
@ -61,20 +69,36 @@ export class HuiButtonsBase extends LitElement {
}
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
padding: 0 8px;
}
div {
cursor: pointer;
align-items: center;
display: inline-flex;
outline: none;
}
`;
return [
haStyleScrollbar,
css`
.ha-scrollbar {
padding: 8px;
padding-top: var(--padding-top, 8px);
padding-bottom: var(--padding-bottom, 8px);
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
state-badge {
line-height: inherit;
text-align: start;
color: var(--secondary-text-color);
}
ha-chip {
padding: 4px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
.ha-scrollbar {
flex-wrap: nowrap;
}
}
`,
];
}
}

View File

@ -1,4 +1,5 @@
import { html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, TemplateResult } from "lit";
import { classMap } from "lit/directives/class-map";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { HomeAssistant } from "../../../types";
@ -19,6 +20,8 @@ export class HuiButtonsHeaderFooter
@property({ attribute: false }) public hass?: HomeAssistant;
@property() public type!: "header" | "footer";
@state() private _configEntities?: EntityConfig[];
public getCardSize(): number {
@ -47,12 +50,43 @@ export class HuiButtonsHeaderFooter
protected render(): TemplateResult | void {
return html`
${this.type === "footer"
? html`<li class="divider footer" role="separator"></li>`
: ""}
<hui-buttons-base
.hass=${this.hass}
.configEntities=${this._configEntities}
class=${classMap({
footer: this.type === "footer",
header: this.type === "header",
})}
></hui-buttons-base>
${this.type === "header"
? html`<li class="divider header" role="separator"></li>`
: ""}
`;
}
static styles = css`
.divider {
height: 0;
margin: 16px 0;
list-style-type: none;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--divider-color);
}
.divider.header {
margin-top: 0;
}
hui-buttons-base.footer {
--padding-bottom: 16px;
}
hui-buttons-base.header {
--padding-top: 16px;
}
`;
}
declare global {

View File

@ -60,6 +60,8 @@ export class HuiGraphHeaderFooter
@property({ attribute: false }) public hass?: HomeAssistant;
@property() public type!: "header" | "footer";
@property() protected _config?: GraphHeaderFooterConfig;
@state() private _coordinates?: number[][];

View File

@ -34,6 +34,8 @@ export class HuiPictureHeaderFooter
@property({ attribute: false }) public hass?: HomeAssistant;
@property() public type!: "header" | "footer";
@property() protected _config?: PictureHeaderFooterConfig;
public getCardSize(): number {

View File

@ -68,6 +68,7 @@ export interface LovelaceRowConstructor extends Constructor<LovelaceRow> {
export interface LovelaceHeaderFooter extends HTMLElement {
hass?: HomeAssistant;
type: "header" | "footer";
getCardSize(): number | Promise<number>;
setConfig(config: LovelaceHeaderFooterConfig): void;
}