fight with bootstrap a little less in tree view

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

@@ -383,16 +383,16 @@ ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2
 .list_toolbar{padding:5px;height:25px;line-height:25px;}
 .toolbar_info{float:left;}
 .toolbar_buttons{float:right;}
-.list_header{height:25px;line-height:25px;padding:3px 5px;border:1px solid #ccc;border-radius:4px 4px 0px 0px;}
-.list_item{height:25px;line-height:25px;padding:3px 5px;border:1px solid #ccc;border-top:0px;}
+.list_header>a{font-size:100%;}
+.cluster_list_item>a{color:#000000 !important;}
 .notebook_item a{text-decoration:none;}
 .status_col{float:right;width:325px;}
 .engines_col{float:right;width:325px;}
 .action_col{float:right;width:64px;text-align:right;}
-.item_buttons{float:right;margin-top:1px;}
+.item_buttons{float:right;}
 input.nbname_input{height:15px;}
 .highlight_text{color:blue;}
-#project_name>.breadcrumb{padding:0;background-color:transparent;}
+#project_name>.breadcrumb{padding:0px;margin:0px;background-color:transparent;font-size:120%;}
 input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-bottom:0;width:90px;}
 .ansiblack{color:black;}
 .ansired{color:darkred;}

IPython/frontend/html/notebook/static/tree/js/clusterlist.js

@@ -28,17 +28,6 @@ var IPython = (function (IPython) {
         $('#cluster_toolbar').addClass('list_toolbar');
         $('#cluster_list_info').addClass('toolbar_info');
         $('#cluster_buttons').addClass('toolbar_buttons');
-        var children = $('li#cluster_header').addClass('list_header').children();
-        children.eq(0).addClass('profile_col');
-        children.eq(1).addClass('action_col');
-        children.eq(2).addClass('engines_col');
-        children.eq(3).addClass('status_col');
-        // $('div#cluster_header').children().eq(2).addClass('engines_col');
-        // $('div#cluster_header').children().eq(3).addClass('status_col');
-        // $('#refresh_cluster_list').button({
-        //     icons : {primary: 'ui-icon-arrowrefresh-1-s'},
-        //     text : false
-        // });
     };
 
 
@@ -64,18 +53,18 @@ var IPython = (function (IPython) {
 
 
     ClusterList.prototype.clear_list = function () {
-        this.element.children('.list_item').remove();
+        this.element.children('.cluster_list_item').remove();
     }
 
     ClusterList.prototype.load_list_success = function (data, status, xhr) {
         this.clear_list();
         var len = data.length;
         for (var i=0; i<len; i++) {
-            var item_div = $('<div/>');
-            var item = new ClusterItem(item_div);
+            var element = $('<li/>');
+            var item = new ClusterItem(element);
             item.update_state(data[i]);
-            item_div.data('item', item);
-            this.element.append(item_div);
+            element.data('item', item);
+            this.element.append(element);
         };
     };
 
@@ -93,7 +82,8 @@ var IPython = (function (IPython) {
 
 
     ClusterItem.prototype.style = function () {
-        this.element.addClass('list_item');
+        this.element.addClass('cluster_list_item').addClass("disabled");
+        this.element.append($("<a/>"));
     }
 
     ClusterItem.prototype.update_state = function (data) {
@@ -109,7 +99,7 @@ var IPython = (function (IPython) {
 
     ClusterItem.prototype.state_stopped = function () {
         var that = this;
-        this.element.empty();
+        var a = this.element.find("a");
         var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
         var status_col = $('<span/>').addClass('status_col').html('stopped');
         var engines_col = $('<span/>').addClass('engines_col');
@@ -124,10 +114,11 @@ var IPython = (function (IPython) {
                 start_button
             )
         );
-        this.element.append(profile_col).
-            append(action_col).
-            append(engines_col).
-            append(status_col);
+        a.empty()
+            .append(profile_col)
+            .append(action_col)
+            .append(engines_col)
+            .append(status_col);
         start_button.click(function (e) {
             var n = that.element.find('.engine_num_input').val();
             if (!/^\d+$/.test(n) && n.length>0) {
@@ -154,8 +145,8 @@ var IPython = (function (IPython) {
 
 
     ClusterItem.prototype.state_running = function () {
-        this.element.empty();
         var that = this;
+        var a = this.element.find("a");
         var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
         var status_col = $('<span/>').addClass('status_col').html('running');
         var engines_col = $('<span/>').addClass('engines_col').html(this.data.n);
@@ -165,10 +156,11 @@ var IPython = (function (IPython) {
                 stop_button
             )
         );
-        this.element.append(profile_col).
-            append(action_col).
-            append(engines_col).
-            append(status_col);
+        a.empty()
+            .append(profile_col)
+            .append(action_col)
+            .append(engines_col)
+            .append(status_col);
         stop_button.click(function (e) {
             var settings = {
                 cache : false,

IPython/frontend/html/notebook/static/tree/less/tree.less

@@ -26,22 +26,14 @@
     float: right;
 }
 
-.list_header {
-    height: 25px;
-    line-height: 25px;
-    padding: 3px 5px;
-    border: 1px solid #ccc;
-    border-radius: 4px 4px 0px 0px;
+.list_header > a{
+  font-size: 100%;
 }
 
 
 
-.list_item {
-    height: 25px;
-    line-height: 25px;
-    padding: 3px 5px;
-    border: 1px solid #ccc;
-    border-top: 0px;
+.cluster_list_item > a {
+    color: @textColor !important;
 }
 
 .notebook_item a {
@@ -69,7 +61,6 @@
 
 .item_buttons {
     float: right;
-    margin-top: 1px;
 }
 
 input.nbname_input {
@@ -82,8 +73,10 @@ input.nbname_input {
 
 
 #project_name > .breadcrumb {
- padding : 0;
- background-color: transparent;
+   padding: 0px;
+   margin: 0px;
+   background-color: transparent;
+   font-size: 120%;
 }
 
 input.engine_num_input {

IPython/frontend/html/notebook/templates/tree.html

@@ -45,15 +45,17 @@ data-read-only={{read_only}}
         </div>
         {% endif %}
 
-        <ul id="notebook_list" class="nav nav-stacked">
-          <li id="notebook_list_header" class="nav-header">
-            <div id="project_name">
+        <ul id="notebook_list" class="nav nav-tabs nav-stacked">
+          <li id="notebook_list_header" class="disabled list_header">
+            <a>
+              <div id="project_name" class="nav-header">
                 <ul class="breadcrumb">
                     {% for component in project_component %}
                         <li>{{component}} <span>/</span></li>
                     {% endfor %}
                 </ul>
-            </div>
+              </div>
+            </a>
           </li>
         </ul>
     </div>
@@ -68,12 +70,15 @@ data-read-only={{read_only}}
             </span>
         </div>
 
-        <ul id="cluster_list" class="nav nav-stacked">
-            <li id="cluster_header" class="nav-header">
-                <span>profile</span>
-                <span>action</span>
-                <span title="Enter the number of engines to start or empty for default"># of engines</span>
-                <span>status</span>
+        <ul id="cluster_list" class="nav nav-tabs nav-stacked">
+            <li id="cluster_header" class="disabled list_header">
+              <a class="nav-header">
+              <!-- <div class="nav-header"> -->
+                <span class="profile_col">profile</span>
+                <span class="action_col">action</span>
+                <span class="engines_col" title="Enter the number of engines to start or empty for default"># of engines</span>
+                <span class="status_col">status</span>
+              </a>
             </li>
         </ul>
     </div>