From d1c73f7602df30f8c838e4bbbc2529883ebde1bd Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Thu, 8 Jan 2015 11:13:03 +0100 Subject: [PATCH] Replace overlay component with modals --- .../src/main/coffee/common/overlay.coffee | 28 ------ .../src/main/coffee/issue/issue-view.coffee | 1 + .../coffee/issue/views/rule-overlay.coffee | 6 +- .../src/main/hbs/issue/issue-rule.hbs | 38 ++++---- .../source-viewer/source-viewer-measures.hbs | 96 ++++++++++--------- server/sonar-web/src/main/js/common/modals.js | 3 + .../src/main/js/source-viewer/header.js | 6 +- .../main/js/source-viewer/measures-overlay.js | 43 ++++----- .../src/main/less/components/modals.less | 13 +++ .../src/main/less/components/source.less | 9 +- 10 files changed, 121 insertions(+), 122 deletions(-) delete mode 100644 server/sonar-web/src/main/coffee/common/overlay.coffee 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 index 70574bef9ae..00000000000 --- 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 eff00d06d1e..b56ea55e2fa 100644 --- 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 54d13bd8f0a..8f87f1eecbf 100644 --- 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 cee912e9594..deb4a080cf3 100644 --- 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 @@ -

- {{name}} - - {{t 'coding_rules.permalink'}} - -

+
+

+ {{name}} + + {{t 'coding_rules.permalink'}} + +

-{{key}} + {{key}} - + -
{{{htmlDesc}}}
+
{{{htmlDesc}}}
+
- {{t 'close'}} + {{t 'close'}}
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 166e9c6beea..02278679b89 100644 --- 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 @@ -
- {{#unless removed}} - {{#if projectName}} -
- {{qualifierIcon 'TRK'}} {{projectName}} - {{#if subProjectName}} -     - {{qualifierIcon 'TRK'}} {{subProjectName}} - {{/if}} -
- {{/if}} - -
- {{qualifierIcon q}} {{default path longName}} -
- {{else}} -
{{removedMessage}}
- {{/unless}} -
+
+
+ {{#unless removed}} + {{#if projectName}} +
+ {{qualifierIcon 'TRK'}} {{projectName}} + {{#if subProjectName}} +     + {{qualifierIcon 'TRK'}} {{subProjectName}} + {{/if}} +
+ {{/if}} -
- {{#unless isUnitTest}} -
-
- {{> '_source-viewer-measures-lines'}} +
+ {{qualifierIcon q}} {{default path longName}}
-
- -
- {{> '_source-viewer-measures-issues'}} -
+ {{else}} +
{{removedMessage}}
+ {{/unless}} +
- {{#any measures.coverage measures.it_coverage}} +
+ {{#unless isUnitTest}}
- {{> '_source-viewer-measures-coverage'}} + {{> '_source-viewer-measures-lines'}}
- {{/any}} - -
- {{> '_source-viewer-measures-duplications'}} -
- {{else}} -
- {{> '_source-viewer-measures-tests'}} -
- {{> '_source-viewer-measures-test-cases'}} - {{/unless}} -
-{{t 'component_viewer.show_all_measures'}} +
+ {{> '_source-viewer-measures-issues'}} +
+ + {{#any measures.coverage measures.it_coverage}} +
+
+ {{> '_source-viewer-measures-coverage'}} +
+
+ {{/any}} + +
+ {{> '_source-viewer-measures-duplications'}} +
+ {{else}} +
+ {{> '_source-viewer-measures-tests'}} +
+ {{> '_source-viewer-measures-test-cases'}} + {{/unless}} +
+ + {{t 'component_viewer.show_all_measures'}} -
- {{t 'close'}} + {{t 'close'}}
diff --git a/server/sonar-web/src/main/js/common/modals.js b/server/sonar-web/src/main/js/common/modals.js index ad8758d9e02..9ca6cd56b1f 100644 --- 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 ce88070a4a7..e6fa0a1043f 100644 --- 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 d2a19f6baee..a3ef116f142 100644 --- 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 f54692e5b8e..dc987a9c4c4 100644 --- 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 c2ab24efa45..a3bd8c11bd8 100644 --- 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 { -- 2.39.5