tweak notifications; use css animations for notifications

10 years ago · d9c93ebfdb
parent e44280a0bd
commit d9c93ebfdb
4 changed files with 34 additions and 28 deletions
--- a/css/tt-rss.css
+++ b/css/tt-rss.css
@ -138,18 +138,30 @@ a:hover {
 	position : absolute;
 }

+#notify.visible {
+	transform: translate(0, -35px);
+	-webkit-transform: translate(0, -35px);
+   -o-transform: translate(0, -35px);
+   -moz-transform: translate(0, -35px);
+
+	transition: all 0.5s ease-in-out;
+	-webkit-transition: all 0.5s ease-in-out;
+   -moz-transition: all 0.5s ease-in-out;
+   -o-transition: all 0.5s ease-in-out;
+}
+
 #notify {
-	bottom : 10px;
-	right : 20px;
-	border-width : 1px;
+	bottom : -35px;
+	right : 0px;
+	height : 20px;
+	left : 0px;
+	border-width : 1px 0px 0px 0px;
 	border-style : solid;
 	position : absolute;	
 	font-size : 12px;
 	z-index : 99;
-	max-width : 200px;
-	min-width : 100px;
 	padding : 5px;
-	-width : 200px;
+	box-shadow : 0px -2px 2px rgba(0,0,0,0.1);
 }

 #notify img {
@ -176,17 +188,17 @@ a:hover {
 	background-color : #fff7d5;
 }

-.notify.progress {
+.notify.notify_progress {
 	border-color : #d7c47a;
 	background-color : #fff7d5;
 }

-.notify.info {
+.notify.notify_info {
 	border-color : #88b0f0;
 	background-color : #ecf4ff;
 }

-.notify.error {
+.notify.notify_error {
 	background-color : #ffcccc;
 	border-color : #ff0000;
 }
--- a/index.php
+++ b/index.php
@ -138,7 +138,7 @@
 	</div>
 </div>

-<div id="notify" class="notify" style="display : none"></div>
+<div id="notify" class="notify"></div>
 <div id="cmdline" style="display : none"></div>
 <div id="headlines-tmp" style="display : none"></div>

--- a/js/functions.js
+++ b/js/functions.js
@ -182,11 +182,6 @@ function param_unescape(arg) {
 		return unescape(arg);
 }

-
-function hide_notify() {
-	Element.hide('notify');
-}
-
 function notify_real(msg, no_hide, n_type) {

 	var n = $("notify");
@ -198,13 +193,11 @@ function notify_real(msg, no_hide, n_type) {
 	}

 	if (msg == "") {
-		if (Element.visible(n)) {
-			notify_hide_timerid = window.setTimeout("hide_notify()", 0);
+		if (n.hasClassName("visible")) {
+			notify_hide_timerid = window.setTimeout(function() {
+				n.removeClassName("visible") }, 0);
 		}
 		return;
-	} else {
-		Element.show(n);
-		new Effect.Highlight(n);
 	}

 	/* types:
@ -218,18 +211,18 @@ function notify_real(msg, no_hide, n_type) {

 	msg = "<span class=\"msg\"> " + __(msg) + "</span>";

-	if (n_type == 1) {
-		n.className = "notify";
-	} else if (n_type == 2) {
-		n.className = "notify progress";
+	if (n_type == 2) {
+		n.className = "notify notify_progress visible";
 		msg = "<span><img src='images/indicator_white.gif'></span>" + msg;
 		no_hide = true;
 	} else if (n_type == 3) {
-		n.className = "notify error";
+		n.className = "notify notify_error visible";
 		msg = "<span><img src='images/alert.png'></span>" + msg;
 	} else if (n_type == 4) {
-		n.className = "notify info";
+		n.className = "notify notify_info visible";
 		msg = "<span><img src='images/information.png'></span>" + msg;
+	} else {
+		n.className = "notify visible";
 	}

 	msg += " <span><img src=\"images/cross.png\" class=\"close\" title=\"" +
@ -240,7 +233,8 @@ function notify_real(msg, no_hide, n_type) {
 	n.innerHTML = msg;

 	if (!no_hide) {
-		notify_hide_timerid = window.setTimeout("hide_notify()", 5*1000);
+		notify_hide_timerid = window.setTimeout(function() {
+				n.removeClassName("visible") }, 5*1000);
 	}
 }

--- a/prefs.php
+++ b/prefs.php
@ -94,7 +94,7 @@

 <body id="ttrssPrefs" class="claro">

-<div id="notify" class="notify" style="display : none"></div>
+<div id="notify" class="notify"></div>
 <div id="cmdline" style="display : none"></div>

 <div id="overlay">