Skip to content

Commit be63ff7

Browse files
jpbedetimmo001
jpbede
and
timmo001
authored
Improve ZHA config dashboard styling (#27492)
Co-authored-by: Aidan Timson <aidan@timmo.dev>
1 parent 132c68b commit be63ff7

File tree

1 file changed

+190
-177
lines changed

1 file changed

+190
-177
lines changed

‎src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts‎

Lines changed: 190 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -110,191 +110,200 @@ class ZHAConfigDashboard extends LitElement {
110110
back-path="/config/integrations"
111111
has-fab
112112
>
113-
<ha-card class="content network-status">
114-
${this._error
115-
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
116-
: nothing}
117-
<div class="card-content">
118-
<div class="heading">
119-
<div class="icon">
120-
<ha-svg-icon
121-
.path=${deviceOnline ? mdiCheckCircle : mdiAlertCircle}
122-
class=${deviceOnline ? "online" : "offline"}
123-
></ha-svg-icon>
124-
</div>
125-
<div class="details">
126-
ZHA
127-
${this.hass.localize(
128-
"ui.panel.config.zha.configuration_page.status_title"
129-
)}:
130-
${this.hass.localize(
131-
`ui.panel.config.zha.configuration_page.status_${deviceOnline ? "online" : "offline"}`
132-
)}<br />
133-
<small>
134-
${this.hass.localize(
135-
"ui.panel.config.zha.configuration_page.devices",
136-
{ count: this._totalDevices }
137-
)}
138-
</small>
139-
<small class="offline">
140-
${this._offlineDevices > 0
141-
? html`(${this.hass.localize(
142-
"ui.panel.config.zha.configuration_page.devices_offline",
143-
{ count: this._offlineDevices }
144-
)})`
145-
: nothing}
146-
</small>
147-
</div>
148-
</div>
149-
</div>
150-
${this.configEntryId
151-
? html`<div class="card-actions">
152-
<ha-button
153-
href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
154-
appearance="plain"
155-
size="small"
156-
>
113+
<div class="container">
114+
<ha-card class="content network-status">
115+
${this._error
116+
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
117+
: nothing}
118+
<div class="card-content">
119+
<div class="heading">
120+
<div class="icon">
121+
<ha-svg-icon
122+
.path=${deviceOnline ? mdiCheckCircle : mdiAlertCircle}
123+
class=${deviceOnline ? "online" : "offline"}
124+
></ha-svg-icon>
125+
</div>
126+
<div class="details">
127+
ZHA
157128
${this.hass.localize(
158-
"ui.panel.config.devices.caption"
159-
)}</ha-button
160-
>
161-
<ha-button
162-
appearance="plain"
163-
size="small"
164-
href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
165-
>
129+
"ui.panel.config.zha.configuration_page.status_title"
130+
)}:
166131
${this.hass.localize(
167-
"ui.panel.config.entities.caption"
168-
)}</ha-button
169-
>
170-
</div>`
171-
: ""}
172-
</ha-card>
173-
<ha-card
174-
class="network-settings"
175-
header=${this.hass.localize(
176-
"ui.panel.config.zha.configuration_page.network_settings_title"
177-
)}
178-
>
179-
${this._networkSettings
180-
? html`<div class="card-content">
181-
<ha-settings-row>
182-
<span slot="description">PAN ID</span>
183-
<span slot="heading"
184-
>${this._networkSettings.settings.network_info.pan_id}</span
185-
>
186-
</ha-settings-row>
187-
188-
<ha-settings-row>
189-
<span slot="heading"
190-
>${this._networkSettings.settings.network_info
191-
.extended_pan_id}</span
192-
>
193-
<span slot="description">Extended PAN ID</span>
194-
</ha-settings-row>
195-
196-
<ha-settings-row>
197-
<span slot="description">Channel</span>
198-
<span slot="heading"
199-
>${this._networkSettings.settings.network_info
200-
.channel}</span
201-
>
202-
203-
<ha-icon-button
204-
.label=${this.hass.localize(
205-
"ui.panel.config.zha.configuration_page.change_channel"
132+
`ui.panel.config.zha.configuration_page.status_${deviceOnline ? "online" : "offline"}`
133+
)}<br />
134+
<small>
135+
${this.hass.localize(
136+
"ui.panel.config.zha.configuration_page.devices",
137+
{ count: this._totalDevices }
206138
)}
207-
.path=${mdiPencil}
208-
@click=${this._showChannelMigrationDialog}
139+
</small>
140+
<small class="offline">
141+
${this._offlineDevices > 0
142+
? html`(${this.hass.localize(
143+
"ui.panel.config.zha.configuration_page.devices_offline",
144+
{ count: this._offlineDevices }
145+
)})`
146+
: nothing}
147+
</small>
148+
</div>
149+
</div>
150+
</div>
151+
${this.configEntryId
152+
? html`<div class="card-actions">
153+
<ha-button
154+
href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
155+
appearance="plain"
156+
size="small"
209157
>
210-
</ha-icon-button>
211-
</ha-settings-row>
212-
213-
<ha-settings-row>
214-
<span slot="description">Coordinator IEEE</span>
215-
<span slot="heading"
216-
>${this._networkSettings.settings.node_info.ieee}</span
158+
${this.hass.localize(
159+
"ui.panel.config.devices.caption"
160+
)}</ha-button
217161
>
218-
</ha-settings-row>
219-
220-
<ha-settings-row>
221-
<span slot="description">Radio type</span>
222-
<span slot="heading"
223-
>${this._networkSettings.radio_type}</span
162+
<ha-button
163+
appearance="plain"
164+
size="small"
165+
href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
224166
>
225-
</ha-settings-row>
226-
227-
<ha-settings-row>
228-
<span slot="description">Serial port</span>
229-
<span slot="heading"
230-
>${this._networkSettings.device.path}</span
167+
${this.hass.localize(
168+
"ui.panel.config.entities.caption"
169+
)}</ha-button
231170
>
232-
</ha-settings-row>
233-
234-
${this._networkSettings.device.baudrate &&
235-
!this._networkSettings.device.path.startsWith("socket://")
236-
? html`
237-
<ha-settings-row>
238-
<span slot="description">Baudrate</span>
239-
<span slot="heading"
240-
>${this._networkSettings.device.baudrate}</span
241-
>
242-
</ha-settings-row>
243-
`
244-
: ""}
245-
</div>`
246-
: ""}
247-
<div class="card-actions">
248-
<ha-progress-button
249-
appearance="plain"
250-
@click=${this._createAndDownloadBackup}
251-
.progress=${this._generatingBackup}
252-
.disabled=${!this._networkSettings || this._generatingBackup}
253-
>
254-
${this.hass.localize(
255-
"ui.panel.config.zha.configuration_page.download_backup"
256-
)}
257-
</ha-progress-button>
258-
<ha-button variant="danger" @click=${this._openOptionFlow}>
259-
${this.hass.localize(
260-
"ui.panel.config.zha.configuration_page.migrate_radio"
261-
)}
262-
</ha-button>
263-
</div>
264-
</ha-card>
265-
${this._configuration
266-
? Object.entries(this._configuration.schemas).map(
267-
([section, schema]) =>
268-
html`<ha-card
269-
header=${this.hass.localize(
270-
`component.zha.config_panel.${section}.title`
271-
)}
272-
>
273-
<div class="card-content">
274-
<ha-form
275-
.hass=${this.hass}
276-
.schema=${schema}
277-
.data=${this._configuration!.data[section]}
278-
@value-changed=${this._dataChanged}
279-
.section=${section}
280-
.computeLabel=${this._computeLabelCallback(
281-
this.hass.localize,
282-
section
171+
</div>`
172+
: ""}
173+
</ha-card>
174+
<ha-card
175+
class="network-settings"
176+
header=${this.hass.localize(
177+
"ui.panel.config.zha.configuration_page.network_settings_title"
178+
)}
179+
>
180+
${this._networkSettings
181+
? html`<div class="card-content">
182+
<ha-settings-row>
183+
<span slot="description">PAN ID</span>
184+
<span slot="heading"
185+
>${this._networkSettings.settings.network_info
186+
.pan_id}</span
187+
>
188+
</ha-settings-row>
189+
190+
<ha-settings-row>
191+
<span slot="heading"
192+
>${this._networkSettings.settings.network_info
193+
.extended_pan_id}</span
194+
>
195+
<span slot="description">Extended PAN ID</span>
196+
</ha-settings-row>
197+
198+
<ha-settings-row>
199+
<span slot="description">Channel</span>
200+
<span slot="heading"
201+
>${this._networkSettings.settings.network_info
202+
.channel}</span
203+
>
204+
205+
<ha-icon-button
206+
.label=${this.hass.localize(
207+
"ui.panel.config.zha.configuration_page.change_channel"
283208
)}
284-
></ha-form>
285-
</div>
286-
</ha-card>`
287-
)
288-
: ""}
289-
<ha-card>
290-
<div class="card-actions">
291-
<ha-button @click=${this._updateConfiguration}>
292-
${this.hass.localize(
293-
"ui.panel.config.zha.configuration_page.update_button"
294-
)}
295-
</ha-button>
296-
</div>
297-
</ha-card>
209+
.path=${mdiPencil}
210+
@click=${this._showChannelMigrationDialog}
211+
>
212+
</ha-icon-button>
213+
</ha-settings-row>
214+
215+
<ha-settings-row>
216+
<span slot="description">Coordinator IEEE</span>
217+
<span slot="heading"
218+
>${this._networkSettings.settings.node_info.ieee}</span
219+
>
220+
</ha-settings-row>
221+
222+
<ha-settings-row>
223+
<span slot="description">Radio type</span>
224+
<span slot="heading"
225+
>${this._networkSettings.radio_type}</span
226+
>
227+
</ha-settings-row>
228+
229+
<ha-settings-row>
230+
<span slot="description">Serial port</span>
231+
<span slot="heading"
232+
>${this._networkSettings.device.path}</span
233+
>
234+
</ha-settings-row>
235+
236+
${this._networkSettings.device.baudrate &&
237+
!this._networkSettings.device.path.startsWith("socket://")
238+
? html`
239+
<ha-settings-row>
240+
<span slot="description">Baudrate</span>
241+
<span slot="heading"
242+
>${this._networkSettings.device.baudrate}</span
243+
>
244+
</ha-settings-row>
245+
`
246+
: nothing}
247+
</div>`
248+
: nothing}
249+
<div class="card-actions">
250+
<ha-progress-button
251+
appearance="plain"
252+
@click=${this._createAndDownloadBackup}
253+
.progress=${this._generatingBackup}
254+
.disabled=${!this._networkSettings || this._generatingBackup}
255+
>
256+
${this.hass.localize(
257+
"ui.panel.config.zha.configuration_page.download_backup"
258+
)}
259+
</ha-progress-button>
260+
<ha-button
261+
appearance="filled"
262+
variant="brand"
263+
@click=${this._openOptionFlow}
264+
>
265+
${this.hass.localize(
266+
"ui.panel.config.zha.configuration_page.migrate_radio"
267+
)}
268+
</ha-button>
269+
</div>
270+
</ha-card>
271+
${this._configuration
272+
? Object.entries(this._configuration.schemas).map(
273+
([section, schema]) =>
274+
html`<ha-card
275+
header=${this.hass.localize(
276+
`component.zha.config_panel.${section}.title`
277+
)}
278+
>
279+
<div class="card-content">
280+
<ha-form
281+
.hass=${this.hass}
282+
.schema=${schema}
283+
.data=${this._configuration!.data[section]}
284+
@value-changed=${this._dataChanged}
285+
.section=${section}
286+
.computeLabel=${this._computeLabelCallback(
287+
this.hass.localize,
288+
section
289+
)}
290+
></ha-form>
291+
</div>
292+
<div class="card-actions">
293+
<ha-button
294+
appearance="filled"
295+
variant="brand"
296+
@click=${this._updateConfiguration}
297+
>
298+
${this.hass.localize(
299+
"ui.panel.config.zha.configuration_page.update_button"
300+
)}
301+
</ha-button>
302+
</div>
303+
</ha-card>`
304+
)
305+
: nothing}
306+
</div>
298307
299308
<a href="/config/zha/add" slot="fab">
300309
<ha-fab
@@ -489,6 +498,10 @@ class ZHAConfigDashboard extends LitElement {
489498
.network-status .offline {
490499
color: var(--error-color, var(--error-color));
491500
}
501+
502+
.container {
503+
padding: var(--ha-space-2) var(--ha-space-4) var(--ha-space-4);
504+
}
492505
`,
493506
];
494507
}

0 commit comments

Comments
 (0)