[JENKINS-61478] Moving alert styles and animations to CSS

war/src/main/less/abstracts/colors.less

@@ -28,9 +28,30 @@
 @breadcrumbs-bg: #f8f8f8;
 @breadcrumbs-border: #EAEFF2;
 
-// Monitor / alert new colors
+// Monitor / bell-alert new colors
 @monitor-bg-v2: #f8d7da;
 @monitor-color-v2: #721c24;
 
+// Alert banners
+@alert-default-icon-color: #2196f3;
+@alert-default-bg-color: #d1ecf1;
+@alert-default-border-color: #bee5eb;
+@alert-default-color: #0C5464;
+
+@alert-success-icon-color: #4caf50;
+@alert-success-bg-color: #d4edda;
+@alert-success-border-color: #c3e6cb;
+@alert-success-color: #155724;
+
+@alert-warn-icon-color: #ff9800;
+@alert-warn-bg-color: #fff3cd;
+@alert-warn-border-color: #ffeeba;
+@alert-warn-color: #856404;
+
+@alert-err-icon-color: #f44336;
+@alert-err-bg-color: #f8d7da;
+@alert-err-border-color: #f5c6cb;
+@alert-err-color: #721c24;
+
 // Typography
 @text-color: #333;
\ No newline at end of file

war/src/main/less/base/style.less

@@ -1598,6 +1598,74 @@ table.progress-bar.red td.progress-bar-done {
     border-bottom: 1px solid black;
 }
 
+#notification-bar .svg-icon {
+  width: 35px;
+  height: 35px;
+  padding-bottom: 5px
+}
+
+#notification-bar.notif-alert-default {
+  background-color: @alert-default-bg-color;
+  border-color: @alert-default-border-color;
+  color: @alert-default-color;
+  .svg-icon {
+    color: @alert-default-icon-color;
+  }
+}
+
+#notification-bar.notif-alert-success {
+  background-color: @alert-success-bg-color;
+  border-color: @alert-success-border-color;
+  color: @alert-success-color;
+  .svg-icon {
+    color: @alert-success-icon-color;
+  }
+}
+
+#notification-bar.notif-alert-warn {
+  background-color: @alert-warn-bg-color;
+  border-color: @alert-warn-border-color;
+  color: @alert-warn-color;
+  .svg-icon {
+    color: @alert-warn-icon-color;
+  }
+}
+
+#notification-bar.notif-alert-err {
+  background-color: @alert-err-bg-color;
+  border-color: @alert-err-border-color;
+  color: @alert-err-color;
+  .svg-icon {
+    color: @alert-err-icon-color;
+  }
+}
+
+#notification-bar.notif-alert-show {
+  -webkit-animation: fadein 1s linear 1 normal forwards;
+}
+
+#notification-bar.notif-alert-clear {
+  -webkit-animation: fadeout 0.7s linear 1 normal forwards;
+}
+
+@-webkit-keyframes fadein{
+  from{
+    opacity: 0;
+  }
+  to{
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout{
+  from{
+    opacity: 1;
+  }
+  to{
+    opacity: 0;
+  }
+}
+
 /* ========================= YUI dialog ========================= */
 
 .dialog .hd {

war/src/main/webapp/scripts/hudson-behavior.js

@@ -2874,31 +2874,19 @@ var notificationBar = {
     div : null,     // the main 'notification-bar' DIV
     token : null,   // timer for cancelling auto-close
     defaultIcon: "svg-sprite-action-symbol.svg#ic_info_24px",
-    defaultIconColor: "#2196f3",
-    defaultBackgroundColor: "#d1ecf1",
-    defaultBorderColor: "#bee5eb",
-    defaultColor: "#0C5464",
+    defaultAlertClass: "notif-alert-default",
 
     OK : {// standard option values for typical OK notification
         icon: "svg-sprite-action-symbol.svg#ic_check_circle_24px",
-        iconColor: "#4caf50",
-        backgroundColor: "#d4edda",
-        borderColor: "#c3e6cb",
-        color: "#155724"
+        alertClass: "notif-alert-success",
     },
     WARNING : {// likewise, for warning
         icon: "svg-sprite-action-symbol.svg#ic_report_problem_24px",
-        iconColor: "#ff9800",
-        backgroundColor: "#fff3cd",
-        borderColor: "#ffeeba",
-        color: "#856404",
+        alertClass: "notif-alert-warn",
     },
     ERROR : {// likewise, for error
         icon: "svg-sprite-action-symbol.svg#ic_highlight_off_24px",
-        iconColor: "#f44336",
-        backgroundColor: "#f8d7da",
-        borderColor: "#f5c6cb",
-        color: "#721c24",
+        alertClass: "notif-alert-err",
         sticky: true
     },
 
@@ -2907,11 +2895,7 @@ var notificationBar = {
             this.div = document.createElement("div");
             YAHOO.util.Dom.setStyle(this.div,"opacity",0);
             this.div.id="notification-bar";
-            this.div.style.backgroundColor=this.defaultBackgroundColor;
-            this.div.style.color=this.defaultColor;
-            this.div.style.borderColor=this.defaultBorderColor;
             document.body.insertBefore(this.div, document.body.firstChild);
-
             var self = this;
             this.div.onclick = function() {
                 self.hide();
@@ -2927,35 +2911,20 @@ var notificationBar = {
     // hide the current notification bar, if it's displayed
     hide : function () {
         this.clearTimeout();
-        var self = this;
-        var out = new YAHOO.util.ColorAnim(this.div, {
-            opacity: { to:0 },
-            backgroundColor: {to:this.defaultBackgroundColor},
-            color: {to:this.defaultColor},
-            borderColor: {to:this.defaultBorderColor}
-        }, 0.3, YAHOO.util.Easing.easeIn);
-        out.onComplete.subscribe(function() {
-            self.div.style.display = "none";
-        })
-        out.animate();
+        this.div.classList.remove("notif-alert-show");
+        this.div.classList.add("notif-alert-clear");
     },
     // show a notification bar
     show : function (text,options) {
-        options = options || {}
-
+        options = options || {};
         this.init();
+        this.div.innerHTML = "<div style=color:"+(options.iconColor || this.defaultIconColor)+";display:inline-block;><svg viewBox='0 0 24 24' aria-hidden='' focusable='false' class='svg-icon'><use href='"+rootURL+"/images/material-icons/"+(options.icon || this.defaultIcon)+"'></use></svg></div><span> "+text+"</span>";
+
+        this.div.className=options.alertClass || this.defaultAlertClass;
+        this.div.classList.add("notif-alert-show");
         this.div.style.height = this.div.style.lineHeight = options.height || "3.5rem";
         this.div.style.display = "block";
 
-        this.div.innerHTML = "<div style=color:"+(options.iconColor || this.defaultIconColor)+";display:inline-block;><svg viewBox='0 0 24 24' aria-hidden='' focusable='false' class='svg-icon' style='padding-bottom: 5px;width:35px;height:35px'><use href='"+rootURL+"/images/material-icons/"+(options.icon || this.defaultIcon)+"'></use></svg></div><span> "+text+"</span>";
-
-        new YAHOO.util.ColorAnim(this.div, {
-            opacity: { to:this.OPACITY },
-            backgroundColor: {to: options.backgroundColor || this.defaultBackgroundColor},
-            color: {to: options.color || this.defaultColor},
-            borderColor: {to: options.borderColor || this.defaultBorderColor}
-        }, 1, YAHOO.util.Easing.easeOut).animate();
-
         this.clearTimeout();
         var self = this;
         if (!options.sticky)