From 0e090954cbeefebe2c7946110ad1285d654cb961 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Wed, 27 Jan 2016 13:18:47 +0100
Subject: [PATCH] SONAR-7227 improve overall rendering

---
 .../sonar-web/src/main/js/apps/account/app.js |  5 +-
 .../components/FavoriteIssueFilters.js        |  2 +-
 .../components/FavoriteMeasureFilters.js      |  2 +-
 .../js/apps/account/components/Favorites.js   |  2 +-
 .../main/js/apps/account/components/Home.js   | 50 ++++++++++++++++---
 .../main/js/apps/account/components/Nav.js    | 20 +++-----
 .../apps/account/components/Notifications.js  |  2 +-
 .../js/apps/account/components/UserCard.js    | 47 +++++------------
 .../js/apps/account/containers/AccountApp.js  |  2 +-
 .../main/js/apps/account/styles/account.css   | 20 ++++++++
 10 files changed, 91 insertions(+), 61 deletions(-)
 create mode 100644 server/sonar-web/src/main/js/apps/account/styles/account.css

diff --git a/server/sonar-web/src/main/js/apps/account/app.js b/server/sonar-web/src/main/js/apps/account/app.js
index fe969e8ad7d..dc52a4fc013 100644
--- a/server/sonar-web/src/main/js/apps/account/app.js
+++ b/server/sonar-web/src/main/js/apps/account/app.js
@@ -29,6 +29,8 @@ import Home from './components/Home';
 import NotificationsContainer from './containers/NotificationsContainer';
 import SecurityContainer from './containers/SecurityContainer';
 
+import './styles/account.css';
+
 window.sonarqube.appStarted.then(options => {
   const el = document.querySelector(options.el);
 
@@ -38,9 +40,6 @@ window.sonarqube.appStarted.then(options => {
 
   const store = configureStore();
 
-  document.querySelector('html').classList.add('dashboard-page');
-  document.querySelector('#container').classList.add('page-wrapper-context');
-
   render((
       <Provider store={store}>
         <Router history={history}>
diff --git a/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js b/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js
index 80cbac9d451..2069cb15bc6 100644
--- a/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js
+++ b/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js
@@ -22,7 +22,7 @@ import React from 'react';
 import { translate } from '../../../helpers/l10n';
 
 const FavoriteIssueFilters = ({ issueFilters }) => (
-    <section className="big-spacer-bottom">
+    <section className="huge-spacer-top">
       <h2 className="spacer-bottom">
         {translate('my_account.favorite_issue_filters')}
       </h2>
diff --git a/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js b/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js
index 3e528ed2cd9..30ade911282 100644
--- a/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js
+++ b/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js
@@ -22,7 +22,7 @@ import React from 'react';
 import { translate } from '../../../helpers/l10n';
 
 const FavoriteMeasureFilters = ({ measureFilters }) => (
-    <section className="big-spacer-bottom">
+    <section className="huge-spacer-top">
       <h2 className="spacer-bottom">
         {translate('my_account.favorite_measure_filters')}
       </h2>
diff --git a/server/sonar-web/src/main/js/apps/account/components/Favorites.js b/server/sonar-web/src/main/js/apps/account/components/Favorites.js
index 5466066a803..a4e4b044520 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Favorites.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Favorites.js
@@ -25,7 +25,7 @@ import { translate } from '../../../helpers/l10n';
 import { getComponentUrl } from '../../../helpers/urls';
 
 const Favorites = ({ favorites }) => (
-    <section className="big-spacer-bottom">
+    <section>
       <h2 className="spacer-bottom">
         {translate('my_account.favorite_components')}
       </h2>
diff --git a/server/sonar-web/src/main/js/apps/account/components/Home.js b/server/sonar-web/src/main/js/apps/account/components/Home.js
index f9a76bf27f9..1c22bfb81a8 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Home.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Home.js
@@ -19,18 +19,56 @@
  */
 import React from 'react';
 
-import UserCard from './UserCard';
 import Favorites from './Favorites';
 import FavoriteIssueFilters from './FavoriteIssueFilters';
 import FavoriteMeasureFilters from './FavoriteMeasureFilters';
+import { translate } from '../../../helpers/l10n';
 
 const Home = ({ user, favorites, issueFilters, measureFilters }) => (
     <div>
-      <UserCard user={user}/>
-      <div className="overflow-hidden">
-        <Favorites favorites={favorites}/>
-        {issueFilters && <FavoriteIssueFilters issueFilters={issueFilters}/>}
-        {measureFilters && <FavoriteMeasureFilters measureFilters={measureFilters}/>}
+      <div className="columns">
+        <div className="column-third">
+          <Favorites favorites={favorites}/>
+          {issueFilters && <FavoriteIssueFilters issueFilters={issueFilters}/>}
+          {measureFilters && <FavoriteMeasureFilters measureFilters={measureFilters}/>}
+        </div>
+
+        <div className="column-third">
+          <section>
+            <h2 className="spacer-bottom">{translate('issues.page')}</h2>
+            <p>Some cool issue widgets go here...</p>
+          </section>
+        </div>
+
+        <div className="column-third">
+          <section>
+            <h2 className="spacer-bottom">{translate('my_profile.groups')}</h2>
+            <ul id="groups">
+              {user.groups.map(group => (
+                  <li
+                      key={group}
+                      className="little-spacer-bottom text-ellipsis"
+                      title={group}>
+                    {group}
+                  </li>
+              ))}
+            </ul>
+          </section>
+
+          <section className="huge-spacer-top">
+            <h2 className="spacer-bottom">{translate('my_profile.scm_accounts')}</h2>
+            <ul id="scm-accounts">
+              {user.scmAccounts.map(scmAccount => (
+                  <li
+                      key={scmAccount}
+                      className="little-spacer-bottom text-ellipsis"
+                      title={scmAccount}>
+                    {scmAccount}
+                  </li>
+              ))}
+            </ul>
+          </section>
+        </div>
       </div>
     </div>
 );
diff --git a/server/sonar-web/src/main/js/apps/account/components/Nav.js b/server/sonar-web/src/main/js/apps/account/components/Nav.js
index 4a49e1f7520..fe826c18184 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Nav.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Nav.js
@@ -20,18 +20,14 @@
 import React from 'react';
 import { IndexLink } from 'react-router';
 
+import UserCard from './UserCard';
 import { translate } from '../../../helpers/l10n';
 
-const Nav = () => (
-    <nav className="navbar navbar-context page-container">
-      <div className="container">
-        <ul className="nav navbar-nav nav-crumbs">
-          <li>
-            <IndexLink to="/" activeClassName="active">
-              {translate('my_account.page')}
-            </IndexLink>
-          </li>
-        </ul>
+const Nav = ({ user }) => (
+    <header className="account-header">
+      <UserCard user={user}/>
+
+      <nav className="account-nav clearfix">
         <ul className="nav navbar-nav nav-tabs">
           <li>
             <IndexLink to="/" activeClassName="active">
@@ -49,8 +45,8 @@ const Nav = () => (
             </IndexLink>
           </li>
         </ul>
-      </div>
-    </nav>
+      </nav>
+    </header>
 );
 
 export default Nav;
diff --git a/server/sonar-web/src/main/js/apps/account/components/Notifications.js b/server/sonar-web/src/main/js/apps/account/components/Notifications.js
index 45a9d5839eb..75784ae9aa1 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Notifications.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Notifications.js
@@ -28,7 +28,7 @@ export default function Notifications ({ globalNotifications, projectNotificatio
 
   return (
       <div>
-        <p className="big-spacer-bottom">
+        <p className="spacer-top big-spacer-bottom">
           {translate('notification.dispatcher.information')}
         </p>
         <form id="notif_form" method="post" action={`${window.baseUrl}/account/update_notifications`}>
diff --git a/server/sonar-web/src/main/js/apps/account/components/UserCard.js b/server/sonar-web/src/main/js/apps/account/components/UserCard.js
index 327ab9e5b02..74d120e7942 100644
--- a/server/sonar-web/src/main/js/apps/account/components/UserCard.js
+++ b/server/sonar-web/src/main/js/apps/account/components/UserCard.js
@@ -20,41 +20,18 @@
 import React from 'react';
 
 import Avatar from '../../../components/shared/avatar';
-import { translate } from '../../../helpers/l10n';
 
-const UserCard = ({ user }) => (
-    <div className="pull-left big-spacer-right abs-width-240">
-      <div className="panel panel-white">
-        <div className="text-center">
-          <div id="avatar" className="big-spacer-bottom">
-            <Avatar email={user.email} size={100}/>
-          </div>
-          <h2 id="name" className="text-ellipsis" title={user.name}>{user.name}</h2>
-          <p id="login" className="note text-ellipsis" title={user.login}>{user.login}</p>
-          <div className="text-center spacer-top">
-            <p id="email" className="text-ellipsis" title={user.email}>{user.email}</p>
-          </div>
+export default function UserCard ({ user }) {
+  return (
+      <section className="account-user clearfix">
+        <div id="avatar" className="account-nav-avatar">
+          <Avatar email={user.email} size={48}/>
         </div>
-
-        <div className="big-spacer-top">
-          <h3 className="text-center">{translate('my_profile.groups')}</h3>
-          <ul id="groups">
-            {user.groups.map(group => (
-                <li key={group} className="text-ellipsis" title={group}>{group}</li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="big-spacer-top">
-          <h3 className="text-center">{translate('my_profile.scm_accounts')}</h3>
-          <ul id="scm-accounts">
-            {user.scmAccounts.map(scmAccount => (
-                <li key={scmAccount} className="text-ellipsis" title={scmAccount}>{scmAccount}</li>
-            ))}
-          </ul>
+        <div>
+          <h1 id="name" className="display-inline-block">{user.name}</h1>
+          <span id="login" className="note big-spacer-left">{user.login}</span>
         </div>
-      </div>
-    </div>
-);
-
-export default UserCard;
+        <div id="email" className="little-spacer-top">{user.email}</div>
+      </section>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js b/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js
index 6325b562420..967e686843c 100644
--- a/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js
+++ b/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js
@@ -48,7 +48,7 @@ export default class AccountApp extends Component {
 
     return (
         <div>
-          <Nav/>
+          <Nav user={user}/>
           <div className="page">
             {children}
           </div>
diff --git a/server/sonar-web/src/main/js/apps/account/styles/account.css b/server/sonar-web/src/main/js/apps/account/styles/account.css
new file mode 100644
index 00000000000..e308d9234bc
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/styles/account.css
@@ -0,0 +1,20 @@
+.account-header {
+  background-color: #f3f3f3;
+}
+
+.account-nav {
+
+}
+
+.account-nav .nav-tabs {
+  width: 100%;
+}
+
+.account-user {
+  padding: 10px;
+}
+
+.account-nav-avatar {
+  float: left;
+  margin-right: 20px;
+}
-- 
2.39.5