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 #2559 from mabashian/ui-audit-5-21

Browse Source 
Various UX audit fixes
This commit is contained in:
Michael Abashian 2016-06-22 09:20:46 -04:00 committed by GitHub
commit 3b83fdbf82
10 changed files with 148 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/legacy-styles/forms.less
View File

@ -187,7 +187,7 @@
.Form-formGroup--checkbox{
display: flex;
align-items: flex-end;
margin-top: 10px;
}
.Form-checkbox--stacked {

1
awx/ui/client/src/inventory-scripts/inventory-scripts.form.js
View File

@ -46,7 +46,6 @@ export default function() {
script: {
label: 'Custom Script',
type: 'textarea',
hintText: "Drag and drop an inventory script on the field below",
class: 'Form-formGroup--fullWidth',
elementClass: 'Form-monospace',
addRequired: true,

14
awx/ui/client/src/job-detail/host-event/host-event-modal.partial.html
View File

@ -12,10 +12,10 @@
</div>
<div class="HostEvent-nav">
<!-- view navigation buttons -->
<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.details')}">Details</button>
<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
<button ng-if="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stdout')}">Standard Out</button>
<button ng-if="stderr" ui-sref="jobDetail.host-event.stderr" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stderr')}">Standard Error</button>
<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.details')}">Details</button>
<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
<button ng-if="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stdout')}">Standard Out</button>
<button ng-if="stderr" ui-sref="jobDetail.host-event.stderr" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stderr')}">Standard Error</button>
</div>
<div class="HostEvent-body">
@ -26,9 +26,9 @@
<!-- controls -->
<div class="HostEvent-controls">
<button ng-disabled="!showPrev()" ng-click="goPrev()"
class="btn btn-sm btn-default">Prev Host</button>
<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default">Next Host</button>
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close" ng-show="true" >Close</button>
class="btn btn-sm btn-default HostEvent-button">Prev Host</button>
<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default HostEvent-button">Next Host</button>
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close HostEvent-button" ng-show="true" >Close</button>
</div>
</div>
</div>

43
awx/ui/client/src/job-detail/host-event/host-event.block.less
View File

@ -2,6 +2,16 @@
@import "awx/ui/client/src/shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/layouts/one-plus-two.less";
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
@media screen and (min-width: 768px){
.HostEvent .modal-dialog{
width: 700px;
@ -16,16 +26,42 @@
padding-left: 15px;
padding-right: 15px;
background-color: @default-link;
border-color: @default-link;
&:hover{
background-color: @default-link-hov;
border-color: @default-link-hov;
}
}
.HostEvent-body{
margin-bottom: 10px;
}
.HostEvent-tab {
color: @btn-txt;
background-color: @btn-bg;
font-size: 12px;
border: 1px solid @btn-bord;
height: 30px;
border-radius: 5px;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
transition: background-color 0.2s;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
.noselect;
}
.HostEvent-tab:hover {
color: @btn-txt;
background-color: @btn-bg-hov;
cursor: pointer;
}
.HostEvent-tab--selected{
background-color: #D7D7D7 !important;
border-color: #D7D7D7 !important;
color: @btn-txt-sel!important;
background-color: @default-icon!important;
border-color: @default-icon!important;
}
.HostEvent-view--container{
width: 100%;
@ -106,3 +142,6 @@
align-self: flex-end;
}
}
.HostEvent-button:disabled {
pointer-events: all!important;
}

12
awx/ui/client/src/job-detail/host-events/host-events.block.less
View File

@ -7,18 +7,20 @@
.HostEvents .modal-footer{
border: 0;
margin-top: 0px;
padding-top: 5px;
padding: 0px 20px 20px 20px;
}
button.HostEvents-close{
width: 70px;
color: #FFFFFF;
color: #FFFFFF!important;
text-transform: uppercase;
padding-left: 15px;
padding-right: 15px;
background-color: @default-link;
&:hover{
background-color: @default-link-hov;
}
border-color: @default-link;
&:hover{
background-color: @default-link-hov;
border-color: @default-link-hov;
}
}
.HostEvents-status--ok{
color: @green;

23
awx/ui/client/src/notifications/add/add.controller.js
View File

@ -88,8 +88,19 @@ export default
$scope.typeChange = function () {
for(var fld in form.fields){
if(form.fields[fld] && form.fields[fld].subForm){
$scope[fld] = null;
$scope.notification_template_form[fld].$setPristine();
if(form.fields[fld].type === 'checkbox_group' && form.fields[fld].fields) {
// Need to loop across the groups fields to null them out
for(var i=0; i<form.fields[fld].fields.length; i++) {
// Pull the name out of the object (array of objects)
var subFldName = form.fields[fld].fields[i].name;
$scope[subFldName] = null;
$scope.notification_template_form[subFldName].$setPristine();
}
}
else {
$scope[fld] = null;
$scope.notification_template_form[fld].$setPristine();
}
}
}
@ -145,6 +156,14 @@ export default
.filter(i => (form.fields[i].ngShow && form.fields[i].ngShow.indexOf(v) > -1))
.map(i => [i, processValue($scope[i], i , form.fields[i])]));
delete params.notification_configuration.checkbox_group;
for(var j = 0; j < form.fields.checkbox_group.fields.length; j++) {
if(form.fields.checkbox_group.fields[j].ngShow && form.fields.checkbox_group.fields[j].ngShow.indexOf(v) > -1) {
params.notification_configuration[form.fields.checkbox_group.fields[j].name] = Boolean($scope[form.fields.checkbox_group.fields[j].name]);
}
}
Wait('start');
Rest.setUrl(url);
Rest.post(params)

64
awx/ui/client/src/notifications/edit/edit.controller.js
View File

@ -54,25 +54,36 @@ export default
master[fld] = data[fld];
}
if(data.notification_configuration[fld]){
$scope[fld] = data.notification_configuration[fld];
master[fld] = data.notification_configuration[fld];
if(form.fields[fld].type === 'textarea'){
if (form.fields[fld].name === 'headers') {
$scope[fld] = JSON.stringify($scope[fld], null, 2);
} else {
$scope[fld] = $scope[fld].toString().replace(',' , '\n');
if(form.fields[fld].type === 'checkbox_group') {
// Loop across the group and put the child data on scope
for(var j=0; j<form.fields[fld].fields.length; j++) {
if(data.notification_configuration[form.fields[fld].fields[j].name]) {
$scope[form.fields[fld].fields[j].name] = data.notification_configuration[form.fields[fld].fields[j].name];
master[form.fields[fld].fields[j].name] = data.notification_configuration[form.fields[fld].fields[j].name];
}
}
}
else {
if(data.notification_configuration[fld]){
$scope[fld] = data.notification_configuration[fld];
master[fld] = data.notification_configuration[fld];
if (form.fields[fld].sourceModel && data.summary_fields &&
data.summary_fields[form.fields[fld].sourceModel]) {
$scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
if(form.fields[fld].type === 'textarea'){
if (form.fields[fld].name === 'headers') {
$scope[fld] = JSON.stringify($scope[fld], null, 2);
} else {
$scope[fld] = $scope[fld].toString().replace(',' , '\n');
}
}
}
if (form.fields[fld].sourceModel && data.summary_fields &&
data.summary_fields[form.fields[fld].sourceModel]) {
$scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
}
}
}
data.notification_type = (Empty(data.notification_type)) ? '' : data.notification_type;
@ -153,8 +164,19 @@ export default
$scope.typeChange = function () {
for(var fld in form.fields){
if(form.fields[fld] && form.fields[fld].subForm){
$scope[fld] = null;
$scope.notification_template_form[fld].$setPristine();
if(form.fields[fld].type === 'checkbox_group' && form.fields[fld].fields) {
// Need to loop across the groups fields to null them out
for(var i=0; i<form.fields[fld].fields.length; i++) {
// Pull the name out of the object (array of objects)
var subFldName = form.fields[fld].fields[i].name;
$scope[subFldName] = null;
$scope.notification_template_form[subFldName].$setPristine();
}
}
else {
$scope[fld] = null;
$scope.notification_template_form[fld].$setPristine();
}
}
}
@ -208,6 +230,14 @@ export default
.filter(i => (form.fields[i].ngShow && form.fields[i].ngShow.indexOf(v) > -1))
.map(i => [i, processValue($scope[i], i , form.fields[i])]));
delete params.notification_configuration.checkbox_group;
for(var j = 0; j < form.fields.checkbox_group.fields.length; j++) {
if(form.fields.checkbox_group.fields[j].ngShow && form.fields.checkbox_group.fields[j].ngShow.indexOf(v) > -1) {
params.notification_configuration[form.fields.checkbox_group.fields[j].name] = Boolean($scope[form.fields.checkbox_group.fields[j].name]);
}
}
Wait('start');
Rest.setUrl(url+ id+'/');
Rest.put(params)

30
awx/ui/client/src/notifications/notificationTemplates.form.js
View File

@ -355,19 +355,31 @@ export default function() {
ngShow: "notification_type.value == 'irc' ",
subForm: 'typeSubForm'
},
use_tls: {
label: 'Use TLS',
type: 'checkbox',
ngShow: "notification_type.value == 'email' ",
subForm: 'typeSubForm'
},
use_ssl: {
labelBind: 'sslLabel',
label: 'SSL Connection',
type: 'checkbox',
ngShow: "notification_type.value == 'email' || notification_type.value == 'irc' ",
ngShow: "notification_type.value == 'irc'",
subForm: 'typeSubForm'
},
checkbox_group: {
label: 'Options',
type: 'checkbox_group',
subForm: 'typeSubForm',
ngShow: "notification_type.value == 'email'",
fields: [{
name: 'use_tls',
label: 'Use TLS',
type: 'checkbox',
ngShow: "notification_type.value == 'email' ",
labelClass: 'checkbox-options stack-inline'
}, {
name: 'use_ssl',
label: 'Use SSL',
type: 'checkbox',
ngShow: "notification_type.value == 'email'",
labelClass: 'checkbox-options stack-inline'
}]
}
},
buttons: { //for now always generates <button> tags

2
awx/ui/client/src/notifications/shared/type-change.service.js
View File

@ -25,7 +25,6 @@ function () {
switch (type) {
case 'email':
obj.portLabel = ' Port';
obj.sslLabel = ' Use SSL';
obj.passwordLabel = ' Password';
obj.email_required = true;
obj.port_required = true;
@ -56,7 +55,6 @@ function () {
break;
case 'irc':
obj.portLabel = ' IRC Server Port';
obj.sslLabel = ' SSL Connection';
obj.passwordLabel = ' IRC Server Password';
obj.irc_required = true;
obj.password_required = true;

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

@ -682,7 +682,9 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "<label class=\"";
html += (field.inline === undefined || field.inline === true) ? "checkbox-inline" : "";
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\">";
html += "\"";
html += (field.ngShow) ? " ng-show=\"" +field.ngShow + "\" " : "";
html += ">";
}
html += "<input type=\"checkbox\" ";