Refactored DialogService a little

This commit is contained in:
Henry 2015-10-09 11:57:47 -07:00
parent fe3e3325e1
commit 85300d3743
7 changed files with 44 additions and 83 deletions

View File

@ -1,20 +1,20 @@
<div class="l-message message-severity-{{ngModel.dialog.severity}}">
<div class="l-message message-severity-{{ngModel.severity}}">
<div class="ui-symbol type-icon message-type"></div>
<div class="message-contents">
<div class="top-bar">
<div class="title">{{ngModel.dialog.title}}</div>
<div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
<div class="title">{{ngModel.title}}</div>
<div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
</div>
<div class="message-body">
<div class="message-action">
{{ngModel.dialog.actionText}} message-severity-{{ngModel.dialog.severity}}
{{ngModel.actionText}} message-severity-{{ngModel.severity}}
</div>
<mct-include key="'progress-bar'"
ng-model="ngModel"
ng-hide="ngModel.dialog.progress === undefined"></mct-include>
ng-hide="ngModel.progress === undefined"></mct-include>
</div>
<div class="bottom-bar">
<a ng-repeat="dialogAction in ngModel.dialog.actions"
<a ng-repeat="dialogAction in ngModel.actions"
class="s-btn major"
ng-click="dialogAction.action()">
{{dialogAction.label}}

View File

@ -6,7 +6,7 @@
</div>
</div>
<div class="abs message-body">
<mct-include ng-repeat="msg in ngModel.dialog.messages" key="'message'" ng-model="msg.ngModel"></mct-include>
<mct-include ng-repeat="msg in ngModel.dialog.messages" key="'message'" ng-model="msg"></mct-include>
<!-- <ul>
<li ng-repeat="msg in ngModel.dialog.messages">
&lt;!&ndash;Message: {{msg.title}}&ndash;&gt;

View File

@ -55,7 +55,7 @@ define(
this.dialogVisible = false;
};
DialogService.prototype.getDialogResponse = function (key, model, resultGetter) {
DialogService.prototype.getDialogResponse = function (key, model, resultGetter, typeClass) {
// We will return this result as a promise, because user
// input is asynchronous.
var deferred = this.$q.defer(),
@ -90,7 +90,7 @@ define(
this.overlay = this.overlayService.createOverlay(
key,
model,
"t-dialog"
typeClass || "t-dialog"
);
// Track that a dialog is already visible, to
@ -235,54 +235,12 @@ define(
* @returns {boolean}
*/
DialogService.prototype.showBlockingMessage = function(dialogModel) {
if (this.canShowDialog(dialogModel)) {
// Add the overlay using the OverlayService, which
// will handle actual insertion into the DOM
this.overlay = this.overlayService.createOverlay(
"overlay-blocking-message",
{ dialog: dialogModel },
"t-dialog-sm"
);
this.dialogVisible = true;
if (this.canShowDialog) {
this.getDialogResponse("overlay-blocking-message", dialogModel, undefined, "t-dialog-sm");
return true;
} else {
//Could not show a dialog, so return indication of this to
//client code.
return false;
}
};
DialogService.prototype.showMessageList = function(dialogModel) {
var self = this;
// 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(); // Not sure what this does
self.dismiss();
}
if (this.canShowDialog(dialogModel)) {
// Add the overlay using the OverlayService, which
// will handle actual insertion into the DOM
this.overlay = this.overlayService.createOverlay(
"overlay-message-list",
{
dialog: dialogModel,
cancel: cancel
},
"t-dialog"
);
this.dialogVisible = true;
return true;
} else {
//Could not show a dialog, so return indication of this to
//client code.
return false;
}
};
return DialogService;

View File

@ -1,10 +1,10 @@
<span class="l-progress-bar s-progress-bar"
ng-class="{ indeterminate:ngModel.dialog.unknownProgress }">
ng-class="{ indeterminate:ngModel.unknownProgress }">
<span class="progress-amt-holder">
<span class="progress-amt" style="width: {{ngModel.dialog.progress}}%"></span>
<span class="progress-amt" style="width: {{ngModel.progress}}%"></span>
</span>
</span>
<div class="progress-info hint" ng-hide="ngModel.dialog.progressText === undefined">
<span class="progress-amt-text" ng-show="ngModel.dialog.progress > 0">{{ngModel.dialog.progress}}% complete. </span>
{{ngModel.dialog.progressText}}
<div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
<span class="progress-amt-text" ng-show="ngModel.progress > 0">{{ngModel.progress}}% complete. </span>
{{ngModel.progressText}}
</div>

View File

@ -26,7 +26,7 @@
* show banner notifications to the user. Banner notifications
* are used to inform users of events in a non-intrusive way. As
* much as possible, notifications share a model with blocking
* dialogs so that the same information can be provided in a dialog
* dialogs so self the same information can be provided in a dialog
* and then minimized to a banner notification if needed.
*
* @namespace platform/commonUI/dialog
@ -51,7 +51,7 @@ define(
* A representation of a banner notification. Banner notifications
* are used to inform users of events in a non-intrusive way. As
* much as possible, notifications share a model with blocking
* dialogs so that the same information can be provided in a dialog
* dialogs so self the same information can be provided in a dialog
* and then minimized to a banner notification if needed.
*
* @typedef {object} Notification
@ -60,7 +60,7 @@ define(
* represented numerically
* @property {MessageSeverity} messageSeverity The importance of the
* message (eg. error, success)
* @property {boolean} unknownProgress a boolean indicating that the
* @property {boolean} unknownProgress a boolean indicating self the
* progress of the underlying task is unknown. This will result in a
* visually distinct progress bar.
* @property {boolean | number} autoDismiss If truthy, dialog will
@ -74,8 +74,8 @@ define(
* only the most important option to users.
* @property {NotificationAction[]} additionalActions any additional
* actions
* that the user can take. Will be represented as additional buttons
* that may or may not be available from a banner.
* self the user can take. Will be represented as additional buttons
* self may or may not be available from a banner.
*/
/**
@ -97,7 +97,7 @@ define(
}
/**
* Returns the notification that is currently visible in the banner area
* Returns the notification self is currently visible in the banner area
* @returns {Notification}
*/
NotificationService.prototype.getActiveNotification = function (){
@ -125,8 +125,8 @@ define(
*/
NotificationService.prototype.notify = function (notification) {
/*var notification = new Notification(model),
that=this; */
var that = this,
self=this; */
var self = this,
timeout;
if (notification.autoDismiss === true){
@ -154,7 +154,7 @@ define(
notification.autoDismiss :
this.DEFAULT_AUTO_DISMISS;
this.active.timeout = this.$timeout(function () {
that.dismissOrMinimize(that.active.notification);
self.dismissOrMinimize(self.active.notification);
}, timeout);
}
@ -167,7 +167,7 @@ define(
NotificationService.prototype.setActiveNotification =
function (notification) {
var that = this,
var self = this,
timeout;
this.active.notification = notification;
/*
@ -184,7 +184,7 @@ define(
this.DEFAULT_AUTO_DISMISS;
this.active.timeout = this.$timeout(function () {
that.dismissOrMinimize(notification);
self.dismissOrMinimize(notification);
}, timeout);
} else {
delete this.active.timeout;
@ -200,7 +200,7 @@ define(
var notification,
i=0;
/*
Loop through the notifications queue and find the first one that
Loop through the notifications queue and find the first one self
has not already been minimized (manually or otherwise).
*/
for (; i< this.notifications.length; i++) {

View File

@ -164,14 +164,10 @@ define(
function createMessage (messageNumber) {
var messageModel = {
ngModel: {
dialog: {
title: "Message Title " + messageNumber,
actionText: getExampleActionText(),
severity: getExampleSeverity(),
actions: getExampleActions()
}
}
title: "Message Title " + messageNumber,
actionText: getExampleActionText(),
severity: getExampleSeverity(),
actions: getExampleActions()
};
return messageModel;
}
@ -181,6 +177,17 @@ define(
element.remove();
}
for (var i = 0; i < 10; i++) {
model.messages.push(createMessage(i));
}
dialogService.getDialogResponse('overlay-message-list', {
dialog: model,
cancel: function(){
dialogService.dismiss();
}
});
/*
if (dialogService.showMessageList(model)) {
//Do processing here
for (var i = 0; i < 10; i++) {
@ -189,6 +196,7 @@ define(
} else {
$log.error("Could not display modal dialog");
}
*/
};
}
return DialogLaunchController;

View File

@ -27,11 +27,6 @@ define(
"use strict";
function NotificationLaunchController($scope, notificationService) {
/**
* <a ng-click="newSuccess()">Success</a> |
<a ng-click="newError()">Error</a> |
<a ng-click="newProgress()">Progress</a>
*/
$scope.newSuccess = function(){
notificationService.success({