[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:
Victor Woeltjen 2015-03-20 12:11:19 -07:00
parent 8ec65db93d
commit d4691db8e2
4 changed files with 113 additions and 1 deletions

View 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.

View File

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

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

View File

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