jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 02:06:42 +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 "@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 {

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

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

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 { 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;
}
`, `,
]; ];
} }

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 { 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) ||

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

@ -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;
} }
`, `,
]; ];

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

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