mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2024-12-21 04:10:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add selector button to dashboard

Browse Source
This commit is contained in:
Jonathan Frederic 2015-02-02 16:36:28 -08:00
parent 6d248f258a
commit 30a23d4456
3 changed files with 151 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
IPython/html/static/tree/js/notebooklist.js
View File

@ -114,10 +114,20 @@ 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 .select-inverse').click($.proxy(this.select_inverse, this));
$('#tree-selector .unselect-all').click($.proxy(this.unselect_all, this));
}
};
@ -355,11 +365,94 @@ 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.unselect_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.unselect_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.unselect_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.unselect_all();
$('.list_item').each(function(index, item) {
if ($(item).data('type') === 'directory') {
$(item).find('input[type=checkbox]').prop('checked', true);
}
});
this._selection_changed();
};
/**
* Select the inverse of the current selection.
*/
NotebookList.prototype.select_inverse = function() {
$('.list_item input[type=checkbox]').each(function(index, item) {
$(item).prop('checked', !$(item).prop('checked'));
});
this._selection_changed();
};
/**
* Unselect everything selected in the tree.
*/
NotebookList.prototype.unselect_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.
@ -368,11 +461,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'),
@ -417,6 +513,15 @@ 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.
if (checked === 0) {
$('#tree-selector input[type=checkbox]').prop('checked', false);
} else {
$('#tree-selector input[type=checkbox]').prop('checked', true);
}
};
NotebookList.prototype.add_link = function (model, item) {

31
IPython/html/static/tree/less/tree.less
View File

@ -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,11 @@ ul.breadcrumb {
input {
margin-right: @dashboard_lr_pad;
margin-left: @dashboard_lr_pad + @dashboard-selectorbtn-lpad;
}
.item_link {
margin-left: 14px;
}
}
@ -152,12 +160,23 @@ 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;
> .breadcrumb {
padding: 0px;
margin-bottom: 0px;
background-color: transparent;
font-weight: bold;
}
}
#tree-selector {
display: inline-block;
input[type=checkbox] {
margin-left: @dashboard_lr_pad;
}
}
.tab-content .row {

18
IPython/html/templates/tree.html
View File

@ -76,6 +76,24 @@ 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>
<i class='semicheck fa fa-minus'></i>
<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="select-inverse"><a role="menuitem" tabindex="-1" href="#">Select inverse</a></li>
<li role="presentation" class="unselect-all"><a role="menuitem" tabindex="-1" href="#">Unselect 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>