Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-18 07:56:44 +01:00
Code Activity

Make energy config page consistent (#29452)

Browse Source 
* Make energy config page consistent

* Update src/translations/en.json

Co-authored-by: Norbert Rittel <norbert@rittel.de>

* small tweaks

---------

Co-authored-by: Norbert Rittel <norbert@rittel.de>
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Matthias de Baat
2026-02-16 11:52:24 +01:00
committed by GitHub
parent 2229d42429
commit d844c5b894
10 changed files with 401 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/panels/config/energy/components/ha-energy-battery-settings.ts
View File

@@ -57,7 +57,7 @@ export class EnergyBatterySettings extends LitElement {
}); });
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon> <ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
${this.hass.localize("ui.panel.config.energy.battery.title")} ${this.hass.localize("ui.panel.config.energy.battery.title")}
@@ -83,56 +83,58 @@ export class EnergyBatterySettings extends LitElement {
></ha-energy-validation-result> ></ha-energy-validation-result>
` `
)} )}
${batterySources.length > 0
<h3> ? html`
${this.hass.localize( <div class="items-container">
"ui.panel.config.energy.battery.battery_systems" ${batterySources.map((source) => {
)} const toEntityState =
</h3> this.hass.states[source.stat_energy_to];
${batterySources.map((source) => { return html`
const toEntityState = this.hass.states[source.stat_energy_to]; <div class="row" .source=${source}>
return html` ${toEntityState?.attributes.icon
<div class="row" .source=${source}> ? html`<ha-icon
${toEntityState?.attributes.icon .icon=${toEntityState.attributes.icon}
? html`<ha-icon ></ha-icon>`
.icon=${toEntityState.attributes.icon} : html`<ha-svg-icon
></ha-icon>` .path=${mdiBatteryHigh}
: html`<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>`} ></ha-svg-icon>`}
<div class="content"> <div class="content">
<span class="label" <span class="label"
>${getStatisticLabel( >${getStatisticLabel(
this.hass, this.hass,
source.stat_energy_from, source.stat_energy_from,
this.statsMetadata?.[source.stat_energy_from] this.statsMetadata?.[source.stat_energy_from]
)}</span )}</span
> >
<span class="label" <span class="label"
>${getStatisticLabel( >${getStatisticLabel(
this.hass, this.hass,
source.stat_energy_to, source.stat_energy_to,
this.statsMetadata?.[source.stat_energy_to] this.statsMetadata?.[source.stat_energy_to]
)}</span )}</span
> >
</div>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.energy.battery.edit_battery_system"
)}
@click=${this._editSource}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.energy.battery.delete_battery_system"
)}
@click=${this._deleteSource}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
})}
</div> </div>
<ha-icon-button `
.label=${this.hass.localize( : ""}
"ui.panel.config.energy.battery.edit_battery_system" <div class="row">
)}
@click=${this._editSource}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.energy.battery.delete_battery_system"
)}
@click=${this._deleteSource}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
<ha-button <ha-button
@click=${this._addSource} @click=${this._addSource}
appearance="filled" appearance="filled"

87
src/panels/config/energy/components/ha-energy-device-settings-water.ts
View File

@@ -49,7 +49,7 @@ export class EnergyDeviceSettingsWater extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiWater}></ha-svg-icon> <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
@@ -82,49 +82,52 @@ export class EnergyDeviceSettingsWater extends LitElement {
></ha-energy-validation-result> ></ha-energy-validation-result>
` `
)} )}
<h3> ${this.preferences.device_consumption_water.length > 0
${this.hass.localize( ? html`
"ui.panel.config.energy.device_consumption_water.devices" <div class="items-container">
)} <ha-sortable
</h3> handle-selector=".handle"
<ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}> @item-moved=${this._itemMoved}
<div class="devices"> >
${repeat( <div class="devices">
this.preferences.device_consumption_water, ${repeat(
(device) => device.stat_consumption, this.preferences.device_consumption_water,
(device) => html` (device) => device.stat_consumption,
<div class="row" .device=${device}> (device) => html`
<div class="handle"> <div class="row" .device=${device}>
<ha-svg-icon <div class="handle">
.path=${mdiDragHorizontalVariant} <ha-svg-icon
></ha-svg-icon> .path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div>
<span class="content"
>${device.name ||
getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`
)}
</div> </div>
<span class="content" </ha-sortable>
>${device.name || </div>
getStatisticLabel( `
this.hass, : ""}
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`
)}
</div>
</ha-sortable>
<div class="row"> <div class="row">
<ha-svg-icon .path=${mdiWater}></ha-svg-icon>
<ha-button <ha-button
@click=${this._addDevice} @click=${this._addDevice}
appearance="filled" appearance="filled"

87
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@@ -49,7 +49,7 @@ export class EnergyDeviceSettings extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon> <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
@@ -82,49 +82,52 @@ export class EnergyDeviceSettings extends LitElement {
></ha-energy-validation-result> ></ha-energy-validation-result>
` `
)} )}
<h3> ${this.preferences.device_consumption.length > 0
${this.hass.localize( ? html`
"ui.panel.config.energy.device_consumption.devices" <div class="items-container">
)} <ha-sortable
</h3> handle-selector=".handle"
<ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}> @item-moved=${this._itemMoved}
<div class="devices"> >
${repeat( <div class="devices">
this.preferences.device_consumption, ${repeat(
(device) => device.stat_consumption, this.preferences.device_consumption,
(device) => html` (device) => device.stat_consumption,
<div class="row" .device=${device}> (device) => html`
<div class="handle"> <div class="row" .device=${device}>
<ha-svg-icon <div class="handle">
.path=${mdiDragHorizontalVariant} <ha-svg-icon
></ha-svg-icon> .path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div>
<span class="content"
>${device.name ||
getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`
)}
</div> </div>
<span class="content" </ha-sortable>
>${device.name || </div>
getStatisticLabel( `
this.hass, : ""}
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`
)}
</div>
</ha-sortable>
<div class="row"> <div class="row">
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
<ha-button <ha-button
@click=${this._addDevice} @click=${this._addDevice}
appearance="filled" appearance="filled"

81
src/panels/config/energy/components/ha-energy-gas-settings.ts
View File

@@ -58,7 +58,7 @@ export class EnergyGasSettings extends LitElement {
}); });
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiFire}></ha-svg-icon> <ha-svg-icon .path=${mdiFire}></ha-svg-icon>
${this.hass.localize("ui.panel.config.energy.gas.title")} ${this.hass.localize("ui.panel.config.energy.gas.title")}
@@ -82,44 +82,47 @@ export class EnergyGasSettings extends LitElement {
></ha-energy-validation-result> ></ha-energy-validation-result>
` `
)} )}
<h3> ${gasSources.length > 0
${this.hass.localize("ui.panel.config.energy.gas.gas_consumption")} ? html`
</h3> <div class="items-container">
${gasSources.map((source) => { ${gasSources.map((source) => {
const entityState = this.hass.states[source.stat_energy_from]; const entityState =
return html` this.hass.states[source.stat_energy_from];
<div class="row" .source=${source}> return html`
${entityState?.attributes.icon <div class="row" .source=${source}>
? html`<ha-icon ${entityState?.attributes.icon
.icon=${entityState.attributes.icon} ? html`<ha-icon
></ha-icon>` .icon=${entityState.attributes.icon}
: html`<ha-svg-icon .path=${mdiFire}></ha-svg-icon>`} ></ha-icon>`
<span class="content" : html`<ha-svg-icon .path=${mdiFire}></ha-svg-icon>`}
>${getStatisticLabel( <span class="content"
this.hass, >${getStatisticLabel(
source.stat_energy_from, this.hass,
this.statsMetadata?.[source.stat_energy_from] source.stat_energy_from,
)}</span this.statsMetadata?.[source.stat_energy_from]
> )}</span
<ha-icon-button >
.label=${this.hass.localize( <ha-icon-button
"ui.panel.config.energy.gas.edit_gas_source" .label=${this.hass.localize(
)} "ui.panel.config.energy.gas.edit_gas_source"
@click=${this._editSource} )}
.path=${mdiPencil} @click=${this._editSource}
></ha-icon-button> .path=${mdiPencil}
<ha-icon-button ></ha-icon-button>
.label=${this.hass.localize( <ha-icon-button
"ui.panel.config.energy.gas.delete_gas_source" .label=${this.hass.localize(
)} "ui.panel.config.energy.gas.delete_gas_source"
@click=${this._deleteSource} )}
.path=${mdiDelete} @click=${this._deleteSource}
></ha-icon-button> .path=${mdiDelete}
</div> ></ha-icon-button>
`; </div>
})} `;
<div class="row border-bottom"> })}
<ha-svg-icon .path=${mdiFire}></ha-svg-icon> </div>
`
: ""}
<div class="row">
<ha-button <ha-button
@click=${this._addSource} @click=${this._addSource}
appearance="filled" appearance="filled"

175
src/panels/config/energy/components/ha-energy-grid-settings.ts
View File

@@ -69,7 +69,7 @@ export class EnergyGridSettings extends LitElement {
}); });
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon> <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
${this.hass.localize("ui.panel.config.energy.grid.title")} ${this.hass.localize("ui.panel.config.energy.grid.title")}
@@ -104,58 +104,63 @@ export class EnergyGridSettings extends LitElement {
"ui.panel.config.energy.grid.grid_connections" "ui.panel.config.energy.grid.grid_connections"
)} )}
</h3> </h3>
${gridSources.map((source, idx) => { ${gridSources.length > 0
// At least one of import/export/power must exist (enforced by validation) ? html`
const primaryStat = (source.stat_energy_from || <div class="items-container">
source.stat_energy_to || ${gridSources.map((source, idx) => {
source.stat_rate)!; // At least one of import/export/power must exist (enforced by validation)
const primaryEntityState = this.hass.states[primaryStat]; const primaryStat = (source.stat_energy_from ||
return html` source.stat_energy_to ||
<div class="row" .source=${source} .sourceIndex=${idx}> source.stat_rate)!;
${primaryEntityState?.attributes.icon const primaryEntityState = this.hass.states[primaryStat];
? html`<ha-icon return html`
.icon=${primaryEntityState.attributes.icon} <div class="row" .source=${source} .sourceIndex=${idx}>
></ha-icon>` ${primaryEntityState?.attributes.icon
: html`<ha-svg-icon ? html`<ha-icon
.path=${mdiTransmissionTower} .icon=${primaryEntityState.attributes.icon}
></ha-svg-icon>`} ></ha-icon>`
<div class="content"> : html`<ha-svg-icon
<span class="label" .path=${mdiTransmissionTower}
>${getStatisticLabel( ></ha-svg-icon>`}
this.hass, <div class="content">
primaryStat, <span class="label"
this.statsMetadata?.[primaryStat] >${getStatisticLabel(
)}</span this.hass,
> primaryStat,
${source.stat_energy_from && source.stat_energy_to this.statsMetadata?.[primaryStat]
? html`<span class="label secondary" )}</span
>${getStatisticLabel( >
this.hass, ${source.stat_energy_from && source.stat_energy_to
source.stat_energy_to, ? html`<span class="label secondary"
this.statsMetadata?.[source.stat_energy_to] >${getStatisticLabel(
)}</span this.hass,
>` source.stat_energy_to,
: nothing} this.statsMetadata?.[source.stat_energy_to]
)}</span
>`
: nothing}
</div>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.energy.grid.edit_connection"
)}
@click=${this._editSource}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.energy.grid.delete_connection"
)}
@click=${this._deleteSource}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
})}
</div> </div>
<ha-icon-button `
.label=${this.hass.localize( : nothing}
"ui.panel.config.energy.grid.edit_connection" <div class="row">
)}
@click=${this._editSource}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.energy.grid.delete_connection"
)}
@click=${this._deleteSource}
.path=${mdiDelete}
></ha-icon-button>
</div>
`;
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
<ha-button <ha-button
@click=${this._addSource} @click=${this._addSource}
appearance="filled" appearance="filled"
@@ -174,43 +179,37 @@ export class EnergyGridSettings extends LitElement {
)} )}
</h3> </h3>
${this._co2ConfigEntry ${this._co2ConfigEntry
? html`<div class="row" .entry=${this._co2ConfigEntry}> ? html`
<img <div class="items-container">
alt="" <div class="row" .entry=${this._co2ConfigEntry}>
crossorigin="anonymous" <img
referrerpolicy="no-referrer" alt=""
src=${brandsUrl({ crossorigin="anonymous"
domain: "co2signal", referrerpolicy="no-referrer"
type: "icon", src=${brandsUrl({
darkOptimized: this.hass.themes?.darkMode, domain: "co2signal",
})} type: "icon",
/> darkOptimized: this.hass.themes?.darkMode,
<span class="content">${this._co2ConfigEntry.title}</span> })}
<a />
href=${`/config/integrations/integration/${this._co2ConfigEntry?.domain}`} <span class="content">${this._co2ConfigEntry.title}</span>
> <a
<ha-icon-button .path=${mdiPencil}></ha-icon-button> href=${`/config/integrations/integration/${this._co2ConfigEntry?.domain}`}
</a> >
<ha-icon-button <ha-icon-button .path=${mdiPencil}></ha-icon-button>
.label=${this.hass.localize( </a>
"ui.panel.config.energy.grid.remove_co2_signal" <ha-icon-button
)} .label=${this.hass.localize(
@click=${this._removeCO2Sensor} "ui.panel.config.energy.grid.remove_co2_signal"
.path=${mdiDelete} )}
></ha-icon-button> @click=${this._removeCO2Sensor}
</div>` .path=${mdiDelete}
></ha-icon-button>
</div>
</div>
`
: html` : html`
<div class="row border-bottom"> <div class="row">
<img
alt=""
crossorigin="anonymous"
referrerpolicy="no-referrer"
src=${brandsUrl({
domain: "co2signal",
type: "icon",
darkOptimized: this.hass.themes?.darkMode,
})}
/>
<ha-button <ha-button
@click=${this._addCO2Sensor} @click=${this._addCO2Sensor}
appearance="filled" appearance="filled"

94
src/panels/config/energy/components/ha-energy-solar-settings.ts
View File

@@ -59,7 +59,7 @@ export class EnergySolarSettings extends LitElement {
}); });
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon> <ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
${this.hass.localize("ui.panel.config.energy.solar.title")} ${this.hass.localize("ui.panel.config.energy.solar.title")}
@@ -85,53 +85,55 @@ export class EnergySolarSettings extends LitElement {
></ha-energy-validation-result> ></ha-energy-validation-result>
` `
)} )}
${solarSources.length > 0
<h3> ? html`
${this.hass.localize( <div class="items-container">
"ui.panel.config.energy.solar.solar_production" ${solarSources.map((source) => {
)} const entityState =
</h3> this.hass.states[source.stat_energy_from];
${solarSources.map((source) => { return html`
const entityState = this.hass.states[source.stat_energy_from]; <div class="row" .source=${source}>
return html` ${entityState?.attributes.icon
<div class="row" .source=${source}> ? html`<ha-icon
${entityState?.attributes.icon .icon=${entityState.attributes.icon}
? html`<ha-icon ></ha-icon>`
.icon=${entityState.attributes.icon} : html`<ha-svg-icon
></ha-icon>` .path=${mdiSolarPower}
: html`<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>`} ></ha-svg-icon>`}
<span class="content" <span class="content"
>${getStatisticLabel( >${getStatisticLabel(
this.hass, this.hass,
source.stat_energy_from, source.stat_energy_from,
this.statsMetadata?.[source.stat_energy_from] this.statsMetadata?.[source.stat_energy_from]
)}</span )}</span
> >
${this.info ${this.info
? html` ? html`
<ha-icon-button <ha-icon-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.energy.solar.edit_solar_production" "ui.panel.config.energy.solar.edit_solar_production"
)} )}
@click=${this._editSource} @click=${this._editSource}
.path=${mdiPencil} .path=${mdiPencil}
></ha-icon-button> ></ha-icon-button>
` `
: ""} : ""}
<ha-icon-button <ha-icon-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.energy.solar.delete_solar_production" "ui.panel.config.energy.solar.delete_solar_production"
)} )}
@click=${this._deleteSource} @click=${this._deleteSource}
.path=${mdiDelete} .path=${mdiDelete}
></ha-icon-button> ></ha-icon-button>
</div> </div>
`; `;
})} })}
</div>
`
: ""}
${this.info ${this.info
? html` ? html`
<div class="row border-bottom"> <div class="row">
<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
<ha-button <ha-button
@click=${this._addSource} @click=${this._addSource}
appearance="filled" appearance="filled"

83
src/panels/config/energy/components/ha-energy-water-settings.ts
View File

@@ -55,7 +55,7 @@ export class EnergyWaterSettings extends LitElement {
}); });
return html` return html`
<ha-card outlined> <ha-card>
<h1 class="card-header"> <h1 class="card-header">
<ha-svg-icon .path=${mdiWater}></ha-svg-icon> <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
${this.hass.localize("ui.panel.config.energy.water.title")} ${this.hass.localize("ui.panel.config.energy.water.title")}
@@ -81,46 +81,47 @@ export class EnergyWaterSettings extends LitElement {
></ha-energy-validation-result> ></ha-energy-validation-result>
` `
)} )}
<h3> ${waterSources.length > 0
${this.hass.localize( ? html`
"ui.panel.config.energy.water.water_consumption" <div class="items-container">
)} ${waterSources.map((source) => {
</h3> const entityState =
${waterSources.map((source) => { this.hass.states[source.stat_energy_from];
const entityState = this.hass.states[source.stat_energy_from]; return html`
return html` <div class="row" .source=${source}>
<div class="row" .source=${source}> ${entityState?.attributes.icon
${entityState?.attributes.icon ? html`<ha-icon
? html`<ha-icon .icon=${entityState.attributes.icon}
.icon=${entityState.attributes.icon} ></ha-icon>`
></ha-icon>` : html`<ha-svg-icon .path=${mdiWater}></ha-svg-icon>`}
: html`<ha-svg-icon .path=${mdiWater}></ha-svg-icon>`} <span class="content"
<span class="content" >${getStatisticLabel(
>${getStatisticLabel( this.hass,
this.hass, source.stat_energy_from,
source.stat_energy_from, this.statsMetadata?.[source.stat_energy_from]
this.statsMetadata?.[source.stat_energy_from] )}</span
)}</span >
> <ha-icon-button
<ha-icon-button .label=${this.hass.localize(
.label=${this.hass.localize( "ui.panel.config.energy.water.edit_water_source"
"ui.panel.config.energy.water.edit_water_source" )}
)} @click=${this._editSource}
@click=${this._editSource} .path=${mdiPencil}
.path=${mdiPencil} ></ha-icon-button>
></ha-icon-button> <ha-icon-button
<ha-icon-button .label=${this.hass.localize(
.label=${this.hass.localize( "ui.panel.config.energy.water.delete_water_source"
"ui.panel.config.energy.water.delete_water_source" )}
)} @click=${this._deleteSource}
@click=${this._deleteSource} .path=${mdiDelete}
.path=${mdiDelete} ></ha-icon-button>
></ha-icon-button> </div>
</div> `;
`; })}
})} </div>
<div class="row border-bottom"> `
<ha-svg-icon .path=${mdiWater}></ha-svg-icon> : ""}
<div class="row">
<ha-button <ha-button
@click=${this._addSource} @click=${this._addSource}
appearance="filled" appearance="filled"

23
src/panels/config/energy/components/styles.ts
View File

@@ -1,9 +1,6 @@
import { css } from "lit"; import { css } from "lit";
export const energyCardStyles = css` export const energyCardStyles = css`
ha-card {
height: 100%;
}
.card-header ha-svg-icon { .card-header ha-svg-icon {
height: 32px; height: 32px;
width: 32px; width: 32px;
@@ -19,7 +16,6 @@ export const energyCardStyles = css`
.row { .row {
display: flex; display: flex;
align-items: center; align-items: center;
border-top: 1px solid var(--divider-color);
height: 48px; height: 48px;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -42,4 +38,23 @@ export const energyCardStyles = css`
ha-icon-button { ha-icon-button {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
p {
color: var(--secondary-text-color);
}
p a {
color: var(--primary-color);
}
hr {
border: none;
border-top: 1px solid var(--divider-color);
margin: 24px calc(var(--ha-space-4) * -1);
}
.items-container {
border: 1px solid var(--ha-color-border-neutral-quiet);
border-radius: var(--ha-border-radius-lg);
padding: var(--ha-space-2);
display: flex;
flex-direction: column;
gap: var(--ha-space-2);
}
`; `;

27
src/panels/config/energy/ha-config-energy.ts
View File

@@ -100,7 +100,7 @@ class HaConfigEnergy extends LitElement {
<ha-alert> <ha-alert>
${this.hass.localize("ui.panel.config.energy.new_device_info")} ${this.hass.localize("ui.panel.config.energy.new_device_info")}
</ha-alert> </ha-alert>
<div class="container"> <div class="content">
<ha-energy-grid-settings <ha-energy-grid-settings
.hass=${this.hass} .hass=${this.hass}
.preferences=${this._preferences!} .preferences=${this._preferences!}
@@ -235,15 +235,28 @@ class HaConfigEnergy extends LitElement {
return [ return [
haStyle, haStyle,
css` css`
.content {
padding: 0 var(--ha-space-5);
max-width: 1040px;
margin: 0 auto;
}
ha-alert { ha-alert {
display: block; display: block;
margin: 8px; margin: 12px auto;
max-width: 600px;
} }
.container {
display: grid; ha-energy-grid-settings,
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); ha-energy-solar-settings,
grid-gap: 8px 8px; ha-energy-battery-settings,
margin: 8px; ha-energy-gas-settings,
ha-energy-water-settings,
ha-energy-device-settings,
ha-energy-device-settings-water {
display: block;
max-width: 600px;
margin: 0 auto 12px;
} }
`, `,
]; ];

2
src/translations/en.json
View File

@@ -3952,7 +3952,7 @@
} }
}, },
"device_consumption": { "device_consumption": {
"title": "Individual devices", "title": "Individual electrical devices",
"sub": "Tracking the energy usage of individual devices allows Home Assistant to break down your energy usage by device.", "sub": "Tracking the energy usage of individual devices allows Home Assistant to break down your energy usage by device.",
"learn_more": "More information on how to get started.", "learn_more": "More information on how to get started.",
"add_stat": "Pick entity to track energy of", "add_stat": "Pick entity to track energy of",