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