add disabling, align badges and improve look

- Disable checkboxes when there is nothing to select
- right-alignment of badges in the menu
- HTML and CSS improvements for better look (not final)

Internal changes:
- Avoid use of `stopPropagation()`!
  Instead, replace bootstap's dropdown hide/show logic
  with suitable sticky-dropdown behaviour.
- Avoid selecting the `..` parent folder

IPython/html/static/tree/js/notebooklist.js

@@ -121,14 +121,25 b' define(['
             $('.duplicate-button').click($.proxy(this.duplicate_selected, this));
             $('.delete-button').click($.proxy(this.delete_selected, this));
 
-            // Bind events for selection menu buttons.
+            // Bind events for selection checkboxes.
             $('.tree-selector').change(function(){that.select($(this).attr('id'),$(this).is(':checked'))});
-            // Do not propagate click for the menu to prevent the menu from closing
-            $('#tree-selector-menu').click(function(event){event.stopPropagation();})
+            
+            // Make the dropdown sticky
+            // Dirty solution by stopping click propagation
+            // $('#tree-selector-menu').click(function(event){event.stopPropagation();})
+            // Cleaner solution by reimplementing the open-close dynamics (and removing data-toggle="dropdown" in html)
+            $('#tree-selector-btn').on('click', function(event) {
+                $(this).parent().toggleClass('open');
+            });
+            $('body').on('click', function (e) {
+                if (!$('#tree-selector-btn').is(e.target) && $('#tree-selector-btn').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
+                    $('#tree-selector-btn').parent().removeClass('open');
+                }
+            });
         }
     };
 
-    NotebookList.prototype.handleFilesUpload =  function(event, dropOrForm) {
+    NotebookList.prototype.handleFilesUpload = function(event, dropOrForm) {
         var that = this;
         var files;
         if(dropOrForm =='drop'){
@@ -288,7 +299,7 b' define(['
                 }
             }
         });
-        this._selection_changed();  
+        this._selection_changed();
     };
 
 
@@ -379,7 +390,7 b' define(['
     };
 
     /**
-     * Select items in the tree of specified kind.
+     * Select all items in the tree of specified type.
      * checkbox_id : string among "select-all, "select-folders", "select-notebooks", "select-running-notebooks", "select-files"
      * state : boolean, true to select and false to deselect
      */
@@ -417,11 +428,13 b' define(['
         var num_directory = 0;
         var num_file = 0;
         var that = this;
+        
         $('.list_item input[type=checkbox]').each(function(index, item) {
             var parent = $(item).parent().parent();
-            // If the item doesn't have an upload button and it's not the 
-            // breadcrumbs, it can be selected.  Breadcrumbs path == ''.
-            if (parent.find('.upload_button').length === 0 && parent.data('path') !== '') {
+            // If the item doesn't have an upload button, isn't the 
+            // breadcrumbs and isn't the parent folder '..', then it can be selected.  
+            // Breadcrumbs path == ''.
+            if (parent.find('.upload_button').length === 0 && parent.data('path') !=='' && parent.data('path') !== utils.url_path_split(that.notebook_path)[0]) {
                 if (parent.data('type') == 'notebook') {
                     num_notebook++;
                     if (that.sessions[parent.data('path')] !== undefined) {
@@ -495,14 +508,25 b' define(['
         var total_nums = [num_file+num_directory+num_notebook, num_directory, num_notebook, num_running_notebook, num_file];
         var selected_nums = [num_sel_file+num_sel_directory+num_sel_notebook, num_sel_directory, num_sel_notebook, num_sel_running_notebook, num_sel_file];
         
+        // Disable the main checkbox if the list is empty
+        $('#'+checkbox_ids[0]).parent().prop('disabled',total_nums[0] === 0);
         for (var i=0; i < 5; i++) {
+            if (i>0) {
+                // Disable each menu item if there is nothing to select
+                $('#'+checkbox_ids[i]).prop('disabled',total_nums[i] === 0);
+                if (total_nums[i] === 0) {
+                    $('#'+checkbox_ids[i]).parent().parent().addClass('disabled');
+                } else {
+                    $('#'+checkbox_ids[i]).parent().parent().removeClass('disabled');
+                }
+            }
+            // Update badge
+            $('#badge-'+checkbox_ids[i]).text(selected_nums[i]===0 ? '' : selected_nums[i]);
+            // Update each checkbox status
             if (selected_nums[i] === 0) {
                 $('#'+checkbox_ids[i])[0].indeterminate = false;
                 $('#'+checkbox_ids[i]).prop('checked', false);
-                $('#badge-'+checkbox_ids[i]).text('');
             } else {
-                // Update badge
-                $('#badge-'+checkbox_ids[i]).text(selected_nums[i]);
                 if (selected_nums[i] === total_nums[i]) {
                     $('#'+checkbox_ids[i])[0].indeterminate = false;
                     $('#'+checkbox_ids[i]).prop('checked', true);

IPython/html/static/tree/less/tree.less

@@ -184,12 +184,24 b' input.engine_num_input {'
 
 #tree-selector {
     display: inline-block;
-    padding-right: 0px;
+    padding-right: 5px;
+}
 
-    input[type=checkbox] {
-        margin-left: @dashboard_lr_pad;
-        vertical-align: baseline;
-    }
+#select-all {
+    margin-top:-1px;
+    margin-left: @dashboard_lr_pad;
+    vertical-align: baseline;
+}
+
+#tree-selector-menu {
+        width: 200px;
+        .menuitem label{
+            margin-bottom: 0px;
+        }
+        input[type=checkbox] {
+            margin-left: 0px;
+            vertical-align: baseline;
+        }
 }
 
 .tab-content .row {

IPython/html/templates/tree.html

@@ -78,42 +78,50 b' data-terminals-available="{{terminals_available}}"'
             <div id="notebook_list_header" class="row list_header">
               <div class="btn-group dropdown" id='tree-selector'>
                 <button type="button" class="btn btn-default btn-xs"><input type="checkbox" class="tree-selector" id="select-all"></input></button>
-                <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="tree-selector-btn" data-toggle="dropdown" aria-expanded="true">
+                <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="tree-selector-btn" aria-expanded="true">
                   <span class="caret"></span>
                   <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul id="tree-selector-menu" class="dropdown-menu" role="menu" aria-labelledby="tree-selector-btn">
                   <li role="presentation">
-                    <input type="checkbox" class="tree-selector" id="select-folders"></input>
-                    <label for="select-folders">
-                      <i class="item_icon folder_icon icon-fixed-width"></i>
-                      Folders
-                      <span class="badge" id="badge-select-folders"></span>
-                    </label>
+                    <a role="menuitem">
+                      <input type="checkbox" class="tree-selector" id="select-folders"></input>
+                      <label for="select-folders">
+                        <i class="folder_icon icon-fixed-width"></i>
+                        Folders
+                      </label>
+                      <span class="badge pull-right" id="badge-select-folders"></span>
+                    </a>
                   </li>
                   <li role="presentation">
-                    <input type="checkbox" class="tree-selector" id="select-notebooks"></input>
-                    <label for="select-notebooks">
-                      <i class="item_icon notebook_icon icon-fixed-width"></i>
-                      All Notebooks
-                      <span class="badge" id="badge-select-notebooks"></span>
-                    </label>
+                    <a role="menuitem">
+                      <input type="checkbox" class="tree-selector" id="select-notebooks"></input>
+                      <label for="select-notebooks">
+                        <i class="notebook_icon icon-fixed-width"></i>
+                        All Notebooks
+                      </label>
+                      <span class="badge pull-right" id="badge-select-notebooks"></span>
+                    </a>
                   </li>
                   <li role="presentation">
-                    <input type="checkbox" class="tree-selector" id="select-running-notebooks"></input>
-                    <label for="select-running-notebooks">
-                      <i class="item_icon running_notebook_icon icon-fixed-width"></i>
-                      Running
-                      <span class="badge" id="badge-select-running-notebooks"></span>
-                    </label>
+                    <a role="menuitem">
+                      <input type="checkbox" class="tree-selector" id="select-running-notebooks"></input>
+                      <label for="select-running-notebooks">
+                        <i class="running_notebook_icon icon-fixed-width"></i>
+                        Running
+                      </label>
+                      <span class="badge pull-right" id="badge-select-running-notebooks"></span>
+                    </a>
                   </li>
                   <li role="presentation">
-                    <input type="checkbox" class="tree-selector" id="select-files"></input>
-                    <label for="select-files">
-                      <i class="item_icon file_icon icon-fixed-width"></i>
-                      Files
-                      <span class="badge" id="badge-select-files"></span>
-                    </label>
+                    <a role="menuitem">
+                      <input type="checkbox" class="tree-selector" id="select-files"></input>
+                      <label for="select-files">
+                        <i class="file_icon icon-fixed-width"></i>
+                        Files  
+                      </label>
+                      <span class="badge pull-right" id="badge-select-files"></span>
+                    </a>
                   </li>
                 </ul>
               </div>