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

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">
<ha-textfield
.label=${this.hass.localize("ui.panel.config.mqtt.topic")}
.value=${this.topic}
@change=${this._handleTopic}
></ha-textfield>
<ha-select
.label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.value=${this.qos}
@selected=${this._handleQos}
>${qosLevel.map(
(qos) =>
html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
)}
</ha-select>
<ha-formfield
label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
>
<ha-switch
@change=${this._handleRetain}
.checked=${this.retain}
></ha-switch>
</ha-formfield>
<div class="panel-dev-mqtt-fields">
<ha-textfield
.label=${this.hass.localize("ui.panel.config.mqtt.topic")}
.value=${this.topic}
@change=${this._handleTopic}
></ha-textfield>
<ha-select
.label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.value=${this.qos}
@selected=${this._handleQos}
>${qosLevel.map(
(qos) =>
html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
)}
</ha-select>
<ha-formfield
label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
>
<ha-switch
@change=${this._handleRetain}
.checked=${this.retain}
></ha-switch>
</ha-formfield>
</div>
<p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
<ha-code-editor
mode="jinja2"
@ -160,6 +162,28 @@ class HaPanelDevMqtt extends LitElement {
margin: 0 auto;
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 {
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")}
>
<form>
<ha-textfield
.label=${this._subscribed
? this.hass.localize("ui.panel.config.mqtt.listening_to")
: this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
.disabled=${this._subscribed !== undefined}
.value=${this._topic}
@change=${this._handleTopic}
></ha-textfield>
<ha-select
.label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.disabled=${this._subscribed !== undefined}
.value=${this._qos}
@selected=${this._handleQos}
>${qosLevel.map(
(qos) => html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
)}
</ha-select>
<mwc-button
.disabled=${this._topic === ""}
@click=${this._handleSubmit}
type="submit"
>
${this._subscribed
? this.hass.localize("ui.panel.config.mqtt.stop_listening")
: this.hass.localize("ui.panel.config.mqtt.start_listening")}
</mwc-button>
<div class="panel-dev-mqtt-subscribe-fields">
<ha-textfield
.label=${this._subscribed
? this.hass.localize("ui.panel.config.mqtt.listening_to")
: this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
.disabled=${this._subscribed !== undefined}
.value=${this._topic}
@change=${this._handleTopic}
></ha-textfield>
<ha-select
.label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.disabled=${this._subscribed !== undefined}
.value=${this._qos}
@selected=${this._handleQos}
>${qosLevel.map(
(qos) =>
html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
)}
</ha-select>
<mwc-button
.disabled=${this._topic === ""}
@click=${this._handleSubmit}
type="submit"
>
${this._subscribed
? this.hass.localize("ui.panel.config.mqtt.stop_listening")
: this.hass.localize("ui.panel.config.mqtt.start_listening")}
</mwc-button>
</div>
</form>
<div class="events">
${this._messages.map(
@ -170,6 +173,28 @@ class MqttSubscribeCard extends LitElement {
pre {
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%;
}
}
`;
}
}