mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Paper input migrations (#11766)
This commit is contained in:
parent
e6d1e86c64
commit
b1f369a355
@ -1,12 +1,11 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import "@polymer/paper-input/paper-input";
|
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { classMap } from "lit/directives/class-map";
|
import { classMap } from "lit/directives/class-map";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import "../../components/ha-dialog";
|
import "../../components/ha-dialog";
|
||||||
import "../../components/ha-switch";
|
import "../../components/ha-switch";
|
||||||
import { PolymerChangedEvent } from "../../polymer-types";
|
import "../../components/ha-textfield";
|
||||||
import { haStyleDialog } from "../../resources/styles";
|
import { haStyleDialog } from "../../resources/styles";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import { DialogBoxParams } from "./show-dialog-box";
|
import { DialogBoxParams } from "./show-dialog-box";
|
||||||
@ -71,18 +70,18 @@ class DialogBox extends LitElement {
|
|||||||
: ""}
|
: ""}
|
||||||
${this._params.prompt
|
${this._params.prompt
|
||||||
? html`
|
? html`
|
||||||
<paper-input
|
<ha-textfield
|
||||||
dialogInitialFocus
|
dialogInitialFocus
|
||||||
.value=${this._value}
|
.value=${this._value}
|
||||||
@keyup=${this._handleKeyUp}
|
@keyup=${this._handleKeyUp}
|
||||||
@value-changed=${this._valueChanged}
|
@change=${this._valueChanged}
|
||||||
.label=${this._params.inputLabel
|
.label=${this._params.inputLabel
|
||||||
? this._params.inputLabel
|
? this._params.inputLabel
|
||||||
: ""}
|
: ""}
|
||||||
.type=${this._params.inputType
|
.type=${this._params.inputType
|
||||||
? this._params.inputType
|
? this._params.inputType
|
||||||
: "text"}
|
: "text"}
|
||||||
></paper-input>
|
></ha-textfield>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
@ -107,8 +106,8 @@ class DialogBox extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _valueChanged(ev: PolymerChangedEvent<string>) {
|
private _valueChanged(ev) {
|
||||||
this._value = ev.detail.value;
|
this._value = ev.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _dismiss(): void {
|
private _dismiss(): void {
|
||||||
|
@ -10,7 +10,6 @@ import {
|
|||||||
mdiVolumeOff,
|
mdiVolumeOff,
|
||||||
mdiVolumePlus,
|
mdiVolumePlus,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||||
|
@ -28,12 +28,13 @@ import { navigate } from "../../../common/navigate";
|
|||||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||||
import "../../../components/device/ha-device-picker";
|
import "../../../components/device/ha-device-picker";
|
||||||
import "../../../components/entity/ha-entities-picker";
|
import "../../../components/entity/ha-entities-picker";
|
||||||
|
import "../../../components/ha-area-picker";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-fab";
|
import "../../../components/ha-fab";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-icon-picker";
|
import "../../../components/ha-icon-picker";
|
||||||
import "../../../components/ha-area-picker";
|
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-textfield";
|
||||||
import {
|
import {
|
||||||
computeDeviceName,
|
computeDeviceName,
|
||||||
DeviceRegistryEntry,
|
DeviceRegistryEntry,
|
||||||
@ -288,14 +289,14 @@ export class HaSceneEditor extends SubscribeMixin(
|
|||||||
</div>
|
</div>
|
||||||
<ha-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<paper-input
|
<ha-textfield
|
||||||
.value=${this._config.name}
|
.value=${this._config.name}
|
||||||
.name=${"name"}
|
.name=${"name"}
|
||||||
@value-changed=${this._valueChanged}
|
@change=${this._valueChanged}
|
||||||
label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
"ui.panel.config.scene.editor.name"
|
"ui.panel.config.scene.editor.name"
|
||||||
)}
|
)}
|
||||||
></paper-input>
|
></ha-textfield>
|
||||||
<ha-icon-picker
|
<ha-icon-picker
|
||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
"ui.panel.config.scene.editor.icon"
|
"ui.panel.config.scene.editor.icon"
|
||||||
@ -701,14 +702,14 @@ export class HaSceneEditor extends SubscribeMixin(
|
|||||||
this._dirty = true;
|
this._dirty = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _valueChanged(ev: CustomEvent) {
|
private _valueChanged(ev: Event) {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
const target = ev.target as any;
|
const target = ev.target as any;
|
||||||
const name = target.name;
|
const name = target.name;
|
||||||
if (!name) {
|
if (!name) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let newVal = ev.detail.value;
|
let newVal = (ev as CustomEvent).detail?.value ?? target.value;
|
||||||
if (target.type === "number") {
|
if (target.type === "number") {
|
||||||
newVal = Number(newVal);
|
newVal = Number(newVal);
|
||||||
}
|
}
|
||||||
@ -990,6 +991,9 @@ export class HaSceneEditor extends SubscribeMixin(
|
|||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
ha-textfield {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@polymer/paper-input/paper-input";
|
|
||||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
@ -6,6 +5,7 @@ import "../../../components/ha-blueprint-picker";
|
|||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-circular-progress";
|
import "../../../components/ha-circular-progress";
|
||||||
import "../../../components/ha-markdown";
|
import "../../../components/ha-markdown";
|
||||||
|
import "../../../components/ha-textfield";
|
||||||
import "../../../components/ha-selector/ha-selector";
|
import "../../../components/ha-selector/ha-selector";
|
||||||
import "../../../components/ha-settings-row";
|
import "../../../components/ha-settings-row";
|
||||||
|
|
||||||
@ -101,15 +101,14 @@ export class HaBlueprintScriptEditor extends LitElement {
|
|||||||
value?.default}
|
value?.default}
|
||||||
@value-changed=${this._inputChanged}
|
@value-changed=${this._inputChanged}
|
||||||
></ha-selector>`
|
></ha-selector>`
|
||||||
: html`<paper-input
|
: html`<ha-textfield
|
||||||
.key=${key}
|
.key=${key}
|
||||||
required
|
required
|
||||||
.value=${(this.config.use_blueprint.input &&
|
.value=${(this.config.use_blueprint.input &&
|
||||||
this.config.use_blueprint.input[key]) ??
|
this.config.use_blueprint.input[key]) ??
|
||||||
value?.default}
|
value?.default}
|
||||||
@value-changed=${this._inputChanged}
|
@change=${this._inputChanged}
|
||||||
no-label-float
|
></ha-textfield>`}
|
||||||
></paper-input>`}
|
|
||||||
</ha-settings-row>`
|
</ha-settings-row>`
|
||||||
)
|
)
|
||||||
: html`<p class="padding">
|
: html`<p class="padding">
|
||||||
@ -145,7 +144,7 @@ export class HaBlueprintScriptEditor extends LitElement {
|
|||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
const target = ev.target as any;
|
const target = ev.target as any;
|
||||||
const key = target.key;
|
const key = target.key;
|
||||||
const value = ev.detail.value;
|
const value = ev.detail?.value ?? target.value;
|
||||||
if (
|
if (
|
||||||
(this.config.use_blueprint.input &&
|
(this.config.use_blueprint.input &&
|
||||||
this.config.use_blueprint.input[key] === value) ||
|
this.config.use_blueprint.input[key] === value) ||
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-input/paper-input";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResultGroup,
|
CSSResultGroup,
|
||||||
@ -11,8 +10,10 @@ import {
|
|||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import "../../components/ha-card";
|
import "../../components/ha-card";
|
||||||
import "../../components/ha-circular-progress";
|
import "../../components/ha-circular-progress";
|
||||||
|
import "../../components/ha-textfield";
|
||||||
import { haStyle } from "../../resources/styles";
|
import { haStyle } from "../../resources/styles";
|
||||||
import type { HomeAssistant } from "../../types";
|
import type { HomeAssistant } from "../../types";
|
||||||
|
import "../../components/ha-alert";
|
||||||
|
|
||||||
@customElement("ha-change-password-card")
|
@customElement("ha-change-password-card")
|
||||||
class HaChangePasswordCard extends LitElement {
|
class HaChangePasswordCard extends LitElement {
|
||||||
@ -24,11 +25,11 @@ class HaChangePasswordCard extends LitElement {
|
|||||||
|
|
||||||
@state() private _errorMsg?: string;
|
@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 {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
@ -40,46 +41,48 @@ class HaChangePasswordCard extends LitElement {
|
|||||||
>
|
>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
${this._errorMsg
|
${this._errorMsg
|
||||||
? html` <div class="error">${this._errorMsg}</div> `
|
? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
|
||||||
: ""}
|
: ""}
|
||||||
${this._statusMsg
|
${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"
|
id="currentPassword"
|
||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
"ui.panel.profile.change_password.current_password"
|
"ui.panel.profile.change_password.current_password"
|
||||||
)}
|
)}
|
||||||
type="password"
|
type="password"
|
||||||
.value=${this._currentPassword}
|
.value=${this._currentPassword}
|
||||||
@value-changed=${this._currentPasswordChanged}
|
@input=${this._currentPasswordChanged}
|
||||||
required
|
required
|
||||||
></paper-input>
|
></ha-textfield>
|
||||||
|
|
||||||
${this._currentPassword
|
${this._currentPassword
|
||||||
? html` <paper-input
|
? html`<ha-textfield
|
||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
"ui.panel.profile.change_password.new_password"
|
"ui.panel.profile.change_password.new_password"
|
||||||
)}
|
)}
|
||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
.value=${this._password}
|
.value=${this._password}
|
||||||
@value-changed=${this._newPasswordChanged}
|
@change=${this._newPasswordChanged}
|
||||||
required
|
required
|
||||||
auto-validate
|
auto-validate
|
||||||
></paper-input>
|
></ha-textfield>
|
||||||
<paper-input
|
<ha-textfield
|
||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
"ui.panel.profile.change_password.confirm_new_password"
|
"ui.panel.profile.change_password.confirm_new_password"
|
||||||
)}
|
)}
|
||||||
name="passwordConfirm"
|
name="passwordConfirm"
|
||||||
type="password"
|
type="password"
|
||||||
.value=${this._passwordConfirm}
|
.value=${this._passwordConfirm}
|
||||||
@value-changed=${this._newPasswordConfirmChanged}
|
@input=${this._newPasswordConfirmChanged}
|
||||||
required
|
required
|
||||||
auto-validate
|
auto-validate
|
||||||
></paper-input>`
|
></ha-textfield>`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -101,16 +104,16 @@ class HaChangePasswordCard extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _currentPasswordChanged(ev: CustomEvent) {
|
private _currentPasswordChanged(ev) {
|
||||||
this._currentPassword = ev.detail.value;
|
this._currentPassword = ev.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _newPasswordChanged(ev: CustomEvent) {
|
private _newPasswordChanged(ev) {
|
||||||
this._password = ev.detail.value;
|
this._password = ev.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _newPasswordConfirmChanged(ev: CustomEvent) {
|
private _newPasswordConfirmChanged(ev) {
|
||||||
this._passwordConfirm = ev.detail.value;
|
this._passwordConfirm = ev.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected firstUpdated(changedProps: PropertyValues) {
|
protected firstUpdated(changedProps: PropertyValues) {
|
||||||
@ -162,23 +165,21 @@ class HaChangePasswordCard extends LitElement {
|
|||||||
this._statusMsg = this.hass.localize(
|
this._statusMsg = this.hass.localize(
|
||||||
"ui.panel.profile.change_password.success"
|
"ui.panel.profile.change_password.success"
|
||||||
);
|
);
|
||||||
this._currentPassword = undefined;
|
this._currentPassword = "";
|
||||||
this._password = undefined;
|
this._password = "";
|
||||||
this._passwordConfirm = undefined;
|
this._passwordConfirm = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
css`
|
css`
|
||||||
.error {
|
ha-textfield {
|
||||||
color: var(--error-color);
|
margin-top: 8px;
|
||||||
}
|
display: block;
|
||||||
.status {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
}
|
||||||
#currentPassword {
|
#currentPassword {
|
||||||
margin-top: -8px;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
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 {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResultGroup,
|
CSSResultGroup,
|
||||||
@ -14,14 +15,13 @@ import "../../components/ha-formfield";
|
|||||||
import "../../components/ha-radio";
|
import "../../components/ha-radio";
|
||||||
import type { HaRadio } from "../../components/ha-radio";
|
import type { HaRadio } from "../../components/ha-radio";
|
||||||
import "../../components/ha-settings-row";
|
import "../../components/ha-settings-row";
|
||||||
|
import "../../components/ha-textfield";
|
||||||
import {
|
import {
|
||||||
DEFAULT_PRIMARY_COLOR,
|
|
||||||
DEFAULT_ACCENT_COLOR,
|
DEFAULT_ACCENT_COLOR,
|
||||||
|
DEFAULT_PRIMARY_COLOR,
|
||||||
} from "../../resources/ha-style";
|
} from "../../resources/ha-style";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import { documentationUrl } from "../../util/documentation-url";
|
import { documentationUrl } from "../../util/documentation-url";
|
||||||
import "@material/mwc-select/mwc-select";
|
|
||||||
import "@material/mwc-list/mwc-list-item";
|
|
||||||
|
|
||||||
@customElement("ha-pick-theme-row")
|
@customElement("ha-pick-theme-row")
|
||||||
export class HaPickThemeRow extends LitElement {
|
export class HaPickThemeRow extends LitElement {
|
||||||
@ -115,8 +115,8 @@ export class HaPickThemeRow extends LitElement {
|
|||||||
</ha-radio>
|
</ha-radio>
|
||||||
</ha-formfield>
|
</ha-formfield>
|
||||||
${curTheme === "default"
|
${curTheme === "default"
|
||||||
? html` <div class="color-pickers">
|
? html`<div class="color-pickers">
|
||||||
<paper-input
|
<ha-textfield
|
||||||
.value=${themeSettings?.primaryColor ||
|
.value=${themeSettings?.primaryColor ||
|
||||||
DEFAULT_PRIMARY_COLOR}
|
DEFAULT_PRIMARY_COLOR}
|
||||||
type="color"
|
type="color"
|
||||||
@ -125,8 +125,8 @@ export class HaPickThemeRow extends LitElement {
|
|||||||
)}
|
)}
|
||||||
.name=${"primaryColor"}
|
.name=${"primaryColor"}
|
||||||
@change=${this._handleColorChange}
|
@change=${this._handleColorChange}
|
||||||
></paper-input>
|
></ha-textfield>
|
||||||
<paper-input
|
<ha-textfield
|
||||||
.value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
|
.value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
|
||||||
type="color"
|
type="color"
|
||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
@ -134,7 +134,7 @@ export class HaPickThemeRow extends LitElement {
|
|||||||
)}
|
)}
|
||||||
.name=${"accentColor"}
|
.name=${"accentColor"}
|
||||||
@change=${this._handleColorChange}
|
@change=${this._handleColorChange}
|
||||||
></paper-input>
|
></ha-textfield>
|
||||||
${themeSettings?.primaryColor || themeSettings?.accentColor
|
${themeSettings?.primaryColor || themeSettings?.accentColor
|
||||||
? html` <mwc-button @click=${this._resetColors}>
|
? html` <mwc-button @click=${this._resetColors}>
|
||||||
${this.hass.localize("ui.panel.profile.themes.reset")}
|
${this.hass.localize("ui.panel.profile.themes.reset")}
|
||||||
@ -228,7 +228,8 @@ export class HaPickThemeRow extends LitElement {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
paper-input {
|
ha-textfield {
|
||||||
|
--text-field-padding: 8px;
|
||||||
min-width: 75px;
|
min-width: 75px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user