tweak notifications; use css animations for notifications
This commit is contained in:
Andrew Dolgov
parent
e44280a0bd
commit
d9c93ebfdb
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue