SONAR-8300 change layout

9 files changed, 109 insertions, 78 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/App.js b/server/sonar-web/src/main/js/apps/projects/components/App.js
index a6513662112..c4ca1fbf0f6 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/App.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/App.js
@@ -23,7 +23,7 @@ import PageHeaderContainer from './PageHeaderContainer';
 import ProjectsListContainer from './ProjectsListContainer';
 import ProjectsListFooterContainer from './ProjectsListFooterContainer';
 import PageSidebarContainer from './PageSidebarContainer';
-import FavoriteFilterContainer from './FavoriteFilterContainer';
+import ProjectsListHeaderContainer from './ProjectsListHeaderContainer';
 import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
 import { parseUrlQuery } from '../store/utils';
 import { translate } from '../../../helpers/l10n';
@@ -69,17 +69,18 @@ export default class App extends React.Component {
         <div id="projects-page" className="page page-limited">
           <Helmet title={translate('projects.page')} titleTemplate="SonarQube - %s"/>
 
-          <PageHeaderContainer/>
-
           <GlobalMessagesContainer/>
 
           <div className="page-with-sidebar page-with-left-sidebar">
             <div className="page-main">
-              <ProjectsListContainer/>
-              <ProjectsListFooterContainer query={this.state.query}/>
+              <div className="projects-list-container">
+                <ProjectsListHeaderContainer/>
+                <ProjectsListContainer/>
+                <ProjectsListFooterContainer query={this.state.query}/>
+              </div>
             </div>
             <aside className="page-sidebar-fixed projects-sidebar">
-              <FavoriteFilterContainer/>
+              <PageHeaderContainer/>
               <PageSidebarContainer query={this.state.query}/>
             </aside>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js b/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
index 2ef4f12053e..d13afa6e872 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js
@@ -27,7 +27,7 @@ export default class FavoriteFilter extends React.Component {
     }
 
     return (
-      <div className="button-group projects-favorite-filter">
+      <div className="button-group">
         <IndexLink to="/projects" className="button" activeClassName="button-active">All</IndexLink>
         <Link to="/projects/favorite" className="button" activeClassName="button-active">Favorite</Link>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js b/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js
index a6a04e47390..8e82cefd4c5 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/FavoriteProjects.js
@@ -21,7 +21,7 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import PageHeaderContainer from './PageHeaderContainer';
 import ProjectsListContainer from './ProjectsListContainer';
-import FavoriteFilterContainer from './FavoriteFilterContainer';
+import ProjectsListHeaderContainer from './ProjectsListHeaderContainer';
 import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
 import { translate } from '../../../helpers/l10n';
 import '../styles.css';
@@ -50,17 +50,17 @@ export default class FavoriteProjects extends React.Component {
         <div id="projects-page" className="page page-limited">
           <Helmet title={translate('projects.page')} titleTemplate="SonarQube - %s"/>
 
-          <PageHeaderContainer/>
-
           <GlobalMessagesContainer/>
 
           <div className="page-with-sidebar page-with-left-sidebar">
             <div className="page-main">
-              <ProjectsListContainer/>
+              <div className="projects-list-container">
+                <ProjectsListHeaderContainer/>
+                <ProjectsListContainer/>
+              </div>
             </div>
             <aside className="page-sidebar-fixed projects-sidebar">
-              <FavoriteFilterContainer/>
-
+              <PageHeaderContainer/>
               <p className="note text-center">Filters are not available.</p>
             </aside>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js
index 4043e0176f9..9ffdb687169 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js
@@ -22,12 +22,11 @@ import { translate } from '../../../helpers/l10n';
 
 export default class PageHeader extends React.Component {
   static propTypes = {
-    total: React.PropTypes.number,
     loading: React.PropTypes.bool
   };
 
   render () {
-    const { total, loading } = this.props;
+    const { loading } = this.props;
 
     return (
         <header className="page-header">
@@ -36,16 +35,6 @@ export default class PageHeader extends React.Component {
           {!!loading && (
               <i className="spinner"/>
           )}
-
-          <div className="page-actions">
-            {total != null && (
-                <span><strong>{total}</strong> {translate('projects._projects')}</span>
-            )}
-          </div>
-
-          <div className="page-description">
-            {translate('projects.page.description')}
-          </div>
         </header>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js
index 9a7d69d9855..859b4980200 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js
@@ -18,13 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import { List, AutoSizer, WindowScroller } from 'react-virtualized';
 import ProjectCardContainer from './ProjectCardContainer';
 import { translate } from '../../../helpers/l10n';
 
 export default class ProjectsList extends React.Component {
   static propTypes = {
-    projects: React.PropTypes.arrayOf(React.PropTypes.string)
+    projects: React.PropTypes.arrayOf(React.PropTypes.string),
   };
 
   render () {
@@ -34,43 +33,19 @@ export default class ProjectsList extends React.Component {
       return null;
     }
 
-    if (projects.length === 0) {
-      return (
-          <div className="projects-empty-list">
-            <h3>{translate('projects.no_projects.1')}</h3>
-            <p className="big-spacer-top">{translate('projects.no_projects.2')}</p>
-          </div>
-      );
-    }
-
-    const rowRenderer = ({ key, index, style }) => {
-      const projectKey = projects[index];
-      return (
-          <div key={key} style={style}>
-            <ProjectCardContainer projectKey={projectKey}/>
-          </div>
-      );
-    };
-
     return (
-        <WindowScroller>
-          {({ height, scrollTop }) => (
-              <AutoSizer disableHeight>
-                {({ width }) => (
-                    <List
-                        className="projects-list"
-                        autoHeight
-                        width={width}
-                        height={height}
-                        rowCount={projects.length}
-                        rowHeight={135}
-                        rowRenderer={rowRenderer}
-                        scrollTop={scrollTop}
-                        overscanRowCount={100}/>
-                )}
-              </AutoSizer>
+        <div className="projects-list">
+          {projects.length > 0 ? (
+              projects.map(projectKey => (
+                  <ProjectCardContainer key={projectKey} projectKey={projectKey}/>
+              ))
+          ) : (
+              <div className="projects-empty-list">
+                <h3>{translate('projects.no_projects.1')}</h3>
+                <p className="big-spacer-top">{translate('projects.no_projects.2')}</p>
+              </div>
           )}
-        </WindowScroller>
+        </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsListContainer.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListContainer.js
index bdeb573a65a..3bbd31c3280 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsListContainer.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListContainer.js
@@ -19,10 +19,11 @@
  */
 import { connect } from 'react-redux';
 import ProjectsList from './ProjectsList';
-import { getProjects } from '../../../app/store/rootReducer';
+import { getProjects, getProjectsAppState } from '../../../app/store/rootReducer';
 
 export default connect(
     state => ({
-      projects: getProjects(state)
+      projects: getProjects(state),
+      total: getProjectsAppState(state).total
     })
 )(ProjectsList);
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsListHeader.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListHeader.js
new file mode 100644
index 00000000000..518bcb016b4
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListHeader.js
@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+import React from 'react';
+import FavoriteFilterContainer from './FavoriteFilterContainer';
+import { translate } from '../../../helpers/l10n';
+
+export default class ProjectsListHeader extends React.Component {
+  static propTypes = {
+    total: React.PropTypes.number
+  };
+
+  render () {
+    return (
+        <header className="page-header">
+          <div className="page-actions">
+            {this.props.total != null && (
+              <span>
+                <strong>{this.props.total}</strong> {translate('projects._projects')}
+              </span>
+            )}
+          </div>
+          <FavoriteFilterContainer/>
+        </header>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsListHeaderContainer.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListHeaderContainer.js
new file mode 100644
index 00000000000..f21a81996eb
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListHeaderContainer.js
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+import { connect } from 'react-redux';
+import ProjectsListHeader from './ProjectsListHeader';
+import { getProjectsAppState } from '../../../app/store/rootReducer';
+
+const mapStateToProps = state => (
+    getProjectsAppState(state)
+);
+
+export default connect(
+    mapStateToProps
+)(ProjectsListHeader);
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index ac52d3a74d1..38a02765bc2 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -2,8 +2,12 @@
   width: 260px;
 }
 
-.projects-list {
-  outline: none;
+.projects-list-container {
+  width: 740px;
+}
+
+.projects-list .page-actions {
+  margin-bottom: 0;
 }
 
 .projects-empty-list {
@@ -96,15 +100,3 @@
 .projects-facets-reset .button {
 
 }
-
-.projects-favorite-filter {
-  width: 100%;
-  margin-bottom: 30px;
-  padding-left: 10px;
-  padding-right: 10px;
-  box-sizing: border-box;
-}
-
-.projects-favorite-filter > a {
-  width: 50%;
-}