Changed the toasts to Growl notifications which floats.

This commit is contained in:
Tanshu 2013-05-17 23:56:48 +05:30
parent ec45880dea
commit 867935306d
5 changed files with 278 additions and 200 deletions

View File

@ -1,6 +1,6 @@
CACHE MANIFEST
# version 2013-05-16.1
# version 2013-05-17.1
CACHE:
/partial/404.html
@ -82,6 +82,7 @@ CACHE:
/script/employee-functions.js
/script/employee.js
/script/group.js
/script/growl-service.js
/script/issue.js
/script/journal.js
/script/ledger.js

View File

@ -121,7 +121,7 @@ overlord_directive.directive('ngConfirm', ['modal', '$parse', function (modal, $
transclude: 'element',
priority: 1000,
terminal: true,
compile:function (element, attr, linker) {
compile: function (element, attr, transclude) {
return function (scope, iterStartElement, attr) {
iterStartElement[0].doNotMove = true;
var expression = attr.ngmIf;
@ -135,7 +135,7 @@ overlord_directive.directive('ngConfirm', ['modal', '$parse', function (modal, $
lastScope && lastScope.$destroy();
if (newValue) {
lastScope = scope.$new();
linker(lastScope, function (clone) {
transclude(lastScope, function (clone) {
lastElement = clone;
iterStartElement.after(clone);
});
@ -205,3 +205,15 @@ overlord_directive.directive('ngEditRepeat', ['modal', '$parse', function (modal
};
}]);
overlord_directive.directive('ngGrowl', ['growl', '$parse', function (growl, $parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var options = {
dismiss_function: attrs["toClose"]
};
growl.show(element, scope, options);
}
};
}]);

View File

@ -0,0 +1,64 @@
'use strict';
overlord_service.factory('growl', ['$http', '$compile', '$timeout', function ($http, $compile, $timeout) {
var growl = {};
growl.default_options = {
offset: {
from: "top",
amount: 20
},
align: "right",
width: 250,
duration:500,
delay: 4000,
stackup_spacing: 10
};
growl.show = function (element, scope, options) {
var options = jQuery.extend({}, growl.default_options, options);
if (options.top_offset) {
options.offset = {
from: "top",
amount: options.top_offset
};
}
var offsetAmount = options.offset.amount;
jQuery(".bootstrap-growl").each(function (index) {
var offset = parseInt($(this).css(options.offset.from)) + $(this).outerHeight() + options.stackup_spacing;
if (isNaN(offset)) {
offset = 0;
}
return offsetAmount = Math.max(offsetAmount, offset);
});
element.css("position", "fixed");
element.css("margin", 0);
element.css("z-index", "9999");
element.css("display", "none");
element.css(options.offset.from, offsetAmount + "px");
if (options.width !== "auto") {
element.css("width", options.width + "px");
}
switch (options.align) {
case "center":
element.css("left", "50%");
element.css("margin-left", "-" + (element.outerWidth() / 2) + "px");
break;
case "left":
element.css("left", "20px");
break;
default:
element.css("right", "20px");
}
element.fadeIn(options.duration);
if (options.delay > 0) {
$timeout(function () {
element.fadeOut(options.duration, function() {
scope.$eval(options.dismiss_function);
});
}, options.delay);
}
return element;
};
return growl;
}])
;

View File

@ -168,10 +168,7 @@ overlord.controller('BaseCtrl', ['$rootScope', '$scope', 'Auth', '$location', '$
$scope.clearToast = function (item) {
var idx = $scope.toasts.indexOf(item);
if (idx !== -1) {
//injected into repeater scope by fadey directive
this.destroy(function () {
$scope.toasts.splice(idx, 1);
});
}
};

View File

@ -32,6 +32,7 @@
<script src="/script/angular_filter.js"></script>
<script src="/script/angular_service.js"></script>
<script src="/script/modal-service.js"></script>
<script src="/script/growl-service.js"></script>
<script src="/script/login.js"></script>
<script src="/script/journal.js"></script>
@ -90,7 +91,8 @@
<li class="active"><a href="/"><i class="icon-home"></i> Home</a></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Voucher Entry <b class="caret"></b></a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Voucher Entry <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Journal">Journal</a></li>
<li><a href="/Purchase">Purchase</a></li>
@ -102,7 +104,8 @@
</li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <b class="caret"></b></a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Ledger">Display Ledger</a></li>
<li><a href="/ProductLedger">Product Ledger</a></li>
@ -125,7 +128,8 @@
</li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Entries <b class="caret"></b></a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Entries <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Unposted">UnPosted Entries</a></li>
<li><a href="/AccountsTesting/Reports/Entries.aspx">Latest Entries</a></li>
@ -133,7 +137,8 @@
</li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Employees <b class="caret"></b></a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Employees <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Employees">Employees</a></li>
<li><a href="/Attendance">Attendance</a></li>
@ -147,7 +152,8 @@
</li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Masters <b class="caret"></b></a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Masters <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Accounts">Accounts</a></li>
<li><a href="/CostCenters">Cost Centers</a></li>
@ -157,7 +163,9 @@
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown" ng-show="auth.isAuthenticated"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> {{auth.Name}} <b class="caret"></b></a>
<li class="dropdown" ng-show="auth.isAuthenticated"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"><i
class="icon-user"></i> {{auth.Name}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/logout">Logout {{auth.Name}}</a></li>
<li><a href="/User/{{auth.Name}}">Change Password</a></li>
@ -179,14 +187,10 @@
</div>
<div class="container">
<div class="row">
<div id="status" class="span4 offset4">
<div ng-repeat="toast in toasts" class="alert alert-{{toast.Type | lowercase}}" fadey>
<button class="close" ng-click="clearToast(toast)">×</button>
<div class="bootstrap-growl alert alert-{{toast.Type | lowercase}}" ng-repeat="toast in toasts" ng-growl
to-close="clearToast(toast)">
<strong>{{toast.Type}}!</strong> {{toast.Message}}
</div>
</div>
</div>
<div id="spinner" class="row span4 offset4">
<div id="circleG">