p2yq6ufca
/
monkeyking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add disabling, align badges and improve look

Browse Source 
- 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
Mathieu 11 years ago
parent 2d91e6e1f6
commit 36a59bf8dc
3 changed files with 86 additions and 42 deletions
Show Stats Download Patch File Download Diff File

48
IPython/html/static/tree/js/notebooklist.js
Unescape View File

@ -121,14 +121,25 @@ 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 @@ define([
}
}
});
this._selection_changed();
this._selection_changed();
};
@ -379,7 +390,7 @@ 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 @@ 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 @@ 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);

22
IPython/html/static/tree/less/tree.less
Unescape View File

@ -184,12 +184,24 @@ 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 {

58
IPython/html/templates/tree.html
Unescape View File

@ -78,42 +78,50 @@ 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>

Write Preview
Loading…
Cancel
Save