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

Merge pull request #614 from mabashian/list-view-css

Browse Source 
Merging - List view CSS updates
This commit is contained in:
Michael Abashian 2016-01-13 14:39:31 -05:00
commit 27bc2c99b2
33 changed files with 256 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
awx/ui/client/legacy-styles/ansible-ui.less
View File

@ -1167,13 +1167,6 @@ input[type="checkbox"].checkbox-no-label {
color: @warning;
}
.badge {
padding: 2px 3px 3px 4px;
font-size: 10px;
font-weight: normal;
line-height: 1;
}
/* job_events page */
#jobevents_table {
@ -1423,10 +1416,6 @@ input[type="checkbox"].checkbox-no-label {
/* Inventory Edit */
#groups-container.col-lg-6 {
padding-right: 7px;
}
#hosts-container.col-lg-6 {
padding-left: 7px;
padding-right: 17px;

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

@ -7,7 +7,7 @@
*
*/
@import "src/shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/branding/colors.default.less";
table, tbody {
@ -43,6 +43,10 @@ table, tbody {
text-align: right;
}
.List-tableHeaderSort {
color: @list-header-icon;
}
.List-tableRow {
height: 40px;
font-size: 14px;
@ -97,3 +101,85 @@ table, tbody {
.List-actionButton + .List-actionButton {
margin-left: 15px;
}
.List-pagination {
margin-top: 20px;
font-size: 12px;
color: @list-pagin-text;
text-transform: uppercase;
height: 22px;
}
.List-paginationPager {
display: flex;
}
.List-paginationPager--pageof {
line-height: 22px;
margin-left: 10px;
}
.List-paginationPager--item {
border-color: @list-pagin-bord;
}
.List-paginationPager--active {
border-color: @list-pagin-bord-act!important;
background-color: @list-pagin-bg-act!important;
}
.List-header {
display: flex;
}
.List-title {
flex: 1 0 auto;
display: flex;
}
.List-titleBadge {
font-size: 11px;
font-weight: normal;
padding: 1px 10px;
height: 14px;
margin: 3px 0;
background-color: @list-title-badge;
}
.List-titleText {
color: @list-title-txt;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
text-transform: uppercase;
}
.List-actions {
justify-content: flex-end;
display: flex;
}
.List-buttonSubmit {
transition: background-color 0.2s;
background-color: @submit-button-bg;
color: @submit-button-text;
}
.List-buttonSubmit:hover,
.List-buttonSubmit:focus {
color: @submit-button-text;
background-color: @submit-button-bg-hov;
}
.List-buttonDefault {
transition: background-color 0.2s;
background-color: @btn-bg;
color: @btn-txt;
border-color: @btn-bord;
}
.List-buttonDefault:hover,
.List-buttonDefault:focus {
background-color: @btn-bg-hov;
color: @btn-txt;
}

7
awx/ui/client/src/forms/Credentials.js
View File

@ -21,12 +21,7 @@ export default
forceListeners: true,
actions: {
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
}
},
fields: {

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

@ -328,12 +328,6 @@ export default
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshSchedules()"
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
}
},
fields: {

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

@ -288,12 +288,6 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshSchedules()"
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
}
},
fields: {

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

@ -240,7 +240,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', listGenerator.name,
generator = GenerateList;
// Inject the list html
generator.inject(InventoryHosts, { scope: host_scope, mode: 'edit', id: 'hosts-container', searchSize: 'col-lg-6 col-md-6 col-sm-6' });
generator.inject(InventoryHosts, { scope: host_scope, mode: 'edit', id: 'host-list-container', searchSize: 'col-lg-6 col-md-6 col-sm-6' });
// Load data
HostsReload({ scope: host_scope, group_id: group_id, inventory_id: inventory_id, parent_scope: group_scope, pageSize: pageSize });

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

@ -9,6 +9,7 @@
export default function(){
return {
name: 'inventory_scripts' ,
listTitle: 'Inventory Scripts',
iterator: 'inventory_script',
index: false,
hover: false,
@ -39,14 +40,9 @@ export default function(){
add: {
mode: 'all', // One of: edit, select, all
ngClick: 'addCustomInv()',
awToolTip: 'Create a new credential'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
icon: "icon-comments-alt",
mode: 'edit',
awFeature: 'activity_streams'
awToolTip: 'Create a new custom inventory',
actionClass: 'btn List-buttonSubmit',
buttonContent: '+ ADD'
}
},

7
awx/ui/client/src/lists/CloudCredentials.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
@ -49,8 +49,9 @@ export default
add: {
mode: 'all', // One of: edit, select, all
ngClick: 'addCredential()',
"class": 'btn-sm',
awToolTip: 'Create a new credential'
awToolTip: 'Create a new credential',
actionClass: 'btn btn-sm List-buttonSubmit',
buttonContent: '+ ADD'
}
},

13
awx/ui/client/src/lists/Credentials.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
@ -15,6 +15,7 @@ export default
iterator: 'credential',
selectTitle: 'Add Credentials',
editTitle: 'Credentials',
listTitle: 'Credentials',
selectInstructions: "<p>Select existing credentials by clicking each credential or checking the related checkbox. When " +
"finished, click the blue <em>Select</em> button, located bottom right.</p> <p>Create a brand new credential by clicking ",
index: false,
@ -46,13 +47,9 @@ export default
add: {
mode: 'all', // One of: edit, select, all
ngClick: 'addCredential()',
awToolTip: 'Create a new credential'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
awToolTip: 'Create a new credential',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

9
awx/ui/client/src/lists/HomeGroups.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('HomeGroupListDefinition', [])
@ -161,12 +161,7 @@ export default
},
actions: {
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'all',
awFeature: 'activity_streams'
}
}
});

9
awx/ui/client/src/lists/HomeHosts.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('HomeHostListDefinition', [])
@ -94,12 +94,7 @@ export default
},
actions: {
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'all',
awFeature: 'activity_streams'
}
}
});

14
awx/ui/client/src/lists/Inventories.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('InventoriesListDefinition', [])
@ -13,6 +13,7 @@ export default
iterator: 'inventory',
selectTitle: 'Add Inventories',
editTitle: 'Inventories',
listTitle: 'Inventories',
selectInstructions: "Click on a row to select it, and click Finished when done. Click the <i class=\"icon-plus\"></i> " +
"button to create a new inventory.",
index: false,
@ -83,14 +84,9 @@ export default
add: {
mode: 'all', // One of: edit, select, all
ngClick: 'addInventory()',
awToolTip: 'Create a new inventory'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
icon: "icon-comments-alt",
mode: 'edit',
awFeature: 'activity_streams'
awToolTip: 'Create a new inventory',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

42
awx/ui/client/src/lists/InventoryGroups.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('InventoryGroupsDefinition', [])
.value('InventoryGroups', {
@ -11,6 +11,7 @@ export default
name: 'groups',
iterator: 'group',
editTitle: '{{ inventory.name }}',
listTitle: 'Groups',
showTitle: false,
well: true,
index: false,
@ -82,44 +83,33 @@ export default
},
actions: {
create: {
refresh: {
mode: 'all',
ngClick: "createGroup()",
awToolTip: "Create a new group"
},
properties: {
mode: 'all',
awToolTip: "Edit inventory properties",
ngClick: 'editInventoryProperties()'
awToolTip: "Refresh the page",
ngClick: "refreshGroups()",
ngShow: "socketStatus == 'error'",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
},
launch: {
mode: 'all',
ngShow: 'inventory.can_run_ad_hoc_commands',
ngClick: 'populateAdhocForm()',
awToolTip: "Run a command on the selected inventory"
awToolTip: "Run a command on the selected inventory",
actionClass: 'btn List-buttonDefault',
buttonContent: 'RUN COMMANDS'
// TODO: set up a tip watcher and change text based on when
// things are selected/not selected. This is started and
// commented out in the inventory controller within the watchers.
// awToolTip: "{{ adhocButtonTipContents }}",
// dataTipWatch: "adhocButtonTipContents"
},
refresh: {
create: {
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshGroups()",
ngShow: "socketStatus == 'error'"
},
stream: {
ngClick: "showGroupActivity()",
awToolTip: "View Activity Stream",
mode: 'all',
awFeature: 'activity_streams'
},
help: {
mode: 'all',
awToolTip: "Get help building your inventory",
ngClick: "showGroupHelp()",
id: "inventory-summary-help"
ngClick: "createGroup()",
awToolTip: "Create a new group",
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

23
awx/ui/client/src/lists/InventoryHosts.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('InventoryHostsDefinition', [])
.value('InventoryHosts', {
@ -11,6 +11,7 @@ export default
name: 'hosts',
iterator: 'host',
editTitle: '{{ selected_group }}',
listTitle: 'Hosts',
showTitle: false,
well: true,
index: false,
@ -92,23 +93,21 @@ export default
ngDisabled: 'systemTrackingDisabled',
ngShow: 'hostsSelected'
},
create: {
mode: 'all',
ngClick: "createHost()",
awToolTip: "Create a new host"
},
refresh: {
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshGroups()",
ngShow: "socketStatus == 'error'"
ngShow: "socketStatus == 'error'",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
},
stream: {
ngClick: "showHostActivity()",
awToolTip: "View Activity Stream",
create: {
mode: 'all',
awFeature: 'activity_streams'
},
ngClick: "createHost()",
awToolTip: "Create a new host",
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
}
});

6
awx/ui/client/src/lists/JobEvents.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('JobEventsListDefinition', [])
@ -97,7 +97,9 @@ export default
refresh: {
mode: 'all',
awToolTip: 'Refresh the page',
ngClick: 'refresh()'
ngClick: 'refresh()',
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
}
},

9
awx/ui/client/src/lists/JobHosts.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('JobHostDefinition', [])
@ -112,17 +112,18 @@ export default
dataPlacement: 'left',
dataContainer: "body",
mode: 'all',
'class': 'btn-xs btn-help',
actionClass: 'btn-xs btn-help',
awToolTip: 'Click for help',
dataTitle: 'Job Host Summary',
id: 'jobhost-help-button'
},
refresh: {
mode: 'all',
'class': 'btn-xs',
awToolTip: "Refresh the page",
ngClick: "refresh()",
ngShow: "host_id == null" //don't show when viewing from inventory->hosts
ngShow: "host_id == null", //don't show when viewing from inventory->hosts
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
}
}

13
awx/ui/client/src/lists/JobTemplates.js
View File

@ -13,6 +13,7 @@ export default
iterator: 'job_template',
selectTitle: 'Add Job Template',
editTitle: 'Job Templates',
listTitle: 'Job Templates',
selectInstructions: "Click on a row to select it, and click Finished when done. Use the <i class=\"icon-plus\"></i> " +
"button to create a new job template.",
index: false,
@ -44,15 +45,9 @@ export default
ngClick: 'addJobTemplate()',
basePaths: ['job_templates'],
awToolTip: 'Create a new template',
ngHide: 'portalMode===true'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
icon: "icon-comments-alt",
awFeature: 'activity_streams',
mode: 'edit',
ngHide: 'portalMode===true'
ngHide: 'portalMode===true',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

12
awx/ui/client/src/lists/Organizations.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('OrganizationListDefinition', [])
@ -37,13 +37,9 @@ export default
mode: 'all', // One of: edit, select, all
ngClick: 'addOrganization()',
awToolTip: 'Create a new organization',
awFeature: 'multiple_organizations'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
awFeature: 'multiple_organizations',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

17
awx/ui/client/src/lists/Projects.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('ProjectsListDefinition', [])
@ -13,6 +13,7 @@ export default
iterator: 'project',
selectTitle: 'Add Project',
editTitle: 'Projects',
listTitle: 'Projects',
selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
'<em>Select</em> button, located bottom right.</p><p>Create a new project by clicking the <i class=\"fa fa-plus\"></i> button.</p>',
index: false,
@ -60,19 +61,17 @@ export default
add: {
mode: 'all', // One of: edit, select, all
ngClick: 'addProject()',
awToolTip: 'Create a new project'
awToolTip: 'Create a new project',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
},
refresh: {
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refresh()",
ngShow: "socketStatus == 'error'"
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
ngShow: "socketStatus == 'error'",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
}
},

12
awx/ui/client/src/lists/ScanJobs.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('ScanJobsListDefinition', [])
@ -35,15 +35,9 @@ export default
ngClick: 'addScanJobTemplate()',
basePaths: ['job_templates'],
awToolTip: 'Create a new template',
ngHide: 'portalMode===true'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
icon: "icon-comments-alt",
mode: 'edit',
ngHide: 'portalMode===true',
awFeature: 'activity_streams'
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

20
awx/ui/client/src/lists/Schedules.js
View File

@ -45,21 +45,19 @@ export default
},
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'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
add: {
mode: 'all',
ngClick: 'addSchedule()',
awToolTip: 'Add a new schedule',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

11
awx/ui/client/src/lists/Streams.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('StreamListDefinition', [])
@ -255,14 +255,17 @@ export default
close: {
mode: 'all',
awToolTip: "Close Activity Stream view",
ngClick: "closeStream()"
ngClick: "closeStream()",
actionClass: 'btn List-buttonDefault',
buttonContent: 'CLOSE'
},
refresh: {
mode: 'all',
id: 'activity-stream-refresh-btn',
'class': 'btn-xs',
awToolTip: "Refresh the page",
ngClick: "refreshStream()"
ngClick: "refreshStream()",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
}
},

13
awx/ui/client/src/lists/Teams.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('TeamsListDefinition', [])
@ -13,6 +13,7 @@ export default
iterator: 'team',
selectTitle: 'Add Team',
editTitle: 'Teams',
listTitle: 'Teams',
selectInstructions: "Click on a row to select it, and click Finished when done. Click the <i class=\"icon-plus\"></i> " +
"button to create a new team.",
index: false,
@ -44,13 +45,9 @@ export default
add: {
mode: 'all', // One of: edit, select, all
ngClick: 'addTeam()',
awToolTip: 'Create a new team'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
awToolTip: 'Create a new team',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

14
awx/ui/client/src/lists/Users.js
View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
export default
angular.module('UserListDefinition', [])
@ -13,6 +13,7 @@ export default
iterator: 'user',
selectTitle: 'Add Users',
editTitle: 'Users',
listTitle: 'Users',
selectInstructions: '<p>Select existing users by clicking each user or checking the related checkbox. When finished, click the blue ' +
'<em>Select</em> button, located bottom right.</p> <p>When available, a brand new user can be created by clicking the ' +
'<i class=\"fa fa-plus\"></i> button.</p>',
@ -41,14 +42,9 @@ export default
mode: 'all', // One of: edit, select, all
ngClick: 'addUser()',
basePaths: ['organizations', 'users'], // base path must be in list, or action not available
"class": 'btn-xs',
awToolTip: 'Create a new user'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
awToolTip: 'Create a new user',
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD'
}
},

8
awx/ui/client/src/management-jobs/management-jobs.list.js
View File

@ -22,13 +22,7 @@ export default function(){
}
},
actions: {
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
icon: "icon-comments-alt",
mode: 'edit',
awFeature: 'activity_streams'
}
},
fieldActions: {
submit: {

6
awx/ui/client/src/partials/inventory-manage.html
View File

@ -3,9 +3,11 @@
<div class="row">
<div id="groups-container" class="col-lg-6">
<div id="group-list-container"></div>
<div id="group-list-container" class="Panel"></div>
</div>
<div id="hosts-container" class="col-lg-6">
<div id="host-list-container" class="Panel"></div>
</div>
<div id="hosts-container" class="col-lg-6"></div>
</div>
<div id="inventory-modal-container"></div>

3
awx/ui/client/src/partials/jobs.html
View File

@ -1,8 +1,5 @@
<div class="tab-pane" id="jobs-page">
<div ng-cloak id="htmlTemplate" class="Panel">
<div class="row">
<div class="col-md-12" id="breadcrumbs"></div>
</div>
<div id="refresh-row" class="row" ng-show="socketStatus == 'error'">
<div class="col-lg-12">

11
awx/ui/client/src/permissions/shared/permissions.form.js
View File

@ -18,17 +18,6 @@ export default function() {
well: true, //Wrap the form with TB well
forceListeners: true,
stream: {
'class': "btn-primary btn-xs activity-btn",
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
awFeature: 'activity_streams',
dataPlacement: "top",
icon: "icon-comments-alt",
mode: 'edit',
iconSize: 'large'
},
fields: {
category: {
label: 'Permission Type',

6
awx/ui/client/src/permissions/shared/permissions.list.js
View File

@ -48,12 +48,6 @@
ngClick: 'addPermission()',
awToolTip: 'Add a new permission',
ngShow: 'PermissionAddAllowed'
},
stream: {
ngClick: "showActivity()",
awToolTip: "View Activity Stream",
mode: 'edit',
awFeature: 'activity_streams'
}
},

8
awx/ui/client/src/shared/branding/colors.default.less
View File

@ -5,7 +5,7 @@
@default-icon-hov: #D7D7D7; // also selected button
@default-border: #E8E8E8;
@default-second-border: #E1E1E1;
@default-bg: #FFFFFF; // also slected btn txt
@default-bg: #FFFFFF; // also selected btn txt
@default-secondary-bg: #FCFCFC; // page/input field bg, just adds depth
@default-tertiary-bg: #FAFAFA; // hover bg, alt-list
@default-err: #FF5850;
@ -48,6 +48,12 @@
@list-actn-del-bg-hov: @default-err;
@list-actn-bord-hov: @default-link;
@list-row-select-bord: @default-link;
@list-pagin-text: @default-interface-txt;
@list-pagin-bord: @default-second-border;
@list-pagin-bord-act: @default-icon-hov;
@list-pagin-bg-act: @default-icon-hov;
@list-title-txt: @default-interface-txt;
@list-title-badge: @default-icon-hov;
// tooltups
@tooltip-bg: @default-interface-txt;

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

@ -734,31 +734,39 @@ angular.module('GeneratorHelpers', [systemStatus.name])
set = params.set,
html = '';
html += "<!-- Paginate Widget -->\n";
html += "<div id=\"" + iterator + "-pagination\" class=\"row page-row\">\n";
html += "<div id=\"" + iterator + "-pagination\" class=\"List-pagination row page-row\">\n";
html += "<div class=\"col-lg-8 col-md-8\">\n";
html += "<ul id=\"pagination-links\" class=\"pagination\" ng-hide=\"" + iterator + "HidePaginator || " + iterator + "_num_pages <= 1\">\n";
html += "<li ng-hide=\"" + iterator + "_page -5 <= 1 \"><a href id=\"first-page-set\" ng-click=\"getPage(1,'" + set + "','" + iterator + "')\">" +
html += "<div class=\"List-paginationPager\" ng-hide=\"" + iterator + "HidePaginator || " + iterator + "_num_pages <= 1\">";
html += "<ul id=\"pagination-links\" class=\"pagination\">\n";
html += "<li class=\"List-paginationPager--item\" ng-hide=\"" + iterator + "_page -5 <= 1 \"><a href id=\"first-page-set\" ng-click=\"getPage(1,'" + set + "','" + iterator + "')\">" +
"<i class=\"fa fa-angle-double-left\"></i></a></li>\n";
html += "<li><a href " +
html += "<li class=\"List-paginationPager--item\"><a href " +
"id=\"previous-page\" ng-click=\"getPage(" + iterator + "_page - 1,'" + set + "','" + iterator + "')\">" +
"<i class=\"fa fa-angle-left\"></i></a></li>\n";
// html += "<li ng-repeat=\"page in " + iterator + "_page_range\" ng-class=\"pageIsActive(page,'" + iterator + "')\">" +
// "<a href id=\"{{ 'link-to-page-' + page }}\" ng-click=\"getPage(page,'" + set + "','" + iterator + "')\">{{ page }}</a></li>\n";
html += "<li ng-repeat=\"page in " + iterator + "_page_range\" ng-class=\"pageIsActive(page,'" + iterator + "')\">" +
"<a href id=\"{{ 'page-' + page }}\" ng-click=\"getPage(page,'" + set + "','" + iterator + "')\">{{ page }}</a></li>\n";
html += "<li class=\"List-paginationPager--item\" ng-repeat=\"page in " + iterator + "_page_range\" ng-class=\"pageIsActive(page,'" + iterator + "')\">" +
"<a href id=\"{{ 'page-' + page }}\" ng-click=\"getPage(page,'" + set + "','" + iterator + "')\" ng-class=\"{\'List-paginationPager--active\': pageIsActive(page,'" + iterator + "')}\">{{ page }}</a></li>\n";
html += "<li ng-hide=\"" + iterator + "_page + 1 > " + iterator + "_num_pages\"><a href id=\"next-page\" ng-click=\"" +
html += "<li class=\"List-paginationPager--item\" ng-hide=\"" + iterator + "_page + 1 > " + iterator + "_num_pages\"><a href id=\"next-page\" ng-click=\"" +
"getPage(" + iterator + "_page + 1,'" + set + "','" + iterator + "')\"><i class=\"fa fa-angle-right\"></i></a></li>\n";
html += "<li ng-hide=\"" + iterator + "_page +4 >= " + iterator + "_num_pages\"><a href id=\"last-page-set\" ng-click=\"" +
html += "<li class=\"List-paginationPager--item\" ng-hide=\"" + iterator + "_page +4 >= " + iterator + "_num_pages\"><a href id=\"last-page-set\" ng-click=\"" +
"getPage(" + iterator + "_num_pages,'" + set + "','" + iterator + "')\"><i class=\"fa fa-angle-double-right\"></i></a></li>\n";
html += "</ul>\n";
html += "<span class=\"List-paginationPager--pageof\">Page <span id=\"current-page\">{{ " + iterator + "_page }}</span> of <span id=\"total-pages\">{{ " + iterator + "_num_pages }}</span></span>";
html += "</div>";
html += "</div>\n";
html += "<div class=\"col-lg-4 col-md-4\" ng-hide=\"" + iterator + "_mode == 'lookup'\">\n";
html += "<div id=\"pagination-labels\" class=\"page-label\">\n";
html += "Page <span id=\"current-page\">{{ " + iterator + "_page }}</span> of <span id=\"total-pages\">{{ " + iterator + "_num_pages }}</span> (<span id=\"total-items\">{{ " + iterator + "_total_rows | number:0 }}</span> items)";
html += "<div id=\"pagination-labels\" class=\"page-label\" ng-hide=\"(" + iterator + "_total_rows | number:0) < 1\">\n";
html += "<span id=\"total-items\">ITEMS&nbsp;";
html += "<span>{{ (" + iterator + "_total_rows | number:0) < 1 ? 0 : (" + iterator + "_page-1)*" + iterator + "_page_size+1}}</span>";
html += "<span>&ndash;{{ (" + iterator + "_total_rows | number:0) < (" + iterator + "_page)*" + iterator + "_page_size ? (" + iterator + "_total_rows | number:0) : (" + iterator + "_page)*" + iterator + "_page_size}}</span>";
html += "<span>&nbsp;OF&nbsp;</span>";
html += "<span>{{ " + iterator + "_total_rows | number:0 }}</span>";
html += "</span>";
html += "</div>\n";
html += "</div>\n";
html += "</div>\n";

5
awx/ui/client/src/shared/list-generator/list-actions.partial.html
View File

@ -4,14 +4,12 @@
<button
toolbar-button
mode="options.mode"
icon-name="{{name}}"
aw-tool-tip="{{options.awToolTip}}"
data-tip-watch="{{options.dataTipWatch}}"
data-placement="{{options.dataPlacement}}"
data-container="{{options.dataContainer}}"
class="options.class"
class="{{options.actionClass}}"
data-title="{{options.dataTitle}}"
icon-size="{{options.iconSize}}"
ng-disabled="{{options.ngDisabled}}"
ng-click="$eval(options.ngClick)"
ng-hide="isHiddenByOptions(options) ||
@ -19,6 +17,7 @@
hiddenInCurrentMode(options.mode)"
toolbar="true"
aw-feature="{{options.awFeature}}">
<span ng-bind-html="options.buttonContent"></span>
</button>
</span>

87
awx/ui/client/src/shared/list-generator/list-generator.factory.js
View File

@ -80,13 +80,13 @@
*
* | Attribute | Description |
* | --------- | ----------- |
* | actionclass | Set to a string containing any CSS classes to add to the button. |
* | awToolTip | Adds the aw-tool-tip directive. Set to the value of the HTML or text to dislay in the tooltip. |
* | 'class' | Set to a string containing any CSS classes to add to the &lt;a&gt; element. |
* | buttonContent | String containing button content. HTML is accepted in this string. |
* | dataPlacement | Set to the Bootstrip tooltip placement - right, left, top, bottom, etc. |
* | dataTipWatch | Set to the $scope variable that contains the text and HTML to display in the tooltip. A $scope.$watch will be added to the variable so that anytime its value changes the tooltip will change. |
* | iconClass | By default the CSS icon class is set by the SelectIcon() method in js/shared/generator-helpers.js. The icon is based on the action name. Use iconClass to override the default value. |
* | mode | One of 'all' or 'edit'. Will generally be 'all'. Note that field actions are not displayed when the list is in 'lookup' mode. |
* | ngClass | Adds the ng-class directive. Set to the JS expressino that ng-class will evaluate. |
* | ngClass | Adds the ng-class directive. Set to the JS expression that ng-class will evaluate. |
* | ngShow | Adds the ng-show directive. Set to the JS expression that ng-show will evaluate. |
*
* ##Actions
@ -299,6 +299,30 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
list = this.list,
base, size, action, fld, cnt, field_action, fAction, itm;
html += "<div class=\"List-header\">";
html += "<div class=\"List-title\">";
if (list.listTitle) {
html += "<div class=\"List-titleText\">" + list.listTitle + "</div>";
html += "<span class=\"badge List-titleBadge\">{{(" + list.iterator + "_total_rows | number:0)}}</span>";
}
html += "</div>";
html += "<div class=\"List-actions\">";
html += "<div class=\"list-actions\" ng-include=\"'" +
templateUrl('shared/list-generator/list-actions') +
"'\">\n";
for (action in list.actions) {
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
}
html += "</div>\n";
html += "</div>";
html += "</div>";
if (options.mode === 'edit' && list.editInstructions) {
html += "<div class=\"alert alert-info alert-block\">\n";
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
@ -317,15 +341,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += "<div class=\"List-well\">\n";
}
if (options.activityStream) {
// Add a title row
html += "<div class=\"row\">\n";
html += "<div class=\"col-lg-12\">\n";
html += "<h5>{{ streamTitle }}</h5>\n";
html += "</div>\n";
html += "</div>\n";
}
if (options.showSearch=== undefined || options.showSearch === true) {
html += "<div class=\"row\">\n";
if (options.searchSize) {
@ -357,45 +372,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
mini: true
});
}
if (options.mode !== 'lookup') {
//actions
html += "<div class=\"";
if (options.searchSize && !options.listSize) {
// User supplied searchSize, calc the remaining
size = parseInt(options.searchSize.replace(/([A-Z]|[a-z]|\-)/g, ''));
size = (list.searchWidgets) ? list.searchWidgets * size : size;
html += 'col-lg-' + (12 - size);
} else if (options.listSize) {
html += options.listSize;
} else if (options.mode === 'summary') {
html += 'col-lg-6';
} else if (options.id !== undefined) {
html += "col-lg-4";
} else {
html += "col-lg-8 col-md-6 col-sm-4 col-xs-3";
}
html += "\">\n";
html += "<div class=\"list-actions\" ng-include=\"'" +
templateUrl('shared/list-generator/list-actions') +
"'\">\n";
for (action in list.actions) {
list.actions[action] =
_.defaults(list.actions[action],
{ dataPlacement: "top"
});
}
html += "</div><!-- list-actions -->\n";
html += "</div><!-- list-actions-column -->\n";
} else {
//lookup
html += "<div class=\"col-lg-7\"></div>\n";
}
html += "</div><!-- row -->\n";
}
@ -594,11 +570,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
function buildSelectAll() {
return $('<th>')
.addClass('col-xs-1 select-column')
.addClass('col-xs-1 select-column List-tableHeader')
.append(
$('<select-all>')
.attr('selections-empty', 'selectedItems.length === 0')
.attr('items-length', list.name + '.length'));
.attr('items-length', list.name + '.length')
.attr('label', ''));
}
if (options === undefined) {
@ -608,7 +585,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html = "<thead>\n";
html += "<tr class=\"List-tableHeaderRow\">\n";
if (list.index) {
html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs List-tableHeader\">#</th>\n";
}
if (list.multiSelect) {
@ -631,7 +608,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += ">";
html += list.fields[fld].label;
if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {
html += "<i class=\"fa ";
html += "<i class=\"List-tableHeaderSort fa ";
if (list.fields[fld].key) {
if (list.fields[fld].desc) {
html += "fa-sort-down";