jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 00:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Paper input migrations (#11766)

Browse Source
This commit is contained in:
Bram Kragten 2022-02-21 23:09:13 +01:00 committed by GitHub
parent e6d1e86c64
commit b1f369a355
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/dialogs/generic/dialog-box.ts
View File

@ -1,12 +1,11 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-dialog";
import "../../components/ha-switch";
import { PolymerChangedEvent } from "../../polymer-types";
import "../../components/ha-textfield";
import { haStyleDialog } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import { DialogBoxParams } from "./show-dialog-box";
@ -71,18 +70,18 @@ class DialogBox extends LitElement {
: ""}
${this._params.prompt
? html`
<paper-input
<ha-textfield
dialogInitialFocus
.value=${this._value}
@keyup=${this._handleKeyUp}
@value-changed=${this._valueChanged}
@change=${this._valueChanged}
.label=${this._params.inputLabel
? this._params.inputLabel
: ""}
.type=${this._params.inputType
? this._params.inputType
: "text"}
></paper-input>
></ha-textfield>
`
: ""}
</div>
@ -107,8 +106,8 @@ class DialogBox extends LitElement {
`;
}
private _valueChanged(ev: PolymerChangedEvent<string>) {
this._value = ev.detail.value;
private _valueChanged(ev) {
this._value = ev.target.value;
}
private _dismiss(): void {

1
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -10,7 +10,6 @@ import {
mdiVolumeOff,
mdiVolumePlus,
} from "@mdi/js";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";

18
src/panels/config/scene/ha-scene-editor.ts
View File

@ -28,12 +28,13 @@ import { navigate } from "../../../common/navigate";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/device/ha-device-picker";
import "../../../components/entity/ha-entities-picker";
import "../../../components/ha-area-picker";
import "../../../components/ha-card";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-picker";
import "../../../components/ha-area-picker";
import "../../../components/ha-svg-icon";
import "../../../components/ha-textfield";
import {
computeDeviceName,
DeviceRegistryEntry,
@ -288,14 +289,14 @@ export class HaSceneEditor extends SubscribeMixin(
</div>
<ha-card>
<div class="card-content">
<paper-input
<ha-textfield
.value=${this._config.name}
.name=${"name"}
@value-changed=${this._valueChanged}
label=${this.hass.localize(
@change=${this._valueChanged}
.label=${this.hass.localize(
"ui.panel.config.scene.editor.name"
)}
></paper-input>
></ha-textfield>
<ha-icon-picker
.label=${this.hass.localize(
"ui.panel.config.scene.editor.icon"
@ -701,14 +702,14 @@ export class HaSceneEditor extends SubscribeMixin(
this._dirty = true;
}
private _valueChanged(ev: CustomEvent) {
private _valueChanged(ev: Event) {
ev.stopPropagation();
const target = ev.target as any;
const name = target.name;
if (!name) {
return;
}
let newVal = ev.detail.value;
let newVal = (ev as CustomEvent).detail?.value ?? target.value;
if (target.type === "number") {
newVal = Number(newVal);
}
@ -990,6 +991,9 @@ export class HaSceneEditor extends SubscribeMixin(
display: block;
margin-top: 8px;
}
ha-textfield {
display: block;
}
`,
];
}

11
src/panels/config/script/blueprint-script-editor.ts
View File

@ -1,4 +1,3 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
@ -6,6 +5,7 @@ import "../../../components/ha-blueprint-picker";
import "../../../components/ha-card";
import "../../../components/ha-circular-progress";
import "../../../components/ha-markdown";
import "../../../components/ha-textfield";
import "../../../components/ha-selector/ha-selector";
import "../../../components/ha-settings-row";
@ -101,15 +101,14 @@ export class HaBlueprintScriptEditor extends LitElement {
value?.default}
@value-changed=${this._inputChanged}
></ha-selector>`
: html`<paper-input
: html`<ha-textfield
.key=${key}
required
.value=${(this.config.use_blueprint.input &&
this.config.use_blueprint.input[key]) ??
value?.default}
@value-changed=${this._inputChanged}
no-label-float
></paper-input>`}
@change=${this._inputChanged}
></ha-textfield>`}
</ha-settings-row>`
)
: html`<p class="padding">
@ -145,7 +144,7 @@ export class HaBlueprintScriptEditor extends LitElement {
ev.stopPropagation();
const target = ev.target as any;
const key = target.key;
const value = ev.detail.value;
const value = ev.detail?.value ?? target.value;
if (
(this.config.use_blueprint.input &&
this.config.use_blueprint.input[key] === value) ||

61
src/panels/profile/ha-change-password-card.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import {
css,
CSSResultGroup,
@ -11,8 +10,10 @@ import {
import { customElement, property, state } from "lit/decorators";
import "../../components/ha-card";
import "../../components/ha-circular-progress";
import "../../components/ha-textfield";
import { haStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import "../../components/ha-alert";
@customElement("ha-change-password-card")
class HaChangePasswordCard extends LitElement {
@ -24,11 +25,11 @@ class HaChangePasswordCard extends LitElement {
@state() private _errorMsg?: string;
@state() private _currentPassword?: string;
@state() private _currentPassword = "";
@state() private _password?: string;
@state() private _password = "";
@state() private _passwordConfirm?: string;
@state() private _passwordConfirm = "";
protected render(): TemplateResult {
return html`
@ -40,46 +41,48 @@ class HaChangePasswordCard extends LitElement {
>
<div class="card-content">
${this._errorMsg
? html` <div class="error">${this._errorMsg}</div> `
? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
: ""}
${this._statusMsg
? html` <div class="status">${this._statusMsg}</div> `
? html`<ha-alert alert-type="success"
>${this._statusMsg}</ha-alert
>`
: ""}
<paper-input
<ha-textfield
id="currentPassword"
.label=${this.hass.localize(
"ui.panel.profile.change_password.current_password"
)}
type="password"
.value=${this._currentPassword}
@value-changed=${this._currentPasswordChanged}
@input=${this._currentPasswordChanged}
required
></paper-input>
></ha-textfield>
${this._currentPassword
? html` <paper-input
? html`<ha-textfield
.label=${this.hass.localize(
"ui.panel.profile.change_password.new_password"
)}
name="password"
type="password"
.value=${this._password}
@value-changed=${this._newPasswordChanged}
@change=${this._newPasswordChanged}
required
auto-validate
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.label=${this.hass.localize(
"ui.panel.profile.change_password.confirm_new_password"
)}
name="passwordConfirm"
type="password"
.value=${this._passwordConfirm}
@value-changed=${this._newPasswordConfirmChanged}
@input=${this._newPasswordConfirmChanged}
required
auto-validate
></paper-input>`
></ha-textfield>`
: ""}
</div>
@ -101,16 +104,16 @@ class HaChangePasswordCard extends LitElement {
`;
}
private _currentPasswordChanged(ev: CustomEvent) {
this._currentPassword = ev.detail.value;
private _currentPasswordChanged(ev) {
this._currentPassword = ev.target.value;
}
private _newPasswordChanged(ev: CustomEvent) {
this._password = ev.detail.value;
private _newPasswordChanged(ev) {
this._password = ev.target.value;
}
private _newPasswordConfirmChanged(ev: CustomEvent) {
this._passwordConfirm = ev.detail.value;
private _newPasswordConfirmChanged(ev) {
this._passwordConfirm = ev.target.value;
}
protected firstUpdated(changedProps: PropertyValues) {
@ -162,23 +165,21 @@ class HaChangePasswordCard extends LitElement {
this._statusMsg = this.hass.localize(
"ui.panel.profile.change_password.success"
);
this._currentPassword = undefined;
this._password = undefined;
this._passwordConfirm = undefined;
this._currentPassword = "";
this._password = "";
this._passwordConfirm = "";
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
.error {
color: var(--error-color);
}
.status {
color: var(--primary-color);
ha-textfield {
margin-top: 8px;
display: block;
}
#currentPassword {
margin-top: -8px;
margin-top: 0;
}
`,
];

21
src/panels/profile/ha-pick-theme-row.ts
View File

@ -1,5 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@ -14,14 +15,13 @@ import "../../components/ha-formfield";
import "../../components/ha-radio";
import type { HaRadio } from "../../components/ha-radio";
import "../../components/ha-settings-row";
import "../../components/ha-textfield";
import {
DEFAULT_PRIMARY_COLOR,
DEFAULT_ACCENT_COLOR,
DEFAULT_PRIMARY_COLOR,
} from "../../resources/ha-style";
import { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
@customElement("ha-pick-theme-row")
export class HaPickThemeRow extends LitElement {
@ -115,8 +115,8 @@ export class HaPickThemeRow extends LitElement {
</ha-radio>
</ha-formfield>
${curTheme === "default"
? html` <div class="color-pickers">
<paper-input
? html`<div class="color-pickers">
<ha-textfield
.value=${themeSettings?.primaryColor ||
DEFAULT_PRIMARY_COLOR}
type="color"
@ -125,8 +125,8 @@ export class HaPickThemeRow extends LitElement {
)}
.name=${"primaryColor"}
@change=${this._handleColorChange}
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
type="color"
.label=${this.hass.localize(
@ -134,7 +134,7 @@ export class HaPickThemeRow extends LitElement {
)}
.name=${"accentColor"}
@change=${this._handleColorChange}
></paper-input>
></ha-textfield>
${themeSettings?.primaryColor || themeSettings?.accentColor
? html` <mwc-button @click=${this._resetColors}>
${this.hass.localize("ui.panel.profile.themes.reset")}
@ -228,7 +228,8 @@ export class HaPickThemeRow extends LitElement {
align-items: center;
flex-grow: 1;
}
paper-input {
ha-textfield {
--text-field-padding: 8px;
min-width: 75px;
flex-grow: 1;
margin: 0 4px;