SONAR-8521 Improve size, duplication and coverage facets style (#1776)

5 files changed, 66 insertions, 59 deletions

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 560af1eba08..8789a3aef5e 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
@@ -74,6 +74,7 @@ export default class CoverageFilter extends React.PureComponent {
         renderName={this.renderName}
         renderOption={this.renderOption}
         renderSort={this.renderSort}
+        highlightUnder={1}
         getFacetValueForOption={this.getFacetValueForOption}
         query={this.props.query}
         isFavorite={this.props.isFavorite}
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 ae1acc160ab..94e47088095 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
@@ -76,6 +76,7 @@ export default class DuplicationsFilter extends React.PureComponent {
         renderName={this.renderName}
         renderOption={this.renderOption}
         renderSort={this.renderSort}
+        highlightUnder={1}
         getFacetValueForOption={this.getFacetValueForOption}
         query={this.props.query}
         isFavorite={this.props.isFavorite}
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/Filter.js b/server/sonar-web/src/main/js/apps/projects/filters/Filter.js
index 0c99e74dfff..7e407cb23c2 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/Filter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/Filter.js
@@ -40,12 +40,11 @@ export default class Filter extends React.PureComponent {
     getFacetValueForOption: React.PropTypes.func,
 
     halfWidth: React.PropTypes.bool,
-    highlightUnder: React.PropTypes.func
+    highlightUnder: React.PropTypes.number
   };
 
   static defaultProps = {
-    halfWidth: false,
-    highlightUnder: () => false
+    halfWidth: false
   };
 
   isSelected (option) {
@@ -53,6 +52,12 @@ export default class Filter extends React.PureComponent {
     return Array.isArray(value) ? value.includes(option) : option === value;
   }
 
+  highlightUnder (option) {
+    return this.props.highlightUnder != null &&
+      option !== null &&
+      option > this.props.highlightUnder;
+  }
+
   getPath (option) {
     const { property, value } = this.props;
     let urlOption;
@@ -71,10 +76,10 @@ export default class Filter extends React.PureComponent {
 
   renderHeader () {
     return (
-        <div className="search-navigator-facet-header projects-facet-header">
-          {this.props.renderName()}
-          {this.props.renderSort && this.props.renderSort()}
-        </div>
+      <div className="search-navigator-facet-header projects-facet-header">
+        {this.props.renderName()}
+        {this.props.renderSort && this.props.renderSort()}
+      </div>
     );
   }
 
@@ -84,37 +89,46 @@ export default class Filter extends React.PureComponent {
     }
 
     return (
-        <div className="projects-facet-bar">
-          <div className="projects-facet-bar-inner"
-               style={{ width: facetValue / this.props.maxFacetValue * 60 }}/>
-        </div>
+      <div className="projects-facet-bar">
+        <div
+          className="projects-facet-bar-inner"
+          style={{ width: facetValue / this.props.maxFacetValue * 60 }}/>
+      </div>
     );
   }
 
   renderOption (option) {
     const { facet, getFacetValueForOption, value } = this.props;
-    const className = classNames('facet', 'search-navigator-facet', 'projects-facet', {
-      'active': this.isSelected(option),
-      'search-navigator-facet-half': this.props.halfWidth,
-      'search-navigator-facet-highlight-under': this.props.highlightUnder(option)
-    }, this.props.optionClassName);
+    const className = classNames(
+      'facet',
+      'search-navigator-facet',
+      'projects-facet',
+      {
+        'active': this.isSelected(option),
+        'search-navigator-facet-half': this.props.halfWidth,
+        'search-navigator-facet-highlight-under': this.highlightUnder(option)
+      },
+      this.props.optionClassName
+    );
 
     const path = this.getPath(option);
+    const facetValue = facet && getFacetValueForOption
+      ? getFacetValueForOption(facet, option)
+      : null;
 
-    const facetValue = (facet && getFacetValueForOption) ? getFacetValueForOption(facet, option) : null;
+    const isUnderSelectedOption = this.highlightUnder(value) && option > value;
 
     return (
-        <Link key={option} className={className} to={path} data-key={option}>
-          <span className="facet-name">
-            {this.props.renderOption(option, this.isSelected(option), value)}
-          </span>
-          {facetValue != null && (
-              <span className="facet-stat">
-                {formatMeasure(facetValue, 'SHORT_INT')}
-                {this.renderOptionBar(facetValue)}
-              </span>
-          )}
-        </Link>
+      <Link key={option} className={className} to={path} data-key={option}>
+        <span className="facet-name">
+          {this.props.renderOption(option, this.isSelected(option) || isUnderSelectedOption)}
+        </span>
+        {facetValue != null &&
+          <span className="facet-stat">
+            {formatMeasure(facetValue, 'SHORT_INT')}
+            {this.renderOptionBar(facetValue)}
+          </span>}
+      </Link>
     );
   }
 
@@ -148,11 +162,11 @@ export default class Filter extends React.PureComponent {
 
   render () {
     return (
-        <div className="search-navigator-facet-box" data-key={this.props.property}>
-          {this.renderHeader()}
-          {this.renderOptions()}
-          {this.renderFooter()}
-        </div>
+      <div className="search-navigator-facet-box" data-key={this.props.property}>
+        {this.renderHeader()}
+        {this.renderOptions()}
+        {this.renderFooter()}
+      </div>
     );
   }
 }
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 7d5e6c9ad26..c39cf006769 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
@@ -31,18 +31,12 @@ export default class IssuesFilter extends React.PureComponent {
     organization: React.PropTypes.object
   };
 
-  renderOption = (option, selected, value) => {
-    const isUnderSelectedOption = this.highlightUnder(value) && option > value;
+  renderOption = (option, selected) => {
     return (
-        <span>
-          <Rating
-              value={option}
-              small={true}
-              muted={!selected && !isUnderSelectedOption}/>
-          {option > 1 && option < 5 && (
-              <span className="note spacer-left">and worse</span>
-          )}
-        </span>
+      <span>
+        <Rating value={option} small={true} muted={!selected}/>
+        {option > 1 && option < 5 && <span className="note spacer-left">and worse</span>}
+      </span>
     );
   };
 
@@ -56,10 +50,6 @@ export default class IssuesFilter extends React.PureComponent {
     );
   };
 
-  highlightUnder (option) {
-    return option !== null && option > 1;
-  }
-
   getFacetValueForOption = (facet, option) => {
     return facet[option];
   };
@@ -70,17 +60,17 @@ export default class IssuesFilter extends React.PureComponent {
 
   render () {
     return (
-        <FilterContainer
-            property={this.props.property}
-            getOptions={this.getOptions}
-            renderName={this.renderName}
-            renderOption={this.renderOption}
-            renderSort={this.renderSort}
-            highlightUnder={this.highlightUnder}
-            getFacetValueForOption={this.getFacetValueForOption}
-            query={this.props.query}
-            isFavorite={this.props.isFavorite}
-            organization={this.props.organization}/>
+      <FilterContainer
+        property={this.props.property}
+        getOptions={this.getOptions}
+        renderName={this.renderName}
+        renderOption={this.renderOption}
+        renderSort={this.renderSort}
+        highlightUnder={1}
+        getFacetValueForOption={this.getFacetValueForOption}
+        query={this.props.query}
+        isFavorite={this.props.isFavorite}
+        organization={this.props.organization}/>
     );
   }
 }
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 be13a07fd13..9b920f50c22 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
@@ -79,6 +79,7 @@ export default class SizeFilter extends React.PureComponent {
         renderName={this.renderName}
         renderOption={this.renderOption}
         renderSort={this.renderSort}
+        highlightUnder={1}
         getFacetValueForOption={this.getFacetValueForOption}
         query={this.props.query}
         isFavorite={this.props.isFavorite}