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

Merging - List view CSS updates
freighttrust · Jan 13, 2016 · 27bc2c9 · 27bc2c9
2 parents 0feb417 + c7674ac
commit 27bc2c9
Show file tree

Hide file tree

Showing 33 changed files with 256 additions and 282 deletions.
diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/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;

diff --git a/awx/ui/client/legacy-styles/lists.less b/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;
+}
diff --git a/awx/ui/client/src/forms/Credentials.js b/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: {

diff --git a/awx/ui/client/src/forms/JobTemplates.js b/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: {

diff --git a/awx/ui/client/src/forms/Projects.js b/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: {

diff --git a/awx/ui/client/src/helpers/Hosts.js b/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 });

diff --git a/awx/ui/client/src/inventory-scripts/inventory-scripts.list.js b/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'
-            },
-            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: '&#43; ADD'
             }
         },
 

diff --git a/awx/ui/client/src/lists/CloudCredentials.js b/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: '&#43; ADD'
             }
         },
 

diff --git a/awx/ui/client/src/lists/Credentials.js b/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'
-            },
-            stream: {
-                ngClick: "showActivity()",
-                awToolTip: "View Activity Stream",
-                mode: 'edit',
-                awFeature: 'activity_streams'
+                awToolTip: 'Create a new credential',
+                actionClass: 'btn List-buttonSubmit',
+                buttonContent: '&#43; ADD'
             }
         },
 

diff --git a/awx/ui/client/src/lists/HomeGroups.js b/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'
-            }
+
         }
 
     });
diff --git a/awx/ui/client/src/lists/HomeHosts.js b/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'
-            }
+
         }
 
     });
diff --git a/awx/ui/client/src/lists/Inventories.js b/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'
-            },
-            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'
             }
         },