Clean up generic row (#5022)

This commit is contained in:
Paulus Schoutsen 2020-02-28 13:35:42 -08:00 committed by GitHub
parent c5fe5565bb
commit d7aaed05b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
60 changed files with 213 additions and 227 deletions

View File

@ -1 +1,2 @@
export const SENSOR_DEVICE_CLASS_BATTERY = "battery";
export const SENSOR_DEVICE_CLASS_TIMESTAMP = "timestamp";

View File

@ -45,7 +45,7 @@ class MoreInfoCamera extends LitElement {
return html`
<ha-camera-stream
.hass="${this.hass}"
.hass=${this.hass}
.stateObj="${this.stateObj}"
showcontrols
></ha-camera-stream>

View File

@ -36,13 +36,13 @@ export class HuiNotificationItem extends LitElement {
return "entity_id" in this.notification
? html`
<configurator-notification-item
.hass="${this.hass}"
.hass=${this.hass}
.notification="${this.notification}"
></configurator-notification-item>
`
: html`
<persistent-notification-item
.hass="${this.hass}"
.hass=${this.hass}
.notification="${this.notification}"
></persistent-notification-item>
`;

View File

@ -39,7 +39,7 @@ export class HuiPersistentNotificationItem extends LitElement {
<div class="time">
<span>
<ha-relative-time
.hass="${this.hass}"
.hass=${this.hass}
.datetime="${this.notification.created_at}"
></ha-relative-time>
<paper-tooltip

View File

@ -26,7 +26,7 @@ export default class HaNumericStateCondition extends LitElement {
<ha-entity-picker
.value="${entity_id}"
@value-changed="${this._entityPicked}"
.hass="${this.hass}"
.hass=${this.hass}
allow-custom-entity
></ha-entity-picker>
<paper-input

View File

@ -42,7 +42,7 @@ export default class HaNumericStateTrigger extends LitElement {
<ha-entity-picker
.value="${entity_id}"
@value-changed="${this._entityPicked}"
.hass="${this.hass}"
.hass=${this.hass}
allow-custom-entity
></ha-entity-picker>
<paper-input

View File

@ -118,7 +118,7 @@ export class CloudGooglePref extends LitElement {
</div>
<div class="card-actions">
<ha-call-api-button
.hass="${this.hass}"
.hass=${this.hass}
.disabled="${!google_enabled}"
@hass-api-called=${this._syncEntitiesCalled}
path="cloud/google_actions/sync"

View File

@ -84,7 +84,7 @@ class ZHAAddDevicesPage extends LitElement {
${this._showHelp
? html`
<ha-service-description
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="permit"
class="help-text"

View File

@ -165,7 +165,7 @@ export class ZHAClusterAttributes extends LitElement {
`
: ""}
<ha-call-service-button
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="set_zigbee_cluster_attribute"
.serviceData="${this._setAttributeServiceData}"
@ -177,7 +177,7 @@ export class ZHAClusterAttributes extends LitElement {
${this.showHelp
? html`
<ha-service-description
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="set_zigbee_cluster_attribute"
class="help-text2"

View File

@ -127,7 +127,7 @@ export class ZHAClusterCommands extends LitElement {
</div>
<div class="card-actions">
<ha-call-service-button
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="issue_zigbee_cluster_command"
.serviceData="${this._issueClusterCommandServiceData}"
@ -139,7 +139,7 @@ export class ZHAClusterCommands extends LitElement {
${this._showHelp
? html`
<ha-service-description
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="issue_zigbee_cluster_command"
class="help-text2"

View File

@ -299,7 +299,7 @@ class ZHADeviceCard extends LitElement {
: ""}
<ha-call-service-button
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="remove"
.confirmation=${this.hass!.localize(
@ -331,7 +331,7 @@ class ZHADeviceCard extends LitElement {
${this.showHelp
? html`
<ha-service-description
.hass="${this.hass}"
.hass=${this.hass}
domain="zha"
service="permit"
class="help-text2"

View File

@ -59,14 +59,14 @@ export class ZHADevicePage extends LitElement {
>
<zha-node
.isWide="${this.isWide}"
.hass="${this.hass}"
.hass=${this.hass}
.device=${this.device}
></zha-node>
${this.device && this.device.device_type !== "Coordinator"
? html`
<zha-clusters
.hass="${this.hass}"
.hass=${this.hass}
.isWide="${this.isWide}"
.selectedDevice="${this.device}"
@zha-cluster-selected="${this._onClusterSelected}"
@ -75,14 +75,14 @@ export class ZHADevicePage extends LitElement {
? html`
<zha-cluster-attributes
.isWide="${this.isWide}"
.hass="${this.hass}"
.hass=${this.hass}
.selectedNode="${this.device}"
.selectedCluster="${this._selectedCluster}"
></zha-cluster-attributes>
<zha-cluster-commands
.isWide="${this.isWide}"
.hass="${this.hass}"
.hass=${this.hass}
.selectedNode="${this.device}"
.selectedCluster="${this._selectedCluster}"
></zha-cluster-commands>
@ -92,7 +92,7 @@ export class ZHADevicePage extends LitElement {
? html`
<zha-device-binding-control
.isWide="${this.isWide}"
.hass="${this.hass}"
.hass=${this.hass}
.selectedDevice="${this.device}"
.bindableDevices="${this._bindableDevices}"
></zha-device-binding-control>
@ -103,7 +103,7 @@ export class ZHADevicePage extends LitElement {
<zha-group-binding-control
.isWide="${this.isWide}"
.narrow="${this.narrow}"
.hass="${this.hass}"
.hass=${this.hass}
.selectedDevice="${this.device}"
.groups="${this._groups}"
></zha-group-binding-control>

View File

@ -106,7 +106,7 @@ export class HuiActionEditor extends LitElement {
${this.config && this.config.action === "call-service"
? html`
<ha-service-picker
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._service}"
.configValue="${"service"}"
@value-changed="${this._valueChanged}"

View File

@ -46,7 +46,7 @@ export class HuiEntityEditor extends LitElement {
return html`
<div class="entity">
<ha-entity-picker
.hass="${this.hass}"
.hass=${this.hass}
.value="${entityConf.entity}"
.index="${index}"
@change="${this._valueChanged}"
@ -70,7 +70,7 @@ export class HuiEntityEditor extends LitElement {
`;
})}
<ha-entity-picker
.hass="${this.hass}"
.hass=${this.hass}
@change="${this._addEntity}"
></ha-entity-picker>
</div>

View File

@ -32,7 +32,7 @@ class HuiGenericEntityRow extends LitElement {
@property() public config?: EntitiesCardEntityConfig;
@property() public showSecondary: boolean = true;
@property() public secondaryText?: string;
protected render(): TemplateResult {
if (!this.hass || !this.config) {
@ -59,6 +59,8 @@ class HuiGenericEntityRow extends LitElement {
(this.config.entity &&
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this.config.entity)));
const hasSecondary = this.secondaryText || this.config.secondary_info;
return html`
<state-badge
class=${classMap({
@ -76,59 +78,59 @@ class HuiGenericEntityRow extends LitElement {
})}
tabindex=${ifDefined(pointer ? "0" : undefined)}
></state-badge>
<div class="flex">
<div
class=${classMap({
info: true,
pointer,
padName: this.showSecondary && !this.config.secondary_info,
padSecondary: Boolean(
!this.showSecondary || this.config.secondary_info
),
})}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this.config!.hold_action),
hasDoubleClick: hasAction(this.config!.double_tap_action),
})}
>
${this.config.name || computeStateName(stateObj)}
<div class="secondary">
${!this.showSecondary
? html`
<slot name="secondary"></slot>
`
: this.config.secondary_info === "entity-id"
? stateObj.entity_id
: this.config.secondary_info === "last-changed"
? html`
<ha-relative-time
.hass=${this.hass}
.datetime=${stateObj.last_changed}
></ha-relative-time>
`
: this.config.secondary_info === "last-triggered"
? stateObj.attributes.last_triggered
? html`
<ha-relative-time
.hass=${this.hass}
.datetime=${stateObj.attributes.last_triggered}
></ha-relative-time>
`
: this.hass.localize(
"ui.panel.lovelace.cards.entities.never_triggered"
)
: ""}
</div>
</div>
<slot></slot>
<div
class="info ${classMap({
pointer,
"text-content": !hasSecondary,
})}"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this.config!.hold_action),
hasDoubleClick: hasAction(this.config!.double_tap_action),
})}
>
${this.config.name || computeStateName(stateObj)}
${hasSecondary
? html`
<div class="secondary">
${this.secondaryText ||
this.config.secondary_info === "entity-id"
? stateObj.entity_id
: this.config.secondary_info === "last-changed"
? html`
<ha-relative-time
.hass=${this.hass}
.datetime=${stateObj.last_changed}
></ha-relative-time>
`
: this.config.secondary_info === "last-triggered"
? stateObj.attributes.last_triggered
? html`
<ha-relative-time
.hass=${this.hass}
.datetime=${stateObj.attributes.last_triggered}
></ha-relative-time>
`
: this.hass.localize(
"ui.panel.lovelace.cards.entities.never_triggered"
)
: ""}
}
</div>
`
: ""}
</div>
<slot></slot>
`;
}
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
toggleAttribute(
this,
"no-secondary",
!this.secondaryText && !this.config?.secondary_info
);
if (changedProps.has("hass")) {
toggleAttribute(this, "rtl", computeRTL(this.hass!));
}
@ -143,16 +145,10 @@ class HuiGenericEntityRow extends LitElement {
:host {
display: flex;
align-items: center;
}
.flex {
flex: 1;
margin-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
min-width: 0;
flex-direction: row;
}
.info {
margin-left: 16px;
flex: 1 0 60px;
}
.info,
@ -161,6 +157,11 @@ class HuiGenericEntityRow extends LitElement {
overflow: hidden;
text-overflow: ellipsis;
}
:host([no-secondary]) .text-content,
:host([no-secondary]) ::slotted(.text-content) {
position: relative;
top: 2px;
}
.flex ::slotted(*) {
margin-left: 8px;
min-width: 0;
@ -192,12 +193,6 @@ class HuiGenericEntityRow extends LitElement {
.pointer {
cursor: pointer;
}
.padName {
padding: 12px 0px;
}
.padSecondary {
padding: 4px 0px;
}
`;
}
}

View File

@ -133,7 +133,7 @@ export class HuiImage extends LitElement {
${this.cameraImage && this.cameraView === "live"
? html`
<ha-camera-stream
.hass="${this.hass}"
.hass=${this.hass}
.stateObj="${cameraObj}"
></ha-camera-stream>
`

View File

@ -99,7 +99,7 @@ export class HuiDialogEditCard extends LitElement {
${this._cardConfig === undefined
? html`
<hui-card-picker
.hass="${this.hass}"
.hass=${this.hass}
@config-changed="${this._handleCardPicked}"
></hui-card-picker>
`
@ -107,14 +107,14 @@ export class HuiDialogEditCard extends LitElement {
<div class="content">
<div class="element-editor">
<hui-card-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._cardConfig}"
@config-changed="${this._handleConfigChanged}"
></hui-card-editor>
</div>
<div class="element-preview">
<hui-card-preview
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._cardConfig}"
class=${this._error ? "blur" : ""}
></hui-card-preview>

View File

@ -78,7 +78,7 @@ export class HuiDialogSuggestCard extends LitElement {
${this._cardConfig.map(
(cardConfig) => html`
<hui-card-preview
.hass="${this.hass}"
.hass=${this.hass}
.config="${cardConfig}"
></hui-card-preview>
`

View File

@ -75,7 +75,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["alarm_control_panel"]'
@ -120,7 +120,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
</paper-listbox>
</paper-dropdown-menu>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -110,7 +110,7 @@ export class HuiButtonCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
@change="${this._valueChanged}"
@ -170,7 +170,7 @@ export class HuiButtonCardEditor extends LitElement
><div class="suffix" slot="suffix">px</div>
</paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"
@ -185,7 +185,7 @@ export class HuiButtonCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@ -197,7 +197,7 @@ export class HuiButtonCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"

View File

@ -85,7 +85,7 @@ export class HuiEntitiesCardEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"
@ -100,7 +100,7 @@ export class HuiEntitiesCardEditor extends LitElement
>
</div>
<hui-entity-editor
.hass="${this.hass}"
.hass=${this.hass}
.entities="${this._configEntities}"
@entities-changed="${this._valueChanged}"
></hui-entity-editor>

View File

@ -86,7 +86,7 @@ export class HuiGaugeCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["sensor"]'
@ -114,7 +114,7 @@ export class HuiGaugeCardEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -99,7 +99,7 @@ export class HuiGlanceCardEditor extends LitElement
></paper-input>
<div class="side-by-side">
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"
@ -144,7 +144,7 @@ export class HuiGlanceCardEditor extends LitElement
</div>
</div>
<hui-entity-editor
.hass="${this.hass}"
.hass=${this.hass}
.entities="${this._configEntities}"
@entities-changed="${this._valueChanged}"
></hui-entity-editor>

View File

@ -109,7 +109,7 @@ export class HuiHistoryGraphCardEditor extends LitElement
></paper-input>
</div>
<hui-entity-editor
.hass="${this.hass}"
.hass=${this.hass}
.entities="${this._configEntities}"
@entities-changed="${this._valueChanged}"
></hui-entity-editor>

View File

@ -70,7 +70,7 @@ export class HuiLightCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["light"]'
@ -103,7 +103,7 @@ export class HuiLightCardEditor extends LitElement
</div>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -121,7 +121,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
)}</ha-switch
>
<hui-entity-editor
.hass="${this.hass}"
.hass=${this.hass}
.entities="${this._configEntities}"
@entities-changed="${this._entitiesValueChanged}"
></hui-entity-editor>
@ -135,7 +135,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
inputLabel=${this.hass.localize(
"ui.panel.lovelace.editor.card.map.source"
)}
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._geo_location_sources}"
.configValue="${"geo_location_sources"}"
@value-changed="${this._valueChanged}"

View File

@ -81,7 +81,7 @@ export class HuiMarkdownCardEditor extends LitElement
spellcheck="false"
></paper-textarea>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -49,7 +49,7 @@ export class HuiMediaControlCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["media_player"]'

View File

@ -86,7 +86,7 @@ export class HuiPictureCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@ -98,14 +98,14 @@ export class HuiPictureCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@action-changed="${this._valueChanged}"
></hui-action-editor>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -116,7 +116,7 @@ export class HuiPictureEntityCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
@change="${this._valueChanged}"
@ -148,7 +148,7 @@ export class HuiPictureEntityCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._camera_image}"
.configValue=${"camera_image"}
@change="${this._valueChanged}"
@ -213,7 +213,7 @@ export class HuiPictureEntityCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@ -225,14 +225,14 @@ export class HuiPictureEntityCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@action-changed="${this._valueChanged}"
></hui-action-editor>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -147,7 +147,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._camera_image}"
.configValue=${"camera_image"}
@change="${this._valueChanged}"
@ -193,7 +193,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
@change="${this._valueChanged}"
@ -206,7 +206,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@ -218,7 +218,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@ -226,12 +226,12 @@ export class HuiPictureGlanceCardEditor extends LitElement
></hui-action-editor>
</div>
<hui-entity-editor
.hass="${this.hass}"
.hass=${this.hass}
.entities="${this._configEntities}"
@entities-changed="${this._valueChanged}"
></hui-entity-editor>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -64,7 +64,7 @@ export class HuiPlantStatusCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["plant"]'
@ -82,7 +82,7 @@ export class HuiPlantStatusCardEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -93,7 +93,7 @@ export class HuiSensorCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["sensor"]'
@ -167,7 +167,7 @@ export class HuiSensorCardEditor extends LitElement
</div>
<div class="side-by-side">
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -72,7 +72,7 @@ export class HuiShoppingListEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -101,7 +101,7 @@ export class HuiStackCardEditor extends LitElement
`
: html`
<hui-card-picker
.hass="${this.hass}"
.hass=${this.hass}
@config-changed="${this._handleCardPicked}"
></hui-card-picker>
`

View File

@ -63,7 +63,7 @@ export class HuiThermostatCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["climate"]'
@ -81,7 +81,7 @@ export class HuiThermostatCardEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -62,7 +62,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._entity}"
.configValue=${"entity"}
include-domains='["weather"]'
@ -80,7 +80,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"

View File

@ -65,7 +65,7 @@ export class HuiDialogEditLovelace extends LitElement {
"ui.panel.lovelace.editor.edit_lovelace.explanation"
)}
<hui-lovelace-editor
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._config}"
@lovelace-config-changed="${this._ConfigChanged}"
></hui-lovelace-editor

View File

@ -40,7 +40,7 @@ export class HuiDialogEditView extends LitElement {
}
return html`
<hui-edit-view
.hass="${this.hass}"
.hass=${this.hass}
.lovelace="${this._params.lovelace}"
.viewIndex="${this._params.viewIndex}"
>

View File

@ -110,7 +110,7 @@ export class HuiEditView extends LitElement {
content = html`
<hui-view-editor
.isNew=${this.viewIndex === undefined}
.hass="${this.hass}"
.hass=${this.hass}
.config="${this._config}"
@view-config-changed="${this._viewConfigChanged}"
></hui-view-editor>
@ -119,7 +119,7 @@ export class HuiEditView extends LitElement {
case "tab-badges":
content = html`
<hui-entity-editor
.hass="${this.hass}"
.hass=${this.hass}
.entities="${this._badges}"
@entities-changed="${this._badgesChanged}"
></hui-entity-editor>

View File

@ -43,7 +43,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
return html`
<hui-image
.hass="${this.hass}"
.hass=${this.hass}
.entity="${this._config.entity}"
.image="${this._config.image}"
.stateImage="${this._config.state_image}"

View File

@ -52,7 +52,7 @@ export class HuiServiceButtonElement extends LitElement
return html`
<ha-call-service-button
.hass="${this.hass}"
.hass=${this.hass}
.domain="${this._domain}"
.service="${this._service}"
.serviceData="${this._config.service_data}"

View File

@ -59,7 +59,7 @@ export class HuiStateBadgeElement extends LitElement
return html`
<ha-state-label-badge
.hass="${this.hass}"
.hass=${this.hass}
.state="${stateObj}"
.title="${this._config.title === undefined
? computeStateName(stateObj)

View File

@ -60,7 +60,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
return html`
<state-badge
.stateObj="${stateObj}"
.stateObj=${stateObj}
.title="${computeTooltip(this.hass, this._config)}"
@action=${this._handleAction}
.actionHandler=${actionHandler({

View File

@ -55,10 +55,10 @@ class HuiClimateEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<ha-climate-state
.hass="${this.hass}"
.stateObj="${stateObj}"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-climate-state>
</hui-generic-entity-row>
`;

View File

@ -56,18 +56,18 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${isTiltOnly(stateObj)
? html`
<ha-cover-tilt-controls
.hass="${this.hass}"
.stateObj="${stateObj}"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-cover-tilt-controls>
`
: html`
<ha-cover-controls
.hass="${this.hass}"
.stateObj="${stateObj}"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-cover-controls>
`}
</hui-generic-entity-row>

View File

@ -54,16 +54,16 @@ class HuiGroupEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${this._computeCanToggle(stateObj.attributes.entity_id)
? html`
<ha-entity-toggle
.hass="${this.hass}"
.stateObj="${stateObj}"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-entity-toggle>
`
: html`
<div>
<div class="text-content">
${computeStateDisplay(
this.hass!.localize,
stateObj,

View File

@ -56,7 +56,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${stateObj.attributes.has_date
? html`
<ha-date-input

View File

@ -74,43 +74,41 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div>
${stateObj.attributes.mode === "slider"
? html`
<div class="flex">
<ha-slider
.dir="${computeRTLDirection(this.hass!)}"
.step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}"
.max="${Number(stateObj.attributes.max)}"
.value="${Number(stateObj.state)}"
pin
@change="${this._selectedValueChanged}"
ignore-bar-touch
id="input"
></ha-slider>
<span class="state">
${Number(stateObj.state)}
${stateObj.attributes.unit_of_measurement}
</span>
</div>
`
: html`
<paper-input
no-label-float
auto-validate
.pattern="[0-9]+([\\.][0-9]+)?"
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${stateObj.attributes.mode === "slider"
? html`
<div class="flex">
<ha-slider
.dir="${computeRTLDirection(this.hass!)}"
.step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}"
.max="${Number(stateObj.attributes.max)}"
.value="${Number(stateObj.state)}"
type="number"
pin
@change="${this._selectedValueChanged}"
ignore-bar-touch
id="input"
></paper-input>
`}
</div>
></ha-slider>
<span class="state">
${Number(stateObj.state)}
${stateObj.attributes.unit_of_measurement}
</span>
</div>
`
: html`
<paper-input
no-label-float
auto-validate
.pattern="[0-9]+([\\.][0-9]+)?"
.step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}"
.max="${Number(stateObj.attributes.max)}"
.value="${Number(stateObj.state)}"
type="number"
@change="${this._selectedValueChanged}"
id="input"
></paper-input>
`}
</hui-generic-entity-row>
`;
}

View File

@ -53,7 +53,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<paper-input
no-label-float
.value="${stateObj.state}"

View File

@ -53,8 +53,8 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<mwc-button @click="${this._callService}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button @click="${this._callService}" class="text-content">
${stateObj.state === "locked"
? this.hass!.localize("ui.card.lock.unlock")
: this.hass!.localize("ui.card.lock.lock")}

View File

@ -64,13 +64,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row
.hass="${this.hass}"
.config="${this._config}"
.showSecondary=${false}
.hass=${this.hass}
.config=${this._config}
.secondaryText=${this._computeMediaTitle(stateObj)}
>
${OFF_STATES.includes(stateObj.state)
? html`
<div>
<div class="text-content">
${this.hass!.localize(`state.media_player.${stateObj.state}`) ||
this.hass!.localize(`state.default.${stateObj.state}`) ||
stateObj.state}
@ -96,7 +96,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
`
: ""}
</div>
<div slot="secondary">${this._computeMediaTitle(stateObj)}</div>
`}
</hui-generic-entity-row>
`;

View File

@ -55,20 +55,11 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
${stateObj.attributes.can_cancel
? html`
<ha-entity-toggle
.hass="${this.hass}"
.stateObj="${stateObj}"
></ha-entity-toggle>
`
: html`
<mwc-button @click="${this._callService}">
${this._config.action_name ||
this.hass!.localize("ui.card.scene.activate")}
</mwc-button>
`}
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button @click="${this._callService}" class="text-content">
${this._config.action_name ||
this.hass!.localize("ui.card.scene.activate")}
</mwc-button>
</hui-generic-entity-row>
`;
}

View File

@ -54,16 +54,16 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${stateObj.attributes.can_cancel
? html`
<ha-entity-toggle
.hass="${this.hass}"
.stateObj="${stateObj}"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-entity-toggle>
`
: html`
<mwc-button @click="${this._callService}">
<mwc-button @click=${this._callService} class="text-content">
${this._config.action_name ||
this.hass!.localize("ui.card.script.execute")}
</mwc-button>

View File

@ -17,6 +17,7 @@ import { HomeAssistant } from "../../../types";
import { LovelaceRow, EntityConfig } from "./types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
interface SensorEntityConfig extends EntityConfig {
format?: "relative" | "date" | "time" | "datetime";
@ -59,16 +60,17 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div>
${stateObj.attributes.device_class === "timestamp" &&
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<div class="text-content">
${stateObj.attributes.device_class ===
SENSOR_DEVICE_CLASS_TIMESTAMP &&
stateObj.state !== "unavailable" &&
stateObj.state !== "unknown"
? html`
<hui-timestamp-display
.hass="${this.hass}"
.ts="${new Date(stateObj.state)}"
.format="${this._config.format}"
.hass=${this.hass}
.ts=${new Date(stateObj.state)}
.format=${this._config.format}
></hui-timestamp-display>
`
: computeStateDisplay(

View File

@ -54,8 +54,8 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div>
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<div class="text-content">
${computeStateDisplay(
this.hass!.localize,
stateObj,

View File

@ -70,8 +70,8 @@ class HuiTimerEntityRow extends LitElement {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<div>${this._computeDisplay(stateObj)}</div>
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<div class="text-content">${this._computeDisplay(stateObj)}</div>
</hui-generic-entity-row>
`;
}

View File

@ -53,16 +53,16 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${stateObj.state === "on" || stateObj.state === "off"
? html`
<ha-entity-toggle
.hass="${this.hass}"
.stateObj="${stateObj}"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-entity-toggle>
`
: html`
<div>
<div class="text-content">
${computeStateDisplay(
this.hass!.localize,
stateObj,

View File

@ -125,7 +125,7 @@ class LovelacePanel extends LitElement {
if (state === "yaml-editor") {
return html`
<hui-editor
.hass="${this.hass}"
.hass=${this.hass}
.lovelace="${this.lovelace}"
.closeEditor="${this._closeEditor}"
></hui-editor>

View File

@ -92,7 +92,7 @@ class LovelaceFullConfigEditor extends LitElement {
mode="yaml"
autofocus
.rtl=${computeRTL(this.hass)}
.hass="${this.hass}"
.hass=${this.hass}
@value-changed="${this._yamlChanged}"
@editor-save="${this._handleSave}"
>