SONAR-8953 Isolate scrolling of facets sidebar on projects page

server/sonar-web/src/main/js/apps/projects/components/AllProjects.js

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import PageHeaderContainer from './PageHeaderContainer';
 import ProjectsListContainer from './ProjectsListContainer';
 import ProjectsListFooterContainer from './ProjectsListFooterContainer';
 import PageSidebar from './PageSidebar';
@@ -36,6 +37,7 @@ export default class AllProjects extends React.Component {
 
   componentDidMount () {
     this.handleQueryChange();
+    document.getElementById('footer').classList.add('search-navigator-footer');
   }
 
   componentDidUpdate (prevProps) {
@@ -44,6 +46,10 @@ export default class AllProjects extends React.Component {
     }
   }
 
+  componentWillUnmount () {
+    document.getElementById('footer').classList.remove('search-navigator-footer');
+  }
+
   handleQueryChange () {
     const query = parseUrlQuery(this.props.location.query);
     this.setState({ query });
@@ -54,24 +60,27 @@ export default class AllProjects extends React.Component {
     const isFiltered = Object.keys(this.state.query).some(key => this.state.query[key] != null);
 
     return (
-        <div className="page-with-sidebar page-with-left-sidebar projects-page">
-          <aside className="page-sidebar-fixed projects-sidebar">
+      <div className="page-with-sidebar page-with-left-sidebar projects-page">
+        <aside className="page-sidebar-fixed page-sidebar-sticky projects-sidebar">
+          <div className="page-sidebar-sticky-inner">
             <PageSidebar
-                query={this.state.query}
-                isFavorite={this.props.isFavorite}
-                organization={this.props.organization}/>
-          </aside>
-          <div className="page-main">
-            <ProjectsListContainer
-                isFavorite={this.props.isFavorite}
-                isFiltered={isFiltered}
-                organization={this.props.organization}/>
-            <ProjectsListFooterContainer
-                query={this.state.query}
-                isFavorite={this.props.isFavorite}
-                organization={this.props.organization}/>
+              query={this.state.query}
+              isFavorite={this.props.isFavorite}
+              organization={this.props.organization}/>
           </div>
+        </aside>
+        <div className="page-main">
+          <PageHeaderContainer/>
+          <ProjectsListContainer
+            isFavorite={this.props.isFavorite}
+            isFiltered={isFiltered}
+            organization={this.props.organization}/>
+          <ProjectsListFooterContainer
+            query={this.state.query}
+            isFavorite={this.props.isFavorite}
+            organization={this.props.organization}/>
         </div>
+      </div>
     );
   }
 }

server/sonar-web/src/main/js/apps/projects/components/App.js

@@ -19,7 +19,6 @@
  */
 import React from 'react';
 import Helmet from 'react-helmet';
-import PageHeaderContainer from './PageHeaderContainer';
 import { translate } from '../../../helpers/l10n';
 import '../styles.css';
 
@@ -36,7 +35,6 @@ export default class App extends React.Component {
     return (
         <div id="projects-page" className="page page-limited">
           <Helmet title={translate('projects.page')} titleTemplate="%s - SonarQube"/>
-          <PageHeaderContainer/>
           {this.props.children}
         </div>
     );

server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.js

@@ -50,7 +50,7 @@ export default class FavoriteFilter extends React.PureComponent {
       : '/projects';
 
     return (
-      <div className="projects-sidebar pull-left text-center">
+      <header className="page-header text-center">
         <div className="button-group">
           <Link
             id="favorite-projects"
@@ -69,7 +69,7 @@ export default class FavoriteFilter extends React.PureComponent {
             {translate('all')}
           </IndexLink>
         </div>
-      </div>
+      </header>
     );
   }
 }

server/sonar-web/src/main/js/apps/projects/components/PageHeader.js

@@ -18,7 +18,6 @@
  * 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 PageHeader extends React.Component {
@@ -43,8 +42,6 @@ export default class PageHeader extends React.Component {
               </span>
             )}
           </div>
-
-          <FavoriteFilterContainer organization={this.props.organization}/>
         </header>
     );
   }

server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js

@@ -19,6 +19,7 @@
  */
 import React from 'react';
 import { Link } from 'react-router';
+import FavoriteFilterContainer from './FavoriteFilterContainer';
 import CoverageFilter from '../filters/CoverageFilter';
 import DuplicationsFilter from '../filters/DuplicationsFilter';
 import SizeFilter from '../filters/SizeFilter';
@@ -47,6 +48,8 @@ export default class PageSidebar extends React.PureComponent {
 
     return (
       <div className="search-navigator-facets-list">
+        <FavoriteFilterContainer/>
+
         <div className="projects-facets-header clearfix">
           {isFiltered &&
             <div className="projects-facets-reset">

server/sonar-web/src/main/less/components/page.less

@@ -149,3 +149,30 @@
   .page-sidebar;
   width: 300px;
 }
+
+.page-sidebar-sticky {
+  padding-right: 0;
+
+  .page-limited & {
+    margin: -20px 0;
+    padding-right: 0 !important;
+
+    .page-sidebar-sticky-inner {
+      padding: 20px 0;
+    }
+  }
+
+  .page-sidebar-sticky-inner {
+    position: fixed;
+    top: 30px;
+    bottom: 0;
+    overflow: auto;
+    width: 290px;
+    border-right: 1px solid #e6e6e6;
+    box-sizing: border-box;
+
+    .search-navigator-facets-list {
+      width: 260px;
+    }
+  }
+}