Input conversion in dev tools (#11795)
This commit is contained in:
parent
6e2e80a297
commit
0010bf5a8f
|
@ -2,7 +2,7 @@
|
|||
|
||||
This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
|
||||
|
||||
[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
|
||||
[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
|
||||
|
||||
- [View demo of Home Assistant](https://demo.home-assistant.io/)
|
||||
- [More information about Home Assistant](https://home-assistant.io)
|
||||
|
|
|
@ -75,7 +75,7 @@ class DialogBox extends LitElement {
|
|||
? html`
|
||||
<ha-textfield
|
||||
dialogInitialFocus
|
||||
.value=${this._value}
|
||||
.value=${this._value || ""}
|
||||
@keyup=${this._handleKeyUp}
|
||||
@change=${this._valueChanged}
|
||||
.label=${this._params.inputLabel
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import "@material/mwc-button";
|
||||
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { load } from "js-yaml";
|
||||
import "../../../components/ha-code-editor";
|
||||
import "../../../components/ha-textfield";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { EventsMixin } from "../../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
||||
|
@ -46,6 +46,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
margin-top: 8px;
|
||||
}
|
||||
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
@ -78,14 +82,15 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
</a>
|
||||
</p>
|
||||
<div class="inputs">
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
label="[[localize(
|
||||
'ui.panel.developer-tools.tabs.events.type'
|
||||
)]]"
|
||||
autofocus
|
||||
required
|
||||
value="{{eventType}}"
|
||||
></paper-input>
|
||||
value="[[eventType]]"
|
||||
on-change="eventTypeChanged"
|
||||
></ha-textfield>
|
||||
<p>[[localize( 'ui.panel.developer-tools.tabs.events.data' )]]</p>
|
||||
</div>
|
||||
<div class="code-editor">
|
||||
|
@ -150,6 +155,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
this.eventType = ev.detail.eventType;
|
||||
}
|
||||
|
||||
eventTypeChanged(ev) {
|
||||
this.eventType = ev.target.value;
|
||||
}
|
||||
|
||||
_computeParsedEventData(eventData) {
|
||||
try {
|
||||
return eventData.trim() ? load(eventData) : {};
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
import "@material/mwc-button";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { HassEvent } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { formatTime } from "../../../common/datetime/format_time";
|
||||
import "../../../components/ha-card";
|
||||
import { PolymerChangedEvent } from "../../../polymer-types";
|
||||
import "../../../components/ha-textfield";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
|
||||
@customElement("event-subscribe-card")
|
||||
|
@ -39,7 +38,7 @@ class EventSubscribeCard extends LitElement {
|
|||
)}
|
||||
>
|
||||
<form>
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
.label=${this._subscribed
|
||||
? this.hass!.localize(
|
||||
"ui.panel.developer-tools.tabs.events.listening_to"
|
||||
|
@ -49,8 +48,8 @@ class EventSubscribeCard extends LitElement {
|
|||
)}
|
||||
.disabled=${this._subscribed !== undefined}
|
||||
.value=${this._eventType}
|
||||
@value-changed=${this._valueChanged}
|
||||
></paper-input>
|
||||
@input=${this._valueChanged}
|
||||
></ha-textfield>
|
||||
<mwc-button
|
||||
.disabled=${this._eventType === ""}
|
||||
@click=${this._handleSubmit}
|
||||
|
@ -84,8 +83,8 @@ class EventSubscribeCard extends LitElement {
|
|||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: PolymerChangedEvent<string>): void {
|
||||
this._eventType = ev.detail.value;
|
||||
private _valueChanged(ev): void {
|
||||
this._eventType = ev.target.value;
|
||||
}
|
||||
|
||||
private async _handleSubmit(): Promise<void> {
|
||||
|
@ -116,9 +115,8 @@ class EventSubscribeCard extends LitElement {
|
|||
display: block;
|
||||
padding: 0 0 16px 16px;
|
||||
}
|
||||
paper-input {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
ha-textfield {
|
||||
width: 300px;
|
||||
}
|
||||
mwc-button {
|
||||
vertical-align: middle;
|
||||
|
|
|
@ -5,7 +5,6 @@ import {
|
|||
mdiInformationOutline,
|
||||
mdiRefresh,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
@ -42,6 +41,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.state-input {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
ha-expansion-panel {
|
||||
margin: 0 8px 16px;
|
||||
}
|
||||
|
@ -74,6 +81,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
);
|
||||
}
|
||||
|
||||
.filters th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filters ha-textfield {
|
||||
--mdc-text-field-fill-color: transparent;
|
||||
}
|
||||
|
||||
th.attributes {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -164,16 +179,17 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
on-change="entityIdChanged"
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
label="[[localize('ui.panel.developer-tools.tabs.states.state')]]"
|
||||
required
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
value="{{_state}}"
|
||||
value="[[_state]]"
|
||||
on-change="stateChanged"
|
||||
class="state-input"
|
||||
></paper-input>
|
||||
></ha-textfield>
|
||||
<p>
|
||||
[[localize('ui.panel.developer-tools.tabs.states.state_attributes')]]
|
||||
</p>
|
||||
|
@ -234,27 +250,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
></ha-checkbox>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr class="filters">
|
||||
<th>
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
label="[[localize('ui.panel.developer-tools.tabs.states.filter_entities')]]"
|
||||
type="search"
|
||||
value="{{_entityFilter}}"
|
||||
></paper-input>
|
||||
value="[[_entityFilter]]"
|
||||
on-input="_entityFilterChanged"
|
||||
></ha-textfield>
|
||||
</th>
|
||||
<th>
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
label="[[localize('ui.panel.developer-tools.tabs.states.filter_states')]]"
|
||||
type="search"
|
||||
value="{{_stateFilter}}"
|
||||
></paper-input>
|
||||
value="[[_stateFilter]]"
|
||||
on-input="_stateFilterChanged"
|
||||
></ha-textfield>
|
||||
</th>
|
||||
<th hidden$="[[!computeShowAttributes(narrow, _showAttributes)]]">
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
label="[[localize('ui.panel.developer-tools.tabs.states.filter_attributes')]]"
|
||||
type="search"
|
||||
value="{{_attributeFilter}}"
|
||||
></paper-input>
|
||||
value="[[_attributeFilter]]"
|
||||
on-input="_attributeFilterChanged"
|
||||
></ha-textfield>
|
||||
</th>
|
||||
</tr>
|
||||
<tr hidden$="[[!computeShowEntitiesPlaceholder(_entities)]]">
|
||||
|
@ -416,6 +435,22 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
this._expanded = true;
|
||||
}
|
||||
|
||||
stateChanged(ev) {
|
||||
this._state = ev.target.value;
|
||||
}
|
||||
|
||||
_entityFilterChanged(ev) {
|
||||
this._entityFilter = ev.target.value;
|
||||
}
|
||||
|
||||
_stateFilterChanged(ev) {
|
||||
this._stateFilter = ev.target.value;
|
||||
}
|
||||
|
||||
_attributeFilterChanged(ev) {
|
||||
this._attributeFilter = ev.target.value;
|
||||
}
|
||||
|
||||
_getHistoryURL(entityId, inputDate) {
|
||||
const date = new Date(inputDate);
|
||||
const hourBefore = addHours(date, -1).toISOString();
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import "@polymer/paper-input/paper-textarea";
|
||||
import { PropertyValues, ReactiveElement } from "lit";
|
||||
import { property } from "lit/decorators";
|
||||
import { computeRTL } from "../../../../common/util/compute_rtl";
|
||||
|
|
|
@ -333,7 +333,7 @@ export class HuiConditionalCardEditor
|
|||
.condition .state mwc-select {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.condition .state paper-input {
|
||||
.condition .state ha-textfield {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import "@material/mwc-button";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-input/paper-textarea";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-tabs/paper-tab";
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import "@material/mwc-button";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
|
@ -7,6 +6,7 @@ import { createCloseHeading } from "../../components/ha-dialog";
|
|||
import { haStyleDialog } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
|
||||
import "../../components/ha-textfield";
|
||||
|
||||
const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
|
||||
|
||||
|
@ -41,14 +41,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
|
|||
@closed=${this.closeDialog}
|
||||
>
|
||||
<div>
|
||||
<paper-input
|
||||
<ha-textfield
|
||||
dialogInitialFocus
|
||||
.value=${this._params.token}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
|
||||
)}
|
||||
type="text"
|
||||
></paper-input>
|
||||
readOnly
|
||||
></ha-textfield>
|
||||
<div id="qr">
|
||||
${this._qrCode
|
||||
? this._qrCode
|
||||
|
@ -94,6 +95,9 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
|
|||
#qr {
|
||||
text-align: center;
|
||||
}
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue