SONAR-5209 Decorators

diff --git a/sonar-server/src/main/hbs/component-viewer/header.hbs b/sonar-server/src/main/hbs/component-viewer/header.hbs
index eef50ec21064bbda17f3bb27aa8091f9474ec826..68c96c002b219507dd5f623cb060b84d378c8972 100644 (file)
--- a/sonar-server/src/main/hbs/component-viewer/header.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/header.hbs
@@ -18,65 +18,80 @@
   </div>
 
   <div class="component-viewer-header-measures">
-    <a data-scope="basic" class="component-viewer-header-measures-expand">
-      {{#if component.measures.ncloc}}
-        <div class="component-viewer-header-measure">
-          <span class="component-viewer-header-measure-value">{{component.measures.ncloc}}</span>
-          <span class="component-viewer-header-measure-label">{{t 'metric.ncloc.name'}}</span>
-        </div>
-      {{/if}}
-      <i class="icon-dropdown"></i>
-    </a>
+    <div class="component-viewer-header-measures-scope">
+      <span data-scope="coverage" class="js-toggle-coverage component-viewer-header-measures-toggle-scope inactive"></span>
+      <a data-scope="basic" class="component-viewer-header-measures-expand">
+        {{#if component.measures.ncloc}}
+          <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">{{component.measures.ncloc}}</span>
+            <span class="component-viewer-header-measure-label">{{t 'metric.ncloc.name'}}</span>
+          </div>
+        {{/if}}
+        <i class="icon-dropdown"></i>
+      </a>
+    </div>
 
-    <a data-scope="issues" class="component-viewer-header-measures-expand">
-      {{#if component.measures.debt}}
+    <div class="component-viewer-header-measures-scope">
+      <a data-scope="issues" title="Toggle issues"
+         class="js-toggle-issues component-viewer-header-measures-toggle-scope {{#if settings.issues}}active{{/if}}"></a>
+      <a data-scope="issues" class="component-viewer-header-measures-expand">
+        {{#if component.measures.debt}}
+          <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">{{component.measures.debt}}</span>
+            <span class="component-viewer-header-measure-label">Debt</span>
+          </div>
+        {{/if}}
+        {{#if component.measures.issues}}
+          <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">{{component.measures.issues}}</span>
+            <span class="component-viewer-header-measure-label">{{t 'metric.violations.name'}}</span>
+          </div>
+        {{/if}}
         <div class="component-viewer-header-measure">
-          <span class="component-viewer-header-measure-value">{{component.measures.debt}}</span>
-          <span class="component-viewer-header-measure-label">Debt</span>
+          <div class="component-viewer-header-measure-issues">
+            <div class="component-viewer-header-measure-issue s-blocker"
+                 style="width: {{percent component.measures.blocker_issues component.measures.max_issues}}%;"></div>
+            <div class="component-viewer-header-measure-issue s-critical"
+                 style="width: {{percent component.measures.critical_issues component.measures.max_issues}}%;"></div>
+            <div class="component-viewer-header-measure-issue s-major"
+                 style="width: {{percent component.measures.major_issues component.measures.max_issues}}%;"></div>
+            <div class="component-viewer-header-measure-issue s-minor"
+                 style="width: {{percent component.measures.minor_issues component.measures.max_issues}}%;"></div>
+            <div class="component-viewer-header-measure-issue s-info"
+                 style="width: {{percent component.measures.info_issues component.measures.max_issues}}%;"></div>
+          </div>
         </div>
-      {{/if}}
-      {{#if component.measures.issues}}
-        <div class="component-viewer-header-measure">
-          <span class="component-viewer-header-measure-value">{{component.measures.issues}}</span>
-          <span class="component-viewer-header-measure-label">{{t 'metric.violations.name'}}</span>
-        </div>
-      {{/if}}
-      <div class="component-viewer-header-measure">
-        <div class="component-viewer-header-measure-issues">
-          <div class="component-viewer-header-measure-issue s-blocker"
-               style="width: {{percent component.measures.blocker_issues component.measures.max_issues}}%;"></div>
-          <div class="component-viewer-header-measure-issue s-critical"
-               style="width: {{percent component.measures.critical_issues component.measures.max_issues}}%;"></div>
-          <div class="component-viewer-header-measure-issue s-major"
-               style="width: {{percent component.measures.major_issues component.measures.max_issues}}%;"></div>
-          <div class="component-viewer-header-measure-issue s-minor"
-               style="width: {{percent component.measures.minor_issues component.measures.max_issues}}%;"></div>
-          <div class="component-viewer-header-measure-issue s-info"
-               style="width: {{percent component.measures.info_issues component.measures.max_issues}}%;"></div>
-        </div>
-      </div>
-      <i class="icon-dropdown"></i>
-    </a>
+        <i class="icon-dropdown"></i>
+      </a>
+    </div>
 
-    <a data-scope="coverage" class="component-viewer-header-measures-expand">
-      {{#if component.measures.coverage}}
-        <div class="component-viewer-header-measure">
-          <span class="component-viewer-header-measure-value">{{component.measures.coverage}}</span>
-          <span class="component-viewer-header-measure-label">{{t 'metric.coverage.name'}}</span>
-        </div>
-      {{/if}}
-      <i class="icon-dropdown"></i>
-    </a>
+    <div class="component-viewer-header-measures-scope">
+      <a data-scope="coverage" title="Toggle coverage"
+         class="js-toggle-coverage component-viewer-header-measures-toggle-scope {{#if settings.coverage}}active{{/if}}"></a>
+      <a data-scope="coverage" class="component-viewer-header-measures-expand">
+        {{#if component.measures.coverage}}
+          <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">{{component.measures.coverage}}</span>
+            <span class="component-viewer-header-measure-label">{{t 'metric.coverage.name'}}</span>
+          </div>
+        {{/if}}
+        <i class="icon-dropdown"></i>
+      </a>
+    </div>
 
-    <a data-scope="duplications" class="component-viewer-header-measures-expand">
-      {{#if component.measures.duplication_density}}
-        <div class="component-viewer-header-measure">
-          <span class="component-viewer-header-measure-value">{{component.measures.duplication_density}}</span>
-          <span class="component-viewer-header-measure-label">Duplications</span>
-        </div>
-      {{/if}}
-      <i class="icon-dropdown"></i>
-    </a>
+    <div class="component-viewer-header-measures-scope">
+      <a data-scope="duplications" title="Toggle duplications"
+         class="js-toggle-duplications component-viewer-header-measures-toggle-scope {{#if settings.duplications}}active{{/if}}"></a>
+      <a data-scope="duplications" class="component-viewer-header-measures-expand">
+        {{#if component.measures.duplication_density}}
+          <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">{{component.measures.duplication_density}}</span>
+            <span class="component-viewer-header-measure-label">Duplications</span>
+          </div>
+        {{/if}}
+        <i class="icon-dropdown"></i>
+      </a>
+    </div>
   </div>
 </div>
 
@@ -100,7 +115,7 @@
 
 
 
-<div class="component-viewer-header-decoration">
+<div class="component-viewer-header-decoration" style="display: none;">
   <div class="button-group">
     <button class="js-toggle-issues {{#if settings.issues}}active{{/if}}">Issues</button>
     <button class="js-toggle-coverage {{#if settings.coverage}}active{{/if}}">Coverage</button>

diff --git a/sonar-server/src/main/hbs/component-viewer/source.hbs b/sonar-server/src/main/hbs/component-viewer/source.hbs
index 51b3f8fe430495095c881bf9de9b6b7bf63e38ba..52a6a6a96757642b0df8889c023e33c4b5b12a8b 100644 (file)
--- a/sonar-server/src/main/hbs/component-viewer/source.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/source.hbs
@@ -1,5 +1,5 @@
 <table class="code">
-  <tr class="row" data-line-number="0">
+  <tr class="row row-hidden" data-line-number="0">
     {{#if settings.coverage}}
       <td class="stat coverage-tests"></td>
       <td class="stat coverage-conditions"></td>

diff --git a/sonar-server/src/main/less/component-viewer.less b/sonar-server/src/main/less/component-viewer.less
index 8cfc3f7e6482be248acbf611c521dc8fef101728..6c000b4e219a8c3552191a136665f441b1aa26ff 100644 (file)
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -257,6 +257,7 @@
 
 .component-viewer-header {
   margin-bottom: 10px;
+  padding-top: 8px;
 }
 
 .component-viewer-header-bar {
@@ -288,10 +289,28 @@
   float: right;
 }
 
-.component-viewer-header-measures-expand {
+.component-viewer-header-measures-scope {
+  position: relative;
   float: left;
-  padding: 10px 20px;
   border-left: 1px solid transparent;
+}
+
+.component-viewer-header-measures-toggle-scope {
+  position: absolute;
+  top: -9px;
+  display: block;
+  .size(100%, 8px);
+  background-color: lighten(@blue, 30%);
+  .trans;
+
+  &:hover { background-color: lighten(@blue, 15%); }
+  &.active { background-color: @blue; }
+  &.inactive { background-color: transparent; }
+}
+
+.component-viewer-header-measures-expand {
+  display: block;
+  padding: 10px 20px;
   .trans(background);
 
   &:hover { background-color: @barBorderColor; }
@@ -304,7 +323,7 @@
   }
 }
 
-.component-viewer-header-measures-expand + .component-viewer-header-measures-expand {
+.component-viewer-header-measures-scope + .component-viewer-header-measures-scope {
   border-left-color: @barBorderColor;
 }