SONAR-5718 Improve issue selection UI

diff --git a/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee b/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
index dc618fcdf29c2028053b0b7cb11cb35cc8c55096..2dae2a47be35e26e3571ad94506f97246deca27d 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
+++ b/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
@@ -151,8 +151,8 @@ define [
 
 
     highlightIssue: (key) ->
-      @$("[data-issue-key]").removeClass 'highlighted'
-      @$("[data-issue-key='#{key}']").addClass 'highlighted'
+      @$("[data-issue-key]").removeClass 'selected'
+      @$("[data-issue-key='#{key}']").addClass 'selected'
 
 
     openFileByIssue: (issue) ->

diff --git a/server/sonar-web/src/main/less/issues.less b/server/sonar-web/src/main/less/issues.less
index fd48b50411a80c6bdd514ae3491d9d7e981f0d56..01de0dc07c3fd8760d56a9da55fde3e087f0728a 100644 (file)
--- a/server/sonar-web/src/main/less/issues.less
+++ b/server/sonar-web/src/main/less/issues.less
@@ -224,8 +224,12 @@
 }
 
 .issues-workspace-component-viewer {
-  padding: 0 10px;
+  padding: 1px 10px;
   overflow-x: auto;
+
+  .code-issue-modern {
+    margin: 5px 0;
+  }
 }
 
 .issues-workspace-component-viewer-header {
@@ -248,12 +252,18 @@
 
 .issue-box {
   .clearfix;
-  border: 1px solid @barBorderColor;
-  border-left: none;
+  outline: 1px solid @barBorderColor;
+  border-left: 2px solid transparent;
   overflow: hidden;
 
   &.selected {
-    background-color: #e4ecf3;
+    outline-color: @blue;
+    border-color: @blue;
+  }
+
+  .code-issue {
+    border: none;
+    outline: none;
   }
 }
 
@@ -261,17 +271,13 @@
   margin-top: 12px;
 }
 
-.issue-box-component,
-.issue-box-snippet {
-  border-left: 2px solid @red;
-}
-
 .issue-box-details {
 
 }
 
 .code-issue-modern {
-  border-left: 2px solid @red;
+  outline: 1px solid @barBorderColor;
+  border-left: 2px solid transparent;
 
   .code-issue-name,
   .code-issue-actions,
@@ -281,15 +287,12 @@
     background: transparent;
   }
 
-  &.highlighted {
-    background: #E4ECF3;
+  &.selected {
+    outline-color: @blue;
+    border-color: @blue;
   }
 }
 
-.code-source .code-issue-modern {
-  margin: 5px 0;
-}
-
 .issue-box-snippet {
   padding: 3px 0;
   overflow: hidden;