jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 15:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix resize observers and update gauge styling (#5949)

Browse Source
This commit is contained in:
Bram Kragten 2020-05-20 21:27:08 +02:00 committed by GitHub
parent 28e0384b55
commit 3a453f5843
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -238,9 +238,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
private async _attachObserver(): Promise<void> {
await installResizeObserver();
this._resizeObserver = new ResizeObserver(
debounce(() => this._measureCard(), 250, false)
);
this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
const card = this.shadowRoot!.querySelector("ha-card");
// If we show an error or warning there is no ha-card
@ -250,6 +248,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
this._resizeObserver.observe(card);
}
private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
private _measureCard() {
if (!this.isConnected) {
return;
@ -277,7 +277,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
cursor: pointer;
height: 100%;
overflow: hidden;
padding: 16px 16px 0 16px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
@ -293,37 +293,39 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
round-slider {
max-width: 200px;
--round-slider-path-width: 35px;
--round-slider-path-color: var(--disabled-text-color);
--round-slider-path-color: var(--primary-background-color);
--round-slider-linecap: "butt";
}
.gauge-data {
line-height: 1;
text-align: center;
position: relative;
line-height: initial;
color: var(--primary-text-color);
margin-top: -28px;
margin-bottom: 14px;
margin-top: -26px;
width: 100%;
}
.gauge-data .percent {
white-space: nowrap;
font-size: 28px;
}
.gauge-data .name {
padding-top: 6px;
font-size: 14px;
font-size: 15px;
}
/* ============= NARROW ============= */
:host([narrow]) ha-card {
padding: 8px;
}
:host([narrow]) round-slider {
--round-slider-path-width: 22px;
}
:host([narrow]) .gauge-data {
margin-top: -24px;
margin-bottom: 12px;
margin-top: -22px;
}
:host([narrow]) .gauge-data .percent {
@ -331,30 +333,29 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
}
:host([narrow]) .gauge-data .name {
font-size: 12px;
font-size: 14px;
}
/* ============= VERY NARROW ============= */
:host([narrow]) ha-card {
padding: 4px;
}
:host([veryNarrow]) round-slider {
--round-slider-path-width: 15px;
}
:host([veryNarrow]) ha-card {
padding-bottom: 16px;
}
:host([veryNarrow]) .gauge-data {
margin-top: 0;
margin-bottom: 0;
margin-top: -16px;
}
:host([veryNarrow]) .gauge-data .percent {
font-size: 20px;
font-size: 16px;
}
:host([veryNarrow]) .gauge-data .name {
font-size: 10px;
font-size: 12px;
}
`;
}

6
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -618,6 +618,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
);
}
private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
private _measureCard() {
const card = this.shadowRoot!.querySelector("ha-card");
if (!card) {
@ -630,9 +632,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
private async _attachObserver(): Promise<void> {
await installResizeObserver();
this._resizeObserver = new ResizeObserver(
debounce(() => this._measureCard(), 250, false)
);
this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
const card = this.shadowRoot!.querySelector("ha-card");
// If we show an error or warning there is no ha-card

6
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -290,9 +290,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
private async _attachObserver(): Promise<void> {
await installResizeObserver();
this._resizeObserver = new ResizeObserver(
debounce(() => this._measureCard(), 250, false)
);
this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
const card = this.shadowRoot!.querySelector("ha-card");
// If we show an error or warning there is no ha-card
@ -302,6 +300,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
this._resizeObserver.observe(card);
}
private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
private _measureCard() {
if (!this.isConnected) {
return;

6
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
View File

@ -53,7 +53,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
this._veryNarrow = (this.clientWidth || 0) < 225;
},
250,
false
true
);
public setConfig(config: EntityConfig): void {
@ -216,9 +216,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
private _attachObserver(): void {
installResizeObserver().then(() => {
this._resizeObserver = new ResizeObserver(() =>
this._debouncedResizeListener()
);
this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
this._resizeObserver.observe(this);
});