diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts index b717bdee7d..3135775a2c 100644 --- a/src/components/trace/ha-timeline.ts +++ b/src/components/trace/ha-timeline.ts @@ -13,6 +13,8 @@ import "../ha-svg-icon"; @customElement("ha-timeline") class HaTimeline extends LitElement { + @property({ type: Boolean, reflect: true }) public label = false; + @property({ type: Boolean }) public lastItem = false; @property({ type: String }) public icon?: string; @@ -24,7 +26,11 @@ class HaTimeline extends LitElement { protected render() { return html`
- + ${this.label + ? "" + : html` + + `} ${this.lastItem ? "" : html`
`}
@@ -63,11 +69,17 @@ class HaTimeline extends LitElement { :host(:not([lastItem])) { min-height: 50px; } + :host([label]) { + margin-top: -8px; + font-style: italic; + color: var(--timeline-label-color, var(--secondary-text-color)); + } .timeline-start { display: flex; flex-direction: column; align-items: center; - margin-right: 4px; + margin-right: 8px; + width: 24px; } ha-svg-icon { color: var( @@ -90,6 +102,10 @@ class HaTimeline extends LitElement { :host(:not([lastItem])) .content { padding-bottom: 16px; } + :host([label]) .content { + margin-top: 0; + padding-top: 6px; + } `, buttonLinkStyle, ]; diff --git a/src/components/trace/hat-trace.ts b/src/components/trace/hat-trace.ts index 6ae3287109..7be7d67594 100644 --- a/src/components/trace/hat-trace.ts +++ b/src/components/trace/hat-trace.ts @@ -19,7 +19,6 @@ import { mdiCheckCircleOutline, mdiCircle, mdiCircleOutline, - mdiClockOutline, mdiPauseCircleOutline, mdiRecordCircleOutline, mdiStopCircleOutline, @@ -93,7 +92,7 @@ export class HaAutomationTracer extends LitElement { } entries.push(html` - + ${relativeTime(lastReportedTime, this.hass.localize, { compareTime: nextItemTimestamp, includeTense: false,