Installed FontAwesome 4. Modified form and list generation to force icon selection through a single method so that icons, icon sizes and button colors are all consistent. Everything seems to be working now with the exception of the status bubbles on list pages. Will need to modify ansible-ui.less anc change the unicode strings to new FontAwesome values.

2026-07-07 14:28:08 -02:30 · 2013-12-20 23:16:52 +00:00
parent e16e5a0dfa
commit d02d2ebf15
41 changed files with 944 additions and 1688 deletions
--- a/awx/ui/static/js/lists/CloudCredentials.js
+++ b/awx/ui/static/js/lists/CloudCredentials.js
@@ -46,8 +46,6 @@ angular.module('CloudCredentialsListDefinition', [])
        
        actions: {
            add: {
-                icon: 'icon-plus',
-                label: 'Create New',
                mode: 'all',                         // One of: edit, select, all
                ngClick: 'addCredential()',
                "class": 'btn-sm',
@@ -58,7 +56,7 @@ angular.module('CloudCredentialsListDefinition', [])
        fieldActions: {
            edit: {
                ngClick: "editCredential(\{\{ credential.id \}\})",
-                icon: 'icon-edit',
+                icon: 'fa-edit',
                label: 'Edit',
                "class": 'btn-sm',
                awToolTip: 'View/Edit credential'
@@ -66,7 +64,7 @@ angular.module('CloudCredentialsListDefinition', [])

            "delete": {
                ngClick: "deleteCredential(\{\{ credential.id \}\},'\{\{ credential.name \}\}')",
-                icon: 'icon-trash',
+                icon: 'fa-trash-o',
                label: 'Delete',
                "class": 'btn-sm',
                awToolTip: 'Delete credential'
--- a/awx/ui/static/js/lists/Credentials.js
+++ b/awx/ui/static/js/lists/Credentials.js
@@ -55,21 +55,14 @@ angular.module('CredentialsListDefinition', [])
        
        actions: {
            add: {
-                icon: 'icon-plus',
-                label: 'Create New',
                mode: 'all',                         // One of: edit, select, all
                ngClick: 'addCredential()',
-                "class": 'btn-sm',
                awToolTip: 'Create a new credential'
                },
            stream: {
-                'class': "btn-sm activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
@@ -77,7 +70,7 @@ angular.module('CredentialsListDefinition', [])
        fieldActions: {
            edit: {
                ngClick: "editCredential(\{\{ credential.id \}\})",
-                icon: 'icon-edit',
+                icon: 'fa-edit',
                label: 'Edit',
                "class": 'btn-sm',
                awToolTip: 'View/Edit credential'
@@ -85,7 +78,7 @@ angular.module('CredentialsListDefinition', [])

            "delete": {
                ngClick: "deleteCredential(\{\{ credential.id \}\},'\{\{ credential.name \}\}')",
-                icon: 'icon-trash',
+                icon: 'fa-trash',
                label: 'Delete',
                "class": 'btn-sm',
                awToolTip: 'Delete credential'
--- a/awx/ui/static/js/lists/Groups.js
+++ b/awx/ui/static/js/lists/Groups.js
@@ -31,14 +31,10 @@ angular.module('GroupListDefinition', [])
             help: {
                awPopOver: "Choose groups by clicking on each group you wish to add. Click the <em>Select</em> button to add the groups to " +
                    "the selected inventory group.",
-                dataPlacement: 'left',
                dataContainer: '#form-modal .modal-content',
-                icon: "icon-question-sign",
                mode: 'all',
-                'class': 'btn-xs btn-help pull-right',
                awToolTip: 'Click for help',
-                dataTitle: 'Adding Groups',
-                iconSize: 'large'
+                dataTitle: 'Adding Groups'
                }
            },

--- a/awx/ui/static/js/lists/HomeGroups.js
+++ b/awx/ui/static/js/lists/HomeGroups.js
@@ -11,12 +11,13 @@ angular.module('HomeGroupListDefinition', [])
    .value(
    'HomeGroupList', {
        
-        name: 'groups',
+        name: 'home_groups',
        iterator: 'group',
        editTitle: 'Groups',
        index: true,
        hover: true,
-        
+        well: true,
+
        fields: {
            name: {
                key: true,
@@ -111,13 +112,9 @@ angular.module('HomeGroupListDefinition', [])
        
        actions: {
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/HomeHosts.js
+++ b/awx/ui/static/js/lists/HomeHosts.js
@@ -82,13 +82,9 @@ angular.module('HomeHostListDefinition', [])
        
        actions: {
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/Hosts.js
+++ b/awx/ui/static/js/lists/Hosts.js
@@ -31,14 +31,10 @@ angular.module('HostListDefinition', [])
        actions: {
            help: {
                awPopOver: "Select hosts by clicking on each host you wish to add. Add the selected hosts to the group by clicking the <em>Select</em> button.",
-                dataPlacement: 'left',
                dataContainer: '#form-modal .modal-content',
-                icon: "icon-question-sign",
                mode: 'all',
-                'class': 'btn-xs btn-info btn-help',
                awToolTip: 'Click for help',
-                dataTitle: 'Selecting Hosts',
-                iconSize: 'large'
+                dataTitle: 'Selecting Hosts'
                }
            },

--- a/awx/ui/static/js/lists/Inventories.js
+++ b/awx/ui/static/js/lists/Inventories.js
@@ -82,17 +82,13 @@ angular.module('InventoriesListDefinition', [])
        
        actions: {
            add: {
-                label: 'Add',
-                icon: 'icon-plus',
                mode: 'all',             // One of: edit, select, all
                ngClick: 'addInventory()',
                awToolTip: 'Create a new inventory'
                },
            stream: {
-                label: 'Activity',
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
                icon: "icon-comments-alt",
                mode: 'all',
                ngShow: "user_is_superuser"
--- a/awx/ui/static/js/lists/InventoryGroups.js
+++ b/awx/ui/static/js/lists/InventoryGroups.js
@@ -24,7 +24,7 @@ angular.module('InventoryGroupsDefinition', [])
            name: {
                label: 'Group',
                key: true,
-                ngClick: "\{\{ 'GroupsEdit(' + group.id + ')' \}\}",
+                ngClick: "\{\{ 'showHosts(' + group.id + ')' \}\}",
                //ngClass: "\{\{ 'level' + group.level \}\}",
                hasChildren: true
                },
@@ -100,50 +100,31 @@ angular.module('InventoryGroupsDefinition', [])

        actions: {
            create: {
-                label: 'Add',
                mode: 'all',
-                icon: 'icon-plus',
                ngClick: "createGroup()",
                ngHide: "groupCreateHide", 
                ngDisabled: 'grpBtnDisabled',
-                awToolTip: "Create a new group", 
-                dataPlacement: 'top'
+                awToolTip: "Create a new group"
                },
-            edit: {
-                label: 'Edit',
+            properties: {
                mode: 'all',
-                icon: 'icon-wrench',
-                'class': "btn-sm", 
                ngHide: "groupEditHide", 
                ngDisabled: 'grpBtnDisabled',
-                awToolTip: "Edit inventory properties", 
-                dataPlacement: 'top'
+                awToolTip: "Edit inventory properties" 
                },
            refresh: {
-                label: 'Refresh',
-                dataPlacement: 'top',
-                icon: "icon-refresh",
                mode: 'all',
-                'class': 'btn-sm',
                awToolTip: "Refresh the page",
                ngClick: "refresh()"
                },
            stream: {
-                label: 'Activity',
-                'class': "activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
                ngShow: "user_is_superuser"
                },
             help: {
-                label: 'Help',
-                dataPlacement: 'top',
-                icon: "icon-question-sign",
                mode: 'all',
-                'class': 'btn-sm btn-help',
                awToolTip:
                    //"<div style=\"text-align:left;\"><img src=\"/static/img/cow.png\" style=\"width:50px; height:56px; float:left; padding-right:5px;\">" +
                    //"<p>Need help getting started creating your inventory?</p><p>Click here for help.</p></div>",
--- a/awx/ui/static/js/lists/InventoryHosts.js
+++ b/awx/ui/static/js/lists/InventoryHosts.js
@@ -99,31 +99,21 @@ angular.module('InventoryHostsDefinition', [])

        actions: {
            create: {
-                label: 'Add',
                mode: 'all',
-                icon: 'icon-plus',
                ngClick: "createGroup()",
                ngHide: "groupCreateHide", 
                ngDisabled: 'grpBtnDisabled',
-                awToolTip: "Create a new host", 
-                dataPlacement: 'top'
+                awToolTip: "Create a new host"
                },
            stream: {
-                label: 'Activity',
-                'class': "activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
                ngShow: "user_is_superuser"
                },
             help: {
-                label: 'Help',
                dataPlacement: 'top',
-                icon: "icon-question-sign",
                mode: 'all',
-                'class': 'btn-sm btn-help',
                awToolTip:
                    //"<div style=\"text-align:left;\"><img src=\"/static/img/cow.png\" style=\"width:50px; height:56px; float:left; padding-right:5px;\">" +
                    //"<p>Need help getting started creating your inventory?</p><p>Click here for help.</p></div>",
--- a/awx/ui/static/js/lists/JobEvents.js
+++ b/awx/ui/static/js/lists/JobEvents.js
@@ -86,13 +86,9 @@ angular.module('JobEventsListDefinition', [])
        
        actions: {
            refresh: {
-                dataPlacement: 'top',
-                icon: "icon-refresh",
                mode: 'all',
-                'class': 'btn-xs',
                awToolTip: "Refresh the page",
-                ngClick: "refresh()",
-                iconSize: 'large'
+                ngClick: "refresh()"
                }
            },

--- a/awx/ui/static/js/lists/JobHosts.js
+++ b/awx/ui/static/js/lists/JobHosts.js
@@ -111,22 +111,17 @@ angular.module('JobHostDefinition', [])
                    "</dl>\n",
                dataPlacement: 'left',
                dataContainer: "body",
-                icon: "icon-question-sign",
                mode: 'all',
                'class': 'btn-xs btn-help',
                awToolTip: 'Click for help',
                dataTitle: 'Job Host Summary',
-                id: 'jobhost-help-button',
-                iconSize: 'large'
+                id: 'jobhost-help-button'
                },
            refresh: {
-                dataPlacement: 'top',
-                icon: "icon-refresh",
                mode: 'all',
                'class': 'btn-xs',
                awToolTip: "Refresh the page",
                ngClick: "refresh()",
-                iconSize: 'large',
                ngShow: "host_id == null"    //don't show when viewing from inventory->hosts
                }
            },
--- a/awx/ui/static/js/lists/JobTemplates.js
+++ b/awx/ui/static/js/lists/JobTemplates.js
@@ -30,22 +30,16 @@ angular.module('JobTemplatesListDefinition', [])
        
        actions: {
            add: {
-                label: 'Create New',
-                icon: 'icon-plus',
                mode: 'all',                // One of: edit, select, all
                ngClick: 'addJobTemplate()',
-                "class": 'btn-xs',
                basePaths: ['job_templates'], 
                awToolTip: 'Create a new template'
                },
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/Jobs.js
+++ b/awx/ui/static/js/lists/Jobs.js
@@ -76,13 +76,9 @@ angular.module('JobsListDefinition', [])
        
        actions: {
            refresh: {
-                dataPlacement: 'top',
-                icon: "icon-refresh",
                mode: 'all',
-                'class': 'btn-xs',
                awToolTip: "Refresh the page",
-                ngClick: "refresh()",
-                iconSize: 'large'
+                ngClick: "refresh()"
                }
            },

--- a/awx/ui/static/js/lists/Organizations.js
+++ b/awx/ui/static/js/lists/Organizations.js
@@ -29,21 +29,14 @@ angular.module('OrganizationListDefinition', [])
        
        actions: {
            add: {
-                label: 'Create New',
-                icon: 'icon-plus',
                mode: 'all',                  // One of: edit, select, all
                ngClick: 'addOrganization()',
-                "class": 'btn-xs',
                awToolTip: 'Create a new organization'
                },
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/Permissions.js
+++ b/awx/ui/static/js/lists/Permissions.js
@@ -43,22 +43,15 @@ angular.module('PermissionListDefinition', [])
        
        actions: {
            add: {
-                icon: 'icon-plus',
-                label: 'Create New',
                mode: 'all',             // One of: edit, select, all
                ngClick: 'addPermission()',
-                "class": 'btn-xs',
                awToolTip: 'Add a new permission',
                ngShow: 'PermissionAddAllowed'
                },
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/Projects.js
+++ b/awx/ui/static/js/lists/Projects.js
@@ -57,11 +57,8 @@ angular.module('ProjectsListDefinition', [])
        
        actions: {
            add: {
-                label: 'Create New',
-                icon: 'icon-plus',
                mode: 'all',             // One of: edit, select, all
                ngClick: 'addProject()',
-                "class": 'btn-xs',
                awToolTip: 'Create a new project'
                },
            help: {
@@ -75,31 +72,19 @@ angular.module('ProjectsListDefinition', [])
                    "</dl>\n",
                dataPlacement: 'left',
                dataContainer: 'body',
-                icon: "icon-question-sign",
                mode: 'all',
-                'class': 'btn-xs btn-help',
                awToolTip: 'Click for help',
-                awTipPlacement: 'top',
-                dataTitle: 'Project Status',
-                iconSize: 'large'
+                awTipPlacement: 'top'
                },
            refresh: {
-                dataPlacement: 'top',
-                icon: "icon-refresh",
                mode: 'all',
-                'class': 'btn-xs',
                awToolTip: "Refresh the page",
-                ngClick: "refresh()",
-                iconSize: 'large'
+                ngClick: "refresh()"
                },
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/Streams.js
+++ b/awx/ui/static/js/lists/Streams.js
@@ -205,30 +205,23 @@ angular.module('StreamListDefinition', [])
        
        actions: {
            refresh: {
-                dataPlacement: 'top',
-                icon: "icon-refresh",
                mode: 'all',
                'class': 'btn-xs',
                awToolTip: "Refresh the page",
-                ngClick: "refreshStream()",
-                iconSize: 'large'
+                ngClick: "refreshStream()"
                },
            close: {
-                dataPlacement: 'top',
-                icon: "icon-arrow-left",
                mode: 'all',
-                'class': 'btn-xs',
                awToolTip: "Close Activity Stream view",
-                ngClick: "closeStream()",
-                iconSize: 'large'
+                ngClick: "closeStream()"
                }
            },

        fieldActions: {
-            edit: {
+            view: {
                label: 'View',
                ngClick: "showDetail(\{\{ activity.id \}\})",
-                icon: 'icon-zoom-in',
+                icon: 'fa-zoom-in',
                "class": 'btn-default btn-xs',
                awToolTip: 'View event details',
                dataPlacement: 'top'
--- a/awx/ui/static/js/lists/Teams.js
+++ b/awx/ui/static/js/lists/Teams.js
@@ -36,21 +36,14 @@ angular.module('TeamsListDefinition', [])
        
        actions: {
            add: {
-                label: 'Create New',
-                icon: 'icon-plus',
                mode: 'all',             // One of: edit, select, all
                ngClick: 'addTeam()',
-                "class": 'btn-xs',
                awToolTip: 'Create a new team'
                },
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },
--- a/awx/ui/static/js/lists/Users.js
+++ b/awx/ui/static/js/lists/Users.js
@@ -36,7 +36,6 @@ angular.module('UserListDefinition', [])
        actions: {
            add: {
                label: 'Create New',
-                icon: 'icon-plus',
                mode: 'all',                      // One of: edit, select, all
                ngClick: 'addUser()',
                basePaths: ['organizations','users'],        // base path must be in list, or action not available
@@ -44,13 +43,9 @@ angular.module('UserListDefinition', [])
                awToolTip: 'Create a new user'
                },
            stream: {
-                'class': "btn-xs activity-btn",
                ngClick: "showActivity()",
                awToolTip: "View Activity Stream",
-                dataPlacement: "top",
-                icon: "icon-comments-alt",
                mode: 'all',
-                iconSize: 'large',
                ngShow: "user_is_superuser"
                }
            },