SONAR-9792 The fail background task status is now more visible

4 files changed, 56 insertions, 2 deletions

diff --git a/server/sonar-web/src/main/js/components/nav/ContextNavBar.css b/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
index 25f9470753a..0e527545ca2 100644
--- a/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
+++ b/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
@@ -9,6 +9,10 @@
   border-bottom: 1px solid #e6e6e6;
 }
 
+.navbar-context .navbar-inner-with-notif {
+  border-bottom: none;
+}
+
 .navbar-context-header {
   float: left;
   line-height: 30px;
diff --git a/server/sonar-web/src/main/js/components/nav/NavBar.css b/server/sonar-web/src/main/js/components/nav/NavBar.css
index e37b1188948..fb9393dd02e 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBar.css
+++ b/server/sonar-web/src/main/js/components/nav/NavBar.css
@@ -22,3 +22,9 @@
   padding-left: 20px;
   padding-right: 20px;
 }
+
+.navbar-notif.alert {
+  border-left: none;
+  border-right: none;
+  padding: 6px 0;
+}
diff --git a/server/sonar-web/src/main/js/components/nav/NavBar.tsx b/server/sonar-web/src/main/js/components/nav/NavBar.tsx
index bc760ba35a0..e44a3e9d722 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBar.tsx
+++ b/server/sonar-web/src/main/js/components/nav/NavBar.tsx
@@ -19,19 +19,24 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
+import NavBarNotif from './NavBarNotif';
 import './NavBar.css';
 
 interface Props {
   children?: any;
   className?: string;
   height: number;
+  notif?: React.ReactElement<NavBarNotif>;
 }
 
-export default function NavBar({ children, className, height, ...other }: Props) {
+export default function NavBar({ children, className, height, notif, ...other }: Props) {
   return (
     <nav {...other} className={classNames('navbar', className)} style={{ height }}>
-      <div className="navbar-inner" style={{ height }}>
+      <div
+        className={classNames('navbar-inner', { 'navbar-inner-with-notif': notif != null })}
+        style={{ height }}>
         <div className="navbar-limited clearfix">{children}</div>
+        {notif}
       </div>
     </nav>
   );
diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
new file mode 100644
index 00000000000..9004c1b7fe9
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program 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.
+ *
+ * This program 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.
+ */
+import * as React from 'react';
+import * as classNames from 'classnames';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default class NavBarNotif extends React.PureComponent<Props> {
+  render() {
+    if (!this.props.children) {
+      return null;
+    }
+    return (
+      <div className={classNames('navbar-notif', this.props.className)}>
+        <div className="navbar-limited clearfix">{this.props.children}</div>
+      </div>
+    );
+  }
+}