SONAR-8815 Improve rating facets style (#1764)

4 files changed, 96 insertions, 10 deletions

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 9f2bda8460c..d8470030565 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
@@ -39,11 +39,13 @@ export default class Filter extends React.Component {
 
     getFacetValueForOption: React.PropTypes.func,
 
-    halfWidth: React.PropTypes.bool
+    halfWidth: React.PropTypes.bool,
+    highlightUnder: React.PropTypes.func
   };
 
   static defaultProps = {
-    halfWidth: false
+    halfWidth: false,
+    highlightUnder: () => false
   };
 
   isSelected (option) {
@@ -90,10 +92,11 @@ export default class Filter extends React.Component {
   }
 
   renderOption (option) {
-    const { facet, getFacetValueForOption } = this.props;
+    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-half': this.props.halfWidth,
+      'search-navigator-facet-highlight-under': this.props.highlightUnder(option)
     }, this.props.optionClassName);
 
     const path = this.getPath(option);
@@ -103,7 +106,7 @@ export default class Filter extends React.Component {
     return (
         <Link key={option} className={className} to={path} data-key={option}>
           <span className="facet-name">
-            {this.props.renderOption(option, this.isSelected(option))}
+            {this.props.renderOption(option, this.isSelected(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 0250eafae0f..5f1c9073634 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,10 +31,14 @@ export default class IssuesFilter extends React.Component {
     organization: React.PropTypes.object
   }
 
-  renderOption = (option, selected) => {
+  renderOption = (option, selected, value) => {
+    const isUnderSelectedOption = this.highlightUnder(value) && option > value;
     return (
         <span>
-          <Rating value={option} small={true} muted={!selected}/>
+          <Rating
+              value={option}
+              small={true}
+              muted={!selected && !isUnderSelectedOption}/>
           {option > 1 && option < 5 && (
               <span className="note spacer-left">and worse</span>
           )}
@@ -52,6 +56,10 @@ export default class IssuesFilter extends React.Component {
     );
   }
 
+  highlightUnder (option) {
+    return option !== null && option > 1;
+  }
+
   getFacetValueForOption = (facet, option) => {
     return facet[option];
   };
@@ -64,6 +72,7 @@ export default class IssuesFilter extends React.Component {
             renderName={() => this.props.name}
             renderOption={this.renderOption}
             renderSort={this.renderSort}
+            highlightUnder={this.highlightUnder}
             getFacetValueForOption={this.getFacetValueForOption}
             query={this.props.query}
             isFavorite={this.props.isFavorite}
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 176c2e5713b..3b2ced4253a 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -169,6 +169,7 @@
   transition: width 0.3s ease;
 }
 
-.search-navigator-facet.active .projects-facet-bar-inner {
+.search-navigator-facet.active .projects-facet-bar-inner,
+.search-navigator-facet-highlight-under.active ~ .search-navigator-facet .projects-facet-bar-inner {
   background-color: #4b9fd5;
 }
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 197bdfef290..08d9a90c69a 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -114,8 +114,8 @@
   vertical-align: middle;
   width: 100%;
   margin: 0 0 1px 0;
-  padding: 3px 5px;
-  border: 1px solid transparent;
+  padding: 4px 6px;
+  border: none;
   border-radius: 2px;
   box-sizing: border-box;
   background-color: @barBackgroundColor;
@@ -127,6 +127,12 @@
 
   &:hover {
     border: 1px solid @blue;
+    padding: 3px 5px;
+
+    .facet-stat {
+      top: -1px;
+      right: -1px;
+    }
   }
 
   .facet-name {
@@ -186,6 +192,7 @@
 
   &.active {
     border: 1px solid @blue;
+    padding: 3px 5px;
     background-color: @lightBlue;
     text-decoration: none;
 
@@ -196,6 +203,8 @@
     .facet-stat {
       border-color: @blue;
       background-color: @lightBlue;
+      top: -1px;
+      right: -1px;
 
       &:before {
         background-image: linear-gradient(to right, fade(@lightBlue, 0%), @lightBlue 75%);
@@ -221,6 +230,70 @@
   }
 }
 
+.search-navigator-facet-highlight-under {
+  margin-bottom: 0;
+
+  &:hover, &.active {
+    border-bottom: none;
+    padding-bottom: 4px;
+    border-radius: 2px 2px 0 0;
+
+    & ~ .search-navigator-facet {
+      padding-left: 5px;
+      padding-right: 5px;
+      border-left: 1px solid @blue;
+      border-right: 1px solid @blue;
+      border-radius: 0;
+
+      .facet-stat {
+        right: -1px;
+      }
+
+      &:last-of-type {
+        padding-bottom: 3px;
+        border-bottom: 1px solid @blue;
+        border-radius: 0 0 2px 2px;
+      }
+    }
+
+    &:last-of-type {
+      padding-bottom: 3px;
+      border-bottom: 1px solid @blue;
+      border-radius: 2px;
+    }
+  }
+
+  .selectFacet(@bgColor) {
+    background-color: @bgColor;
+    text-decoration: none;
+
+    .facet-name {
+      background-color: @bgColor;
+    }
+
+    .facet-stat {
+      border-color: @blue;
+      background-color: @bgColor;
+
+      &:before {
+        background-image: linear-gradient(to right, fade(@bgColor, 0%), @bgColor 75%);
+      }
+    }
+
+    .facet-toggle {
+      display: inline;
+    }
+  }
+
+  &.active ~ .search-navigator-facet {
+    .selectFacet(@lightBlue);
+
+    &:hover, &:hover ~ .search-navigator-facet {
+      .selectFacet(darken(@lightBlue, 10%));
+    }
+  }
+}
+
 .search-navigator-facet-header {
   display: block;
   padding: 6px 10px;