update alerts

6 files changed, 204 insertions, 39 deletions

diff --git a/server/sonar-web/src/main/js/application.js b/server/sonar-web/src/main/js/application.js
index dba8ef02702..4a211ed867f 100644
--- a/server/sonar-web/src/main/js/application.js
+++ b/server/sonar-web/src/main/js/application.js
@@ -17,19 +17,80 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-function showMessage (div_id, message) {
-  $j('#' + div_id + 'msg').html(message);
-  $j('#' + div_id).show();
+
+/**
+ * Show a global message
+ * @param {string} id
+ * @param {string} message
+ */
+function showMessage (id, message) {
+  $j('#' + id + 'msg').html(message);
+  $j('#' + id).removeClass('hidden');
+  $j('#messages-panel').removeClass('hidden');
+}
+
+/**
+ * Hide a global message
+ * @param {string} id
+ * @returns {boolean} always false
+ */
+function hideMessage (id) {
+  $j('#' + id).addClass('hidden');
+  var messagePanel = $j('#messages-panel'),
+      isEmpty = messagePanel.children('*:not(.hidden)').length === 0;
+  messagePanel.toggleClass('hidden', isEmpty);
+  return false;
 }
+
+/**
+ * Show a global error message
+ * @param {string} message
+ */
 function error (message) {
   showMessage('error', message);
 }
+
+/**
+ * Show a global warning message
+ * @param {string} message
+ */
 function warning (message) {
   showMessage('warning', message);
 }
+
+/**
+ * Show a global info message
+ * @param {string} message
+ */
 function info (message) {
   showMessage('info', message);
 }
+
+/**
+ * Hide a global error message
+ * @returns {boolean} always false
+ */
+function hideError () {
+  return hideMessage('error');
+}
+
+/**
+ * Hide a global warning message
+ * @returns {boolean} always false
+ */
+function hideWarning () {
+  return hideMessage('warning');
+}
+
+/**
+ * Hide a global info message
+ * @returns {boolean} always false
+ */
+function hideInfo () {
+  return hideMessage('info');
+}
+
+
 function toggleFav (resourceId, elt) {
   $j.ajax({
     type: 'POST', dataType: 'json', url: baseUrl + '/favourites/toggle/' + resourceId,
diff --git a/server/sonar-web/src/main/less/components/alerts.less b/server/sonar-web/src/main/less/components/alerts.less
index 2142efd5393..f3023d48d9a 100644
--- a/server/sonar-web/src/main/less/components/alerts.less
+++ b/server/sonar-web/src/main/less/components/alerts.less
@@ -25,12 +25,9 @@
 
 .alert {
   display: block;
+  margin-bottom: 8px;
   padding: 5px 8px;
-  border: 2px solid @secondFontColor;
-}
-
-.alert + .alert:not(.hidden):not(:empty) {
-  margin-top: 5px;
+  border: 1px solid @secondFontColor;
 }
 
 .alert:empty { display: none; }
@@ -38,14 +35,14 @@
 
 // Color
 
-.alert-emphasis-variant(@color) {
-  background-color: @white;
-  border-color: @color;
+.alert-emphasis-variant(@color, @background-color, @border-color) {
+  border-color: @border-color;
+  background-color: @background-color;
   color: @color;
 }
-.alert-danger  { .alert-emphasis-variant(@red); }
-.alert-warning { .alert-emphasis-variant(@orange); }
-.alert-info    { .alert-emphasis-variant(@blue); }
-.alert-success { .alert-emphasis-variant(@green); }
+.alert-danger  { .alert-emphasis-variant(#a94442, #f2dede, #ebccd1); }
+.alert-warning { .alert-emphasis-variant(#8a6d3b, #fcf8e3, #faebcc); }
+.alert-info    { .alert-emphasis-variant(#31708f, #d9edf7, #bce8f1); }
+.alert-success { .alert-emphasis-variant(#3c763d, #dff0d8, #d6e9c6); }
 
 
diff --git a/server/sonar-web/src/main/less/deprecated.less b/server/sonar-web/src/main/less/deprecated.less
index bcc68a4f0e4..b1c2448697a 100644
--- a/server/sonar-web/src/main/less/deprecated.less
+++ b/server/sonar-web/src/main/less/deprecated.less
@@ -96,33 +96,27 @@
 .warning, .modal-warning {
   margin: 0 0 8px;
   padding: 5px 8px;
-  border: 2px solid @orange;
-  background-color: @white;
-  color: @orange;
+  border: 2px solid #faebcc;
+  background-color: #fcf8e3;
+  color: #8a6d3b;
 }
 
 // use `.alert.alert-danger` instead
 .error, .modal-error {
   margin: 0 0 8px;
   padding: 5px 8px;
-  border: 2px solid @red;
-  background-color: @white;
-  color: @red;
+  border: 1px solid #ebccd1;
+  background-color: #f2dede;
+  color: #a94442;
 }
 
 // use `.alert.alert-success` or `.alert.alert-info` instead
-.notice, .modal-notice {
+.notice, .modal-notice, .info {
   margin: 0 0 8px;
   padding: 5px 8px;
-  border: 2px solid @green;
-  background-color: @white;
-  color: @green;
-}
-
-.info {
-  border: 2px solid @blue;
-  background-color: @white;
-  color: @blue;
+  border: 1px solid #bce8f1;
+  background-color: #d9edf7;
+  color: #31708f;
 }
 
 div.operations {
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
index 05650669b80..ab2880d29be 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
@@ -18,14 +18,16 @@
 
   <div id="body" class="page-container">
     <div id="content">
-      <div class="error" id="error" style="display:none">
-        <span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#error').hide();return false;"><%= message('hide').downcase -%></a>]
-      </div>
-      <div class="notice" id="info" style="display:none">
-        <span id="infomsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#info').hide();return false;"><%= message('hide').downcase -%></a>]
-      </div>
-      <div class="warning" id="warning" style="display:none">
-        <span id="warningmsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#warning').hide();return false;"><%= message('hide').downcase -%></a>]
+      <div class="panel hidden" id="messages-panel">
+        <div class="alert alert-danger hidden" id="error">
+          <span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="return hideError();"><%= message('hide').downcase -%></a>]
+        </div>
+        <div class="alert alert-info hidden" id="info">
+          <span id="infomsg"></span> &nbsp;&nbsp;[<a href="#" onclick="return hideInfo();"><%= message('hide').downcase -%></a>]
+        </div>
+        <div class="alert alert-warning hidden" id="warning">
+          <span id="warningmsg"></span> &nbsp;&nbsp;[<a href="#" onclick="return hideWarning();"><%= message('hide').downcase -%></a>]
+        </div>
       </div>
       <%= yield %>
     </div>
diff --git a/server/sonar-web/src/test/js/ui.js b/server/sonar-web/src/test/js/ui.js
new file mode 100644
index 00000000000..8b5d67b6c99
--- /dev/null
+++ b/server/sonar-web/src/test/js/ui.js
@@ -0,0 +1,96 @@
+/*
+ * SonarQube, open source software quality management tool.
+ * Copyright (C) 2008-2014 SonarSource
+ * mailto:contact AT sonarsource DOT com
+ *
+ * SonarQube is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * SonarQube is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+/* globals casper: false */
+
+var lib = require('../lib'),
+    testName = lib.testName('UI');
+
+
+lib.initMessages();
+lib.configureCasper();
+
+
+casper.test.begin(testName('Global Messages'), 27, function (test) {
+  casper
+      .start(lib.buildUrl('ui-global-messages'), function () {
+        lib.setDefaultViewport();
+      })
+
+      .then(function () {
+        test.assertExists('#messages-panel');
+        test.assertNotVisible('#messages-panel');
+        test.assertExists('#error');
+        test.assertNotVisible('#error');
+        test.assertExists('#warning');
+        test.assertNotVisible('#warning');
+        test.assertExists('#info');
+        test.assertNotVisible('#info');
+      })
+
+      .then(function () {
+        casper.evaluate(function () {
+          error('some error message');
+          warning('some warning message');
+          info('some info message');
+        });
+      })
+
+      .then(function () {
+        test.assertVisible('#messages-panel');
+        test.assertVisible('#error');
+        test.assertVisible('#warning');
+        test.assertVisible('#info');
+        test.assertSelectorContains('#error', 'some error message');
+        test.assertSelectorContains('#warning', 'some warning message');
+        test.assertSelectorContains('#info', 'some info message');
+      })
+
+      .then(function () {
+        casper.click('#error a');
+        test.assertVisible('#messages-panel');
+        test.assertNotVisible('#error');
+        test.assertVisible('#warning');
+        test.assertVisible('#info');
+      })
+
+      .then(function () {
+        casper.click('#info a');
+        test.assertVisible('#messages-panel');
+        test.assertNotVisible('#error');
+        test.assertVisible('#warning');
+        test.assertNotVisible('#info');
+      })
+
+      .then(function () {
+        casper.click('#warning a');
+        test.assertNotVisible('#messages-panel');
+        test.assertNotVisible('#error');
+        test.assertNotVisible('#warning');
+        test.assertNotVisible('#info');
+      })
+
+      .then(function () {
+        lib.sendCoverage();
+      })
+
+      .run(function () {
+        test.done();
+      });
+});
diff --git a/server/sonar-web/src/test/views/ui-global-messages.jade b/server/sonar-web/src/test/views/ui-global-messages.jade
new file mode 100644
index 00000000000..20f6707570d
--- /dev/null
+++ b/server/sonar-web/src/test/views/ui-global-messages.jade
@@ -0,0 +1,15 @@
+extends layouts/main
+
+block body
+  div.
+    <div class="panel hidden" id="messages-panel">
+      <div class="alert alert-danger hidden" id="error">
+        <span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="return hideError();"><%= message('hide').downcase -%></a>]
+      </div>
+      <div class="alert alert-info hidden" id="info">
+        <span id="infomsg"></span> &nbsp;&nbsp;[<a href="#" onclick="return hideInfo();"><%= message('hide').downcase -%></a>]
+      </div>
+      <div class="alert alert-warning hidden" id="warning">
+        <span id="warningmsg"></span> &nbsp;&nbsp;[<a href="#" onclick="return hideWarning();"><%= message('hide').downcase -%></a>]
+      </div>
+    </div>