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;

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>