From: Andrew Dolgov Date: Sun, 2 Nov 2014 17:58:46 +0000 (+0300) Subject: tweak notifications; use css animations for notifications X-Git-Tag: 1.15~19 X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=d9c93ebfdb860878609c6a59ef4df99f8f93643f;p=tt-rss.git tweak notifications; use css animations for notifications --- 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 @@ -

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 = " " + __(msg) + ""; - 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 = "

" + msg; no_hide = true; } else if (n_type == 3) { - n.className = "notify error"; + n.className = "notify notify_error visible"; msg = "

" + msg; } else if (n_type == 4) { - n.className = "notify info"; + n.className = "notify notify_info visible"; msg = "

" + msg; + } else { + n.className = "notify visible"; } msg += " $\""$ -