add organization team-single page

cmd/web.go

@@ -201,6 +201,8 @@ func runWeb(*cli.Context) {
 		r.Post("/:org/teams/new", bindIgnErr(auth.CreateTeamForm{}), org.NewTeamPost)
 		r.Get("/:org/teams/:team/edit", org.EditTeam)
 
+		r.Get("/:org/team/:team",org.SingleTeam)
+
 		r.Get("/:org/settings", org.Settings)
 		r.Post("/:org/settings", bindIgnErr(auth.OrgSettingForm{}), org.SettingsPost)
 		r.Post("/:org/settings/delete", org.DeletePost)

public/css/gogs.css

@@ -408,28 +408,33 @@ body {
 #repo-hooks-list .remove-hook {
     color: #DD4B39;
 }
-#repo-collab-form .dropdown-menu {
+#repo-collab-form .dropdown-menu,
+#org-team-content .header .dropdown-menu {
     margin-left: 15px;
     margin-top: 4px;
     padding: 0;
 }
-#repo-collab-form .dropdown-menu li {
+#repo-collab-form .dropdown-menu li,
+#org-team-content .header .dropdown-menu li {
     padding: 0 1em;
     line-height: 36px;
     cursor: pointer;
     font-weight: bold;
 }
-#repo-collab-form .dropdown-menu li:hover {
+#repo-collab-form .dropdown-menu li:hover,
+#org-team-content .header .dropdown-menu li:hover {
     background-color: #e8f0ff;
 }
-#repo-collab-form .dropdown-menu img {
+#repo-collab-form .dropdown-menu img,
+#org-team-content .header .dropdown-menu img {
     width: 28px;
     height: 28px;
     margin-right: 1em;
     vertical-align: middle;
     margin-top: -3px;
 }
-#repo-collab-form .dropdown-menu ul {
+#repo-collab-form .dropdown-menu ul,
+#org-team-content .header .dropdown-menu ul {
     margin-bottom: 0;
 }
 #repo-hooks-list li {
@@ -1446,8 +1451,7 @@ body {
 #footer {
     background: #fff;
     -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
-    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
-    ;
+    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);;
     height: 100px;
 }
 #footer .footer-wrap {
@@ -1677,31 +1681,39 @@ body {
 #org-members {
     margin-right: 30px;
 }
-#org-members .member .avatar img {
+#org-members .member .avatar img,
+#org-team-members .member .avatar img {
     width: 50px;
     height: 50px;
 }
-#org-members .member {
+#org-members .member,
+#org-team-members .member {
     padding-bottom: 20px;
     margin-bottom: 20px;
     border-bottom: 1px solid #DDD;
     height: 70px;
 }
-#org-members .member .name {
+#org-members .member .name,
+#org-team-members .member .name {
     padding-top: 4px;
 }
-#org-members .member .nick {
+#org-members .member .nick,
+#org-team-members .member .nick {
     display: block;
     color: #888;
 }
-#org-members .member .name a {
+#org-members .member .name a,
+#org-team-members .member .name a {
     color: #444;
 }
-#org-members .member .name strong {
+#org-members .member .name strong,
+#org-team-members .member .name strong {
     font-size: 1.2em;
 }
 #org-members .status,
-#org-members .role {
+#org-members .role,
+#org-team-members .status,
+#org-team-members .role {
     line-height: 48px;
     text-align: right;
 }
@@ -1727,4 +1739,44 @@ body {
 }
 #org-teams .org-team {
     border-bottom: none;
+}
+#org-team-card {
+    border: 1px solid #CCC;
+    background-color: #FFF;
+}
+#org-team-card .meta .num {
+    font-weight: bold;
+    color: #444;
+    font-size: 1.2em;
+}
+#org-team-card .meta > div {
+    margin-bottom: 12px;
+}
+#org-team-card .meta a:hover {
+    text-decoration: none;
+    font-weight: bold;
+}
+#org-team-card .action a {
+    margin-right: 12px;
+}
+#org-team-card .action a:hover {
+    text-decoration: none;
+}
+#org-team-content .header {
+    height: 50px;
+}
+#org-team-content .header > form {
+    padding-right: 0;
+}
+#org-team-repos .repo{
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #DDD;
+    padding-left: 15px;
+}
+#org-team-repos .repo-name{
+    font-size: 1.2em;
+    color: #444;
+    font-weight: bold;
+    line-height: 30px;
 }

public/js/app.js

@@ -301,6 +301,26 @@ var Gogits = {};
         }).addClass("js-copy-bind");
     }
 
+    // api working
+    Gogits.getUsers = 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><img src="' + item.avatar + '">' + item.username + '</li>';
+                    });
+                    $target.toggleShow();
+                    $target.find('ul').html(html);
+                } else {
+                    $target.toggleHide();
+                }
+            }
+        });
+    }
+
 })(jQuery);
 
 // ajax utils
@@ -733,22 +753,23 @@ function initRepoSetting() {
             $this.next().toggleHide();
             return;
         }
-        $.ajax({
-            url: '/api/v1/users/search?q=' + $this.val(),
-            dataType: "json",
-            success: function (json) {
-                if (json.ok && json.data.length) {
-                    var html = '';
-                    $.each(json.data, function (i, item) {
-                        html += '<li><img src="' + item.avatar + '">' + item.username + '</li>';
-                    });
-                    $this.next().toggleShow();
-                    $this.next().find('ul').html(html);
-                } else {
-                    $this.next().toggleHide();
-                }
-            }
-        });
+        Gogits.getUsers($this.val(), $this.next());
+        /*$.ajax({
+         url: '/api/v1/users/search?q=' + $this.val(),
+         dataType: "json",
+         success: function (json) {
+         if (json.ok && json.data.length) {
+         var html = '';
+         $.each(json.data, function (i, item) {
+         html += '<li><img src="' + item.avatar + '">' + item.username + '</li>';
+         });
+         $this.next().toggleShow();
+         $this.next().find('ul').html(html);
+         } else {
+         $this.next().toggleHide();
+         }
+         }
+         });*/
     }).on('focus', function () {
         if (!$(this).val()) {
             $(this).next().toggleHide();
@@ -771,14 +792,43 @@ function initRepoCreating() {
                 $(this).addClass("checked");
             }
             // set button group to show clicked owner
-            $('#repo-owner-avatar').attr("src",$(this).find('img').attr("src"));
+            $('#repo-owner-avatar').attr("src", $(this).find('img').attr("src"));
             $('#repo-owner-name').text($(this).text().trim());
-            console.log("set repo owner to uid :",uid,$(this).text().trim());
+            console.log("set repo owner to uid :", uid, $(this).text().trim());
         });
     }());
     console.log("init repo-creating scripts");
 }
 
+function initOrganization() {
+    (function(){
+        $('#org-team-add-user').on('keyup', function () {
+            var $this = $(this);
+            if (!$this.val()) {
+                $this.next().toggleHide();
+                return;
+            }
+            Gogits.getUsers($this.val(), $this.next());
+        }).on('focus', function () {
+            if (!$(this).val()) {
+                $(this).next().toggleHide();
+            }
+        }).next().on("click", 'li', function () {
+            $('#org-team-add-user').val($(this).text());
+            $('#org-team-add-user-form').submit();
+        }).toggleHide();
+        console.log("init script : add user to team");
+    }());
+
+    (function(){
+        $('#org-team-add-repo').next().toggleHide();
+        console.log("init script : add repository to team");
+    }());
+
+
+    console.log("init script : organization done");
+}
+
 (function ($) {
     $(function () {
         initCore();
@@ -804,6 +854,9 @@ function initRepoCreating() {
         if ($('#repo-create').length) {
             initRepoCreating();
         }
+        if ($('#body-nav').hasClass("org-nav")) {
+            initOrganization();
+        }
     });
 })(jQuery);
 

routers/org/teams.go

@@ -129,3 +129,8 @@ func EditTeam(ctx *middleware.Context, params martini.Params) {
 	ctx.Data["Title"] = "Organization " + params["org"] + " Edit Team"
 	ctx.HTML(200, "org/edit_team")
 }
+
+func SingleTeam(ctx *middleware.Context,params martini.Params){
+	ctx.Data["Title"] = "single-team"+params["org"]
+	ctx.HTML(200,"org/team")
+}

templates/org/team.tmpl

@@ -0,0 +1,106 @@
+{{template "base/head" .}}
+{{template "base/navbar" .}}
+<div id="body-nav" class="org-nav org-nav-auto">
+    <div class="container clearfix">
+        <div id="org-nav-wrapper">
+            <ul class="nav nav-pills pull-right">
+                <li><a href="#"><i class="fa fa-users"></i>Members
+                    <span class="label label-default">5</span></a>
+                </li>
+                <li class="active"><a href="#"><i class="fa fa-tags"></i>Teams
+                    <span class="label label-default">2</span></a>
+                </li>
+            </ul>
+            <img class="pull-left org-small-logo" src="https://avatars3.githubusercontent.com/u/6656686?s=140" alt="" width="60"/>
+            <div id="org-nav-info">
+                <h2 class="org-name">Organization Name</h2>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="body" class="container">
+    <div id="org">
+        <div id="org-team">
+            <div id="org-team-card" class="col-md-3">
+                <h3 class="title">Team name</h3>
+                <p class="desc">team description</p>
+                <hr/>
+                <div class="meta">
+                    <div class="col-md-6">
+                        <a href="#"><span class="num"><strong>1</strong></span>
+                            <br/>Member</a>
+                    </div>
+                    <div class="col-md-6">
+                        <a href="#"><span class="num"><strong>1</strong></span>
+                            <br/>Repository</a>
+                    </div>
+                </div>
+                <hr style="width: 100%"/>
+                <div class="action">
+                    <a href="#">
+                        <button class="btn btn-danger">Leave</button>
+                    </a>
+                    <a href="#">
+                        <button class="btn btn-success">Edit</button>
+                    </a>
+                    <a href="#">
+                        <button class="btn btn-default">Setting</button>
+                    </a>
+                </div>
+                <hr/>
+                <p>This team grants <strong>Push, Read & Clone</strong> access: members can read from and push to the team's repositories.</p>
+            </div>
+            <div id="org-team-content" class="col-md-9">
+                <div class="header">
+                    <div class="header-tab col-md-4">
+                        <div class="btn-group">
+                            <a class="btn btn-primary" href="#">Members</a>
+                            <a class="btn btn-default" href="#">Repositories</a>
+                        </div>
+                    </div>
+                    <form id="org-team-add-user-form" action="url" class="col-md-4 pull-right open" method="post">
+                        <input type="text" class="form-control" name="user" placeholder="add user to teams" id="org-team-add-user"/>
+                        <div class="dropdown-menu">
+                            <ul class="list-unstyled"></ul>
+                        </div>
+                        <input type="hidden" name="team" value="team-id"/>
+                    </form>
+                </div>
+                <div class="content" id="org-team-members">
+                    <div class="member">&nbsp;
+                        <div class="avatar col-md-1">
+                            <img src="https://avatars3.githubusercontent.com/u/2142787?s=140" alt="">
+                        </div>
+                        <div class="name col-md-4">
+                            <a href="#"><strong>fuxiaohei</strong><span class="nick">傅小黑</span></a>
+                        </div>
+                        <a class="remove btn btn-danger pull-right" href="#">Remove</a>
+                    </div>
+                </div>
+                <!---------------------- for ?member or ?repo ---------->
+                <div class="header">
+                    <div class="header-tab col-md-4">
+                        <div class="btn-group">
+                            <a class="btn btn-default" href="#">Members</a>
+                            <a class="btn btn-primary" href="#">Repositories</a>
+                        </div>
+                    </div>
+                    <form id="org-team-add-repo-form" action="url" class="col-md-4 pull-right open" method="post">
+                        <input type="text" class="form-control" name="repo" placeholder="add repository to teams" id="org-team-add-repo"/>
+                        <div class="dropdown-menu">
+                            <ul class="list-unstyled"></ul>
+                        </div>
+                        <input type="hidden" name="team" value="team-id"/>
+                    </form>
+                </div>
+                <div class="content" id="org-team-repos">
+                    <div class="repo">
+                        <a href="#" class="repo-name"><i class="fa fa-book"></i> repo-name</a>
+                        <a class="remove btn btn-danger pull-right" href="#">Remove</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "base/footer" .}}