Merge pull request #5241 from kensible/4617-search-action-buttons

Search bar width, action button placement

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 {

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;
+    }
 }

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: '@',

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.

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) {
+                    // Don't display an empty <div> if there is no listTitle
-                        html += "<div class=\"List-header\">";
+                    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';

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, #add-permissions-modal {
+    .SmartSearch-searchTermContainer {
+        width: 100%;
+    }
+}