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

Allign MQTT config panel controls (#14818)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Jan Bouwhuis 2022-12-22 15:43:55 +01:00 committed by GitHub
parent 7780ae8f76
commit f41330a29b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 97 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
View File

@ -50,28 +50,30 @@ class HaPanelDevMqtt extends LitElement {
)} )}
> >
<div class="card-content"> <div class="card-content">
<ha-textfield <div class="panel-dev-mqtt-fields">
.label=${this.hass.localize("ui.panel.config.mqtt.topic")} <ha-textfield
.value=${this.topic} .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
@change=${this._handleTopic} .value=${this.topic}
></ha-textfield> @change=${this._handleTopic}
<ha-select ></ha-textfield>
.label=${this.hass.localize("ui.panel.config.mqtt.qos")} <ha-select
.value=${this.qos} .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
@selected=${this._handleQos} .value=${this.qos}
>${qosLevel.map( @selected=${this._handleQos}
(qos) => >${qosLevel.map(
html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>` (qos) =>
)} html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
</ha-select> )}
<ha-formfield </ha-select>
label=${this.hass!.localize("ui.panel.config.mqtt.retain")} <ha-formfield
> label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
<ha-switch >
@change=${this._handleRetain} <ha-switch
.checked=${this.retain} @change=${this._handleRetain}
></ha-switch> .checked=${this.retain}
</ha-formfield> ></ha-switch>
</ha-formfield>
</div>
<p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p> <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
<ha-code-editor <ha-code-editor
mode="jinja2" mode="jinja2"
@ -160,6 +162,28 @@ class HaPanelDevMqtt extends LitElement {
margin: 0 auto; margin: 0 auto;
direction: ltr; direction: ltr;
} }
.panel-dev-mqtt-fields {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ha-select {
width: 96px;
margin: 0 8px;
}
ha-textfield {
flex: 1;
}
@media screen and (max-width: 600px) {
ha-select {
margin-left: 0px;
margin-top: 8px;
}
ha-textfield {
flex: auto;
width: 100%;
}
}
ha-card:first-child { ha-card:first-child {
margin-bottom: 16px; margin-bottom: 16px;
} }

77
src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
View File

@ -47,32 +47,35 @@ class MqttSubscribeCard extends LitElement {
header=${this.hass.localize("ui.panel.config.mqtt.description_listen")} header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
> >
<form> <form>
<ha-textfield <div class="panel-dev-mqtt-subscribe-fields">
.label=${this._subscribed <ha-textfield
? this.hass.localize("ui.panel.config.mqtt.listening_to") .label=${this._subscribed
: this.hass.localize("ui.panel.config.mqtt.subscribe_to")} ? this.hass.localize("ui.panel.config.mqtt.listening_to")
.disabled=${this._subscribed !== undefined} : this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
.value=${this._topic} .disabled=${this._subscribed !== undefined}
@change=${this._handleTopic} .value=${this._topic}
></ha-textfield> @change=${this._handleTopic}
<ha-select ></ha-textfield>
.label=${this.hass.localize("ui.panel.config.mqtt.qos")} <ha-select
.disabled=${this._subscribed !== undefined} .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.value=${this._qos} .disabled=${this._subscribed !== undefined}
@selected=${this._handleQos} .value=${this._qos}
>${qosLevel.map( @selected=${this._handleQos}
(qos) => html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>` >${qosLevel.map(
)} (qos) =>
</ha-select> html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
<mwc-button )}
.disabled=${this._topic === ""} </ha-select>
@click=${this._handleSubmit} <mwc-button
type="submit" .disabled=${this._topic === ""}
> @click=${this._handleSubmit}
${this._subscribed type="submit"
? this.hass.localize("ui.panel.config.mqtt.stop_listening") >
: this.hass.localize("ui.panel.config.mqtt.start_listening")} ${this._subscribed
</mwc-button> ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
: this.hass.localize("ui.panel.config.mqtt.start_listening")}
</mwc-button>
</div>
</form> </form>
<div class="events"> <div class="events">
${this._messages.map( ${this._messages.map(
@ -170,6 +173,28 @@ class MqttSubscribeCard extends LitElement {
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--code-font-family, monospace);
} }
.panel-dev-mqtt-subscribe-fields {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ha-select {
width: 96px;
margin: 0 8px;
}
ha-textfield {
flex: 1;
}
@media screen and (max-width: 600px) {
ha-select {
margin-left: 0px;
margin-top: 8px;
}
ha-textfield {
flex: auto;
width: 100%;
}
}
`; `;
} }
} }