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

View file

@ -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;
}

View file

@ -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>

View file

@ -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);
}
}

View file

@ -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">