OO-1068 improve info message dialog

src/main/webapp/static/js/functions.js

@@ -1091,19 +1091,28 @@ function showInfoBox(title, content){
 	// Factory method to create message box
 	var uuid = Math.floor(Math.random() * 0x10000 /* 65536 */).toString(16);
 	var info = '<div id="' + uuid
-	     + '" class="b_msg-div msg" style="display:none;"><div class="alert alert-info alert-fixed-top b_msg_info_content b_msg_info_winicon o_sel_info_message"><h3>'
-		 + title + '</h3>' + content + '<br/><br/></div></div>';
+	     + '" class="o_alert_info "><div class="alert alert-info clearfix o_sel_info_message"><i class="o_icon o_icon_close"></i><h3><i class="o_icon o_icon_info"></i> '
+		 + title + '</h3><p>' + content + '</p></div></div>';
     var msgCt = jQuery('#o_messages').prepend(info);
-    // Hide message automatically
+    // Hide message automatically based on content length
     var time = (content.length > 150) ? 8000 : ((content.length > 70) ? 6000 : 4000);
-    jQuery('#' + uuid).slideDown(300).delay(time).slideUp(300);
+
+    // Callback to remove after reading
+    var cleanup = function() {
+    	jQuery('#' + uuid)
+    		.transition({top : '-100%'}, function() {
+    			jQuery('#' + uuid).remove();
+    		});    	
+    };
+    // Show info box now
+    jQuery('#' + uuid).show().transition({ top: 0 });
+    
     // Visually remove message box immediately when user clicks on it
-    // The ghost event from above is triggered anyway. 
     jQuery('#' + uuid).click(function(e) {
-    	jQuery('#' + uuid).remove();
+    	cleanup();
     });
 	
-    // Help GC, prevent cyclic reference from on-click closure (OLAT-5755)
+    // Help GC, prevent cyclic reference from on-click closure
     title = null;
     content = null;
     msgCt = null;

src/main/webapp/static/themes/light/modules/_dialog.scss

@@ -2,45 +2,27 @@ div.o_callout_overlay {
 	position: fixed; top: 0; left: 0; width:100%; height:100%; zoom:1;  background: #000; @include o-opacity(1);
 }
 
-
-// Fixed alerts
-// Position to the top or bottom.
-// ------------------------------------------------
-$alert-fixed-width:        $screen-md-min !default;
-$zindex-alert-fixed:       1035 !default;
-
-.alert-fixed-top,
-.alert-fixed-bottom {
-  position: fixed;
-  width: 100%;
-  z-index: $zindex-alert-fixed;
-  border-radius: 0;
-  margin: 0;
-  left: 0;
-
-  @media (min-width: $alert-fixed-width) {
-    width: $alert-fixed-width;
-    left: 50%;
-    margin-left: (-1 * ($alert-fixed-width / 2));
-  }
-}
-
-.alert-fixed-top {
-  top: 0;
-  border-width: 0 0 1px 0;
-
-  @media (min-width: $alert-fixed-width) {
-    @include border-bottom-radius($alert-border-radius);
-    border-width: 0 1px 1px 1px;
-  }
-}
-
-.alert-fixed-bottom {
-  bottom: 0;
-  border-width: 1px 0 0 0;
-
-  @media (min-width: $alert-fixed-width) {
-    @include border-top-radius($alert-border-radius);
-    border-width: 1px 1px 0 1px;
-  }
-}
+.o_alert_info {
+	position: fixed;
+	top: -100%;	
+	left: 0;
+	display: none;
+ 	z-index: 1035;
+ 	width: 100%;
+ 	text-align: center;
+ 	
+ 	.alert {
+ 		@extend .modal-dialog;
+		margin:0px auto;
+		text-align: left;
+		@include box-shadow(0px 1px 5px -1px rgba(0,0,0,.15));
+		
+		.o_icon_close {
+			float: right;
+			color: $gray-light;
+			&:hover {
+				color: $gray;			
+			}
+		}
+ 	}
+}
\ No newline at end of file