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

Dev tools events layout (#18389)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Josh McCarty 2023-11-29 02:51:33 -07:00 committed by GitHub
parent 4a53de4466
commit eda0d12867
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/panels/developer-tools/event/developer-tools-event.ts
View File

@ -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);
}

115
src/panels/developer-tools/event/event-subscribe-card.ts
View File

@ -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);