jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 02:36:37 +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 { protected render(): TemplateResult {
return html` return html`
<div class=${this.narrow ? "content" : "content layout horizontal"}> <div
class=${this.narrow
? "content layout vertical"
: "content layout horizontal"}
>
<div class="flex"> <div class="flex">
<p> <p>
${this.hass.localize( ${this.hass.localize(
@ -128,6 +132,7 @@ class HaPanelDevEvent extends LitElement {
haStyle, haStyle,
css` css`
.content { .content {
gap: 16px;
padding: 16px; padding: 16px;
padding: max(16px, env(safe-area-inset-top)) padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-right))
@ -145,6 +150,10 @@ class HaPanelDevEvent extends LitElement {
display: block; display: block;
} }
.flex {
min-width: 0;
}
.inputs { .inputs {
max-width: 400px; max-width: 400px;
} }
@ -163,9 +172,7 @@ class HaPanelDevEvent extends LitElement {
event-subscribe-card { event-subscribe-card {
display: block; display: block;
margin: 16px 16px 0 0; margin-top: 16px;
margin-inline-start: initial;
margin-inline-end: 16px;
direction: var(--direction); 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" "ui.panel.developer-tools.tabs.events.listen_to_events"
)} )}
> >
<form> <div class="card-content">
<ha-textfield <form>
.label=${this._subscribed <ha-textfield
? this.hass!.localize( .label=${this._subscribed
"ui.panel.developer-tools.tabs.events.listening_to" ? this.hass!.localize(
) "ui.panel.developer-tools.tabs.events.listening_to"
: this.hass!.localize( )
"ui.panel.developer-tools.tabs.events.subscribe_to" : this.hass!.localize(
)} "ui.panel.developer-tools.tabs.events.subscribe_to"
.disabled=${this._subscribed !== undefined} )}
.value=${this._eventType} .disabled=${this._subscribed !== undefined}
@input=${this._valueChanged} .value=${this._eventType}
></ha-textfield> @input=${this._valueChanged}
<mwc-button ></ha-textfield>
.disabled=${this._eventType === ""} <mwc-button
@click=${this._handleSubmit} .disabled=${this._eventType === ""}
type="submit" @click=${this._handleSubmit}
> type="submit"
${this._subscribed >
? this.hass!.localize( ${this._subscribed
"ui.panel.developer-tools.tabs.events.stop_listening" ? this.hass!.localize(
) "ui.panel.developer-tools.tabs.events.stop_listening"
: this.hass!.localize( )
"ui.panel.developer-tools.tabs.events.start_listening" : this.hass!.localize(
)} "ui.panel.developer-tools.tabs.events.start_listening"
</mwc-button> )}
</form> </mwc-button>
<div class="events"> </form>
${repeat( <div class="events">
this._events, ${repeat(
(event) => event.id, this._events,
(event) => html` (event) => event.id,
<div class="event"> (event) => html`
${this.hass!.localize( <div class="event">
"ui.panel.developer-tools.tabs.events.event_fired", ${this.hass!.localize(
{ name: event.id } "ui.panel.developer-tools.tabs.events.event_fired",
)} { name: event.id }
${formatTime( )}
new Date(event.event.time_fired), ${formatTime(
this.hass!.locale, new Date(event.event.time_fired),
this.hass!.config this.hass!.locale,
)}: this.hass!.config
<ha-yaml-editor )}:
.defaultValue=${event.event} <ha-yaml-editor
readOnly .defaultValue=${event.event}
></ha-yaml-editor> readOnly
</div> ></ha-yaml-editor>
` </div>
)} `
)}
</div>
</div> </div>
</ha-card> </ha-card>
`; `;
@ -121,19 +123,9 @@ class EventSubscribeCard extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
form {
display: block;
padding: 0 0 16px 16px;
}
ha-textfield { ha-textfield {
width: 300px; display: block;
} margin-bottom: 16px;
mwc-button {
vertical-align: middle;
}
.events {
margin: -16px 0;
padding: 0 16px;
} }
.event { .event {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
@ -143,6 +135,7 @@ class EventSubscribeCard extends LitElement {
} }
.event:last-child { .event:last-child {
border-bottom: 0; border-bottom: 0;
margin-bottom: 0;
} }
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--code-font-family, monospace);