Finish work on the new role group and make sure it only appears when the new layout is enabled

static/directives/new-role-group.html

@@ -0,0 +1,16 @@
+<div class="new-role-group btn-group btn-group-sm">
+  <div class="dropdown" style="text-align: left;">
+  <button class="btn btn-default" ng-class="getRoleInfo(currentRole).kind" data-toggle="dropdown">
+    <span ng-if="currentRole" class="role-title">{{ getRoleInfo(currentRole).title }}</span>
+    <span ng-if="!currentRole">(Select)</span>
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" ng-class="pullLeft == 'true' ? '' : 'pull-right'">
+    <li ng-repeat="roleInfo in fullRoles" ng-class="roleInfo.kind">
+      <a href="javascript:void(0)" ng-click="setRole(roleInfo.id)">{{ roleInfo.title }}
+        <div class="role-help-text">{{ roleInfo.description }}</div>
+      </a>
+    </li>
+  </ul>
+  </div>
+</div>

static/directives/old-role-group.html

@@ -0,0 +1,6 @@
+<div class="btn-group btn-group-sm">
+  <button ng-repeat="role in fullRoles"
+          type="button" class="btn" ng-click="setRole(role.id)"
+          ng-class="(currentRole == role.id) ? ('active btn-' + role.kind) : 'btn-default'"
+          ng-disabled="readOnly">{{ role.title }}</button>
+</div>

static/directives/repository-permissions-table.html

@@ -122,14 +122,16 @@
         </tr>
       </table>
 
+      <!-- Mobile add permissions -->
       <div class="mobile-add-row" ng-if-media="'(max-width: 767px)'">
         <span class="entity-search" namespace="repository.namespace"
               placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
-              current-entity="addPermissionInfo.entity"></span>
+              current-entity="addPermissionInfo.entity"
+              pull-right="true"></span>
         <span class="role-group" current-role="addPermissionInfo.role"
               roles="repoRoles"
               role-changed="addPermissionInfo.role = role"></span>
-        <button class="btn btn-success" style="margin-left: 10px"
+        <button class="btn btn-success add-button"
                 ng-disabled="!addPermissionInfo.role || !addPermissionInfo.entity"
                 ng-click="addPermission()">
           Add Permission

static/directives/role-group.html

@@ -1,16 +1 @@
-<div class="btn-group btn-group-sm">
-  <div class="dropdown" style="text-align: left;">
-  <button class="btn btn-default" ng-class="getRoleInfo(currentRole).kind" data-toggle="dropdown">
-    <span ng-if="currentRole" class="role-title">{{ getRoleInfo(currentRole).title }}</span>
-    <span ng-if="!currentRole">(Select)</span>
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu pull-right">
-    <li ng-repeat="roleInfo in fullRoles" ng-class="roleInfo.kind">
-      <a href="javascript:void(0)" ng-click="setRole(roleInfo.id)">{{ roleInfo.title }}
-        <div class="role-help-text">{{ roleInfo.description }}</div>
-      </a>
-    </li>
-  </ul>
-  </div>
-</div>
+<span quay-include="{'Config.isNewLayout()': 'directives/new-role-group.html', '!Config.isNewLayout()': 'directives/old-role-group.html'}"></span>

static/directives/teams-manager.html

@@ -51,7 +51,7 @@
       </div>
 
       <div class="col-sm-5 col-md-4 control-col" ng-show="organization.is_admin">
-        <span class="role-group" current-role="team.role"
+        <span class="role-group" current-role="team.role" pull-left="true"
               role-changed="setRole(role, team.name)" roles="teamRoles"></span>
 
         <span class="cor-options-menu">