External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 10:30:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #670 from mabashian/list-delete-styling

Browse Source 
List view delete action modal styling
This commit is contained in:
Michael Abashian 2016-01-21 09:26:25 -05:00
commit 380cf51f02
16 changed files with 172 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

10
awx/ui/client/src/controllers/Inventories.js
View File

@ -341,8 +341,9 @@ export function InventoriesList($scope, $rootScope, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class=\"alert alert-info\">Delete inventory ' + $filter('sanitize')(name) + '?</div>',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the inventory below?</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>',
action: action,
actionText: 'DELETE'
});
};
@ -761,8 +762,9 @@ export function InventoriesEdit($scope, $rootScope, $compile, $location,
Prompt({
hdr: 'Delete',
body: '<div class=\"alert alert-info\">Delete job template ' + this.scan_job_template.name + '?</div>',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the job template below?</div><div class="Prompt-bodyTarget">' + this.scan_job_template.name + '</div>',
action: action,
actionText: 'DELETE'
});
};

11
awx/ui/client/src/controllers/JobTemplates.js
View File

@ -91,8 +91,9 @@ export function JobTemplatesList($scope, $rootScope, $location, $log,
Prompt({
hdr: 'Delete',
body: '<div class=\"alert alert-info\">Delete job template ' + name + '?</div>',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the job template below?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});
};
@ -635,7 +636,7 @@ export function JobTemplatesAdd(Refresh, $filter, $scope, $rootScope, $compile,
};
Prompt({
hdr: 'Incomplete Survey',
body: 'Do you want to create a survey before proceeding?',
body: '<div class="Prompt-bodyQuery">Do you want to create a survey before proceeding?</div>',
action: action
});
});
@ -1128,7 +1129,7 @@ export function JobTemplatesEdit($filter, $scope, $rootScope, $compile,
};
Prompt({
hdr: 'Incomplete Survey',
body: 'Do you want to create a survey before proceeding?',
body: '<div class="Prompt-bodyQuery">Do you want to create a survey before proceeding?</div>',
action: action
});
});
@ -1190,7 +1191,7 @@ export function JobTemplatesEdit($filter, $scope, $rootScope, $compile,
};
Prompt({
hdr: 'Incomplete Survey',
body: 'Do you want to create a survey before proceeding?',
body: '<div class="Prompt-bodyQuery">Do you want to create a survey before proceeding?</div>',
action: action
});
});

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

@ -87,8 +87,9 @@ export function OrganizationsList($stateParams, $scope, $rootScope, $location,
Prompt({
hdr: 'Delete',
body: '<div class=\"alert alert-info\">Delete organization ' + name + '?</div>',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the organization below?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});
};
}
@ -281,8 +282,9 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: 'Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
action: action,
actionText: 'DELETE'
});
};

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

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

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

@ -100,8 +100,9 @@ export function TeamsList($scope, $rootScope, $location, $log, $stateParams,
Prompt({
hdr: 'Delete',
body: '<div class=\"alert alert-info\">Delete team ' + name + '?</div>',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the team below?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});
};
}
@ -410,8 +411,9 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: 'Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
action: action,
actionText: 'DELETE'
});
};
}

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

@ -91,8 +91,9 @@ export function UsersList($scope, $rootScope, $location, $log, $stateParams,
Prompt({
hdr: 'Delete',
body: '<div class=\"alert alert-info\">Delete user ' + name + '?</div>',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the user below?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});
};
}
@ -460,8 +461,9 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log,
Prompt({
hdr: 'Delete',
body: 'Are you sure you want to remove ' + name + ' from ' + $scope.username + ' ' + title + '?',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.username + ' ' + title + '?</div>',
action: action,
actionText: 'DELETE'
});
};
}); // $scope.$on

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

@ -739,10 +739,15 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', listGenerator.name,
}
};
body = (group) ? '<div class=\"alert alert-info\"><p>Are you sure you want to remove host <strong>' + host_name + '</strong> from group ' + group.name + '?' +
body = (group) ? '<div class=\"Prompt-bodyQuery\"><p>Are you sure you want to remove host <strong>' + host_name + '</strong> from group ' + group.name + '?' +
' It will still be part of the inventory and available in All Hosts.</p></div>' :
'<div class=\"alert alert-info\"><p>Are you sure you want to permanently delete host <strong>' + host_name + '</strong> from the inventory?</p></div>';
Prompt({ hdr: 'Delete Host', body: body, action: action_to_take, 'class': 'btn-danger' });
'<div class=\"Prompt-bodyQuery\"><p>Are you sure you want to permanently delete host <strong>' + host_name + '</strong> from the inventory?</p></div>';
Prompt({
hdr: 'Delete Host',
body: body,
action: action_to_take,
actionText: 'DELETE'
});
};
}])

2
awx/ui/client/src/helpers/JobSubmission.js
View File

@ -272,7 +272,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
Prompt({
hdr: 'Machine Credential Required',
body: "<div class=\"alert alert-info\">There are no machine credentials defined in Tower. Launching this job requires a machine credential. " +
body: "<div class=\"Prompt-bodyQuery\">There are no machine credentials defined in Tower. Launching this job requires a machine credential. " +
"Create one now?",
action: action
});

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

@ -540,8 +540,9 @@ export default
body = (action_label === 'cancel' || job.status === 'new') ? "Submit the request to cancel" : "Delete";
Prompt({
hdr: hdr,
body: "<div class=\"alert alert-info\">" + body + " job #" + id + " " + job.name + "?</div>",
action: action
body: "<div class=\"Prompt-bodyQuery\">" + body + " job #" + id + " " + job.name + "?</div>",
action: action,
actionText: (action_label === 'cancel' || job.status === 'new') ? "YES" : "DELETE"
});
});

3
awx/ui/client/src/helpers/Schedules.js
View File

@ -541,8 +541,9 @@ export default
Prompt({
hdr: hdr,
body: "<div class=\"alert alert-info\">Are you sure you want to delete the <em>" + schedule.name + "</em> schedule?</div>",
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the schedule below?</div><div class="Prompt-bodyTarget">' + schedule.name + '</div>',
action: action,
actionText: 'DELETE',
backdrop: false
});

5
awx/ui/client/src/inventory-scripts/list/list.controller.js
View File

@ -70,11 +70,12 @@ export default
});
};
var bodyHtml = "<div class=\"alert alert-info\">Are you sure you want to delete " + name + "?</div>";
var bodyHtml = '<div class="Prompt-bodyQuery">Are you sure you want to delete the inventory script below?</div><div class="Prompt-bodyTarget">' + name + '</div>';
Prompt({
hdr: 'Delete',
body: bodyHtml,
action: action
action: action,
actionText: 'DELETE'
});
};

5
awx/ui/client/src/permissions/list/list.controller.js
View File

@ -127,8 +127,9 @@ export default
if ($scope.PermissionAddAllowed) {
Prompt({
hdr: 'Delete',
body: 'Are you sure you want to delete ' + name + '?',
action: action
body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the permission below?</div><div class="Prompt-bodyTarget">' + name + '</div>',
action: action,
actionText: 'DELETE'
});
}
};

3
awx/ui/client/src/shared/prompt-dialog.js
View File

@ -41,10 +41,11 @@ angular.module('PromptDialog', ['Utilities', 'sanitizeFilter'])
scope.promptHeader = params.hdr;
scope.promptBody = params.body;
scope.promptAction = params.action;
scope.promptActionText = (params.actionText === null || params.actionText === undefined || params.actionText === '') ? 'YES' : params.actionText;
local_backdrop = (params.backdrop === undefined) ? "static" : params.backdrop;
cls = (params['class'] === null || params['class'] === undefined) ? 'btn-danger' : params['class'];
cls = (params['class'] === null || params['class'] === undefined) ? 'Prompt-errorButton' : params['class'];
$('#prompt_action_btn').removeClass(cls).addClass(cls);

98
awx/ui/client/src/shared/prompt/prompt.less Normal file
View File

@ -0,0 +1,98 @@
@import "awx/ui/client/src/shared/branding/colors.default.less";
.Prompt-content {
display:flex;
flex-wrap:wrap;
flex-direction: row;
padding: 15px 20px;
}
.Prompt-header {
display: flex;
width: 100%;
}
.Prompt-title {
flex: 1 0 auto;
text-transform: uppercase;
color: @list-header-txt;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.Prompt-exitHolder{
justify-content: flex-end;
display:flex;
}
.Prompt-exit{
cursor:pointer;
padding:0px;
border: none;
height:20px;
font-size: 20px;
background-color:@default-bg;
color:@default-second-border;
transition: color 0.2s;
line-height:1;
}
.Prompt-exit:hover{
color:@default-icon;
}
.Prompt-body {
width: 100%;
}
.Prompt-bodyQuery {
padding: 15px 0px;
color: @default-interface-txt;
}
.Prompt-bodyTarget {
color: @default-data-txt;
}
.Prompt-footer {
display: flex;
justify-content: flex-end;
padding-top: 20px;
width: 100%;
}
.Prompt-defaultButton {
background-color: @default-bg;
color: @btn-txt;
text-transform: uppercase;
border-radius: 5px;
border: 1px solid @btn-bord;
transition: background-color 0.2s;
padding-left:15px;
padding-right: 15px;
}
.Prompt-defaultButton:hover {
background-color: @btn-bg-hov;
color: @btn-txt;
}
.Prompt-errorButton {
background-color: @default-err;
color: @btn-txt-sel;
text-transform: uppercase;
border-radius: 5px;
transition: background-color 0.2s;
padding-left:15px;
padding-right: 15px;
}
.Prompt-errorButton:hover {
background-color: @default-err-hov;
color: @btn-txt-sel;
}
.Prompt-footerButton + .Prompt-footerButton {
margin-left: 20px;
}

19
awx/ui/templates/ui/index.html
View File

@ -97,17 +97,18 @@
<!-- Confirmation Dialog -->
<div id="prompt-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-target="#prompt-modal"
data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 ng-bind="promptHeader" id="prompt-header"></h3>
<div class="Prompt-content modal-content">
<div class="Prompt-header">
<div class="Prompt-title" ng-bind="promptHeader" id="prompt-header"></div>
<div class="Prompt-exitHolder">
<button class="close Prompt-exit" data-target="#prompt-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
</div>
</div>
<div class="modal-body" ng-bind-html="promptBody" id="prompt-body">
<div class="Prompt-body" ng-bind-html="promptBody" id="prompt-body">
</div>
<div class="modal-footer">
<a href="#" data-target="#prompt-modal" data-dismiss="modal" id="prompt_cancel_btn" class="btn btn-default">No</a>
<a href="" ng-class="promptActionBtnClass" ng-click="promptAction()" id="prompt_action_btn" class="btn">Yes</a>
<div class="Prompt-footer">
<a href="" ng-class="promptActionBtnClass" ng-click="promptAction()" id="prompt_action_btn" class="btn Prompt-footerButton" ng-bind="promptActionText"></a>
<a href="#" data-target="#prompt-modal" data-dismiss="modal" id="prompt_cancel_btn" class="btn Prompt-defaultButton Prompt-footerButton">CANCEL</a>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->