Better UI for the permissions table in the repository, as well as fix some other avatar issues

endpoints/api/permission.py

@@ -243,7 +243,7 @@ class RepositoryTeamPermission(RepositoryParamResource):
                 'role': new_permission['role']},
                repo=model.get_repository(namespace, repository))
 
-    return role_view(perm), 200
+    return wrap_role_view_team(role_view(perm), perm.team), 200
 
   @require_repo_admin
   @nickname('deleteTeamPermissions')

static/css/core-ui.css

@@ -773,6 +773,11 @@
   padding: 10px;
 }
 
+.co-table.no-lines td {
+  border-bottom: 0px;
+  padding: 6px;
+}
+
 .co-table thead td {
   text-transform: uppercase;
   font-size: 16px;
@@ -813,11 +818,34 @@
   width: 30px;
 }
 
+.co-table .add-row-spacer td {
+  padding: 5px;
+}
+
 .co-table .add-row td {
+  padding-top: 10px;
   border-top: 2px solid #eee;
   border-bottom: none;
 }
 
+.co-table tr.co-table-header-row td {
+  font-size: 12px;
+  text-transform: uppercase;
+  color: #ccc;
+  border-bottom: none;
+  padding-left: 10px;
+  padding-top: 10px;
+  padding-bottom: 4px;
+}
+
+.co-table tr.co-table-header-row td i.fa {
+  margin-right: 4px;
+}
+
+.co-table tr.indented-row td:first-child {
+  padding-left: 28px;
+}
+
 .cor-checkable-menu {
   display: inline-block;
 }

static/css/directives/ui/repository-permissions-table.css

@@ -1,3 +1,15 @@
 .repository-permissions-table #add-entity-permission {
    padding-left: 0px;
+}
+
+.repository-permissions-table .user-permission-entity {
+  position: relative;
+}
+
+.repository-permissions-table .outside-org {
+  position: absolute;
+  top: 15px;
+  left: -2px;
+  font-size: 16px;
+  color: #E8BB03;
 }

static/directives/repo-view/repo-panel-settings.html

@@ -4,7 +4,7 @@
     <!-- User/Team Permissions -->
     <div class="co-panel">
       <div class="co-panel-heading"><i class="fa fa-key"></i> User and Robot Permissions</div>
-      <div class="panel-body">
+      <div class="panel-body" style="padding-top: 5px;">
         <div class="repository-permissions-table" repository="repository"></div>
       </div>
     </div>
@@ -12,7 +12,7 @@
     <!-- Access Tokens (DEPRECATED) -->
     <div class="co-panel" ng-show="hasTokens">
       <div class="co-panel-heading"><i class="fa fa-key"></i> Access Token Permissions</div>
-      <div class="panel-body">
+      <div class="panel-body" style="padding-top: 5px;">
         <div class="repository-tokens-table" repository="repository" has-tokens="hasTokens"></div>
       </div>
     </div>

static/directives/repository-permissions-table.html

@@ -2,7 +2,7 @@
   <div class="resource-view"
        resources="[permissionResources.team, permissionResources.user]"
        error-message="'Could not load repository permissions'">
-      <table class="co-table permissions">
+      <table class="co-table no-lines permissions">
         <thead>
           <tr>
             <td>Account Name</td>
@@ -12,7 +12,10 @@
         </thead>
 
         <!-- Team Permissions -->
-        <tr ng-repeat="(name, permission) in permissionResources.team.value">
+        <tr class="co-table-header-row" ng-if="permissionResources.team.value">
+          <td colspan="3"><i class="fa fa-group"></i> Team Permissions</td>
+        </tr>
+        <tr class="indented-row" ng-repeat="(name, permission) in permissionResources.team.value">
           <td class="team entity">
             <span class="entity-reference" namespace="repository.namespace"
                   entity="buildEntityForPermission(name, permission, 'team')"
@@ -33,12 +36,18 @@
         </tr>
 
         <!-- User Permissions -->
-        <tr ng-repeat="(name, permission) in permissionResources.user.value">
-          <td class="{{ 'user entity ' + (permission.is_org_member ? '' : 'outside') }}">
+        <tr class="co-table-header-row" ng-if="permissionResources.user.value">
+          <td colspan="3"><i class="fa fa-user"></i>  User and Robot Account Permissions</td>
+        </tr>
+        <tr class="indented-row" ng-repeat="(name, permission) in permissionResources.user.value">
+          <td class="user-permission-entity">
             <span class="entity-reference" namespace="repository.namespace"
                   entity="buildEntityForPermission(name, permission, 'user')"
                   avatar-size="24">
             </span>
+            <i class="fa fa-exclamation-triangle outside-org"
+               ng-if="permission.is_org_member === false"
+               data-title="This user is not a member of the organization" bs-tooltip></i>
           </td>
           <td class="user-permissions">
             <div class="btn-group btn-group-sm">
@@ -54,6 +63,8 @@
           </td>
         </tr>
 
+        <tr class="add-row-spacer"><td colspan="3"></td></tr>
+
         <tr class="add-row">
           <td id="add-entity-permission" class="admin-search">
             <span class="entity-search" namespace="repository.namespace"

static/partials/org-admin.html

@@ -43,7 +43,6 @@
             <div class="panel-content" style="padding-left: 20px; margin-top: 10px;">
               <form class="form-change" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()" data-trigger="manual"
                       data-content="{{ changeEmailError }}" data-placement="bottom" ng-show="!updatingOrganization">
-                <span class="avatar" size="24" email="organizationEmail" name="orgname"></span>
                 <input type="email" class="form-control" ng-model="organizationEmail"
                        style="margin-left: 10px; margin-right: 10px; width: 400px; display: inline-block;" required>
                 <button class="btn btn-primary" type="submit" ng-disabled="changeEmailForm.$invalid || organizationEmail == organization.email">