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

static/css/core-ui.css

@@ -75,7 +75,7 @@
   }
 
   .co-nav-title .co-nav-title-content {
-    height: 28px;
+    height: 34px;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 22px;

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

@@ -19,3 +19,18 @@
   padding-top: 10px;
   border-top: 2px solid #eee;
 }
+
+.repository-permissions-table .mobile-add-row .add-button,
+.repository-permissions-table .mobile-add-row .role-group {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.repository-permissions-table .mobile-add-row .role-group .btn-group {
+  display: block;
+}
+
+.repository-permissions-table .mobile-add-row .role-group .btn-group .btn {
+  width: 100%;
+}

static/css/directives/ui/role-group.css

@@ -1,39 +1,39 @@
-.role-group .btn {
+.new-role-group .btn {
   width: 90px;
   position: relative;
   text-align: left;
 }
 
-.role-group .btn .caret {
+.new-role-group .btn .caret {
   position: absolute;
   top: 15px;
   right: 7px;
 }
 
-.role-group .role-help-text {
+.new-role-group .role-help-text {
   font-size: 12px;
   color: #ccc;
   margin-top: 4px;
   margin-bottom: 2px;
 }
 
-.role-group .btn {
+.new-role-group .btn {
   border-left: 4px solid #ccc;
 }
 
-.role-group .btn.success {
+.new-role-group .btn.success {
   border-left-color: #5cb85c;
 }
 
-.role-group .btn.primary {
+.new-role-group .btn.primary {
   border-left-color: #337ab7;
 }
 
-.role-group li a {
+.new-role-group li a {
   vertical-align: middle;
 }
 
-.role-group li a:before {
+.new-role-group li a:before {
   content: "";
   border-radius: 50%;
   width: 10px;
@@ -43,10 +43,10 @@
   margin-right: 6px;
 }
 
-.role-group li.success a:before {
+.new-role-group li.success a:before {
   background-color: #5cb85c;
 }
 
-.role-group li.primary a:before {
+.new-role-group li.primary a:before {
   background-color: #337ab7;
 }

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">
+<span quay-include="{'Config.isNewLayout()': 'directives/new-role-group.html', '!Config.isNewLayout()': 'directives/old-role-group.html'}"></span>
-  <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>

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">

static/js/directives/ui/role-group.js

@@ -13,10 +13,12 @@ angular.module('quay').directive('roleGroup', function () {
       'roles': '@roles',
       'currentRole': '=currentRole',
       'readOnly': '=readOnly',
-      'roleChanged': '&roleChanged'
+      'roleChanged': '&roleChanged',
+      'pullLeft': '@pullLeft'
     },
-    controller: function($scope, $element, RolesService) {
+    controller: function($scope, $element, RolesService, Config) {
       $scope.fullRoles = RolesService[$scope.roles];
+      $scope.Config = Config;
 
       $scope.setRole = function(role) {
         if ($scope.currentRole == role) { return; }