Migrate all paper checkbox elements to mwc (#10329)

This commit is contained in:
Bram Kragten 2021-10-19 22:31:24 +02:00 committed by GitHub
parent 62d3f74513
commit e47a5effe6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 73 additions and 57 deletions

View File

@ -75,7 +75,6 @@
"@polymer/iron-input": "^3.0.1", "@polymer/iron-input": "^3.0.1",
"@polymer/iron-overlay-behavior": "^3.0.3", "@polymer/iron-overlay-behavior": "^3.0.3",
"@polymer/iron-resizable-behavior": "^3.0.1", "@polymer/iron-resizable-behavior": "^3.0.1",
"@polymer/paper-checkbox": "^3.1.0",
"@polymer/paper-dialog": "^3.0.1", "@polymer/paper-dialog": "^3.0.1",
"@polymer/paper-dialog-behavior": "^3.0.1", "@polymer/paper-dialog-behavior": "^3.0.1",
"@polymer/paper-dialog-scrollable": "^3.0.1", "@polymer/paper-dialog-scrollable": "^3.0.1",

View File

@ -20,7 +20,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
@query("paper-checkbox", true) private _input?: HTMLElement; @query("ha-checkbox", true) private _input?: HTMLElement;
public focus() { public focus() {
if (this._input) { if (this._input) {

View File

@ -1,5 +1,3 @@
import "@polymer/paper-checkbox/paper-checkbox";
import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -12,6 +10,7 @@ import { property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-camera-stream"; import "../../../components/ha-camera-stream";
import { HaCheckbox } from "../../../components/ha-checkbox";
import { import {
CameraEntity, CameraEntity,
CameraPreferences, CameraPreferences,
@ -25,7 +24,7 @@ import type { HomeAssistant } from "../../../types";
class MoreInfoCamera extends LitElement { class MoreInfoCamera extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass?: HomeAssistant;
@property() public stateObj?: CameraEntity; @property({ attribute: false }) public stateObj?: CameraEntity;
@state() private _cameraPrefs?: CameraPreferences; @state() private _cameraPrefs?: CameraPreferences;
@ -55,12 +54,14 @@ class MoreInfoCamera extends LitElement {
></ha-camera-stream> ></ha-camera-stream>
${this._cameraPrefs ${this._cameraPrefs
? html` ? html`
<paper-checkbox <ha-formfield>
.checked=${this._cameraPrefs.preload_stream} <ha-checkbox
@change=${this._handleCheckboxChanged} .checked=${this._cameraPrefs.preload_stream}
> @change=${this._handleCheckboxChanged}
Preload stream >
</paper-checkbox> Preload stream
</ha-checkbox>
</ha-formfield>
` `
: undefined} : undefined}
`; `;
@ -101,7 +102,7 @@ class MoreInfoCamera extends LitElement {
} }
private async _handleCheckboxChanged(ev) { private async _handleCheckboxChanged(ev) {
const checkbox = ev.currentTarget as PaperCheckboxElement; const checkbox = ev.currentTarget as HaCheckbox;
try { try {
this._cameraPrefs = await updateCameraPrefs( this._cameraPrefs = await updateCameraPrefs(
this.hass!, this.hass!,
@ -122,7 +123,7 @@ class MoreInfoCamera extends LitElement {
display: block; display: block;
position: relative; position: relative;
} }
paper-checkbox { ha-checkbox {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -135,3 +136,9 @@ class MoreInfoCamera extends LitElement {
} }
customElements.define("more-info-camera", MoreInfoCamera); customElements.define("more-info-camera", MoreInfoCamera);
declare global {
interface HTMLElementTagNameMap {
"more-info-camera": MoreInfoCamera;
}
}

View File

@ -1,14 +1,20 @@
import "@polymer/paper-checkbox/paper-checkbox";
import { html } from "@polymer/polymer/lib/utils/html-tag"; import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */ /* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../../components/ha-checkbox";
import "../../../../components/ha-formfield";
class HaCustomizeBoolean extends PolymerElement { class HaCustomizeBoolean extends PolymerElement {
static get template() { static get template() {
return html` return html`
<paper-checkbox disabled="[[item.secondary]]" checked="{{item.value}}"> <ha-formfield label="[[item.description]]">
[[item.description]] <ha-checkbox
</paper-checkbox> disabled="[[item.secondary]]"
checked="[[item.value]]"
on-change="checkedChanged"
>
</ha-checkbox
></ha-formfield>
`; `;
} }
@ -20,5 +26,9 @@ class HaCustomizeBoolean extends PolymerElement {
}, },
}; };
} }
checkedChanged(ev) {
this.item.value = ev.target.checked;
}
} }
customElements.define("ha-customize-boolean", HaCustomizeBoolean); customElements.define("ha-customize-boolean", HaCustomizeBoolean);

View File

@ -7,7 +7,6 @@ import {
mdiPlus, mdiPlus,
mdiUndo, mdiUndo,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-listbox/paper-listbox";

View File

@ -3,7 +3,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-listbox/paper-listbox";
import { html } from "@polymer/polymer/lib/utils/html-tag"; import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */ /* eslint-plugin-disable lit */
@ -308,12 +307,16 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
> >
</div> </div>
<div class="form-group"> <div class="form-group">
<paper-checkbox <ha-formfield
checked="{{entityIgnored}}" label="[[localize('ui.panel.config.zwave.node_management.exclude_entity')]]"
class="form-control"
> >
[[localize('ui.panel.config.zwave.node_management.exclude_entity')]] <ha-checkbox
</paper-checkbox> checked="[[entityIgnored]]"
class="form-control"
on-change="entityIgnoredChanged"
>
</ha-checkbox>
</ha-formfield>
<paper-input <paper-input
disabled="{{entityIgnored}}" disabled="{{entityIgnored}}"
label="[[localize('ui.panel.config.zwave.node_management.pooling_intensity')]]" label="[[localize('ui.panel.config.zwave.node_management.pooling_intensity')]]"
@ -706,6 +709,10 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
_backTapped() { _backTapped() {
history.back(); history.back();
} }
entityIgnoredChanged(ev) {
this.entityIgnored = ev.target.checked;
}
} }
customElements.define("ha-config-zwave", HaConfigZwave); customElements.define("ha-config-zwave", HaConfigZwave);

View File

@ -4,7 +4,6 @@ import {
mdiInformationOutline, mdiInformationOutline,
mdiRefresh, mdiRefresh,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag"; import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */ /* eslint-plugin-disable lit */
@ -18,6 +17,7 @@ import "../../../components/entity/ha-entity-picker";
import "../../../components/ha-code-editor"; import "../../../components/ha-code-editor";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-checkbox";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { EventsMixin } from "../../../mixins/events-mixin"; import { EventsMixin } from "../../../mixins/events-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin";
@ -68,6 +68,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
); );
} }
th.attributes {
position: relative;
}
th.attributes ha-checkbox {
position: absolute;
bottom: -8px;
}
:host([rtl]) .entities th { :host([rtl]) .entities th {
text-align: right; text-align: right;
} }
@ -197,12 +206,13 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
<tr> <tr>
<th>[[localize('ui.panel.developer-tools.tabs.states.entity')]]</th> <th>[[localize('ui.panel.developer-tools.tabs.states.entity')]]</th>
<th>[[localize('ui.panel.developer-tools.tabs.states.state')]]</th> <th>[[localize('ui.panel.developer-tools.tabs.states.state')]]</th>
<th hidden$="[[narrow]]"> <th hidden$="[[narrow]]" class="attributes">
[[localize('ui.panel.developer-tools.tabs.states.attributes')]] [[localize('ui.panel.developer-tools.tabs.states.attributes')]]
<paper-checkbox <ha-checkbox
checked="{{_showAttributes}}" checked="[[_showAttributes]]"
on-change="saveAttributeCheckboxState" on-change="saveAttributeCheckboxState"
></paper-checkbox> reducedTouchTarget
></ha-checkbox>
</th> </th>
</tr> </tr>
<tr> <tr>
@ -545,6 +555,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
} }
saveAttributeCheckboxState(ev) { saveAttributeCheckboxState(ev) {
this._showAttributes = ev.target.checked;
try { try {
localStorage.setItem("devToolsShowAttributes", ev.target.checked); localStorage.setItem("devToolsShowAttributes", ev.target.checked);
} catch (e) { } catch (e) {

View File

@ -1,5 +1,4 @@
import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js"; import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { import {
@ -17,6 +16,7 @@ import { repeat } from "lit/directives/repeat";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-icon"; import "../../../components/ha-icon";
import "../../../components/ha-checkbox";
import { import {
addItem, addItem,
clearItems, clearItems,
@ -178,12 +178,12 @@ class HuiShoppingListCard
(item) => (item) =>
html` html`
<div class="editRow"> <div class="editRow">
<paper-checkbox <ha-checkbox
tabindex="0" tabindex="0"
?checked=${item.complete} .checked=${item.complete}
.itemId=${item.id} .itemId=${item.id}
@click=${this._completeItem} @change=${this._completeItem}
></paper-checkbox> ></ha-checkbox>
<paper-input <paper-input
no-label-float no-label-float
.value=${item.name} .value=${item.name}
@ -207,12 +207,12 @@ class HuiShoppingListCard
(item) => (item) =>
html` html`
<div class="editRow" item-id=${item.id}> <div class="editRow" item-id=${item.id}>
<paper-checkbox <ha-checkbox
tabindex="0" tabindex="0"
?checked=${item.complete} .checked=${item.complete}
.itemId=${item.id} .itemId=${item.id}
@click=${this._completeItem} @change=${this._completeItem}
></paper-checkbox> ></ha-checkbox>
<paper-input <paper-input
no-label-float no-label-float
.value=${item.name} .value=${item.name}
@ -381,10 +381,8 @@ class HuiShoppingListCard
cursor: pointer; cursor: pointer;
} }
paper-checkbox { ha-checkbox {
padding-left: 4px; margin-left: -12px;
padding-right: 20px;
--paper-checkbox-label-spacing: 0px;
} }
paper-input { paper-input {

View File

@ -3246,20 +3246,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@polymer/paper-checkbox@npm:^3.1.0":
version: 3.1.0
resolution: "@polymer/paper-checkbox@npm:3.1.0"
dependencies:
"@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
"@polymer/iron-checked-element-behavior": ^3.0.0-pre.26
"@polymer/paper-behaviors": ^3.0.0-pre.27
"@polymer/paper-ripple": ^3.0.0-pre.26
"@polymer/paper-styles": ^3.0.0-pre.26
"@polymer/polymer": ^3.0.0
checksum: 95c0341387adf2033b7e1423a87230cadfae6e9459eb555c75e937c9b7886ea10e7b5a4033b2401883a9336531c4c47b61dabbca49d556dee81fa73d5faafbeb
languageName: node
linkType: hard
"@polymer/paper-dialog-behavior@npm:^3.0.0-pre.26, @polymer/paper-dialog-behavior@npm:^3.0.1": "@polymer/paper-dialog-behavior@npm:^3.0.0-pre.26, @polymer/paper-dialog-behavior@npm:^3.0.1":
version: 3.0.1 version: 3.0.1
resolution: "@polymer/paper-dialog-behavior@npm:3.0.1" resolution: "@polymer/paper-dialog-behavior@npm:3.0.1"
@ -9109,7 +9095,6 @@ fsevents@^1.2.7:
"@polymer/iron-input": ^3.0.1 "@polymer/iron-input": ^3.0.1
"@polymer/iron-overlay-behavior": ^3.0.3 "@polymer/iron-overlay-behavior": ^3.0.3
"@polymer/iron-resizable-behavior": ^3.0.1 "@polymer/iron-resizable-behavior": ^3.0.1
"@polymer/paper-checkbox": ^3.1.0
"@polymer/paper-dialog": ^3.0.1 "@polymer/paper-dialog": ^3.0.1
"@polymer/paper-dialog-behavior": ^3.0.1 "@polymer/paper-dialog-behavior": ^3.0.1
"@polymer/paper-dialog-scrollable": ^3.0.1 "@polymer/paper-dialog-scrollable": ^3.0.1