Finish new collaboration page

8 files changed, 244 insertions, 23 deletions

diff --git a/public/ng/css/gogs.css b/public/ng/css/gogs.css
index 148df5eb43..244d6531d6 100644
--- a/public/ng/css/gogs.css
+++ b/public/ng/css/gogs.css
@@ -198,6 +198,22 @@ img.avatar-48 {
 .main-wrapper {
   padding: 20px 0 40px;
 }
+.user-list {
+  width: auto;
+  min-width: 180px;
+  max-width: 300px;
+}
+.user-list img {
+  width: 28px;
+  height: 28px;
+  margin-right: 1em;
+  margin-top: 1px;
+  vertical-align: middle;
+}
+.user-list li {
+  cursor: pointer;
+  font-weight: bold;
+}
 .markdown {
   background-color: white;
   font-size: 16px;
@@ -753,9 +769,24 @@ The dashboard page style
   margin-right: 6px;
   font-size: 1.1em;
 }
+#dashboard-selection-menu {
+  width: auto;
+  max-width: 300px;
+}
 #dashboard-selection-menu > .drop-down {
   top: 56px;
 }
+#dashboard-selection-menu li {
+  white-space: nowrap;
+}
+#dashboard-selection-menu li.checked .octicon {
+  opacity: 1;
+}
+#dashboard-selection-menu li a {
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  overflow: hidden;
+}
 #dashboard-switch-menu {
   border-bottom-left-radius: .3em;
   border-bottom-right-radius: .3em;
@@ -1155,32 +1186,26 @@ The register and sign-in page style
 #repo-create-cancel {
   margin-left: 4em;
 }
-#dashboard-switch-menu,
 #repo-create-owner-list {
   top: 30px;
   left: 0;
   width: auto;
   max-width: 300px;
 }
-#dashboard-switch-menu .octicon,
 #repo-create-owner-list .octicon {
   margin-right: 12px;
   opacity: 0;
 }
-#dashboard-switch-menu .avatar,
 #repo-create-owner-list .avatar {
   width: 20px;
   height: 20px;
 }
-#dashboard-switch-menu li,
 #repo-create-owner-list li {
   white-space: nowrap;
 }
-#dashboard-switch-menu li.checked .octicon,
 #repo-create-owner-list li.checked .octicon {
   opacity: 1;
 }
-#dashboard-switch-menu li a,
 #repo-create-owner-list li a {
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
@@ -1244,6 +1269,34 @@ The register and sign-in page style
 .repo-setting-zone {
   padding: 30px;
 }
+#repo-collab-list {
+  list-style: none;
+  padding: 10px 0 5px 0;
+}
+#repo-collab-list li.collab {
+  clear: both;
+  height: 50px;
+  padding: 0 15px 0 15px;
+}
+#repo-collab-list a.member {
+  color: #444;
+  height: 50px;
+  line-height: 50px;
+}
+#repo-collab-list a.member:hover {
+  color: #4183C4;
+}
+#repo-collab-list .avatar {
+  margin-right: 1em;
+  width: 40px;
+}
+#repo-collab-list .remove-collab {
+  color: #DD4B39;
+}
+.repo-user-list-block {
+  position: relative;
+  top: 5px;
+}
 #setting-wrapper {
   padding-bottom: 100px;
 }
diff --git a/public/ng/css/ui.css b/public/ng/css/ui.css
index 908f4e70fb..d30e137dbc 100644
--- a/public/ng/css/ui.css
+++ b/public/ng/css/ui.css
@@ -59,7 +59,8 @@ audio:not([controls]) {
   height: 0;
 }
 [hidden],
-template .hidden {
+template,
+.hidden {
   display: none;
 }
 .opacity {
@@ -72,6 +73,7 @@ a,
 .text-link {
   color: #428bca;
   text-decoration: none;
+  cursor: pointer;
 }
 a:hover,
 .text-link:hover {
@@ -604,6 +606,12 @@ ul.menu-down {
   box-shadow: 0 0 2px #666666;
   background-color: #ffffff;
 }
+ul.menu-down-show {
+  position: absolute;
+  z-index: 99;
+  box-shadow: 0 0 2px #666666;
+  background-color: #ffffff;
+}
 ul.menu-radius {
   border-radius: .3em;
 }
diff --git a/public/ng/js/gogs.js b/public/ng/js/gogs.js
index 37144ce99e..473997e9ee 100644
--- a/public/ng/js/gogs.js
+++ b/public/ng/js/gogs.js
@@ -52,6 +52,59 @@ var Gogs = {};
             }
         }
     });
+    $.fn.extend({
+        toggleHide: function () {
+            $(this).addClass("hidden");
+        },
+        toggleShow: function () {
+            $(this).removeClass("hidden");
+        },
+        toggleAjax: function (successCallback, errorCallback) {
+            var url = $(this).data("ajax");
+            var method = $(this).data('ajax-method') || 'get';
+            var ajaxName = $(this).data('ajax-name');
+            var data = {};
+
+            if (ajaxName.endsWith("preview")) {
+                data["mode"] = "gfm";
+                data["context"] = $(this).data('ajax-context');
+            }
+
+            $('[data-ajax-rel=' + ajaxName + ']').each(function () {
+                var field = $(this).data("ajax-field");
+                var t = $(this).data("ajax-val");
+                if (t == "val") {
+                    data[field] = $(this).val();
+                    return true;
+                }
+                if (t == "txt") {
+                    data[field] = $(this).text();
+                    return true;
+                }
+                if (t == "html") {
+                    data[field] = $(this).html();
+                    return true;
+                }
+                if (t == "data") {
+                    data[field] = $(this).data("ajax-data");
+                    return true;
+                }
+                return true;
+            });
+            console.log("toggleAjax:", method, url, data);
+            $.ajax({
+                url: url,
+                method: method.toUpperCase(),
+                data: data,
+                error: errorCallback,
+                success: function (d) {
+                    if (successCallback) {
+                        successCallback(d);
+                    }
+                }
+            })
+        }
+    });
 }(jQuery));
 
 (function ($) {
@@ -145,6 +198,26 @@ var Gogs = {};
             }
         }).trigger('hashchange');
     };
+
+    // Search users by keyword.
+    Gogs.searchUsers = function (val, $target) {
+        $.ajax({
+            url: '/api/v1/users/search?q=' + val,
+            dataType: "json",
+            success: function (json) {
+                if (json.ok && json.data.length) {
+                    var html = '';
+                    $.each(json.data, function (i, item) {
+                        html += '<li><a><img src="' + item.avatar + '">' + item.username + '</a></li>';
+                    });
+                    $target.html(html);
+                    $target.toggleShow();
+                } else {
+                    $target.toggleHide();
+                }
+            }
+        });
+    }
 })(jQuery);
 
 function initCore() {
@@ -175,6 +248,7 @@ function initRepoCreate() {
 }
 
 function initRepoSetting() {
+    // Options.
     // Confirmation of changing repository name.
     $('#repo-setting-form').submit(function (e) {
         var $reponame = $('#repo_name');
@@ -189,6 +263,27 @@ function initRepoSetting() {
     $('#delete-button').click(function () {
         $('#delete-form').show();
     });
+
+    // Collaboration.
+    $('#repo-collab-list hr:last-child').remove();
+    var $ul = $('#repo-collaborator').next().next().find('ul');
+    $('#repo-collaborator').on('keyup', function () {
+        var $this = $(this);
+        if (!$this.val()) {
+            $ul.toggleHide();
+            return;
+        }
+        Gogs.searchUsers($this.val(), $ul);
+    }).on('focus', function () {
+        if (!$(this).val()) {
+            $ul.toggleHide();
+        } else {
+            $ul.toggleShow();
+        }
+    }).next().next().find('ul').on("click", 'li', function () {
+        $('#repo-collaborator').val($(this).text());
+        $ul.toggleHide();
+    });
 }
 
 $(document).ready(function () {
diff --git a/public/ng/less/gogs/base.less b/public/ng/less/gogs/base.less
index f9405499ad..0cadabe869 100644
--- a/public/ng/less/gogs/base.less
+++ b/public/ng/less/gogs/base.less
@@ -214,4 +214,20 @@ clear: both;
 }
 .main-wrapper {
     padding: 20px 0 40px;
+}
+.user-list {
+    width: auto;
+    min-width: 180px;
+    max-width: 300px;
+    img {
+        width: 28px;
+        height: 28px;
+        margin-right: 1em;
+        margin-top: 1px;
+        vertical-align: middle;
+    }
+    li {
+        cursor: pointer;
+        font-weight: bold;
+    }
 }
\ No newline at end of file
diff --git a/public/ng/less/gogs/dashboard.less b/public/ng/less/gogs/dashboard.less
index 3929f2d00d..f8838ae6fd 100644
--- a/public/ng/less/gogs/dashboard.less
+++ b/public/ng/less/gogs/dashboard.less
@@ -176,9 +176,24 @@ The dashboard page style
 }
 
 #dashboard-selection-menu {
-  > .drop-down {
-    top: 56px;
-  }
+    width: auto;
+    max-width: 300px;
+    > .drop-down {
+        top: 56px;
+    }
+    li {
+        white-space: nowrap;
+        &.checked {
+            .octicon {
+                opacity: 1;
+            }
+        }
+        a {
+            text-overflow: ellipsis; 
+            -o-text-overflow: ellipsis; 
+            overflow: hidden;
+        }
+    }
 }
 
 // the drop-down menu of #dashboard-selection-menu
diff --git a/public/ng/less/gogs/repository.less b/public/ng/less/gogs/repository.less
index 13f5a42e53..1847c44e53 100644
--- a/public/ng/less/gogs/repository.less
+++ b/public/ng/less/gogs/repository.less
@@ -357,7 +357,6 @@
   margin-left: 4em;
 }
 
-#dashboard-switch-menu,
 #repo-create-owner-list {
     top: 30px;
     left: 0;
@@ -442,4 +441,32 @@
 }
 .repo-setting-zone {
     padding: 30px;
+}
+#repo-collab-list {
+    list-style: none;
+    padding: 10px 0 5px 0;
+    li.collab {
+        clear: both;
+        height: 50px;
+        padding: 0 15px 0 15px;
+    }
+    a.member {
+        color: #444;
+        height: 50px;
+        line-height: 50px;
+        &:hover {
+            color: #4183C4;
+        }
+    }
+    .avatar {
+        margin-right: 1em;
+        width: 40px;
+    }
+    .remove-collab {
+        color: #DD4B39;
+    }
+}
+.repo-user-list-block {
+    position: relative;
+    top: 5px;
 }
\ No newline at end of file
diff --git a/public/ng/less/ui/menu.less b/public/ng/less/ui/menu.less
index e36667ce26..a1daefb365 100644
--- a/public/ng/less/ui/menu.less
+++ b/public/ng/less/ui/menu.less
@@ -94,12 +94,20 @@ ul.menu-down {
   }
 }
 
-ul.menu-down {
-  position: absolute;
-  display: none;
-  z-index: 99;
-  box-shadow: 0 0 2px @menuShadowColor;
-  background-color: @menuDownBgColor;
+ul {
+    &.menu-down {
+        position: absolute;
+        display: none;
+        z-index: 99;
+        box-shadow: 0 0 2px @menuShadowColor;
+        background-color: @menuDownBgColor;
+    }
+    &.menu-down-show {
+        position: absolute;
+        z-index: 99;
+        box-shadow: 0 0 2px @menuShadowColor;
+        background-color: @menuDownBgColor;
+    }
 }
 
 ul.menu-radius {
diff --git a/public/ng/less/ui/reset.less b/public/ng/less/ui/reset.less
index f58e1a4730..04d1198969 100644
--- a/public/ng/less/ui/reset.less
+++ b/public/ng/less/ui/reset.less
@@ -81,17 +81,15 @@ audio:not([controls]) {
 // display hidden elements
 
 [hidden],
-template
+template,
 .hidden {
-  display: none;
+    display: none;
 }
-
 .opacity {
-  opacity: 0;
+    opacity: 0;
 }
-
 .opacity-half {
-  opacity: .5;
+    opacity: .5;
 }
 
 // links element
@@ -100,6 +98,7 @@ a,
 .text-link {
   color: @linkColor;
   text-decoration: none;
+  cursor: pointer;
   &:hover {
     color: @linkHoverColor;
     text-decoration: none;