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

Change layout of Zwave JS device config page (#14788)

Browse Source
This commit is contained in:
Bram Kragten 2022-12-15 17:41:38 +01:00 committed by GitHub
parent b18160d987
commit b31a9d590e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
View File

@ -131,7 +131,11 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
.route=${this.route} .route=${this.route}
.tabs=${configTabs} .tabs=${configTabs}
> >
<ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}> <ha-config-section
.narrow=${this.narrow}
.isWide=${this.isWide}
vertical
>
<div slot="header"> <div slot="header">
${this.hass.localize("ui.panel.config.zwave_js.node_config.header")} ${this.hass.localize("ui.panel.config.zwave_js.node_config.header")}
</div> </div>
@ -190,11 +194,11 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
<br /> <br />
<span>${item.property}</span> <span>${item.property}</span>
</span> </span>
<span slot="heading" .title=${item.metadata.label}> <span slot="heading" class="heading" .title=${item.metadata.label}>
${item.metadata.label} ${item.metadata.label}
</span> </span>
<span slot="description"> <span slot="description">
${item.metadata.description} ${item.metadata.description || item.metadata.label}
${item.metadata.description !== null && !item.metadata.writeable ${item.metadata.description !== null && !item.metadata.writeable
? html`<br />` ? html`<br />`
: ""} : ""}
@ -236,7 +240,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
) { ) {
return html` return html`
${labelAndDescription} ${labelAndDescription}
<div class="toggle"> <div class="switch">
<ha-switch <ha-switch
.property=${item.property} .property=${item.property}
.propertyKey=${item.property_key} .propertyKey=${item.property_key}
@ -271,22 +275,20 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
if (item.configuration_value_type === "enumerated") { if (item.configuration_value_type === "enumerated") {
return html` return html`
${labelAndDescription} ${labelAndDescription}
<div class="flex"> <ha-select
<ha-select .disabled=${!item.metadata.writeable}
.disabled=${!item.metadata.writeable} .value=${item.value?.toString()}
.value=${item.value?.toString()} .key=${id}
.key=${id} .property=${item.property}
.property=${item.property} .propertyKey=${item.property_key}
.propertyKey=${item.property_key} @selected=${this._dropdownSelected}
@selected=${this._dropdownSelected} >
> ${Object.entries(item.metadata.states).map(
${Object.entries(item.metadata.states).map( ([key, entityState]) => html`
([key, entityState]) => html` <mwc-list-item .value=${key}>${entityState}</mwc-list-item>
<mwc-list-item .value=${key}>${entityState}</mwc-list-item> `
` )}
)} </ha-select>
</ha-select>
</div>
`; `;
} }
@ -446,17 +448,18 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
padding-right: 40px; padding-right: 40px;
} }
ha-card {
margin: 0 auto;
max-width: 600px;
}
ha-settings-row { ha-settings-row {
--settings-row-prefix-display: contents;
--settings-row-content-width: 100%;
--paper-time-input-justify-content: flex-end; --paper-time-input-justify-content: flex-end;
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
padding: 4px 16px; padding: 4px 16px;
} }
ha-settings-row:first-child {
border-top: none;
}
.prefix { .prefix {
color: var(--secondary-text-color); color: var(--secondary-text-color);
text-align: center; text-align: center;
@ -470,14 +473,21 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
font-size: 1.3em; font-size: 1.3em;
} }
.heading {
white-space: normal;
}
:host(:not([narrow])) ha-settings-row ha-textfield { :host(:not([narrow])) ha-settings-row ha-textfield {
width: 30%;
text-align: right; text-align: right;
} }
ha-card:last-child { ha-card:last-child {
margin-bottom: 24px; margin-bottom: 24px;
} }
.switch {
text-align: right;
}
`, `,
]; ];
} }