mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-06 11:35:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

clean up CSS and firefox clicks

Browse Source 
- `#button-select-all` toggles the all/none checkbox
  and the all/none checkbox now works on firefox
- static appearance of the `#button-select-all` button
  (even on counter change, up to two digits)
- clean up `tree.less`
This commit is contained in:
Mathieu 2015-02-06 16:24:58 +01:00
parent 0e9f13807e
commit 9fe1f43089
3 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,6 +123,14 @@ define([
// Bind events for selection checkboxes.
$('.tree-selector').change(function(){that.select($(this).attr('id'),$(this).is(':checked'))});
$('#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('select-all',checkbox.prop('checked'));
}
});
// Make the dropdown sticky
// Dirty solution by stopping click propagation
@ -132,7 +140,8 @@ define([
$(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) {
// Close the menu if a click happens outside of the menu list (and of the tree-selector-btn)
if (!$('#tree-selector-btn').is(e.target) && $('#tree-selector-btn').has(e.target).length === 0 && $('#tree-selector-menu').has(e.target).length === 0) {
$('#tree-selector-btn').parent().removeClass('open');
}
});
@ -520,8 +529,13 @@ define([
$('#'+checkbox_ids[i]).parent().parent().removeClass('disabled');
}
}
// Update badge
$('#badge-'+checkbox_ids[i]).text(selected_nums[i]===0 ? '' : selected_nums[i]);
// Update counters
// Turn empty counter into a ' ' on the main checkbox for correct button height.
var empty_counter = i===0 ? ' ' : '';
$('#counter-'+checkbox_ids[i]).html(selected_nums[i]===0 ? empty_counter : selected_nums[i]);
// Alternative : display selected/total
// $('#counter-'+checkbox_ids[i]).html(selected_nums[i]===0 ? empty_counter : selected_nums[i] + '/' + total_nums[i]);
// Update each checkbox status
if (selected_nums[i] === 0) {
$('#'+checkbox_ids[i])[0].indeterminate = false;

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

@ -12,7 +12,6 @@
@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;
@ -183,24 +182,22 @@ input.engine_num_input {
}
#tree-selector {
display: inline-block;
padding-right: 5px;
padding-right: 0px;
}
#button-select-all {
min-width: 50px;
}
#select-all {
margin-top:-1px;
margin-left: @dashboard_lr_pad;
vertical-align: baseline;
margin-right: 2px;
}
#tree-selector-menu {
width: 200px;
.menuitem label{
margin-bottom: 0px;
}
input[type=checkbox] {
margin-left: 0px;
vertical-align: baseline;
}
}

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

@ -77,9 +77,8 @@ data-terminals-available="{{terminals_available}}"
<div id="notebook_list">
<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">
<span class="badge pull-right" id="badge-select-all"></span>
<input type="checkbox" class="tree-selector" id="select-all"></input>
<button type="button" class="btn btn-default btn-xs" id="button-select-all">
<input type="checkbox" class="tree-selector pull-left" id="select-all"><span id="counter-select-all">&nbsp;</span></input>
</button>
<button class="btn btn-default btn-xs dropdown-toggle" type="button" id="tree-selector-btn" aria-expanded="true">
<span class="caret"></span>
@ -88,7 +87,7 @@ data-terminals-available="{{terminals_available}}"
<ul id="tree-selector-menu" class="dropdown-menu" role="menu" aria-labelledby="tree-selector-btn">
<li role="presentation">
<a role="menuitem">
<span class="badge pull-right" id="badge-select-folders"></span>
<span class="badge pull-right" id="counter-select-folders"></span>
<input type="checkbox" class="tree-selector" id="select-folders"></input>
<label for="select-folders">
<i class="folder_icon icon-fixed-width"></i>
@ -98,7 +97,7 @@ data-terminals-available="{{terminals_available}}"
</li>
<li role="presentation">
<a role="menuitem">
<span class="badge pull-right" id="badge-select-notebooks"></span>
<span class="badge pull-right" id="counter-select-notebooks"></span>
<input type="checkbox" class="tree-selector" id="select-notebooks"></input>
<label for="select-notebooks">
<i class="notebook_icon icon-fixed-width"></i>
@ -108,7 +107,7 @@ data-terminals-available="{{terminals_available}}"
</li>
<li role="presentation">
<a role="menuitem">
<span class="badge pull-right" id="badge-select-running-notebooks"></span>
<span class="badge pull-right" id="counter-select-running-notebooks"></span>
<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>
@ -118,7 +117,7 @@ data-terminals-available="{{terminals_available}}"
</li>
<li role="presentation">
<a role="menuitem">
<span class="badge pull-right" id="badge-select-files"></span>
<span class="badge pull-right" id="counter-select-files"></span>
<input type="checkbox" class="tree-selector" id="select-files"></input>
<label for="select-files">
<i class="file_icon icon-fixed-width"></i>