New Issues Page: resource viewer refactoring

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail_inner.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail_inner.hbs.erb
index abe586e4526d9380671f96427e15c6af2de27e45..76a50f4bea24fc9ed82a9dc9806904c1e100ac1f 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail_inner.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail_inner.hbs.erb
@@ -1,22 +1,29 @@
 <script id="issue-detail-inner-template" type="text/x-handlebars-template">
-  <div class="code-issue code-issue-collapsed" data-issue-key="{{key}}" data-issue-component="{{component}}" data-issue-rule="{{rule}}">
-    <div class="code-issue-permalink">
-      <a target="_blank" href="<%= ApplicationController.root_context -%>/issue/show/{{key}}?layout=false"><img src="<%= ApplicationController.root_context -%>/images/new-window-16.gif"></a>
-    </div>
-
+  <div class="code-issue code-issue-collapsed code-issue-active" data-issue-key="{{key}}" data-issue-component="{{component}}" data-issue-rule="{{rule}}">
     <div class="code-issue-name">
+      <div class="code-issue-name-rule">
         {{severityIcon severity}}&nbsp;<a class="code-issue-toggle rulename">{{message}}</a>
+      </div>
 
-        {{#if debt}}
-          <div class="code-issue-name-extra"><%= message('issue.technical_debt') -%> {{debt}}</div>
-        {{/if}}
+      {{#if debt}}
+        <div class="code-issue-name-right"
+             title="{{#all characteristic subCharacteristic}}{{characteristic}} > {{subCharacteristic}}{{else}}<%= message('issue.technical_debt_deleted') -%>{{/all}}"><%= message('issue.technical_debt') -%> {{debt}}</div>
+      {{/if}}
+
+      {{#any reporterName author}}
+        <ul class="code-issue-name-extra code-issue-list">
+          {{#if reporterName}}<li><%= message('reporter') -%>: {{reporterName}}</li>{{/if}}
+          {{#if author}}<li><%= message('author') -%>: {{author}}</li>{{/if}}
+        </ul>
+      {{/any}}
+
+      <div class="code-issue-permalink">
+        <a target="_blank" href="<%= ApplicationController.root_context -%>/issue/show/{{key}}?layout=false"><img src="<%= ApplicationController.root_context -%>/images/new-window-16.gif"></a>
+      </div>
     </div>
 
     <div class="code-issue-details">
       <ul class="tabs">
-        <li>
-          <a href="#tab-issue-details"><%= message('issue.details') -%></a>
-        </li>
         <li>
           <a href="#tab-issue-rule"><%= message('rule') -%></a>
         </li>
@@ -25,52 +32,8 @@
         </li>
       </ul>
 
-      <div id="tab-issue-details">
-        <ul class="code-issue-details-list">
-          {{#if debt}}
-            <li>
-              <div class="code-issue-details-term"><%= message('issue.technical_debt_clear') -%></div>
-              <div class="code-issue-details-value">
-                {{debt}}
-                {{#if characteristic}}
-                  {{#if subCharacteristic}}
-                    -  {{characteristic}} > {{subCharacteristic}}
-                  {{else}}
-                    <br><%= message('issue.technical_debt_deleted') -%>
-                  {{/if}}
-                {{else}}
-                  <br><%= message('issue.technical_debt_deleted') -%>
-                {{/if}}
-              </div>
-            </li>
-          {{/if}}
-          {{#if reporterName}}
-            <li>
-              <div class="code-issue-details-term"><%= message('reporter') -%></div>
-              <div class="code-issue-details-value">{{reporterName}}</div>
-            </li>
-          {{/if}}
-          {{#if author}}
-            <li>
-              <div class="code-issue-details-term"><%= message('author') -%></div>
-              <div class="code-issue-details-value">{{author}}</div>
-            </li>
-          {{/if}}
-          <li>
-            <div class="code-issue-details-term"><%= message('created') -%></div>
-            <div class="code-issue-details-value">{{fCreationDate}}</div>
-          </li>
-          <li>
-            <div class="code-issue-details-term"><%= message('updated') -%></div>
-            <div class="code-issue-details-value">{{fUpdateDate}}</div>
-          </li>
-        </ul>
-      </div>
-
       <div id="tab-issue-rule">
-        <div class="rule-desc">
-
-        </div>
+        <div class="rule-desc"></div>
       </div>
 
       <div id="tab-issue-changelog">
@@ -92,27 +55,8 @@
       </div>
     </div>
 
-    <div class="code-issue-comments">
-      {{#each comments}}
-        <div class="code-issue-comment" data-comment-key="{{key}}">
-          <h4>
-            <%= image_tag('reviews/comment.png') -%>
-            <b>{{userName}}</b>
-            ({{fCreatedAge}})
 
-            {{#if updatable}}
-              &nbsp;<%= image_tag 'sep12.png' -%>&nbsp;
-              <a class="link-action issue-comment-edit"><%= message('edit') -%></a>
-              <a class="link-action spacer-right issue-comment-delete"
-                 data-confirm-msg="<%= h message('issue.comment.delete_confirm_message') -%>"><%= message('delete') -%></a>
-            {{/if}}
-          </h4>
-          {{{html}}}
-        </div>
-      {{/each}}
-    </div>
-
-    <ul class="code-issue-actions">
+    <ul class="code-issue-actions code-issue-list">
       {{#inArray actions "comment"}}
         <li>
           <a id="issue-comment" class="link-action">{{translate "actions.comment" }}</a>
@@ -123,16 +67,13 @@
       <li>
         {{statusIcon status}}{{translate "statuses" status}}
         {{#if resolution}}({{translate "resolutions" resolution}}){{/if}}
-      </li>
 
+        {{#ifNotEmpty transitions}}
+            {{#withFirst transitions}}
+              <a class="link-action issue-transition spacer-left" data-transition="{{this}}">{{translate "transitions" this}}</a>
+            {{/withFirst}}
 
-      {{#ifNotEmpty transitions}}
-        <li>
-          {{#withFirst transitions}}
-            <a class="link-action issue-transition" data-transition="{{this}}">{{translate "transitions" this}}</a>
-          {{/withFirst}}
-
-          {{#ifHasExtraTransitions transitions}}
+            {{#ifHasExtraTransitions transitions}}
               <div class="dropdown">
                 <a class="link-action link-more" onclick="showDropdownMenuOnElement($j(this).next('.dropdown-menu')); return false;"></a>
                 <ul style="display: none" class="dropdown-menu">
@@ -144,9 +85,9 @@
                 </ul>
               </div>
 
-          {{/ifHasExtraTransitions}}
-        </li>
-      {{/ifNotEmpty}}
+            {{/ifHasExtraTransitions}}
+        {{/ifNotEmpty}}
+      </li>
 
 
       {{#inArray actions "assign"}}
@@ -167,8 +108,8 @@
       {{/inArray}}
 
 
-      <li>
-        {{#inArray actions "plan"}}
+      {{#inArray actions "plan"}}
+        <li>
           {{#if actionPlanName}}
             <a id="issue-plan" class="link-action"><%= message('issue.planned_for') -%></a> {{actionPlanName}}
           {{else}}
@@ -178,8 +119,8 @@
           {{#if actionPlanName}}
             <%= message('issue.planned_for') -%> <strong>{{actionPlanName}}</strong>
           {{/if}}
-        {{/inArray}}
-      </li>
+        </li>
+      {{/inArray}}
 
 
       {{#ifHasExtraActions actions}}
@@ -204,6 +145,27 @@
     </ul>
 
     <div class="code-issue-form"></div>
+
+
+    <div class="code-issue-comments">
+      {{#each comments}}
+        <div class="code-issue-comment" data-comment-key="{{key}}">
+          <h4>
+            <%= image_tag('reviews/comment.png') -%>
+            <b>{{userName}}</b>
+            ({{fCreatedAge}})
+
+            {{#if updatable}}
+              &nbsp;<%= image_tag 'sep12.png' -%>&nbsp;
+              <a class="link-action issue-comment-edit"><%= message('edit') -%></a>
+              <a class="link-action spacer-right issue-comment-delete"
+                 data-confirm-msg="<%= h message('issue.comment.delete_confirm_message') -%>"><%= message('delete') -%></a>
+            {{/if}}
+          </h4>
+          {{{html}}}
+        </div>
+      {{/each}}
+    </div>
   </div>
 </script>
 

diff --git a/sonar-server/src/main/webapp/javascripts/navigator/handlebars-extensions.js b/sonar-server/src/main/webapp/javascripts/navigator/handlebars-extensions.js
index c66b76a3c070f43118334b929fc1f46383f5e570..032346929c05e706bee8cd15365698d7b2dc241e 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/navigator/handlebars-extensions.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/handlebars-extensions.js
@@ -32,6 +32,24 @@
     return v1 != v2 ? options.fn(this) : options.inverse(this);
   });
 
+  Handlebars.registerHelper('all', function() {
+    var args = Array.prototype.slice.call(arguments, 0, -1),
+        options = arguments[arguments.length - 1],
+        all = args.reduce(function(prev, current) {
+          return prev && current;
+        }, true);
+    return all ? options.fn(this) : options.inverse(this);
+  });
+
+  Handlebars.registerHelper('any', function() {
+    var args = Array.prototype.slice.call(arguments, 0, -1),
+        options = arguments[arguments.length - 1],
+        all = args.reduce(function(prev, current) {
+          return prev || current;
+        }, true);
+    return all ? options.fn(this) : options.inverse(this);
+  });
+
   Handlebars.registerHelper('inArray', function(array, element, options) {
     if (array.indexOf(element) !== -1) {
       return options.fn(this);

diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues.js b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
index a00409cd8e770e780a0bb50665a0d36fde21126e..4b73bcd7a24f9f71ec4cfc438746be46aa87c906 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
@@ -822,6 +822,7 @@ jQuery(function() {
 
     toggleCollapsed: function() {
       this.$('.code-issue').toggleClass('code-issue-collapsed');
+      this.fetchRule();
     },
 
 

diff --git a/sonar-server/src/main/webapp/stylesheets/icons.css b/sonar-server/src/main/webapp/stylesheets/icons.css
index f61b55a3c87b1b520b3b4e1fb9e6f22176fc44b2..a8bd57d5e4b03bfb43367e595373a276bfdcd307 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/icons.css
+++ b/sonar-server/src/main/webapp/stylesheets/icons.css
@@ -39,26 +39,31 @@
   content: "\f000";
   color: #d4333f;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-severity-critical:before {
   content: "\f001";
   color: #d4333f;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-severity-major:before {
   content: "\f002";
   color: #d4333f;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-severity-minor:before {
   content: "\f003";
   color: #85bb43;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-severity-info:before {
   content: "\f004";
   color: #85bb43;
   font-size: 14px;
+  line-height: 12px;
 }
 /*
  * Status
@@ -67,26 +72,31 @@
   content: "\f010";
   color: #85bb43;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-status-confirmed:before {
   content: "\f011";
   color: #d4333f;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-status-reopened:before {
   content: "\f012";
   color: #85bb43;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-status-resolved:before {
   content: "\f013";
   color: #4b9fd5;
   font-size: 14px;
+  line-height: 12px;
 }
 .icon-status-closed:before {
   content: "\f014";
   color: #444444;
   font-size: 14px;
+  line-height: 12px;
 }
 /*
  * Resolution

diff --git a/sonar-server/src/main/webapp/stylesheets/icons.less b/sonar-server/src/main/webapp/stylesheets/icons.less
index df62d1603b9b639041b7653e30a85e6386ce29ce..e76ccec86ef63d77062dd1d37a90f2ba429ebb3f 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/icons.less
+++ b/sonar-server/src/main/webapp/stylesheets/icons.less
@@ -35,26 +35,31 @@
   content: "\f000";
   color: @severityBlockerColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-severity-critical:before {
   content: "\f001";
   color: @severityCriticalColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-severity-major:before {
   content: "\f002";
   color: @severityMajorColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-severity-minor:before {
   content: "\f003";
   color: @severityMinorColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-severity-info:before {
   content: "\f004";
   color: @severityInfoColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 
 
@@ -66,26 +71,31 @@
   content: "\f010";
   color: @statusOpenColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-status-confirmed:before {
   content: "\f011";
   color: @statusConfirmedColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-status-reopened:before {
   content: "\f012";
   color: @statusReopenedColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-status-resolved:before {
   content: "\f013";
   color: @statusResolvedColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 .icon-status-closed:before {
   content: "\f014";
   color: @statusClosedColor;
   font-size: @iconFontSize;
+  line-height: @iconLineHeight;
 }
 
 

diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index d59efd8d7fd11a7d124e7fb84046b180b8bc03fe..bfeba2c35e93834a74fe125fd21ef0a543d77da5 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -108,7 +108,7 @@
 }
 .navigator-fetching.code-issue-actions:before,
 .navigator-fetching#tab-issue-rule:before {
-  background-color: #EFEFEF;
+  background-color: #CAE3F2;
 }
 .navigator-header {
   padding: 0 10px;
@@ -245,6 +245,7 @@
 }
 .navigator-details .source_title {
   position: fixed;
+  z-index: 3;
   top: 104px;
   left: 320px;
   right: 0;

diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.css b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
index 9ea3bea4aa529d9311e8d153f005e2981fe9e9ca..a1a994a0ac5633fef99f8dbfe5d84b16a3973bf2 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
@@ -108,7 +108,7 @@
 }
 .navigator-fetching.code-issue-actions:before,
 .navigator-fetching#tab-issue-rule:before {
-  background-color: #EFEFEF;
+  background-color: #CAE3F2;
 }
 .navigator-header {
   padding: 0 10px;
@@ -245,6 +245,7 @@
 }
 .navigator-details .source_title {
   position: fixed;
+  z-index: 3;
   top: 104px;
   left: 320px;
   right: 0;

diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.less b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
index 9d4e9a3ce8832273fec440f5d1bbd596c0f624c3..6ce05b3dfa00be70c9d25aa154ddcc8d839952e1 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.less
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
@@ -108,7 +108,7 @@
     position: relative;
 
     &:before {
-      background-color: #EFEFEF;
+      background-color: #CAE3F2;
     }
   }
 }
@@ -292,6 +292,7 @@
 
   .source_title {
     position: fixed;
+    z-index: 3;
     top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight;
     left: @navigatorResultsWidth;
     right: 0;

diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 4b82297f6128b7bf1861d7bd58cce61c6fe7a49c..2201b027d29172622fcee532f293486053a4d6cf 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -802,22 +802,13 @@ th.operations, td.operations {
   font-weight: bold;
 }
 
-.code-issue-permalink {
-  float: right;
-  padding: 4px 4px 0 0;
-}
-
-.code-issue-name-extra {
-  float: right;
-  padding-right: 10px;
-}
-
 .code-issue-toggle {
   cursor: pointer;
   text-decoration: underline;
 }
 
 .code-issue-name {
+  position: relative;
   background-color: #E4ECF3;
   margin: 0;
   padding: 5px 10px;
@@ -838,6 +829,32 @@ th.operations, td.operations {
   vertical-align: text-bottom;
 }
 
+.code-issue-name-rule {
+  max-width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.code-issue-permalink {
+  position: absolute;
+  top: 4px; right: 4px;
+}
+
+.code-issue-name-extra {
+  margin-top: 6px;
+  line-height: 12px;
+}
+
+.code-issue-name-extra li {
+  font-size: 11px !important;
+}
+
+.code-issue-name-right {
+  position: absolute;
+  top: 5px; right: 26px;
+}
+
 .code-issue-comment, .code-issue-msg, .code-issue-actions, .code-issue-form, .issue-rule, .issue-changelog, .issue-technicaldebt {
   background-color: #EFEFEF;
   border: 1px solid #DDD;
@@ -925,11 +942,55 @@ th.operations, td.operations {
   content: ":";
 }
 
+.code-issue-list {
+  font-size: 0;
+}
+
+.code-issue-list > li {
+  display: inline-block;
+  vertical-align: middle;
+  height: 14px;
+  line-height: 14px;
+  padding: 0 8px;
+  border-left: 1px solid #fff;
+  border-right: 1px solid #bfbfbf;
+  font-size: 12px;
+}
+
+.code-issue-list > li:first-child {
+  padding-left: 0;
+  border-left: none;
+}
+
+.code-issue-list > li:last-child {
+  padding-right: 0;
+  border-right: none;
+}
+
 .code-issue-collapsed .code-issue-msg,
 .code-issue-collapsed .code-issue-details {
   display: none;
 }
 
+.code-issue-active .code-issue-name,
+.code-issue-active .code-issue-details,
+.code-issue-active .code-issue-actions,
+.code-issue-active .code-issue-form,
+.code-issue-active .code-issue-comments,
+.code-issue-active .code-issue-comment {
+  background-color: #CAE3F2;
+  border-color: #4B9FD5;
+}
+
+.code-issue-active .code-issue-name,
+.code-issue-active .code-issue-details {
+  border-bottom: none;
+}
+
+.code-issue-active .code-issue-details .tabs {
+  border-color: #4B9FD5;
+}
+
 .tab_header {
   border-bottom: 1px solid #DDD;
   background-color: #EFEFEF;

diff --git a/sonar-server/src/main/webapp/stylesheets/variables.less b/sonar-server/src/main/webapp/stylesheets/variables.less
index 51d6da6a4051149d787127e5760818d9229e6685..23f27fe2c2e363bacdee561e3db3ad520507443a 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/variables.less
+++ b/sonar-server/src/main/webapp/stylesheets/variables.less
@@ -31,6 +31,7 @@
  */
 
 @iconFontSize: 14px;
+@iconLineHeight: 12px;
 
 @severityBlockerColor: @red;
 @severityCriticalColor: @red;