SONAR-7005 Improve display of the rule activation form

4 files changed, 80 insertions, 74 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-profile-activation.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-profile-activation.hbs
index 0523824d2ed..91ce5585500 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-profile-activation.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-profile-activation.hbs
@@ -16,67 +16,60 @@
       {{/unless}}
     {{/empty}}
 
-    <table>
-      <tr class="property">
-        <th class="nowrap"><h3>{{t 'coding_rules.quality_profile'}}</h3></th>
-        <td>
-          {{#any key qProfile}}
-            {{name}}
-          {{else}}
-            <select id="coding-rules-quality-profile-activation-select">
-              {{#each qualityProfiles}}
-                <option value="{{key}}" {{#eq key ../contextProfile}}selected{{/eq}}>{{name}}</option>
-              {{/each}}
-            </select>
-          {{/any}}
-        </td>
-      </tr>
-      <tr class="property">
-        <th class="nowrap"><h3>{{t 'severity'}}</h3></th>
-        <td>
-          <select id="coding-rules-quality-profile-activation-severity">
-            {{#each severities}}
-              <option value="{{this}}">{{t 'severity' this}}</option>
-            {{/each}}
-          </select>
-        </td>
-      </tr>
-      {{#if isCustomRule}}
-      <tr class="property">
-        <td colspan="2" class="note">{{t 'coding_rules.custom_rule.activation_notice'}}</td>
+    <div class="modal-field">
+      <label>{{t 'coding_rules.quality_profile'}}</label>
+      {{#any key qProfile}}
+        {{name}}
       {{else}}
-        {{#each params}}
-          <tr class="property">
-            <th class="nowrap"><h3>{{key}}</h3></th>
-            <td>
-              {{#eq type 'TEXT'}}
-                <textarea class="width100" rows="3" name="{{key}}" placeholder="{{defaultValue}}">{{value}}</textarea>
-              {{else}}
-                {{#eq type 'BOOLEAN'}}
-                  <select name="{{key}}" value="{{value}}">
-                    <option value="{{defaultValue}}">{{t 'default'}} ({{t defaultValue}})</option>
-                    <option value="true"{{#eq value 'true'}} selected="selected"{{/eq}}>{{t 'true'}}</option>
-                    <option value="false"{{#eq value 'false'}} selected="selected"{{/eq}}>{{t 'false'}}</option>
-                  </select>
-                {{else}}
-                  <input type="text" name="{{key}}" value="{{value}}" placeholder="{{defaultValue}}">
-                {{/eq}}
-              {{/eq}}
-              <div class="note">{{{htmlDesc}}}</div>
-              {{#if extra}}
-                <div class="note">{{extra}}</div>
-              {{/if}}
-            </td>
-          </tr>
+        <select id="coding-rules-quality-profile-activation-select">
+          {{#each qualityProfiles}}
+            <option value="{{key}}" {{#eq key ../contextProfile}}selected{{/eq}}>{{name}}</option>
+          {{/each}}
+        </select>
+      {{/any}}
+    </div>
+    <div class="modal-field">
+      <label>{{t 'severity'}}</label>
+      <select id="coding-rules-quality-profile-activation-severity">
+        {{#each severities}}
+          <option value="{{this}}">{{t 'severity' this}}</option>
         {{/each}}
-      {{/if}}
-    </table>
+      </select>
+    </div>
+    {{#if isCustomRule}}
+    <div class="modal-field">
+      <p class="note">{{t 'coding_rules.custom_rule.activation_notice'}}</p>
+    {{else}}
+      {{#each params}}
+        <div class="modal-field">
+          <label>{{key}}</label>
+          {{#eq type 'TEXT'}}
+            <textarea class="width100" rows="3" name="{{key}}" placeholder="{{defaultValue}}">{{value}}</textarea>
+          {{else}}
+            {{#eq type 'BOOLEAN'}}
+              <select name="{{key}}" value="{{value}}">
+                <option value="{{defaultValue}}">{{t 'default'}} ({{t defaultValue}})</option>
+                <option value="true"{{#eq value 'true'}} selected="selected"{{/eq}}>{{t 'true'}}</option>
+                <option value="false"{{#eq value 'false'}} selected="selected"{{/eq}}>{{t 'false'}}</option>
+              </select>
+            {{else}}
+              <input type="text" name="{{key}}" value="{{value}}" placeholder="{{defaultValue}}">
+            {{/eq}}
+          {{/eq}}
+          <div class="modal-field-description">{{{htmlDesc}}}</div>
+          {{#if extra}}
+            <div class="modal-field-description">{{extra}}</div>
+          {{/if}}
+        </div>
+      {{/each}}
+    {{/if}}
   </div>
 
-  <div class="modal-foot">
-    <button id="coding-rules-quality-profile-activation-activate" {{#unless saveEnabled}}disabled="disabled"{{/unless}}>
-      {{#if change}}{{t 'save'}}{{else}}{{t 'coding_rules.activate'}}{{/if}}
-    </button>
-    <a id="coding-rules-quality-profile-activation-cancel" class="js-modal-close">{{t 'cancel'}}</a>
-  </div>
+    <div class="modal-foot">
+      <button id="coding-rules-quality-profile-activation-activate"
+              {{#unless saveEnabled}}disabled="disabled"{{/unless}}>
+        {{#if change}}{{t 'save'}}{{else}}{{t 'coding_rules.activate'}}{{/if}}
+      </button>
+      <a id="coding-rules-quality-profile-activation-cancel" class="js-modal-close">{{t 'cancel'}}</a>
+    </div>
 </form>
diff --git a/server/sonar-web/src/main/less/components/modals.less b/server/sonar-web/src/main/less/components/modals.less
index 8c6b13851a1..8c7f612bdfc 100644
--- a/server/sonar-web/src/main/less/components/modals.less
+++ b/server/sonar-web/src/main/less/components/modals.less
@@ -90,16 +90,18 @@ ul.modal-head-metadata li {
 }
 
 .modal-field label {
+  position: relative;
+  left: -140px;
   display: block;
   float: left;
-  text-align: right;
   width: 130px;
-  left: -140px;
   margin-right: -130px;
-  line-height: 1;
-  word-wrap: break-word;
-  position: relative;
   padding-top: 5px;
+  padding-bottom: 2px;
+  line-height: 1;
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &.simple-label {
     display: inline-block;
@@ -118,7 +120,9 @@ ul.modal-head-metadata li {
   line-height: 1;
 }
 
-.modal-field input {
+.modal-field input,
+.modal-field select,
+.modal-field textarea {
   margin-right: 5px;
   margin-bottom: 10px;
 }
@@ -131,8 +135,13 @@ ul.modal-head-metadata li {
   width: 250px;
 }
 
-.modal-field .text {
-  line-height: 20px;
+.modal-field-description {
+  padding-bottom: 4px;
+  line-height: 1.4;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .modal-foot {
@@ -150,12 +159,6 @@ ul.modal-head-metadata li {
   }
 }
 
-.modal-field-description {
-  clear: both;
-  font-size: 93%;
-  color: #777;
-}
-
 .modal-error, .modal-warning, .modal-notice {
   display: none;
 }
diff --git a/server/sonar-web/src/main/less/init/forms.less b/server/sonar-web/src/main/less/init/forms.less
index b3e03b99894..5f9fc874359 100644
--- a/server/sonar-web/src/main/less/init/forms.less
+++ b/server/sonar-web/src/main/less/init/forms.less
@@ -11,7 +11,8 @@ input[type=password],
 input[type=email],
 input[type=search],
 input[type=date],
-textarea {
+textarea,
+select {
   border: 1px solid @darkGrey;
   box-sizing: border-box;
   border-radius: 2px;
@@ -46,6 +47,11 @@ textarea {
   padding: 3px;
 }
 
+select {
+  height: @formControlHeight;
+  line-height: @formControlHeight;
+}
+
 button,
 .button,
 input[type=submit],
diff --git a/server/sonar-web/src/main/less/select2-sonar.less b/server/sonar-web/src/main/less/select2-sonar.less
index 26977e37df7..8dd75b6ec37 100644
--- a/server/sonar-web/src/main/less/select2-sonar.less
+++ b/server/sonar-web/src/main/less/select2-sonar.less
@@ -45,6 +45,10 @@
   background-position: -17px -1px;
 }
 
+.select2-container .select2-choice span i {
+  position: relative;
+  top: 2px;
+}
 
 .select2-container-active .select2-choice,
 .select2-container-active .select2-choices {