tweak notifications; use css animations for notifications

diff --git a/css/tt-rss.css b/css/tt-rss.css
index d732c13ba6bd06cafe2a1a62e86f80341e0f4681..d5737989a03aa9c618ada8307315a811d7ccc9cf 100644 (file)
--- 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 79d4ad58df25010fba89e39331c20c6c8a90e4a3..74498b8f45a7f4a3b1ee47feeba2d74422d03674 100644 (file)
--- 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 9915e6808542c57f64be2904afec4be69247e686..720a5654a95d73e4f8d15af0ed09817088499f47 100644 (file)
--- 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 6a83295f87b671b83a02c6f619481f27485b4643..cc62677981dfc30f2632bb19a69efda228c43928 100644 (file)
--- 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">