fix #1448

README.md

@@ -5,7 +5,7 @@ Gogs - Go Git Service [![Build Status](https://travis-ci.org/gogits/gogs.svg?bra
 
 ![](public/img/gogs-large-resize.png)
 
-##### Current version: 0.7.15 Beta
+##### Current version: 0.7.16 Beta
 
 <table>
     <tr>

conf/locale/locale_en-US.ini

@@ -563,6 +563,7 @@ settings.confirm_delete = Confirm Deletion
 settings.add_collaborator = Add New Collaborator
 settings.add_collaborator_success = New collaborator has been added.
 settings.remove_collaborator_success = Collaborator has been removed.
+settings.search_user_placeholder = Search user...
 settings.user_is_org_member = User is organization member who cannot be added as a collaborator.
 settings.add_webhook = Add Webhook
 settings.hooks_desc = Webhooks are much like basic HTTP POST event triggers. Whenever something occurs in Gogs, we will handle the notification to the target host you specify. Learn more in this <a target="_blank" href="%s">Webhooks Guide</a>.

gogs.go

@@ -17,7 +17,7 @@ import (
 	"github.com/gogits/gogs/modules/setting"
 )
 
-const APP_VER = "0.7.15.1116 Beta"
+const APP_VER = "0.7.16.1117 Beta"
 
 func init() {
 	runtime.GOMAXPROCS(runtime.NumCPU())

public/css/gogs.css

@@ -2510,6 +2510,35 @@ footer .container .links > *:first-child {
 .repository.forks .list .item .link {
   padding-top: 5px;
 }
+.repository.settings.collaboration .collaborator.list {
+  padding: 0;
+}
+.repository.settings.collaboration .collaborator.list .item {
+  padding: 10px 20px;
+}
+.repository.settings.collaboration .collaborator.list .item:not(:last-child) {
+  border-bottom: 1px solid #DDD;
+}
+.repository.settings.collaboration #repo-collab-form #search-user-box .results {
+  left: 7px;
+}
+.repository.settings.collaboration #repo-collab-form .ui.button {
+  margin-left: 5px;
+  margin-top: -3px;
+}
+#search-user-box .results {
+  padding: 0;
+  position: absolute;
+}
+#search-user-box .results .item {
+  padding: 10px 15px;
+  border-bottom: 1px solid #DDD;
+  cursor: pointer;
+}
+#search-user-box .results .item:hover {
+  background: rgba(0, 0, 0, 0.05) !important;
+  color: rgba(0, 0, 0, 0.95) !important;
+}
 .issue.list {
   list-style: none;
   padding-top: 15px;
@@ -2562,7 +2591,7 @@ footer .container .links > *:first-child {
 .settings .content {
   margin-top: 2px;
 }
-.settings .content .header,
+.settings .content > .header,
 .settings .content .segment {
   box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
 }
@@ -2748,6 +2777,9 @@ footer .container .links > *:first-child {
 .user.profile .ui.card .extra.content ul li:not(:last-child) {
   border-bottom: 1px solid #eaeaea;
 }
+.user.profile .ui.repository.list {
+  margin-top: 25px;
+}
 .dashboard {
   padding-top: 15px;
   padding-bottom: 80px;

public/js/gogs.js

@@ -564,6 +564,64 @@ function buttonsClickOnEnter() {
     });
 }
 
+function searchUsers() {
+    if (!$('#search-user-box .results').length) {
+        return;
+    }
+
+    var $search_user_box = $('#search-user-box');
+    var $result_list = $search_user_box.find('.results');
+    $search_user_box.keyup(function () {
+        var $this = $(this);
+        var keyword = $this.find('input').val();
+        if (keyword.length < 2) {
+            $result_list.hide();
+            return;
+        }
+
+        $.ajax({
+            url: suburl + '/api/v1/users/search?q=' + keyword,
+            dataType: "json",
+            success: function (response) {
+                var notEmpty = function (str) {
+                    return str && str.length > 0;
+                };
+
+                $result_list.html('');
+
+                if (response.ok && response.data.length) {
+                    var html = '';
+                    $.each(response.data, function (i, item) {
+                        html += '<div class="item"><img class="ui avatar image" src="' + item.avatar_url + '"><span class="username">' + item.username + '</span>';
+                        if (notEmpty(item.full_name)) {
+                            html += ' (' + item.full_name + ')';
+                        }
+                        html += '</div>';
+                    });
+                    $result_list.html(html);
+                    $this.find('.results .item').click(function () {
+                        $this.find('input').val($(this).find('.username').text());
+                        $result_list.hide();
+                    });
+                    $result_list.show();
+                } else {
+                    $result_list.hide();
+                }
+            }
+        });
+    });
+    $search_user_box.find('input').focus(function () {
+        $search_user_box.keyup();
+    });
+    $(document).click(function (e) {
+        var target = e.target;
+
+        if (!$(target).is('#search-user-box .results') && !$(target).parents().is('#search-user-box')) {
+            $('#search-user-box .results').hide();
+        }
+    });
+}
+
 $(document).ready(function () {
     csrf = $('meta[name=_csrf]').attr("content");
     suburl = $('meta[name=_suburl]').attr("content");
@@ -717,6 +775,8 @@ $(document).ready(function () {
     });
 
     buttonsClickOnEnter();
+    searchUsers();
+
 
     initCommentForm();
     initInstall();

public/less/_repository.less

@@ -934,9 +934,55 @@
 			}
 		}
 	}
+
+	&.settings {
+		&.collaboration {
+			.collaborator.list {
+				padding: 0;
+
+				.item {
+					padding: 10px 20px;
+
+					&:not(:last-child) {
+						border-bottom: 1px solid #DDD;
+					}
+				}
+			}
+
+			#repo-collab-form {
+				#search-user-box {
+					.results {
+						left: 7px;
+					}
+				}
+				.ui.button {
+					margin-left: 5px;
+			    margin-top: -3px;
+				}
+			}
+		}
+	}
 }
 // End of .repository
 
+#search-user-box {
+	.results {
+		padding: 0;
+		position: absolute;
+
+		.item {
+			padding: 10px 15px;
+			border-bottom: 1px solid #DDD;
+			cursor: pointer;
+
+			&:hover {
+				background: rgba(0,0,0,.05)!important;
+		    color: rgba(0,0,0,.95)!important;
+			}
+		}
+	}
+}
+
 .issue.list {
 	list-style: none;
 	padding-top: 15px;
@@ -994,7 +1040,7 @@
 .settings {
 	.content {
 		margin-top: 2px;
-		.header,
+		>.header,
 		.segment {
 			box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
 		}

public/less/_user.less

@@ -42,5 +42,9 @@
 				}
 			}
 		}
+
+		.ui.repository.list {
+			margin-top: 25px;
+		}
 	}
 }

routers/api/v1/user.go

@@ -55,7 +55,7 @@ func SearchUsers(ctx *middleware.Context) {
 		}
 	}
 
-	ctx.Render.JSON(200, map[string]interface{}{
+	ctx.JSON(200, map[string]interface{}{
 		"ok":   true,
 		"data": results,
 	})

templates/.VERSION

@@ -1 +1 @@
-0.7.15.1116 Beta
+0.7.16.1117 Beta

templates/repo/settings/collaboration.tmpl

@@ -1,47 +1,44 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="repo-wrapper">
-    {{template "repo/header_old" .}}
-	<div id="setting-wrapper" class="main-wrapper">
-	    <div id="repo-setting" class="container clear">
-	        {{template "repo/settings/nav" .}}
-	        <div class="grid-4-5 left">
-	            <div class="setting-content">
-	                {{template "ng/base/alert" .}}
-	                <div id="setting-content">
-	                    <div id="user-profile-setting-content" class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.collaboration"}}</strong>
-	                        </div>
-	                        <div class="panel-body">
-	                        	<ul id="repo-collab-list">
-	                        		{{range .Collaborators}}
-	                        		<li class="collab">
-	                        			{{if not (eq .Id $.Owner.Id)}}<a href="{{$.RepoLink}}/settings/collaboration?remove={{.Name}}" class="remove-collab right"><i class="fa fa-times"></i></a>{{end}}
-										<a class="member" href="{{AppSubUrl}}/{{.Name}}">
-										    <img alt="{{.Name}}" class="pull-left avatar" src="{{.AvatarLink}}">
-										    <strong>{{.FullName}}</strong> ({{.Name}})
-										</a>
-	                        		</li>
-	                        		<hr>
-	                        		{{end}}
-	                        	</ul>
-							</div>
-				            <div class="panel-footer">
-				                <form class="form form-align" action="{{.RepoLink}}/settings/collaboration" method="post" id="repo-collab-form">
-				                    {{.CsrfTokenHtml}}
-	                                <input class="ipt ipt-large ipt-radius" id="repo-collaborator" name="collaborator" autocomplete="off" required />
-	                                <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "repo.settings.add_collaborator"}}</button>
-									<div class="repo-user-list-block">
-										<ul class="menu-down-show menu-vertical menu-radius switching-list user-list" id="repo-collaborator-list"></ul>
-									</div>
-				                </form>
-				            </div>
-	                    </div>
-	                </div>
-	            </div>
-	        </div>
-	    </div>
+{{template "base/head" .}}
+<div class="repository settings collaboration">
+	{{template "repo/header" .}}
+	<div class="ui container">
+    {{template "repo/sidebar" .}}
+		<div class="ui grid">
+			{{template "repo/settings/navbar" .}}
+			<div class="twelve wide column content">
+				{{template "base/alert" .}}
+				<h4 class="ui top attached header">
+				  {{.i18n.Tr "repo.settings.collaboration"}}
+				</h4>
+				<div class="ui attached segment collaborator list">
+	        {{range .Collaborators}}
+					<div class="item">
+	          {{if not (eq .Id $.Owner.Id)}}
+	          <a href="{{$.RepoLink}}/settings/collaboration?remove={{.Name}}" class="ui right text red"><i class="fa fa-times"></i></a>
+	          {{end}}
+						<a href="{{AppSubUrl}}/{{.Name}}">
+					    <img class="ui avatar image" src="{{.AvatarLink}}">
+					    {{.DisplayName}}
+						</a>
+					</div>
+	        {{end}}
+        </div>
+        <div class="ui bottom attached segment">
+				  <form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
+				    {{.CsrfTokenHtml}}
+				    <div class="inline field ui left">
+				    	<div id="search-user-box">
+				    	  <div class="ui input">
+				    	    <input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off">
+				    	  </div>
+				    	  <div class="ui segment results hide"></div>
+				    	</div>
+				    </div>
+	          <button class="ui green button">{{.i18n.Tr "repo.settings.add_collaborator"}}</button>
+          </form>
+        </div>
+      </div>
+    </div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}

templates/user/profile.tmpl

@@ -82,6 +82,7 @@
           {{template "user/dashboard/feeds" .}}
         </div>
         {{end}}
+      </div>
     </div>
   </div>
 </div>