mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
Fix state-info icon color and convert to TypeScript/LitElement (#7664)
This commit is contained in:
Ian Richardson
GitHub
parent
88a525f1a7
commit
f68eff6bb3
@ -1,152 +0,0 @@
|
|||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
||||||
import "@polymer/paper-tooltip/paper-tooltip";
|
|
||||||
/* eslint-plugin-disable lit */
|
|
||||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
||||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
|
||||||
import { computeRTL } from "../../common/util/compute_rtl";
|
|
||||||
import "../ha-relative-time";
|
|
||||||
import "./state-badge";
|
|
||||||
|
|
||||||
class StateInfo extends LocalizeMixin(PolymerElement) {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
${this.styleTemplate} ${this.stateBadgeTemplate} ${this.infoTemplate}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styleTemplate() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply --paper-font-body1;
|
|
||||||
min-width: 120px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
state-badge {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([rtl]) state-badge {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
margin-left: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([rtl]) .info {
|
|
||||||
margin-right: 56px;
|
|
||||||
margin-left: 0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
@apply --paper-font-common-nowrap;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name[in-dialog],
|
|
||||||
:host([secondary-line]) .name {
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-ago,
|
|
||||||
.extra-info,
|
|
||||||
.extra-info > * {
|
|
||||||
@apply --paper-font-common-nowrap;
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: no-wrap;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0 2px 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row:last-child {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get stateBadgeTemplate() {
|
|
||||||
return html` <state-badge state-obj="[[stateObj]]"></state-badge> `;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get infoTemplate() {
|
|
||||||
return html`
|
|
||||||
<div class="info">
|
|
||||||
<div class="name" in-dialog$="[[inDialog]]">
|
|
||||||
[[computeStateName(stateObj)]]
|
|
||||||
</div>
|
|
||||||
<template is="dom-if" if="[[inDialog]]">
|
|
||||||
<div class="time-ago">
|
|
||||||
<ha-relative-time
|
|
||||||
id="last_changed"
|
|
||||||
hass="[[hass]]"
|
|
||||||
datetime="[[stateObj.last_changed]]"
|
|
||||||
></ha-relative-time>
|
|
||||||
<paper-tooltip animation-delay="0" for="last_changed">
|
|
||||||
<div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="column-name">
|
|
||||||
[[localize('ui.dialogs.more_info_control.last_changed')]]:
|
|
||||||
</span>
|
|
||||||
<ha-relative-time
|
|
||||||
hass="[[hass]]"
|
|
||||||
datetime="[[stateObj.last_changed]]"
|
|
||||||
></ha-relative-time>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span>
|
|
||||||
[[localize('ui.dialogs.more_info_control.last_updated')]]:
|
|
||||||
</span>
|
|
||||||
<ha-relative-time
|
|
||||||
hass="[[hass]]"
|
|
||||||
datetime="[[stateObj.last_updated]]"
|
|
||||||
></ha-relative-time>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</paper-tooltip>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template is="dom-if" if="[[!inDialog]]">
|
|
||||||
<div class="extra-info"><slot> </slot></div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
stateObj: Object,
|
|
||||||
inDialog: {
|
|
||||||
type: Boolean,
|
|
||||||
value: () => false,
|
|
||||||
},
|
|
||||||
rtl: {
|
|
||||||
type: Boolean,
|
|
||||||
reflectToAttribute: true,
|
|
||||||
computed: "computeRTL(hass)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
computeStateName(stateObj) {
|
|
||||||
return computeStateName(stateObj);
|
|
||||||
}
|
|
||||||
|
|
||||||
computeRTL(hass) {
|
|
||||||
return computeRTL(hass);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("state-info", StateInfo);
|
|
||||||
158
src/components/entity/state-info.ts
Normal file
158
src/components/entity/state-info.ts
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
import "@polymer/paper-tooltip/paper-tooltip";
|
||||||
|
import {
|
||||||
|
css,
|
||||||
|
CSSResult,
|
||||||
|
customElement,
|
||||||
|
html,
|
||||||
|
LitElement,
|
||||||
|
property,
|
||||||
|
TemplateResult,
|
||||||
|
} from "lit-element";
|
||||||
|
import type { HassEntity } from "home-assistant-js-websocket";
|
||||||
|
|
||||||
|
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||||
|
import { computeRTL } from "../../common/util/compute_rtl";
|
||||||
|
import type { HomeAssistant } from "../../types";
|
||||||
|
|
||||||
|
import "../ha-relative-time";
|
||||||
|
import "./state-badge";
|
||||||
|
|
||||||
|
@customElement("state-info")
|
||||||
|
class StateInfo extends LitElement {
|
||||||
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
|
@property({ attribute: false }) public stateObj?: HassEntity;
|
||||||
|
|
||||||
|
@property({ type: Boolean }) public inDialog = false;
|
||||||
|
|
||||||
|
// property used only in css
|
||||||
|
@property({ type: Boolean, reflect: true }) public rtl = false;
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
if (!this.hass || !this.stateObj) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`<state-badge
|
||||||
|
.stateObj=${this.stateObj}
|
||||||
|
.stateColor=${true}
|
||||||
|
></state-badge>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name" .inDialog=${this.inDialog}>
|
||||||
|
${computeStateName(this.stateObj)}
|
||||||
|
</div>
|
||||||
|
${this.inDialog
|
||||||
|
? html`<div class="time-ago">
|
||||||
|
<ha-relative-time
|
||||||
|
id="last_changed"
|
||||||
|
.hass=${this.hass}
|
||||||
|
.datetime=${this.stateObj.last_changed}
|
||||||
|
></ha-relative-time>
|
||||||
|
<paper-tooltip animation-delay="0" for="last_changed">
|
||||||
|
<div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="column-name">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.dialogs.more_info_control.last_changed"
|
||||||
|
)}:
|
||||||
|
</span>
|
||||||
|
<ha-relative-time
|
||||||
|
.hass=${this.hass}
|
||||||
|
.datetime=${this.stateObj.last_changed}
|
||||||
|
></ha-relative-time>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.dialogs.more_info_control.last_updated"
|
||||||
|
)}:
|
||||||
|
</span>
|
||||||
|
<ha-relative-time
|
||||||
|
.hass=${this.hass}
|
||||||
|
.datetime=${this.stateObj.last_updated}
|
||||||
|
></ha-relative-time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</paper-tooltip>
|
||||||
|
</div>`
|
||||||
|
: html`<div class="extra-info"><slot> </slot></div>`}
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected updated(changedProps) {
|
||||||
|
super.updated(changedProps);
|
||||||
|
if (!changedProps.has("hass")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
|
||||||
|
if (!oldHass || oldHass.language !== this.hass.language) {
|
||||||
|
this.rtl = computeRTL(this.hass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResult {
|
||||||
|
return css`
|
||||||
|
:host {
|
||||||
|
@apply --paper-font-body1;
|
||||||
|
min-width: 120px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
state-badge {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([rtl]) state-badge {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-left: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([rtl]) .info {
|
||||||
|
margin-right: 56px;
|
||||||
|
margin-left: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
@apply --paper-font-common-nowrap;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name[in-dialog],
|
||||||
|
:host([secondary-line]) .name {
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-ago,
|
||||||
|
.extra-info,
|
||||||
|
.extra-info > * {
|
||||||
|
@apply --paper-font-common-nowrap;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: no-wrap;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 2px 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row:last-child {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"state-info": StateInfo;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user