SONAR-5209 Time changes menu

diff --git a/sonar-server/src/main/coffee/component-viewer/popup.coffee b/sonar-server/src/main/coffee/component-viewer/popup.coffee
index bd806802b0673982ec7837a905dc8adedcc8fbb3..ed750cc8fe5efdfe199c4f5ffa1c72ba6889eeab 100644 (file)
--- a/sonar-server/src/main/coffee/component-viewer/popup.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/popup.coffee
@@ -13,9 +13,16 @@ define [
 
     onRender: ->
       @$el.detach().appendTo $('body')
-      @$el.css
-        top: @options.triggerEl.offset().top
-        left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth()
+
+      unless @options.bottom
+        @$el.css
+          top: @options.triggerEl.offset().top
+          left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth()
+      else
+        @$el.addClass 'component-viewer-popup-bottom'
+        @$el.css
+          top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight()
+          left: @options.triggerEl.offset().left
 
       $('body').on 'click.coverage-popup', =>
         $('body').off 'click.coverage-popup'

diff --git a/sonar-server/src/main/coffee/component-viewer/source.coffee b/sonar-server/src/main/coffee/component-viewer/source.coffee
index 9cbfcea481831198a65481e5ef1dfc5bc9c9ddac..e38c8cf44d89589868f3d218ae0a255e1ac5957f 100644 (file)
--- a/sonar-server/src/main/coffee/component-viewer/source.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/source.coffee
@@ -3,6 +3,7 @@ define [
   'templates/component-viewer'
   'component-viewer/coverage-popup'
   'component-viewer/duplication-popup'
+  'component-viewer/time-changes-popup'
   'issues/issue-view'
   'issues/models/issue'
   'common/handlebars-extensions'
@@ -11,6 +12,7 @@ define [
   Templates
   CoveragePopupView
   DuplicationPopupView
+  TimeChangesPopupView
   IssueView
   Issue
 ) ->
@@ -42,6 +44,8 @@ define [
       'click .js-expand': 'expandBlock'
       'click .js-expand-all': 'expandAll'
 
+      'click .js-time-changes': 'toggleTimeChangePopup'
+
 
     initialize: ->
       super
@@ -94,8 +98,9 @@ define [
       @$('.component-viewer-source-settings').toggleClass 'open'
 
 
-    toggleMeasures: ->
-      @$('.component-viewer-measures-section').toggleClass 'brief'
+    toggleMeasures: (e) ->
+      row = $(e.currentTarget).closest '.component-viewer-header'
+      row.toggleClass 'component-viewer-header-full'
 
 
     toggleSetting: (e, show, hide) ->
@@ -171,6 +176,16 @@ define [
       @render()
 
 
+    toggleTimeChangePopup: (e) ->
+      e.stopPropagation()
+      $('body').click()
+      popup = new TimeChangesPopupView
+        triggerEl: $(e.currentTarget)
+        main: @options.main
+        bottom: true
+      popup.render()
+
+
     getLineCoverage: (line) ->
       coverage = @model.get 'coverage'
 

diff --git a/sonar-server/src/main/coffee/component-viewer/time-changes-popup.coffee b/sonar-server/src/main/coffee/component-viewer/time-changes-popup.coffee
new file mode 100644 (file)
index 0000000..74e9e25
--- /dev/null
+++ b/sonar-server/src/main/coffee/component-viewer/time-changes-popup.coffee
@@ -0,0 +1,15 @@
+define [
+  'backbone.marionette'
+  'templates/component-viewer'
+  'component-viewer/popup'
+], (
+  Marionette
+  Templates
+  Popup
+) ->
+
+  $ = jQuery
+
+
+  class TimeChangesPopupView extends Popup
+    template: Templates['time-changes-popup']

diff --git a/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs b/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs
index 7b9ab70ba2e5f87d4a45fe21207d9206623a3fcb..28581feeb090fa10ad651d9d850c2bbad3aa0f78 100644 (file)
--- a/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs
@@ -7,35 +7,99 @@
     <th class="stat"></th>
   {{/if}}
   <th>
-    <button class="button-clean button-full-size"><i class="icon-list"></i></button>
+    <button class="button-clean button-full-size js-toggle-measures"><i class="icon-list"></i></button>
   </th>
   <th class="component-viewer-header-main">
-    <div class="component-viewer-header-measure component-viewer-header-measure-main">
-      <span class="component-viewer-header-measure-value">{{component.measures.ncloc.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.ncloc.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure">
-      <span class="component-viewer-header-measure-value">{{component.measures.lines.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.lines.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure">
-      <span class="component-viewer-header-measure-value">{{component.measures.functions.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.functions.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure">
-      <span class="component-viewer-header-measure-value">{{component.measures.accessors.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.accessors.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure">
-      <span class="component-viewer-header-measure-value">{{component.measures.classes.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.classes.name'}}</span>
-    </div>
-    <div class="component-viewer-header-filter">
-      <button class="button-clean">
-        <i class="icon-period"></i>
-        <i class="icon-dropdown"></i>
-      </button>
-      <span class="component-viewer-header-measure-label">Time changes</span>
+    <div class="component-viewer-header-box">
+      <div class="component-viewer-header-measure component-viewer-header-measure-main">
+        <span class="component-viewer-header-measure-value">{{component.measures.ncloc.frmt_val}}</span>
+        <span class="component-viewer-header-measure-label">{{t 'metric.ncloc.name'}}</span>
+      </div>
+
+      {{#if component.measures.lines.frmt_val}}
+        <div class="component-viewer-header-measure">
+          <span class="component-viewer-header-measure-value">{{component.measures.lines.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.lines.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.functions.frmt_val}}
+        <div class="component-viewer-header-measure">
+          <span class="component-viewer-header-measure-value">{{component.measures.functions.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.functions.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.accessors.frmt_val}}
+        <div class="component-viewer-header-measure">
+          <span class="component-viewer-header-measure-value">{{component.measures.accessors.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.accessors.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.classes.frmt_val}}
+        <div class="component-viewer-header-measure">
+          <span class="component-viewer-header-measure-value">{{component.measures.classes.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.classes.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.complexity.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.complexity.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.complexity.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.function_complexity.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.function_complexity.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.function_complexity.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.comment_lines_density.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.comment_lines_density.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.comment_lines_density.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.comment_lines.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.comment_lines.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.comment_lines.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.public_documented_api_density.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.public_documented_api_density.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.public_documented_api_density.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.public_undocumented_api.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.public_undocumented_api.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.public_undocumented_api.name'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.public_api.frmt_val}}
+        <div class="component-viewer-header-measure component-viewer-header-measure-extra">
+          <span class="component-viewer-header-measure-value">{{component.measures.public_api.frmt_val}}</span>
+          <span class="component-viewer-header-measure-label">{{t 'metric.public_api.name'}}</span>
+        </div>
+      {{/if}}
+
+      <div class="component-viewer-header-filter">
+        <button class="button-clean js-time-changes">
+          <i class="icon-period"></i>
+          <i class="icon-dropdown"></i>
+        </button>
+        <span class="component-viewer-header-measure-label">Time changes</span>
+      </div>
     </div>
   </th>
 </tr>
\ No newline at end of file

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 fd776cf1789a1a7bb3c6b88871762a483df54a3b..b55814b3a22ad45f00a3e68985e9d2adbb4be857 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
@@ -10,25 +10,27 @@
     <button class="button-clean button-full-size"><i class="icon-list"></i></button>
   </th>
   <th class="component-viewer-header-main">
-    <div class="component-viewer-header-measure component-viewer-header-measure-main">
-      <span class="component-viewer-header-measure-value">{{component.measures.coverage.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.coverage.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure">
-      <span class="component-viewer-header-measure-value">{{component.measures.line_coverage.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.line_coverage.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure">
-      <span class="component-viewer-header-measure-value">{{component.measures.branch_coverage.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.branch_coverage.name'}}</span>
-    </div>
+    <div class="component-viewer-header-box">
+      <div class="component-viewer-header-measure component-viewer-header-measure-main">
+        <span class="component-viewer-header-measure-value">{{component.measures.coverage.frmt_val}}</span>
+        <span class="component-viewer-header-measure-label">{{t 'metric.coverage.name'}}</span>
+      </div>
+      <div class="component-viewer-header-measure">
+        <span class="component-viewer-header-measure-value">{{component.measures.line_coverage.frmt_val}}</span>
+        <span class="component-viewer-header-measure-label">{{t 'metric.line_coverage.name'}}</span>
+      </div>
+      <div class="component-viewer-header-measure">
+        <span class="component-viewer-header-measure-value">{{component.measures.branch_coverage.frmt_val}}</span>
+        <span class="component-viewer-header-measure-label">{{t 'metric.branch_coverage.name'}}</span>
+      </div>
 
-    <div class="component-viewer-header-filter">
-      <button class="button-clean">
-        <i class="icon-period"></i>
-        <i class="icon-dropdown"></i>
-      </button>
-      <span class="component-viewer-header-measure-label">Time changes</span>
+      <div class="component-viewer-header-filter">
+        <button class="button-clean js-time-changes">
+          <i class="icon-period"></i>
+          <i class="icon-dropdown"></i>
+        </button>
+        <span class="component-viewer-header-measure-label">Time changes</span>
+      </div>
     </div>
   </th>
 </tr>
\ 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 cb12904430eabfbc3492b1411fa17309054fb417..1ab3c714e20ab51735bf073e071df8d9a04532d7 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
@@ -6,79 +6,85 @@
   {{#if settings.duplications}}
     <th class="stat"></th>
   {{/if}}
-  <th>
-    <button class="button-clean button-full-size"><i class="icon-list"></i></button>
-  </th>
+  <th></th>
   <th class="component-viewer-header-main">
-    <div class="component-viewer-header-measure component-viewer-header-measure-main">
-      <span class="component-viewer-header-measure-value">{{component.measures.violations.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.violations.name'}}</span>
-    </div>
-    <div class="component-viewer-header-measure component-viewer-header-measure-main">
-      <span class="component-viewer-header-measure-value">{{component.measures.sqale_index.frmt_val}}</span>
-      <span class="component-viewer-header-measure-label">{{t 'metric.sqale_index.name'}}</span>
-    </div>
-    {{#if component.measures.blocker_violations.frmt_val}}
-      <div class="component-viewer-header-measure">
-            <span class="component-viewer-header-measure-value">
-              <i class="icon-severity-blocker"></i>
-              {{component.measures.blocker_violations.frmt_val}}
-            </span>
-        <span class="component-viewer-header-measure-label">{{t 'severity.BLOCKER'}}</span>
-      </div>
-    {{/if}}
-    {{#if component.measures.critical_violations.frmt_val}}
-      <div class="component-viewer-header-measure">
-            <span class="component-viewer-header-measure-value">
-              <i class="icon-severity-critical"></i>
-              {{component.measures.critical_violations.frmt_val}}
-            </span>
-        <span class="component-viewer-header-measure-label">{{t 'severity.CRITICAL'}}</span>
-      </div>
-    {{/if}}
-    {{#if component.measures.major_violations.frmt_val}}
-      <div class="component-viewer-header-measure">
-            <span class="component-viewer-header-measure-value">
-              <i class="icon-severity-major"></i>
-              {{component.measures.major_violations.frmt_val}}
-            </span>
-        <span class="component-viewer-header-measure-label">{{t 'severity.MAJOR'}}</span>
-      </div>
-    {{/if}}
-    {{#if component.measures.minor_violations.frmt_val}}
-      <div class="component-viewer-header-measure">
-            <span class="component-viewer-header-measure-value">
-              <i class="icon-severity-minor"></i>
-              {{component.measures.minor_violations.frmt_val}}
-            </span>
-        <span class="component-viewer-header-measure-label">{{t 'severity.MINOR'}}</span>
+    <div class="component-viewer-header-box">
+
+      <div class="component-viewer-header-measure component-viewer-header-measure-main">
+        <span class="component-viewer-header-measure-value">{{component.measures.violations.frmt_val}}</span>
+        <span class="component-viewer-header-measure-label">{{t 'metric.violations.name'}}</span>
       </div>
-    {{/if}}
-    {{#if component.measures.info_violations.frmt_val}}
-      <div class="component-viewer-header-measure">
-            <span class="component-viewer-header-measure-value">
-              <i class="icon-severity-info"></i>
-              {{component.measures.info_violations.frmt_val}}
-            </span>
-        <span class="component-viewer-header-measure-label">{{t 'severity.INFO'}}</span>
+
+      <div class="component-viewer-header-measure component-viewer-header-measure-main">
+        <span class="component-viewer-header-measure-value">{{component.measures.sqale_index.frmt_val}}</span>
+        <span class="component-viewer-header-measure-label">{{t 'metric.sqale_index.name'}}</span>
       </div>
-    {{/if}}
 
-    <div class="component-viewer-header-filter">
-      <button class="button-clean">
-        <i class="icon-period"></i>
-        <i class="icon-dropdown"></i>
-      </button>
-      <span class="component-viewer-header-measure-label">Time changes</span>
-    </div>
+      {{#if component.measures.blocker_violations.frmt_val}}
+        <div class="component-viewer-header-measure">
+              <span class="component-viewer-header-measure-value">
+                <i class="icon-severity-blocker"></i>
+                {{component.measures.blocker_violations.frmt_val}}
+              </span>
+          <span class="component-viewer-header-measure-label">{{t 'severity.BLOCKER'}}</span>
+        </div>
+      {{/if}}
 
-    <div class="component-viewer-header-filter">
-      <button class="button-clean">
-        <i class="icon-filter"></i>
-        <i class="icon-dropdown"></i>
-      </button>
-      <span class="component-viewer-header-measure-label">All issues</span>
-    </div>
+      {{#if component.measures.critical_violations.frmt_val}}
+        <div class="component-viewer-header-measure">
+              <span class="component-viewer-header-measure-value">
+                <i class="icon-severity-critical"></i>
+                {{component.measures.critical_violations.frmt_val}}
+              </span>
+          <span class="component-viewer-header-measure-label">{{t 'severity.CRITICAL'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.major_violations.frmt_val}}
+        <div class="component-viewer-header-measure">
+              <span class="component-viewer-header-measure-value">
+                <i class="icon-severity-major"></i>
+                {{component.measures.major_violations.frmt_val}}
+              </span>
+          <span class="component-viewer-header-measure-label">{{t 'severity.MAJOR'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.minor_violations.frmt_val}}
+        <div class="component-viewer-header-measure">
+              <span class="component-viewer-header-measure-value">
+                <i class="icon-severity-minor"></i>
+                {{component.measures.minor_violations.frmt_val}}
+              </span>
+          <span class="component-viewer-header-measure-label">{{t 'severity.MINOR'}}</span>
+        </div>
+      {{/if}}
+
+      {{#if component.measures.info_violations.frmt_val}}
+        <div class="component-viewer-header-measure">
+              <span class="component-viewer-header-measure-value">
+                <i class="icon-severity-info"></i>
+                {{component.measures.info_violations.frmt_val}}
+              </span>
+          <span class="component-viewer-header-measure-label">{{t 'severity.INFO'}}</span>
+        </div>
+      {{/if}}
 
+      <div class="component-viewer-header-filter">
+        <button class="button-clean js-time-changes">
+          <i class="icon-period"></i>
+          <i class="icon-dropdown"></i>
+        </button>
+        <span class="component-viewer-header-measure-label">Time changes</span>
+      </div>
+
+      <div class="component-viewer-header-filter">
+        <button class="button-clean">
+          <i class="icon-filter"></i>
+          <i class="icon-dropdown"></i>
+        </button>
+        <span class="component-viewer-header-measure-label">All issues</span>
+      </div>
+    </div>
   </th>
 </tr>
\ No newline at end of file

diff --git a/sonar-server/src/main/hbs/component-viewer/time-changes-popup.hbs b/sonar-server/src/main/hbs/component-viewer/time-changes-popup.hbs
new file mode 100644 (file)
index 0000000..5925fc1
--- /dev/null
+++ b/sonar-server/src/main/hbs/component-viewer/time-changes-popup.hbs
@@ -0,0 +1,13 @@
+<div class="component-viewer-popup-section">
+  <div class="component-viewer-popup-section-title">
+    Time changes
+  </div>
+  <ul class="component-viewer-popup-list">
+    <li><a><span>Current</span></a></li>
+    <li><a><span>Δ since previous analysis (Apr 02 2014)</span></a></li>
+    <li><a><span>Δ over 365 days (Apr 02 2013)</span></a></li>
+    <li><a><span>Δ since previous version (4.2 - Feb 24 2014)</span></a></li>
+  </ul>
+</div>
+
+<div class="component-viewer-popup-arrow"></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 e847f609f781148899664b7404b5aded4a9954a1..b9f30efc38fa9eb640f1e2c06638ae80c2dd60a7 100644 (file)
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -252,13 +252,23 @@
   padding: 4px 0 4px 5px;
 }
 
+.component-viewer-header-box { margin-bottom: -20px; }
+
 .component-viewer-header-measure {
   display: inline-block;
   vertical-align: bottom;
-  margin-right: 20px;
+  margin: 0 20px 20px 0;
   font-size: @baseFontSize;
 }
 
+.component-viewer-header-measure-extra {
+  display: none;
+}
+
+.component-viewer-header-full .component-viewer-header-measure-extra {
+  display: inline-block;
+}
+
 .component-viewer-header-measure-label {
   display: block;
   margin-top: 2px;
@@ -284,7 +294,7 @@
 .component-viewer-header-filter {
   display: inline-block;
   vertical-align: bottom;
-  margin-right: 20px;
+  margin: 0 20px 20px 0;
   padding-left: 20px;
   border-left: 1px solid @barBorderColor;
   font-size: @baseFontSize;
@@ -333,6 +343,29 @@
   }
 }
 
+.component-viewer-popup-bottom {
+  margin-top: @popupArrowSize;
+  margin-left: -16px;
+
+  .component-viewer-popup-arrow {
+    top: -@popupArrowSize;
+    left: 15px;
+    border-left-width: @popupArrowSize;
+    border-top-width: 0;
+    border-right-color: transparent;
+    border-bottom-color: @barBorderColor;
+
+    &:after {
+      left: -@popupArrowSize;
+      bottom: -@popupArrowSize - 1px;
+      border-left-width: @popupArrowSize;
+      border-top-width: 0;
+      border-right-color: transparent;
+      border-bottom-color: @white;
+    }
+  }
+}
+
 .component-viewer-popup-section + .component-viewer-popup-section {
   margin-top: 10px;
 }
@@ -344,6 +377,18 @@
 
 .component-viewer-popup-list {
   margin-top: 5px;
+
+  & > li {
+
+    & > a {
+      display: block;
+      margin: 0 -10px;
+      padding: 5px 10px;
+      .trans;
+
+      &:hover { background-color: @barBackgroundColor; }
+    }
+  }
 }
 
 .component-viewer-popup-test {