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

Migrate all paper checkbox elements to mwc (#10329)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

2
src/components/ha-form/ha-form-boolean.ts
View File

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

21
src/dialogs/more-info/controls/more-info-camera.ts
View File

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

18
src/panels/config/customize/types/ha-customize-boolean.js
View File

@ -1,14 +1,20 @@
import "@polymer/paper-checkbox/paper-checkbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../../components/ha-checkbox";
import "../../../../components/ha-formfield";
class HaCustomizeBoolean extends PolymerElement {
static get template() {
return html`
<paper-checkbox disabled="[[item.secondary]]" checked="{{item.value}}">
[[item.description]]
</paper-checkbox>
<ha-formfield label="[[item.description]]">
<ha-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);

1
src/panels/config/entities/ha-config-entities.ts
View File

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

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

21
src/panels/developer-tools/state/developer-tools-state.js
View File

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

24
src/panels/lovelace/cards/hui-shopping-list-card.ts
View File

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

15
yarn.lock
View File

@ -3246,20 +3246,6 @@ __metadata:
languageName: node
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":
version: 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-overlay-behavior": ^3.0.3
"@polymer/iron-resizable-behavior": ^3.0.1
"@polymer/paper-checkbox": ^3.1.0
"@polymer/paper-dialog": ^3.0.1
"@polymer/paper-dialog-behavior": ^3.0.1
"@polymer/paper-dialog-scrollable": ^3.0.1