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

Merging - List view CSS updates

awx/ui/client/legacy-styles/ansible-ui.less

@@ -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;

awx/ui/client/legacy-styles/lists.less

@@ -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;
+}

awx/ui/client/src/forms/Credentials.js

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

awx/ui/client/src/forms/JobTemplates.js

@@ -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: {

awx/ui/client/src/forms/Projects.js

@@ -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: {

awx/ui/client/src/helpers/Hosts.js

@@ -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 });

awx/ui/client/src/inventory-scripts/inventory-scripts.list.js

@@ -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'
+                awToolTip: 'Create a new custom inventory',
-            },
+                actionClass: 'btn List-buttonSubmit',
-            stream: {
+                buttonContent: '+ ADD'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                icon: "icon-comments-alt",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/lists/CloudCredentials.js

@@ -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'
             }
         },
 

awx/ui/client/src/lists/Credentials.js

@@ -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'
+                awToolTip: 'Create a new credential',
-            },
+                actionClass: 'btn List-buttonSubmit',
-            stream: {
+                buttonContent: '&#43; ADD'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/lists/HomeGroups.js

@@ -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'
-            }
         }
 
     });

awx/ui/client/src/lists/HomeHosts.js

@@ -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'
-            }
         }
 
     });

awx/ui/client/src/lists/Inventories.js

@@ -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'
+                awToolTip: 'Create a new inventory',
-            },
+                actionClass: 'btn List-buttonSubmit',
-            stream: {
+                buttonContent: '&#43; ADD'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                icon: "icon-comments-alt",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/lists/InventoryGroups.js

@@ -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: "Refresh the page",
-                awToolTip: "Create a new group"
+                ngClick: "refreshGroups()",
-            },
+                ngShow: "socketStatus == 'error'",
-            properties: {
+                actionClass: 'btn List-buttonDefault',
-                mode: 'all',
+                buttonContent: 'REFRESH'
-                awToolTip: "Edit inventory properties",
-                ngClick: 'editInventoryProperties()'
             },
             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: "createGroup()",
-                ngClick: "refreshGroups()",
+                awToolTip: "Create a new group",
-                ngShow: "socketStatus == 'error'"
+                actionClass: 'btn List-buttonSubmit',
-            },
+                buttonContent: '+ ADD'
-            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"
             }
         },
 

awx/ui/client/src/lists/InventoryHosts.js

@@ -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: {
+            create: {
-                ngClick: "showHostActivity()",
-                awToolTip: "View Activity Stream",
                 mode: 'all',
-                awFeature: 'activity_streams'
+                ngClick: "createHost()",
-            },
+                awToolTip: "Create a new host",
+                actionClass: 'btn List-buttonSubmit',
+                buttonContent: '+ ADD'
+            }
         }
 
     });

awx/ui/client/src/lists/JobEvents.js

@@ -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'
             }
         },
 

awx/ui/client/src/lists/JobHosts.js

@@ -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'
             }
         }
 

awx/ui/client/src/lists/JobTemplates.js

@@ -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'
+                ngHide: 'portalMode===true',
-            },
+                actionClass: 'btn List-buttonSubmit',
-            stream: {
+                buttonContent: '&#43; ADD'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                icon: "icon-comments-alt",
-                awFeature: 'activity_streams',
-                mode: 'edit',
-                ngHide: 'portalMode===true'
             }
         },
 

awx/ui/client/src/lists/Organizations.js

@@ -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'
+                awFeature: 'multiple_organizations',
-            },
+                actionClass: 'btn List-buttonSubmit',
-            stream: {
+                buttonContent: '+ ADD'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/lists/Projects.js

@@ -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'"
+                ngShow: "socketStatus == 'error'",
-            },
+                actionClass: 'btn List-buttonDefault',
-            stream: {
+                buttonContent: 'REFRESH'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/lists/ScanJobs.js

@@ -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: '+ ADD'
             }
         },
 

awx/ui/client/src/lists/Schedules.js

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

awx/ui/client/src/lists/Streams.js

@@ -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'
             }
         },
 

awx/ui/client/src/lists/Teams.js

@@ -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'
+                awToolTip: 'Create a new team',
-            },
+                actionClass: 'btn List-buttonSubmit',
-            stream: {
+                buttonContent: '&#43; ADD'
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/lists/Users.js

@@ -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',
-                awToolTip: 'Create a new user'
+                actionClass: 'btn List-buttonSubmit',
-            },
+                buttonContent: '&#43; ADD'
-            stream: {
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                mode: 'edit',
-                awFeature: 'activity_streams'
             }
         },
 

awx/ui/client/src/management-jobs/management-jobs.list.js

@@ -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: {

awx/ui/client/src/partials/inventory-manage.html

@@ -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>

awx/ui/client/src/partials/jobs.html

@@ -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">

awx/ui/client/src/permissions/shared/permissions.form.js

@@ -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',

awx/ui/client/src/permissions/shared/permissions.list.js

@@ -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'
             }
         },
 

awx/ui/client/src/shared/branding/colors.default.less

@@ -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;

awx/ui/client/src/shared/generator-helpers.js

@@ -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 += "<div class=\"List-paginationPager\" ng-hide=\"" + iterator + "HidePaginator || " + iterator + "_num_pages <= 1\">";
-            html += "<li ng-hide=\"" + iterator + "_page -5 <= 1 \"><a href id=\"first-page-set\" ng-click=\"getPage(1,'" + set + "','" + iterator + "')\">" +
+            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 + "')\">" +
+            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 + "')\">{{ page }}</a></li>\n";
+                "<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 += "<div id=\"pagination-labels\" class=\"page-label\" ng-hide=\"(" + iterator + "_total_rows | number:0) < 1\">\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 += "<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";

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

@@ -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>

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

@@ -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 <a> 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";