SONAR-8653 improve organization header

8 files changed, 97 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/api/organizations.js b/server/sonar-web/src/main/js/api/organizations.js
index 82aefacb744..4685c4ee2c9 100644
--- a/server/sonar-web/src/main/js/api/organizations.js
+++ b/server/sonar-web/src/main/js/api/organizations.js
@@ -29,11 +29,11 @@ export const getOrganizations = (organizations?: Array<string>) => {
 };
 
 type GetOrganizationType = null | {
-  avatar: null | string,
-  description: null | string,
+  avatar?: string,
+  description?: string,
   key: string,
   name: string,
-  url: null | string
+  url?: string
 };
 
 type GetOrganizationNavigation = {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.js b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.js
index feddf98a6d7..bde15bd5412 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.js
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.js
@@ -69,7 +69,7 @@ export default React.createClass({
     }
 
     return (
-        <div className="navbar-right navbar-context-meta">
+        <div className="navbar-context-meta">
           <ul className="list-inline">{metaList}</ul>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
index 18b927b8bb9..6b585676a77 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
@@ -21,6 +21,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { translate } from '../../../helpers/l10n';
+import OrganizationIcon from '../../../components/ui/OrganizationIcon';
 
 const ADMIN_PATHS = [
   'edit',
@@ -34,9 +35,12 @@ export default class OrganizationNavigation extends React.Component {
   props: {
     location: { pathname: string },
     organization: {
+      avatar?: string,
+      description?: string,
       key: string,
       name: string,
-      canAdmin?: boolean
+      canAdmin?: boolean,
+      url?: string
     }
   };
 
@@ -93,11 +97,36 @@ export default class OrganizationNavigation extends React.Component {
           <div className="navbar-context-inner">
             <div className="container">
               <h2 className="navbar-context-title">
+                <span className="navbar-context-title-qualifier little-spacer-right">
+                  <OrganizationIcon/>
+                </span>
                 <Link to={`/organizations/${organization.key}`} className="link-base-color">
                   <strong>{organization.name}</strong>
                 </Link>
               </h2>
 
+              {organization.description != null && (
+                  <div className="navbar-context-description">
+                    <p className="text-limited text-top" title={organization.description}>{organization.description}</p>
+                  </div>
+              )}
+
+
+              <div className="navbar-context-meta">
+                {!!organization.avatar && (
+                    <img src={organization.avatar} height={30} alt={organization.name}/>
+                )}
+                {organization.url != null && (
+                    <div>
+                      <p className="text-limited text-top">
+                        <a className="link-underline" href={organization.url} title={organization.url} rel="nofollow">
+                          {organization.url}
+                        </a>
+                      </p>
+                    </div>
+                )}
+              </div>
+
               <ul className="nav navbar-nav nav-tabs">
                 <li>
                   <Link to={`/organizations/${organization.key}/projects`} className={isHomeActive ? 'active': ''}>
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
index 192a70d796a..e781526e320 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
@@ -8,6 +8,10 @@ exports[`test admin 1`] = `
       className="container">
       <h2
         className="navbar-context-title">
+        <span
+          className="navbar-context-title-qualifier little-spacer-right">
+          <OrganizationIcon />
+        </span>
         <Link
           className="link-base-color"
           onlyActiveOnIndex={false}
@@ -18,6 +22,8 @@ exports[`test admin 1`] = `
           </strong>
         </Link>
       </h2>
+      <div
+        className="navbar-context-meta" />
       <ul
         className="nav navbar-nav nav-tabs">
         <li>
@@ -105,6 +111,10 @@ exports[`test regular user 1`] = `
       className="container">
       <h2
         className="navbar-context-title">
+        <span
+          className="navbar-context-title-qualifier little-spacer-right">
+          <OrganizationIcon />
+        </span>
         <Link
           className="link-base-color"
           onlyActiveOnIndex={false}
@@ -115,6 +125,8 @@ exports[`test regular user 1`] = `
           </strong>
         </Link>
       </h2>
+      <div
+        className="navbar-context-meta" />
       <ul
         className="nav navbar-nav nav-tabs">
         <li>
diff --git a/server/sonar-web/src/main/js/components/ui/OrganizationIcon.js b/server/sonar-web/src/main/js/components/ui/OrganizationIcon.js
new file mode 100644
index 00000000000..0b8505ee434
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/OrganizationIcon.js
@@ -0,0 +1,32 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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.
+ */
+// @flow
+import React from 'react';
+
+export default class OrganizationIcon extends React.Component {
+  render () {
+    /* eslint-disable max-len */
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+          <path style={{ fill: '#4b9fd5' }} d="M13.5 6c-.4 0-.7.1-1.1.2L11 4.8v-.3C11 3.1 9.9 2 8.5 2S6 3.1 6 4.5v.2L4.5 6.2c-.3-.1-.7-.2-1-.2C2.1 6 1 7.1 1 8.5S2.1 11 3.5 11 6 9.9 6 8.5c0-.7-.3-1.3-.7-1.7l1-1c.4.6 1 1 1.7 1.1V9c-1.1.2-2 1.2-2 2.4C6 12.9 7.1 14 8.5 14s2.5-1.1 2.5-2.5c0-1.2-.9-2.2-2-2.4V6.9c.7-.1 1.2-.5 1.6-1.1l1 1c-.4.4-.6 1-.6 1.6 0 1.4 1.1 2.5 2.5 2.5s2.5-1 2.5-2.4S14.9 6 13.5 6zm-10 4C2.7 10 2 9.3 2 8.5S2.7 7 3.5 7 5 7.7 5 8.5 4.3 10 3.5 10zm6.5 1.5c0 .8-.7 1.5-1.5 1.5S7 12.3 7 11.5 7.7 10 8.5 10s1.5.7 1.5 1.5zM8.5 6C7.7 6 7 5.3 7 4.5S7.7 3 8.5 3s1.5.7 1.5 1.5S9.3 6 8.5 6zm5 4c-.8 0-1.5-.7-1.5-1.5S12.7 7 13.5 7s1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/>
+        </svg>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/store/organizations/duck.js b/server/sonar-web/src/main/js/store/organizations/duck.js
index 00fa514c646..2d42f78795d 100644
--- a/server/sonar-web/src/main/js/store/organizations/duck.js
+++ b/server/sonar-web/src/main/js/store/organizations/duck.js
@@ -22,13 +22,13 @@ import { combineReducers } from 'redux';
 import omit from 'lodash/omit';
 
 export type Organization = {
-  avatar: null | string,
+  avatar?: string,
   canAdmin?: boolean,
-  description: null | string,
+  description?: string,
   isDefault?: boolean,
   key: string,
   name: string,
-  url: null | string
+  url?: string
 };
 
 type ReceiveOrganizationsAction = {
diff --git a/server/sonar-web/src/main/less/components/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
index 7c415cafc5c..9d13180f465 100644
--- a/server/sonar-web/src/main/less/components/navbar.less
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -235,11 +235,25 @@
 }
 
 .navbar-context-meta {
+  position: absolute;
+  top: 0;
+  right: 0;
   line-height: @navbarGlobalHeight;
-  padding: 0 10px;
+  padding: 5px 10px 0;
   color: @secondFontColor;
   font-size: @smallFontSize;
+  text-align: right;
 }
+
+.navbar-context-description {
+  float: left;
+  line-height: @formControlHeight;
+  padding-top: 4px;
+  padding-left: 4px;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+}
+
 .navbar-context-inner {
   position: fixed;
   z-index: 420;
diff --git a/server/sonar-web/src/main/less/init/links.less b/server/sonar-web/src/main/less/init/links.less
index 4f47e67b8bf..2cc5448987c 100644
--- a/server/sonar-web/src/main/less/init/links.less
+++ b/server/sonar-web/src/main/less/init/links.less
@@ -52,6 +52,7 @@ a {
 // Misc
 
 .link-no-underline { border-bottom: none; }
+.link-underline { border-bottom: 1px solid #cae3f2 !important; }
 
 .link-with-icon { border-bottom: none; }
 .link-with-icon > span:last-child { border-bottom: 1px solid @lightBlue; }