assignee ui in issue view

3 files changed, 50 insertions, 2 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index f245a56b85..12fd8138e9 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -1447,6 +1447,15 @@ html, body {
     min-width: 300px;
 }
 
+#issue .issue-bar .assignee, #issue .issue-bar .assignee ul {
+    min-width: 160px;
+}
+
+#issue .issue-bar .assignee .dropdown-menu{
+    padding: 0;
+    margin: 0;
+}
+
 #issue .assignee li {
     padding: 4px 12px;
     line-height: 30px;
@@ -1473,6 +1482,11 @@ html, body {
     line-height: 30px;
 }
 
+#issue .issue-bar .assignee .action{
+    position: relative;
+    margin-top: -8px;
+}
+
 /* wrapper and footer */
 
 #wrapper {
diff --git a/public/js/app.js b/public/js/app.js
index d6c13a2931..162139986d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -535,8 +535,27 @@ function initIssue() {
     }());
 
     // assignee
+    var is_issue_bar = $('.issue-bar').length > 0;
+    var $a = $('.assignee');
+    if($a.data("assigned") > 0){
+        $('.clear-assignee').toggleShow();
+    }
     $('.assignee', '#issue').on('click', 'li', function () {
         var uid = $(this).data("uid");
+        if(is_issue_bar){
+            var assignee = $a.data("assigned");
+            if(uid != assignee){
+                $.post($a.data("ajax"), {
+                    issue: $('#issue').data("id"),
+                    assign: assignee
+                }, function (json) {
+                    if (json.ok) {
+                        window.location.reload();
+                    }
+                })
+            }
+            return;
+        }
         $('#assignee').val(uid);
         if (uid > 0) {
             $('.clear-assignee').toggleShow();
diff --git a/templates/issue/view.tmpl b/templates/issue/view.tmpl
index 780b19899f..9134a9802a 100644
--- a/templates/issue/view.tmpl
+++ b/templates/issue/view.tmpl
@@ -3,7 +3,7 @@
 {{template "repo/nav" .}}
 {{template "repo/toolbar" .}}
 <div id="body" class="container">
-    <div id="issue">
+    <div id="issue" data-id="{{.Issue.Id}}">
         <div id="issue-{{.Issue.Id}}" class="issue-whole issue-is-opening">
             <div class="issue-wrap col-md-10">
                 <div class="issue-head clearfix">
@@ -100,7 +100,22 @@
             </div>
 
             <div class="issue-bar col-md-2">
-                <div class="assignee">
+                <div class="assignee" data-assigned="{{if .Issue.Assignee}}{{.Issue.Assignee.Id}}{{else}}0{{end}}" data-ajax="{url}">{{if .IsRepositoryOwner}}
+                    <div class="pull-right action">
+                        <button type="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
+                            <i class="fa fa-group"></i>
+                            <span class="caret"></span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <ul class="list-unstyled">
+                                <li data-uid="0" class="clear-assignee hidden"><i class="fa fa-times-circle-o"></i> Clear assignee</li>
+                                {{range .Collaborators}}
+                                <li data-uid="{{.Id}}"><img src="{{.AvatarLink}}"><strong>{{.Name}}</strong> {{.FullName}}</li>
+                                {{end}}
+                                <li data-uid="1"><img src="//1.gravatar.com/avatar/f72f7454ce9d710baa506394f68f4132"><strong>fuxiaohei</strong></li>
+                            </ul>
+                        </div>
+                    </div>{{end}}
                     <h4>Assignee</h4>
                     <p>{{if .Issue.Assignee}}<img src="{{.Issue.Assignee.AvatarLink}}"><strong>{{.Issue.Assignee.Name}}</strong>{{else}}No one assigned{{end}}</p>
                 </div>