Switch avatars to be built out of CSS and only overlayed with the gravatar when a non-default exists

static/directives/anchor.html

@@ -0,0 +1,4 @@
+<span class="anchor-element">
+  <a ng-href="{{ href }}" ng-show="href && !isOnlyText"><span ng-transclude></span></a>
+  <span ng-show="!href || isOnlyText"><span ng-transclude></span></span>
+</span>

static/directives/application-info.html

@@ -1,6 +1,6 @@
 <div class="application-info-element" style="padding-bottom: 18px">
   <div class="auth-header">
-    <span class="avatar" size="48" hash="application.avatar"></span>
+    <span class="avatar" size="48" data="application.avatar"></span>
     <h2><a href="{{ application.url }}" target="_blank">{{ application.name }}</a></h2>
     <h4>
       {{ application.organization.name }}

static/directives/avatar.html

@@ -1 +1,12 @@
-<img class="avatar-element" ng-src="{{ AvatarService.getAvatar(_hash, size) }}">
+<span class="avatar-element"
+      ng-style="{'width': size, 'height': size, 'backgroundColor': data.color, 'fontSize': fontSize, 'lineHeight': lineHeight}"
+      ng-class="data.kind">
+  <img ng-src="//www.gravatar.com/avatar/{{ data.hash }}?d=404&size={{ size }}"
+       ng-if="loadGravatar"
+       ng-show="hasGravatar"
+       ng-image-watch="imageCallback">
+  <span class="default-avatar" ng-if="!isLoading && !hasGravatar">
+    <span class="letter" ng-if="data.kind != 'team' || data.name != 'owners'">{{ data.name.charAt(0).toUpperCase() }}</span>
+    <span class="letter" ng-if="data.kind == 'team' && data.name == 'owners'">&Omega;</span>
+  </span>
+</span>

static/directives/build-info-bar.html

@@ -15,4 +15,4 @@
 
   <div class="triggered-build-description" build="build" ng-if="build.trigger"></div>
   <div ng-if="!build.trigger">Manually Started Build</div>
-</div>
+</div>

static/directives/build-logs-view.html

@@ -36,4 +36,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

static/directives/build-mini-status.html

@@ -19,4 +19,4 @@
 
    <div class="build-description triggered-build-description" build="build"></div>
   </div>
-</span>
+</span>

static/directives/cor-checkable-item.html

@@ -1,3 +1,3 @@
 <span class="co-checkable-item" ng-click="toggleItem()"
       ng-class="controller.isChecked(item, controller.checked) ? 'checked': 'not-checked'">
-</span>
+</span>

static/directives/cor-checkable-menu-item.html

@@ -1 +1 @@
-<li><a href="javascript:void(0)" ng-click="selected()"><span ng-transclude/></a></li>
+<li><a href="javascript:void(0)" ng-click="selected()"><span ng-transclude/></a></li>

static/directives/cor-checkable-menu.html

@@ -9,4 +9,4 @@
     </span>
     <ul class="dropdown-menu" ng-transclude></ul>
   </span>
-</span>
+</span>

static/directives/cor-confirm-dialog.html

@@ -22,4 +22,4 @@
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
-</div>
+</div>

static/directives/cor-floating-bottom-bar.html

@@ -1,3 +1,3 @@
 <div class="co-floating-bottom-bar">
     <span ng-transclude/>
-</div>
+</div>

static/directives/cor-loader-inline.html

@@ -2,4 +2,4 @@
   <div class="co-m-loader-dot__one"></div>
   <div class="co-m-loader-dot__two"></div>
   <div class="co-m-loader-dot__three"></div>
-</div>
+</div>

static/directives/cor-loader.html

@@ -2,4 +2,4 @@
   <div class="co-m-loader-dot__one"></div>
   <div class="co-m-loader-dot__two"></div>
   <div class="co-m-loader-dot__three"></div>
-</div>
+</div>

static/directives/cor-log-box.html

@@ -8,4 +8,4 @@
   <div class="co-log-viewer-new-logs" ng-show="hasNewLogs" ng-click="moveToBottom()">
     New Logs <i class="fa fa-lg fa-arrow-circle-down"></i>
   </div>
-</div>
+</div>

static/directives/cor-option.html

@@ -1,3 +1,3 @@
 <li>
     <a href="javascript:void(0)" ng-click="optionClick()" ng-transclude></a>
-</li>
+</li>

static/directives/cor-options-menu.html

@@ -3,4 +3,4 @@
     <i class="fa fa-gear fa-lg dropdown-toggle" data-toggle="dropdown" data-title="Options" bs-tooltip></i>
     <ul class="dropdown-menu pull-right" ng-transclude></ul>
   </div>
-</span>
+</span>

static/directives/cor-step-bar.html

@@ -1,3 +1,3 @@
 <div class="co-step-bar">
     <span class="transclude" ng-transclude/>
-</div>
+</div>

static/directives/cor-step.html

@@ -3,4 +3,4 @@
       <span class="text" ng-if="text">{{ text }}</span>
       <i class="fa fa-lg" ng-if="icon" ng-class="'fa-' + icon"></i>
   </span>
-</span>
+</span>

static/directives/cor-tab-content.html

@@ -1 +1 @@
-<div class="co-tab-content tab-content col-md-11" ng-transclude></div>
+<div class="co-tab-content tab-content col-md-11" ng-transclude></div>

static/directives/cor-tab-panel.html

@@ -1,3 +1,3 @@
 <div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
     <div class="co-tab-container" ng-transclude></div>
-</div>
+</div>

static/directives/cor-tab.html

@@ -10,4 +10,4 @@
              <span ng-transclude/></span>
         </span>
     </a>
-</li>
+</li>

static/directives/cor-tabs.html

@@ -1 +1 @@
-<ul class="co-tabs col-md-1" ng-transclude></ul>
+<ul class="co-tabs col-md-1" ng-transclude></ul>

static/directives/cor-title-action.html

@@ -1,3 +1,3 @@
 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-1">
   <span class="co-nav-title-action co-fx-text-shadow" ng-transclude></span>
-</div>
+</div>

static/directives/cor-title-content.html

@@ -1,3 +1,3 @@
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
   <h2 class="co-nav-title-content co-fx-text-shadow" ng-transclude></h2>
-</div>
+</div>

static/directives/cor-title-link.html

@@ -1 +1 @@
-<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" ng-transclude></div>
+<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" ng-transclude></div>

static/directives/entity-reference.html

@@ -1,38 +1,3 @@
 <span class="entity-reference-element">
-  <span ng-if="entity.kind == 'team'">
-    <i class="fa fa-group" data-title="Team" bs-tooltip="tooltip.title" data-container="body"></i>
-    <span class="entity-name">
-      <span ng-if="!getIsAdmin(namespace)">{{entity.name}}</span>
-      <span ng-if="getIsAdmin(namespace)"><a href="/organization/{{ namespace }}/teams/{{ entity.name }}">{{entity.name}}</a></span>
-    </span>
-  </span>
-  <span ng-if="entity.kind == 'org'">
-    <span class="avatar" size="avatarSize || 16" hash="entity.avatar"></span>
-    <span class="entity-name">
-      <span ng-if="!getIsAdmin(entity.name)">{{entity.name}}</span>
-      <span ng-if="getIsAdmin(entity.name)"><a href="/organization/{{ entity.name }}">{{entity.name}}</a></span>
-    </span>
-  </span>
-  <span ng-if="entity.kind != 'team' && entity.kind != 'org'">
-    <span class="avatar" size="avatarSize || 16" hash="entity.avatar" ng-if="showAvatar == 'true' && entity.avatar"></span>
-    <span ng-if="showAvatar != 'true' || !entity.avatar">
-      <i class="fa fa-user" ng-show="!entity.is_robot" data-title="User" bs-tooltip="tooltip.title" data-container="body"></i>
-      <i class="fa fa-wrench" ng-show="entity.is_robot" data-title="Robot Account" bs-tooltip="tooltip.title" data-container="body"></i>
-    </span>
-
-    <span class="entity-name" ng-if="entity.is_robot">
-      <a href="{{ getRobotUrl(entity.name) }}" ng-if="getIsAdmin(getPrefix(entity.name))">
-        <span class="prefix">{{ getPrefix(entity.name) }}+</span><span>{{ getShortenedName(entity.name) }}</span>
-      </a>
-      <span ng-if="!getIsAdmin(getPrefix(entity.name))">
-        <span class="prefix">{{ getPrefix(entity.name) }}+</span><span>{{ getShortenedName(entity.name) }}</span>
-      </span>
-    </span>
-    <span class="entity-name" ng-if="!entity.is_robot">
-      <span>{{getShortenedName(entity.name)}}</span>
-    </span>
-  </span>
-  <i class="fa fa-exclamation-triangle" ng-if="entity.is_org_member === false"
-     data-title="This user is not a member of the organization" bs-tooltip="tooltip.title" data-container="body">
-  </i>
+  <span quay-include="{'Config.isNewLayout()': 'directives/new-entity-reference.html', '!Config.isNewLayout()': 'directives/old-entity-reference.html'}"></span>
 </span>

static/directives/entity-search.html

@@ -6,12 +6,26 @@
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" ng-class="pullRight == 'true' ? 'pull-right': ''" role="menu" aria-labelledby="entityDropdownMenu">
-      <li ng-show="lazyLoading" style="padding: 10px"><div class="quay-spinner"></div></li>
+      <li ng-show="lazyLoading" style="padding: 10px"><div class="cor-loader"></div></li>
 
       <li role="presentation" class="dropdown-header" ng-show="!lazyLoading && !robots && !isAdmin && !teams">
         You do not have permission to manage teams and robots for this organization
       </li>
 
+      <li role="presentation" ng-show="includeTeams && isOrganization && !lazyLoading && isAdmin">
+        <a role="menuitem" class="new-action" tabindex="-1" href="javascript:void(0)" ng-click="createTeam()">
+          <i class="fa fa-group"></i> Create team
+        </a>
+      </li>
+      <li role="presentation" ng-show="includeRobots && !lazyLoading && isAdmin">
+        <a role="menuitem" class="new-action" tabindex="-1" href="javascript:void(0)" ng-click="createRobot()">
+          <i class="fa fa-wrench"></i>
+          Create robot account
+        </a>
+      </li>
+
+      <li role="presentation" class="divider" ng-show="!lazyLoading && robots && isAdmin"></li>
+
       <li role="presentation" class="dropdown-header"
           ng-show="!lazyLoading && !teams.length && !robots.length && !((includeTeams && isOrganization && isAdmin) || (includeRobots && isAdmin))">
         <span ng-if="includeRobots && includeTeams && isOrganization">
@@ -35,34 +49,29 @@
         </span>
       </li>
 
-      <li role="presentation" ng-repeat="team in teams" ng-show="!lazyLoading"
-          ng-click="setEntity(team.name, 'team', false)">
+      <li role="presentation" class="dropdown-header" ng-show="!lazyLoading && teams">Teams</li>
+
+      <li class="menuitem" role="presentation" ng-repeat="team in teams" ng-show="!lazyLoading"
+          ng-click="setEntity(team.name, 'team', false, team.avatar)">
         <a role="menuitem" tabindex="-1" href="javascript:void(0)">
-          <i class="fa fa-group"></i> <span>{{ team.name }}</span>
+          <span ng-if="!Config.isNewLayout()">
+            <i class="fa fa-group"></i> <span>{{ team.name }}</span>
+          </span>
+          <span ng-if="Config.isNewLayout()">
+            <span class="avatar" data="team.avatar" size="16"></span> <span>{{ team.name }}</span>
+          </span>
         </a>
       </li>
 
       <li role="presentation" class="divider" ng-show="!lazyLoading && teams && (isAdmin || robots)"></li>
 
-      <li role="presentation" ng-repeat="robot in robots" ng-show="!lazyLoading">
+      <li role="presentation" class="dropdown-header" ng-show="!lazyLoading && robots">Robot Accounts</li>
+
+      <li class="menuitem" role="presentation" ng-repeat="robot in robots" ng-show="!lazyLoading">
         <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="setEntity(robot.name, 'user', true)">
           <i class="fa fa-wrench"></i> <span>{{ robot.name }}</span>
         </a>
       </li>
-
-      <li role="presentation" class="divider" ng-show="!lazyLoading && robots && isAdmin"></li>
-
-      <li role="presentation" ng-show="includeTeams && isOrganization && !lazyLoading && isAdmin">
-        <a role="menuitem" class="new-action" tabindex="-1" href="javascript:void(0)" ng-click="createTeam()">
-          <i class="fa fa-group"></i> Create team
-        </a>
-      </li>
-      <li role="presentation" ng-show="includeRobots && !lazyLoading && isAdmin">
-        <a role="menuitem" class="new-action" tabindex="-1" href="javascript:void(0)" ng-click="createRobot()">
-          <i class="fa fa-wrench"></i>
-          Create robot account
-        </a>
-      </li>
     </ul>
   </div>
 </span>

static/directives/fetch-tag-dialog.html

@@ -67,4 +67,4 @@
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
-</div>
+</div>

static/directives/filter-control.html

@@ -1,3 +1,3 @@
 <span class="filter-control-element" ng-class="filter == value ? 'selected': 'not-selected'">
   <a href="javascript:void(0)" ng-click="setFilter()"><span ng-transclude/></a>
-</span>
+</span>

static/directives/header-bar.html

@@ -23,7 +23,7 @@
   <ul class="nav navbar-nav navbar-right visible-xs" ng-switch on="user.anonymous">
     <li ng-switch-when="false">
       <a href="/user/" class="user-view" target="{{ appLinkTarget() }}">
-        <span class="avatar" size="32" hash="user.avatar"></span>
+        <span class="avatar" size="32" data="user.avatar"></span>
         {{ user.username }}
       </a>
     </li>
@@ -48,7 +48,7 @@
 
     <li class="dropdown" ng-switch-when="false">
       <a href="javascript:void(0)" class="dropdown-toggle user-dropdown user-view" data-toggle="dropdown">
-        <span class="avatar" size="32" hash="user.avatar"></span>
+        <span class="avatar" size="32" data="user.avatar"></span>
         {{ user.username }}
         <span class="notifications-bubble"></span>
         <b class="caret"></b>

static/directives/image-changes-view.html

@@ -30,4 +30,4 @@
       </span>
     </div>
   </div>
-</div>
+</div>

static/directives/image-info-sidebar.html

@@ -102,4 +102,4 @@
            has-changes="hasImageChanges"></div>
     </span>
   </div>
-</div>
+</div>

static/directives/image-view-layer.html

@@ -12,4 +12,4 @@
   </div>
   <div class="image-layer-dot"></div>
   <div class="image-layer-line"></div>
-</div>
+</div>

static/directives/namespace-selector.html

@@ -1,19 +1,19 @@
 <span class="namespace-selector-dropdown">
   <span ng-show="user.organizations.length == 0">
-    <span class="avatar" size="24" hash="user.avatar"></span>
+    <span class="avatar" size="24" data="user.avatar"></span>
     <span class="namespace-name">{{user.username}}</span>
   </span>
 
   <div class="btn-group" ng-show="user.organizations.length > 0">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-    <span class="avatar" size="16" hash="namespaceObj.avatar"></span>
+    <span class="avatar" size="16" data="namespaceObj.avatar"></span>
     {{namespace}} <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li class="namespace-item" ng-repeat="org in user.organizations"
         ng-class="(requireCreate && !namespaces[org.name].can_create_repo) ? 'disabled' : ''">
       <a class="namespace" href="javascript:void(0)" ng-click="setNamespace(org)">
-        <span class="avatar" size="24" hash="org.avatar"></span>
+        <span class="avatar" size="24" data="org.avatar"></span>
         <span class="namespace-name">{{ org.name }}</span>
       </a>
 
@@ -25,7 +25,7 @@
     <li class="divider"></li>
     <li>
       <a class="namespace" href="javascript:void(0)" ng-click="setNamespace(user)">
-        <span class="avatar" size="24" hash="user.avatar"></span>
+        <span class="avatar" size="24" data="user.avatar"></span>
         <span class="namespace-name">{{ user.username }}</span>
       </a>
     </li>

static/directives/new-entity-reference.html

@@ -0,0 +1,40 @@
+<span class="new-entity-reference" data-title="{{ getTitle(entity) }} {{ entity.name }}" bs-tooltip>
+  <span ng-switch on="entity.kind">
+    <!-- Team -->
+    <span ng-switch-when="team">
+      <span class="avatar" data="entity.avatar" size="avatarSize || 16"></span>
+      <span class="entity-name anchor"
+            href="/organization/{{ namespace }}/teams/{{ entity.name }}"
+            is-only-text="!getIsAdmin(namespace)">
+            {{ entity.name }}
+      </span>
+    </span>
+
+    <!-- Organization -->
+    <span ng-switch-when="org">
+      <span class="avatar" size="avatarSize || 16" data="entity.avatar"></span>
+      <span class="entity-name anchor" href="/organization/{{ entity.name }}"
+            is-only-text="!getIsAdmin(entity.name)">
+      </span>
+    </span>
+
+    <!-- User or Robot -->
+    <span ng-switch-when="user">
+      <!-- User -->
+      <span ng-if="!entity.is_robot">
+        <span class="avatar" size="avatarSize || 16" data="entity.avatar"></span>
+        <span class="entity-name">{{ entity.name }}</span>
+      </span>
+
+      <!-- Robot -->
+      <span ng-if="entity.is_robot">
+        <i class="fa fa-lg fa-wrench"></i>
+        <span class="entity-name anchor" href="{{ getRobotUrl(entity.name) }}"
+              is-only-text="!getIsAdmin(getPrefix(entity.name))">
+          <span class="prefix">{{ getPrefix(entity.name) }}+</span>
+          <span>{{ getShortenedName(entity.name) }}</span>
+        </span>
+      </span>
+    </span>
+  </span>
+</span>

static/directives/notification-view.html

@@ -3,7 +3,7 @@
     <div class="circle" ng-class="getClass(notification)"></div>
     <div class="message" ng-bind-html="getMessage(notification)"></div>
     <div class="orginfo" ng-if="notification.organization">
-      <span class="avatar" size="24" hash="getAvatar(notification.organization)"></span>
+      <span class="avatar" size="24" data="getAvatar(notification.organization)"></span>
       <span class="orgname">{{ notification.organization }}</span>
     </div>
   </div>

static/directives/old-entity-reference.html

@@ -0,0 +1,39 @@
+<!-- DEPRECATED! -->
+<span class="old-entity-reference">
+  <span ng-if="entity.kind == 'team'">
+    <i class="fa fa-group" data-title="Team" bs-tooltip="tooltip.title" data-container="body"></i>
+    <span class="entity-name">
+      <span ng-if="!getIsAdmin(namespace)">{{entity.name}}</span>
+      <span ng-if="getIsAdmin(namespace)"><a href="/organization/{{ namespace }}/teams/{{ entity.name }}">{{entity.name}}</a></span>
+    </span>
+  </span>
+  <span ng-if="entity.kind == 'org'">
+    <span class="avatar" size="avatarSize || 16" data="entity.avatar"></span>
+    <span class="entity-name">
+      <span ng-if="!getIsAdmin(entity.name)">{{entity.name}}</span>
+      <span ng-if="getIsAdmin(entity.name)"><a href="/organization/{{ entity.name }}">{{entity.name}}</a></span>
+    </span>
+  </span>
+  <span ng-if="entity.kind != 'team' && entity.kind != 'org'">
+    <span class="avatar" size="avatarSize || 16" data="entity.avatar" ng-if="showAvatar == 'true' && entity.avatar"></span>
+    <span ng-if="showAvatar != 'true' || !entity.avatar">
+      <i class="fa fa-user" ng-show="!entity.is_robot" data-title="User" bs-tooltip="tooltip.title" data-container="body"></i>
+      <i class="fa fa-wrench" ng-show="entity.is_robot" data-title="Robot Account" bs-tooltip="tooltip.title" data-container="body"></i>
+    </span>
+
+    <span class="entity-name" ng-if="entity.is_robot">
+      <a href="{{ getRobotUrl(entity.name) }}" ng-if="getIsAdmin(getPrefix(entity.name))">
+        <span class="prefix">{{ getPrefix(entity.name) }}+</span><span>{{ getShortenedName(entity.name) }}</span>
+      </a>
+      <span ng-if="!getIsAdmin(getPrefix(entity.name))">
+        <span class="prefix">{{ getPrefix(entity.name) }}+</span><span>{{ getShortenedName(entity.name) }}</span>
+      </span>
+    </span>
+    <span class="entity-name" ng-if="!entity.is_robot">
+      <span>{{getShortenedName(entity.name)}}</span>
+    </span>
+  </span>
+  <i class="fa fa-exclamation-triangle" ng-if="entity.is_org_member === false"
+     data-title="This user is not a member of the organization" bs-tooltip="tooltip.title" data-container="body">
+  </i>
+</span>

static/directives/organization-header.html

@@ -1,5 +1,5 @@
 <div class="organization-header-element">
-  <span class="avatar" size="24" hash="organization.avatar"></span>
+  <span class="avatar" size="24" data="organization.avatar"></span>
   <span class="organization-name" ng-show="teamName || clickable">
     <a href="/organization/{{ organization.name }}">{{ organization.name }}</a>
   </span>

static/directives/ps-usage-graph.html

@@ -72,4 +72,4 @@
     <h4>Network Usage (Bytes)</h4>
     <div class="realtime-line-chart" data="data.count.network" labels="['Bytes In', 'Bytes Out']" counter="counter"></div>
   </div>
-</div>
+</div>

static/directives/quay-service-status-bar.html

@@ -10,4 +10,4 @@
      <i class="fa fa-calendar" style="margin-right: 6px;"></i>
      <a ng-href="{{ scheduled.shortlink }}" class="quay-service-status-description">{{ scheduled.name }}</a>
   </div>
-</div>
+</div>

static/directives/quay-service-status.html

@@ -3,4 +3,4 @@
         ng-if="indicator != 'loading'"></span>
   <span class="cor-loader-inline" ng-if="indicator == 'loading'"></span>
   <a href="http://status.quay.io" class="quay-service-status-description">{{ description }}</a>
-</span>
+</span>

static/directives/realtime-area-chart.html

@@ -3,4 +3,4 @@
         <div class="chart"></div>
     </div>
     <div class="cor-loader-inline" ng-if="counter < 1"></div>
-</div>
+</div>

static/directives/realtime-line-chart.html

@@ -3,4 +3,4 @@
         <div class="chart"></div>
     </div>
     <div class="cor-loader-inline" ng-if="counter < 1"></div>
-</div>
+</div>

static/directives/repo-list-grid.html

@@ -8,7 +8,7 @@
         Starred
       </div>
       <div ng-if="!starred" class="repo-list-title">
-        <span class="avatar" size="24" hash="namespace.avatar"></span>
+        <span class="avatar" size="24" data="namespace.avatar"></span>
         <span ng-if="!isOrganization(namespace.name)">{{ namespace.name }}</span>
         <a ng-if="isOrganization(namespace.name)"
            href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>

static/directives/repo-star.html

@@ -2,4 +2,4 @@
   <i ng-class="repository.is_starred ? 'starred fa fa-star' : 'fa fa-star-o'"
      class="star-icon" ng-click="toggleStar()">
   </i>
-</span>
+</span>

static/directives/repository-events-table.html

@@ -72,4 +72,4 @@
        repository="repository"
        counter="showNewNotificationCounter"
        notification-created="handleNotificationCreated(notification)"></div>
-</div>
+</div>

static/directives/repository-permissions-table.html

@@ -15,7 +15,8 @@
         <tr ng-repeat="(name, permission) in permissionResources.team.value">
           <td class="team entity">
             <span class="entity-reference" namespace="repository.namespace"
-                  entity="buildEntityForPermission(name, permission, 'team')">
+                  entity="buildEntityForPermission(name, permission, 'team')"
+                  avatar-size="24">
             </span>
           </td>
           <td class="user-permissions">
@@ -35,7 +36,8 @@
         <tr ng-repeat="(name, permission) in permissionResources.user.value">
           <td class="{{ 'user entity ' + (permission.is_org_member ? '' : 'outside') }}">
             <span class="entity-reference" namespace="repository.namespace"
-                  entity="buildEntityForPermission(name, permission, 'user')">
+                  entity="buildEntityForPermission(name, permission, 'user')"
+                  avatar-size="24">
             </span>
           </td>
           <td class="user-permissions">
@@ -79,4 +81,4 @@
        dialog-action-title="Grant Permission">
       The selected user is outside of your organization. Are you sure you want to grant the user access to this repository?
   </div>
-</div>
+</div>

static/directives/repository-tokens-table.html

@@ -32,4 +32,4 @@
         </tbody>
       </table>
   </div>
-</div>
+</div>

static/directives/source-commit-link.html

@@ -1,4 +1,4 @@
 <span class="source-commit-link-elememt">
   <i class="fa fa-dot-circle-o" data-title="Commit" data-container="body" bs-tooltip></i>
   <a ng-href="{{ getUrl(commitSha, urlTemplate) }}" target="_blank">{{ commitSha.substring(0, 8) }}</a>
-</span>
+</span>

static/directives/source-ref-link.html

@@ -12,4 +12,4 @@
       <a ng-href="{{ getUrl(ref, tagTemplate, 'tag') }}" target="_blank">{{ getTitle(ref) }}</a>
     </span>
   </span>
-</span>
+</span>

static/directives/tag-operations-dialog.html

@@ -84,4 +84,4 @@
       The following images and any other images not referenced by a tag will be deleted:
     </div>
   </div>
-</div>
+</div>

static/directives/teams-manager.html

@@ -1,31 +1,62 @@
 <div class="teams-manager-element">
+  <div class="manager-header">
     <span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'"
-          submitted="createTeam(value)">
+          submitted="createTeam(value)" ng-show="organization.is_admin">
       <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
     </span>
     <h3>Teams</h3>
+  </div>
 
-    <div class="team-listing" ng-repeat="(name, team) in organization.teams">
-      <div id="team-{{name}}" class="row">
-        <div class="col-sm-7 col-md-8">
-          <div class="team-title">
-            <i class="fa fa-group"></i>
-            <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>
+  <div class="row hidden-xs">
+    <div class="col-md-4 col-md-offset-8 col-sm-5 col-sm-offset-7 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>
 
-          <div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
+  <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>
 
-        <div class="col-sm-5 col-md-4 control-col" ng-show="organization.is_admin">
-          <span class="role-group" current-role="team.role" role-changed="setRole(role, team.name)" roles="teamRoles"></span>
-          <button class="btn btn-sm btn-danger" ng-click="askDeleteTeam(team.name)">Delete</button>
+        <div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
+
+        <div class="team-member-list" 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 | limitTo: 25">
+            <span data-title="{{ member.name }}" bs-tooltip>
+              <span class="avatar" data="member.avatar" size="26" ng-if="!member.is_robot"></span>
+              <i class="fa fa-wrench fa-lg" ng-if="member.is_robot"></i>
+            </span>
+          </span>
+          <span class="team-member-more"
+                ng-if="members[team.name].members.length > 25">+ {{ members[team.name].members.length - 25 }} more team members.</span>
+          <span class="team-member-more"
+                ng-if="!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">
+        <span class="role-group" current-role="team.role" role-changed="setRole(role, team.name)" roles="teamRoles"></span>
+
+        <span class="cor-options-menu">
+          <span class="cor-option" option-click="askDeleteTeam(team.name)">
+            <i class="fa fa-times"></i> Delete Team {{ team.name }}
+          </span>
+        </span>
+      </div>
     </div>
   </div>
-</div>
+</div>

static/directives/triggered-build-description.html

@@ -62,4 +62,4 @@
   <!-- Unknown -->
   <span ng-switch-default></span>
 </span>
-</div>
+</div>