From 77ccfc49f22da255c03ddb7d81645832eeec62f9 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Tue, 20 May 2014 14:04:36 -0400 Subject: [PATCH] Added custom scroll bar to inventory groups container. Moved group container auto-resize and height calc function to helper methods. Now using full window height, pushing footer off the page. Changed custom sroll directive to use the dark-thin theme. --- awx/ui/static/js/controllers/Inventories.js | 24 ++++++------ awx/ui/static/js/helpers/inventory.js | 43 ++++++++++++--------- awx/ui/static/js/lists/InventoryGroups.js | 2 + awx/ui/static/lib/ansible/directives.js | 4 +- awx/ui/static/lib/ansible/list-generator.js | 33 +++++++++------- 5 files changed, 58 insertions(+), 48 deletions(-) diff --git a/awx/ui/static/js/controllers/Inventories.js b/awx/ui/static/js/controllers/Inventories.js index f091acc66f..1c21e265c5 100644 --- a/awx/ui/static/js/controllers/Inventories.js +++ b/awx/ui/static/js/controllers/Inventories.js @@ -7,15 +7,15 @@ * Controller functions for the Inventory model. * */ - + 'use strict'; function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $compile, $filter, Rest, Alert, InventoryList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, ClearScope, ProcessErrors, GetBasePath, Wait, Stream, EditInventoryProperties, Find, Empty, LogViewer) { - + //ClearScope(); - + var list = InventoryList, defaultUrl = GetBasePath('inventory'), view = GenerateList, @@ -60,7 +60,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com list: list, url: defaultUrl }); - + PaginateInit({ scope: $scope, list: list, @@ -168,7 +168,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com $scope.removeHostSummaryReady(); } $scope.removeHostSummaryReady = $scope.$on('HostSummaryReady', function(e, event, data) { - + var html, title = "Recent Jobs"; Wait('stop'); if (data.count > 0) { @@ -182,7 +182,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com html += "\n"; html += "\n"; html += "\n"; - + data.results.forEach(function(row) { html += "\n"; html += "' + group.name + '. Use the Refresh button to monitor the status.', 'alert-info'); diff --git a/awx/ui/static/js/helpers/inventory.js b/awx/ui/static/js/helpers/inventory.js index 4ccee9528a..607de905e5 100644 --- a/awx/ui/static/js/helpers/inventory.js +++ b/awx/ui/static/js/helpers/inventory.js @@ -14,26 +14,31 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis 'InventoryHelper', 'InventoryFormDefinition', 'ParseHelper', 'SearchHelper', 'VariablesHelper', ]) -.factory('WatchInventoryWindowResize', ['ApplyEllipsis', - function (ApplyEllipsis) { +.factory('GetContainerHeight', [ function() { + return function() { + return $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() - + $('.site-footer').outerHeight() - $('#groups-container .list-actions').outerHeight() - $('#groups-table-header').height() - 15; + }; +}]) + +.factory('SetGroupContainerHeight', [ 'GetContainerHeight', function(GetContainerHeight) { + return function() { + var height; + if ($(window).width() > 1210) { + height = GetContainerHeight(); + $('#groups-container .list-table-container').height(height); + } + else { + $('#groups-container .list-table-container').height('auto'); + } + $('#groups-container .list-table-container').mCustomScrollbar("update"); + }; +}]) +.factory('WatchInventoryWindowResize', ['ApplyEllipsis', 'SetGroupContainerHeight', + function (ApplyEllipsis, SetGroupContainerHeight) { return function () { // Call to set or restore window resize - - function setGroupsHeight() { - // Attempt to set the group height - 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(); - + SetGroupContainerHeight(); $(window).resize(_.debounce(function() { // Hack to stop group-name div slipping to a new line $('#groups_table .name-column').each(function () { @@ -46,7 +51,7 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis }); ApplyEllipsis('#groups_table .group-name a'); ApplyEllipsis('#hosts_table .host-name a'); - setGroupsHeight(); + SetGroupContainerHeight(); }, 500)); }; } diff --git a/awx/ui/static/js/lists/InventoryGroups.js b/awx/ui/static/js/lists/InventoryGroups.js index 83ecb59227..00d2ad2499 100644 --- a/awx/ui/static/js/lists/InventoryGroups.js +++ b/awx/ui/static/js/lists/InventoryGroups.js @@ -17,6 +17,7 @@ angular.module('InventoryGroupsDefinition', []) hasChildren: true, filterBy: '{ show: true }', 'class': 'table-no-border', + awCustomScroll: true, fields: { name: { @@ -64,6 +65,7 @@ angular.module('InventoryGroupsDefinition', []) fieldActions: { columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3', + label: false, sync_status: { mode: 'all', diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js index fce48f8e82..2c549d982f 100644 --- a/awx/ui/static/lib/ansible/directives.js +++ b/awx/ui/static/lib/ansible/directives.js @@ -729,7 +729,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job scrollButtons: { enable: true }, - theme: 'dark-thick', + theme: 'dark-thin', mouseWheel: true, scrollInertia: 300, callbacks: { @@ -761,7 +761,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job $(this).find('.btn').toggleClass('btn-info'); } $(this).find('.btn').toggleClass('btn-default'); - + // Add data-after-toggle="functionName" to the btn-group, and we'll // execute here. The newly active choice is passed as a parameter. if ($(this).attr('data-after-toggle')) { diff --git a/awx/ui/static/lib/ansible/list-generator.js b/awx/ui/static/lib/ansible/list-generator.js index 5e1e000193..63fa260497 100644 --- a/awx/ui/static/lib/ansible/list-generator.js +++ b/awx/ui/static/lib/ansible/list-generator.js @@ -63,15 +63,15 @@ angular.module('ListGenerator', ['GeneratorHelpers']) } else { element = angular.element(document.getElementById('htmlTemplate')); } - + this.setOptions(options); this.setList(list); element.html(this.build(options)); // Inject the html - + if (options.prepend) { element.prepend(options.prepend); } - + if (options.append) { element.append(options.append); } @@ -84,10 +84,10 @@ angular.module('ListGenerator', ['GeneratorHelpers']) $compile(element)(this.scope); - // Reset the scope to prevent displaying old data from our last visit to this list + // Reset the scope to prevent displaying old data from our last visit to this list //this.scope[list.name] = null; this.scope[list.iterator] = []; - + // Remove any lingering tooltip and popover
elements $('.tooltip').each(function() { $(this).remove(); @@ -102,7 +102,7 @@ angular.module('ListGenerator', ['GeneratorHelpers']) try { $('#help-modal').empty().dialog('destroy'); } catch (e) { - //ignore any errors should the dialog not be initialized + //ignore any errors should the dialog not be initialized } /*if (options.mode === 'lookup') { @@ -126,8 +126,8 @@ angular.module('ListGenerator', ['GeneratorHelpers']) build: function (options) { // - // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML - // string to be injected into the current view. + // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML + // string to be injected into the current view. // var html = '', list = this.list, @@ -178,7 +178,7 @@ angular.module('ListGenerator', ['GeneratorHelpers']) html += "
\n"; html += "\n"; } - + if (options.showSearch=== undefined || options.showSearch === true) { html += "
\n"; if (list.name !== 'groups') { @@ -285,9 +285,11 @@ angular.module('ListGenerator', ['GeneratorHelpers']) html += (options.mode === 'edit' || options.mode === 'summary') ? list.editTitle : list.addTitle; html += "
\n"; } - + // table header row - html += "
\n"; + html += "
Actions\n";