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