From 41d02fdb72f8df2dcea71c2909fb0f866cd2589a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 21 Oct 2021 00:56:20 +0200 Subject: [PATCH] Replace paper progress with mwc-linear-progess (#10339) --- package.json | 3 -- .../ha-form/ha-form-multi_select.ts | 2 +- .../zwave_js/dialog-zwave_js-heal-node.ts | 1 - .../lovelace/cards/hui-media-control-card.ts | 37 +++++++++---------- yarn.lock | 7 +--- 5 files changed, 21 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index ee71475cdb..cd80ffb0f7 100644 --- a/package.json +++ b/package.json @@ -73,14 +73,11 @@ "@polymer/iron-flex-layout": "^3.0.1", "@polymer/iron-icon": "^3.0.1", "@polymer/iron-input": "^3.0.1", - "@polymer/iron-overlay-behavior": "^3.0.3", "@polymer/iron-resizable-behavior": "^3.0.1", "@polymer/paper-dropdown-menu": "^3.2.0", "@polymer/paper-input": "^3.2.1", "@polymer/paper-item": "^3.0.1", "@polymer/paper-listbox": "^3.0.1", - "@polymer/paper-menu-button": "^3.1.0", - "@polymer/paper-progress": "^3.0.1", "@polymer/paper-ripple": "^3.0.2", "@polymer/paper-slider": "^3.0.1", "@polymer/paper-styles": "^3.0.1", diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts index 3162868317..fa50750373 100644 --- a/src/components/ha-form/ha-form-multi_select.ts +++ b/src/components/ha-form/ha-form-multi_select.ts @@ -43,7 +43,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { @state() private _opened = false; - @query("paper-menu-button", true) private _input?: HTMLElement; + @query("ha-button-menu") private _input?: HTMLElement; public focus(): void { if (this._input) { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts index de8d541293..632c19286b 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts @@ -1,6 +1,5 @@ import "../../../../../components/ha-circular-progress"; import "@material/mwc-button/mwc-button"; -import "@material/mwc-linear-progress/mwc-linear-progress"; import { mdiStethoscope, mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index b078463f4a..28f279019d 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -1,6 +1,6 @@ +import "@material/mwc-linear-progress/mwc-linear-progress"; +import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress"; import { mdiDotsVertical, mdiPlayBoxMultiple } from "@mdi/js"; -import "@polymer/paper-progress/paper-progress"; -import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress"; import { css, CSSResultGroup, @@ -9,7 +9,7 @@ import { PropertyValues, TemplateResult, } from "lit"; -import { customElement, property, state, query } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; @@ -19,8 +19,8 @@ import { supportsFeature } from "../../../common/entity/supports-feature"; import { extractColors } from "../../../common/image/extract_color"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-card"; -import "../../../components/ha-state-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-state-icon"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { UNAVAILABLE_STATES } from "../../../data/entity"; import { @@ -81,7 +81,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { @state() private _cardHeight = 0; - @query("paper-progress") private _progressBar?: PaperProgressElement; + @query("mwc-linear-progress") private _progressBar?: LinearProgress; @state() private _marqueeActive = false; @@ -296,17 +296,18 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ${!this._showProgressBar ? "" : html` - + > + `} ` @@ -508,8 +509,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } private _updateProgressBar(): void { - if (this._progressBar) { - this._progressBar.value = getCurrentProgress(this._stateObj!); + if (this._progressBar && this._stateObj?.attributes.media_duration) { + this._progressBar.progress = + getCurrentProgress(this._stateObj) / + this._stateObj!.attributes.media_duration; } } @@ -524,12 +527,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { return; } - const progressWidth = ( - this.shadowRoot!.querySelector("paper-progress") as HTMLElement - ).offsetWidth; + const progressWidth = (this._progressBar as HTMLElement).offsetWidth; const percent = e.offsetX / progressWidth; - const position = (e.currentTarget! as any).max * percent; + const position = this._stateObj!.attributes.media_duration! * percent; this.hass!.callService("media_player", "media_seek", { entity_id: this._config!.entity, @@ -730,12 +731,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { padding-top: 16px; } - paper-progress { + mwc-linear-progress { width: 100%; - height: var(--paper-progress-height, 4px); margin-top: 4px; - border-radius: calc(var(--paper-progress-height, 4px) / 2); - --paper-progress-container-color: rgba(200, 200, 200, 0.5); + --mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5); } .no-image .controls { diff --git a/yarn.lock b/yarn.lock index 33f72182ec..fda56d395b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3165,7 +3165,7 @@ __metadata: languageName: node linkType: hard -"@polymer/iron-overlay-behavior@npm:^3.0.0-pre.27, @polymer/iron-overlay-behavior@npm:^3.0.3": +"@polymer/iron-overlay-behavior@npm:^3.0.0-pre.27": version: 3.0.3 resolution: "@polymer/iron-overlay-behavior@npm:3.0.3" dependencies: @@ -3331,7 +3331,7 @@ __metadata: languageName: node linkType: hard -"@polymer/paper-progress@npm:^3.0.0-pre.26, @polymer/paper-progress@npm:^3.0.1": +"@polymer/paper-progress@npm:^3.0.0-pre.26": version: 3.0.1 resolution: "@polymer/paper-progress@npm:3.0.1" dependencies: @@ -9033,14 +9033,11 @@ fsevents@^1.2.7: "@polymer/iron-flex-layout": ^3.0.1 "@polymer/iron-icon": ^3.0.1 "@polymer/iron-input": ^3.0.1 - "@polymer/iron-overlay-behavior": ^3.0.3 "@polymer/iron-resizable-behavior": ^3.0.1 "@polymer/paper-dropdown-menu": ^3.2.0 "@polymer/paper-input": ^3.2.1 "@polymer/paper-item": ^3.0.1 "@polymer/paper-listbox": ^3.0.1 - "@polymer/paper-menu-button": ^3.1.0 - "@polymer/paper-progress": ^3.0.1 "@polymer/paper-ripple": ^3.0.2 "@polymer/paper-slider": ^3.0.1 "@polymer/paper-styles": ^3.0.1