Bläddra i källkod

Feature: add growl for notification

febbweiss 10 år sedan
förälder
incheckning
2d3d18ba9b
7 ändrade filer med 32 tillägg och 17 borttagningar
  1. 3 1
      bower.json
  2. 2 0
      karma.conf.js
  3. 5 2
      public/index.html
  4. 1 1
      public/js/app.js
  5. 15 0
      public/js/config.js
  6. 2 1
      public/js/routes.js
  7. 4 12
      public/js/services/flash.service.js

+ 3 - 1
bower.json

@@ -8,7 +8,9 @@
     "animate.css": "~3.3.0",
     "bootstrap": "~3.3.5",
     "font-awesome": "~4.4.0",
-    "angular-xeditable": "~0.1.9"
+    "angular-xeditable": "~0.1.9",
+    "angular-growl-v2": "~0.7.5",
+    "angular-animate": "~1.4.7"
   },
   "devDependencies": {
     "angular-mocks": "~1.4.4"

+ 2 - 0
karma.conf.js

@@ -19,6 +19,8 @@ module.exports = function(config) {
       'public/libs/angular-route/angular-route.js',
       'public/libs/angular-cookies/angular-cookies.js',
       'public/libs/angular-xeditable/dist/js/xeditable.min.js',
+      'public/libs/angular-growl-v2/build/angular-growl.min.js',
+      'public/libs/angular-animate/angular-animate.min.js',
       'public/libs/angular-mocks/angular-mocks.js',
       'public/js/**/*.js',
       'public/**/*.controller.js',

+ 5 - 2
public/index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
         <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css" type="text/css"/>
         <link rel="stylesheet" href="/libs/angular-xeditable/dist/css/xeditable.css" type="text/css" />
+        <link rel="stylesheet" href="/libs/angular-growl-v2/build/angular-growl.min.css" type="text/css" />
     </head>
     <body>
         <div class="container">
@@ -21,8 +22,7 @@
                 </ul>
             </nav>
         </div>
-        
-        <div ng-class="{ 'alert': flash, 'alert-success' : flash.type === 'success', 'alert-danger': flash.type === 'error'}" ng-if="flash" ng-bind="flash.message"></div>
+         <div growl></div>
         <div ng-view></div>
         
         <div class="credits text-center">
@@ -38,9 +38,12 @@
         <script type="text/javascript" src="/libs/angular-route/angular-route.min.js"></script>
         <script type="text/javascript" src="/libs/angular-cookies/angular-cookies.min.js"></script>
         <script type="text/javascript" src="/libs/angular-xeditable/dist/js/xeditable.min.js"></script>
+        <script type="text/javascript" src="/libs/angular-growl-v2/build/angular-growl.min.js"></script>
+        <script type="text/javascript" src="/libs/angular-animate/angular-animate.min.js"></script>
         
         <script type="text/javascript" src="/js/app.js"></script>
         <script type="text/javascript" src="/js/routes.js"></script>
+        <script type="text/javascript" src="/js/config.js"></script>
         <script type="text/javascript" src="/js/services/authentication.service.js"></script>
         <script type="text/javascript" src="/js/services/flash.service.js"></script>
         <script type="text/javascript" src="/js/services/user.service.js"></script>

+ 1 - 1
public/js/app.js

@@ -4,7 +4,7 @@
     var HOST = 'http://cloudbudget-febbweiss.c9.io/api';
     
     angular
-        .module('cloudbudget', ['ngRoute', 'routes', 'ngCookies', 'xeditable'])
+        .module('cloudbudget', ['ngRoute', 'ngAnimate', 'routes', 'angular-growl', 'config', 'ngCookies', 'xeditable'])
         .constant('apiRoutes', {
             'host'          : HOST,
             'port'          : "80",

+ 15 - 0
public/js/config.js

@@ -0,0 +1,15 @@
+(function() {
+    'use strict';
+    
+    angular
+        .module('config', [])
+        .config(config);
+        
+    config.$inject = ['growlProvider'];
+   
+    function config(growlProvider) {
+        growlProvider.globalReversedOrder(true);
+        growlProvider.globalTimeToLive(5000);
+        growlProvider.globalDisableCountDown(true);
+    };
+})();

+ 2 - 1
public/js/routes.js

@@ -6,8 +6,9 @@
         .config(config);
         
     config.$inject = ['$routeProvider', '$locationProvider'];
-    
+   
     function config($routeProvider, $locationProvider) {
+        
         $routeProvider
             .when('/', {
                 controller: 'HomeController',

+ 4 - 12
public/js/services/flash.service.js

@@ -5,9 +5,9 @@
         .module('cloudbudget')
         .factory('FlashService', FlashService);
         
-    FlashService.$inject = ['$rootScope'];
+    FlashService.$inject = ['$rootScope', 'growl'];
     
-    function FlashService($rootScope) {
+    function FlashService($rootScope, growl) {
         var service = {};
         
         service.success = success;
@@ -35,19 +35,11 @@
         }
         
         function success(message, keepAfterLocationChange) {
-            $rootScope.flash = {
-                message: message,
-                type: 'success',
-                keepAfterLocationChange: keepAfterLocationChange
-            };
+            growl.success(message,{title: 'Success!'});
         }
         
         function error(message, keepAfterLocationChange) {
-            $rootScope.flash = {
-                message: message,
-                type: 'error',
-                keepAfterLocationChange: keepAfterLocationChange
-            };
+            growl.error(message, {title: 'Error!'});
         }
     }
 })();