ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-18 10:46:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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;
This commit is contained in:
Nikhil 2019-11-20 11:46:03 -08:00 committed by Deep Tailor
parent 6e2497461a
commit c6f83dea8d
6 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/edit/src/actions/SaveInProgressDialog.js
View File

@ -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",

18
src/api/overlays/ProgressDialog.js
View File

@ -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({

11
src/api/overlays/components/DialogComponent.vue
View File

@ -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 {

22
src/api/overlays/components/ProgressDialogComponent.vue Normal file
View File

@ -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>

4
src/ui/components/ProgressBar.vue
View File

@ -2,13 +2,13 @@
<div class="c-progress-bar">
<div class="c-progress-bar__holder">
<div class="c-progress-bar__bar"
:class="{'--indeterminate': model.progressPerc === 'unknown' }"
:class="{'--indeterminate': model.progressPerc === 'unknown'}"
:style="`width: ${model.progressPerc}%;`">
</div>
</div>
<div class="c-progress-bar__text"
v-if="model.progressText !== undefined">
<span v-if="model.progressPerc > 0">{{model.progressPerc}}% complete. </span>
<span v-if="model.progressPerc > 0">{{model.progressPerc}}% complete.</span>
{{model.progressText}}
</div>
</div>

21
src/ui/layout/BrowseBar.vue
View File

@ -129,17 +129,20 @@ 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(()=> {
dialog.dismiss();
this.openmct.notifications.info('Save successful');
}).catch((error) => {
dialog.dismiss();
this.openmct.notifications.error('Error saving objects');
console.error(error);
});
return this.openmct.editor.save()
.then(()=> {
dialog.dismiss();
this.openmct.notifications.info('Save successful');
}).catch((error) => {
dialog.dismiss();
this.openmct.notifications.error('Error saving objects');
console.error(error);
});
},
saveAndContinueEditing() {
this.saveAndFinishEditing().then(() => {