From 24c681d47c5699b4310063a2f3810e27ac655987 Mon Sep 17 00:00:00 2001
From: Ken Hoes <khoes@ansible.com>
Date: Wed, 8 Feb 2017 09:44:55 -0500
Subject: [PATCH 1/2] Search bar width, action button placement

---
 awx/ui/client/legacy-styles/ansible-ui.less   | 10 ++++-
 awx/ui/client/legacy-styles/lists.less        |  9 ++++
 .../list/organizations-list.partial.html      | 21 +++++----
 awx/ui/client/src/shared/form-generator.js    | 12 +++---
 .../list-generator/list-generator.factory.js  | 43 +++++++++----------
 .../smart-search/smart-search.block.less      | 13 +++++-
 6 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index c5f2e91933..825576f8c8 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -921,7 +921,7 @@ input[type="checkbox"].checkbox-no-label {
 /* Display list actions next to search widget */
 .list-actions {
     text-align: right;
-    margin-bottom: 20px;
+    margin-bottom: -34px;
 
     .fa-lg {
         vertical-align: -8%;
@@ -1939,10 +1939,16 @@ tr td button i {
       padding-right: 15px;
   }
 
+
+
+}
+
+// lists.less uses 600px as the breakpoint, doing same for consistency
+@media (max-width: 600px) {
   .list-actions {
       text-align: left;
+      margin-bottom: 20px;
   }
-
 }
 
 .nvtooltip {
diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less
index eb0a50529b..4aa4f560c9 100644
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/awx/ui/client/legacy-styles/lists.less
@@ -153,10 +153,13 @@ table, tbody {
 .List-actionHolder {
     justify-content: flex-end;
     display: flex;
+    // margin-bottom: 20px;
+    // float: right;
 }
 
 .List-actions {
     display: flex;
+    margin-bottom: -32px;
 }
 
 .List-auxAction {
@@ -419,7 +422,13 @@ table, tbody {
         flex: 1 0 auto;
         margin-top: 12px;
     }
+    .List-actions {
+        margin-bottom: 20px;
+    }
     .List-well {
         margin-top: 20px;
     }
+    .List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
+        margin-left: 0;
+    }
 }
diff --git a/awx/ui/client/src/organizations/list/organizations-list.partial.html b/awx/ui/client/src/organizations/list/organizations-list.partial.html
index 9531107134..be2827632a 100644
--- a/awx/ui/client/src/organizations/list/organizations-list.partial.html
+++ b/awx/ui/client/src/organizations/list/organizations-list.partial.html
@@ -10,18 +10,21 @@
                     {{ orgCount }}
                 </span>
             </div>
-            <div class="List-actions">
-                <!-- &#43; ADD -->
-                <button class="btn List-buttonSubmit"
-                    aw-tool-tip="{{'Create a new organization'|translate}}"
-                    ng-show="canAdd"
-                    ng-click="addOrganization()" translate>
-                    + ADD
-                </button>
-            </div>
+
         </div>
 
         <div class="List-well">
+            <div class="List-actionHolder">
+                <div class="List-actions">
+                    <!-- &#43; ADD -->
+                    <button class="btn List-buttonSubmit"
+                        aw-tool-tip="{{'Create a new organization'|translate}}"
+                        ng-show="canAdd"
+                        ng-click="addOrganization()" translate>
+                        + ADD
+                    </button>
+                </div>
+            </div>
             <!-- smart-search directive bindings:
                 djangoModel: '@', // one-way, interpolated
                 searchSize: '@',
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 6d2809181e..656e50c4c4 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1852,6 +1852,12 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     width = "col-lg-8 col-md-8 col-sm-8 col-xs-12";
                 }
 
+                if(actionButtons.length>0){
+                    html += `<div class="list-actions">
+                            ${actionButtons}
+                        </div>`;
+                }
+                
                 // smart-search directive
                 html += `
                 <div
@@ -1869,11 +1875,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 </div>
                     `;
 
-                if(actionButtons.length>0){
-                    html += `<div class="list-actions">
-                            ${actionButtons}
-                        </div>`;
-                }
+
                 //html += "</div>";
 
                 // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
diff --git a/awx/ui/client/src/shared/list-generator/list-generator.factory.js b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
index 5b71dad641..4d6670e8b5 100644
--- a/awx/ui/client/src/shared/list-generator/list-generator.factory.js
+++ b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
@@ -133,21 +133,18 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
                     base, action, fld, cnt, field_action, fAction, itm;
 
                 if (options.mode !== 'lookup') {
-                    if (options.title !== false && list.title !== false) {
-                        html += "<div class=\"List-header\">";
+                    // Don't display an empty <div> if there is no listTitle
+                    if ((options.title !== false && list.title !== false) && list.listTitle !== undefined) {
+                        html += "<div class=\"List-header\" >";
                         html += "<div class=\"List-title\">";
-
                         if (list.listTitle && options.listTitle !== false) {
-
                             html += "<div class=\"List-titleText\">" + list.listTitle + "</div>";
                             // We want to show the list title badge by default and only hide it when the list config specifically passes a false flag
                             list.listTitleBadge = (typeof list.listTitleBadge === 'boolean' && list.listTitleBadge === false) ? false : true;
                             if (list.listTitleBadge) {
                                 html += `<span class="badge List-titleBadge">{{ ${list.iterator}_dataset.count }}</span>`;
                             }
-
                         }
-
                         html += "</div>";
                         if (options.cancelButton === true) {
                             html += "<div class=\"Form-exitHolder\">";
@@ -155,27 +152,10 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
                             html += "<i class=\"fa fa-times-circle\"></i>";
                             html += "</button></div>\n";
                         }
-                        html += "<div class=\"List-actionHolder\">";
-                        html += "<div class=\"List-actions\">";
-                        html += `<div ng-include="'${templateUrl('shared/list-generator/list-actions')}'">`;
-
-                        for (action in list.actions) {
-                            list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
-                        }
-
-                        html += "</div>";
-                        if (list.toolbarAuxAction) {
-                            html += "<div class=\"List-auxAction\">";
-                            html += list.toolbarAuxAction;
-                            html += "</div>";
-                        }
-                        html += "\n</div>";
-                        html += "</div>";
                         html += "</div>";
                     }
                 }
 
-
                 if (options.mode === 'edit' && list.editInstructions) {
                     html += "<div class=\"alert alert-info alert-block\">\n";
                     html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><i class=\"fa fa-times-circle\"></i></button>\n";
@@ -193,6 +173,23 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
                     html += `<div class="${list.name}List List-well">`;
                 }
 
+                // List actions
+                html += "<div class=\"List-actionHolder\">";
+                html += "<div class=\"List-actions\">";
+                html += `<div ng-include="'${templateUrl('shared/list-generator/list-actions')}'">`;
+
+                for (action in list.actions) {
+                    list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
+                }
+
+                html += "</div>";
+                if (list.toolbarAuxAction) {
+                    html += `<div class="List-auxAction">${list.toolbarAuxAction}</div>`;
+                }
+                html += "\n</div>";
+                html += "</div>";
+                // End list actions
+
                 html += (list.searchRowActions) ? "<div class='row'><div class=\"col-lg-8 col-md-8 col-sm-8 col-xs-12\">" : "";
                 if (list.searchRowActions && !list.searchSize) {
                     list.searchSize = 'col-lg-7 col-md-12 col-sm-12 col-xs-12';
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.block.less b/awx/ui/client/src/shared/smart-search/smart-search.block.less
index fee822d7c7..35e5472a9e 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.block.less
+++ b/awx/ui/client/src/shared/smart-search/smart-search.block.less
@@ -35,7 +35,7 @@
 
 .SmartSearch-searchTermContainer {
     flex: initial;
-    width: ~"calc(100% - 100px)";
+    width: 50%;
     border: 1px solid @d7grey;
     border-radius: 4px;
     display: flex;
@@ -158,7 +158,8 @@
     padding-top: 5px;
 }
 .SmartSearch-keyToggle {
-    margin-left: auto;
+    margin-right: auto;
+    margin-left: 12px;
     text-transform: uppercase;
     background-color: @default-bg;
     border-radius: 5px;
@@ -233,3 +234,11 @@
     padding: 0px 5px;
     margin-right: 5px;
 }
+
+
+// Additional modal specific styles
+.modal-body {
+    .SmartSearch-searchTermContainer {
+        width: 100%;
+    }
+}

From 3559a88c6b8e3db02fc258fcf7159645e5d494d5 Mon Sep 17 00:00:00 2001
From: Ken Hoes <khoes@ansible.com>
Date: Thu, 9 Feb 2017 11:21:55 -0500
Subject: [PATCH 2/2] Added permissions modal to 100% width

---
 awx/ui/client/src/shared/smart-search/smart-search.block.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui/client/src/shared/smart-search/smart-search.block.less b/awx/ui/client/src/shared/smart-search/smart-search.block.less
index 35e5472a9e..43eb62ea92 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.block.less
+++ b/awx/ui/client/src/shared/smart-search/smart-search.block.less
@@ -237,7 +237,7 @@
 
 
 // Additional modal specific styles
-.modal-body {
+.modal-body, #add-permissions-modal {
     .SmartSearch-searchTermContainer {
         width: 100%;
     }