mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-11 19:36:35 +00:00
Migrate all paper checkbox elements to mwc (#10329)
This commit is contained in:
parent
62d3f74513
commit
e47a5effe6
@ -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",
|
||||||
|
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
<ha-checkbox
|
||||||
.checked=${this._cameraPrefs.preload_stream}
|
.checked=${this._cameraPrefs.preload_stream}
|
||||||
@change=${this._handleCheckboxChanged}
|
@change=${this._handleCheckboxChanged}
|
||||||
>
|
>
|
||||||
Preload stream
|
Preload stream
|
||||||
</paper-checkbox>
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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";
|
||||||
|
@ -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);
|
||||||
|
@ -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) {
|
||||||
|
@ -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 {
|
||||||
|
15
yarn.lock
15
yarn.lock
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user