@@ -11,5 +11,7 @@

   <i class="issue-icon-add-numbered-list icon icon-th-list" title="Add a numbered list"></i>

   <span style="margin-left:10px"></span>

   <i class="issue-icon-mension-user icon icon-user" title="Directory mension a user"></i>

-  <i class="issue-icon-reference-issue icon icon-bookmark" title="Reference a issue or pull request"></i>

-</div>

+  <!--

+    <i class="issue-icon-reference-issue icon icon-bookmark" title="Reference a issue or pull request"></i>

+  -->

+</div>

@@ -12,26 +12,62 @@

   my $can_modify = $is_my_project || $is_my_comment;

 %>

-<div class="issue-message <%= $is_owner_comment ? 'issue-message-owner' : '' %>" id="delete-<%= $issue_message->{row_id} %>">

-  <div class="issue-message-header <%= $is_owner_comment ? 'issue-message-header-owner' : '' %>">

-    <div class="issue-message-header-left">

-      <b><%= $issue_message->{'user.id'} %></b> <span style="color:#767676;">commented <%= $api->age_string($issue_message->{create_time}) %></span>

-    </div>

-    <div class="issue-message-header-right">

-      % if ($is_owner_comment) {

-        <div class="issue-message-owner-label">Owner</div>

-      % }

-      % if ($issue_message->{number} != 1) {

+<div class="issue-message-row-id" id="row-<%= $issue_message->{row_id} %>">

+  <div class="issue-message <%= $is_owner_comment ? 'issue-message-owner' : '' %>">

+    <div class="issue-message-header <%= $is_owner_comment ? 'issue-message-header-owner' : '' %>">

+      <div class="issue-message-header-left">

+        <b><%= $issue_message->{'user.id'} %></b> <span style="color:#767676;">commented <%= $api->age_string($issue_message->{create_time}) %></span>

+      </div>

+      <div class="issue-message-header-right">

+        % if ($is_owner_comment) {

+          <div class="issue-message-owner-label">Owner</div>

+        % }

         % if ($can_modify) {

-          <div class="icon-remove">

-            <a href="javascript:void(0)" class="issue-message-delete-btn"><i class="icon icon-remove"></i></a>

-          </div>

+          <a href="javascript:void(0)" class="issue-message-edit-btn"><i class="icon icon-pencil" style="margin-right:6px"></i></a>

         % }

-      % }

+        % if ($issue_message->{number} != 1) {

+          % if ($can_modify) {

+            <div class="icon-remove">

+              <a href="javascript:void(0)" class="issue-message-delete-btn"><i class="icon icon-remove"></i></a>

+            </div>

+          % }

+        % }

+      </div>

+    </div>

+    <div class="issue-message-body markdown-body" style="padding:10px">

+      <%== $api->markdown($issue_message->{message}) %>

     </div>

   </div>

-  <div class="issue-message-body markdown-body" style="padding:10px">

-    <%== $api->markdown($issue_message->{message}) %>

-  </div>

+  

+  % if ($can_modify) {

+    <div class="issue-message-update" style="display:none;margin-bottom:20px;">

+      <div class="issue-add-comment">

+        <form action="<%= url_for %>" method="post">

+          <%= hidden_field 'op' %>

+          <div class="issue-add-comment-header">

+            <div id="write-tab" class="issue-add-comment-header-tab"><a href="javascript:void(0)">Write</a></div>

+            <div id="preview-tab" class="issue-add-comment-header-tab"><a class="disable" href="javascript:void(0)">Preview</a></div>

+            %= include '/include/issue_comment_icon';

+          </div>

+          <div class="issue-add-comment-body">

+            <div id="write-area" class="issue-add-comment-message">

+              %= $issue_message->{message};

+              <%= text_area 'message' => $issue_message->{message} %>

+            </div>

+            <div id="preview-area" class="issue-add-comment-preview markdown-body" style="padding:10px">

+            </div>

+            <div class="issue-add-comment-bottom">

+              <div class="issue-add-comment-button-left">

+                Styling with Markdown is supported

+              </div>

+              <div class="issue-add-comment-button">

+                <button class="issue-message-update-cancel btn" onclick="javascript:void(0)" >Cancel</button>

+                <input type="submit" value="Update comment" onclick="$(this).closest('form').find('[name=op]').val('update-comment'); $(this).closest('form').submit();" class="btn btn-success"> 

+              </div>

+            </div>

+          </div>

+        </form>

+      </div>

+    </div>

+  % }

 </div>

-          

@@ -40,19 +40,73 @@ $('#preview-tab').on('click', function () {

 // Click delete button

 $('.issue-message-delete-btn').on('click', function () {

   if (window.confirm('Are you sure you want to delete this?')) {

-    var issue_message = $(this).closest('.issue-message');

-    var issue_message_row_id_str = issue_message.attr('id');

+    var issue_message_row_id_div = $(this).closest('.issue-message-row-id');

+    var issue_message_row_id_str = issue_message_row_id_div.attr('id');

-    var issue_message_row_id = (issue_message_row_id_str.match(/delete-(.+)/))[1];

+    var issue_message_row_id = (issue_message_row_id_str.match(/row-(.+)/))[1];

     $.post('<%= url_for %>', {op : 'api-delete-issue-message', issue_message_row_id : issue_message_row_id}, function (result) {

       if (result.success) {

-        $(issue_message).fadeOut();

+        $('#row-' + issue_message_row_id).fadeOut();

       }

     });

   }

 });

+$('.issue-message-edit-btn').on('click', function () {

+  var issue_message_row_id_div = $(this).closest('.issue-message-row-id');

+  var issue_message_row_id_str = issue_message_row_id_div.attr('id');

+  

+  var issue_message_row_id = (issue_message_row_id_str.match(/row-(.+)/))[1];

+  

+  $('#row-' + issue_message_row_id).find('.issue-message').css('display', 'none');

+  $('#row-' + issue_message_row_id).find('.issue-message-update').css('display', 'block');

+});

+$('.issue-message-update-cancel').on('click', function () {

+  var issue_message_row_id_div = $(this).closest('.issue-message-row-id');

+  var issue_message_row_id_str = issue_message_row_id_div.attr('id');

+  

+  var issue_message_row_id = (issue_message_row_id_str.match(/row-(.+)/))[1];

+  

+  $('#row-' + issue_message_row_id).find('.issue-message').css('display', 'block');

+  $('#row-' + issue_message_row_id).find('.issue-message-update').css('display', 'none');

+  

+  return false;

+});

+

+// Comment icon

+$('.issue-icon-add-header-text').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "# ");

+});

 $('.issue-icon-add-bold-text').on('click', function () {

   var textarea = $(this).closest('form').find('textarea');

   insertAtCaret(textarea, "****");

 });

+$('.issue-icon-add-italic-text').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "__");

+});

+$('.issue-icon-insert-quote').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "> ");

+});

+$('.issue-icon-insert-code').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "``");

+});

+$('.issue-icon-add-link').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "[](url)");

+});

+$('.issue-icon-add-bulleted-list').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "- ");

+});

+$('.issue-icon-add-numbered-list').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "1. ");

+});

+$('.issue-icon-mension-user').on('click', function () {

+  var textarea = $(this).closest('form').find('textarea');

+  insertAtCaret(textarea, "@");

+});