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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -27,11 +27,6 @@ define(
"use strict"; "use strict";
function NotificationLaunchController($scope, notificationService) { 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(){ $scope.newSuccess = function(){
notificationService.success({ notificationService.success({