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

Merge pull request #679 from mabashian/form-list-css

Browse Source 
Styling updates to form generator lists
This commit is contained in:
Michael Abashian 2016-01-25 09:12:51 -05:00
commit 01eca729b1
10 changed files with 119 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -214,7 +214,7 @@ table, tbody {
height: 32px;
width: 32px;
border-left: 1px solid @list-srch-inpt-bord;
color: @list-srch-btn-icon;
color: @list-srch-btn-icon!important;
float: right;
position: relative;
top: -33px;

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

@ -88,9 +88,10 @@ export default
actions: {
add: {
ngClick: "addScanJob()",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add a scan job template'
awToolTip: 'Add a scan job template',
actionClass: 'btn List-buttonSubmit',
buttonContent: '+ ADD'
}
},

17
awx/ui/client/src/forms/JobTemplates.js
View File

@ -316,15 +316,20 @@ export default
open: false,
actions: {
add: {
mode: 'all',
ngClick: 'addSchedule()',
awToolTip: 'Add a new schedule'
},
refresh: {
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshSchedules()"
ngClick: "refreshSchedules()",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH',
ngHide: 'scheduleLoading == false && schedule_active_search == false && schedule_total_rows < 1'
},
add: {
mode: 'all',
ngClick: 'addSchedule()',
awToolTip: 'Add a new schedule',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
fields: {

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

@ -58,8 +58,9 @@ export default
add: {
ngClick: "add('users')",
label: 'Add',
icon: 'icon-plus',
awToolTip: 'Add a new user'
awToolTip: 'Add a new user',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
@ -104,9 +105,10 @@ export default
actions: { // Actions displayed top right of list
add: {
ngClick: "add('admins')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add new administrator'
awToolTip: 'Add new administrator',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
fields: {

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

@ -234,9 +234,10 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
actions: {
add: {
ngClick: "add('organizations')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add an organization'
awToolTip: 'Add an organization',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
@ -276,15 +277,20 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
open: false,
actions: {
add: {
mode: 'all',
ngClick: 'addSchedule()',
awToolTip: 'Add a new schedule'
},
refresh: {
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshSchedules()"
ngClick: "refreshSchedules()",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH',
ngHide: 'scheduleLoading == false && schedule_active_search == false && schedule_total_rows < 1'
},
add: {
mode: 'all',
ngClick: 'addSchedule()',
awToolTip: 'Add a new schedule',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
fields: {

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

@ -68,9 +68,10 @@ export default
actions: {
add: {
ngClick: "add('credentials')",
icon: 'icon-plus',
label: 'Add',
add: 'Add a new credential'
add: 'Add a new credential',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
@ -112,10 +113,11 @@ export default
actions: {
add: {
ngClick: "add('permissions')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add a permission for this user',
ngShow: 'PermissionAddAllowed'
ngShow: 'PermissionAddAllowed',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
@ -175,8 +177,9 @@ export default
actions: {
add: {
ngClick: "add('projects')",
icon: 'icon-plus',
label: 'Add'
label: 'Add',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
@ -218,9 +221,10 @@ export default
actions: {
add: {
ngClick: "add('users')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add a user'
awToolTip: 'Add a user',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

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

@ -123,9 +123,10 @@ export default
actions: {
add: {
ngClick: "add('credentials')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add a credential for this user'
awToolTip: 'Add a credential for this user',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},
@ -167,10 +168,11 @@ export default
actions: {
add: {
ngClick: "add('permissions')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Add a permission for this user',
ngShow: 'PermissionAddAllowed'
ngShow: 'PermissionAddAllowed',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

9
awx/ui/client/src/helpers/related-search.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
/**
* @ngdoc function
* @name helpers.function:related-search
@ -162,6 +162,13 @@ export default
scope[iterator + 'Loading'] = false;
scope[iterator + 'HoldInput'] = true;
if(scope[iterator + 'SearchValue'] && scope[iterator + 'SearchValue'] != '') {
scope[iterator + '_active_search'] = true;
}
else {
scope[iterator + '_active_search'] = false;
}
if (scope[iterator + 'SearchValue']) {
// User typed a value in input field
scope[iterator + 'ShowStartBtn'] = false;

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

@ -140,9 +140,9 @@ export default
angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerator.name])
.factory('GenerateForm', ['$rootScope', '$location', '$compile', 'generateList', 'SearchWidget', 'PaginateWidget', 'Attr',
'Icon', 'Column', 'NavigationLink', 'HelpCollapse', 'DropDown', 'Empty', 'SelectIcon', 'Store',
'Icon', 'Column', 'NavigationLink', 'HelpCollapse', 'DropDown', 'Empty', 'SelectIcon', 'Store', 'ActionButton',
function ($rootScope, $location, $compile, GenerateList, SearchWidget, PaginateWidget, Attr, Icon, Column, NavigationLink,
HelpCollapse, DropDown, Empty, SelectIcon, Store) {
HelpCollapse, DropDown, Empty, SelectIcon, Store, ActionButton) {
return {
setForm: function (form) { this.form = form; },
@ -588,51 +588,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
},
button: function(params) {
var tagName = "button";
var options = params.btn;
var tagParts =
[ tagName,
"toolbar-button"
];
var attrNames = _.keys(options);
function isSupportedKey(keyName) {
if (keyName === 'icon') {
//TODO: Let's add a depecrated logger to our logging helper to output the below message
//
// The form action key "icon" is deprecated in favor of using the name of the field as the icon name or the iconClass option.
return false;
}
return true;
}
var attrs = attrNames
.filter(function(name) {
return isSupportedKey(name) &&
!_.isEmpty(options[name]);
}).map(function(name) {
return Attr(options, name);
});
tagParts =
tagParts
.concat(attrs)
.concat(
Attr(params, 'iconName'),
Attr(params, 'toolbar')
);
var html = "<" + tagParts.join(" ") + "></" + tagName + ">";
return html;
},
navigationLink: NavigationLink,
@ -1638,7 +1593,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += GenerateList.buildHTML(collection1, { mode: 'edit' });
}
else {
html += this.GenerateColleciton({ form: this.form, related: itm }, options);
html += this.GenerateCollection({ form: this.form, related: itm }, options);
}
html += "</div>\n";
}
@ -1671,7 +1626,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += GenerateList.buildHTML(collection, { mode: 'edit' });
}
else {
html += this.GenerateColleciton({ form: form, related: itm }, options);
html += this.GenerateCollection({ form: form, related: itm }, options);
}
html += "</div>\n"; // accordion inner
}
@ -1683,7 +1638,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
return html;
},
GenerateColleciton: function(params, options) {
GenerateCollection: function(params, options) {
var html = '',
form = params.form,
itm = params.related,
@ -1711,25 +1666,29 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
for (act in collection.actions) {
action = collection.actions[act];
html += this.button({
btn: action,
iconName: act,
toolbar: true
});
html += ActionButton(action);
}
html += "</div>\n";
html += "</div>\n";
html += "</div><!-- row -->\n";
// 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>\n";
// Show the "no items" box when loading is done and the user isn't actively searching and there are no results
html += "<div class=\"List-noItems\" ng-show=\"" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == false && " + collection.iterator + "_total_rows < 1\">PLEASE ADD ITEMS TO THIS LIST</div>";
// Start the list
html += "<div class=\"list-wrapper\">\n";
html += "<table id=\"" + itm + "_table" + "\" class=\"" + collection.iterator + " table table-condensed table-hover\">\n";
html += "<div class=\"list-wrapper\" ng-show=\"" + collection.iterator + "Loading == true || (" + collection.iterator + "Loading == false && " + itm + ".length > 0)\">\n";
html += "<table id=\"" + itm + "_table" + "\" class=\"" + collection.iterator + " List-table\">\n";
html += "<thead>\n";
html += "<tr>\n";
html += "<tr class=\"List-tableHeaderRow\">\n";
html += (collection.index === undefined || collection.index !== false) ? "<th class=\"col-xs-1\">#</th>\n" : "";
for (fld in collection.fields) {
html += "<th class=\"list-header\" id=\"" + collection.iterator + '-' + fld + "-header\" " +
html += "<th class=\"List-tableHeader list-header\" id=\"" + collection.iterator + '-' + fld + "-header\" " +
"ng-click=\"sort('" + collection.iterator + "', '" + fld + "')\">" +
collection.fields[fld].label;
html += " <i class=\"";
@ -1744,15 +1703,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
html += "\"></i></a></th>\n";
}
html += "<th>Actions</th>\n";
html += "<th class=\"List-tableHeader\">Actions</th>\n";
html += "</tr>\n";
html += "</thead>";
html += "<tbody>\n";
html += "<tr ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
html += "<tr class=\"List-tableHeaderRow\" ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
html += "ng-class-odd=\"'List-tableRow--oddRow'\" ";
html += "ng-class-even=\"'List-tableRow--evenRow'\" ";
html += "id=\"{{ " + collection.iterator + ".id }}\">\n";
if (collection.index === undefined || collection.index !== false) {
html += "<td>{{ $index + ((" + collection.iterator + "_page - 1) * " +
html += "<td class=\"List-tableCell\">{{ $index + ((" + collection.iterator + "_page - 1) * " +
collection.iterator + "_page_size) + 1 }}.</td>\n";
}
cnt = 1;
@ -1769,14 +1730,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
// Row level actions
html += "<td class=\"actions\">";
html += "<td class=\"List-tableCell List-actionButtonCell actions\">";
for (act in collection.fieldActions) {
fAction = collection.fieldActions[act];
html += "<a id=\"" + ((fAction.id) ? fAction.id : act + "-action") + "\" ";
html += "<button id=\"" + ((fAction.id) ? fAction.id : act + "-action") + "\" ";
html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
html += (fAction.ngClick) ? this.attr(fAction, 'ngClick') : "";
html += (fAction.ngHref) ? this.attr(fAction, 'ngHref') : "";
html += (fAction.ngShow) ? this.attr(fAction, 'ngShow') : "";
html += " class=\"List-actionButton ";
html += (act === 'delete') ? "List-actionButton--delete" : "";
html += "\"";
html += ">";
if (fAction.iconClass) {
html += "<i class=\"" + fAction.iconClass + "\"></i>";
@ -1787,16 +1751,11 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
// html += SelectIcon({ action: act });
//html += (fAction.label) ? "<span class=\"list-action-label\"> " + fAction.label + "</span>": "";
html += "</a>";
html += "</button>";
}
html += "</td>";
html += "</tr>\n";
// Message for when a related collection is empty
html += "<tr class=\"loading-info\" ng-show=\"" + collection.iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">No records matched your search.</div></td>\n";
html += "</tr>\n";
// Message for loading
html += "<tr ng-show=\"" + collection.iterator + "Loading == true\">\n";
html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">Loading...</div></td>\n";

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

@ -745,4 +745,32 @@ angular.module('GeneratorHelpers', [systemStatus.name])
return html;
};
}
]);
])
.factory('ActionButton', function () {
return function (options) {
var html = '';
html += '<button ';
html += (options.mode) ? "mode=\"" + options.mode + "\" " : "";
html += (options.awToolTip) ? "aw-tool-tip=\"" + options.awToolTip + "\" " : "";
html += (options.dataTipWatch) ? "data-tip-watch=\"" + options.dataTipWatch + "\" " : "";
html += (options.dataPlacement) ? "data-placement=\"" + options.dataPlacement + "\" " : "";
html += (options.dataContainer) ? "data-container=\"" + options.dataContainer + "\" " : "";
html += (options.actionClass) ? "class=\"" + options.actionClass + "\" " : "";
html += (options.dataTitle) ? "data-title=\"" + options.dataTitle + "\" " : "";
html += (options.ngDisabled) ? "ng-disabled=\"" + options.ngDisabled + "\" " : "";
html += (options.ngClick) ? "ng-click=\"$eval(" + options.ngClick + ")\" " : "";
html += (options.ngShow) ? "ng-show=\"" + options.ngShow + "\" " : "";
html += (options.ngHide) ? "ng-hide=\"" + options.ngHide + "\" " : "";
html += (options.awFeature) ? "aw-feature=\"" + options.awFeature + "\" " : "";
html += '>';
html += '<span>';
html += (options.buttonContent) ? options.buttonContent : "";
html += '</span>';
html += '</button>';
return html;
};
});