github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Latest paper-dropdown -> mwc-select conversion (#11692)

This commit is contained in:
Bram Kragten 2022-02-15 16:11:43 +01:00 committed by GitHub
parent 26d4599ef4
commit ba63ab8b7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 126 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/src/entrypoint.ts
View File

@ -2,8 +2,3 @@ import "../../src/resources/ha-style";
import "../../src/resources/roboto";
import "../../src/resources/safari-14-attachshadow-patch";
import "./ha-demo";
/* polyfill for paper-dropdown */
setTimeout(() => {
import("web-animations-js/web-animations-next-lite.min");
}, 1000);

3
hassio/src/addon-view/config/hassio-addon-audio.ts
View File

@ -110,8 +110,7 @@ class HassioAddonAudio extends LitElement {
hassioStyle,
css`
:host,
ha-card,
paper-dropdown-menu {
ha-card {
display: block;
}
paper-item {

2
hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
View File

@ -156,7 +156,7 @@ class HassioDatadiskDialog extends LitElement {
haStyle,
haStyleDialog,
css`
paper-dropdown-menu {
mwc-select {
width: 100%;
}
ha-circular-progress {

6
src/entrypoints/authorize.ts
View File

@ -5,9 +5,3 @@ import "../resources/ha-style";
import "../resources/roboto";
import "../resources/safari-14-attachshadow-patch";
import "../resources/array.flat.polyfill";
/* polyfill for paper-dropdown */
setTimeout(
() => import("web-animations-js/web-animations-next-lite.min"),
2000
);

3
src/layouts/home-assistant.ts
View File

@ -78,8 +78,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
super.firstUpdated(changedProps);
this._initializeHass();
setTimeout(() => registerServiceWorker(this), 1000);
/* polyfill for paper-dropdown */
import("web-animations-js/web-animations-next-lite.min");
this.addEventListener("hass-suspend-when-hidden", (ev) => {
this._updateHass({ suspendWhenHidden: ev.detail.suspend });
storeState(this.hass!);

2
src/onboarding/onboarding-integrations.ts
View File

@ -140,8 +140,6 @@ class OnboardingIntegrations extends LitElement {
this._scanUSBDevices();
loadConfigFlowDialog();
this._loadConfigEntries();
/* polyfill for paper-dropdown */
import("web-animations-js/web-animations-next-lite.min");
}
private _createFlow() {

7
src/panels/config/integrations/integration-panels/zha/types.ts
View File

@ -1,11 +1,8 @@
import { Select } from "@material/mwc-select";
import { Cluster, ZHADevice } from "../../../../../data/zha";
export interface PickerTarget extends EventTarget {
selected: number;
}
export interface ItemSelectedEvent {
target?: PickerTarget;
target?: Select;
}
export interface ZHADeviceRemovedEvent {

56
src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
View File

@ -1,9 +1,8 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
@ -13,6 +12,7 @@ import {
TemplateResult,
} from "lit";
import { property, state } from "lit/decorators";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
@ -48,7 +48,7 @@ export class ZHAClusterAttributes extends LitElement {
@state() private _attributes: Attribute[] = [];
@state() private _selectedAttributeIndex = -1;
@state() private _selectedAttributeId?: number;
@state() private _attributeValue?: any = "";
@ -60,7 +60,7 @@ export class ZHAClusterAttributes extends LitElement {
protected updated(changedProperties: PropertyValues): void {
if (changedProperties.has("selectedCluster")) {
this._attributes = [];
this._selectedAttributeIndex = -1;
this._selectedAttributeId = undefined;
this._attributeValue = "";
this._fetchAttributesForCluster();
}
@ -92,29 +92,25 @@ export class ZHAClusterAttributes extends LitElement {
<ha-card class="content">
<div class="attribute-picker">
<paper-dropdown-menu
label=${this.hass!.localize(
<mwc-select
.label=${this.hass!.localize(
"ui.panel.config.zha.cluster_attributes.attributes_of_cluster"
)}
class="menu"
.value=${String(this._selectedAttributeId)}
@selected=${this._selectedAttributeChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox
slot="dropdown-content"
.selected=${this._selectedAttributeIndex}
@iron-select=${this._selectedAttributeChanged}
>
${this._attributes.map(
(entry) => html`
<paper-item
>${entry.name +
" (id: " +
formatAsPaddedHex(entry.id) +
")"}</paper-item
>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${this._attributes.map(
(entry) => html`
<mwc-list-item .value=${String(entry.id)}>
${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"}
</mwc-list-item>
`
)}
</mwc-select>
</div>
${this.showHelp
? html`
@ -125,7 +121,7 @@ export class ZHAClusterAttributes extends LitElement {
</div>
`
: ""}
${this._selectedAttributeIndex !== -1
${this._selectedAttributeId !== undefined
? this._renderAttributeInteractions()
: ""}
</ha-card>
@ -218,7 +214,7 @@ export class ZHAClusterAttributes extends LitElement {
endpoint_id: this.selectedCluster!.endpoint_id,
cluster_id: this.selectedCluster!.id,
cluster_type: this.selectedCluster!.type,
attribute: this._attributes[this._selectedAttributeIndex].id,
attribute: this._selectedAttributeId!,
manufacturer: this._manufacturerCodeOverride
? parseInt(this._manufacturerCodeOverride as string, 10)
: undefined,
@ -236,7 +232,7 @@ export class ZHAClusterAttributes extends LitElement {
endpoint_id: this.selectedCluster!.endpoint_id,
cluster_id: this.selectedCluster!.id,
cluster_type: this.selectedCluster!.type,
attribute: this._attributes[this._selectedAttributeIndex].id,
attribute: this._selectedAttributeId!,
value: this._attributeValue,
manufacturer: this._manufacturerCodeOverride
? parseInt(this._manufacturerCodeOverride as string, 10)
@ -266,7 +262,7 @@ export class ZHAClusterAttributes extends LitElement {
}
private _selectedAttributeChanged(event: ItemSelectedEvent): void {
this._selectedAttributeIndex = event.target!.selected;
this._selectedAttributeId = Number(event.target!.value);
this._attributeValue = "";
}
@ -274,6 +270,10 @@ export class ZHAClusterAttributes extends LitElement {
return [
haStyle,
css`
mwc-select {
margin-top: 16px;
}
.menu {
width: 100%;
}

65
src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
View File

@ -1,8 +1,7 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
@ -12,6 +11,7 @@ import {
TemplateResult,
} from "lit";
import { property, state } from "lit/decorators";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
@ -26,11 +26,7 @@ import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import "../../../ha-config-section";
import { formatAsPaddedHex } from "./functions";
import {
ChangeEvent,
IssueCommandServiceData,
ItemSelectedEvent,
} from "./types";
import { ChangeEvent, IssueCommandServiceData } from "./types";
export class ZHAClusterCommands extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
@ -45,7 +41,7 @@ export class ZHAClusterCommands extends LitElement {
@state() private _commands: Command[] = [];
@state() private _selectedCommandIndex = -1;
@state() private _selectedCommandId?: number;
@state() private _manufacturerCodeOverride?: number;
@ -55,7 +51,7 @@ export class ZHAClusterCommands extends LitElement {
protected updated(changedProperties: PropertyValues): void {
if (changedProperties.has("selectedCluster")) {
this._commands = [];
this._selectedCommandIndex = -1;
this._selectedCommandId = undefined;
this._fetchCommandsForCluster();
}
super.update(changedProperties);
@ -86,29 +82,25 @@ export class ZHAClusterCommands extends LitElement {
<ha-card class="content">
<div class="command-picker">
<paper-dropdown-menu
label=${this.hass!.localize(
<mwc-select
.label=${this.hass!.localize(
"ui.panel.config.zha.cluster_commands.commands_of_cluster"
)}
class="menu"
.value=${String(this._selectedCommandId)}
@selected=${this._selectedCommandChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox
slot="dropdown-content"
.selected=${this._selectedCommandIndex}
@iron-select=${this._selectedCommandChanged}
>
${this._commands.map(
(entry) => html`
<paper-item
>${entry.name +
" (id: " +
formatAsPaddedHex(entry.id) +
")"}</paper-item
>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${this._commands.map(
(entry) => html`
<mwc-list-item .value=${String(entry.id)}>
${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"}
</mwc-list-item>
`
)}
</mwc-select>
</div>
${this._showHelp
? html`
@ -119,7 +111,7 @@ export class ZHAClusterCommands extends LitElement {
</div>
`
: ""}
${this._selectedCommandIndex !== -1
${this._selectedCommandId !== undefined
? html`
<div class="input-text">
<paper-input
@ -187,8 +179,10 @@ export class ZHAClusterCommands extends LitElement {
endpoint_id: this.selectedCluster!.endpoint_id,
cluster_id: this.selectedCluster!.id,
cluster_type: this.selectedCluster!.type,
command: this._commands[this._selectedCommandIndex].id,
command_type: this._commands[this._selectedCommandIndex].type,
command: this._selectedCommandId!,
command_type: this._commands.find(
(command) => command.id === this._selectedCommandId
)!.type,
};
}
@ -202,8 +196,8 @@ export class ZHAClusterCommands extends LitElement {
this._showHelp = !this._showHelp;
}
private _selectedCommandChanged(event: ItemSelectedEvent): void {
this._selectedCommandIndex = event.target!.selected;
private _selectedCommandChanged(event): void {
this._selectedCommandId = Number(event.target.value);
this._issueClusterCommandServiceData =
this._computeIssueClusterCommandServiceData();
}
@ -212,6 +206,9 @@ export class ZHAClusterCommands extends LitElement {
return [
haStyle,
css`
mwc-select {
margin-top: 16px;
}
.menu {
width: 100%;
}

41
src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
@ -12,6 +11,7 @@ import {
} from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
@ -25,7 +25,6 @@ import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import "../../../ha-config-section";
import { computeClusterKey } from "./functions";
import { ItemSelectedEvent } from "./types";
declare global {
// for fire event
@ -79,24 +78,25 @@ export class ZHAClusters extends LitElement {
<ha-card class="content">
<div class="node-picker">
<paper-dropdown-menu
<mwc-select
.label=${this.hass!.localize(
"ui.panel.config.zha.common.clusters"
)}
class="menu"
.value=${String(this._selectedClusterIndex)}
@selected=${this._selectedClusterChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox
slot="dropdown-content"
.selected=${this._selectedClusterIndex}
@iron-select=${this._selectedClusterChanged}
>
${this._clusters.map(
(entry) => html`
<paper-item>${computeClusterKey(entry)}</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${this._clusters.map(
(entry, idx) => html`
<mwc-list-item .value=${String(idx)}
>${computeClusterKey(entry)}</mwc-list-item
>
`
)}
</mwc-select>
</div>
${this.showHelp
? html`
@ -122,8 +122,8 @@ export class ZHAClusters extends LitElement {
}
}
private _selectedClusterChanged(event: ItemSelectedEvent): void {
this._selectedClusterIndex = event.target!.selected;
private _selectedClusterChanged(event): void {
this._selectedClusterIndex = Number(event.target!.value);
fireEvent(this, "zha-cluster-selected", {
cluster: this._clusters[this._selectedClusterIndex],
});
@ -137,6 +137,9 @@ export class ZHAClusters extends LitElement {
return [
haStyle,
css`
mwc-select {
margin-top: 16px;
}
.menu {
width: 100%;
}

44
src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
View File

@ -1,8 +1,7 @@
import "@material/mwc-button/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import {
css,
CSSResultGroup,
@ -21,6 +20,7 @@ import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import "../../../ha-config-section";
import { ItemSelectedEvent } from "./types";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
@customElement("zha-device-binding-control")
export class ZHADeviceBindingControl extends LitElement {
@ -62,23 +62,25 @@ export class ZHADeviceBindingControl extends LitElement {
<ha-card class="content">
<div class="command-picker">
<paper-dropdown-menu label="Bindable Devices" class="menu">
<paper-listbox
slot="dropdown-content"
.selected=${this._bindTargetIndex}
@iron-select=${this._bindTargetIndexChanged}
>
${this.bindableDevices.map(
(device) => html`
<paper-item
>${device.user_given_name
? device.user_given_name
: device.name}</paper-item
>
`
)}
</paper-listbox>
</paper-dropdown-menu>
<mwc-select
label="Bindable Devices"
class="menu"
.value=${String(this._bindTargetIndex)}
@selected=${this._bindTargetIndexChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
${this.bindableDevices.map(
(device, idx) => html`
<mwc-list-item .value=${String(idx)}>
${device.user_given_name
? device.user_given_name
: device.name}
</mwc-list-item>
`
)}
</mwc-select>
</div>
${this._showHelp
? html`
@ -111,7 +113,7 @@ export class ZHADeviceBindingControl extends LitElement {
}
private _bindTargetIndexChanged(event: ItemSelectedEvent): void {
this._bindTargetIndex = event.target!.selected;
this._bindTargetIndex = Number(event.target!.value);
this._deviceToBind =
this._bindTargetIndex === -1
? undefined

30
src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
View File

@ -1,8 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
@ -13,6 +10,7 @@ import {
} from "lit";
import { customElement, property, state, query } from "lit/decorators";
import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
import "../../../../../components/ha-card";
@ -95,22 +93,24 @@ export class ZHAGroupBindingControl extends LitElement {
<ha-card class="content">
<div class="command-picker">
<paper-dropdown-menu
<mwc-select
.label=${this.hass!.localize(
"ui.panel.config.zha.group_binding.group_picker_label"
)}
class="menu"
.value=${String(this._bindTargetIndex)}
@selected=${this._bindTargetIndexChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox
slot="dropdown-content"
.selected=${this._bindTargetIndex}
@iron-select=${this._bindTargetIndexChanged}
>
${this.groups.map(
(group) => html` <paper-item>${group.name}</paper-item> `
)}
</paper-listbox>
</paper-dropdown-menu>
${this.groups.map(
(group, idx) =>
html`<mwc-list-item .value=${String(idx)}
>${group.name}</mwc-list-item
> `
)}
</mwc-select>
</div>
${this._showHelp
? html`
@ -179,7 +179,7 @@ export class ZHAGroupBindingControl extends LitElement {
}
private _bindTargetIndexChanged(event: ItemSelectedEvent): void {
this._bindTargetIndex = event.target!.selected;
this._bindTargetIndex = Number(event.target!.value);
this._groupToBind =
this._bindTargetIndex === -1
? undefined

6
src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
View File

@ -440,19 +440,15 @@ export class ZHANetworkVisualizationPage extends LitElement {
search-input {
flex: 1;
display: block;
}
search-input.header {
display: block;
position: relative;
top: -2px;
color: var(--secondary-text-color);
}
ha-device-picker {
flex: 1;
position: relative;
top: -4px;
}
.controls {

1
src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
View File

@ -513,6 +513,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
ready() {
super.ready();
import("web-animations-js/web-animations-next-lite.min");
this.addEventListener("hass-service-called", (ev) =>
this.serviceCalled(ev)
);