From e1e2eee50849a11db222b39a270fecec9968c783 Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Thu, 27 Mar 2014 23:32:20 +0800
Subject: [PATCH] update issue view page

---
 public/css/gogs.css       | 21 +++++++++++++++++-
 public/js/app.js          | 45 +++++++++++++++++++++++++++++++++++++--
 templates/issue/view.tmpl | 22 ++++++++++++++-----
 3 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 436067ed8c..d4976460e6 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -854,6 +854,10 @@ html, body {
     min-width: 180px;
 }
 
+.commit-list .sha a {
+    font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
+}
+
 .guide-box pre, .guide-box .input-group {
     margin-top: 20px;
     margin-bottom: 30px;
@@ -1119,7 +1123,7 @@ html, body {
 #issue .issue-head .info {
     width: 99%;
     margin-top: 10px;
-    padding-left: 64px;
+    padding-left: 74px;
     margin-bottom: 16px;
     padding-bottom: 20px;
     border-bottom: 1px solid #CCC;
@@ -1169,6 +1173,21 @@ html, body {
     border-color: #CCC;
 }
 
+#issue .issue-head .info .btn {
+    margin-top: -8px;
+    margin-left: 8px;
+}
+
+#issue .issue-action {
+    padding-left: 8px;
+    color: #888;
+    width: 24px;
+}
+
+#issue-edit-title {
+    width: 60%;
+}
+
 /* wrapper and footer */
 
 #wrapper {
diff --git a/public/js/app.js b/public/js/app.js
index 5bebeaf877..9299a6b7aa 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -50,6 +50,14 @@ var Gogits = {
             }
         }
     });
+    $.fn.extend({
+        toggleHide: function () {
+            $(this).addClass("hidden");
+        },
+        toggleShow: function () {
+            $(this).removeClass("hidden");
+        }
+    })
 }(jQuery));
 
 (function ($) {
@@ -352,7 +360,8 @@ function initRepository() {
     }());
 }
 
-function initInstall(){
+function initInstall() {
+    // database type change
     $('#install-database').on("change", function () {
         var val = $(this).val();
         if (val != "sqlite") {
@@ -370,6 +379,35 @@ function initInstall(){
     });
 }
 
+function initIssue() {
+    // close button
+    (function () {
+        var $closeBtn = $('#issue-close-btn');
+        var $openBtn = $('#issue-open-btn');
+        $('#issue-reply-content').on("keyup", function () {
+            if ($(this).val().length) {
+                $closeBtn.text($closeBtn.data("text"));
+                $openBtn.text($openBtn.data("text"));
+            } else {
+                $closeBtn.text($closeBtn.data("origin"));
+                $openBtn.text($openBtn.data("origin"));
+            }
+        });
+    }());
+
+    // issue edit mode
+    (function () {
+        $("#issue-edit-btn").on("click", function () {
+            $('#issue h1.title,#issue .issue-main > .issue-content .content,#issue-edit-btn').toggleHide();
+            $('#issue-edit-title,#issue-edit-content,.issue-edit-cancel,.issue-edit-save').toggleShow();
+        });
+        $('.issue-edit-cancel').on("click", function () {
+            $('#issue h1.title,#issue .issue-main > .issue-content .content,#issue-edit-btn').toggleShow();
+            $('#issue-edit-title,#issue-edit-content,.issue-edit-cancel,.issue-edit-save').toggleHide();
+        })
+    }());
+}
+
 (function ($) {
     $(function () {
         initCore();
@@ -383,8 +421,11 @@ function initInstall(){
         if ($('.repo-nav').length) {
             initRepository();
         }
-        if($('#install-card').length){
+        if ($('#install-card').length) {
             initInstall();
         }
+        if ($('#issue').length) {
+            initIssue();
+        }
     });
 })(jQuery);
diff --git a/templates/issue/view.tmpl b/templates/issue/view.tmpl
index 6b282513aa..1cc7209752 100644
--- a/templates/issue/view.tmpl
+++ b/templates/issue/view.tmpl
@@ -4,12 +4,16 @@
 {{template "repo/toolbar" .}}
 <div id="body" class="container">
     <div id="issue">
-        <div id="issue-id" class="issue-whole">
+        <div id="issue-{issue.id}" class="issue-whole">
             <div class="issue-head clearfix">
                 <div class="number pull-right">#{{.Issue.Index}}</div>
                 <a class="author pull-left" href="/user/{{.Issue.Poster.Name}}"><img class="avatar" src="{{.Issue.Poster.AvatarLink}}" alt="" width="30"/></a>
                 <h1 class="title pull-left">{{.Issue.Name}}</h1>
+                <input id="issue-edit-title" class="form-control input-lg pull-left hidden" type="text" value="{issue.title}" data-ajax-rel="issue-save"/>
                 <p class="info pull-left">
+                    <a class="btn btn-default pull-right issue-edit" href="#" id="issue-edit-btn">Edit</a>
+                    <a class="btn btn-danger pull-right issue-edit-cancel hidden" href="#">Cancel</a>
+                    <a class="btn btn-primary pull-right issue-edit-save hidden" href="#" data-ajax="{issue.save.link}" data-ajax-name="issue-save">Save</a>
                     <span class="status label label-{{if .Issue.IsClosed}}danger{{else}}success{{end}}">{{if .Issue.IsClosed}}Closed{{else}}Open{{end}}</span>
                     <a href="/user/{{.Issue.Poster.Name}}" class="author"><strong>{{.Issue.Poster.Name}}</strong></a> opened this issue
                     <span class="time">{{TimeSince .Issue.Created}}</span> · {{.Issue.NumComments}} comments
@@ -18,15 +22,21 @@
             <div class="issue-main">
                <div class="panel panel-default issue-content">
                    <div class="panel-body markdown">
-                       <p>{{.Issue.Content}}</p>
+                       <div class="content">
+                           {{.Issue.Content}}
+                       </div>
+                       <textarea class="form-control hidden" name="content" id="issue-edit-content" rows="10" data-ajax-rel="issue-save">content</textarea>
                    </div>
                </div>
                {{range .Comments}}
-               <div class="issue-child">
+               <div class="issue-child" id="issue-comment-{issue.comment.id}">
                    <a class="user pull-left" href="/user/{{.Poster.Name}}"><img class="avatar" src="{{.Poster.AvatarLink}}" alt=""/></a>
                    <div class="issue-content panel panel-default">
                        <div class="panel-heading">
                            <a href="/user/{{.Poster.Name}}" class="user">{{.Poster.Name}}</a> commented <span class="time">{{TimeSince .Created}}</span>
+                           <a class="issue-comment-del pull-right issue-action" href="#" title="Edit Comment"><i class="fa fa-times-circle"></i></a>
+                           <a class="issue-comment-edit pull-right issue-action" href="#" title="Remove Comment" data-url="{remove-link}"><i class="fa fa-edit"></i></a>
+                           <span class="role label label-default pull-right">Owner</span>
                        </div>
                        <div class="panel-body markdown">
                            <p>{{.Content}}</p>
@@ -52,7 +62,7 @@
                                     <div class="tab-pane" id="issue-textarea">
                                         <div class="form-group">
                                             <input type="hidden" value="{{.Issue.Index}}" name="issueIndex"/>
-                                            <textarea class="form-control" name="content" id="issue-content" rows="10" placeholder="Write some content">{{.content}}</textarea>
+                                            <textarea class="form-control" name="content" id="issue-reply-content" rows="10" placeholder="Write some content">{{.content}}</textarea>
                                         </div>
                                     </div>
                                     <div class="tab-pane" id="issue-preview">preview</div>
@@ -61,7 +71,9 @@
                             <div class="text-right">
                                 <div class="form-group">
                                     <input type="hidden" value="id" name="repo-id"/>
-                                    <button class="btn-success btn">Comment</button>
+                                    <button class="btn-default btn issue-open" id="issue-open-btn" data-origin="Open" data-text="Open & Comment">Open</button>&nbsp;&nbsp;
+                                    <button class="btn-default btn issue-close" id="issue-close-btn" data-origin="Close" data-text="Close & Comment">Close</button>&nbsp;&nbsp;
+                                    <button class="btn-success btn" id="issue-reply-btn">Comment</button>
                                 </div>
                             </div>
                         </div>