mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Dev tools events layout (#18389)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
4a53de4466
commit
eda0d12867
@ -25,7 +25,11 @@ class HaPanelDevEvent extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<div class=${this.narrow ? "content" : "content layout horizontal"}>
|
||||
<div
|
||||
class=${this.narrow
|
||||
? "content layout vertical"
|
||||
: "content layout horizontal"}
|
||||
>
|
||||
<div class="flex">
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
@ -128,6 +132,7 @@ class HaPanelDevEvent extends LitElement {
|
||||
haStyle,
|
||||
css`
|
||||
.content {
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
padding: max(16px, env(safe-area-inset-top))
|
||||
max(16px, env(safe-area-inset-right))
|
||||
@ -145,6 +150,10 @@ class HaPanelDevEvent extends LitElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
max-width: 400px;
|
||||
}
|
||||
@ -163,9 +172,7 @@ class HaPanelDevEvent extends LitElement {
|
||||
|
||||
event-subscribe-card {
|
||||
display: block;
|
||||
margin: 16px 16px 0 0;
|
||||
margin-inline-start: initial;
|
||||
margin-inline-end: 16px;
|
||||
margin-top: 16px;
|
||||
direction: var(--direction);
|
||||
}
|
||||
|
||||
|
@ -39,55 +39,57 @@ class EventSubscribeCard extends LitElement {
|
||||
"ui.panel.developer-tools.tabs.events.listen_to_events"
|
||||
)}
|
||||
>
|
||||
<form>
|
||||
<ha-textfield
|
||||
.label=${this._subscribed
|
||||
? this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.listening_to"
|
||||
)
|
||||
: this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.subscribe_to"
|
||||
)}
|
||||
.disabled=${this._subscribed !== undefined}
|
||||
.value=${this._eventType}
|
||||
@input=${this._valueChanged}
|
||||
></ha-textfield>
|
||||
<mwc-button
|
||||
.disabled=${this._eventType === ""}
|
||||
@click=${this._handleSubmit}
|
||||
type="submit"
|
||||
>
|
||||
${this._subscribed
|
||||
? this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.stop_listening"
|
||||
)
|
||||
: this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.start_listening"
|
||||
)}
|
||||
</mwc-button>
|
||||
</form>
|
||||
<div class="events">
|
||||
${repeat(
|
||||
this._events,
|
||||
(event) => event.id,
|
||||
(event) => html`
|
||||
<div class="event">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.event_fired",
|
||||
{ name: event.id }
|
||||
)}
|
||||
${formatTime(
|
||||
new Date(event.event.time_fired),
|
||||
this.hass!.locale,
|
||||
this.hass!.config
|
||||
)}:
|
||||
<ha-yaml-editor
|
||||
.defaultValue=${event.event}
|
||||
readOnly
|
||||
></ha-yaml-editor>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
<div class="card-content">
|
||||
<form>
|
||||
<ha-textfield
|
||||
.label=${this._subscribed
|
||||
? this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.listening_to"
|
||||
)
|
||||
: this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.subscribe_to"
|
||||
)}
|
||||
.disabled=${this._subscribed !== undefined}
|
||||
.value=${this._eventType}
|
||||
@input=${this._valueChanged}
|
||||
></ha-textfield>
|
||||
<mwc-button
|
||||
.disabled=${this._eventType === ""}
|
||||
@click=${this._handleSubmit}
|
||||
type="submit"
|
||||
>
|
||||
${this._subscribed
|
||||
? this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.stop_listening"
|
||||
)
|
||||
: this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.start_listening"
|
||||
)}
|
||||
</mwc-button>
|
||||
</form>
|
||||
<div class="events">
|
||||
${repeat(
|
||||
this._events,
|
||||
(event) => event.id,
|
||||
(event) => html`
|
||||
<div class="event">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.event_fired",
|
||||
{ name: event.id }
|
||||
)}
|
||||
${formatTime(
|
||||
new Date(event.event.time_fired),
|
||||
this.hass!.locale,
|
||||
this.hass!.config
|
||||
)}:
|
||||
<ha-yaml-editor
|
||||
.defaultValue=${event.event}
|
||||
readOnly
|
||||
></ha-yaml-editor>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
@ -121,19 +123,9 @@ class EventSubscribeCard extends LitElement {
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
form {
|
||||
display: block;
|
||||
padding: 0 0 16px 16px;
|
||||
}
|
||||
ha-textfield {
|
||||
width: 300px;
|
||||
}
|
||||
mwc-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.events {
|
||||
margin: -16px 0;
|
||||
padding: 0 16px;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.event {
|
||||
border-top: 1px solid var(--divider-color);
|
||||
@ -143,6 +135,7 @@ class EventSubscribeCard extends LitElement {
|
||||
}
|
||||
.event:last-child {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
pre {
|
||||
font-family: var(--code-font-family, monospace);
|
||||
|
Loading…
x
Reference in New Issue
Block a user