From 94f3b5a26e1d6ec70b5633e7e0166f658b206f02 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Tue, 4 Feb 2014 15:24:47 +0600
Subject: [PATCH] New Issues Page: refactoring

---
 .../templates/_issue_detail_inner.hbs.erb     | 170 +++++++++---------
 .../navigator/handlebars-extensions.js        |  12 +-
 .../webapp/javascripts/navigator/issues.js    |   7 +
 .../src/main/webapp/stylesheets/style.css     |  15 +-
 4 files changed, 118 insertions(+), 86 deletions(-)

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 a2fb401623b..8409ddf7055 100644
--- 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,14 +1,16 @@
 <script id="issue-detail-inner-template" type="text/x-handlebars-template">
-  <div class="code-issue" data-issue-key="{{key}}" data-issue-component="{{component}}" data-issue-rule="{{rule}}">
+  <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-name">
-      {{severityIcon severity}}&nbsp;<span class="rulename">{{ruleName}}</span>
-    </div>
+        {{severityIcon severity}}&nbsp;<a class="code-issue-toggle rulename">{{message}}</a>
 
-    <div class="code-issue-msg">{{{message}}}</div>
+        {{#if debt}}
+          <div class="code-issue-name-extra"><%= message('issue.technical_debt') -%> {{debt}}</div>
+        {{/if}}
+    </div>
 
     <div class="code-issue-details">
       <ul class="tabs">
@@ -25,34 +27,6 @@
 
       <div id="tab-issue-details">
         <ul class="code-issue-details-list">
-          <li>
-            <div class="code-issue-details-term"><%= message('severity') -%></div>
-            <div class="code-issue-details-value">
-              {{severityIcon severity}}{{capitalize severity}}
-            </div>
-          </li>
-          <li>
-            <div class="code-issue-details-term"><%= message('status') -%></div>
-            <div class="code-issue-details-value">
-              {{statusIcon status}}{{capitalize status}}
-            </div>
-          </li>
-          <li>
-            <div class="code-issue-details-term"><%= message('resolution') -%></div>
-            <div class="code-issue-details-value">
-              {{#if resolution}}
-                {{resolutionIcon resolution}}{{capitalize resolution}}
-              {{else}}
-                <%= message('unresolved') -%>
-              {{/if}}
-            </div>
-          </li>
-          {{#if actionPlanName}}
-            <li>
-              <div class="code-issue-details-term"><%= message('issue_filter.header.action_plan') -%></div>
-              <div class="code-issue-details-value">{{actionPlanName}}</div>
-            </li>
-          {{/if}}
           {{#if debt}}
             <li>
               <div class="code-issue-details-term"><%= message('issue.technical_debt_clear') -%></div>
@@ -82,12 +56,6 @@
               <div class="code-issue-details-value">{{author}}</div>
             </li>
           {{/if}}
-          {{# if assigneeName}}
-            <li>
-              <div class="code-issue-details-term"><%= message('assignee') -%></div>
-              <div class="code-issue-details-value">{{assigneeName}}</div>
-            </li>
-          {{/if}}
           <li>
             <div class="code-issue-details-term"><%= message('created') -%></div>
             <div class="code-issue-details-value">{{fCreationDate}}</div>
@@ -144,61 +112,97 @@
       {{/each}}
     </div>
 
-    {{#ifNotEmpty actions transitions}}
-      <ul class="code-issue-actions">
-        {{#inArray actions "comment"}}
-          <li>
-            <a id="issue-comment" class="link-action">{{translate "actions.comment" }}</a>
-          </li>
-        {{/inArray}}
+    <ul class="code-issue-actions">
+      {{#inArray actions "comment"}}
+        <li>
+          <a id="issue-comment" class="link-action">{{translate "actions.comment" }}</a>
+        </li>
+      {{/inArray}}
 
-        {{#inArray actions "assign"}}
-          <li>
+
+      <li>{{statusIcon status}}{{capitalize status}}</li>
+
+      {{#if resolution}}
+        <li>{{resolutionIcon resolution}}{{capitalize resolution}}</li>
+      {{/if}}
+
+
+      {{#ifNotEmpty transitions}}
+        <li>
+          {{#withFirst transitions}}
+            <a class="link-action issue-transition" data-transition="{{this}}">{{translate "transitions" this}}</a>
+          {{/withFirst}}
+
+          {{#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">
+                  {{#withoutFirst transitions}}
+                    <li>
+                      <a class="link-action issue-transition" data-transition="{{this}}">{{translate "transitions" this}}</a>
+                    </li>
+                  {{/withoutFirst}}
+                </ul>
+              </div>
+
+          {{/ifHasExtraTransitions}}
+        </li>
+      {{/ifNotEmpty}}
+
+
+      {{#inArray actions "assign"}}
+        <li>
+          {{#if assigneeName}}
+            <a id="issue-assign" class="link-action"><%= message('assigned_to') -%></a> {{assigneeName}}</li>
+          {{else}}
             <a id="issue-assign" class="link-action">{{translate "actions.assign" }}</a>
             {{#inArray actions "assign_to_me"}}
               [<a id="issue-assign-to-me" class="link-action">{{translate "actions.assign_to_me" }}</a>]
             {{/inArray}}
-          </li>
-        {{/inArray}}
+          {{/if}}
+        </li>
+      {{else}}
+        {{#if assigneeName}}
+          <li><%= message('assigned_to') -%> <strong>{{assigneeName}}</strong></li>
+        {{/if}}
+      {{/inArray}}
+
 
+      <li>
         {{#inArray actions "plan"}}
-          <li>
-            <a id="issue-plan" class="link-action">{{translate "actions.plan" }}</a>
-          </li>
+          {{#if actionPlanName}}
+            <a id="issue-plan" class="link-action"><%= message('issue.planned_for') -%></a> {{actionPlanName}}
+          {{else}}
+            <a id="issue-plan" class="link-action"><%= message('issue.do_plan') -%></a>
+          {{/if}}
+        {{else}}
+          {{#if actionPlanName}}
+            <%= message('issue.planned_for') -%> <strong>{{actionPlanName}}</strong>
+          {{/if}}
         {{/inArray}}
+      </li>
 
-        {{#withFirst transitions}}
-          <li>
-            <a class="link-action issue-transition" data-transition="{{this}}">{{translate "transitions" this}}</a>
-          </li>
-        {{/withFirst}}
 
-        {{#ifHasExtraActions actions transitions}}
-          <li>
-            <div class="dropdown">
-              <a class="link-action link-more" onclick="showDropdownMenuOnElement($j(this).next('.dropdown-menu')); return false;">More actions</a>
-              <ul style="display: none" class="dropdown-menu">
-                {{#inArray actions "set_severity"}}
-                  <li>
-                    <a id="issue-set-severity" class="link-action spacer-right">{{translate "actions.set_severity"}}</a>
-                  </li>
-                {{/inArray}}
-                {{#pluginActions actions}}
-                  <li>
-                    <a class="link-action spacer-right issue-action" data-action="{{this}}">{{translate "actions" this}}</a>
-                  </li>
-                {{/pluginActions}}
-                {{#withoutFirst transitions}}
-                  <li>
-                    <a class="link-action spacer-right issue-transition" data-transition="{{this}}">{{translate "transitions" this}}</a>
-                  </li>
-                {{/withoutFirst}}
-              </ul>
-            </div>
-          </li>
-        {{/ifHasExtraActions}}
-      </ul>
-    {{/ifNotEmpty}}
+      {{#ifHasExtraActions actions}}
+        <li>
+          <div class="dropdown">
+            <a class="link-action link-more" onclick="showDropdownMenuOnElement($j(this).next('.dropdown-menu')); return false;">More actions</a>
+            <ul style="display: none" class="dropdown-menu">
+              {{#inArray actions "set_severity"}}
+                <li>
+                  <a id="issue-set-severity" class="link-action spacer-right">{{translate "actions.set_severity"}}</a>
+                </li>
+              {{/inArray}}
+              {{#pluginActions actions}}
+                <li>
+                  <a class="link-action spacer-right issue-action" data-action="{{this}}">{{translate "actions" this}}</a>
+                </li>
+              {{/pluginActions}}
+            </ul>
+          </div>
+        </li>
+      {{/ifHasExtraActions}}
+    </ul>
 
     <div class="code-issue-form"></div>
   </div>
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 6f16b66547a..c66b76a3c07 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/handlebars-extensions.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/handlebars-extensions.js
@@ -76,9 +76,17 @@
     }, '');
   });
 
-  Handlebars.registerHelper('ifHasExtraActions', function(actions, transitions, options) {
+  Handlebars.registerHelper('ifHasExtraTransitions', function(transitions, options) {
+    if (transitions && transitions.length > 1) {
+      return options.fn(this);
+    } else {
+      return '';
+    }
+  });
+
+  Handlebars.registerHelper('ifHasExtraActions', function(actions, options) {
     var actionsLeft = _.difference(actions, _.without(defaultActions, 'set_severity'));
-    if (actionsLeft.length > 0 || transitions.length > 1) {
+    if (actionsLeft.length > 0) {
       return options.fn(this);
     } else {
       return '';
diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues.js b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
index 71bb02c9009..5d39841af3a 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
@@ -782,6 +782,8 @@ jQuery(function() {
 
 
     events: {
+      'click .code-issue-toggle': 'toggleCollapsed',
+
       'click [href=#tab-issue-rule]': 'fetchRule',
 
       'click #issue-comment': 'comment',
@@ -824,6 +826,11 @@ jQuery(function() {
     },
 
 
+    toggleCollapsed: function() {
+      this.$('.code-issue').toggleClass('code-issue-collapsed');
+    },
+
+
     fetchRule: function() {
       var that = this;
       this.$('#tab-issue-rule').addClass('navigator-fetching');
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 3b3d36e771c..3161c74182c 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -798,11 +798,25 @@ th.operations, td.operations {
   padding: 0 0 10px 0;
 }
 
+.code-issue strong {
+  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 {
   background-color: #E4ECF3;
   margin: 0;
@@ -874,7 +888,6 @@ th.operations, td.operations {
   height: auto;
   padding: 5px 10px;
   border-bottom: 1px solid #DDD;
-  background: #E4ECF3;
 }
 
 .code-issue-details .tabs li + li {
-- 
2.39.5