Replace overlay component with modals

diff --git a/server/sonar-web/src/main/coffee/common/overlay.coffee b/server/sonar-web/src/main/coffee/common/overlay.coffee
deleted file mode 100644 (file)
index 70574be..0000000
--- a/server/sonar-web/src/main/coffee/common/overlay.coffee
+++ /dev/null
@@ -1,28 +0,0 @@
-define [
-  'backbone.marionette'
-], (
-  Marionette
-) ->
-
-  $ = jQuery
-
-
-  class extends Marionette.ItemView
-    className: 'overlay-popup'
-
-
-    events: ->
-      'click .overlay-popup-close': 'close'
-
-
-    onRender: ->
-      @$el.isolatedScroll()
-      @$el.detach().appendTo $('body')
-      key 'escape', 'overlay-popup', => @close()
-      @keyScope = key.getScope()
-      key.setScope 'overlay-popup'
-
-
-    onClose: ->
-      key.unbind 'overlay-popup'
-      key.setScope @keyScope

diff --git a/server/sonar-web/src/main/coffee/issue/issue-view.coffee b/server/sonar-web/src/main/coffee/issue/issue-view.coffee
index eff00d06d1e160230b2276e3795d2b69414107eb..b56ea55e2fa24ec81277df6c1386984288dcbfeb 100644 (file)
--- a/server/sonar-web/src/main/coffee/issue/issue-view.coffee
+++ b/server/sonar-web/src/main/coffee/issue/issue-view.coffee
@@ -265,6 +265,7 @@ define [
       $.get "#{baseUrl}/api/rules/show", key: ruleKey, (r) =>
         ruleOverlay = new RuleOverlay
           model: new Backbone.Model r.rule
+          large: true
         ruleOverlay.render()
 
 

diff --git a/server/sonar-web/src/main/coffee/issue/views/rule-overlay.coffee b/server/sonar-web/src/main/coffee/issue/views/rule-overlay.coffee
index 54d13bd8f0a9c7e20a6c9bde98e6976019765606..8f87f1eecbf06bff3857eea311f426695772348a 100644 (file)
--- a/server/sonar-web/src/main/coffee/issue/views/rule-overlay.coffee
+++ b/server/sonar-web/src/main/coffee/issue/views/rule-overlay.coffee
@@ -1,12 +1,12 @@
 define [
-  'common/overlay'
+  'common/modals'
   'templates/issue'
 ], (
-  Overlay
+  ModalView
   Templates
 ) ->
 
-  class extends Overlay
+  class extends ModalView
     template: Templates['issue-rule']
 
 

diff --git a/server/sonar-web/src/main/hbs/issue/issue-rule.hbs b/server/sonar-web/src/main/hbs/issue/issue-rule.hbs
index cee912e959437d713f5a321b5631b9dac37c9814..deb4a080cf33c14ba9f4f5dc646e3e7b3df1a613 100644 (file)
--- a/server/sonar-web/src/main/hbs/issue/issue-rule.hbs
+++ b/server/sonar-web/src/main/hbs/issue/issue-rule.hbs
@@ -1,25 +1,27 @@
-<h3 class="coding-rules-detail-header">
-  {{name}}
-  <a class="coding-rules-detail-permalink" target="_blank" href="{{permalink}}">
-    <i class="icon-link"></i> {{t 'coding_rules.permalink'}}
-  </a>
-</h3>
+<div class="modal-container">
+  <h3 class="coding-rules-detail-header">
+    {{name}}
+    <a class="coding-rules-detail-permalink" target="_blank" href="{{permalink}}">
+      <i class="icon-link"></i> {{t 'coding_rules.permalink'}}
+    </a>
+  </h3>
 
-<span class="subtitle">{{key}}</span>
+  <span class="subtitle">{{key}}</span>
 
-<ul class="coding-rules-detail-properties">
-  <li class="coding-rules-detail-property coding-rules-detail-tag-list">
-    <i class="icon-tags"></i>
-    <span>{{#if allTags}}{{join allTags ', '}}{{else}}{{t 'coding_rules.no_tags'}}{{/if}}</span>
-  </li>
-  {{#if debtCharName}}
-    <li class="coding-rules-detail-property">{{debtCharName}}{{#if debtSubCharName}} > {{debtSubCharName}}{{/if}}</li>
-  {{/if}}
-</ul>
+  <ul class="coding-rules-detail-properties">
+    <li class="coding-rules-detail-property coding-rules-detail-tag-list">
+      <i class="icon-tags"></i>
+      <span>{{#if allTags}}{{join allTags ', '}}{{else}}{{t 'coding_rules.no_tags'}}{{/if}}</span>
+    </li>
+    {{#if debtCharName}}
+      <li class="coding-rules-detail-property">{{debtCharName}}{{#if debtSubCharName}} > {{debtSubCharName}}{{/if}}</li>
+    {{/if}}
+  </ul>
 
 
-<div class="coding-rules-detail-description rule-desc markdown">{{{htmlDesc}}}</div>
+  <div class="coding-rules-detail-description rule-desc markdown">{{{htmlDesc}}}</div>
+</div>
 
 <div class="modal-foot">
-  <a class="overlay-popup-close" title="{{t 'close'}}">{{t 'close'}}</a>
+  <a class="js-modal-close" title="{{t 'close'}}">{{t 'close'}}</a>
 </div>

diff --git a/server/sonar-web/src/main/hbs/source-viewer/source-viewer-measures.hbs b/server/sonar-web/src/main/hbs/source-viewer/source-viewer-measures.hbs
index 166e9c6beea8c85d0a1a0edcf2b8336e795f0f7f..02278679b8977429dae09e4bf70b4de2e1f5317f 100644 (file)
--- a/server/sonar-web/src/main/hbs/source-viewer/source-viewer-measures.hbs
+++ b/server/sonar-web/src/main/hbs/source-viewer/source-viewer-measures.hbs
@@ -1,60 +1,62 @@
-<div class="source-viewer-header-component source-viewer-measures-component">
-  {{#unless removed}}
-    {{#if projectName}}
-      <div class="source-viewer-header-component-project">
-        {{qualifierIcon 'TRK'}}&nbsp;<a href="{{dashboardUrl project}}">{{projectName}}</a>
-        {{#if subProjectName}}
-          &nbsp;&nbsp;&nbsp;
-          {{qualifierIcon 'TRK'}}&nbsp;<a href="{{dashboardUrl subProject}}">{{subProjectName}}</a>
-        {{/if}}
-      </div>
-    {{/if}}
-
-    <div class="source-viewer-header-component-name">
-      {{qualifierIcon q}} {{default path longName}}
-    </div>
-  {{else}}
-    <div class="source-viewer-header-component-project removed">{{removedMessage}}</div>
-  {{/unless}}
-</div>
+<div class="modal-container source-viewer-measures-modal">
+  <div class="source-viewer-header-component source-viewer-measures-component">
+    {{#unless removed}}
+      {{#if projectName}}
+        <div class="source-viewer-header-component-project">
+          {{qualifierIcon 'TRK'}}&nbsp;<a href="{{dashboardUrl project}}">{{projectName}}</a>
+          {{#if subProjectName}}
+            &nbsp;&nbsp;&nbsp;
+            {{qualifierIcon 'TRK'}}&nbsp;<a href="{{dashboardUrl subProject}}">{{subProjectName}}</a>
+          {{/if}}
+        </div>
+      {{/if}}
 
-<div class="source-viewer-measures">
-  {{#unless isUnitTest}}
-    <div class="source-viewer-measures-section">
-      <div class="source-viewer-measures-card">
-        {{> '_source-viewer-measures-lines'}}
+      <div class="source-viewer-header-component-name">
+        {{qualifierIcon q}} {{default path longName}}
       </div>
-    </div>
-
-    <div class="source-viewer-measures-section">
-      {{> '_source-viewer-measures-issues'}}
-    </div>
+    {{else}}
+      <div class="source-viewer-header-component-project removed">{{removedMessage}}</div>
+    {{/unless}}
+  </div>
 
-    {{#any measures.coverage measures.it_coverage}}
+  <div class="source-viewer-measures">
+    {{#unless isUnitTest}}
       <div class="source-viewer-measures-section">
         <div class="source-viewer-measures-card">
-          {{> '_source-viewer-measures-coverage'}}
+          {{> '_source-viewer-measures-lines'}}
         </div>
       </div>
-    {{/any}}
-
-    <div class="source-viewer-measures-section">
-      {{> '_source-viewer-measures-duplications'}}
-    </div>
-  {{else}}
-    <div class="source-viewer-measures-section">
-      {{> '_source-viewer-measures-tests'}}
-    </div>
-    {{> '_source-viewer-measures-test-cases'}}
-  {{/unless}}
-</div>
 
-<a class="js-show-all-measures">{{t 'component_viewer.show_all_measures'}}</a>
+      <div class="source-viewer-measures-section">
+        {{> '_source-viewer-measures-issues'}}
+      </div>
+
+      {{#any measures.coverage measures.it_coverage}}
+        <div class="source-viewer-measures-section">
+          <div class="source-viewer-measures-card">
+            {{> '_source-viewer-measures-coverage'}}
+          </div>
+        </div>
+      {{/any}}
+
+      <div class="source-viewer-measures-section">
+        {{> '_source-viewer-measures-duplications'}}
+      </div>
+    {{else}}
+      <div class="source-viewer-measures-section">
+        {{> '_source-viewer-measures-tests'}}
+      </div>
+      {{> '_source-viewer-measures-test-cases'}}
+    {{/unless}}
+  </div>
+
+  <a class="js-show-all-measures">{{t 'component_viewer.show_all_measures'}}</a>
 
-<div class="source-viewer-measures source-viewer-measures-secondary js-all-measures hidden">
-  {{> '_source-viewer-measures-all'}}
+  <div class="source-viewer-measures source-viewer-measures-secondary js-all-measures hidden">
+    {{> '_source-viewer-measures-all'}}
+  </div>
 </div>
 
 <div class="modal-foot">
-  <a class="overlay-popup-close" title="{{t 'close'}}">{{t 'close'}}</a>
+  <a class="js-modal-close" title="{{t 'close'}}">{{t 'close'}}</a>
 </div>

diff --git a/server/sonar-web/src/main/js/common/modals.js b/server/sonar-web/src/main/js/common/modals.js
index ad8758d9e02d7466cbbabad0d5b97a6d019b3a36..9ca6cd56b1fdbb9e754072768f16b047736bd907 100644 (file)
--- a/server/sonar-web/src/main/js/common/modals.js
+++ b/server/sonar-web/src/main/js/common/modals.js
@@ -26,6 +26,9 @@ define(['backbone.marionette'], function (Marionette) {
         return false;
       });
       this.show();
+      if (!!this.options.large) {
+        this.$el.addClass('modal-large');
+      }
     },
 
     show: function () {

diff --git a/server/sonar-web/src/main/js/source-viewer/header.js b/server/sonar-web/src/main/js/source-viewer/header.js
index ce88070a4a7181f79dc183e3fa88ead5adbfbe53..e6fa0a1043fa54b5f8230f4b5dd9f1740ab865ae 100644 (file)
--- a/server/sonar-web/src/main/js/source-viewer/header.js
+++ b/server/sonar-web/src/main/js/source-viewer/header.js
@@ -68,8 +68,10 @@ define([
     },
 
     showMeasures: function () {
-      var overlay = new MeasuresOverlay({ model: this.model });
-      overlay.show();
+      new MeasuresOverlay({
+        model: this.model,
+        large: true
+      }).render();
     }
   });
 

diff --git a/server/sonar-web/src/main/js/source-viewer/measures-overlay.js b/server/sonar-web/src/main/js/source-viewer/measures-overlay.js
index d2a19f6baee89b0688243906ced7e072bb1c8c11..a3ef116f142dcb90c013c9aa4e9be3ccb155e0f1 100644 (file)
--- a/server/sonar-web/src/main/js/source-viewer/measures-overlay.js
+++ b/server/sonar-web/src/main/js/source-viewer/measures-overlay.js
@@ -1,18 +1,32 @@
 define([
-  'common/overlay',
+  'common/modals',
   'templates/source-viewer'
-], function (Overlay, Templates) {
+], function (ModalView, Templates) {
 
   var $ = jQuery;
 
 
-  return Overlay.extend({
-    className: 'overlay-popup source-viewer-measures-overlay',
+  return ModalView.extend({
     template: Templates['source-viewer-measures'],
     testsOrder: ['ERROR', 'FAILURE', 'OK', 'SKIPPED'],
 
+    initialize: function () {
+      var that = this,
+          p = window.process.addBackgroundProcess(),
+          requests = [this.requestMeasures(), this.requestIssues()];
+      if (this.model.get('isUnitTest')) {
+        requests.push(this.requestTests());
+      }
+      $.when.apply($, requests).done(function () {
+        that.render();
+        window.process.finishBackgroundProcess(p);
+      }).fail(function () {
+        window.process.failBackgroundProcess(p);
+      });
+    },
+
     events: function () {
-      return _.extend(Overlay.prototype.events.apply(this, arguments), {
+      return _.extend(ModalView.prototype.events.apply(this, arguments), {
         'click .js-sort-tests-by-duration': 'sortTestsByDuration',
         'click .js-sort-tests-by-name': 'sortTestsByName',
         'click .js-sort-tests-by-status': 'sortTestsByStatus',
@@ -22,7 +36,7 @@ define([
     },
 
     onRender: function () {
-      Overlay.prototype.onRender.apply(this, arguments);
+      ModalView.prototype.onRender.apply(this, arguments);
       this.$('.js-pie-chart').pieChart();
       if (this.selectedTest != null) {
         this.scrollToTest();
@@ -34,21 +48,6 @@ define([
       this.$el.scrollTop(position);
     },
 
-    show: function () {
-      var that = this,
-          p = window.process.addBackgroundProcess(),
-          requests = [this.requestMeasures(), this.requestIssues()];
-      if (this.model.get('isUnitTest')) {
-        requests.push(this.requestTests());
-      }
-      $.when.apply($, requests).done(function () {
-        that.render();
-        window.process.finishBackgroundProcess(p);
-      }).fail(function () {
-        window.process.failBackgroundProcess(p);
-      });
-    },
-
     getMetrics: function () {
       var metrics = '',
           url = baseUrl + '/api/metrics';
@@ -231,7 +230,7 @@ define([
     },
 
     serializeData: function () {
-      return _.extend(Overlay.prototype.serializeData.apply(this, arguments), {
+      return _.extend(ModalView.prototype.serializeData.apply(this, arguments), {
         testSorting: this.testSorting,
         selectedTest: this.selectedTest,
         coveredFiles: this.coveredFiles || []

diff --git a/server/sonar-web/src/main/less/components/modals.less b/server/sonar-web/src/main/less/components/modals.less
index f54692e5b8e00320e790320defbdb60277ab4c55..dc987a9c4c4dfbe5443a774ff64024ca7abc129f 100644 (file)
--- a/server/sonar-web/src/main/less/components/modals.less
+++ b/server/sonar-web/src/main/less/components/modals.less
@@ -15,6 +15,11 @@
   opacity: 1;
 }
 
+.modal-large {
+  width: 1080px;
+  margin-left: -540px;
+}
+
 .modal-overlay {
   position: fixed;
   z-index: 8999;
@@ -31,3 +36,11 @@
 .modal-open {
   overflow: hidden;
 }
+
+.modal-container {
+  max-height: 70vh;
+  padding: 10px;
+  .box-sizing(border-box);
+  overflow-x: hidden;
+  overflow-y: scroll;
+}

diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index c2ab24efa45dcd8a24f777d9eb4492b8a5891675..a3bd8c11bd87f6576d85eff73df68cd872669968 100644 (file)
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -334,8 +334,13 @@
   margin: 0 10px 30px;
 }
 
+.source-viewer-measures-modal {
+  background-color: @barBackgroundColor;
+}
+
 .source-viewer-measures {
   .clearfix;
+  margin: 0 -10px;
   background-color: @barBackgroundColor;
 
   .bubble-popup-section {
@@ -353,12 +358,12 @@
 
 .source-viewer-measures-section {
   float: left;
-  width: 270px;
+  width: 25%;
   margin: -20px 0;
 }
 
 .source-viewer-measures-section-big {
-  width: 540px;
+  width: 50%;
 }
 
 .source-viewer-measures-section-full {