mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +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-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",
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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";
|
||||
|
@ -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);
|
||||
|
@ -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) {
|
||||
|
@ -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
15
yarn.lock
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user