Merge pull request #7164 from marshmalien/fix/ux/blueSelectedBar

[UX] Add blue select border

awx/ui/client/legacy-styles/ansible-ui.less

@@ -1727,6 +1727,8 @@ tr td button i {
     padding: 0;
     border: none;
     margin-top: 0;
+    display: flex;
+    justify-content: flex-end;
 
     .btn.btn-primary {
       text-transform: uppercase;
@@ -1745,6 +1747,10 @@ tr td button i {
         border-color: @default-succ-disabled;
       }
     }
+
+    .btn + .btn {
+        margin: 0;
+    }
 }
 
 /* form navigation */

awx/ui/client/legacy-styles/lists.less

@@ -22,6 +22,7 @@ table, tbody {
     width: 100%;
     margin-top: 20px;
     table-layout: fixed;
+    overflow: hidden;
 }
 
 .List-tableHeader{
@@ -71,9 +72,8 @@ table, tbody {
     background-color: #f2f2f2;
 }
 
-.List-tableRow--selected,
+.List-tableRow--selected {
-.List-tableRow--selected > :first-child {
+    border-left: 10px solid @list-row-select-bord;
-    border-left: 5px solid @list-row-select-bord;
 }
 
 .List-tableRow--selected > :first-child {
@@ -353,6 +353,8 @@ table, tbody {
 .modal-body > .List-noItems {
     margin-top: 0px;
 }
+
+.List-actionButton--selected,
 .List-editButton--selected {
     background-color: @list-actn-bg-hov !important;
     color: @list-actn-icn-hov;

awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html

@@ -48,7 +48,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr ng-class="[host.active_class]" id="{{ host.id }}" class="List-tableRow host_class" ng-repeat="host in hosts track by host.id">
+                        <tr ng-class="{'List-tableRow--selected': $stateParams['host_id'] == host.id}" id="{{ host.id }}" class="List-tableRow host_class" ng-repeat="host in hosts track by host.id">
                             <td class="List-tableCell toggleHost-column List-staticColumn--toggle">
                                 <div class="ScheduleToggle" ng-class="{'is-on': host.enabled, 'ScheduleToggle--disabled': host.has_inventory_sources}" aw-tool-tip="<p>Indicates if a host is available and should be included in running jobs.</p><p>For hosts that are part of an external inventory, this flag cannot be changed. It will be set by the inventory sync process.</p>" data-placement="right" data-tip-watch="undefined">
                                     <button ng-disabled="host.has_inventory_sources" ng-show="host.enabled" class="ScheduleToggle-switch is-on" ng-click="toggleHost($event, host)" translate>ON</button>
@@ -74,10 +74,10 @@
                             </td>
                             <td class="List-actionsContainer">
                                 <div class="List-actionButtonCell List-tableCell">
-                                    <button id="insights-action" class="List-actionButton " data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="View Insights Data" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
+                                    <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="View Insights Data" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
                                         <i class="fa fa-info"></i>
                                     </button>
-                                    <button id="edit-action" class="List-actionButton " ng-class="{'List-editButton--selected' : $stateParams['host_id'] == host.id}" data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="Edit host" ng-show="host.summary_fields.user_capabilities.edit">
+                                    <button id="edit-action" class="List-actionButton " ng-class="{'List-editButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit') }" data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="Edit host" ng-show="host.summary_fields.user_capabilities.edit">
                                         <i class="fa fa-pencil"></i>
                                     </button>
                                     <button id="view-action" class="List-actionButton " data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="View host" ng-show="!host.summary_fields.user_capabilities.edit"><i class="fa fa-search-plus"></i>

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js

@@ -78,7 +78,8 @@ export default ['i18n', function(i18n) {
                 icon: 'fa-info',
                 awToolTip: i18n._('View Insights Data'),
                 dataPlacement: 'top',
-                ngShow: 'host.insights_system_id && host.summary_fields.inventory.hasOwnProperty("insights_credential_id")'
+                ngShow: 'host.insights_system_id && host.summary_fields.inventory.hasOwnProperty("insights_credential_id")',
+                ngClass: "{'List-actionButton--selected': $stateParams['host_id'] == host.id && $state.is('inventories.edit.hosts.edit.insights')}"
             },
             edit: {
                 ngClick: "editHost(host)",

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -296,6 +296,27 @@ export default ['$compile', 'Attr', 'Icon',
                 innerTable += options.mode === 'lookup' ? `<tbody ng-init="selection.${list.iterator} = {id: $parent.${list.iterator}, name: $parent.${list.iterator}_name}">` : `"<tbody>\n"`;
                 innerTable += "<tr ng-class=\"[" + list.iterator;
                 innerTable += (options.mode === 'lookup' || options.mode === 'select') ? ".success_class" : ".active_class";
+
+                let handleEditStateParams = function(stateParams){
+                    let matchingConditions = [];
+
+                    angular.forEach(stateParams, function(stateParam) {
+                        matchingConditions.push(`$stateParams['` + stateParam + `'] == ${list.iterator}.id`);
+                    });
+                    return matchingConditions;
+                };
+
+                if(list && list.fieldActions && list.fieldActions.edit && list.fieldActions.edit.editStateParams) {
+                    let matchingConditions = handleEditStateParams(list.fieldActions.edit.editStateParams);
+                    innerTable += `, {'List-tableRow--selected' : ${matchingConditions.join(' || ')}}`;
+                }
+                else if (list.iterator === 'inventory') {
+                    innerTable += `, {'List-tableRow--selected': ($stateParams['${list.iterator}_id'] == ${list.iterator}.id) || ($stateParams['smartinventory_id'] == ${list.iterator}.id)}`;
+                }
+                else {
+                    innerTable += `, {'List-tableRow--selected' : $stateParams['${list.iterator}_id'] == ${list.iterator}.id}`;
+                }
+
                 innerTable += (list.disableRow) ? `, {true: 'List-tableRow--disabled'}[${list.iterator}.pending_deletion]` : "";
 
                 if (list.multiSelect) {
@@ -364,16 +385,6 @@ export default ['$compile', 'Attr', 'Icon',
 
                     innerTable += "<td class=\"List-actionsContainer\"><div class=\"List-actionButtonCell List-tableCell\">";
 
-                    let handleEditStateParams = function(stateParams){
-                        let matchingConditions = [];
-
-                        angular.forEach(stateParams, function(stateParam) {
-                            matchingConditions.push(`$stateParams['` + stateParam + `'] == ${list.iterator}.id`);
-                        });
-
-                        return matchingConditions;
-                    };
-
                     for (field_action in list.fieldActions) {
                         if (field_action !== 'columnClass') {
                             if (list.fieldActions[field_action].type && list.fieldActions[field_action].type === 'DropDown') {
@@ -408,6 +419,12 @@ export default ['$compile', 'Attr', 'Icon',
                                         let matchingConditions = handleEditStateParams(list.fieldActions[field_action].editStateParams);
                                         innerTable += `ng-class="{'List-editButton--selected' : ${matchingConditions.join(' || ')}}"`;
                                     }
+                                    else if (list.iterator === 'inventory') {
+                                        innerTable += `ng-class="{'List-editButton--selected': ($stateParams['${list.iterator}_id'] == ${list.iterator}.id) || ($stateParams['smartinventory_id'] == ${list.iterator}.id)}"`;
+                                    }
+                                    else if (list.iterator === 'host') {
+                                        innerTable += `ng-class="{'List-editButton--selected': $stateParams['${list.iterator}_id'] == ${list.iterator}.id && $state.is('inventories.edit.hosts.edit') }"`;
+                                    }
                                     else {
                                         innerTable += `ng-class="{'List-editButton--selected' : $stateParams['${list.iterator}_id'] == ${list.iterator}.id}"`;
                                     }