SONAR-8300 mute unselected facet options

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 0a9f3434166e8adba59ee3a869c77277e2b8470f..ae0a6ac54d55c68fa9b4fd24d70ec92e6e1bd248 100644 (file)
--- 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 153be2be7dcf80e7db7ebea7e4fb7abff308cf0c..18be81714edb82a4191633129910bae06df8d63d 100644 (file)
--- 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 42872eafbd63be0b412638d06b4c401236f79436..ec975cf527021cc9282622c27eee7d675975dee5 100644 (file)
--- 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 c955ae24906c9d1114e3607b66062d612c43ec70..f3d76b6c6ae42ae7a85c5cc91bd2142b17fb663b 100644 (file)
--- 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 a4838824870f92626debff88dce62d1634259a3c..25e88a4786181684bde7d1255384bd61ccb0fb13 100644 (file)
--- 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 7b947b002d2d64f4699f0920e4a4940d5caaa69e..6ad997e09d563311d8906313f6a95b1d37b990a1 100644 (file)
--- 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 ed6dc714cec55db7d7c5b83b7cbcf0c693f99cfb..15522753d8302990720c4e35775267503b30944e 100644 (file)
--- 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 1546962ff141385d76e5678d2842a66606e0c324..3477b3df1ee2c1625068959190b9301dc23efe90 100644 (file)
--- 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 25ca62145e9ab9b93d180e69649ed432ff0cd397..feb5dc4a3d9c4aa58198561e80ae1316abe9adc9 100644 (file)
--- 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 4d0e4f5c9bf64eb20495e96f12f07c6500f28857..c2ffe4f543905ee519d590da922deabaf383232a 100644 (file)
--- 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 77075bcb6794c281fbaeea1df19951eb957f1d43..0d2a90de193bebcf2c9569c0daf0663dab963578 100644 (file)
--- 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 3b05b9cfe1666e7fee4315eba804aafd2cc813ba..93dcf4de61f43be8045d879c0727695ca6745a0d 100644 (file)
--- 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 7b63ce958799ed6b81cfe1dbed344c898b131275..f2bffe4ea8170cfe2d06d88d6333acc0ea1f1b9f 100644 (file)
--- 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 7fe7d07da424fc853b173ee6eb11b9adfbc51434..655d28420e513e46b2b2a531f3f9e1e792d5b0a7 100644 (file)
--- 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 7d6d7e171d35716e60a412ec152a08292822e675..846a993febdcf6b6206d2119d518db7c60e6db3b 100644 (file)
--- 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 f62fd4766b27f4ece28bd2af4af80b9aa385affb..1e7a904460189ded238130fb6b22ec4f66a450e8 100644 (file)
--- 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>