]> source.dussan.org Git - sonarqube.git/commitdiff
disable issue actions form during request
authorStas Vilchik <vilchiks@gmail.com>
Wed, 3 Jun 2015 09:05:26 +0000 (11:05 +0200)
committerStas Vilchik <vilchiks@gmail.com>
Wed, 3 Jun 2015 09:05:32 +0000 (11:05 +0200)
server/sonar-web/src/main/js/apps/issues/templates/issues-issue-filter.hbs
server/sonar-web/src/main/js/components/issue/issue-view.js
server/sonar-web/src/main/js/components/issue/templates/issue.hbs
server/sonar-web/src/main/js/components/issue/views/comment-form-view.js
server/sonar-web/src/main/js/components/issue/views/transitions-form-view.js
server/sonar-web/src/main/less/components/issues.less
server/sonar-web/src/main/less/init/forms.less

index 875bc3bc4a546c00a4bc9c3a6f7445e772444520..f7f1bd1b215b1df0e14d1d8ed6d28aa12aa93f1c 100644 (file)
@@ -1,5 +1,5 @@
-<div class="issue-meta">
-  <a class="issue-action issue-action-with-options js-issue-filter" href="#">
+<li class="issue-meta">
+  <button class="button-link issue-action issue-action-with-options js-issue-filter">
     <i class="icon-filter icon-half-transparent"></i>&nbsp;<i class="icon-dropdown"></i>
-  </a>
-</div>
+  </button>
+</li>
index 98d095d221d3a5677ad73775166f8f6a6f1763aa..1b166bb87df5c67e8ab8f74dcbd4bdf884f65e69 100644 (file)
@@ -56,6 +56,14 @@ define([
       this.$el.attr('data-key', this.model.get('key'));
     },
 
+    disableControls: function () {
+      this.$(':input').prop('disabled', true);
+    },
+
+    enableControls: function () {
+      this.$(':input').prop('disabled', false);
+    },
+
     resetIssue: function (options) {
       var that = this;
       var key = this.model.get('key'),
@@ -132,6 +140,7 @@ define([
       var commentKey = $(e.target).closest('[data-comment-key]').data('comment-key'),
           confirmMsg = $(e.target).data('confirm-msg');
       if (confirm(confirmMsg)) {
+        this.disableControls();
         return $.ajax({
           type: 'POST',
           url: baseUrl + '/api/issues/delete_comment?key=' + commentKey
@@ -218,6 +227,7 @@ define([
 
     action: function (action) {
       var that = this;
+      this.disableControls();
       return $.post(baseUrl + '/api/issues/do_action', {
         issue: this.model.id,
         actionKey: action
index f5a2d5e2fdaf418f2e77b06b5e955a4cc6c535f1..ba8e21bcc442f1a4b36928057443e90307bc836f 100644 (file)
@@ -3,27 +3,29 @@
   <table class="issue-table">
     <tr>
       <td>
-        <div class="issue-message">{{message}} <a class="js-issue-rule issue-rule icon-ellipsis-h"></a></div>
+        <div class="issue-message">
+          {{message}}&nbsp;<button class="button-link js-issue-rule issue-rule icon-ellipsis-h"></button>
+        </div>
       </td>
 
       <td class="issue-table-meta-cell issue-table-meta-cell-first">
-        <div class="issue-meta-list">
-          <div class="issue-meta">
-            <a class="issue-action issue-action-with-options js-issue-show-changelog" title="{{dt creationDate}}">
+        <ul class="list-inline issue-meta-list">
+          <li class="issue-meta">
+            <button class="button-link issue-action issue-action-with-options js-issue-show-changelog" title="{{dt creationDate}}">
               <span class="issue-meta-label">{{fromNow creationDate}}</span>&nbsp;<i class="icon-dropdown"></i>
-            </a>
-          </div>
+            </button>
+          </li>
 
           {{#if line}}
-            <div class="issue-meta">
+            <li class="issue-meta">
               <span class="issue-meta-label" title="{{t 'line_number'}}">L{{line}}</span>
-            </div>
+            </li>
           {{/if}}
 
-          <div class="issue-meta">
-            <a class="issue-action js-issue-permalink icon-link" href="{{permalink}}" target="_blank"></a>
-          </div>
-        </div>
+          <li class="issue-meta">
+            <a class="js-issue-permalink icon-link" href="{{permalink}}" target="_blank"></a>
+          </li>
+        </ul>
       </td>
     </tr>
   </table>
   <table class="issue-table">
     <tr>
       <td>
-        <div class="issue-meta-list">
-          <div class="issue-meta">
+        <ul class="list-inline issue-meta-list">
+          <li class="issue-meta">
             {{#inArray actions "set_severity"}}
-              <a class="issue-action issue-action-with-options js-issue-set-severity">
+              <button class="button-link issue-action issue-action-with-options js-issue-set-severity">
                 <span class="issue-meta-label">{{severityHelper severity}}</span>&nbsp;<i class="icon-dropdown"></i>
-              </a>
+              </button>
             {{else}}
               {{severityHelper severity}}
             {{/inArray}}
-          </div>
+          </li>
 
-          <div class="issue-meta">
+          <li class="issue-meta">
             {{#notEmpty transitions}}
-              <a class="issue-action issue-action-with-options js-issue-transition">
+              <button class="button-link issue-action issue-action-with-options js-issue-transition">
                 <span class="issue-meta-label">{{statusHelper status resolution}}</span>&nbsp;<i
                   class="icon-dropdown"></i>
-              </a>
+              </button>
             {{else}}
               {{statusHelper status resolution}}
             {{/notEmpty}}
-          </div>
+          </li>
 
-          <div class="issue-meta">
+          <li class="issue-meta">
             {{#inArray actions "assign"}}
-              <a class="issue-action issue-action-with-options js-issue-assign">
+              <button class="button-link issue-action issue-action-with-options js-issue-assign">
                 {{#if assignee}}
                   {{#ifShowAvatars}}
                     <span class="text-top">{{avatarHelper assigneeEmail 16}}</span>
                   {{/ifShowAvatars}}
                 {{/if}}
                 <span class="issue-meta-label">{{#if assignee}}{{default assigneeName assignee}}{{else}}{{t 'unassigned'}}{{/if}}</span>&nbsp;<i class="icon-dropdown"></i>
-              </a>
+              </button>
             {{else}}
               {{#if assignee}}
                 {{#ifShowAvatars}}
               {{/if}}
               <span class="issue-meta-label">{{#if assignee}}{{default assigneeName assignee}}{{else}}{{t 'unassigned'}}{{/if}}</span>
             {{/inArray}}
-          </div>
-
-          {{#inArray actions "assign_to_me"}}
-            <a class="js-issue-assign-to-me"></a>
-          {{/inArray}}
+          </li>
 
-          <div class="issue-meta">
+          <li class="issue-meta">
             {{#inArray actions "plan"}}
-              <a class="issue-action issue-action-with-options js-issue-plan">
+              <button class="button-link issue-action issue-action-with-options js-issue-plan">
           <span
               class="issue-meta-label">{{#if actionPlan}}{{default actionPlanName actionPlan}}{{else}}{{t 'issue.unplanned'}}{{/if}}</span>&nbsp;<i
                   class="icon-dropdown"></i>
-              </a>
+              </button>
             {{else}}
               <span
                   class="issue-meta-label">{{#if actionPlan}}{{default actionPlanName actionPlan}}{{else}}{{t 'issue.unplanned'}}{{/if}}</span>
             {{/inArray}}
-          </div>
+          </li>
 
           {{#if debt}}
-            <div class="issue-meta">
+            <li class="issue-meta">
               <span class="issue-meta-label">
                 {{tp 'issue.x_debt' debt}}
               </span>
-            </div>
+            </li>
           {{/if}}
 
           {{#inArray actions "comment"}}
-            <div class="issue-meta">
-              <a class="issue-action js-issue-comment"><span
-                  class="issue-meta-label">{{t 'issue.comment.formlink' }}</span></a>
-            </div>
+            <li class="issue-meta">
+              <button class="button-link issue-action js-issue-comment"><span
+                  class="issue-meta-label">{{t 'issue.comment.formlink' }}</span></button>
+            </li>
           {{/inArray}}
 
           {{#ifHasExtraActions actions}}
-            <div class="issue-meta">
-              <a class="issue-action issue-action-with-options js-issue-more">
+            <li class="issue-meta">
+              <button class="button-link issue-action issue-action-with-options js-issue-more">
                 <span class="issue-meta-label">{{t 'more'}}</span>&nbsp;<i class="icon-dropdown"></i>
-              </a>
-            </div>
+              </button>
+            </li>
           {{/ifHasExtraActions}}
-        </div>
+        </ul>
+
+        {{#inArray actions "assign_to_me"}}
+          <button class="button-link hidden js-issue-assign-to-me"></button>
+        {{/inArray}}
       </td>
 
       <td class="issue-table-meta-cell">
-        <div class="issue-meta js-issue-tags">
-          {{#inArray actions "set_tags"}}
-            <a class="issue-action issue-action-with-options js-issue-edit-tags">
+        <ul class="list-inline">
+          <li class="issue-meta js-issue-tags">
+            {{#inArray actions "set_tags"}}
+              <button class="button-link issue-action issue-action-with-options js-issue-edit-tags">
               <span>
                 <i class="icon-tags icon-half-transparent"></i>&nbsp;<span>{{#if tags}}{{join tags ', '}}{{else}}{{t 'issue.no_tag'}}{{/if}}</span>
               </span>&nbsp;<i class="icon-dropdown"></i>
-            </a>
-          {{else}}
-            <span>
+              </button>
+            {{else}}
+              <span>
               <i class="icon-tags icon-half-transparent"></i>&nbsp;<span>{{#if tags}}{{join tags ', '}}{{else}}{{t 'issue.no_tag'}}{{/if}}</span>
             </span>
-          {{/inArray}}
-        </div>
+            {{/inArray}}
+          </li>
+        </ul>
       </td>
     </tr>
   </table>
       {{#each comments}}
         <div class="issue-comment" data-comment-key="{{key}}">
           <div class="issue-comment-author" title="{{userName}}">
-            {{#ifShowAvatars}}{{avatarHelper email 16}}{{else}}<i class="icon-comment icon-half-transparent"></i>{{/ifShowAvatars}}&nbsp;{{userName}}
+            {{#ifShowAvatars}}{{avatarHelper email 16}}{{else}}
+              <i class="icon-comment icon-half-transparent"></i>{{/ifShowAvatars}}&nbsp;{{userName}}
           </div>
           <div class="issue-comment-text markdown">{{{show html htmlText}}}</div>
           <div class="issue-comment-age">({{fromNow createdAt}})</div>
           <div class="issue-comment-actions">
             {{#if updatable}}
-              <a class="js-issue-comment-edit icon-edit icon-half-transparent"></a>
-              <a class="js-issue-comment-delete icon-delete icon-half-transparent"
-                 data-confirm-msg="{{t 'issue.comment.delete_confirm_message'}}"></a>
+              <button class="js-issue-comment-edit button-link icon-edit icon-half-transparent"></button>
+              <button class="js-issue-comment-delete button-link icon-delete icon-half-transparent"
+                 data-confirm-msg="{{t 'issue.comment.delete_confirm_message'}}"></button>
             {{/if}}
           </div>
         </div>
index 8596d99223a16a77c8ca1ab0a1ee8ab416cfad95..10e9c713e09dde46ad528b13e42188b38ee6e0b8 100644 (file)
@@ -70,11 +70,13 @@ define([
         data.issue = this.options.issue.id;
       }
       this.disableForm();
+      this.options.detailView.disableControls();
       return $.post(url, data)
           .done(function () {
             that.options.detailView.updateAfterAction(true);
           }).fail(function () {
             that.enableForm();
+            that.options.detailView.enableControls();
           });
     }
   });
index 6558537e22547ceeae43684084f8c1418cb36c08..9d56b1015914e3731af87b3e9baa5916dffd9307 100644 (file)
@@ -20,6 +20,7 @@ define([
 
     submit: function (transition) {
       var that = this;
+      this.options.view.disableControls();
       return $.ajax({
         type: 'POST',
         url: baseUrl + '/api/issues/do_transition',
index 2aa096c1ba9e6d9632cf9605b0d3eedc832d0320..ed6db933ad5b38ed5236786fb4a76434bfacdfc0 100644 (file)
 
 .issue-rule {
   padding: 0 3px;
-  background-color: fade(@blue, 30%);
+  background: fade(@blue, 30%);
   opacity: 0.5;
+
+  &:hover {
+    background: fade(@blue, 30%);
+  }
 }
 
 .issue-component {
 }
 
 .issue-meta-list {
-  .clearfix;
   padding-left: @leftPadding;
-  font-size: 0;
 }
 
 .issue-meta {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
   line-height: 1.5;
   font-size: @smallFontSize;
 }
   .text-ellipsis;
 }
 
-.issue-action {
-  border-bottom: none;
-}
-
-.issue-action + .issue-action {
-  margin-left: 4px;
-}
-
 .issue-changelog {
   max-width: 540px;
   max-height: 320px;
index 656491eb0b6f2a4d9ac122ea32d01c73e3bf6cca..81e7bb940e5d780954adbf83f8b5e4ff80af2bd2 100644 (file)
@@ -139,6 +139,34 @@ input[type=button] {
   color: @baseFontColor;
 }
 
+.button-link {
+  display: inline;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: @darkBlue;
+  font-weight: 400;
+  font-size: inherit;
+  line-height: inherit;
+  .trans;
+
+  &:hover, &:active, &:focus {
+    background: transparent;
+    color: @blue;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    color: @secondFontColor;
+    background: transparent;
+    cursor: default;
+  }
+}
+
 .button-group {
   display: inline-block;
   vertical-align: middle;