SONAR-5460 Use popup to show long (Markdown) rule parameter descriptions

5 files changed, 79 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee
index 920dd632376..8d925a004d1 100644
--- a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee
+++ b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee
@@ -5,6 +5,7 @@ define [
   'coding-rules/views/coding-rules-detail-quality-profile-view'
   'coding-rules/views/coding-rules-detail-custom-rules-view'
   'coding-rules/views/coding-rules-detail-custom-rule-view'
+  'coding-rules/views/coding-rules-parameter-popup-view'
   'templates/coding-rules'
 ], (
   Backbone
@@ -13,6 +14,7 @@ define [
   CodingRulesDetailQualityProfileView
   CodingRulesDetailCustomRulesView
   CodingRulesDetailCustomRuleView
+  CodingRulesParameterPopupView
   Templates
 ) ->
 
@@ -67,12 +69,16 @@ define [
       'click @ui.changeCustomRule': 'changeCustomRule'
       'click @ui.deleteCustomRule': 'deleteCustomRule'
 
+      'click .coding-rules-detail-parameter-details': 'showParamPopup'
 
     initialize: (options) ->
       super options
 
       if @model.get 'params'
-        @model.set 'params', _.sortBy(@model.get('params'), 'key')
+        origParams = @model.get('params')
+        _.map origParams, (param) =>
+          _.extend param, showMoreLink: (param.htmlDesc and param.htmlDesc.indexOf('<') >= 0)
+        @model.set 'params', _.sortBy(origParams, 'key')
 
       _.map options.actives, (active) =>
         _.extend active, options.app.getQualityProfileByKey active.qProfile
@@ -100,7 +106,7 @@ define [
           @listenTo @contextProfile, 'destroy', @hideContext
 
     onRender: ->
-      @$el.find('.open-modal').modal();
+      @$el.find('.open-modal').modal()
 
       if @model.get 'isTemplate'
         @$(@contextRegion.el).hide()
@@ -163,6 +169,17 @@ define [
       @ui.extendDescriptionSpinner.hide()
 
 
+    showParamPopup: (e) ->
+      e.stopPropagation()
+      jQuery('body').click()
+      key = jQuery(e.currentTarget).closest('.coding-rules-detail-parameter').data 'key'
+      popup = new CodingRulesParameterPopupView
+        model: new Backbone.Model _.findWhere(@model.get('params'), key: key)
+        triggerEl: jQuery(e.currentTarget)
+      popup.render()
+      false
+
+
     hideContext: ->
       @contextRegion.reset()
       @$(@contextRegion.el).hide()
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
new file mode 100644
index 00000000000..4277d205433
--- /dev/null
+++ b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee
@@ -0,0 +1,17 @@
+define [
+  'backbone.marionette'
+  'templates/coding-rules'
+  'component-viewer/popup'
+#  'component-viewer/utils'
+], (
+  Marionette
+  Templates
+  Popup
+#  utils
+) ->
+
+  $ = jQuery
+
+
+  class CodingRulesParameterPopupView extends Popup
+    template: Templates['coding-rules-parameter-popup']
diff --git a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs
index 06ba87d1782..ba657a31a09 100644
--- a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs
+++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs
@@ -109,22 +109,24 @@
   <h3 class="coding-rules-detail-title">{{t 'coding_rules.parameters'}}</h3>
   <ul class="coding-rules-detail-parameters">
     {{#each params}}
-      <li class="coding-rules-detail-parameter">
+      <li class="coding-rules-detail-parameter" data-key="{{key}}">
         <h3 class="coding-rules-detail-parameter-name">{{key}}</h3>
 
         <div class="coding-rules-detail-parameter-description">
           {{#if ../../templateKey}}
             <span class="value">{{defaultValue}}</span>
           {{else}}
-            <div class="coding-rules-detail-parameter-description">
-              {{{htmlDesc}}}
-              {{#if defaultValue}}
-                <div>
-                  {{t 'coding_rules.parameters.default_value'}} {{defaultValue}}
-                </div>
-              {{/if}}
-            </div>
+            {{{htmlDesc}}}
+            {{#if defaultValue}}
+              <div>
+                {{t 'coding_rules.parameters.default_value'}} {{defaultValue}}
+              </div>
+            {{/if}}
           {{/if}}
+        </div>
+        {{#if showMoreLink}}
+          <a href="#" class="coding-rules-detail-parameter-details">{{t 'more'}}</a>
+        {{/if}}
       </li>
     {{/each}}
   </ul>
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
new file mode 100644
index 00000000000..9bd75541615
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs
@@ -0,0 +1,12 @@
+<div class="coding-rules-parameter-full-description component-viewer-popup-container">
+  <div class="component-viewer-popup-title">{{key}}</div>
+
+    {{{htmlDesc}}}
+    {{#if defaultValue}}
+      <div>
+        {{t 'coding_rules.parameters.default_value'}} {{defaultValue}}
+      </div>
+    {{/if}}
+</div>
+
+<div class="component-viewer-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/less/coding-rules.less b/server/sonar-web/src/main/less/coding-rules.less
index 428f7b7d4c8..1a4a15a9f1e 100644
--- a/server/sonar-web/src/main/less/coding-rules.less
+++ b/server/sonar-web/src/main/less/coding-rules.less
@@ -209,13 +209,32 @@
 
 .coding-rules-detail-parameter-description {
   display: inline-block;
+  text-overflow: ellipsis;
   vertical-align: top;
-  width: 80%;
+  max-width: 75%;
   padding-left: 2 * @navigatorPadding;
   .box-sizing(border-box);
+}
+
+.coding-rules-detail-parameter-details {
+  display: inline-block;
+  font-size: @baseFontSize;
+  padding-left: 5px;
+}
+
+.coding-rules-detail-parameter-description:first-line, .coding-rules-detail-parameter-description :first-child {
+  display: block;
   font-size: @baseFontSize;
 }
 
+.coding-rules-detail-parameter-description * {
+  display: none;
+}
+
+.coding-rules-parameter-full-description {
+  padding: 1px;
+}
+
 .coding-rules-detail-parameter-original {
   margin-left: @navigatorPadding;
   font-size: @smallFontSize;