Fade out flash messages after timeout

app/assets/javascripts/angular/directives/components/flash-message-directive.js

@@ -29,22 +29,33 @@
 // TODO move to UI components
 angular.module('openproject.uiComponents')
 
-.directive('flashMessage', ['$rootScope', function($rootScope) {
+.directive('flashMessage', [
+  '$rootScope',
+  '$timeout',
+  function($rootScope, $timeout) {
+
   return {
     restrict: 'E',
     replace: true,
-    scope: { },
+    scope: {},
     templateUrl: '/templates/components/flash_message.html',
     link: function(scope, element, attrs) {
       $rootScope.$on('flashMessage', function(event, message) {
         scope.message = message;
-        scope.flashClass = "flash notice icon icon-notice";
-        scope.flashId = "";
+        scope.flashType = 'notice';
+        scope.flashId = 'flash-notice';
+
+        var fadeOutTime = attrs.fadeOutTime || 3000;
 
         if (message.isError) {
-          scope.flashClass = "errorExplanation";
+          scope.flashType = "errorExplanation";
           scope.flashId = "errorExplanation";
         }
+
+        // fade out after time out
+        $timeout(function() {
+          scope.message = undefined;
+        }, fadeOutTime);
       });
     }
   };

app/assets/stylesheets/content/_flash_messages.sass

@@ -41,6 +41,10 @@ div.flash.error a:hover, div.flash.warning a:hover, div.flash.notice a:hover, #e
 div.flash
   display: none
 
+  &.ng-leave
+    @include animation(0.5s fade-out)
+
+
 #errorExplanation
   display: none
   ul

public/templates/components/flash_message.html

@@ -1,3 +1,8 @@
-<div ng-if="message !== undefined" style="display:block" ng-class="flashClass" id="{{flashId}}" role="alert">
-  {{message.text}}
+<div ng-if="message !== undefined"
+     style="display: block;"
+     class="flash"
+     ng-class="['icon', 'icon-'+flashType, flashType]"
+     id="{{flashId}}"
+     role="alert"
+     ng-bind="message.text">
 </div>