starting out the sort function

notebook/static/tree/js/notebooklist.js

@@ -57,14 +57,32 @@ define([
     function modified_sorter(ascending) {
         var order = ascending ? 1 : 0;
         return (function(a, b) {
+          if (a['type'] === 'directory') {
+             return (ascending) ? 1 : -1;
+          }
             return utils.datetime_sort_helper(a.last_modified, b.last_modified,
                                               order)
         });
     }
 
+    function size_sorter(ascending) {
+        var order = ascending ? 1 : 0;
+        // directories have file size of undefined
+        return (function(a, b) {
+          if (a['type'] === 'directory') {
+             return (ascending) ? 1 : -1;
+          }
+
+          if (a.size > b.size) {
+            return (ascending) ? 1 : -1;
+          }
+        });
+    }
+
     var sort_functions = {
         'sort-name': name_sorter,
-        'last-modified': modified_sorter
+        'last-modified': modified_sorter,
+        'file-size': size_sorter
     };
 
     var NotebookList = function (selector, options) {
@@ -520,6 +538,12 @@ define([
             .addClass("item_name")
             .appendTo(link);
 
+        $("<span/>")
+            .addClass("file_size")
+            .addClass("pull-right")
+            .css("width", "50px")
+            .appendTo(item);
+
         $("<span/>")
             .addClass("item_modified")
             .addClass("pull-right")

notebook/templates/tree.html

@@ -117,6 +117,12 @@ data-server-root="{{server_root}}"
                 {% endfor %}
                 </ul>
               </div>
+              <div id="file_size" class="pull-right sort_button">
+                  <span class="btn btn-xs btn-default sort-action" id="file-size">
+                      {% trans %}File size{% endtrans %}
+                      <i class="fa"></i>
+                  </span>
+              </div>
               <div id="last_modified" class="pull-right sort_button">
                   <span class="btn btn-xs btn-default sort-action" id="last-modified">
                       {% trans %}Last Modified{% endtrans %}