SONAR-9064 Rework facets sidebar on the issues page

4 files changed, 57 insertions, 27 deletions

diff --git a/server/sonar-web/src/main/less/components/issues.less b/server/sonar-web/src/main/less/components/issues.less
index 658462e620c..ba09fadce81 100644
--- a/server/sonar-web/src/main/less/components/issues.less
+++ b/server/sonar-web/src/main/less/components/issues.less
@@ -43,7 +43,7 @@
 
 .issue-list,
 .issue {
-  max-width: 920px;
+  max-width: 980px;
 }
 
 .issue.selected {
@@ -91,6 +91,8 @@
 }
 
 .issue-rule {
+  vertical-align: top;
+  margin-top: 2px;
   padding: 0 3px;
   background: fade(@blue, 30%);
   opacity: 0.5;
@@ -346,7 +348,7 @@ input.issue-action-options-search {
   top: 0;
   bottom: 0;
   left: 0;
-  cursor: pointer;
+  border: none;
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less
index 9e24c26252f..cd284d7a546 100644
--- a/server/sonar-web/src/main/less/components/page.less
+++ b/server/sonar-web/src/main/less/components/page.less
@@ -153,10 +153,11 @@
 }
 
 .page-sidebar-sticky {
+  width: 320px !important;
   padding-right: 0;
 
   .page-limited & {
-    margin: -20px 0;
+    margin: -20px 0 -20px -20px;
     padding-right: 0 !important;
 
     .page-sidebar-sticky-inner {
@@ -166,16 +167,27 @@
 
   .page-sidebar-sticky-inner {
     position: fixed;
+    z-index: 10;
     top: 30px;
     bottom: 0;
+    left: 0;
     overflow: auto;
-    width: 290px;
+    width: ~"calc(50vw - 640px + 280px + 3px)";
     border-right: 1px solid #e6e6e6;
     box-sizing: border-box;
     background: #f3f3f3;
 
+    @media (max-width: 1335px) {
+        & { width: 310px; }
+      }
+
     .search-navigator-facets-list {
       width: 260px;
+      margin-left: ~"calc(50vw - 640px + 290px - 260px - 37px)";
+
+      @media (max-width: 1335px) {
+        & { margin-left: 20px; }
+      }
     }
   }
 }
diff --git a/server/sonar-web/src/main/less/components/react-select.less b/server/sonar-web/src/main/less/components/react-select.less
index 0f496e61f58..a29d4113e52 100644
--- a/server/sonar-web/src/main/less/components/react-select.less
+++ b/server/sonar-web/src/main/less/components/react-select.less
@@ -101,6 +101,21 @@
   white-space: nowrap;
 }
 
+.Select-value svg,
+.Select-value [class^="icon-"] {
+  padding-top: 4px;
+}
+
+.Select-value img {
+  padding-top: 3px;
+}
+
+.Select-option svg,
+.Select-option img,
+.Select-option [class^="icon-"] {
+  padding-top: 2px;
+}
+
 .has-value:not(.Select--multi) > .Select-control > .Select-value .Select-value-label,
 .has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value .Select-value-label {
   color: @baseFontColor;
@@ -311,26 +326,15 @@
   padding: 8px 10px;
 }
 
-.Select--multi .Select-input {
-  vertical-align: middle;
-  margin-left: 10px;
-  padding: 0;
-}
-
-.Select--multi.has-value .Select-input {
-  margin-left: 5px;
-}
-
 .Select--multi .Select-value {
   background-color: rgba(0, 126, 255, 0.08);
   border-radius: 2px;
   border: 1px solid rgba(0, 126, 255, 0.24);
-  color: #007eff;
+  color: @baseFontColor;
   display: inline-block;
-  font-size: 0.9em;
-  line-height: 1.4;
-  margin-left: 5px;
-  margin-top: 5px;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 1px 4px 1px 1px;
   vertical-align: top;
 }
 
@@ -400,6 +404,10 @@
   background-color: #fcfcfc;
 }
 
+.Select-aria-only {
+  display: none;
+}
+
 @keyframes Select-animation-spin {
   to {
     transform: rotate(1turn);
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 08d9a90c69a..8b0203bfd2a 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -122,23 +122,30 @@
   white-space: normal;
   overflow: hidden;
   font-size: 0;
-  cursor: pointer;
   transition: none;
 
-  &:hover {
-    border: 1px solid @blue;
-    padding: 3px 5px;
+  a& {
+    cursor: pointer;
 
-    .facet-stat {
-      top: -1px;
-      right: -1px;
+    .facet-name {
+      color: @baseFontColor;
+    }
+
+    &:hover, &:focus {
+      border: 1px solid @blue;
+      padding: 3px 5px;
+
+      .facet-stat {
+        top: -1px;
+        right: -1px;
+      }
     }
   }
 
   .facet-name {
     line-height: 16px;
     background-color: @barBackgroundColor;
-    color: @baseFontColor;
+    color: @secondFontColor;
     font-size: @smallFontSize;
     white-space: nowrap;
   }
@@ -425,6 +432,7 @@
 .search-navigator-date-facet-selection {
   .clearfix;
   position: relative;
+  padding: 0 10px;
   font-size: @smallFontSize;
 }