提交 d0c9ee65 编写于 作者: K Kohsuke Kawaguchi

Touch up and doc improvement.

Also animate color so that a transition from one notification to another
will appear more smoothly.

Promoted all members of defaultOptions.* up the dot to make core more
terse.
上级 87130a4d
...@@ -48,7 +48,7 @@ public class FormApply { ...@@ -48,7 +48,7 @@ public class FormApply {
public void generateResponse(StaplerRequest req, StaplerResponse rsp, Object node) throws IOException, ServletException { public void generateResponse(StaplerRequest req, StaplerResponse rsp, Object node) throws IOException, ServletException {
if (isApply(req)) { if (isApply(req)) {
// if the submission is via 'apply', show a response in the notification bar // if the submission is via 'apply', show a response in the notification bar
applyResponse("notificationBar.show('"+Messages.HttpResponses_Saved()+"',notificationBar.defaultOptions.OK)") applyResponse("notificationBar.show('"+Messages.HttpResponses_Saved()+"',notificationBar.OK)")
.generateResponse(req,rsp,node); .generateResponse(req,rsp,node);
} else { } else {
rsp.sendRedirect(destination); rsp.sendRedirect(destination);
......
...@@ -7,11 +7,16 @@ def st=namespace("jelly:stapler") ...@@ -7,11 +7,16 @@ def st=namespace("jelly:stapler")
t=namespace(JenkinsTagLib.class) t=namespace(JenkinsTagLib.class)
namespace("/lib/samples").sample(title:_("Notification Bar")) { namespace("/lib/samples").sample(title:_("Notification Bar")) {
p(_("blurb")) raw(_("blurb"))
p("To show a notification bar, call <tt>notificationBar.show('message')"); raw("To show a notification bar, call <tt>notificationBar.show('message')</tt><")
button(onclick:"notificationBar.show('This is a notification');", "Show a notification bar") button(onclick:"notificationBar.show('This is a notification');", "Show a notification bar")
p(_("blurb.hide")) raw(_("blurb.hide"))
button(onclick:"notificationBar.hide();", "Hide it now") button(onclick:"notificationBar.hide();", "Hide it now")
raw(_("blurb.stock"))
button(onclick:"notificationBar.show('it worked!', notificationBar.OK );", "OK")
button(onclick:"notificationBar.show('something went wrong',notificationBar.WARNING);", "WARNING")
button(onclick:"notificationBar.show('something went wrong',notificationBar.ERROR);", "ERROR")
} }
blurb=Notification bar shows a message that disappears in a few seconds. \ blurb=<p>Notification bar shows a message that disappears in a few seconds. \
It is typically used to provide feedback for asynchronous operations. It is typically used to provide feedback for asynchronous operations.
blurb.hide=A notification bar will auto-hide itself, but you can programmatically hide it via <tt>notificationBar.hide()</tt> blurb.hide=<p>A notification bar will auto-hide itself, but you can programmatically hide it via <tt>notificationBar.hide()</tt>
\ No newline at end of file
blurb.stock=<p>For typical notifications, there are several pre-defined option set available as constants that you can use as <tt>notificationBar.show(msg,notificationBar.OK)</tt>
\ No newline at end of file
...@@ -2611,16 +2611,18 @@ var notificationBar = { ...@@ -2611,16 +2611,18 @@ var notificationBar = {
div : null, // the main 'notification-bar' DIV div : null, // the main 'notification-bar' DIV
token : null, // timer for cancelling auto-close token : null, // timer for cancelling auto-close
defaultOptions : {// standard option values for typical notifications OK : {// standard option values for typical OK notification
OK : { icon: "accept.png",
icon: "accept.png", backgroundColor: "#8ae234"
backgroundColor: "#8ae234" },
}, WARNING : {// likewise, for warning
ERROR : { icon: "yellow.png",
icon: "red.png", backgroundColor: "#fce94f"
backgroundColor: "#ef2929", },
sticky: true ERROR : {// likewise, for error
} icon: "red.png",
backgroundColor: "#ef2929",
sticky: true
}, },
init : function() { init : function() {
...@@ -2628,6 +2630,7 @@ var notificationBar = { ...@@ -2628,6 +2630,7 @@ var notificationBar = {
this.div = document.createElement("div"); this.div = document.createElement("div");
YAHOO.util.Dom.setStyle(this.div,"opacity",0); YAHOO.util.Dom.setStyle(this.div,"opacity",0);
this.div.id="notification-bar"; this.div.id="notification-bar";
this.div.style.backgroundColor="#fff";
document.body.insertBefore(this.div, document.body.firstChild); document.body.insertBefore(this.div, document.body.firstChild);
var self = this; var self = this;
...@@ -2646,8 +2649,9 @@ var notificationBar = { ...@@ -2646,8 +2649,9 @@ var notificationBar = {
hide : function () { hide : function () {
this.clearTimeout(); this.clearTimeout();
var self = this; var self = this;
var out = new YAHOO.util.Anim(this.div, { var out = new YAHOO.util.ColorAnim(this.div, {
opacity: { to:0 } opacity: { to:0 },
backgroundColor: {to:"#fff"}
}, 0.3, YAHOO.util.Easing.easeIn); }, 0.3, YAHOO.util.Easing.easeIn);
out.onComplete.subscribe(function() { out.onComplete.subscribe(function() {
self.div.style.display = "none"; self.div.style.display = "none";
...@@ -2659,7 +2663,6 @@ var notificationBar = { ...@@ -2659,7 +2663,6 @@ var notificationBar = {
options = options || {} options = options || {}
this.init(); this.init();
this.div.style.backgroundColor = options.backgroundColor || "#fff";
this.div.style.height = this.div.style.lineHeight = options.height || "40px"; this.div.style.height = this.div.style.lineHeight = options.height || "40px";
this.div.style.display = "block"; this.div.style.display = "block";
...@@ -2667,8 +2670,9 @@ var notificationBar = { ...@@ -2667,8 +2670,9 @@ var notificationBar = {
text = "<img src='"+rootURL+"/images/24x24/"+options.icon+"'> "+text; text = "<img src='"+rootURL+"/images/24x24/"+options.icon+"'> "+text;
this.div.innerHTML = text; this.div.innerHTML = text;
new YAHOO.util.Anim(this.div, { new YAHOO.util.ColorAnim(this.div, {
opacity: { to:this.OPACITY } opacity: { to:this.OPACITY },
backgroundColor : { to: options.backgroundColor || "#fff" }
}, 1, YAHOO.util.Easing.easeOut).animate(); }, 1, YAHOO.util.Easing.easeOut).animate();
this.clearTimeout(); this.clearTimeout();
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册