* 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,
.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; }
// 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); }
.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 {
<div id="body" class="page-container">
<div id="content">
- <div class="error" id="error" style="display:none">
- <span id="errormsg"></span> [<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> [<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> [<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> [<a href="#" onclick="return hideError();"><%= message('hide').downcase -%></a>]
+ </div>
+ <div class="alert alert-info hidden" id="info">
+ <span id="infomsg"></span> [<a href="#" onclick="return hideInfo();"><%= message('hide').downcase -%></a>]
+ </div>
+ <div class="alert alert-warning hidden" id="warning">
+ <span id="warningmsg"></span> [<a href="#" onclick="return hideWarning();"><%= message('hide').downcase -%></a>]
+ </div>
</div>
<%= yield %>
</div>
--- /dev/null
+/*
+ * 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();
+ });
+});
--- /dev/null
+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> [<a href="#" onclick="return hideError();"><%= message('hide').downcase -%></a>]
+ </div>
+ <div class="alert alert-info hidden" id="info">
+ <span id="infomsg"></span> [<a href="#" onclick="return hideInfo();"><%= message('hide').downcase -%></a>]
+ </div>
+ <div class="alert alert-warning hidden" id="warning">
+ <span id="warningmsg"></span> [<a href="#" onclick="return hideWarning();"><%= message('hide').downcase -%></a>]
+ </div>
+ </div>