jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 11:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce reset-zoom button size on timeline charts (#25796)

Browse Source
This commit is contained in:
Petar Petrov 2025-06-17 16:07:57 +03:00 committed by Bram Kragten
parent de42714505
commit 77c458a0e5
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/chart/ha-chart-base.ts
View File

@ -49,6 +49,9 @@ export class HaChartBase extends LitElement {
@property({ attribute: "expand-legend", type: Boolean }) @property({ attribute: "expand-legend", type: Boolean })
public expandLegend?: boolean; public expandLegend?: boolean;
@property({ attribute: "small-controls", type: Boolean })
public smallControls?: boolean;
// extraComponents is not reactive and should not trigger updates // extraComponents is not reactive and should not trigger updates
public extraComponents?: any[]; public extraComponents?: any[];
@ -194,7 +197,7 @@ export class HaChartBase extends LitElement {
<div class="chart"></div> <div class="chart"></div>
</div> </div>
${this._renderLegend()} ${this._renderLegend()}
<div class="chart-controls"> <div class="chart-controls ${classMap({ small: this.smallControls })}">
${this._isZoomed ${this._isZoomed
? html`<ha-icon-button ? html`<ha-icon-button
class="zoom-reset" class="zoom-reset"
@ -784,6 +787,10 @@ export class HaChartBase extends LitElement {
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
.chart-controls.small {
top: 0;
flex-direction: row;
}
.chart-controls ha-icon-button, .chart-controls ha-icon-button,
.chart-controls ::slotted(ha-icon-button) { .chart-controls ::slotted(ha-icon-button) {
background: var(--card-background-color); background: var(--card-background-color);
@ -792,6 +799,11 @@ export class HaChartBase extends LitElement {
color: var(--primary-color); color: var(--primary-color);
border: 1px solid var(--divider-color); border: 1px solid var(--divider-color);
} }
.chart-controls.small ha-icon-button,
.chart-controls.small ::slotted(ha-icon-button) {
--mdc-icon-button-size: 22px;
--mdc-icon-size: 16px;
}
.chart-controls ha-icon-button.inactive, .chart-controls ha-icon-button.inactive,
.chart-controls ::slotted(ha-icon-button.inactive) { .chart-controls ::slotted(ha-icon-button.inactive) {
color: var(--state-inactive-color); color: var(--state-inactive-color);

1
src/components/chart/state-history-chart-timeline.ts
View File

@ -66,6 +66,7 @@ export class StateHistoryChartTimeline extends LitElement {
.options=${this._chartOptions} .options=${this._chartOptions}
.height=${`${this.data.length * 30 + 30}px`} .height=${`${this.data.length * 30 + 30}px`}
.data=${this._chartData as ECOption["series"]} .data=${this._chartData as ECOption["series"]}
small-controls
@chart-click=${this._handleChartClick} @chart-click=${this._handleChartClick}
></ha-chart-base> ></ha-chart-base>
`; `;