diff options
| -rw-r--r-- | css/tt-rss.css | 30 | ||||
| -rw-r--r-- | index.php | 2 | ||||
| -rw-r--r-- | js/functions.js | 28 | ||||
| -rw-r--r-- | prefs.php | 2 |
4 files changed, 34 insertions, 28 deletions
diff --git a/css/tt-rss.css b/css/tt-rss.css index d732c13ba..d5737989a 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; } @@ -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 9915e6808..720a5654a 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); } } @@ -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"> |