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

Merge pull request #714 from mabashian/list-view-and-delete-modal-fixes

Browse Source 
List view styling tweaks based on UI/UX feedback
This commit is contained in:
Michael Abashian 2016-01-26 13:42:53 -05:00
commit 2312c8dff8
26 changed files with 620 additions and 599 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2012,6 +2012,7 @@ button.dropdown-toggle,
.modal.fade .modal-dialog {
transform: translate(0, 0);
margin: 100px auto;
}
.modal-backdrop, .modal-backdrop.fade.in {

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

@ -81,12 +81,11 @@ table, tbody {
.List-actionButton {
font-size: 16px;
height: 30px;
width: 30px;
min-width: 30px;
color: @list-action-icon;
background-color: @list-actn-bg;
border: none;
border-radius: 50%;
transition: background-color 0.2s, border-color 0.2s;;
}
.List-actionButton:hover {
@ -108,6 +107,12 @@ table, tbody {
color: @list-pagin-text;
text-transform: uppercase;
height: 22px;
display: flex;
}
.List-paginationPagerHolder {
display: flex;
flex: 1 0 auto;
}
.List-paginationPager {
@ -128,13 +133,18 @@ table, tbody {
background-color: @list-pagin-bg-act!important;
}
.List-paginationItemsOf {
display: flex;
justify-content: flex-end;
}
.List-header {
align-items: center;
display: flex;
height: 34px;
}
.List-title {
align-items: center;
flex: 1 0 auto;
display: flex;
}
@ -163,7 +173,6 @@ table, tbody {
}
.List-buttonSubmit {
transition: background-color 0.2s;
background-color: @submit-button-bg;
color: @submit-button-text;
}
@ -175,7 +184,6 @@ table, tbody {
}
.List-buttonDefault {
transition: background-color 0.2s;
background-color: @btn-bg;
color: @btn-txt;
border-color: @btn-bord;
@ -235,6 +243,10 @@ table, tbody {
color: @list-srch-btn-icon;
}
.List-searchNoResults {
color: @default-interface-txt;
}
.List-noItems {
display: flex;
align-items: center;

2
awx/ui/client/src/controllers/Credentials.js
View File

@ -566,7 +566,7 @@ export function CredentialsEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});

2
awx/ui/client/src/controllers/Organizations.js
View File

@ -352,7 +352,7 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});

2
awx/ui/client/src/controllers/Projects.js
View File

@ -796,7 +796,7 @@ export function ProjectsEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});

2
awx/ui/client/src/controllers/Teams.js
View File

@ -429,7 +429,7 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});

2
awx/ui/client/src/controllers/Users.js
View File

@ -484,7 +484,7 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.username + ' ' + title + '?</div>',
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.username + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});

16
awx/ui/client/src/forms/Inventories.js
View File

@ -127,6 +127,14 @@ export default
awToolTip: 'Schedule future job template runs',
dataPlacement: 'top',
},
copy: {
label: 'Copy',
ngClick: "copyScanJobTemplate()",
"class": 'btn-danger btn-xs',
awToolTip: 'Copy template',
dataPlacement: 'top',
ngHide: 'job_template.summary_fields.can_copy === false'
},
edit: {
label: 'Edit',
ngClick: "editScanJob()",
@ -140,14 +148,6 @@ export default
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Delete the scan job template'
},
copy: {
label: 'Copy',
ngClick: "copyScanJobTemplate()",
"class": 'btn-danger btn-xs',
awToolTip: 'Copy template',
dataPlacement: 'top',
ngHide: 'job_template.summary_fields.can_copy === false'
}
}
}

4
awx/ui/client/src/forms/Organizations.js
View File

@ -87,7 +87,7 @@ export default
},
"delete": {
label: 'Delete',
ngClick: "delete('users', user.id, user.username, 'users')",
ngClick: "delete('users', user.id, user.username, 'user')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Remove user'
@ -133,7 +133,7 @@ export default
},
"delete": {
label: 'Delete',
ngClick: "delete('admins', admin.id, admin.username, 'administrators')",
ngClick: "delete('admins', admin.id, admin.username, 'administrator')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Remove administrator'

2
awx/ui/client/src/forms/Projects.js
View File

@ -261,7 +261,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
},
"delete": {
label: 'Delete',
ngClick: "delete('organizations', organization.id, organization.name, 'organizations')",
ngClick: "delete('organizations', organization.id, organization.name, 'organization')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Delete the organization'

8
awx/ui/client/src/forms/Teams.js
View File

@ -95,7 +95,7 @@ export default
},
"delete": {
label: 'Delete',
ngClick: "delete('credentials', credential.id, credential.name, 'credentials')",
ngClick: "delete('credentials', credential.id, credential.name, 'credential')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Remove the credential'
@ -157,7 +157,7 @@ export default
"delete": {
label: 'Delete',
ngClick: "delete('permissions', permission.id, permission.name, 'permissions')",
ngClick: "delete('permissions', permission.id, permission.name, 'permission')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Delete the permission',
@ -203,7 +203,7 @@ export default
},
"delete": {
label: 'Delete',
ngClick: "delete('projects', project.id, project.name, 'projects')",
ngClick: "delete('projects', project.id, project.name, 'project')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Remove the project'
@ -251,7 +251,7 @@ export default
},
"delete": {
label: 'Delete',
ngClick: "delete('users', user.id, user.username, 'users')",
ngClick: "delete('users', user.id, user.username, 'user')",
icon: 'icon-terash',
"class": 'btn-danger',
awToolTip: 'Remove user'

4
awx/ui/client/src/forms/Users.js
View File

@ -150,7 +150,7 @@ export default
},
"delete": {
label: 'Delete',
ngClick: "delete('credentials', credential.id, credential.name, 'credentials')",
ngClick: "delete('credentials', credential.id, credential.name, 'credential')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Delete the credential'
@ -212,7 +212,7 @@ export default
"delete": {
label: 'Delete',
ngClick: "delete('permissions', permission.id, permission.name, 'permissions')",
ngClick: "delete('permissions', permission.id, permission.name, 'permission')",
icon: 'icon-trash',
"class": 'btn-danger',
awToolTip: 'Delete the permission',

986
awx/ui/client/src/helpers/Hosts.js
View File

File diff suppressed because it is too large Load Diff

10
awx/ui/client/src/helpers/Jobs.js
View File

@ -476,11 +476,11 @@ export default
if (job.status === 'pending' || job.status === 'running' || job.status === 'waiting') {
url = job.related.cancel;
action_label = 'cancel';
hdr = 'Cancel Job';
hdr = 'Cancel';
} else {
url = job.url;
action_label = 'delete';
hdr = 'Delete Job';
hdr = 'Delete';
}
action = function () {
@ -537,11 +537,11 @@ export default
scope.removeCancelJob();
}
scope.removeCancelJob = scope.$on('CancelJob', function() {
var body;
body = (action_label === 'cancel' || job.status === 'new') ? "Submit the request to cancel" : "Delete";
var cancelBody = "<div class=\"Prompt-bodyQuery\">Submit the request to cancel?</div>";
var deleteBody = "<div class=\"Prompt-bodyQuery\">Are you sure you want to delete the job below?</div><div class=\"Prompt-bodyTarget\">#" + id + " " + job.name + "</div>";
Prompt({
hdr: hdr,
body: "<div class=\"Prompt-bodyQuery\">" + body + " job #" + id + " " + job.name + "?</div>",
body: (action_label === 'cancel' || job.status === 'new') ? cancelBody : deleteBody,
action: action,
actionText: (action_label === 'cancel' || job.status === 'new') ? "YES" : "DELETE"
});

22
awx/ui/client/src/lists/AllJobs.js
View File

@ -27,7 +27,7 @@ export default
},
status: {
label: 'Status',
columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-2',
columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
awToolTip: "{{ all_job.status_tip }}",
awTipPlacement: "top",
dataTitle: "{{ all_job.status_popover_title }}",
@ -50,7 +50,7 @@ export default
noLink: true,
searchable: false,
filter: "longDate",
columnClass: "col-lg-2 col-md-2 hidden-xs",
columnClass: "col-lg-2 col-md-2 col-sm-2 hidden-xs",
key: true,
desc: true
},
@ -66,7 +66,7 @@ export default
},
name: {
label: 'Name',
columnClass: 'col-md-3 col-sm-4 col-xs-4',
columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-3',
ngClick: "viewJobLog(all_job.id, all_job.nameHref)",
defaultSearchField: true,
awToolTip: "{{ all_job.name | sanitize }}",
@ -86,8 +86,15 @@ export default
fieldActions: {
columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-4',
columnClass: 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
stdout: {
mode: 'all',
href: '/#/jobs/{{ all_job.id }}/stdout',
awToolTip: 'View standard output',
dataPlacement: 'top',
ngShow: "all_job.type == 'job'"
},
submit: {
icon: 'icon-rocket',
mode: 'all',
@ -109,13 +116,6 @@ export default
awToolTip: 'Delete the job',
dataPlacement: 'top',
ngShow: "all_job.status !== 'running' && all_job.status !== 'waiting' && all_job.status !== 'pending'"
},
stdout: {
mode: 'all',
href: '/#/jobs/{{ all_job.id }}/stdout',
awToolTip: 'View standard output',
dataPlacement: 'top',
ngShow: "all_job.type == 'job'"
}
}
});

20
awx/ui/client/src/lists/CompletedJobs.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
@ -86,6 +86,13 @@ export default
actions: { },
fieldActions: {
stdout: {
mode: 'all',
href: '/#/jobs/{{ completed_job.id }}/stdout',
awToolTip: 'View standard output',
dataPlacement: 'top',
ngShow: "completed_job.type == 'job'"
},
submit: {
icon: 'icon-rocket',
mode: 'all',
@ -99,19 +106,12 @@ export default
ngClick: 'deleteJob(completed_job.id)',
awToolTip: 'Delete the job',
dataPlacement: 'top'
},
}
// job_details: {
// mode: 'all',
// ngClick: "viewJobLog(completed_job.id)",
// awToolTip: 'View job details',
// dataPlacement: 'top'
// },
stdout: {
mode: 'all',
href: '/#/jobs/{{ completed_job.id }}/stdout',
awToolTip: 'View standard output',
dataPlacement: 'top',
ngShow: "completed_job.type == 'job'"
}
// }
}
});

14
awx/ui/client/src/lists/InventoryGroups.js
View File

@ -154,13 +154,6 @@ export default
"|| group.status == 'updating'",
dataPlacement: "top"
},
edit: {
//label: 'Edit',
mode: 'all',
ngClick: "editGroup(group.id)",
awToolTip: 'Edit group',
dataPlacement: "top"
},
copy: {
mode: 'all',
ngClick: "copyGroup(group.id)",
@ -168,6 +161,13 @@ export default
ngShow: "group.id > 0",
dataPlacement: "top"
},
edit: {
//label: 'Edit',
mode: 'all',
ngClick: "editGroup(group.id)",
awToolTip: 'Edit group',
dataPlacement: "top"
},
"delete": {
//label: 'Delete',
mode: 'all',

12
awx/ui/client/src/lists/InventoryHosts.js
View File

@ -60,6 +60,12 @@ export default
iconClass: "{{ 'fa icon-job-' + host.active_failures }}",
id: 'active-failutes-action'
},
copy: {
mode: 'all',
ngClick: "copyHost(host.id)",
awToolTip: 'Copy or move host to another group',
dataPlacement: "top"
},
edit: {
//label: 'Edit',
ngClick: "editHost(host.id)",
@ -67,12 +73,6 @@ export default
awToolTip: 'Edit host',
dataPlacement: 'top'
},
copy: {
mode: 'all',
ngClick: "copyHost(host.id)",
awToolTip: 'Copy or move host to another group',
dataPlacement: "top"
},
"delete": {
//label: 'Delete',
ngClick: "deleteHost(host.id, host.name)",

16
awx/ui/client/src/lists/JobTemplates.js
View File

@ -69,6 +69,14 @@ export default
awToolTip: 'Schedule future job template runs',
dataPlacement: 'top',
},
copy: {
label: 'Copy',
ngClick: "copyJobTemplate(job_template.id, job_template.name)",
"class": 'btn-danger btn-xs',
awToolTip: 'Copy template',
dataPlacement: 'top',
ngHide: 'job_template.summary_fields.can_copy===false'
},
edit: {
label: 'Edit',
ngClick: "editJobTemplate(job_template.id)",
@ -82,14 +90,6 @@ export default
"class": 'btn-danger btn-xs',
awToolTip: 'Delete template',
dataPlacement: 'top',
},
copy: {
label: 'Copy',
ngClick: "copyJobTemplate(job_template.id, job_template.name)",
"class": 'btn-danger btn-xs',
awToolTip: 'Copy template',
dataPlacement: 'top',
ngHide: 'job_template.summary_fields.can_copy===false'
}
}
});

16
awx/ui/client/src/lists/Jobs.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('JobsListDefinition', [])
@ -74,6 +74,13 @@ export default
actions: { },
fieldActions: {
stdout: {
mode: 'all',
href: '/#/jobs/{{ job.id }}/stdout',
awToolTip: 'View standard output',
dataPlacement: 'top',
ngShow: "job.type == 'job'"
},
submit: {
mode: 'all',
icon: 'icon-rocket',
@ -95,13 +102,6 @@ export default
awToolTip: 'Delete the job',
dataPlacement: 'top',
ngShow: "job.status != 'running'"
},
stdout: {
mode: 'all',
href: '/#/jobs/{{ job.id }}/stdout',
awToolTip: 'View standard output',
dataPlacement: 'top',
ngShow: "job.type == 'job'"
}
}
});

18
awx/ui/client/src/lists/ScanJobs.js
View File

@ -56,6 +56,15 @@ export default
awToolTip: 'Schedule future job template runs',
dataPlacement: 'top',
},
copy: {
label: 'Copy',
ngClick: "copyJobTemplate(job_template.id, job_template.name)",
"class": 'btn-danger btn-xs',
awToolTip: 'Copy template',
dataPlacement: 'top',
ngHide: 'job_template.summary_fields.can_copy===false'
},
edit: {
label: 'Edit',
ngClick: "editJobTemplate(job_template.id)",
@ -69,15 +78,6 @@ export default
"class": 'btn-danger btn-xs',
awToolTip: 'Delete template',
dataPlacement: 'top',
},
copy: {
label: 'Copy',
ngClick: "copyJobTemplate(job_template.id, job_template.name)",
"class": 'btn-danger btn-xs',
awToolTip: 'Copy template',
dataPlacement: 'top',
ngHide: 'job_template.summary_fields.can_copy===false'
}
}
});

9
awx/ui/client/src/lists/ScheduledJobs.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('ScheduledJobsDefinition', ['sanitizeFilter'])
@ -32,7 +32,7 @@ export default
label: 'Next Run',
noLink: true,
searchable: false,
columnClass: "col-lg-2 col-md-2 hidden-xs",
columnClass: "col-lg-3 col-md-2 col-sm-3 hidden-xs",
filter: "longDate",
key: true
},
@ -55,7 +55,7 @@ export default
},
name: {
label: 'Name',
columnClass: 'col-md-3 col-sm-4 col-xs-4',
columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-5',
sourceModel: 'unified_job_template',
sourceField: 'name',
ngClick: "editSchedule(schedule.id)",
@ -68,6 +68,9 @@ export default
actions: { },
fieldActions: {
columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-5',
"play": {
mode: "all",
ngClick: "toggleSchedule($event, schedule.id)",

2
awx/ui/client/src/shared/form-generator.js
View File

@ -1675,7 +1675,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
// Message for when a search returns no results. This should only get shown after a search is executed with no results.
html += "<div class=\"row\" ng-show=\"" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == true && " + itm + ".length == 0\">\n";
html += "<div class=\"col-lg-12\">No records matched your search.</div>\n";
html += "<div class=\"col-lg-12 List-searchNoResults\">No records matched your search.</div>\n";
html += "</div>\n";
// Show the "no items" box when loading is done and the user isn't actively searching and there are no results

8
awx/ui/client/src/shared/generator-helpers.js
View File

@ -705,8 +705,8 @@ angular.module('GeneratorHelpers', [systemStatus.name])
set = params.set,
html = '';
html += "<!-- Paginate Widget -->\n";
html += "<div id=\"" + iterator + "-pagination\" class=\"List-pagination row page-row\">\n";
html += "<div class=\"col-lg-8 col-md-8\">\n";
html += "<div id=\"" + iterator + "-pagination\" class=\"List-pagination page-row\">\n";
html += "<div class=\"List-paginationPagerHolder\">";
html += "<div class=\"List-paginationPager\" ng-hide=\"" + iterator + "HidePaginator || " + iterator + "_num_pages <= 1\">";
html += "<ul id=\"pagination-links\" class=\"pagination\">\n";
html += "<li class=\"List-paginationPager--item\" ng-hide=\"" + iterator + "_page -5 <= 1 \"><a href id=\"first-page-set\" ng-click=\"getPage(1,'" + set + "','" + iterator + "')\">" +
@ -729,8 +729,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
html += "</ul>\n";
html += "<span class=\"List-paginationPager--pageof\">Page <span id=\"current-page\">{{ " + iterator + "_page }}</span> of <span id=\"total-pages\">{{ " + iterator + "_num_pages }}</span></span>";
html += "</div>";
html += "</div>\n";
html += "<div class=\"col-lg-4 col-md-4\" ng-hide=\"" + iterator + "_mode == 'lookup'\">\n";
html += "</div>";
html += "<div id=\"pagination-labels\" class=\"page-label\" ng-hide=\"(" + iterator + "_total_rows | number:0) < 1\">\n";
html += "<span id=\"total-items\">ITEMS&nbsp;";
html += "<span>{{ (" + iterator + "_total_rows | number:0) < 1 ? 0 : (" + iterator + "_page-1)*" + iterator + "_page_size+1}}</span>";
@ -740,7 +739,6 @@ angular.module('GeneratorHelpers', [systemStatus.name])
html += "</span>";
html += "</div>\n";
html += "</div>\n";
html += "</div>\n";
return html;
};

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

@ -382,7 +382,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
// Message for when a search returns no results. This should only get shown after a search is executed with no results.
html += "<div class=\"row\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == true && " + list.name + ".length == 0\">\n";
html += "<div class=\"col-lg-12\">No records matched your search.</div>\n";
html += "<div class=\"col-lg-12 List-searchNoResults\">No records matched your search.</div>\n";
html += "</div>\n";
}

17
awx/ui/client/src/shared/prompt/prompt.less
View File

@ -5,11 +5,15 @@
flex-wrap:wrap;
flex-direction: row;
padding: 15px 20px;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
}
.Prompt-header {
display: flex;
width: 100%;
margin-bottom: 25px;
}
.Prompt-title {
@ -33,13 +37,12 @@
height:20px;
font-size: 20px;
background-color:@default-bg;
color:@default-second-border;
transition: color 0.2s;
color:@default-icon;
line-height:1;
}
.Prompt-exit:hover{
color:@default-icon;
color:@default-icon-hov;
}
.Prompt-body {
@ -47,7 +50,7 @@
}
.Prompt-bodyQuery {
padding: 15px 0px;
margin-bottom: 20px;
color: @default-interface-txt;
}
@ -58,7 +61,7 @@
.Prompt-footer {
display: flex;
justify-content: flex-end;
padding-top: 20px;
margin-top: 20px;
width: 100%;
}
@ -93,6 +96,10 @@
color: @btn-txt-sel;
}
.Prompt-footerButton {
padding: 4px 8px;
}
.Prompt-footerButton + .Prompt-footerButton {
margin-left: 20px;
}