From 96713356dc066fc039b445dcf92d874a47d871f0 Mon Sep 17 00:00:00 2001
From: pete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Tue, 30 Sep 2008 11:47:05 +0000
Subject: Messages/error notification system updated with dismiss button,
 longer delay, and sticky/fixed position (at top of viewport).

git-svn-id: https://code.elgg.org/elgg/trunk@2150 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 views/default/css.php                    | 44 ++++++++++++++++++++++++++------
 views/default/messages/errors/list.php   | 17 +++++++++---
 views/default/messages/messages/list.php | 18 +++++++++----
 3 files changed, 62 insertions(+), 17 deletions(-)

(limited to 'views')

diff --git a/views/default/css.php b/views/default/css.php
index 60bb2a441..712168834 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -4,6 +4,8 @@
 	 * Elgg CSS
 	 * The standard CSS file
 	 * 
+	 * Updated 30Sept - new messages/notifcation system
+	 * 
 	 * @package Elgg
 	 * @subpackage Core
 	 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
@@ -633,25 +635,51 @@ h6 { font-size: 0.8em; }
   SYSTEM MESSSAGES
 *************************************** */
 .messages {
-    border:1px solid #00cc00;
     background:#ccffcc;
     color:#000000;
     padding:3px 10px 3px 10px;
-    margin:20px 20px 0px 20px;
     z-index: 9999;
-    position:absolute;
+	/* border:1px solid #00cc00; */
+    /* margin:20px 20px 0px 20px; */
+    /* position:absolute; */
     /* width:611px; */
-    width:936px;
+    /* width:936px; */
+	margin:0;
+	position:fixed;
+	top:-60px;
+	width:969px;
+	-webkit-border-radius: 4px; 
+	-moz-border-radius: 4px;
+	border:4px solid #00CC00;
 }
 .messages_error {
-    border:1px solid #D3322A;
+    border:4px solid #D3322A;
     background:#F7DAD8;
     color:#000000;
     padding:3px 10px 3px 10px;
-    margin:20px 20px 0px 20px;
     z-index: 9999;
-    position:absolute;
-    width:936px;
+    /* margin:20px 20px 0px 20px; */
+    /* position:absolute; */
+    /* width:936px; */
+	margin:0;
+	position:fixed;
+	top:-60px;
+	width:969px;
+	-webkit-border-radius: 4px; 
+	-moz-border-radius: 4px;
+}
+.closeMessages {
+	float:right;
+	margin-top:17px;
+}
+.closeMessages a {
+	color:#666666;
+	cursor: pointer;
+	text-decoration: underline;
+	font-size: 80%;
+}
+.closeMessages a:hover {
+	color:black;
 }
 
 
diff --git a/views/default/messages/errors/list.php b/views/default/messages/errors/list.php
index 6af962d73..b9784fb2b 100644
--- a/views/default/messages/errors/list.php
+++ b/views/default/messages/errors/list.php
@@ -19,13 +19,22 @@
 ?>
 <!-- used to fade out the system messages after 3 seconds -->
 <script>
-    $(document).ready(function () {
-      $('.messages_error').animate({opacity: 1.0}, 3000) //this holds the div without change for 3 seconds
-      $('.messages_error').fadeOut('slow'); //fade it out
-    });  
+$(document).ready(function () {
+	$('.messages').animate({top:"3px", opacity: 1.0}, 1000); 
+	$('.messages').animate({opacity: 1.0}, 6000);
+	$('.messages').fadeOut('slow');
+      
+	$('span.closeMessages a').click(function () {
+		$(".messages").stop();
+		$('.messages').fadeOut('slow');
+	return false;
+    });
+
+});  
 </script>
 
 	<div class="messages_error">
+	<span class="closeMessages"><a href="#">dismiss message</a></span>
 
 <?php
 			foreach($vars['object'] as $error) {
diff --git a/views/default/messages/messages/list.php b/views/default/messages/messages/list.php
index 2554112b6..02825b705 100644
--- a/views/default/messages/messages/list.php
+++ b/views/default/messages/messages/list.php
@@ -19,14 +19,22 @@
 ?>
 <!-- used to fade out the system messages after 3 seconds -->
 <script>
-    $(document).ready(function () {
-      $('.messages').animate({opacity: 1.0}, 3000) //this holds the div without change for 3 seconds
-      $('.messages').fadeOut('slow'); //fade it out
-    });  
+$(document).ready(function () {
+	$('.messages').animate({top:"3px", opacity: 1.0}, 1000); 
+	$('.messages').animate({opacity: 1.0}, 6000);
+	$('.messages').fadeOut('slow');
+      
+	$('span.closeMessages a').click(function () {
+		$(".messages").stop();
+		$('.messages').fadeOut('slow');
+	return false;
+    });
+
+});  
 </script>
 
 	<div class="messages">
-
+	<span class="closeMessages"><a href="#">dismiss message</a></span>
 <?php
 
 		
-- 
cgit v1.2.3