From d9c93ebfdb860878609c6a59ef4df99f8f93643f Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Sun, 2 Nov 2014 20:58:46 +0300
Subject: [PATCH] tweak notifications; use css animations for notifications

---
 css/tt-rss.css  | 30 +++++++++++++++++++++---------
 index.php       |  2 +-
 js/functions.js | 28 +++++++++++-----------------
 prefs.php       |  2 +-
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/css/tt-rss.css b/css/tt-rss.css
index d732c13b..d5737989 100644
--- 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;
 }
diff --git a/index.php b/index.php
index 79d4ad58..74498b8f 100644
--- 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>
 
diff --git a/js/functions.js b/js/functions.js
index 9915e680..720a5654 100644
--- 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);
 	}
 }
 
diff --git a/prefs.php b/prefs.php
index 6a83295f..cc626779 100644
--- 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">
-- 
2.39.5