Save and Finish blocking modal dialog Refactor and Styles #2500 (#2501)

* Save and Finish blocking modal dialog Refactor and Styles #2500

* created new template for ProgressDialogComponent

* Tweaks for #2501

- Normalized dialog icon size;
- Enhanced text formatting in dialog;
- Changed "Saving..." to remove ellipsis;

platform/commonUI/edit/src/actions/SaveInProgressDialog.js

@@ -6,7 +6,7 @@ define([], function () {
 
     SaveInProgressDialog.prototype.show = function () {
         this.dialog = this.dialogService.showBlockingMessage({
-            title: "Saving...",
+            title: "Saving",
             hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
             unknownProgress: true,
             severity: "info",

src/api/overlays/ProgressDialog.js

@@ -1,25 +1,31 @@
-import ProgressComponent from '../../ui/components/ProgressBar.vue';
+import ProgressDialogComponent from './components/ProgressDialogComponent.vue';
 import Overlay from './Overlay';
 import Vue from 'vue';
 
 var component;
 
 class ProgressDialog extends Overlay {
-    constructor({progressPerc, progressText, ...options}) {
+    constructor({progressPerc, progressText, iconClass, message, title, hint, timestamp, ...options}) {
-
         component = new Vue({
+            provide: {
+                iconClass,
+                message,
+                title,
+                hint,
+                timestamp
+            },
             components: {
-                ProgressComponent: ProgressComponent
+                ProgressDialogComponent: ProgressDialogComponent
             },
             data() {
                 return {
                     model: {
                         progressPerc: progressPerc || 0,
-                        progressText: progressText
+                        progressText
                     }
                 }
             },
-            template: '<progress-component :model="model"></progress-component>'
+            template: '<progress-dialog-component :model="model"></progress-dialog-component>'
         }).$mount();
 
         super({

src/api/overlays/components/DialogComponent.vue

@@ -20,6 +20,7 @@
                  v-if="message">
                 {{message}}
             </div>
+            <slot></slot>
         </div>
     </div>
 </template>
@@ -44,7 +45,7 @@
 
         &__icon {
             // Holds a background SVG graphic
-            $s: 50px;
+            $s: 80px;
             flex: 0 0 auto;
             min-width: $s;
             min-height: $s;
@@ -61,9 +62,13 @@
         }
 
         // __text elements
-        &__title,
         &__action-text {
-            font-size: 1.2em; // TEMP
+            font-size: 1.2em;
+        }
+
+        &__title {
+            font-size: 1.5em;
+            font-weight: bold;
         }
 
         &--simple {

src/api/overlays/components/ProgressDialogComponent.vue

@@ -0,0 +1,22 @@
+<template>
+    <dialog-component>
+        <progress-component :model="model"></progress-component>
+    </dialog-component>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+import ProgressComponent from '../../../ui/components/ProgressBar.vue';
+import DialogComponent from './DialogComponent.vue';
+
+export default {
+    components: {
+        DialogComponent: DialogComponent,
+        ProgressComponent: ProgressComponent,
+    },
+    inject:['iconClass', 'title', 'hint', 'timestamp', 'message'],
+    props:['model']
+}
+</script>

src/ui/layout/BrowseBar.vue

@@ -129,10 +129,13 @@ const PLACEHOLDER_OBJECT = {};
             saveAndFinishEditing() {
                 let dialog = this.openmct.overlays.progressDialog({
                     progressPerc: 'unknown',
-                    progressText: 'Saving...',
+                    message: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
+                    iconClass: 'info',
+                    title: 'Saving',
                 });
 
-                return this.openmct.editor.save().then(()=> {
+                return this.openmct.editor.save()
+                    .then(()=> {
                         dialog.dismiss();
                         this.openmct.notifications.info('Save successful');
                     }).catch((error) => {