Redesign the teams page to use a table
Allows for faster loading and easier viewing of important information about teams
This commit is contained in:
Joseph Schorr
parent
98206310bd
commit
6ebb417923
11 changed files with 194 additions and 168 deletions
|
|
@ -1,6 +1,14 @@
|
|||
<div class="teams-manager-element">
|
||||
<div class="feedback-bar" feedback="feedback"></div>
|
||||
<div class="manager-header" header-title="Teams and Membership">
|
||||
<div class="tab-header-controls visible-xs">
|
||||
<button class="btn btn-primary"
|
||||
ng-show="organization.is_admin"
|
||||
ng-click="askCreateTeam()">
|
||||
<i class="fa fa-plus" style="margin-right: 4px;"></i> Create New Team
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-header-controls hidden-xs">
|
||||
<div class="btn-group btn-group-sm" ng-show="organization.is_admin">
|
||||
<button class="btn"
|
||||
|
|
@ -17,66 +25,69 @@
|
|||
|
||||
<!-- Teams List -->
|
||||
<div ng-show="!showingMembers">
|
||||
<div class="row" style="margin-left: 0px; margin-right: 0px;">
|
||||
<button class="btn btn-primary hidden-xs"
|
||||
ng-show="organization.is_admin"
|
||||
style="margin-bottom: 10px; float: right;"
|
||||
ng-click="askCreateTeam()">
|
||||
<i class="fa fa-plus" style="margin-right: 4px;"></i> Create New Team
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn btn-primary hidden-xs"
|
||||
ng-show="organization.is_admin"
|
||||
style="margin-bottom: 10px; "
|
||||
ng-click="askCreateTeam()">
|
||||
<i class="fa fa-plus" style="margin-right: 4px;"></i> Create New Team
|
||||
</button>
|
||||
|
||||
<div class="row hidden-xs">
|
||||
<div class="col-sm-7 col-md-8 header-col">
|
||||
<span class="header-text">Team Summary</span>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-5 header-col" ng-show="organization.is_admin">
|
||||
<span class="header-text">Team Permissions</span>
|
||||
<i class="info-icon fa fa-info-circle" data-placement="bottom" data-original-title="" data-title=""
|
||||
data-content="Global permissions for the team and its members<br><br><dl><dt>Member</dt><dd>Permissions are assigned on a per repository basis</dd><dt>Creator</dt><dd>A team can create its own repositories</dd><dt>Admin</dt><dd>A team has full control of the organization</dd></dl>"
|
||||
data-html="true"
|
||||
data-trigger="hover"
|
||||
bs-popover></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="co-filter-box">
|
||||
<span class="filter-message" ng-if="options.filter">
|
||||
Showing {{ orderedTeams.entries.length }} of {{ teams.length }} teams
|
||||
</span>
|
||||
<input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Teams...">
|
||||
</span>
|
||||
|
||||
<div class="team-listing" ng-repeat="team in orderedTeams">
|
||||
<div id="team-{{team.name}}" class="row">
|
||||
<div class="col-sm-7 col-md-8">
|
||||
<div class="team-title">
|
||||
<span class="avatar" data="team.avatar" size="30"></span>
|
||||
<span ng-show="team.can_view">
|
||||
<a href="/organization/{{ organization.name }}/teams/{{ team.name }}">{{ team.name }}</a>
|
||||
</span>
|
||||
<span ng-show="!team.can_view">
|
||||
{{ team.name }}
|
||||
</span>
|
||||
</div>
|
||||
<table class="co-table" style="margin-top: 10px;">
|
||||
<thead>
|
||||
<td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
|
||||
<a ng-click="TableService.orderBy('name', options)">Team Name</a>
|
||||
</td>
|
||||
<td ng-class="TableService.tablePredicateClass('member_count', options.predicate, options.reverse)">
|
||||
<a ng-click="TableService.orderBy('member_count', options)">Members</a>
|
||||
</td>
|
||||
<td class="hidden-xs" ng-class="TableService.tablePredicateClass('repo_count', options.predicate, options.reverse)">
|
||||
<a ng-click="TableService.orderBy('repo_count', options)">Repositories</a>
|
||||
</td>
|
||||
<td ng-class="TableService.tablePredicateClass('role_index', options.predicate, options.reverse)">
|
||||
<a ng-click="TableService.orderBy('role_index', options)">Team Role</a>
|
||||
|
||||
<div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
|
||||
<i class="info-icon fa fa-info-circle" data-placement="bottom" data-original-title="" data-title=""
|
||||
data-content="Global permissions for the team and its members<br><br><dl><dt>Member</dt><dd>Permissions are assigned on a per repository basis</dd><dt>Creator</dt><dd>A team can create its own repositories</dd><dt>Admin</dt><dd>A team has full control of the organization</dd></dl>"
|
||||
data-html="true"
|
||||
data-trigger="hover"
|
||||
bs-popover></i>
|
||||
</td>
|
||||
<td class="options-col"></td>
|
||||
</thead>
|
||||
|
||||
<div class="team-member-list hidden-xs" ng-if="members[team.name]">
|
||||
<div class="cor-loader" ng-if="!members[team.name].members"></div>
|
||||
<span class="team-member"
|
||||
ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">
|
||||
<span data-title="{{ member.name }}" bs-tooltip>
|
||||
<a href="/user/{{ member.name }}" ng-if="!member.is_robot">
|
||||
<span class="avatar" data="member.avatar" size="26"></span>
|
||||
</a>
|
||||
<i class="fa ci-robot fa-lg" ng-if="member.is_robot"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="team-member-more"
|
||||
ng-if="members[team.name].members.length > 20">+ {{ members[team.name].members.length - 20 }} more team members.</span>
|
||||
<span class="team-member-more"
|
||||
ng-if="members[team.name].members && !members[team.name].members.length">(Empty Team)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5 col-md-4 control-col" ng-show="organization.is_admin">
|
||||
<tr class="co-checkable-row"
|
||||
ng-repeat="team in orderedTeams.visibleEntries"
|
||||
bindonce>
|
||||
<td style="white-space: nowrap;">
|
||||
<span class="avatar" data="team.avatar" size="24"></span>
|
||||
<span bo-show="team.can_view">
|
||||
<a href="/organization/{{ organization.name }}/teams/{{ team.name }}"><span bo-text="team.name"></span></a>
|
||||
</span>
|
||||
<span bo-show="!team.can_view" bo-text="team.name"></span>
|
||||
</td>
|
||||
<td>
|
||||
<span bo-show="team.can_view">
|
||||
<a href="/organization/{{ organization.name }}/teams/{{ team.name }}"><span bo-text="team.member_count"></span> <span class="hidden-xs">member<span bo-if="team.member_count != 1">s</span></span></a>
|
||||
</span>
|
||||
<span bo-show="!team.can_view">
|
||||
<span bo-text="team.member_count"></span> <span class="hidden-xs">member<span bo-if="team.member_count != 1">s</span></span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="hidden-xs">
|
||||
<span bo-text="team.repo_count"></span> repositories
|
||||
</td>
|
||||
<td>
|
||||
<span class="role-group" current-role="team.role" pull-left="true"
|
||||
role-changed="setRole(role, team.name)" roles="teamRoles"></span>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<span class="cor-options-menu">
|
||||
<span class="cor-option" option-click="viewTeam(team.name)">
|
||||
<i class="fa fa-user"></i> Manage Team Members
|
||||
|
|
@ -85,8 +96,14 @@
|
|||
<i class="fa fa-times"></i> Delete Team {{ team.name }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="empty" ng-if="!orderedTeams.entries.length"
|
||||
style="margin-top: 20px;">
|
||||
<div class="empty-primary-msg">No matching teams found.</div>
|
||||
<div class="empty-secondary-msg">Try expanding your filtering terms.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Reference in a new issue