Merge pull request #7271 from jdfreder/remove-term-page

Try moving terminal page contents into the running tab.
This commit is contained in:
Brian E. Granger 2015-01-20 15:29:25 -08:00
commit 918d13200a
7 changed files with 166 additions and 38 deletions

View File

@ -35,6 +35,7 @@ body {
width: 100%;
height: 1px;
background: @navbar-default-border;
margin-bottom: -1px;
}
@media print {

View File

@ -1,5 +1,6 @@
#menubar {
.border-box-sizing();
margin-top: 1px;
.navbar {
border-top: 1px;

View File

@ -8285,6 +8285,7 @@ body {
width: 100%;
height: 1px;
background: #e7e7e7;
margin-bottom: -1px;
}
@media print {
#header {
@ -8510,7 +8511,7 @@ ul.breadcrumb span {
vertical-align: middle;
}
.list_toolbar .tree-buttons {
padding-top: 2px;
padding-top: 1px;
}
.list_toolbar [class*="span"] {
min-height: 24px;
@ -8521,11 +8522,11 @@ ul.breadcrumb span {
.list_container {
margin-top: 4px;
margin-bottom: 20px;
border: 1px solid #ababab;
border: 1px solid #dddddd;
border-radius: 2px;
}
.list_container > div {
border-bottom: 1px solid #ababab;
border-bottom: 1px solid #dddddd;
}
.list_container > div:hover .list-item {
background-color: red;
@ -8534,7 +8535,7 @@ ul.breadcrumb span {
border: none;
}
.list_item:hover .list_item {
background-color: #ddd;
background-color: #dddddd;
}
.list_item a {
text-decoration: none;
@ -8648,6 +8649,10 @@ input.engine_num_input {
.file_icon:before.pull-right {
margin-left: .3em;
}
#notebook_toolbar .pull-right {
padding-top: 0px;
margin-right: -1px;
}
ul#new-menu {
left: auto;
right: 0;
@ -8666,6 +8671,37 @@ ul#new-menu {
#tab_content {
padding-top: 20px;
}
#running .panel-group .panel {
margin-top: 3px;
margin-bottom: 1em;
}
#running .panel-group .panel .panel-heading {
background-color: #eeeeee;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
line-height: 22px;
}
#running .panel-group .panel .panel-heading a:focus,
#running .panel-group .panel .panel-heading a:hover {
text-decoration: none;
}
#running .panel-group .panel .panel-body {
padding: 0px;
}
#running .panel-group .panel .panel-body .list_container {
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
border-radius: 0px;
}
#running .panel-group .panel .panel-body .list_container .list_item {
border-bottom: 1px solid #dddddd;
}
#running .panel-group .panel .panel-body .list_container .list_item:last-child {
border-bottom: 0px;
}
/*!
*
* IPython text editor webapp
@ -10269,6 +10305,7 @@ select[multiple].celltoolbar select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin-top: 1px;
}
#menubar .navbar {
border-top: 1px;

View File

@ -21,6 +21,36 @@ define([
this.events = options.events;
this.sessions = {};
this.base_url = options.base_url || utils.get_body_data("baseUrl");
// Add collapse arrows.
$('#running .panel-group .panel .panel-heading a').each(function(index, el) {
var $link = $(el);
var $icon = $('<i />')
.addClass('fa fa-caret-down');
$link.append($icon);
$link.down = true;
$link.click(function () {
if ($link.down) {
$link.down = false;
// jQeury doesn't know how to animate rotations. Abuse
// jQueries animate function by using an unused css attribute
// to do the animation (borderSpacing).
$icon.animate({ borderSpacing: 90 }, {
step: function(now,fx) {
$icon.css('transform','rotate(-' + now + 'deg)');
}
}, 250);
} else {
$link.down = true;
// See comment above.
$icon.animate({ borderSpacing: 0 }, {
step: function(now,fx) {
$icon.css('transform','rotate(-' + now + 'deg)');
}
}, 250);
}
});
});
};
SesssionList.prototype.load_sessions = function(){

View File

@ -20,7 +20,7 @@ define([
* base_url: string
*/
this.base_url = options.base_url || utils.get_body_data("baseUrl");
this.element_name = options.element_name || 'terminal';
this.element_name = options.element_name || 'running';
this.selector = selector;
this.terminals = [];
if (this.selector !== undefined) {
@ -38,7 +38,7 @@ define([
$('#refresh_' + this.element_name + '_list').click(function () {
that.load_terminals();
});
$('#new_terminal').click($.proxy(this.new_terminal, this));
$('#new-terminal').click($.proxy(this.new_terminal, this));
};
TerminalList.prototype.new_terminal = function () {

View File

@ -41,7 +41,7 @@ ul.breadcrumb {
vertical-align: middle;
.tree-buttons {
padding-top: 2px;
padding-top: 1px;
}
}
@ -56,12 +56,12 @@ ul.breadcrumb {
.list_container {
margin-top: @dashboard_tb_pad;
margin-bottom: 5*@dashboard_tb_pad;
border: 1px solid @border_color;
border: 1px solid @table-border-color;
border-radius: @border-radius-base;
}
.list_container > div {
border-bottom: 1px solid @border_color;
border-bottom: 1px solid @table-border-color;
&:hover .list-item{
background-color: red;
};
@ -73,7 +73,7 @@ ul.breadcrumb {
.list_item {
&:hover .list_item {
background-color: #ddd;
background-color: @table-border-color;
};
a {text-decoration: none;}
}
@ -156,6 +156,11 @@ input.engine_num_input {
.icon(@fa-var-file-o)
}
#notebook_toolbar .pull-right {
padding-top: 0px;
margin-right: -1px;
}
ul#new-menu {
// align right instead of left
left: auto;
@ -179,3 +184,44 @@ ul#new-menu {
#tab_content {
padding-top: @page-header-padding;
}
#running {
.panel-group{
.panel {
margin-top: 3px;
margin-bottom: 1em;
.panel-heading {
background-color: @page-backdrop-color;
padding-top: @dashboard_tb_pad;
padding-bottom: @dashboard_tb_pad;
padding-left: @dashboard_lr_pad;
padding-right: @dashboard_lr_pad;
line-height: @btn_mini_height;
a:focus, a:hover {
text-decoration: none;
}
}
.panel-body {
padding: 0px;
.list_container {
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
border-radius: 0px;
.list_item {
border-bottom: 1px solid @table-border-color;
&:last-child {
border-bottom: 0px;
}
}
}
}
}
}
}

View File

@ -19,9 +19,6 @@ data-terminals-available="{{terminals_available}}"
<ul id="tabs" class="nav nav-tabs">
<li class="active"><a href="#notebooks" data-toggle="tab">Files</a></li>
<li><a href="#running" data-toggle="tab">Running</a></li>
{% if terminals_available %}
<li><a href="#terminals" data-toggle="tab">Terminals</a></li>
{% endif %}
<li><a href="#clusters" data-toggle="tab">Clusters</a></li>
</ul>
<div class="tab-content">
@ -52,6 +49,11 @@ data-terminals-available="{{terminals_available}}"
<li role="presentation" id="new-folder">
<a role="menuitem" tabindex="-1" href="#">Folder</a>
</li>
{% if terminals_available %}
<li role="presentation" id="new-terminal">
<a role="menuitem" tabindex="-1" href="#">Terminal</a>
</li>
{% endif %}
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header" id="notebook-kernels">Notebooks</li>
</ul>
@ -78,7 +80,7 @@ data-terminals-available="{{terminals_available}}"
<div id="running" class="tab-pane">
<div id="running_toolbar" class="row">
<div class="col-sm-8 no-padding">
<span id="running_list_info">Currently running IPython notebooks</span>
<span id="running_list_info">Currently running Jupyter processes</span>
</div>
<div class="col-sm-4 no-padding tree-buttons">
<span id="running_buttons" class="pull-right">
@ -86,32 +88,43 @@ data-terminals-available="{{terminals_available}}"
</span>
</div>
</div>
<div id="running_list">
<div id="running_list_header" class="row list_header">
<div> There are no notebooks running. </div>
<div class="panel-group" id="accordion" >
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-target="#collapseOne" href="#">
Terminals
</a>
</div>
<div id="collapseOne" class=" collapse in">
<div class="panel-body">
{% if terminals_available %}
<div id="terminal_list">
<div id="terminal_list_header" class="row list_header">
<div> There are no terminals running. </div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-target="#collapseTwo" href="#">
Notebooks
</a>
</div>
<div id="collapseTwo" class=" collapse in">
<div class="panel-body">
<div id="running_list">
<div id="running_list_header" class="row list_header">
<div> There are no notebooks running. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if terminals_available %}
<div id="terminals" class="tab-pane">
<div id="terminal_toolbar" class="row">
<div class="col-xs-8 no-padding">
<span id="terminal_list_info">Currently running terminals</span>
</div>
<div class="col-xs-4 no-padding tree-buttons">
<span id="terminal_buttons" class="pull-right">
<button id="new_terminal" title="New terminal" class="btn btn-default btn-xs">New Terminal</button>
<button id="refresh_terminal_list" title="Refresh terminal list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
</span>
</div>
</div>
<div id="terminal_list">
<div id="terminal_list_header" class="row list_header">
<div> There are no terminals running. </div>
</div>
</div>
</div>
{% endif %}
<div id="clusters" class="tab-pane">
<div id="cluster_toolbar" class="row">
<div class="col-xs-8 no-padding">