Fix formfield display (#6245)

This commit is contained in:
Paulus Schoutsen 2020-06-26 12:17:27 -07:00 committed by GitHub
parent 7395d19489
commit 2cd367f29f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 62 deletions

View File

@ -143,15 +143,17 @@ class CloudGoogleAssistant extends LitElement {
</ha-formfield> </ha-formfield>
${entity.might_2fa ${entity.might_2fa
? html` ? html`
<ha-switch <ha-formfield
.entityId=${entity.entity_id} .label=${this.hass!.localize(
.checked=${Boolean(config.disable_2fa)}
@change=${this._disable2FAChanged}
>
${this.hass!.localize(
"ui.panel.config.cloud.google.disable_2FA" "ui.panel.config.cloud.google.disable_2FA"
)} )}
</ha-switch> >
<ha-switch
.entityId=${entity.entity_id}
.checked=${Boolean(config.disable_2fa)}
@change=${this._disable2FAChanged}
></ha-switch>
</ha-formfield>
` `
: ""} : ""}
</div> </div>
@ -375,6 +377,9 @@ class CloudGoogleAssistant extends LitElement {
state-info { state-info {
cursor: pointer; cursor: pointer;
} }
ha-formfield {
display: block;
}
ha-switch { ha-switch {
padding: 8px 0; padding: 8px 0;
} }

View File

@ -232,6 +232,9 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
.triggerlistitem { .triggerlistitem {
margin-bottom: 12px; margin-bottom: 12px;
} }
ha-formfield {
display: block;
}
`, `,
]; ];
} }

View File

@ -318,6 +318,9 @@ export class DialogLovelaceDashboardDetail extends LitElement {
ha-switch { ha-switch {
padding: 16px 0; padding: 16px 0;
} }
ha-formfield {
display: block;
}
`, `,
]; ];
} }

View File

@ -107,11 +107,11 @@ export class HuiButtonCardEditor extends LitElement
${configElementStyle} ${configElementStyle}
<div class="card-config"> <div class="card-config">
<ha-entity-picker <ha-entity-picker
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity" "ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.hass=${this.hass} .hass=${this.hass}
.value="${this._entity}" .value="${this._entity}"
.configValue=${"entity"} .configValue=${"entity"}
@ -120,11 +120,11 @@ export class HuiButtonCardEditor extends LitElement
></ha-entity-picker> ></ha-entity-picker>
<div class="side-by-side"> <div class="side-by-side">
<paper-input <paper-input
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name" "ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value="${this._name}" .value="${this._name}"
.configValue="${"name"}" .configValue="${"name"}"
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
@ -133,49 +133,51 @@ export class HuiButtonCardEditor extends LitElement
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon" "ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value=${this._icon} .value=${this._icon}
.placeholder=${ .placeholder=${this._icon ||
this._icon || stateIcon(this.hass.states[this._entity]) stateIcon(this.hass.states[this._entity])}
}
.configValue=${"icon"} .configValue=${"icon"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></ha-icon-input> ></ha-icon-input>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<ha-formfield .label=${this.hass.localize( <ha-formfield
"ui.panel.lovelace.editor.card.generic.show_name" .label=${this.hass.localize(
)}> "ui.panel.lovelace.editor.card.generic.show_name"
<ha-switch )}
.checked="${this._config!.show_name !== false}"
.configValue="${"show_name"}"
@change="${this._valueChanged}"
></ha-switch
> >
</ha-formfield> <ha-switch
<ha-formfield .label=${this.hass.localize( .checked="${this._config!.show_name !== false}"
"ui.panel.lovelace.editor.card.generic.show_icon" .configValue="${"show_name"}"
)}> @change="${this._valueChanged}"
<ha-switch ></ha-switch>
.checked="${this._config!.show_icon !== false}" </ha-formfield>
.configValue="${"show_icon"}" <ha-formfield
@change="${this._valueChanged}" .label=${this.hass.localize(
></ha-switch "ui.panel.lovelace.editor.card.generic.show_icon"
></ha-formfield> )}
>
<ha-switch
.checked="${this._config!.show_icon !== false}"
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
></ha-switch>
</ha-formfield>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<paper-input <paper-input
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon_height" "ui.panel.lovelace.editor.card.generic.icon_height"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value="${this._icon_height}" .value="${this._icon_height}"
.configValue="${"icon_height"}" .configValue="${"icon_height"}"
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
type="number" type="number"
><div class="suffix" slot="suffix">px</div> ><div class="suffix" slot="suffix">px</div>
</paper-input> </paper-input>
<hui-theme-select-editor <hui-theme-select-editor
.hass=${this.hass} .hass=${this.hass}
@ -183,16 +185,14 @@ export class HuiButtonCardEditor extends LitElement
.configValue="${"theme"}" .configValue="${"theme"}"
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
></hui-theme-select-editor> ></hui-theme-select-editor>
</paper-input>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<hui-action-editor <hui-action-editor
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.tap_action" "ui.panel.lovelace.editor.card.generic.tap_action"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.hass=${this.hass} .hass=${this.hass}
.config="${this._tap_action}" .config="${this._tap_action}"
.actions="${actions}" .actions="${actions}"
@ -200,11 +200,11 @@ export class HuiButtonCardEditor extends LitElement
@action-changed="${this._valueChanged}" @action-changed="${this._valueChanged}"
></hui-action-editor> ></hui-action-editor>
<hui-action-editor <hui-action-editor
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hold_action" "ui.panel.lovelace.editor.card.generic.hold_action"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.hass=${this.hass} .hass=${this.hass}
.config="${this._hold_action}" .config="${this._hold_action}"
.actions="${actions}" .actions="${actions}"

View File

@ -133,11 +133,11 @@ export class HuiViewEditor extends LitElement {
@change=${this._valueChanged} @change=${this._valueChanged}
></ha-switch ></ha-switch
></ha-formfield> ></ha-formfield>
<span class="panel" <span class="panel">
>${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.editor.view.panel_mode.description" "ui.panel.lovelace.editor.view.panel_mode.description"
)}</span )}
> </span>
</div> </div>
`; `;
} }
@ -181,6 +181,9 @@ export class HuiViewEditor extends LitElement {
.panel { .panel {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-formfield {
display: block;
}
`; `;
} }
} }