use row-fluid for tree_list

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

@@ -1406,15 +1406,20 ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2
 .toolbar_info{float:left;}
 .toolbar_buttons{float:right;}
 .list_header>a{font-size:100%;}
+.tree_list{margin-top:16px;margin-bottom:16px;border:1px solid #eeeeee;border-radius:4px;}
+.tree_list>div{border-bottom:1px solid #eeeeee;}.tree_list>div:hover .list-item{background-color:red;}
+.tree_list>div:last-child{border:none;}
+.list_item:hover .list_item{background-color:#ddd;}
+.tree_list>div>span,.tree_list>div>div{padding:8px;}
 .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;}
+.item_buttons{}
 input.nbname_input{height:15px;}
 .highlight_text{color:blue;}
-#project_name>.breadcrumb{padding:0px;margin:0px;background-color:transparent;font-size:120%;}
+#project_name>.breadcrumb{padding:0px;margin-bottom:0px;background-color:transparent;font-weight:bold;}
 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/main.js

@@ -18,9 +18,9 $(document).ready(function () {
     });
 
     IPython.read_only = $('body').data('readOnly') === 'True';
-    IPython.notebook_list = new IPython.NotebookList('ul#notebook_list');
-    IPython.cluster_list = new IPython.ClusterList('ul#cluster_list');
-    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
+    IPython.notebook_list = new IPython.NotebookList('#notebook_list');
+    IPython.cluster_list = new IPython.ClusterList('#cluster_list');
+    IPython.login_widget = new IPython.LoginWidget('#login_widget');
 
     var interval_id=0;
     // auto refresh every xx secondes, no need to be fast,

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

@@ -28,7 +28,8 var IPython = (function (IPython) {
         $('#notebook_toolbar').addClass('list_toolbar');
         $('#drag_info').addClass('toolbar_info');
         $('#notebook_buttons').addClass('toolbar_buttons');
-        $('li#notebook_list_header').addClass('list_header');
+        $('#notebook_list_header').addClass('list_header');
+        this.element.addClass("tree_list");
     };
 
 
@@ -141,16 +142,16 var IPython = (function (IPython) {
 
 
     NotebookList.prototype.new_notebook_item = function (index) {
-        var item = $('<li/>').addClass("list_item");
+        var item = $('<div/>').addClass("list_item").addClass("row-fluid");
         // item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
         // item.css('border-top-style','none');
-        item.append(
-            $('<a/>').addClass('item_row').append(
+        item.append($("<div/>").addClass("span12").append(
+            $("<a/>").addClass("item_link").append(
                 $("<span/>").addClass("item_name")
-            ).append(
-                $('<span/>').addClass("item_buttons btn-group pull-right")
             )
-        )
+        ).append(
+            $('<div/>').addClass("item_buttons btn-group pull-right")
+        ));
         
         if (index === -1) {
             this.element.append(item);
@@ -164,29 +165,22 var IPython = (function (IPython) {
     NotebookList.prototype.add_link = function (notebook_id, nbname, item) {
         item.data('nbname', nbname);
         item.data('notebook_id', notebook_id);
-        item.find("a.item_row")
+        item.find(".item_name").text(nbname);
+        item.find("a.item_link")
             .attr('href', this.baseProjectUrl()+notebook_id)
-            .attr('target','_blank')
-            .find(".item_name").text(nbname);
+            .attr('target','_blank');
     };
 
 
     NotebookList.prototype.add_name_input = function (nbname, item) {
         item.data('nbname', nbname);
-        var new_item_name = $('<span/>').addClass('item_name');
-        new_item_name.append(
+        item.find(".item_name").empty().append(
             $('<input/>')
             .addClass("nbname_input")
             .attr('value', nbname)
             .attr('size', '30')
             .attr('type', 'text')
         );
-        var e = item.find('.item_name');
-        if (e.length === 0) {
-            item.append(new_item_name);
-        } else {
-            e.replaceWith(new_item_name);
-        };
     };
 
 

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

@@ -26,10 +26,38
     float: right;
 }
 
-.list_header > a{
+.list_header > a {
   font-size: 100%;
 }
 
+.tree_list {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  border: 1px solid @borderColor;
+  border-radius: 4px;
+}
+
+.tree_list > div {
+  border-bottom: 1px solid @borderColor;
+  &:hover .list-item{
+    background-color: red;
+  };
+}
+
+.tree_list > div:last-child {
+  border: none;
+}
+
+
+.list_item {
+  &:hover .list_item {
+    background-color: #ddd;
+  };
+}
+
+.tree_list > div > span, .tree_list > div > div {
+  padding: 8px;
+}
 
 
 .cluster_list_item > a {
@@ -60,7 +88,7
 }
 
 .item_buttons {
-    float: right;
+/*    float: right;*/
 }
 
 input.nbname_input {
@@ -73,10 +101,11 input.nbname_input {
 
 
 #project_name > .breadcrumb {
-   padding: 0px;
-   margin: 0px;
-   background-color: transparent;
-   font-size: 120%;
+    padding: 0px;
+    margin-bottom: 0px;
+    background-color: transparent;
+    font-weight: bold;
+   
 }
 
 input.engine_num_input {

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

@@ -45,19 +45,17 data-read-only={{read_only}}
         </div>
         {% endif %}
 
-        <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">
+        <div id="notebook_list">
+          <div id="notebook_list_header" class="row-fluid">
+              <div id="project_name">
                 <ul class="breadcrumb">
                     {% for component in project_component %}
                         <li>{{component}} <span>/</span></li>
                     {% endfor %}
                 </ul>
               </div>
-            </a>
-          </li>
-        </ul>
+          </div>
+        </div>
     </div>
     
     <div id="tab2" class="tab-pane">