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

Try moving terminal page contents into the running tab.

IPython/html/static/base/less/page.less

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

IPython/html/static/notebook/less/menubar.less

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

IPython/html/static/style/style.min.css

@@ -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;

IPython/html/static/tree/js/sessionlist.js

@@ -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(){

IPython/html/static/tree/js/terminallist.js

@@ -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 () {

IPython/html/static/tree/less/tree.less

@@ -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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

IPython/html/templates/tree.html

@@ -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 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 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>
-      {% 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>
         <div id="clusters" class="tab-pane">
           <div id="cluster_toolbar" class="row">
             <div class="col-xs-8 no-padding">