shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

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

Browse Source 
[UX] Add blue select border
This commit is contained in:
Marliana Lara 2017-07-19 15:44:05 -04:00 committed by GitHub
commit f14efbce4e
5 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui/client/legacy-styles/ansible-ui.less
View File

@ -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 */

8
awx/ui/client/legacy-styles/lists.less
View File

@ -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 > :first-child {
border-left: 5px solid @list-row-select-bord;
.List-tableRow--selected {
border-left: 10px 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;

6
awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
View File

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

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

@ -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)",

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

@ -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}"`;
}