fix(#7022): remove ProgressBar artifacts from Notifications (#7024)

* fix: check for null or undefined

* refactor: `lint:fix`

---------

Co-authored-by: Scott Bell <scott@traclabs.com>
This commit is contained in:
Jesse Mazzella 2023-09-04 05:51:32 -07:00 committed by GitHub
parent e9b94c308b
commit 9f7b3b9225
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 5 deletions

View File

@ -23,11 +23,13 @@
<div class="c-progress-bar"> <div class="c-progress-bar">
<div <div
class="c-progress-bar__bar" class="c-progress-bar__bar"
:class="{ '--indeterminate': model.progressPerc === null }" :class="{ '--indeterminate': !model.progressPerc }"
:style="styleBarWidth" :style="styleBarWidth"
></div> ></div>
<div v-if="model.progressText !== undefined" class="c-progress-bar__text"> <div v-if="model.progressText !== undefined" class="c-progress-bar__text">
<span v-if="model.progressPerc > 0">{{ model.progressPerc }}% complete.</span> <span v-if="model.progressPerc && model.progressPerc > 0"
>{{ model.progressPerc }}% complete.</span
>
{{ model.progressText }} {{ model.progressText }}
</div> </div>
</div> </div>
@ -43,7 +45,7 @@ export default {
}, },
computed: { computed: {
styleBarWidth() { styleBarWidth() {
return this.model.progressPerc !== null ? `width: ${this.model.progressPerc}%;` : ''; return this.model.progressPerc ? `width: ${this.model.progressPerc}%;` : '';
} }
} }
}; };

View File

@ -40,7 +40,7 @@
> >
<progress-bar <progress-bar
v-if="activeModel.progressPerc !== null" v-if="activeModel.progressPerc"
class="c-message-banner__progress-bar" class="c-message-banner__progress-bar"
:model="activeModel" :model="activeModel"
/> />
@ -178,7 +178,7 @@ export default {
return; return;
} }
if (this.activeModel.progressPerc !== null) { if (this.activeModel.progressPerc) {
maximizedDialog = this.openmct.overlays.progressDialog({ maximizedDialog = this.openmct.overlays.progressDialog({
buttons: [minimizeButton], buttons: [minimizeButton],
...this.activeModel ...this.activeModel