Merge pull request #7681 from mathieu1/tree-selector-ui

Streamline tree-selector menu

IPython/html/static/style/style.min.css

@@ -8787,12 +8787,17 b' input.engine_num_input {'
   font-weight: bold;
 }
 #tree-selector {
-  display: inline-block;
   padding-right: 0px;
 }
-#tree-selector input[type=checkbox] {
+#button-select-all {
+  min-width: 50px;
+}
+#select-all {
   margin-left: 7px;
-  vertical-align: baseline;
+  margin-right: 2px;
+}
+.menu_icon {
+  margin-right: 2px;
 }
 .tab-content .row {
   margin-left: 0px;

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

@@ -122,12 +122,16 b' define(['
             $('.delete-button').click($.proxy(this.delete_selected, this));
 
             // Bind events for selection menu buttons.
-            $('#tree-selector .select-all').click($.proxy(this.select_all, this));
-            $('#tree-selector .select-notebooks').click($.proxy(this.select_notebooks, this));
-            $('#tree-selector .select-running-notebooks').click($.proxy(this.select_running_notebooks, this));
-            $('#tree-selector .select-files').click($.proxy(this.select_files, this));
-            $('#tree-selector .select-directories').click($.proxy(this.select_directories, this));
-            $('#tree-selector .deselect-all').click($.proxy(this.deselect_all, this));
+            $('#selector-menu').click(function(event){that.select($(event.target).attr('id'))});
+            $('#select-all').change(function(){that.select($(this).is(':checked') ? 'select-all' : 'select-none')});
+            $('#button-select-all').click(function(e) {
+                // toggle checkbox if the click doesn't come from the checkbox already
+                if (!$(e.target).is('input[type=checkbox]')) {
+                    var checkbox = $('#select-all');
+                    checkbox.prop('checked', !checkbox.prop('checked'));
+                    that.select(checkbox.prop('checked') ? 'select-all' : 'select-none');
+                }
+            });
         }
     };
 
@@ -377,74 +381,21 b' define(['
     };
 
     /**
-     * Select all of the items in the tree.
-     */
-    NotebookList.prototype.select_all = function() {
-        $('.list_item input[type=checkbox]').each(function(index, item) {
-            $(item).prop('checked', true);
-        });
-        this._selection_changed();
-    };
-
-    /**
-     * Select all of the notebooks in the tree.
-     */
-    NotebookList.prototype.select_notebooks = function() {
-        this.deselect_all();
-        $('.list_item').each(function(index, item) {
-            if ($(item).data('type') === 'notebook') {
-                $(item).find('input[type=checkbox]').prop('checked', true);
-            }
-        });
-        this._selection_changed();
-    };
-
-    /**
-     * Select all of the running notebooks in the tree.
+     * Select all items in the tree of specified type.
+     * selection_type : string among "select-all", "select-folders", "select-notebooks", "select-running-notebooks", "select-files"
+     *                  any other string (like "select-none") deselects all items
      */
-    NotebookList.prototype.select_running_notebooks = function() {
-        this.deselect_all();
+    NotebookList.prototype.select = function(selection_type) {
         var that = this;
         $('.list_item').each(function(index, item) {
-            if ($(item).data('type') === 'notebook' && that.sessions[$(item).data('path')] !== undefined) {
-                $(item).find('input[type=checkbox]').prop('checked', true);
-            }
-        });
-        this._selection_changed();
-    };
-
-    /**
-     * Select all of the files in the tree.
-     */
-    NotebookList.prototype.select_files = function() {
-        this.deselect_all();
-        $('.list_item').each(function(index, item) {
-            if ($(item).data('type') === 'file') {
-                $(item).find('input[type=checkbox]').prop('checked', true);
-            }
-        });
-        this._selection_changed();
-    };
-
-    /**
-     * Select all of the directories in the tree.
-     */
-    NotebookList.prototype.select_directories = function() {
-        this.deselect_all();
-        $('.list_item').each(function(index, item) {
-            if ($(item).data('type') === 'directory') {
-                $(item).find('input[type=checkbox]').prop('checked', true);
-            }
-        });
-        this._selection_changed();
-    };
-
-    /**
-     * Unselect everything selected in the tree.
-     */
-    NotebookList.prototype.deselect_all = function() {
-        $('.list_item input[type=checkbox]').each(function(index, item) {
-            $(item).prop('checked', false);
+            var item_type = $(item).data('type');
+            var state = false;
+            state = state || (selection_type === "select-all");
+            state = state || (selection_type === "select-folders" && item_type === 'directory');
+            state = state || (selection_type === "select-notebooks" && item_type === 'notebook');
+            state = state || (selection_type === "select-running-notebooks" && item_type === 'notebook' && that.sessions[$(item).data('path')] !== undefined);
+            state = state || (selection_type === "select-files" && item_type === 'file');
+            $(item).find('input[type=checkbox]').prop('checked', state);
         });
         this._selection_changed();
     };
@@ -466,9 +417,10 b' define(['
         $('.list_item :checked').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]) {
                 checked++;
                 selected.push({
                     name: parent.data('name'), 
@@ -523,7 +475,7 b' define(['
             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 (parent.find('.upload_button').length === 0 && parent.data('path') !== '' && parent.data('path') !== utils.url_path_split(that.notebook_path)[0]) {
                 total++;
             }
         });
@@ -537,6 +489,8 b' define(['
             $('#tree-selector input[type=checkbox]').prop('checked', false);
             $('#tree-selector input[type=checkbox]')[0].indeterminate = true;
         }
+        // Update total counter
+        $('#counter-select-all').html(checked===0 ? ' ' : checked);
     };
 
     NotebookList.prototype.add_link = function (model, item) {

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

@@ -12,7 +12,6 b''
 @btn_small_height: 24px;
 @btn_mini_height: 22px;
 @dark_dashboard_color: @breadcrumb-color;
-@list_stripe_color: lighten(@page-backdrop-color,3%);
 
 // The left padding of the selector button's contents.
 @dashboard-selectorbtn-lpad: 7px;
@@ -191,13 +190,20 b' input.engine_num_input {'
 }
 
 #tree-selector {
-    display: inline-block;
     padding-right: 0px;
+}
 
-    input[type=checkbox] {
-        margin-left: @dashboard_lr_pad;
-        vertical-align: baseline;
-    }
+#button-select-all {
+    min-width: 50px;
+}
+
+#select-all {
+    margin-left: @dashboard_lr_pad;
+    margin-right: 2px;
+}
+
+.menu_icon {
+    margin-right: 2px;
 }
 
 .tab-content .row {

IPython/html/templates/tree.html

@@ -76,19 +76,19 b' data-terminals-available="{{terminals_available}}"'
           </div>
           <div id="notebook_list">
             <div id="notebook_list_header" class="row list_header">
-              <div class="dropdown" id='tree-selector'>
-                <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="tree-selector-btn" data-toggle="dropdown" aria-expanded="true">
-                  <input type='checkbox'></input>
+              <div class="btn-group dropdown" id="tree-selector">
+                <button title="Select All / None" type="button" class="btn btn-default btn-xs" id="button-select-all">
+                  <input type="checkbox" class="pull-left tree-selector" id="select-all"><span id="counter-select-all">&nbsp;</span></input>
+                </button>
+                <button title="Select..." class="btn btn-default btn-xs dropdown-toggle" type="button" id="tree-selector-btn" data-toggle="dropdown" aria-expanded="true">
                   <span class="caret"></span>
+                  <span class="sr-only">Toggle Dropdown</span>
                 </button>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="tree-selector-btn">
-                  <li role="presentation" class="select-all"><a role="menuitem" tabindex="-1" href="#">Select all</a></li>
-                  <li role="presentation" class="select-notebooks"><a role="menuitem" tabindex="-1" href="#">Select notebooks</a></li>
-                  <li role="presentation" class="select-running-notebooks"><a role="menuitem" tabindex="-1" href="#">Select running notebooks</a></li>
-                  <li role="presentation" class="select-files"><a role="menuitem" tabindex="-1" href="#">Select files</a></li>
-                  <li role="presentation" class="select-directories"><a role="menuitem" tabindex="-1" href="#">Select directories</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation" class="deselect-all"><a role="menuitem" tabindex="-1" href="#">Deselect all</a></li>
+                <ul id='selector-menu' class="dropdown-menu" role="menu" aria-labelledby="tree-selector-btn">
+                  <li role="presentation"><a id="select-folders" role="menuitem" tabindex="-1" href="#" title="Select All Folders"><i class="menu_icon folder_icon icon-fixed-width"></i> Folders</a></li>
+                  <li role="presentation"><a id="select-notebooks" role="menuitem" tabindex="-1" href="#" title="Select All Notebooks"><i class="menu_icon notebook_icon icon-fixed-width"></i> All Notebooks</a></li>
+                  <li role="presentation"><a id="select-running-notebooks" role="menuitem" tabindex="-1" href="#" title="Select Running Notebooks"><i class="menu_icon running_notebook_icon icon-fixed-width"></i> Running</a></li>
+                  <li role="presentation"><a id="select-files" role="menuitem" tabindex="-1" href="#" title="Select All Files"><i class="menu_icon file_icon icon-fixed-width"></i> Files</a></li>
                 </ul>
               </div>
               <div id="project_name">