diff --git a/IPython/frontend/html/notebook/static/style/style.min.css b/IPython/frontend/html/notebook/static/style/style.min.css
index 4fa5eb6..d54833c 100644
--- a/IPython/frontend/html/notebook/static/style/style.min.css
+++ b/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;}
diff --git a/IPython/frontend/html/notebook/static/tree/js/main.js b/IPython/frontend/html/notebook/static/tree/js/main.js
index 0a1edcc..47b0553 100644
--- a/IPython/frontend/html/notebook/static/tree/js/main.js
+++ b/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,
diff --git a/IPython/frontend/html/notebook/static/tree/js/notebooklist.js b/IPython/frontend/html/notebook/static/tree/js/notebooklist.js
index 4f2a4dd..4ca82df 100644
--- a/IPython/frontend/html/notebook/static/tree/js/notebooklist.js
+++ b/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);
- };
};
diff --git a/IPython/frontend/html/notebook/static/tree/less/tree.less b/IPython/frontend/html/notebook/static/tree/less/tree.less
index c0f0d99..ab45e88 100644
--- a/IPython/frontend/html/notebook/static/tree/less/tree.less
+++ b/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 {
diff --git a/IPython/frontend/html/notebook/templates/tree.html b/IPython/frontend/html/notebook/templates/tree.html
index fe88eb2..61e1165 100644
--- a/IPython/frontend/html/notebook/templates/tree.html
+++ b/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">