mirror of
https://github.com/nasa/openmct.git
synced 2025-01-19 03:06:54 +00:00
[Dialog] Add options dialog
Add a dialog type which presents a set of buttons for the user to choose from; will be used for Overwrite/Cancel, WTD-1033.
This commit is contained in:
parent
8ec65db93d
commit
d4691db8e2
27
platform/commonUI/dialog/README.md
Normal file
27
platform/commonUI/dialog/README.md
Normal file
@ -0,0 +1,27 @@
|
||||
This bundle provides `dialogService`, which can be used to prompt
|
||||
for user input.
|
||||
|
||||
## `getUserChoice`
|
||||
|
||||
The `getUserChoice` method is useful for displaying a message and a set of
|
||||
buttons. This method returns a promise which will resolve to the user's
|
||||
chosen option (or, more specifically, its `key`), and will be rejected if
|
||||
the user closes the dialog with the X in the top-right;
|
||||
|
||||
The `dialogModel` given as an argument to this method should have the
|
||||
following properties.
|
||||
|
||||
* `title`: The title to display at the top of the dialog.
|
||||
* `hint`: Short message to display below the title.
|
||||
* `template`: Identifying key (as will be passed to `mct-include`) for
|
||||
the template which will be used to populate the inner area of the dialog.
|
||||
* `model`: Model to pass in the `ng-model` attribute of
|
||||
`mct-include`.
|
||||
* `parameters`: Parameters to pass in the `parameters` attribute of
|
||||
`mct-include`.
|
||||
* `options`: An array of options describing each button at the bottom.
|
||||
Each option may have the following properties:
|
||||
* `name`: Human-readable name to display in the button.
|
||||
* `key`: Machine-readable key, to pass as the result of the resolved
|
||||
promise when clicked.
|
||||
* `description`: Description to show in tool tip on hover.
|
@ -17,6 +17,10 @@
|
||||
"key": "overlay-dialog",
|
||||
"templateUrl": "templates/overlay-dialog.html"
|
||||
},
|
||||
{
|
||||
"key": "overlay-options",
|
||||
"templateUrl": "templates/overlay-options.html"
|
||||
},
|
||||
{
|
||||
"key": "form-dialog",
|
||||
"templateUrl": "templates/dialog.html"
|
||||
|
24
platform/commonUI/dialog/res/templates/overlay-options.html
Normal file
24
platform/commonUI/dialog/res/templates/overlay-options.html
Normal file
@ -0,0 +1,24 @@
|
||||
<mct-container key="overlay">
|
||||
<div class="abs top-bar">
|
||||
<div class="title">{{ngModel.dialog.title}}</div>
|
||||
<div class="hint">{{ngModel.dialog.hint}}</div>
|
||||
</div>
|
||||
<div class="abs form outline editor">
|
||||
<div class='abs contents l-dialog'>
|
||||
<mct-include key="ngModel.dialog.template"
|
||||
parameters="ngModel.dialog.parameters"
|
||||
ng-model="ngModel.dialog.model">
|
||||
</mct-include>
|
||||
</div>
|
||||
</div>
|
||||
<div class="abs bottom-bar">
|
||||
<a ng-repeat="options in ngModel.dialog.options"
|
||||
href=''
|
||||
class="btn lg"
|
||||
title="{{option.description}}"
|
||||
ng-click="ngModel.click(option.key)"
|
||||
ng-class="{ major: $first, subtle: !$first }">
|
||||
{{option.name}}
|
||||
</a>
|
||||
</div>
|
||||
</mct-container>
|
@ -88,6 +88,56 @@ define(
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function getUserChoice(dialogModel) {
|
||||
// We will return this result as a promise, because user
|
||||
// input is asynchronous.
|
||||
var deferred = $q.defer();
|
||||
|
||||
// Confirm function; this will be passed in to the
|
||||
// overlay-dialog template and associated with a
|
||||
// OK button click
|
||||
function confirm(value) {
|
||||
// Pass along the result
|
||||
deferred.resolve(value);
|
||||
|
||||
// Stop showing the dialog
|
||||
dismiss();
|
||||
}
|
||||
|
||||
// Cancel function; this will be passed in to the
|
||||
// overlay-dialog template and associated with a
|
||||
// Cancel or X button click
|
||||
function cancel() {
|
||||
deferred.reject();
|
||||
dismiss();
|
||||
}
|
||||
|
||||
if (dialogVisible) {
|
||||
// Only one dialog should be shown at a time.
|
||||
// The application design should be such that
|
||||
// we never even try to do this.
|
||||
$log.warn([
|
||||
"Dialog already showing; ",
|
||||
"unable to show ",
|
||||
dialogModel.name
|
||||
].join(""));
|
||||
deferred.reject();
|
||||
} else {
|
||||
// Add the overlay using the OverlayService, which
|
||||
// will handle actual insertion into the DOM
|
||||
overlay = overlayService.createOverlay(
|
||||
"overlay-dialog",
|
||||
{ dialog: dialogModel, click: confirm }
|
||||
);
|
||||
|
||||
// Track that a dialog is already visible, to
|
||||
// avoid spawning multiple dialogs at once.
|
||||
dialogVisible = true;
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
return {
|
||||
/**
|
||||
* Request user input via a window-modal dialog.
|
||||
@ -100,7 +150,14 @@ define(
|
||||
* user input cannot be obtained (for instance,
|
||||
* because the user cancelled the dialog)
|
||||
*/
|
||||
getUserInput: getUserInput
|
||||
getUserInput: getUserInput,
|
||||
/**
|
||||
* Request that the user chooses from a set of options,
|
||||
* which will be shown as buttons.
|
||||
*
|
||||
* @param dialogModel a description of the dialog to show
|
||||
*/
|
||||
getUserChoice: getUserChoice
|
||||
};
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user