GUI-2060/GUI-2069: Leverage angular-smart-table for column header sor…

…ting on volumes landing page table as a proof of concept

Gruntfile.js

@@ -69,6 +69,15 @@ module.exports = function(grunt) {
                 'eucaconsole/static/js/thirdparty/magic-search': 'angular-magic-search/magic_search.*'
               }
           },
+          angular_smart_table: {
+              options: {
+                  destPrefix: 'eucaconsole/static/js/thirdparty/angular'
+              },
+              files: {
+                'angular-smart-table.js': 'angular-smart-table/dist/smart-table.js',
+                'angular-smart-table.min.js': 'angular-smart-table/dist/smart-table.min.js'
+              }
+          },
           d3: {
               options: {
                   destPrefix: 'eucaconsole/static/js/thirdparty/d3'

bower.json

@@ -5,6 +5,7 @@
     "angular": "1.3.8",
     "angular-sanitize": "1.3.8",
     "angular-mocks": "1.3.8",
+    "angular-smart-table": "2.1.3",
     "components-font-awesome": "4.3.0",
     "foundation": "5.5.1",
     "jquery": "2.1.3",

eucaconsole/layout.py

@@ -97,6 +97,8 @@ def __init__(self, context, request):
         self.searchtext_prompt = _(u'Select facets for filter, or enter text to search')
         self.searchtext_prompt2 = _(u'Enter text to search')
         self.searchtext_text_facet = _(u'Text')
+        self.standard_table_repeat = 'item in items | orderBy: sortBy | limitTo:displayCount'
+        self.smart_table_repeat = 'item in displayedCollection | limitTo:displayCount'
 
     def get_notifications(self):
         """Get notifications, categorized by message type ('info', 'success', 'warning', or 'error')

eucaconsole/static/css/eucaconsole.css

@@ -185,7 +185,7 @@ textarea { height: auto; min-height: 50px; }
 
 select { width: 100%; }
 
-.alert-box { border-style: solid; border-width: 1px; display: block; font-weight: normal; margin-bottom: 1.25rem; position: relative; padding: 0.875rem 1.5rem 0.875rem 0.875rem; font-size: 0.8125rem; transition: opacity 300ms ease-out; background-color: #007dba; border-color: #006ca0; color: #FFFFFF; }
+.alert-box { border-style: solid; border-width: 1px; display: block; font-weight: normal; margin-bottom: 1.25rem; position: relative; padding: 0.875rem 1.5rem 0.875rem 0.875rem; font-size: 0.8125rem; transition: opacity 300ms ease-out; background-color: #007dba; border-color: #006ba0; color: #FFFFFF; }
 .alert-box .close { font-size: 1.375rem; padding: 0 6px 4px; line-height: .9; position: absolute; top: 50%; margin-top: -0.6875rem; right: 0.25rem; color: #333333; opacity: 0.3; background: inherit; }
 .alert-box .close:hover, .alert-box .close:focus { opacity: 0.5; }
 .alert-box.radius { border-radius: 3px; }
@@ -921,7 +921,7 @@ label.error { color: #f04124; }
 .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 { line-height: 1; margin-bottom: 0.625rem; }
 .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader { line-height: 1.4; }
 .panel.callout a:not(.button) { color: #007dba; }
-.panel.callout a:not(.button):hover, .panel.callout a:not(.button):focus { color: #006ca0; }
+.panel.callout a:not(.button):hover, .panel.callout a:not(.button):focus { color: #006ba0; }
 .panel.radius { border-radius: 3px; }
 
 /* Progress Bar */
@@ -992,7 +992,7 @@ label.error { color: #f04124; }
 .sub-nav dt a, .sub-nav dd a, .sub-nav li a { text-decoration: none; color: #999999; padding: 0.1875rem 1rem; }
 .sub-nav dt a:hover, .sub-nav dd a:hover, .sub-nav li a:hover { color: #737373; }
 .sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a { border-radius: 3px; font-weight: normal; background: #007dba; padding: 0.1875rem 1rem; cursor: default; color: #FFFFFF; }
-.sub-nav dt.active a:hover, .sub-nav dd.active a:hover, .sub-nav li.active a:hover { background: #006ca0; }
+.sub-nav dt.active a:hover, .sub-nav dd.active a:hover, .sub-nav li.active a:hover { background: #006ba0; }
 
 div.switch { position: relative; padding: 0; display: block; overflow: hidden; border-style: solid; border-width: 1px; margin-bottom: 1.25rem; height: 2.25rem; background: #fff; border-color: #cccccc; }
 div.switch label { position: relative; left: 0; z-index: 2; float: left; width: 50%; height: 100%; margin: 0; font-weight: bold; text-align: left; transition: all 0.1s ease-out; }
@@ -1047,7 +1047,7 @@ table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, tabl
 .tabs:after { clear: both; }
 .tabs dd, .tabs .tab-title { position: relative; margin-bottom: 0 !important; list-style: none; float: left; }
 .tabs dd > a, .tabs .tab-title > a { display: block; background-color: #007dba; color: #222222; padding: 0.25rem 0.5rem; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 1rem; }
-.tabs dd > a:hover, .tabs .tab-title > a:hover { background-color: #008ed4; }
+.tabs dd > a:hover, .tabs .tab-title > a:hover { background-color: #008ed3; }
 .tabs dd > a:focus, .tabs .tab-title > a:focus { outline: none; }
 .tabs dd.active a, .tabs .tab-title.active a { background-color: #FFFFFF; color: #222222; }
 .tabs.radius dd:first-child a, .tabs.radius .tab:first-child a { -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; }
@@ -1271,7 +1271,7 @@ div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, t
 
 /* Default Link Styles */
 a { color: #007dba; text-decoration: none; line-height: inherit; }
-a:hover, a:focus { color: #006ca0; }
+a:hover, a:focus { color: #006ba0; }
 a img { border: none; }
 
 /* Default paragraph styles */
@@ -1878,6 +1878,9 @@ table.table thead tr th.count { text-align: center; }
 table.table tr td.count { text-align: center; }
 table.table tr td { vertical-align: top; }
 table.table td.breakall { word-break: break-all !important; }
+table.table.smart-table th[st-sort]:hover { cursor: pointer; }
+table.table.smart-table .st-sort-ascent:before { content: '\25B2'; }
+table.table.smart-table .st-sort-descent:before { content: '\25BC'; }
 
 /* ----------------------------------------- Footer
 ----------------------------------------- */

eucaconsole/static/js/pages/volumes.js

@@ -4,7 +4,7 @@
  *
  */
 
-angular.module('VolumesPage', ['LandingPage', 'EucaConsoleUtils'])
+angular.module('VolumesPage', ['LandingPage', 'EucaConsoleUtils', 'smart-table'])
     .controller('VolumesCtrl', function ($scope, $http, $timeout, eucaUnescapeJson) {
         $scope.volumeID = '';
         $scope.volumeName = '';