External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 00:57:48 -02:30
Code Issues Packages Projects Releases Wiki Activity

AC-1292 auto-resize groups height and scroll content when necessary.

Browse Source
This commit is contained in:
chouseknecht
2014-05-19 17:31:04 -04:00
parent 56f9912edb
commit b4f60424c4
6 changed files with 530 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
awx/ui/static/js/controllers/Inventories.js
View File

@@ -531,7 +531,7 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
} }
$scope.removeGroupTreeLoaded = $scope.$on('GroupTreeLoaded', function (event, inventory_name, groups) { $scope.removeGroupTreeLoaded = $scope.$on('GroupTreeLoaded', function (event, inventory_name, groups) {
// Add breadcrumbs // Add breadcrumbs
var e, inventoryAutoHelp; var e, html, inventoryAutoHelp;
e = angular.element(document.getElementById('breadcrumbs')); e = angular.element(document.getElementById('breadcrumbs'));
e.html(Breadcrumbs({ list: list, mode: 'edit' })); e.html(Breadcrumbs({ list: list, mode: 'edit' }));
$compile(e)($scope); $compile(e)($scope);
@@ -541,8 +541,14 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
mode: 'edit', mode: 'edit',
id: 'groups-container', id: 'groups-container',
breadCrumbs: false, breadCrumbs: false,
searchSize: 'col-lg-5 col-md-5 col-sm-5' searchSize: 'col-lg-5 col-md-5 col-sm-5',
skipTableHead: true
}); });
// Keep the table header fixed while allowing the table body to scroll and still use <table> element
html = "<table class=\"table table-condensed\" id=\"groups-table-header\">" + generator.buildHeader() + "</table>\n";
$(html).insertBefore('#groups-container .list-table-container');
$scope.groups = groups; $scope.groups = groups;
$scope.inventory_name = inventory_name; $scope.inventory_name = inventory_name;
@@ -595,7 +601,6 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
}); });
// Called after tree data is reloaded on refresh button click. // Called after tree data is reloaded on refresh button click.
if ($scope.removeGroupTreeRefreshed) { if ($scope.removeGroupTreeRefreshed) {
$scope.removeGroupTreeRefreshed(); $scope.removeGroupTreeRefreshed();

25
awx/ui/static/js/helpers/inventory.js
View File

@@ -18,10 +18,23 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
function (ApplyEllipsis) { function (ApplyEllipsis) {
return function () { return function () {
// Call to set or restore window resize // Call to set or restore window resize
var timeOut;
$(window).resize(function () { function setGroupsHeight() {
clearTimeout(timeOut); // Attempt to set the group height
timeOut = setTimeout(function () { var height;
if ($(window).width() > 1210) {
height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() -
($('.site-footer').outerHeight() * 2) - $('#groups-container .list-actions').outerHeight() - $('#groups-table-header').height() - 20;
$('#groups-container .list-table-container').height(height);
}
else {
$('#groups-container .list-table-container').height('auto');
}
}
setGroupsHeight();
$(window).resize(_.debounce(function() {
// Hack to stop group-name div slipping to a new line // Hack to stop group-name div slipping to a new line
$('#groups_table .name-column').each(function () { $('#groups_table .name-column').each(function () {
var td_width = $(this).width(), var td_width = $(this).width(),
@@ -33,8 +46,8 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
}); });
ApplyEllipsis('#groups_table .group-name a'); ApplyEllipsis('#groups_table .group-name a');
ApplyEllipsis('#hosts_table .host-name a'); ApplyEllipsis('#hosts_table .host-name a');
}, 100); setGroupsHeight();
}); }, 500));
}; };
} }
]) ])

6
awx/ui/static/js/lists/InventoryGroups.js
View File

@@ -16,7 +16,7 @@ angular.module('InventoryGroupsDefinition', [])
hover: false, hover: false,
hasChildren: true, hasChildren: true,
filterBy: '{ show: true }', filterBy: '{ show: true }',
'class': 'table-condensed table-no-border', 'class': 'table-no-border',
fields: { fields: {
name: { name: {
@@ -26,7 +26,7 @@ angular.module('InventoryGroupsDefinition', [])
columnClick: "showHosts(group.id,group.group_id, false)", columnClick: "showHosts(group.id,group.group_id, false)",
ngClass: "group.selected_class", ngClass: "group.selected_class",
hasChildren: true, hasChildren: true,
columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-8', columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-9',
nosort: true, nosort: true,
awDroppable: "{{ group.isDroppable }}", awDroppable: "{{ group.isDroppable }}",
awDraggable: "{{ group.isDraggable }}", awDraggable: "{{ group.isDraggable }}",
@@ -63,7 +63,7 @@ angular.module('InventoryGroupsDefinition', [])
fieldActions: { fieldActions: {
columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-4', columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
sync_status: { sync_status: {
mode: 'all', mode: 'all',

4
awx/ui/static/js/lists/InventoryHosts.js
View File

@@ -28,7 +28,7 @@ angular.module('InventoryHostsDefinition', [])
label: 'Hosts', label: 'Hosts',
ngClick: "editHost(host.id)", ngClick: "editHost(host.id)",
searchPlaceholder: "search_place_holder", searchPlaceholder: "search_place_holder",
columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-8', columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-9',
dataHostId: "{{ host.id }}", dataHostId: "{{ host.id }}",
dataType: "host", dataType: "host",
awDraggable: "true" awDraggable: "true"
@@ -51,7 +51,7 @@ angular.module('InventoryHostsDefinition', [])
fieldActions: { fieldActions: {
columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-4', columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
enabled_flag: { enabled_flag: {
iconClass: "{{ 'fa icon-enabled-' + host.enabled }}", iconClass: "{{ 'fa icon-enabled-' + host.enabled }}",

24
awx/ui/static/less/ansible-ui.less
View File

@@ -1324,6 +1324,16 @@ input[type="checkbox"].checkbox-no-label {
margin-bottom: 0; margin-bottom: 0;
} }
#groups-table-header {
margin-bottom: 0;
}
#groups-container {
.list-table-container {
overflow: auto;
}
}
#inventories_table i[class*="icon-job-"], #inventories_table i[class*="icon-job-"],
#home_groups_table i[class*="icon-job-"] { #home_groups_table i[class*="icon-job-"] {
margin-left: 10px; margin-left: 10px;
@@ -1664,18 +1674,6 @@ tr td button i {
} }
/* Portrait tablet to landscape and desktop */
/*@media (max-width: 1200px) {
.site-footer {
.logo {
text-align: center;
padding-top: 20px;
margin-bottom: 10px;
}
}
}*/
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 1199px) {
.level-1, .level-1,
@@ -1709,6 +1707,7 @@ tr td button i {
} }
#hosts-container.col-lg-6 { #hosts-container.col-lg-6 {
margin-top: 15px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
.well { .well {
@@ -1804,6 +1803,7 @@ tr td button i {
} }
#hosts-container.col-lg-6 { #hosts-container.col-lg-6 {
margin-toop: 15px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }

105
awx/ui/static/lib/ansible/list-generator.js
View File

@@ -12,14 +12,18 @@
angular.module('ListGenerator', ['GeneratorHelpers']) angular.module('ListGenerator', ['GeneratorHelpers'])
.factory('GenerateList', ['$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon', .factory('GenerateList', ['$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon',
'Column', 'DropDown', 'NavigationLink', 'Button', 'SelectIcon', 'Breadcrumbs', 'Column', 'DropDown', 'NavigationLink', 'Button', 'SelectIcon', 'Breadcrumbs',
function ($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink, Button, SelectIcon, function ($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink,
Breadcrumbs) { Button, SelectIcon, Breadcrumbs) {
return { return {
setList: function (list) { setList: function (list) {
this.list = list; this.list = list;
}, },
setOptions: function(options) {
this.options = options;
},
attr: Attr, attr: Attr,
icon: Icon, icon: Icon,
@@ -60,6 +64,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
element = angular.element(document.getElementById('htmlTemplate')); element = angular.element(document.getElementById('htmlTemplate'));
} }
this.setOptions(options);
this.setList(list); this.setList(list);
element.html(this.build(options)); // Inject the html element.html(this.build(options)); // Inject the html
@@ -292,46 +297,10 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
html += (options.mode === 'summary') ? ' table-summary' : ''; html += (options.mode === 'summary') ? ' table-summary' : '';
html += "\" "; html += "\" ";
html += ">\n"; html += ">\n";
html += "<thead>\n";
html += "<tr>\n"; if (!options.skipTableHead) {
if (list.index) { html += this.buildHeader(options);
html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
} }
for (fld in list.fields) {
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
!(options.mode === 'lookup' && list.fields[fld].excludeModal !== undefined && list.fields[fld].excludeModal === true)) {
html += "<th class=\"list-header";
html += (list.fields[fld].columnClass) ? " " + list.fields[fld].columnClass : "";
html += "\" id=\"" + list.iterator + "-" + fld + "-header\"";
html += (list.fields[fld].columnShow) ? " ng-show=\"" + list.fields[fld].columnShow + "\" " : "";
html += (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) ? " ng-click=\"sort('" + list.iterator + "','" + fld + "')\"" : "";
html += ">";
html += list.fields[fld].label;
if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {
html += " <i class=\"fa ";
if (list.fields[fld].key) {
if (list.fields[fld].desc) {
html += "fa-sort-down";
} else {
html += "fa-sort-up";
}
} else {
html += "fa-sort";
}
html += "\"></i></a>";
}
html += "</th>\n";
}
}
if (options.mode === 'select' || options.mode === 'lookup') {
html += "<th>Select</th>";
} else if (options.mode === 'edit' && list.fieldActions) {
html += "<th class=\"actions-column";
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
html += "\">Actions</th>\n";
}
html += "</tr>\n";
html += "</thead>\n";
// table body // table body
html += "<tbody>\n"; html += "<tbody>\n";
@@ -460,8 +429,58 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
} }
} }
return html;
},
buildHeader: function(options) {
var list = this.list,
fld, html;
if (options === undefined) {
options = this.options;
}
html = "<thead>\n";
html += "<tr>\n";
if (list.index) {
html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
}
for (fld in list.fields) {
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
!(options.mode === 'lookup' && list.fields[fld].excludeModal !== undefined && list.fields[fld].excludeModal === true)) {
html += "<th class=\"list-header";
html += (list.fields[fld].columnClass) ? " " + list.fields[fld].columnClass : "";
html += "\" id=\"" + list.iterator + "-" + fld + "-header\"";
html += (list.fields[fld].columnShow) ? " ng-show=\"" + list.fields[fld].columnShow + "\" " : "";
html += (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) ? " ng-click=\"sort('" + list.iterator + "','" + fld + "')\"" : "";
html += ">";
html += list.fields[fld].label;
if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {
html += " <i class=\"fa ";
if (list.fields[fld].key) {
if (list.fields[fld].desc) {
html += "fa-sort-down";
} else {
html += "fa-sort-up";
}
} else {
html += "fa-sort";
}
html += "\"></i></a>";
}
html += "</th>\n";
}
}
if (options.mode === 'select' || options.mode === 'lookup') {
html += "<th>Select</th>";
} else if (options.mode === 'edit' && list.fieldActions) {
html += "<th class=\"actions-column";
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
html += "\">Actions</th>\n";
}
html += "</tr>\n";
html += "</thead>\n";
return html; return html;
} }
}; };
} }]);
]);