[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:
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",
|
"key": "overlay-dialog",
|
||||||
"templateUrl": "templates/overlay-dialog.html"
|
"templateUrl": "templates/overlay-dialog.html"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"key": "overlay-options",
|
||||||
|
"templateUrl": "templates/overlay-options.html"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"key": "form-dialog",
|
"key": "form-dialog",
|
||||||
"templateUrl": "templates/dialog.html"
|
"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;
|
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 {
|
return {
|
||||||
/**
|
/**
|
||||||
* Request user input via a window-modal dialog.
|
* Request user input via a window-modal dialog.
|
||||||
@@ -100,7 +150,14 @@ define(
|
|||||||
* user input cannot be obtained (for instance,
|
* user input cannot be obtained (for instance,
|
||||||
* because the user cancelled the dialog)
|
* 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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user