Merge pull request #7667 from jdfreder/treeselector

Dashboard selector dropdown.

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

@@ -8703,6 +8703,17 @@ ul.breadcrumb span {
 .list_header > div input,
 .list_item > div input {
   margin-right: 7px;
+  margin-left: 14px;
+  vertical-align: baseline;
+  line-height: 22px;
+  position: relative;
+  top: -1px;
+}
+.list_header > div .item_link,
+.list_item > div .item_link {
+  margin-left: -1px;
+  vertical-align: baseline;
+  line-height: 22px;
 }
 .new-file input[type=checkbox] {
   visibility: hidden;
@@ -8715,6 +8726,9 @@ ul.breadcrumb span {
   font-size: 14px;
   color: #5e5e5e;
   margin-right: 7px;
+  margin-left: 7px;
+  line-height: 22px;
+  vertical-align: baseline;
 }
 .item_buttons {
   padding-top: 4px;
@@ -8754,12 +8768,25 @@ input.engine_num_input {
 .highlight_text {
   color: blue;
 }
+#project_name {
+  display: inline-block;
+  padding-left: 7px;
+  margin-left: -2px;
+}
 #project_name > .breadcrumb {
   padding: 0px;
   margin-bottom: 0px;
   background-color: transparent;
   font-weight: bold;
 }
+#tree-selector {
+  display: inline-block;
+  padding-right: 0px;
+}
+#tree-selector input[type=checkbox] {
+  margin-left: 7px;
+  vertical-align: baseline;
+}
 .tab-content .row {
   margin-left: 0px;
   margin-right: 0px;
@@ -8789,6 +8816,8 @@ input.engine_num_input {
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   content: "\f02d";
+  position: relative;
+  top: -1px;
 }
 .notebook_icon:before.pull-left {
   margin-right: .3em;
@@ -8805,6 +8834,8 @@ input.engine_num_input {
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   content: "\f02d";
+  position: relative;
+  top: -1px;
   color: #5cb85c;
 }
 .running_notebook_icon:before.pull-left {
@@ -8822,6 +8853,8 @@ input.engine_num_input {
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   content: "\f016";
+  position: relative;
+  top: -2px;
 }
 .file_icon:before.pull-left {
   margin-right: .3em;

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

@@ -114,10 +114,19 @@ define([
                 that.load_sessions();
             });
 
+            // Bind events for action buttons.
             $('.rename-button').click($.proxy(this.rename_selected, this));
             $('.shutdown-button').click($.proxy(this.shutdown_selected, this));
             $('.duplicate-button').click($.proxy(this.duplicate_selected, this));
             $('.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));
         }
     };
 
@@ -371,11 +380,84 @@ define([
         file: 'edit',
     };
 
+    /**
+     * 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.
+     */
+    NotebookList.prototype.select_running_notebooks = function() {
+        this.deselect_all();
+        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);
+        });
+        this._selection_changed();
+    };
+
+
     /**
      * Handles when any row selector checkbox is toggled.
      */
     NotebookList.prototype._selection_changed = function() {
-
         // Use a JQuery selector to find each row with a checked checkbox.  If
         // we decide to add more checkboxes in the future, this code will need
         // to be changed to distinguish which checkbox is the row selector.
@@ -384,11 +466,14 @@ define([
         var has_directory = false;
         var has_file = false;
         var that = this;
+        var checked = 0;
         $('.list_item :checked').each(function(index, item) {
             var parent = $(item).parent().parent();
 
-            // If the item doesn't have an upload button, it can be selected.
-            if (parent.find('.upload_button').length === 0) {
+            // 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') !== '') {
+                checked++;
                 selected.push({
                     name: parent.data('name'), 
                     path: parent.data('path'), 
@@ -433,6 +518,29 @@ define([
         } else {
             $('.delete-button').css('display', 'none');
         }
+
+        // If all of the items are selected, show the selector as checked.  If
+        // some of the items are selected, show it as checked.  Otherwise,
+        // uncheck it.
+        var total = 0;
+        $('.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') !== '') {
+                total++;
+            }
+        });
+        if (checked === 0) {
+            $('#tree-selector input[type=checkbox]')[0].indeterminate = false;
+            $('#tree-selector input[type=checkbox]').prop('checked', false);
+        } else if (checked === total) {
+            $('#tree-selector input[type=checkbox]')[0].indeterminate = false;
+            $('#tree-selector input[type=checkbox]').prop('checked', true);
+        } else {
+            $('#tree-selector input[type=checkbox]').prop('checked', false);
+            $('#tree-selector input[type=checkbox]')[0].indeterminate = true;
+        }
     };
 
     NotebookList.prototype.add_link = function (model, item) {

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

@@ -14,6 +14,9 @@
 @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;
+
 ul#tabs {
     margin-bottom: @dashboard_tb_pad;
 }
@@ -100,6 +103,17 @@ ul.breadcrumb {
 
     input {
         margin-right: @dashboard_lr_pad;
+        margin-left: @dashboard_lr_pad + @dashboard-selectorbtn-lpad;
+        vertical-align: baseline;
+        line-height: @btn_mini_height;
+        position: relative;
+        top: -1px;
+    }
+
+    .item_link {
+        margin-left: -1px;
+        vertical-align: baseline;
+        line-height: @btn_mini_height;
     }
 }
 
@@ -116,6 +130,9 @@ ul.breadcrumb {
     font-size: 14px; 
     color: @dark_dashboard_color;
     margin-right: @dashboard_lr_pad;
+    margin-left: @dashboard_lr_pad;
+    line-height: @btn_mini_height;
+    vertical-align: baseline;
 }
 
 .item_buttons {
@@ -152,12 +169,27 @@ input.engine_num_input {
     color: blue;
 }
 
-#project_name > .breadcrumb {
-    padding: 0px;
-    margin-bottom: 0px;
-    background-color: transparent;
-    font-weight: bold;
-   
+#project_name {
+    display: inline-block;
+    padding-left: @dashboard_lr_pad;
+    margin-left: -2px;
+
+    > .breadcrumb {
+        padding: 0px;
+        margin-bottom: 0px;
+        background-color: transparent;
+        font-weight: bold;
+    }
+}
+
+#tree-selector {
+    display: inline-block;
+    padding-right: 0px;
+
+    input[type=checkbox] {
+        margin-left: @dashboard_lr_pad;
+        vertical-align: baseline;
+    }
 }
 
 .tab-content .row {
@@ -166,21 +198,28 @@ input.engine_num_input {
 }
 
 .folder_icon:before {
-    .icon(@fa-var-folder-o)
+    .icon(@fa-var-folder-o);
 }
 
 .notebook_icon:before {
-    .icon(@fa-var-book)
+    .icon(@fa-var-book);
+    position: relative;
+    top: -1px;
 }
 
 .running_notebook_icon:before {
     .icon(@fa-var-book);
-    color: @brand-success
+    position: relative;
+    top: -1px;
+
+    color: @brand-success;
 }
 
 
 .file_icon:before {
-    .icon(@fa-var-file-o)
+    .icon(@fa-var-file-o);
+    position: relative;
+    top: -2px;
 }
 
 #notebook_toolbar .pull-right {

IPython/html/templates/tree.html

@@ -76,6 +76,21 @@ 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>
+                  <span class="caret"></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>
+              </div>
               <div id="project_name">
                 <ul class="breadcrumb">
                   <li><a href="{{breadcrumbs[0][0]}}"><i class="fa fa-home"></i></a></li>