vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add the new team view page

Browse source
This commit is contained in:
Joseph Schorr 2015-03-31 15:58:23 -04:00
parent 24b9fe5e48
commit bb81c05c03
5 changed files with 273 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/css/directives/ui/avatar.css
View file

@ -20,4 +20,7 @@
.avatar-element .letter {
cursor: default !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
}

51
static/css/pages/team-view.css Normal file
View file

@ -0,0 +1,51 @@
.team-view .co-main-content-panel {
padding: 20px;
}
.team-view .team-name {
vertical-align: middle;
margin-left: 6px;
}
.team-view .team-view-header {
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
}
.team-view .team-view-header > h3 {
margin-top: 10px;
}
.team-view .team-view-header .popover {
max-width: none !important;
}
.team-view .team-view-header .popover.bottom-right .arrow:after {
border-bottom-color: #f7f7f7;
top: 2px;
}
.team-view .team-view-header .popover-content {
font-size: 14px;
padding-top: 6px;
min-width: 500px;
}
.team-view .team-view-header .popover-content input {
background: white;
}
.team-view .team-view-add-element .help-text {
font-size: 13px;
color: #ccc;
margin-top: 10px;
}
.team-view .co-table-header-row td {
padding-top: 20px !important;
}
.team-view .co-table-header-row:first-child td {
padding-top: 10px !important;
}

9
static/js/pages/team-view.js
View file

@ -3,7 +3,14 @@
* Page to view the members of a team and add/remove them.
*/
angular.module('quayPages').config(['pages', function(pages) {
pages.create('team-view', 'team-view.html', TeamViewCtrl);
pages.create('team-view', 'team-view.html', TeamViewCtrl, {
'newLayout': true,
'title': 'Team {{ teamname }}',
'description': 'Team {{ teamname }}'
}, ['layout'])
pages.create('team-view', 'old-team-view.html', TeamViewCtrl, {
}, ['old-layout']);
}]);
function TeamViewCtrl($rootScope, $scope, $timeout, Features, Restangular, ApiService, $routeParams) {

128
static/partials/old-team-view.html Normal file
View file

@ -0,0 +1,128 @@
<div class="resource-view" resource="orgResource" error-message="'No matching organization'">
<div class="team-view cor-container">
<div class="organization-header" organization="organization" team-name="teamname">
<div ng-show="canEditMembers" class="side-controls">
<div class="hidden-xs">
<button class="btn btn-success"
id="showAddMember"
data-title="Add Team Member"
data-content-template="/static/directives/team-view-add.html"
data-placement="bottom-right"
bs-popover="bs-popover">
<i class="fa fa-plus"></i>
Add Team Member
</button>
</div>
</div>
</div>
<div class="resource-view" resource="membersResource" error-message="'No matching team found'">
<div class="description markdown-input" content="team.description" can-write="organization.is_admin"
content-changed="updateForDescription" field-title="'team description'"></div>
<div class="empty-message" ng-if="!members.length">
This team has no members
</div>
<div class="empty-message" ng-if="members.length && !(members | filter:search).length">
No matching team members found
</div>
<table class="member-listing" style="margin-top: -20px" ng-show="members.length">
<!-- Members -->
<tr ng-if="(members | filter:search | filter: filterFunction(false, false)).length">
<td colspan="2"><div class="section-header">Team Members</div></td>
</tr>
<tr ng-repeat="member in members | filter:search | filter: filterFunction(false, false) | orderBy: 'name'">
<td class="user entity">
<span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
</td>
<td>
<span class="delete-ui" delete-title="'Remove ' + member.name + ' from team'" button-title="'Remove'"
perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
</td>
</tr>
<!-- Robots -->
<tr ng-if="(members | filter:search | filter: filterFunction(false, true)).length">
<td colspan="2"><div class="section-header">Robot Accounts</div></td>
</tr>
<tr ng-repeat="member in members | filter:search | filter: filterFunction(false, true) | orderBy: 'name'">
<td class="user entity">
<span class="entity-reference" entity="member" namespace="organization.name"></span>
</td>
<td>
<span class="delete-ui" delete-title="'Remove ' + member.name + ' from team'" button-title="'Remove'"
perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
</td>
</tr>
<!-- Invited -->
<tr ng-if="(members | filter:search | filter: filterFunction(true, false)).length">
<td colspan="2"><div class="section-header">Invited To Join</div></td>
</tr>
<tr ng-repeat="member in members | filter:search | filter: filterFunction(true, false) | orderBy: 'name'">
<td class="user entity">
<span ng-if="member.kind != 'invite'">
<span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
</span>
<span class="invite-listing" ng-if="member.kind == 'invite'">
<span class="avatar" size="32" data="member.avatar"></span>
{{ member.email }}
</span>
</td>
<td>
<span class="delete-ui" delete-title="'Revoke invite to join team'" button-title="'Revoke'"
perform-delete="revokeInvite(member)" ng-if="canEditMembers"></span>
</td>
</tr>
</table>
<div ng-show="canEditMembers">
<div ng-if-media="'(max-width: 767px)'">
<div ng-include="'/static/directives/team-view-add.html'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal message dialog -->
<div class="modal fade" id="cannotChangeTeamModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Cannot change team</h4>
</div>
<div class="modal-body">
You do not have permission to change properties of this team.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal message dialog -->
<div class="modal fade" id="cannotChangeMembersModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Cannot change members</h4>
</div>
<div class="modal-body">
You do not have permission to change the members of this team.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

128
static/partials/team-view.html
View file

@ -1,82 +1,120 @@
<div class="resource-view" resource="orgResource" error-message="'No matching organization'">
<div class="team-view cor-container">
<div class="organization-header" organization="organization" team-name="teamname">
<div ng-show="canEditMembers" class="side-controls">
<div class="hidden-xs">
<button class="btn btn-success"
id="showAddMember"
data-title="Add Team Member"
data-content-template="/static/directives/team-view-add.html"
data-placement="bottom-right"
bs-popover="bs-popover">
<i class="fa fa-plus"></i>
Add Team Member
</button>
</div>
</div>
<div class="resource-view team-view" resources="[orgResource, membersResource]"
error-message="'No matching organization or team found'">
<div class="page-content">
<div class="cor-title">
<span class="cor-title-link">
<a class="back-link" href="/organization/{{ organization.name }}?tab=teams">
<span class="avatar" size="24" data="organization.avatar" style="margin-right: 4px"></span>
{{ organization.name }}
</a>
</span>
<span class="cor-title-content">
<span class="avatar" data="team.avatar" size="32"></span>
<span class="team-name">{{ teamname }}</span>
</span>
</div>
<div class="resource-view" resource="membersResource" error-message="'No matching team found'">
<div class="description markdown-input" content="team.description" can-write="organization.is_admin"
content-changed="updateForDescription" field-title="'team description'"></div>
<div class="co-main-content-panel">
<div class="team-view-header">
<div ng-show="canEditMembers" class="side-controls">
<div class="hidden-xs">
<button class="btn btn-primary"
id="showAddMember"
data-title="Add Team Member"
data-content-template="/static/directives/team-view-add.html"
data-placement="bottom-right"
bs-popover="bs-popover">
<i class="fa fa-plus"></i>
Add Team Member
</button>
</div>
</div>
<div class="empty-message" ng-if="!members.length">
This team has no members
<div class="description markdown-input" content="team.description"
can-write="organization.is_admin"
content-changed="updateForDescription"
field-title="'team description'"></div>
</div>
<div class="empty-message" ng-if="members.length && !(members | filter:search).length">
No matching team members found
<div class="empty" ng-if="!members.length">
<div class="empty-primary-msg">This team has no members.</div>
<div class="empty-secondary-msg">
Click the "Add Team Member" button above to add or invite team members.
</div>
</div>
<table class="member-listing" style="margin-top: -20px" ng-show="members.length">
<!-- Members -->
<tr ng-if="(members | filter:search | filter: filterFunction(false, false)).length">
<td colspan="2"><div class="section-header">Team Members</div></td>
<table class="co-table no-lines" ng-if="members.length">
<thead>
<tr>
<td>Team Member</td>
<td class="options-col"></td>
</tr>
</thead>
<!-- Team Members -->
<tr class="co-table-header-row"
ng-if="(members | filter: filterFunction(false, false)).length">
<td colspan="3"><i class="fa fa-user"></i> Team Members</td>
</tr>
<tr ng-repeat="member in members | filter:search | filter: filterFunction(false, false) | orderBy: 'name'">
<tr class="indented-row"
ng-repeat="member in members | filter: filterFunction(false, false) | orderBy: 'name'">
<td class="user entity">
<span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
<span class="entity-reference" entity="member" namespace="organization.name"
show-avatar="true" avatar-size="24"></span>
</td>
<td>
<span class="delete-ui" delete-title="'Remove ' + member.name + ' from team'" button-title="'Remove'"
perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
<span class="cor-options-menu" ng-if="canEditMembers">
<span class="cor-option" option-click="removeMember(member.name)">
<i class="fa fa-times"></i> Remove {{ member.name }}
</span>
</span>
</td>
</tr>
<!-- Robots -->
<tr ng-if="(members | filter:search | filter: filterFunction(false, true)).length">
<td colspan="2"><div class="section-header">Robot Accounts</div></td>
<!-- Robot Accounts -->
<tr class="co-table-header-row"
ng-if="(members | filter: filterFunction(false, true)).length">
<td colspan="3"><i class="fa fa-wrench"></i> Robot Accounts</td>
</tr>
<tr ng-repeat="member in members | filter:search | filter: filterFunction(false, true) | orderBy: 'name'">
<tr class="indented-row"
ng-repeat="member in members | filter: filterFunction(false, true) | orderBy: 'name'">
<td class="user entity">
<span class="entity-reference" entity="member" namespace="organization.name"></span>
</td>
<td>
<span class="delete-ui" delete-title="'Remove ' + member.name + ' from team'" button-title="'Remove'"
perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
<span class="cor-options-menu" ng-if="canEditMembers">
<span class="cor-option" option-click="removeMember(member.name)">
<i class="fa fa-times"></i> Remove {{ member.name }}
</span>
</span>
</td>
</tr>
<!-- Invited -->
<tr ng-if="(members | filter:search | filter: filterFunction(true, false)).length">
<td colspan="2"><div class="section-header">Invited To Join</div></td>
<!-- Invitations -->
<tr class="co-table-header-row"
ng-if="(members | filter: filterFunction(true, false)).length">
<td colspan="3"><i class="fa ci-invite"></i> Invited to Join</td>
</tr>
<tr ng-repeat="member in members | filter:search | filter: filterFunction(true, false) | orderBy: 'name'">
<tr class="indented-row"
ng-repeat="member in members | filter: filterFunction(true, false) | orderBy: 'name'">
<td class="user entity">
<span ng-if="member.kind != 'invite'">
<span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
<span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="24"></span>
</span>
<span class="invite-listing" ng-if="member.kind == 'invite'">
<span class="avatar" size="32" data="member.avatar"></span>
<span class="avatar" size="24" data="member.avatar" style="margin-right: 6px;"></span>
{{ member.email }}
</span>
</td>
<td>
<span class="delete-ui" delete-title="'Revoke invite to join team'" button-title="'Revoke'"
perform-delete="revokeInvite(member)" ng-if="canEditMembers"></span>
<span class="cor-options-menu" ng-if="canEditMembers">
<span class="cor-option" option-click="revokeInvite(member)">
<i class="fa fa-times"></i> Revoke invite
</span>
</span>
</td>
</tr>
</table>