SONAR-9245 Enhance the top bar close button on the projects page

7 files changed, 116 insertions, 105 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
index 93c68c438ce..3adb8c5e0e8 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
@@ -119,7 +119,8 @@ export default class AllProjects extends React.PureComponent {
     const visualization = query.visualization || 'risk';
     const selectedSort = query.sort || 'name';
 
-    const top = (organization ? 95 : 30) + (optionBarOpen ? 45 : 0);
+    const sideBarTop = (organization ? 95 : 30) + (optionBarOpen ? 45 : 0);
+    const contentTop = optionBarOpen ? 65 : 20;
 
     return (
       <div>
@@ -137,7 +138,7 @@ export default class AllProjects extends React.PureComponent {
 
         <div className="layout-page projects-page">
           <div className="layout-page-side-outer">
-            <div className="layout-page-side projects-page-side" style={{ top }}>
+            <div className="layout-page-side projects-page-side" style={{ top: sideBarTop }}>
               <div className="layout-page-side-inner">
                 <div className="layout-page-filters">
                   <PageSidebar
@@ -152,13 +153,16 @@ export default class AllProjects extends React.PureComponent {
             </div>
           </div>
 
-          <div className="layout-page-main">
+          <div
+            className="layout-page-main projects-page-content"
+            style={{ paddingTop: contentTop }}>
             <div className="layout-page-main-inner">
               <PageHeaderContainer
                 query={query}
                 isFavorite={isFavorite}
                 organization={organization}
                 onOpenOptionBar={this.openOptionBar}
+                optionBarOpen={optionBarOpen}
               />
               {view !== 'visualizations' &&
                 <ProjectsListContainer
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 00022b19545..b4104652feb 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
@@ -26,6 +26,7 @@ type Props = {
   isFavorite?: boolean,
   loading: boolean,
   onOpenOptionBar: () => void,
+  optionBarOpen?: boolean,
   organization?: { key: string },
   query: { [string]: string },
   total?: number
@@ -40,11 +41,13 @@ export default function PageHeader(props: Props) {
         query={props.query}
       />
       <div className="page-actions projects-page-actions text-right">
-        <div className="spacer-bottom">
-          <a className="button js-projects-topbar-open" href="#" onClick={props.onOpenOptionBar}>
+        {!props.optionBarOpen &&
+          <a
+            className="button js-projects-topbar-open spacer-right"
+            href="#"
+            onClick={props.onOpenOptionBar}>
             {translate('projects.view_settings')}
-          </a>
-        </div>
+          </a>}
 
         {!!props.loading && <i className="spinner spacer-right" />}
 
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsOptionBar.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsOptionBar.js
index 14a0b01f4b2..ada472b4beb 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsOptionBar.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsOptionBar.js
@@ -20,7 +20,6 @@
 //@flow
 import React from 'react';
 import classNames from 'classnames';
-import CloseIcon from '../../../components/icons-components/CloseIcon';
 import Tooltip from '../../../components/controls/Tooltip';
 import PerspectiveSelect from './PerspectiveSelect';
 import ProjectsSortingSelect from './ProjectsSortingSelect';
@@ -83,17 +82,19 @@ export default class ProjectsOptionBar extends React.PureComponent {
     return (
       <div className="projects-topbar">
         <div className={classNames('projects-topbar-actions', { open })}>
-          <a className="projects-topbar-button button-icon" href="#" onClick={this.closeBar}>
-            <CloseIcon />
-          </a>
           <div className="projects-topbar-actions-inner">
-            <PerspectiveSelect
-              className="projects-topbar-item js-projects-perspective-select"
-              onChange={this.props.onPerspectiveChange}
-              view={this.props.view}
-              visualization={this.props.visualization}
-            />
-            {this.renderSortingSelect()}
+            <button className="projects-topbar-button" onClick={this.closeBar}>
+              {translate('close')}
+            </button>
+            <div className="projects-topbar-items">
+              <PerspectiveSelect
+                className="projects-topbar-item js-projects-perspective-select"
+                onChange={this.props.onPerspectiveChange}
+                view={this.props.view}
+                visualization={this.props.visualization}
+              />
+              {this.renderSortingSelect()}
+            </div>
           </div>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectOptionBar-test.js b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectOptionBar-test.js
index 5b08f5d644e..446bf98b57a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectOptionBar-test.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectOptionBar-test.js
@@ -49,6 +49,6 @@ it('should render disabled sorting options for visualizations', () => {
 it('should call close method correctly', () => {
   const toggle = jest.fn();
   const wrapper = shallow(<ProjectsOptionBar open={true} view="leak" onToggleOptionBar={toggle} />);
-  click(wrapper.find('a.projects-topbar-button'));
+  click(wrapper.find('.projects-topbar-button'));
   expect(toggle.mock.calls).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap
index 9783b6a6c35..c554011553e 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap
@@ -14,16 +14,12 @@ exports[`should render correctly 1`] = `
   <div
     className="page-actions projects-page-actions text-right"
   >
-    <div
-      className="spacer-bottom"
+    <a
+      className="button js-projects-topbar-open spacer-right"
+      href="#"
     >
-      <a
-        className="button js-projects-topbar-open"
-        href="#"
-      >
-        projects.view_settings
-      </a>
-    </div>
+      projects.view_settings
+    </a>
     <span>
       <strong
         id="projects-total"
@@ -52,16 +48,12 @@ exports[`should render correctly while loading 1`] = `
   <div
     className="page-actions projects-page-actions text-right"
   >
-    <div
-      className="spacer-bottom"
+    <a
+      className="button js-projects-topbar-open spacer-right"
+      href="#"
     >
-      <a
-        className="button js-projects-topbar-open"
-        href="#"
-      >
-        projects.view_settings
-      </a>
-    </div>
+      projects.view_settings
+    </a>
     <i
       className="spinner spacer-right"
     />
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectOptionBar-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectOptionBar-test.js.snap
index 5b5ca60dce6..12099c9db00 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectOptionBar-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectOptionBar-test.js.snap
@@ -15,32 +15,35 @@ exports[`should render disabled sorting options for visualizations 1`] = `
   <div
     className="projects-topbar-actions open"
   >
-    <a
-      className="projects-topbar-button button-icon"
-      href="#"
-      onClick={[Function]}
-    >
-      <CloseIcon />
-    </a>
     <div
       className="projects-topbar-actions-inner"
     >
-      <PerspectiveSelect
-        className="projects-topbar-item js-projects-perspective-select"
-        view="visualizations"
-        visualization="coverage"
-      />
-      <Tooltip
-        overlay="projects.sort.disabled"
-        placement="bottom"
+      <button
+        className="projects-topbar-button"
+        onClick={[Function]}
+      >
+        close
+      </button>
+      <div
+        className="projects-topbar-items"
       >
-        <div>
-          <ProjectsSortingSelect
-            className="projects-topbar-item js-projects-sorting-select disabled"
-            view="visualizations"
-          />
-        </div>
-      </Tooltip>
+        <PerspectiveSelect
+          className="projects-topbar-item js-projects-perspective-select"
+          view="visualizations"
+          visualization="coverage"
+        />
+        <Tooltip
+          overlay="projects.sort.disabled"
+          placement="bottom"
+        >
+          <div>
+            <ProjectsSortingSelect
+              className="projects-topbar-item js-projects-sorting-select disabled"
+              view="visualizations"
+            />
+          </div>
+        </Tooltip>
+      </div>
     </div>
   </div>
 </div>
@@ -53,24 +56,27 @@ exports[`should render option bar closed 1`] = `
   <div
     className="projects-topbar-actions"
   >
-    <a
-      className="projects-topbar-button button-icon"
-      href="#"
-      onClick={[Function]}
-    >
-      <CloseIcon />
-    </a>
     <div
       className="projects-topbar-actions-inner"
     >
-      <PerspectiveSelect
-        className="projects-topbar-item js-projects-perspective-select"
-        view="overall"
-      />
-      <ProjectsSortingSelect
-        className="projects-topbar-item js-projects-sorting-select"
-        view="overall"
-      />
+      <button
+        className="projects-topbar-button"
+        onClick={[Function]}
+      >
+        close
+      </button>
+      <div
+        className="projects-topbar-items"
+      >
+        <PerspectiveSelect
+          className="projects-topbar-item js-projects-perspective-select"
+          view="overall"
+        />
+        <ProjectsSortingSelect
+          className="projects-topbar-item js-projects-sorting-select"
+          view="overall"
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -83,25 +89,28 @@ exports[`should render option bar open 1`] = `
   <div
     className="projects-topbar-actions open"
   >
-    <a
-      className="projects-topbar-button button-icon"
-      href="#"
-      onClick={[Function]}
-    >
-      <CloseIcon />
-    </a>
     <div
       className="projects-topbar-actions-inner"
     >
-      <PerspectiveSelect
-        className="projects-topbar-item js-projects-perspective-select"
-        view="leak"
-        visualization="risk"
-      />
-      <ProjectsSortingSelect
-        className="projects-topbar-item js-projects-sorting-select"
-        view="leak"
-      />
+      <button
+        className="projects-topbar-button"
+        onClick={[Function]}
+      >
+        close
+      </button>
+      <div
+        className="projects-topbar-items"
+      >
+        <PerspectiveSelect
+          className="projects-topbar-item js-projects-perspective-select"
+          view="leak"
+          visualization="risk"
+        />
+        <ProjectsSortingSelect
+          className="projects-topbar-item js-projects-sorting-select"
+          view="leak"
+        />
+      </div>
     </div>
   </div>
 </div>
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 0cb08e097d1..2243200772e 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -6,6 +6,10 @@
   transition: top 150ms ease-out;
 }
 
+.projects-page-content {
+  transition: padding-top 150ms ease-out;
+}
+
 .projects-topbar {
   position: fixed;
   width: 100%;
@@ -18,10 +22,9 @@
   left: 0;
   right: 0;
   top: -50px;
-  display: flex;
-  flex-direction: row-reverse;
   z-index: 50;
   flex-grow: 0.000001;
+  border-bottom: 1px solid #e6e6e6;
   background-color: #fff;
   transition: top 150ms ease-out;
 }
@@ -31,12 +34,20 @@
 }
 
 .projects-topbar-actions-inner {
+  position: relative;
+  margin: auto;
+  padding: 0 20px;
+  min-width: 1040px;
+  max-width: 1280px;
+}
+
+.projects-topbar-items {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   flex-grow: 1;
-  border-bottom: 1px solid #e6e6e6;
+  height: 46px;
 }
 
 .projects-topbar-item {
@@ -53,18 +64,9 @@
 }
 
 .projects-topbar-button {
-  box-sizing: border-box;
-  float: right;
-  padding: 11px;
-  padding-top: 15px;
-  border: none;
-  border-left: 1px solid #e6e6e6;
-  border-bottom: 1px solid #e6e6e6;
-  width: 46px;
-  height: 46px;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  top: 10px;
 }
 
 .projects-sidebar {