valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak notifications; use css animations for notifications

This commit is contained in:
Andrew Dolgov 2014-11-02 20:58:46 +03:00
parent e44280a0bd
commit d9c93ebfdb
4 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/tt-rss.css
View File

@ -138,18 +138,30 @@ a:hover {
position : absolute; 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 { #notify {
bottom : 10px; bottom : -35px;
right : 20px; right : 0px;
border-width : 1px; height : 20px;
left : 0px;
border-width : 1px 0px 0px 0px;
border-style : solid; border-style : solid;
position : absolute; position : absolute;
font-size : 12px; font-size : 12px;
z-index : 99; z-index : 99;
max-width : 200px;
min-width : 100px;
padding : 5px; padding : 5px;
-width : 200px; box-shadow : 0px -2px 2px rgba(0,0,0,0.1);
} }
#notify img { #notify img {
@ -176,17 +188,17 @@ a:hover {
background-color : #fff7d5; background-color : #fff7d5;
} }
.notify.progress { .notify.notify_progress {
border-color : #d7c47a; border-color : #d7c47a;
background-color : #fff7d5; background-color : #fff7d5;
} }
.notify.info { .notify.notify_info {
border-color : #88b0f0; border-color : #88b0f0;
background-color : #ecf4ff; background-color : #ecf4ff;
} }
.notify.error { .notify.notify_error {
background-color : #ffcccc; background-color : #ffcccc;
border-color : #ff0000; border-color : #ff0000;
} }

2
index.php
View File

@ -138,7 +138,7 @@
</div> </div>
</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="cmdline" style="display : none"></div>
<div id="headlines-tmp" style="display : none"></div> <div id="headlines-tmp" style="display : none"></div>

28
js/functions.js
View File

@ -182,11 +182,6 @@ function param_unescape(arg) {
return unescape(arg); return unescape(arg);
} }
function hide_notify() {
Element.hide('notify');
}
function notify_real(msg, no_hide, n_type) { function notify_real(msg, no_hide, n_type) {
var n = $("notify"); var n = $("notify");
@ -198,13 +193,11 @@ function notify_real(msg, no_hide, n_type) {
} }
if (msg == "") { if (msg == "") {
if (Element.visible(n)) { if (n.hasClassName("visible")) {
notify_hide_timerid = window.setTimeout("hide_notify()", 0); notify_hide_timerid = window.setTimeout(function() {
n.removeClassName("visible") }, 0);
} }
return; return;
} else {
Element.show(n);
new Effect.Highlight(n);
} }
/* types: /* types:
@ -218,18 +211,18 @@ function notify_real(msg, no_hide, n_type) {
msg = "<span class=\"msg\"> " + __(msg) + "</span>"; msg = "<span class=\"msg\"> " + __(msg) + "</span>";
if (n_type == 1) { if (n_type == 2) {
n.className = "notify"; n.className = "notify notify_progress visible";
} else if (n_type == 2) {
n.className = "notify progress";
msg = "<span><img src='images/indicator_white.gif'></span>" + msg; msg = "<span><img src='images/indicator_white.gif'></span>" + msg;
no_hide = true; no_hide = true;
} else if (n_type == 3) { } else if (n_type == 3) {
n.className = "notify error"; n.className = "notify notify_error visible";
msg = "<span><img src='images/alert.png'></span>" + msg; msg = "<span><img src='images/alert.png'></span>" + msg;
} else if (n_type == 4) { } else if (n_type == 4) {
n.className = "notify info"; n.className = "notify notify_info visible";
msg = "<span><img src='images/information.png'></span>" + msg; msg = "<span><img src='images/information.png'></span>" + msg;
} else {
n.className = "notify visible";
} }
msg += " <span><img src=\"images/cross.png\" class=\"close\" title=\"" + 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; n.innerHTML = msg;
if (!no_hide) { if (!no_hide) {
notify_hide_timerid = window.setTimeout("hide_notify()", 5*1000); notify_hide_timerid = window.setTimeout(function() {
n.removeClassName("visible") }, 5*1000);
} }
} }

2
prefs.php
View File

@ -94,7 +94,7 @@
<body id="ttrssPrefs" class="claro"> <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="cmdline" style="display : none"></div>
<div id="overlay"> <div id="overlay">