Skip to content

Replace mdc circular progress with mwc #7248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 2 commits into from
Oct 8, 2020
Merged

Replace mdc circular progress with mwc #7248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f1907f
Replace mdc circular progress with mwc
bramkragten Oct 6, 2020
526e6b4
Bump mwc
bramkragten Oct 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 17 additions & 21 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,22 +28,22 @@
"@fullcalendar/daygrid": "5.1.0",
"@fullcalendar/interaction": "5.1.0",
"@fullcalendar/list": "5.1.0",
"@material/chips": "=8.0.0-canary.096a7a066.0",
"@material/circular-progress": "=8.0.0-canary.a78ceb112.0",
"@material/mwc-button": "^0.18.0",
"@material/mwc-checkbox": "^0.18.0",
"@material/mwc-dialog": "^0.18.0",
"@material/mwc-fab": "^0.18.0",
"@material/mwc-formfield": "^0.18.0",
"@material/mwc-icon-button": "^0.18.0",
"@material/mwc-list": "^0.18.0",
"@material/mwc-menu": "^0.18.0",
"@material/mwc-radio": "^0.18.0",
"@material/mwc-ripple": "^0.18.0",
"@material/mwc-switch": "^0.18.0",
"@material/mwc-tab": "^0.18.0",
"@material/mwc-tab-bar": "^0.18.0",
"@material/top-app-bar": "=8.0.0-canary.096a7a066.0",
"@material/chips": "=8.0.0-canary.774dcfc8e.0",
"@material/mwc-button": "^0.19.0",
"@material/mwc-checkbox": "^0.19.0",
"@material/mwc-circular-progress": "^0.19.0",
"@material/mwc-dialog": "^0.19.0",
"@material/mwc-fab": "^0.19.0",
"@material/mwc-formfield": "^0.19.0",
"@material/mwc-icon-button": "^0.19.0",
"@material/mwc-list": "^0.19.0",
"@material/mwc-menu": "^0.19.0",
"@material/mwc-radio": "^0.19.0",
"@material/mwc-ripple": "^0.19.0",
"@material/mwc-switch": "^0.19.0",
"@material/mwc-tab": "^0.19.0",
"@material/mwc-tab-bar": "^0.19.0",
"@material/top-app-bar": "=8.0.0-canary.774dcfc8e.0",
"@mdi/js": "5.6.55",
"@mdi/svg": "5.6.55",
"@polymer/app-layout": "^3.0.2",
Expand Down Expand Up @@ -219,11 +219,7 @@
"@webcomponents/webcomponentsjs": "^2.2.10",
"@polymer/polymer": "3.1.0",
"lit-html": "1.3.0",
"lit-element": "2.4.0",
"@material/animation": "8.0.0-canary.096a7a066.0",
"@material/base": "8.0.0-canary.096a7a066.0",
"@material/feature-targeting": "8.0.0-canary.096a7a066.0",
"@material/theme": "8.0.0-canary.096a7a066.0"
"lit-element": "2.4.0"
},
"main": "src/home-assistant.js",
"husky": {
Expand Down
96 changes: 24 additions & 72 deletions src/components/ha-circular-progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,9 @@
// @ts-ignore
import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css";
import {
css,
customElement,
html,
LitElement,
property,
svg,
SVGTemplateResult,
TemplateResult,
unsafeCSS,
} from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import { customElement, property } from "lit-element";
import { CircularProgress } from "@material/mwc-circular-progress";

@customElement("ha-circular-progress")
export class HaCircularProgress extends LitElement {
// @ts-ignore
export class HaCircularProgress extends CircularProgress {
@property({ type: Boolean })
public active = false;

Expand All @@ -24,68 +13,31 @@ export class HaCircularProgress extends LitElement {
@property()
public size: "small" | "medium" | "large" = "medium";

protected render(): TemplateResult {
let indeterminatePart: SVGTemplateResult;
// @ts-ignore
public set density(_) {
// just a dummy
}

if (this.size === "small") {
indeterminatePart = svg`
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
</svg>`;
} else if (this.size === "large") {
indeterminatePart = svg`
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
</svg>`;
} else {
// medium
indeterminatePart = svg`
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
</svg>`;
public get density() {
switch (this.size) {
case "small":
return -5;
case "medium":
return 0;
case "large":
return 5;
default:
return 0;
}
}

// ignoring prettier as it will introduce unwanted whitespace
// We have not implemented the determinate support of mdc circular progress.
// prettier-ignore
return html`
<div
class="mdc-circular-progress ${classMap({
"mdc-circular-progress--indeterminate": this.active,
[`mdc-circular-progress--${this.size}`]: true,
})}"
role="progressbar"
aria-label=${this.alt}
aria-valuemin="0"
aria-valuemax="1"
>
<div class="mdc-circular-progress__indeterminate-container">
<div class="mdc-circular-progress__spinner-layer">
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
${indeterminatePart}
</div><div class="mdc-circular-progress__gap-patch">
${indeterminatePart}
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
${indeterminatePart}
</div>
</div>
</div>
</div>
`;
// @ts-ignore
public set indeterminate(_) {
// just a dummy
}

static get styles() {
return [
unsafeCSS(progressStyles),
css`
:host {
text-align: initial;
}
.mdc-circular-progress {
overflow: hidden;
}
`,
];
public get indeterminate() {
return this.active;
}
}

Expand Down
22 changes: 7 additions & 15 deletions src/panels/config/automation/thingtalk/dialog-thingtalk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,13 @@ class DialogThingtalk extends LitElement {
Skip
</mwc-button>
<mwc-button @click="${this._generate}" .disabled=${this._submitting}>
<ha-circular-progress
?active="${this._submitting}"
alt="Creating your automation..."
></ha-circular-progress>
${this._submitting
? html`<ha-circular-progress
active
size="small"
title="Creating your automation..."
></ha-circular-progress>`
: ""}
Create automation
</mwc-button>
</div>
Expand Down Expand Up @@ -246,17 +249,6 @@ class DialogThingtalk extends LitElement {
mwc-button.left {
margin-right: auto;
}
mwc-button ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
ha-circular-progress {
display: none;
}
ha-circular-progress[active] {
display: block;
}
.error {
color: var(--error-color);
}
Expand Down
26 changes: 9 additions & 17 deletions src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,15 @@ export class ZHAAddGroupPage extends LitElement {
@click="${this._createGroup}"
class="button"
>
<ha-circular-progress
?active="${this._processingAdd}"
alt="${this.hass!.localize(
"ui.panel.config.zha.groups.creating_group"
)}"
></ha-circular-progress>
${this._processingAdd
? html`<ha-circular-progress
active
size="small"
.title=${this.hass!.localize(
"ui.panel.config.zha.groups.creating_group"
)}
></ha-circular-progress>`
: ""}
${this.hass!.localize(
"ui.panel.config.zha.groups.create"
)}</mwc-button
Expand Down Expand Up @@ -172,17 +175,6 @@ export class ZHAAddGroupPage extends LitElement {
ha-config-section *:last-child {
padding-bottom: 24px;
}
mwc-button ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
ha-circular-progress {
display: none;
}
ha-circular-progress[active] {
display: block;
}
.paper-dialog-buttons {
align-items: flex-end;
padding: 8px;
Expand Down
25 changes: 7 additions & 18 deletions src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,12 +203,13 @@ export class ZHAGroupPage extends LitElement {
@click="${this._addMembersToGroup}"
class="button"
>
<ha-circular-progress
?active="${this._processingAdd}"
alt=${this.hass.localize(
"ui.panel.config.zha.groups.adding_members"
)}
></ha-circular-progress>
${this._processingAdd
? html`<ha-circular-progress
active
size="small"
title="Saving"
></ha-circular-progress>`
: ""}
${this.hass!.localize(
"ui.panel.config.zha.groups.add_members"
)}</mwc-button
Expand Down Expand Up @@ -310,18 +311,6 @@ export class ZHAGroupPage extends LitElement {
color: var(--primary-color);
text-decoration: none;
}

mwc-button ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
ha-circular-progress {
display: none;
}
ha-circular-progress[active] {
display: block;
}
.paper-dialog-buttons {
align-items: flex-end;
padding: 8px;
Expand Down
6 changes: 1 addition & 5 deletions src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
? html`
<ha-circular-progress
active
alt="Saving"
title="Saving"
size="small"
></ha-circular-progress>
`
Expand Down Expand Up @@ -424,10 +424,6 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
max-width: 500px;
}
}

mwc-button ha-circular-progress {
margin-right: 20px;
}
.hidden {
display: none;
}
Expand Down
8 changes: 2 additions & 6 deletions src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@ export class HuiDialogSuggestCard extends LitElement {
? html`
<ha-circular-progress
active
alt="Saving"
title="Saving"
size="small"
></ha-circular-progress>
`
: this.hass!.localize(
Expand Down Expand Up @@ -142,11 +143,6 @@ export class HuiDialogSuggestCard extends LitElement {
max-width: 845px;
--dialog-z-index: 5;
}
mwc-button ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
.hidden {
display: none;
}
Expand Down
22 changes: 7 additions & 15 deletions src/panels/lovelace/editor/hui-dialog-save-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,13 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
?disabled=${this._saving}
@click=${this._saveConfig}
>
<ha-circular-progress
?active=${this._saving}
alt="Saving"
></ha-circular-progress>
${this._saving
? html`<ha-circular-progress
active
size="small"
title="Saving"
></ha-circular-progress>`
: ""}
${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.save"
)}
Expand Down Expand Up @@ -204,17 +207,6 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
ha-paper-dialog {
max-width: 650px;
}
ha-circular-progress {
display: none;
}
ha-circular-progress[active] {
display: block;
}
mwc-button ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
ha-switch {
padding-bottom: 16px;
}
Expand Down
22 changes: 7 additions & 15 deletions src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,13 @@ export class HuiDialogEditLovelace extends LitElement {
?disabled="${!this._config || this._saving}"
@click="${this._save}"
>
<ha-circular-progress
?active="${this._saving}"
alt="Saving"
></ha-circular-progress>
${this._saving
? html`<ha-circular-progress
active
size="small"
title="Saving"
></ha-circular-progress>`
: ""}
${this.hass!.localize("ui.common.save")}</mwc-button
>
</div>
Expand Down Expand Up @@ -149,17 +152,6 @@ export class HuiDialogEditLovelace extends LitElement {
ha-paper-dialog {
max-width: 650px;
}
mwc-button ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
ha-circular-progress {
display: none;
}
ha-circular-progress[active] {
display: block;
}
`,
];
}
Expand Down
Loading