SONAR-5209 UI improvements

diff --git a/sonar-server/src/main/coffee/component-viewer/header.coffee b/sonar-server/src/main/coffee/component-viewer/header.coffee
index 9e2d5140327837aab595efb5b1a1d66f565a038a..a6df231d1fc8975f6db53be95bad7115c858c72c 100644 (file)
--- a/sonar-server/src/main/coffee/component-viewer/header.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/header.coffee
@@ -87,11 +87,15 @@ define [
       @toggleSetting e, @options.main.showWorkspace, @options.main.hideWorkspace
 
 
-    filterByLinesToCover: ->
+    filterByLinesToCover: (e) ->
+      @$('.component-viewer-header-expanded-bar-section-list .active').removeClass 'active'
+      $(e.currentTarget).addClass 'active'
       @options.main.filterLinesByLinesToCover()
 
 
-    filterByUncoveredLines: ->
+    filterByUncoveredLines: (e) ->
+      @$('.component-viewer-header-expanded-bar-section-list .active').removeClass 'active'
+      $(e.currentTarget).addClass 'active'
       @options.main.filterLinesByUncoveredLines()
 
 

diff --git a/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs b/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs
index 02fd444f3eba07ac181a85811fbb965379e2d778..e160d217d56bb49c85e416264839d89de5f1926b 100644 (file)
--- a/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs
@@ -1,25 +1,28 @@
 <div class="component-viewer-header-expanded-bar-section">
   <div class="component-viewer-header-expanded-bar-section-title">Unit Tests</div>
   <ul class="component-viewer-header-expanded-bar-section-list">
-    <li><a class="item">
-      <span>Line coverage</span>
+    <li><span class="item">
+      <span class="label">Line coverage</span>
       <span class="number">93.6%</span>
-    </a></li>
+    </span></li>
     <li><a class="item js-filter-line-to-cover">
-      <span>Lines to cover</span>
+      <span class="label">Lines to cover</span>
       <span class="number">171</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item js-filter-uncovered-lines">
-      <span>Uncovered lines</span>
+      <span class="label">Uncovered lines</span>
       <span class="number">16</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
-    <li><a class="item">
-      <span>Branch coverage</span>
+    <li><span class="item">
+      <span class="label">Branch coverage</span>
       <span class="number">100%</span>
-    </a></li>
+    </span></li>
     <li><a class="item">
-      <span>Branches to cover</span>
+      <span class="label">Branches to cover</span>
       <span class="number">16</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
   </ul>
 </div>
@@ -27,17 +30,19 @@
 <div class="component-viewer-header-expanded-bar-section">
   <div class="component-viewer-header-expanded-bar-section-title">Integration Tests</div>
   <ul class="component-viewer-header-expanded-bar-section-list">
-    <li><a class="item">
-      <span>Line Coverage</span>
+    <li><span class="item">
+      <span class="label">Line Coverage</span>
       <span class="number">47.2%</span>
-    </a></li>
+    </span></li>
     <li><a class="item">
-      <span>Lines to cover</span>
+      <span class="label">Lines to cover</span>
       <span class="number">171</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
-      <span>Uncovered lines</span>
+      <span class="label">Uncovered lines</span>
       <span class="number">16</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
   </ul>
 </div>
\ No newline at end of file

diff --git a/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs b/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs
index b502a06c1e3ee13f67e8d46b6d279cd429cfdaa4..f13b40a9ec70421c2861a9296c6e776541c568bb 100644 (file)
--- a/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs
@@ -4,14 +4,17 @@
     <li><a class="item">
       <span>Array designators "[]" should be located after the type in method signatures</span>
       <span class="number">2</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span>Avoid Array Loops</span>
       <span class="number">1</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span>Useless Operation On Immutable</span>
       <span class="number">4</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
   </ul>
 </div>
@@ -20,22 +23,27 @@
     <li><a class="item">
       <span><i class="icon-severity-blocker"></i> {{t 'severity.BLOCKER'}}</span>
       <span class="number">{{component.measures.blocker_issues}}</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span><i class="icon-severity-critical"></i> {{t 'severity.CRITICAL'}}</span>
       <span class="number">{{component.measures.critical_issues}}</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span><i class="icon-severity-major"></i> {{t 'severity.MAJOR'}}</span>
       <span class="number">{{component.measures.major_issues}}</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span><i class="icon-severity-minor"></i> {{t 'severity.MINOR'}}</span>
       <span class="number">{{component.measures.minor_issues}}</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span><i class="icon-severity-info"></i> {{t 'severity.INFO'}}</span>
       <span class="number">{{component.measures.info_issues}}</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
   </ul>
 </div>
@@ -43,10 +51,12 @@
   <ul class="component-viewer-header-expanded-bar-section-list">
     <li><a class="item">
       <span>Current issue</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
     <li><a class="item">
       <span>False Positive</span>
       <span class="number">3</span>
+      <i class="icon-chevron-right"></i>
     </a></li>
   </ul>
 </div>
\ No newline at end of file

diff --git a/sonar-server/src/main/less/component-viewer.less b/sonar-server/src/main/less/component-viewer.less
index 71d22027155f0bbd68533d88b778fa71baf21b5e..e5aec7cee48c53be347b4bd8714f12e8ac22e5c7 100644 (file)
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -408,26 +408,19 @@
   display: none;
   .clearfix;
   margin-top: -1px;
-  padding: 10px;
   border: 1px solid @barBorderColor;
   border-top: none;
   background-color: #fff;
 }
 
 .component-viewer-header-expanded-bar-section {
-  float: left;
-  min-width: 150px;
-  max-width: 250px;
-}
-
-.component-viewer-header-expanded-bar-section + .component-viewer-header-expanded-bar-section {
-  margin-left: 20px;
-  padding-left: 20px;
-  border-left: 1px solid @barBorderColor;
+  display: inline-block;
+  vertical-align: top;
+  width: 250px;
 }
 
 .component-viewer-header-expanded-bar-section-title {
-  margin-bottom: 6px;
+  padding: 10px 10px 6px 10px;
   color: #777;
   font-size: @smallFontSize;
 }
@@ -437,21 +430,27 @@
   & > li > .item {
     position: relative;
     display: block;
-    padding: 2px 25px 2px 5px;
+    padding: 4px 60px 4px 10px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 
     & > .number {
       position: absolute;
-      right: 5px;
+      right: 25px;
+    }
+
+    & > i {
+      position: absolute;
+      right: 10px;
     }
   }
 
-  & > li > a {
+  & > li > a.item {
     .trans;
 
     &:hover { background-color: @barBackgroundColor; }
+    &:active, &.active { background-color: @lightBlue; }
   }
 }
 

diff --git a/sonar-server/src/main/less/icons.less b/sonar-server/src/main/less/icons.less
index 72522d1336f82031ac9e49a93fbae0074f56335d..be2938b5eb6514e70eddfbb58335f2719ed371e2 100644 (file)
--- a/sonar-server/src/main/less/icons.less
+++ b/sonar-server/src/main/less/icons.less
@@ -429,6 +429,14 @@ a[class^="icon-"], a[class*=" icon-"] {
   content: "\f08e";
   font-size: @iconSmallFontSize;
 }
+.icon-chevron-left:before {
+  content: "\f104";
+  font-size: @iconSmallFontSize;
+}
+.icon-chevron-right:before {
+  content: "\f105";
+  font-size: @iconSmallFontSize;
+}
 
 
 /*

diff --git a/sonar-server/src/main/webapp/fonts/sonar.woff b/sonar-server/src/main/webapp/fonts/sonar.woff
index 68c08a52534dc22adc2ddd910f5823b6624b5f23..fac51f900b880460f70238175c43f630581c0faf 100755 (executable)
Binary files a/sonar-server/src/main/webapp/fonts/sonar.woff and b/sonar-server/src/main/webapp/fonts/sonar.woff differ