From faa45cc606d2904613ad358395c50bd7ce510496 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 31 Aug 2017 15:34:18 -0400
Subject: [PATCH] Align key toggle button to role dropdown in user team
 permissions modal

---
 .../rbac-user-team.partial.html               | 60 +++++++++----------
 awx/ui/client/src/access/add-rbac.block.less  |  9 +++
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html
index 23d6ed36b1..276184ec21 100644
--- a/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html
+++ b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html
@@ -98,11 +98,6 @@
                             2
                         </span>
                         <translate>Please assign roles to the selected resources</translate>
-                        <div class="AddPermissions-keyToggle btn"
-                            ng-class="{'is-active': showKeyPane}"
-                            ng-click="toggleKeyPane()" translate>
-                            Key
-                        </div>
                     </div>
                     <div class="Form-tabHolder">
                         <div class="Form-tab"
@@ -146,10 +141,25 @@
                             Organizations
                         </div>
                     </div>
-                    <div class="AddPermissions-keyPane"
-                        ng-show="showKeyPane">
-                        <div class="AddPermissions-keyRow"
-                            ng-repeat="key in keys[currentTab()]">
+                    <div class="AddPermissions-roleSet">
+                        <!-- role drop-downs -->
+                        <div class="AddPermissions-roleSet-dropdown" ng-repeat="(type, roleSet) in keys"
+                            ng-show="tab[type] && showSection2Tab(type)">
+                            <select id="{{type}}-role-select" class="form-control"
+                            ng-model="roleSelection[type]"
+                            ng-options="key as value.name for (key , value) in roleSet">
+                                <option value="" selected hidden />
+                            </select>
+                        </div>
+                        <div class="AddPermissions-keyToggle btn"
+                            ng-class="{'is-active': showKeyPane}"
+                            ng-click="toggleKeyPane()" translate>
+                            Key
+                        </div>
+                    </div>
+
+                    <div class="AddPermissions-keyPane" ng-show="showKeyPane">
+                        <div class="AddPermissions-keyRow" ng-repeat="key in keys[currentTab()]">
                             <div class="AddPermissions-keyName">
                                 {{ key.name }}
                             </div>
@@ -158,29 +168,17 @@
                             </div>
                         </div>
                     </div>
+                </div>
 
-                    <!-- role drop-downs -->
-                    <div ng-repeat="(type, roleSet) in keys"
-                        ng-show="tab[type] && showSection2Tab(type)">
-                        <select
-                            id="{{type}}-role-select" class="form-control"
-                            ng-model="roleSelection[type]"
-                            ng-options="key as value.name for (key , value) in roleSet">
-                            <option value="" selected hidden />
-                        </select>
-                    </div>
-
-                    <!-- lists of selected resources -->
-                    <!-- (type, collection) => ('resource', {id: {}, ... }) -->
-                    <div ng-repeat="(type, collection) in allSelected">
-                        <rbac-selected-list
-                            resource-type="type"
-                            collection="collection"
-                            selected="allSelected"
-                            ng-show="tab[type]">
-                        </rbac-selected-list>
-                    </div>
-
+                <!-- lists of selected resources -->
+                <!-- (type, collection) => ('resource', {id: {}, ... }) -->
+                <div ng-repeat="(type, collection) in allSelected">
+                    <rbac-selected-list
+                        resource-type="type"
+                        collection="collection"
+                        selected="allSelected"
+                        ng-show="tab[type]">
+                    </rbac-selected-list>
                 </div>
                 <!-- end section 2 -->
             </div>
diff --git a/awx/ui/client/src/access/add-rbac.block.less b/awx/ui/client/src/access/add-rbac.block.less
index 177388c07e..1f9ea39ea2 100644
--- a/awx/ui/client/src/access/add-rbac.block.less
+++ b/awx/ui/client/src/access/add-rbac.block.less
@@ -220,3 +220,12 @@
 .AddPermissions-keyDescription {
     flex: 1 0 auto;
 }
+
+.AddPermissions-roleSet {
+    display: flex;
+
+    .AddPermissions-roleSet-dropdown {
+        flex: 1;
+        margin-right: 20px;
+    }
+}
\ No newline at end of file