SONAR-8300 mute unselected facet options

16 files changed, 70 insertions, 27 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 0a9f3434166..ae0a6ac54d5 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
@@ -23,10 +23,10 @@ import CoverageRating from '../../../components/ui/CoverageRating';
 import { getCoverageRatingLabel, getCoverageRatingAverageValue } from '../../../helpers/ratings';
 
 export default class CoverageFilter extends React.Component {
-  renderOption = option => {
+  renderOption = (option, selected) => {
     return (
         <span>
-          <CoverageRating value={getCoverageRatingAverageValue(option)} small={true}/>
+          <CoverageRating value={getCoverageRatingAverageValue(option)} small={true} muted={!selected}/>
           <span className="spacer-left">
             {getCoverageRatingLabel(option)}
           </span>
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 153be2be7dc..18be81714ed 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
@@ -23,10 +23,10 @@ import DuplicationsRating from '../../../components/ui/DuplicationsRating';
 import { getDuplicationsRatingLabel, getDuplicationsRatingAverageValue } from '../../../helpers/ratings';
 
 export default class DuplicationsFilter extends React.Component {
-  renderOption = option => {
+  renderOption = (option, selected) => {
     return (
         <span>
-          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} small={true}/>
+          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} small={true} muted={!selected}/>
           <span className="spacer-left">
             {getDuplicationsRatingLabel(option)}
           </span>
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 42872eafbd6..ec975cf5270 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
@@ -111,7 +111,7 @@ export default class Filter extends React.Component {
     return (
         <Link key={option} className={className} to={path}>
           <span className="facet-name">
-            {this.props.renderOption(option, facetValue)}
+            {this.props.renderOption(option, option === value)}
           </span>
           {facetValue != null && (
               <span className="facet-stat">
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 c955ae24906..f3d76b6c6ae 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
@@ -22,10 +22,10 @@ import FilterContainer from './FilterContainer';
 import Rating from '../../../components/ui/Rating';
 
 export default class IssuesFilter extends React.Component {
-  renderOption = option => {
+  renderOption = (option, selected) => {
     return (
         <span>
-          <Rating value={option} small={true}/>
+          <Rating value={option} small={true} muted={!selected}/>
           {option > 1 && option < 5 && (
               <span className="note spacer-left">and worse</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 a4838824870..25e88a47861 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
@@ -22,9 +22,9 @@ import FilterContainer from './FilterContainer';
 import Level from '../../../components/ui/Level';
 
 export default class QualityGateFilter extends React.Component {
-  renderOption = option => {
+  renderOption = (option, selected) => {
     return (
-        <Level level={option} small={true}/>
+        <Level level={option} small={true} muted={!selected}/>
     );
   };
 
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 7b947b002d2..6ad997e09d5 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
@@ -23,10 +23,10 @@ import SizeRating from '../../../components/ui/SizeRating';
 import { getSizeRatingLabel, getSizeRatingAverageValue } from '../../../helpers/ratings';
 
 export default class SizeFilter extends React.Component {
-  renderOption = option => {
+  renderOption = (option, selected) => {
     return (
         <span>
-          <SizeRating value={getSizeRatingAverageValue(option)} small={true}/>
+          <SizeRating value={getSizeRatingAverageValue(option)} small={true} muted={!selected}/>
           <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 ed6dc714cec..15522753d83 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -116,3 +116,7 @@
   background-color: #b4b4b4;
   transition: width 0.3s ease;
 }
+
+.search-navigator-facet.active .projects-facet-bar-inner {
+  background-color: #4b9fd5;
+}
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 1546962ff14..3477b3df1ee 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.js
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
@@ -23,11 +23,13 @@ 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]),
-    small: React.PropTypes.bool
+    small: React.PropTypes.bool,
+    muted: React.PropTypes.bool
   };
 
   static defaultProps = {
-    small: false
+    small: false,
+    muted: false
   };
 
   render () {
@@ -36,8 +38,8 @@ export default class CoverageRating extends React.Component {
     if (this.props.value != null) {
       const value = Number(this.props.value);
       data = [
-        { value, fill: '#85bb43' },
-        { value: 100 - value, fill: '#d4333f' }
+        { value, fill: this.props.muted ? '#bdbdbd' : '#85bb43' },
+        { value: 100 - value, fill: this.props.muted ? '#f3f3f3' : '#d4333f' }
       ];
     }
 
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 25ca62145e9..feb5dc4a3d9 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -17,6 +17,14 @@
   border-width: 2px;
 }
 
+.duplications-rating-muted {
+  border-color: #bdbdbd !important;
+}
+
+.duplications-rating-muted:after {
+  background-color: #bdbdbd !important;
+}
+
 .duplications-rating:after {
   border-radius: 24px;
   background-color: #f3ca8e;
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 4d0e4f5c9bf..c2ffe4f5439 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
@@ -25,17 +25,20 @@ import './DuplicationsRating.css';
 export default class DuplicationsRating extends React.Component {
   static propTypes = {
     value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
-    small: React.PropTypes.bool
+    small: React.PropTypes.bool,
+    muted: React.PropTypes.bool
   };
 
   static defaultProps = {
-    small: false
+    small: false,
+    muted: false
   };
 
   render () {
     const { value } = this.props;
     const className = classNames('duplications-rating', {
       'duplications-rating-small': this.props.small,
+      'duplications-rating-muted': this.props.muted,
       '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.css b/server/sonar-web/src/main/js/components/ui/Level.css
index 77075bcb679..0d2a90de193 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.css
+++ b/server/sonar-web/src/main/js/components/ui/Level.css
@@ -22,6 +22,10 @@
   font-size: 12px;
 }
 
+.level-muted {
+  background-color: #bdbdbd !important;
+}
+
 a > .level {
   margin-bottom: -1px;
   border-bottom: 1px solid;
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 3b05b9cfe16..93dcf4de61f 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.js
+++ b/server/sonar-web/src/main/js/components/ui/Level.js
@@ -25,16 +25,21 @@ import './Level.css';
 export default class Level extends React.Component {
   static propTypes = {
     level: React.PropTypes.oneOf(['ERROR', 'WARN', 'OK']).isRequired,
-    small: React.PropTypes.bool
+    small: React.PropTypes.bool,
+    muted: React.PropTypes.bool
   };
 
   static defaultProps = {
-    small: false
+    small: false,
+    muted: false
   };
 
   render () {
     const formatted = formatMeasure(this.props.level, 'LEVEL');
-    const className = classNames('level', 'level-' + this.props.level, { 'level-small': this.props.small });
+    const className = classNames('level', 'level-' + this.props.level, {
+      'level-small': this.props.small,
+      'level-muted': this.props.muted
+    });
     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 7b63ce95879..f2bffe4ea81 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -21,6 +21,12 @@
   font-size: 12px;
 }
 
+.rating-muted {
+  background-color: #bdbdbd !important;
+  color: #fff !important;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35) !important;
+}
+
 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 7fe7d07da42..655d28420e5 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.js
+++ b/server/sonar-web/src/main/js/components/ui/Rating.js
@@ -32,16 +32,21 @@ export default class Rating extends React.Component {
             `Invalid prop "${propName}" passed to "${componentName}".`);
       }
     },
-    small: React.PropTypes.bool
+    small: React.PropTypes.bool,
+    muted: React.PropTypes.bool
   };
 
   static defaultProps = {
-    small: false
+    small: false,
+    muted: false
   };
 
   render () {
     const formatted = formatMeasure(this.props.value, 'RATING');
-    const className = classNames('rating', 'rating-' + formatted, { 'rating-small': this.props.small });
+    const className = classNames('rating', 'rating-' + formatted, {
+      'rating-small': this.props.small,
+      'rating-muted': this.props.muted
+    });
     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 7d6d7e171d3..846a993febd 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.css
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.css
@@ -9,6 +9,7 @@
   color: #fff;
   font-size: 12px;
   text-align: center;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
 }
 
 .size-rating-small {
@@ -21,5 +22,5 @@
 }
 
 .size-rating-muted {
-  background-color: #ccc;
+  background-color: #bdbdbd;
 }
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 f62fd4766b2..1e7a9044601 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.js
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.js
@@ -25,11 +25,13 @@ import './SizeRating.css';
 export default class SizeRating extends React.Component {
   static propTypes = {
     value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
-    small: React.PropTypes.bool
+    small: React.PropTypes.bool,
+    muted: React.PropTypes.bool
   };
 
   static defaultProps = {
-    small: false
+    small: false,
+    muted: false
   };
 
   render () {
@@ -54,7 +56,10 @@ export default class SizeRating extends React.Component {
       letter = 'XL';
     }
 
-    const className = classNames('size-rating', { 'size-rating-small': this.props.small });
+    const className = classNames('size-rating', {
+      'size-rating-small': this.props.small,
+      'size-rating-muted': this.props.muted
+    });
 
     return (
         <div className={className}>{letter}</div>