mirror of
https://github.com/jupyter/notebook.git
synced 2024-12-21 04:10:17 +08:00
Add selector button to dashboard
This commit is contained in:
parent
6d248f258a
commit
30a23d4456
@ -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) {
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user