mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
Use chips for button rows (#10770)
This commit is contained in:
parent
48d12ceafe
commit
a580904c52
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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[][];
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user