From 2cc04077c80f684fc3860b1b622accf4eb0af08d Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Lievremont Date: Fri, 18 Jul 2014 11:58:22 +0200 Subject: SONAR-5460 Refactor out bubble popup component --- .../views/coding-rules-parameter-popup-view.coffee | 4 +- .../sonar-web/src/main/coffee/common/popup.coffee | 35 +++++++ .../coffee/component-viewer/coverage-popup.coffee | 2 +- .../component-viewer/covered-files-popup.coffee | 2 +- .../component-viewer/duplication-popup.coffee | 2 +- .../component-viewer/line-actions-popup.coffee | 2 +- .../src/main/coffee/component-viewer/popup.coffee | 35 ------- .../component-viewer/time-changes-popup.coffee | 2 +- .../coding-rules/coding-rules-parameter-popup.hbs | 6 +- .../main/hbs/component-viewer/coveragePopup.hbs | 10 +- .../main/hbs/component-viewer/duplicationPopup.hbs | 8 +- .../header/covered-files-popup.hbs | 10 +- .../hbs/component-viewer/line-options-popup.hbs | 10 +- .../hbs/component-viewer/time-changes-popup.hbs | 6 +- .../sonar-web/src/main/less/component-viewer.less | 109 -------------------- server/sonar-web/src/main/less/style.less | 110 +++++++++++++++++++++ 16 files changed, 176 insertions(+), 177 deletions(-) create mode 100644 server/sonar-web/src/main/coffee/common/popup.coffee delete mode 100644 server/sonar-web/src/main/coffee/component-viewer/popup.coffee (limited to 'server') diff --git a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee index 4277d205433..52ece5db2a9 100644 --- a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee +++ b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee @@ -1,13 +1,11 @@ define [ 'backbone.marionette' 'templates/coding-rules' - 'component-viewer/popup' -# 'component-viewer/utils' + 'common/popup' ], ( Marionette Templates Popup -# utils ) -> $ = jQuery diff --git a/server/sonar-web/src/main/coffee/common/popup.coffee b/server/sonar-web/src/main/coffee/common/popup.coffee new file mode 100644 index 00000000000..abf4e9e8c56 --- /dev/null +++ b/server/sonar-web/src/main/coffee/common/popup.coffee @@ -0,0 +1,35 @@ +define [ + 'backbone.marionette' +], ( + Marionette +) -> + + $ = jQuery + + + class PopupView extends Marionette.ItemView + className: 'bubble-popup' + + + onRender: -> + @$el.detach().appendTo $('body') + + if @options.bottom + @$el.addClass 'bubble-popup-bottom' + @$el.css + top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight() + left: @options.triggerEl.offset().left + else if @options.bottomRight + @$el.addClass 'bubble-popup-bottom-right' + @$el.css + top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight() + right: $(window).width() - @options.triggerEl.offset().left - @options.triggerEl.outerWidth() + else + @$el.css + top: @options.triggerEl.offset().top + left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth() + + + $('body').on 'click.bubble-popup', => + $('body').off 'click.bubble-popup' + @close() diff --git a/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee index bc9bf899ed6..9311fef5b1c 100644 --- a/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee +++ b/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee @@ -1,7 +1,7 @@ define [ 'backbone.marionette' 'templates/component-viewer' - 'component-viewer/popup' + 'common/popup' 'component-viewer/utils' ], ( Marionette diff --git a/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee index ccf628a6434..2d6a37a135b 100644 --- a/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee +++ b/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee @@ -1,7 +1,7 @@ define [ 'backbone.marionette' 'templates/component-viewer' - 'component-viewer/popup' + 'common/popup' 'component-viewer/utils' ], ( Marionette diff --git a/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee index 1f975a2619e..108da019e95 100644 --- a/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee +++ b/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee @@ -1,7 +1,7 @@ define [ 'backbone.marionette' 'templates/component-viewer' - 'component-viewer/popup' + 'common/popup' 'component-viewer/utils' ], ( Marionette diff --git a/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee index 303fe28b1e5..f0de0ac50c5 100644 --- a/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee +++ b/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee @@ -1,7 +1,7 @@ define [ 'backbone.marionette' 'templates/component-viewer' - 'component-viewer/popup' + 'common/popup' 'issues/manual-issue-view' ], ( Marionette diff --git a/server/sonar-web/src/main/coffee/component-viewer/popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/popup.coffee deleted file mode 100644 index 939180e37be..00000000000 --- a/server/sonar-web/src/main/coffee/component-viewer/popup.coffee +++ /dev/null @@ -1,35 +0,0 @@ -define [ - 'backbone.marionette' -], ( - Marionette -) -> - - $ = jQuery - - - class CoveragePopupView extends Marionette.ItemView - className: 'component-viewer-popup' - - - onRender: -> - @$el.detach().appendTo $('body') - - if @options.bottom - @$el.addClass 'component-viewer-popup-bottom' - @$el.css - top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight() - left: @options.triggerEl.offset().left - else if @options.bottomRight - @$el.addClass 'component-viewer-popup-bottom-right' - @$el.css - top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight() - right: $(window).width() - @options.triggerEl.offset().left - @options.triggerEl.outerWidth() - else - @$el.css - top: @options.triggerEl.offset().top - left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth() - - - $('body').on 'click.coverage-popup', => - $('body').off 'click.coverage-popup' - @close() \ No newline at end of file diff --git a/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee index 2e1cad33c72..0854f1b91e6 100644 --- a/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee +++ b/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee @@ -1,7 +1,7 @@ define [ 'backbone.marionette' 'templates/component-viewer' - 'component-viewer/popup' + 'common/popup' ], ( Marionette Templates diff --git a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs index 9bd75541615..0299cedabc2 100644 --- a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs +++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs @@ -1,5 +1,5 @@ -
-
{{key}}
+
+
{{key}}
{{{htmlDesc}}} {{#if defaultValue}} @@ -9,4 +9,4 @@ {{/if}}
-
+
diff --git a/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs b/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs index dc559ea3edd..be7d99c755a 100644 --- a/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs +++ b/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs @@ -1,12 +1,12 @@ -
-
{{t 'component_viewer.transition.coverage'}}
+
+
{{t 'component_viewer.transition.coverage'}}
{{#each testFiles}} -
+
{{file.longName}} -
    +
      {{#each tests}}
    • @@ -24,4 +24,4 @@ {{/each}}
-
\ No newline at end of file +
diff --git a/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs b/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs index 4444ac429c2..8161966f29b 100644 --- a/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs +++ b/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs @@ -1,7 +1,7 @@ -
-
{{t 'component_viewer.transition.duplication'}}
+
+
{{t 'component_viewer.transition.duplication'}}
{{#each duplications}} -
+
{{#notEq file.projectName ../component.projectName}} {{file.projectName}} {{/notEq}} @@ -23,4 +23,4 @@ {{/each}}
-
+
diff --git a/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs b/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs index 0c9ca5b2b05..4d72fef6c15 100644 --- a/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs +++ b/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs @@ -1,9 +1,9 @@ -
+
{{#notEq test.status 'ERROR'}} {{#notEq test.status 'FAILURE'}} -
{{t 'component_viewer.transition.covers'}}
+
{{t 'component_viewer.transition.covers'}}
{{#each items}} -
+
{{name}} {{tp 'component_viewer.x_lines_are_covered' coveredLines}}
{{dir}} @@ -15,7 +15,7 @@ {{/notEq}} {{#notEq test.status 'OK'}} -
{{t 'component_viewer.details'}}
+
{{t 'component_viewer.details'}}
{{#if test.message}} 
{{test.message}}
{{/if}} @@ -24,4 +24,4 @@
-
+
diff --git a/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs b/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs index 04e4e6c6457..fa9aae478d7 100644 --- a/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs +++ b/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs @@ -1,15 +1,15 @@ -
-
{{t 'component_viewer.line_actions'}}
+
+
{{t 'component_viewer.line_actions'}}
-
+
{{t 'component_viewer.get_permalink'}}
{{#if state.canCreateManualIssue}} -
+
{{t 'component_viewer.add_manual_issue'}}
{{/if}}
-
\ No newline at end of file +
diff --git a/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs b/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs index 615164e48cf..f7dc2c30857 100644 --- a/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs +++ b/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs @@ -1,9 +1,9 @@ -
Time Changes
+
Time Changes
-
    + -
    \ No newline at end of file +
    diff --git a/server/sonar-web/src/main/less/component-viewer.less b/server/sonar-web/src/main/less/component-viewer.less index 22ae66ac1f7..cba1948e97f 100644 --- a/server/sonar-web/src/main/less/component-viewer.less +++ b/server/sonar-web/src/main/less/component-viewer.less @@ -583,115 +583,6 @@ padding: 10px; } - - -@popupArrowSize: 8px; - -.component-viewer-popup { - position: absolute; - z-index: 100; - margin-top: -16px; - margin-left: @popupArrowSize; - padding: 10px; - border: 1px solid @barBorderColor; - border-radius: 3px; - .box-sizing(border-box); - background-color: @white; - box-shadow: @defaultShadow; -} - -.component-viewer-popup-arrow, -.component-viewer-popup-arrow:after { - position: absolute; - display: block; - .size(0, 0); - border: @popupArrowSize solid transparent; -} - -.component-viewer-popup-arrow { - top: 15px; - left: -@popupArrowSize; - border-left-width: 0; - border-right-color: @barBorderColor; - - &:after { - content: " "; - left: 1px; - bottom: -@popupArrowSize; - border-left-width: 0; - border-right-color: @white; - } -} - -.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-bottom-right { - .component-viewer-popup-bottom; - margin-left: 0; - margin-right: -8px; - - .component-viewer-popup-arrow { - left: auto; - right: 15px; - } -} - -.component-viewer-popup-container { - max-width: 560px; - max-height: 300px; - overflow: auto; -} - -.component-viewer-popup-title { - margin-bottom: 5px; - font-weight: 600; -} - -.component-viewer-popup-section { - width: 450px; - padding-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &.fluid { - width: auto; - max-width: 450px; - } -} - -.component-viewer-popup-section + .component-viewer-popup-section, -.component-viewer-popup-section + .component-viewer-popup-title { - margin-top: 10px; -} - -.component-viewer-popup-list { - margin-top: 5px; - - & > li { padding: 2px 0; } -} - .component-viewer-popup-test { position: relative; display: block; diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less index 76bc189793b..adfb0457975 100644 --- a/server/sonar-web/src/main/less/style.less +++ b/server/sonar-web/src/main/less/style.less @@ -2900,3 +2900,113 @@ div.rule-title { font-weight: normal; margin-bottom: 25px; } + + +/* ------------------- Bubble popups ----------------- */ + +@popupArrowSize: 8px; + +.bubble-popup { + position: absolute; + z-index: 100; + margin-top: -16px; + margin-left: @popupArrowSize; + padding: 10px; + border: 1px solid @barBorderColor; + border-radius: 3px; + .box-sizing(border-box); + background-color: @white; + box-shadow: @defaultShadow; +} + +.bubble-popup-arrow, +.bubble-popup-arrow:after { + position: absolute; + display: block; + .size(0, 0); + border: @popupArrowSize solid transparent; +} + +.bubble-popup-arrow { + top: 15px; + left: -@popupArrowSize; + border-left-width: 0; + border-right-color: @barBorderColor; + + &:after { + content: " "; + left: 1px; + bottom: -@popupArrowSize; + border-left-width: 0; + border-right-color: @white; + } +} + +.bubble-popup-bottom { + margin-top: @popupArrowSize; + margin-left: -16px; + + .bubble-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; + } + } +} + +.bubble-popup-bottom-right { + .bubble-popup-bottom; + margin-left: 0; + margin-right: -8px; + + .bubble-popup-arrow { + left: auto; + right: 15px; + } +} + +.bubble-popup-container { + max-width: 560px; + max-height: 300px; + overflow: auto; +} + +.bubble-popup-title { + margin-bottom: 5px; + font-weight: 600; +} + +.bubble-popup-section { + width: 450px; + padding-bottom: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.fluid { + width: auto; + max-width: 450px; + } +} + +.bubble-popup-section + .bubble-popup-section, +.bubble-popup-section + .bubble-popup-title { + margin-top: 10px; +} + +.bubble-popup-list { + margin-top: 5px; + + & > li { padding: 2px 0; } +} -- cgit v1.2.3