From 8ac9ac6383b5e557fe5379f47d303792e863bd4a Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Tue, 1 Nov 2016 17:42:17 +0100
Subject: [PATCH] SONAR-8300 adjust layout

---
 .../main/js/apps/projects/components/App.js   |  2 +-
 .../projects/components/FavoriteProjects.js   |  2 +-
 .../apps/projects/components/PageSidebar.js   |  2 +-
 .../apps/projects/components/ProjectCard.js   |  6 ++++
 .../components/ProjectCardMeasures.js         |  3 --
 .../components/ProjectCardQualityGate.js      | 11 ++++----
 .../apps/projects/filters/CoverageFilter.js   |  4 +--
 .../projects/filters/DuplicationsFilter.js    |  2 +-
 .../js/apps/projects/filters/IssuesFilter.js  |  4 ++-
 .../projects/filters/QualityGateFilter.js     |  2 +-
 .../js/apps/projects/filters/SizeFilter.js    |  2 +-
 .../src/main/js/apps/projects/styles.css      | 22 ++++++++++-----
 .../main/js/components/ui/CoverageRating.js   | 16 ++++++++---
 .../js/components/ui/DuplicationsRating.css   | 28 +++++++++++++++++++
 .../js/components/ui/DuplicationsRating.js    |  8 +++++-
 .../src/main/js/components/ui/Level.js        | 10 +++++--
 .../src/main/js/components/ui/Rating.css      |  9 ++++++
 .../src/main/js/components/ui/Rating.js       | 10 +++++--
 .../src/main/js/components/ui/SizeRating.css  |  9 ++++++
 .../src/main/js/components/ui/SizeRating.js   | 12 ++++++--
 .../less/components/search-navigator.less     |  2 +-
 21 files changed, 129 insertions(+), 37 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 34d280a228e..f58788129d8 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
@@ -78,7 +78,7 @@ export default class App extends React.Component {
               <ProjectsListContainer/>
               <ProjectsListFooterContainer query={this.state.query}/>
             </div>
-            <aside className="page-sidebar-fixed">
+            <aside className="page-sidebar-fixed projects-sidebar">
               <FavoriteFilterContainer/>
               <PageSidebarContainer query={this.state.query}/>
             </aside>
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 6503b1e083f..a6a04e47390 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
@@ -58,7 +58,7 @@ export default class FavoriteProjects extends React.Component {
             <div className="page-main">
               <ProjectsListContainer/>
             </div>
-            <aside className="page-sidebar-fixed">
+            <aside className="page-sidebar-fixed projects-sidebar">
               <FavoriteFilterContainer/>
 
               <p className="note text-center">Filters are not available.</p>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
index 705ade84aea..a5cd4c4b31f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js
@@ -39,13 +39,13 @@ export default class PageSidebar extends React.Component {
 
     return (
         <div className="search-navigator-facets-list">
+          <QualityGateFilter query={this.props.query}/>
           <ReliabilityFilter query={this.props.query}/>
           <SecurityFilter query={this.props.query}/>
           <MaintainabilityFilter query={this.props.query}/>
           <CoverageFilter query={this.props.query}/>
           <DuplicationsFilter query={this.props.query}/>
           <SizeFilter query={this.props.query}/>
-          <QualityGateFilter query={this.props.query}/>
 
           {isFiltered && (
               <div className="projects-facets-reset">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
index 8ed3558a129..04dbdb15fc3 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
@@ -19,6 +19,7 @@
  */
 import React from 'react';
 import classNames from 'classnames';
+import ProjectCardQualityGate from './ProjectCardQualityGate';
 import ProjectCardMeasures from './ProjectCardMeasures';
 import { getComponentUrl } from '../../../helpers/urls';
 
@@ -38,6 +39,11 @@ export default class ProjectCard extends React.Component {
 
     return (
         <div className={className}>
+          {this.props.measures != null && (
+              <div className="boxed-group-actions">
+                <ProjectCardQualityGate status={this.props.measures['alert_status']}/>
+              </div>
+          )}
           <h2 className="project-card-name">
             <a className="link-base-color" href={getComponentUrl(project.key)}>{project.name}</a>
           </h2>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js
index 9c7cc99abfd..d8004d2de66 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js
@@ -19,7 +19,6 @@
  */
 import React from 'react';
 import ProjectCardLanguages from './ProjectCardLanguages';
-import ProjectCardQualityGate from './ProjectCardQualityGate';
 import Measure from '../../component-measures/components/Measure';
 import Rating from '../../../components/ui/Rating';
 import CoverageRating from '../../../components/ui/CoverageRating';
@@ -121,8 +120,6 @@ export default class ProjectCardMeasures extends React.Component {
               </div>
             </div>
           </div>
-
-          <ProjectCardQualityGate status={measures['alert_status']}/>
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardQualityGate.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardQualityGate.js
index cc542cabefa..1f60437b534 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardQualityGate.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardQualityGate.js
@@ -34,14 +34,13 @@ export default class ProjectCardQualityGate extends React.Component {
     }
 
     return (
-        <div className="project-card-measure pull-right">
+        <div className="project-card-measure">
           <div className="project-card-measure-inner">
-            <div>
-              <Level level={status}/>
-            </div>
-            <div className="project-card-measure-label">
+            <span className="small spacer-right">
               {translate('overview.quality_gate')}
-            </div>
+              {':'}
+            </span>
+            <Level level={status} small={true}/>
           </div>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
index 4ff3f821130..5ac1adec4c3 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
@@ -26,7 +26,7 @@ export default class CoverageFilter extends React.Component {
   renderOption = option => {
     return (
         <span>
-          <CoverageRating value={getCoverageRatingAverageValue(option)}/>
+          <CoverageRating value={getCoverageRatingAverageValue(option)} small={true}/>
           <span className="spacer-left">
             {getCoverageRatingLabel(option)}
           </span>
@@ -43,7 +43,7 @@ export default class CoverageFilter extends React.Component {
     return (
         <FilterContainer
             property="coverage"
-            options={[1, 2, 3, 4, 5]}
+            options={[5, 4, 3, 2, 1]}
             renderName={() => 'Coverage'}
             renderOption={this.renderOption}
             getFacetValueForOption={this.getFacetValueForOption}
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
index c74cd364838..153be2be7dc 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
@@ -26,7 +26,7 @@ export default class DuplicationsFilter extends React.Component {
   renderOption = option => {
     return (
         <span>
-          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)}/>
+          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} small={true}/>
           <span className="spacer-left">
             {getDuplicationsRatingLabel(option)}
           </span>
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js
index 42199463b17..0c282f58759 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.js
@@ -24,7 +24,9 @@ import Rating from '../../../components/ui/Rating';
 export default class IssuesFilter extends React.Component {
   renderOption = option => {
     return (
-        <Rating value={option}/>
+        <span>
+          <Rating value={option} small={true}/>
+        </span>
     );
   };
 
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js
index e236a62e22e..a4838824870 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.js
@@ -24,7 +24,7 @@ import Level from '../../../components/ui/Level';
 export default class QualityGateFilter extends React.Component {
   renderOption = option => {
     return (
-        <Level level={option}/>
+        <Level level={option} small={true}/>
     );
   };
 
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js
index ed331913ac8..7b947b002d2 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.js
@@ -26,7 +26,7 @@ export default class SizeFilter extends React.Component {
   renderOption = option => {
     return (
         <span>
-          <SizeRating value={getSizeRatingAverageValue(option)}/>
+          <SizeRating value={getSizeRatingAverageValue(option)} small={true}/>
           <span className="spacer-left">
             {getSizeRatingLabel(option)}
           </span>
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 cc1105ba0aa..ac52d3a74d1 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -1,3 +1,7 @@
+.projects-sidebar {
+  width: 260px;
+}
+
 .projects-list {
   outline: none;
 }
@@ -20,14 +24,23 @@
 }
 
 .project-card-measures {
-  margin: 0 -20px;
+  margin: 0 -15px;
+}
+
+.project-card-measures .project-card-measure {
+  width: 120px;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
+
+.project-card-measures .project-card-measure:nth-child(-n+2) {
+  width: 90px;
 }
 
 .project-card-measure {
   position: relative;
   display: inline-block;
   vertical-align: top;
-  padding: 0 15px;
   text-align: center;
 }
 
@@ -73,11 +86,6 @@
   transition: none;
 }
 
-.projects-facet .facet-name,
-.projects-facet .facet-stat {
-  line-height: 24px !important;
-}
-
 .projects-facets-reset {
   margin-top: 20px;
   padding: 10px;
diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.js b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
index d6d6d54d85b..1546962ff14 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.js
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
@@ -22,7 +22,12 @@ import { DonutChart } from '../charts/donut-chart';
 
 export default class CoverageRating extends React.Component {
   static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])
+    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
+    small: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    small: false
   };
 
   render () {
@@ -36,12 +41,15 @@ export default class CoverageRating extends React.Component {
       ];
     }
 
+    const size = this.props.small ? 16 : 24;
+    const thickness = this.props.small ? 2 : 3;
+
     return (
         <DonutChart
             data={data}
-            width={24}
-            height={24}
-            thickness={3}/>
+            width={size}
+            height={size}
+            thickness={thickness}/>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
index 73c12db92df..25ca62145e9 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -11,6 +11,12 @@
   box-sizing: border-box;
 }
 
+.duplications-rating-small {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
 .duplications-rating:after {
   border-radius: 24px;
   background-color: #f3ca8e;
@@ -30,11 +36,21 @@
   height: 6px;
 }
 
+.duplications-rating-small.duplications-rating-B:after {
+  width: 2px;
+  height: 2px;
+}
+
 .duplications-rating-C:after {
   width: 8px;
   height: 8px;
 }
 
+.duplications-rating-small.duplications-rating-C:after {
+  width: 6px;
+  height: 6px;
+}
+
 .duplications-rating-D {
   border-color: #d4333f;
 }
@@ -45,10 +61,22 @@
   background-color: #d4333f;
 }
 
+.duplications-rating-small.duplications-rating-D:after {
+  width: 8px;
+  height: 8px;
+  background-color: #d4333f;
+}
+
 .duplications-rating-E {
   border-color: #d4333f;
 }
 
+.duplications-rating-small.duplications-rating-E:after {
+  width: 10px;
+  height: 10px;
+  background-color: #d4333f;
+}
+
 .duplications-rating-E:after {
   width: 14px;
   height: 14px;
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
index 35765a68a37..4d0e4f5c9bf 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
@@ -24,12 +24,18 @@ import './DuplicationsRating.css';
 
 export default class DuplicationsRating extends React.Component {
   static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired
+    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
+    small: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    small: false
   };
 
   render () {
     const { value } = this.props;
     const className = classNames('duplications-rating', {
+      'duplications-rating-small': this.props.small,
       'duplications-rating-A': inRange(value, 3),
       'duplications-rating-B': inRange(value, 3, 5),
       'duplications-rating-C': inRange(value, 5, 10),
diff --git a/server/sonar-web/src/main/js/components/ui/Level.js b/server/sonar-web/src/main/js/components/ui/Level.js
index 69f1c512822..3b05b9cfe16 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.js
+++ b/server/sonar-web/src/main/js/components/ui/Level.js
@@ -18,17 +18,23 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import classNames from 'classnames';
 import { formatMeasure } from '../../helpers/measures';
 import './Level.css';
 
 export default class Level extends React.Component {
   static propTypes = {
-    level: React.PropTypes.oneOf(['ERROR', 'WARN', 'OK']).isRequired
+    level: React.PropTypes.oneOf(['ERROR', 'WARN', 'OK']).isRequired,
+    small: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    small: false
   };
 
   render () {
     const formatted = formatMeasure(this.props.level, 'LEVEL');
-    const className = 'level level-' + this.props.level;
+    const className = classNames('level', 'level-' + this.props.level, { 'level-small': this.props.small });
     return <span className={className}>{formatted}</span>;
   }
 }
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css
index 31d8bb6f4d3..7b63ce95879 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -12,6 +12,15 @@
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
 }
 
+.rating-small {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  font-size: 12px;
+}
+
 a > .rating {
   margin-bottom: -1px;
   border-bottom: 1px solid;
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.js b/server/sonar-web/src/main/js/components/ui/Rating.js
index 74e61d2b624..7fe7d07da42 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.js
+++ b/server/sonar-web/src/main/js/components/ui/Rating.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import classNames from 'classnames';
 import { formatMeasure } from '../../helpers/measures';
 import './Rating.css';
 
@@ -30,12 +31,17 @@ export default class Rating extends React.Component {
         throw new Error(
             `Invalid prop "${propName}" passed to "${componentName}".`);
       }
-    }
+    },
+    small: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    small: false
   };
 
   render () {
     const formatted = formatMeasure(this.props.value, 'RATING');
-    const className = 'rating rating-' + formatted;
+    const className = classNames('rating', 'rating-' + formatted, { 'rating-small': this.props.small });
     return <span className={className}>{formatted}</span>;
   }
 }
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.css b/server/sonar-web/src/main/js/components/ui/SizeRating.css
index 7aeb21a922a..7d6d7e171d3 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.css
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.css
@@ -11,6 +11,15 @@
   text-align: center;
 }
 
+.size-rating-small {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  font-size: 10px;
+}
+
 .size-rating-muted {
   background-color: #ccc;
 }
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.js b/server/sonar-web/src/main/js/components/ui/SizeRating.js
index 40ed0ebd8c5..f62fd4766b2 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.js
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.js
@@ -18,12 +18,18 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import classNames from 'classnames';
 import inRange from 'lodash/inRange';
 import './SizeRating.css';
 
 export default class SizeRating extends React.Component {
   static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])
+    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
+    small: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    small: false
   };
 
   render () {
@@ -48,8 +54,10 @@ export default class SizeRating extends React.Component {
       letter = 'XL';
     }
 
+    const className = classNames('size-rating', { 'size-rating-small': this.props.small });
+
     return (
-        <div className="size-rating">{letter}</div>
+        <div className={className}>{letter}</div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index 34485d9f112..56698560fb1 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -141,7 +141,7 @@
     top: 0;
     right: 0;
     margin-left: 5px;
-    padding: 3px 5px;
+    padding: 4px 5px;
     background-color: @barBackgroundColor;
     color: @secondFontColor;
     font-size: @smallFontSize;
-- 
2.39.5