Fade out flash messages after timeout

pull/1401/head
Till Breuer 11 years ago
parent b10fe6860f
commit 43c16dd0d3
  1. 21
      app/assets/javascripts/angular/directives/components/flash-message-directive.js
  2. 4
      app/assets/stylesheets/content/_flash_messages.sass
  3. 9
      public/templates/components/flash_message.html

@ -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);
});
}
};

@ -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

@ -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>

Loading…
Cancel
Save