Skip to content
Browse files

Starting to refactor the notebook layout

  • Loading branch information...
1 parent 7fc2c96 commit ad2890ad658d91f8c05d7488266fa5c51f740857 @ellisonbg ellisonbg committed
View
34 IPython/frontend/html/notebook/static/css/notebook.css
@@ -69,6 +69,7 @@ body {
right: 0px;
top: 0px;
bottom: 0px;
+ overflow: hidden;
}
div#wrapper {
@@ -79,7 +80,7 @@ div#wrapper {
span#ipython_notebook h1 {
font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
- font-size: 26pt;
+ font-size: 22pt;
padding: 10px;
margin: 10px;
}
@@ -107,13 +108,31 @@ span#kernel_status {
color: black;
}
-div.notebook {
- /* This is a trick from Google Docs. We set the height artificially low
- and set overflow-y: auto to force scrolling of this dev when needed,
- but prevent the browser window from scrolling. Crazy hack */
- height: 15px;
+div#notebook_app {
+}
+
+div#left_panel {
+ width: 200px;
overflow-y: auto;
- overflow-x: hidden;
+}
+
+div#pager_splitter {
+ height: 7px;
+}
+
+div#left_panel_splitter {
+ width: 7px;
+}
+
+div#pager {
+ height: 200px;
+ overflow: auto;
+
+}
+
+div#notebook {
+ overflow-y: scroll;
+ overflow-x: auto;
padding: 0px 40px;
background-color: white;
font-size: 12pt;
@@ -121,7 +140,6 @@ div.notebook {
.monospace-font {
font-family: monospace;
-/* font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;*/
font-size: 12pt;
}
View
38 IPython/frontend/html/notebook/static/js/notebook_main.js
@@ -7,7 +7,41 @@
$(document).ready(function () {
$('div#wrapper').addClass('vbox border-box-sizing')
- $('div.notebook').addClass('box-flex1 border-box-sizing')
+ $('div#notebook_app').addClass('hbox box-flex1 border-box-sizing')
+ $('div#left_panel').addClass('vbox border-box-sizing ui-widget ui-widget-content')
+ $('div#pager_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
+ $('div#notebook_panel').addClass('vbox box-flex1 border-box-sizing ui-widget ui-widget-content')
+ $('div#notebook').addClass('vbox box-flex1 border-box-sizing')
+ $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
+ $('div#pager').addClass('border-box-sizing')
+
+ $('div#pager_splitter').click(function () {
+ $('div#pager').toggle('fast');
+ });
+
+ $('div#pager_splitter').hover(
+ function () {
+ $('div#pager_splitter').addClass('ui-state-hover');
+ },
+ function () {
+ $('div#pager_splitter').removeClass('ui-state-hover');
+ }
+ );
+
+ $('div#pager').hide();
+
+ $('div#left_panel_splitter').click(function () {
+ $('div#left_panel').toggle('fast');
+ });
+
+ $('div#left_panel_splitter').hover(
+ function () {
+ $('div#left_panel_splitter').addClass('ui-state-hover');
+ },
+ function () {
+ $('div#left_panel_splitter').removeClass('ui-state-hover');
+ }
+ );
MathJax.Hub.Config({
tex2jax: {
@@ -20,7 +54,7 @@ $(document).ready(function () {
}
});
- IPython.notebook = new IPython.Notebook('div.notebook');
+ IPython.notebook = new IPython.Notebook('div#notebook');
IPython.notebook.insert_code_cell_after();
$("#menu_tabs").tabs();
View
115 IPython/frontend/html/notebook/templates/notebook.html
@@ -32,65 +32,21 @@
<div id="wrapper">
<div id="header">
- <span id="ipython_notebook"><h1>[I]:Python Notebook</h1></span>
+ <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
</div>
+<div id="notebook_app">
-<div id="tools">
-
-<div id="menu_tabs">
- <span id="kernel_status">Idle</span>
- <ul>
- <li><a href="#cell_tab">Cell</a></li>
- <li><a href="#kernel_tab">Kernel</a></li>
- <li><a href="#help_tab">Help</a></li>
- </ul>
- <div id="cell_tab">
- <span id="cell_toolbar">
- <span id="move_cell">
- <button id="move_up">Move up</button>
- <button id="move_down">Move down</button>
- </span>
- <span id="insert_delete">
- <button id="insert_cell_before">Before</button>
- <button id="insert_cell_after">After</button>
- <button id="delete_cell">Delete</button>
- </span>
- <span id="cell_type">
- <button id="to_code">Code</button>
- <button id="to_text">Text</button>
- </span>
- <span id="sort">
- <button id="sort_cells">Sort</button>
- </span>
- <span id="toggle">
- <button id="collapse">Collapse</button>
- <button id="expand">Expand</button>
- </span>
- </span>
+ <div id="left_panel"></div>
+ <div id="left_panel_splitter"></div>
+ <div id="notebook_panel">
+ <div id="notebook"></div>
+ <div id="pager_splitter"></div>
+ <div id="pager">This is a test</div>
</div>
- <div id="kernel_tab">
- <span id="kernel_toolbar">
- <button id="interrupt_kernel">Interrupt</button>
- <button id="restart_kernel">Restart</button>
- </span>
- </div>
- <div id="help_tab">
- <span id="help_toolbar">
- <button><a href="http://docs.python.org" target="_blank">Python</a></button>
- <button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>
- <button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>
- <button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>
- <button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>
- <button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>
- </span>
- </div>
-</div>
</div>
-<div class="notebook"></div>
-
</div>
<script src="static/jquery/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
@@ -110,3 +66,58 @@
</body>
</html>
+
+
+<!--<div id="tools">-->
+
+<!--<div id="menu_tabs">-->
+<!-- <span id="kernel_status">Idle</span>-->
+<!-- <ul>-->
+<!-- <li><a href="#cell_tab">Cell</a></li>-->
+<!-- <li><a href="#kernel_tab">Kernel</a></li>-->
+<!-- <li><a href="#help_tab">Help</a></li>-->
+<!-- </ul>-->
+<!-- <div id="cell_tab">-->
+<!-- <span id="cell_toolbar">-->
+<!-- <span id="move_cell">-->
+<!-- <button id="move_up">Move up</button>-->
+<!-- <button id="move_down">Move down</button>-->
+<!-- </span>-->
+<!-- <span id="insert_delete">-->
+<!-- <button id="insert_cell_before">Before</button>-->
+<!-- <button id="insert_cell_after">After</button>-->
+<!-- <button id="delete_cell">Delete</button>-->
+<!-- </span>-->
+<!-- <span id="cell_type">-->
+<!-- <button id="to_code">Code</button>-->
+<!-- <button id="to_text">Text</button>-->
+<!-- </span>-->
+<!-- <span id="sort">-->
+<!-- <button id="sort_cells">Sort</button>-->
+<!-- </span>-->
+<!-- <span id="toggle">-->
+<!-- <button id="collapse">Collapse</button>-->
+<!-- <button id="expand">Expand</button>-->
+<!-- </span>-->
+<!-- </span>-->
+<!-- </div>-->
+<!-- <div id="kernel_tab">-->
+<!-- <span id="kernel_toolbar">-->
+<!-- <button id="interrupt_kernel">Interrupt</button>-->
+<!-- <button id="restart_kernel">Restart</button>-->
+<!-- </span>-->
+<!-- </div>-->
+<!-- <div id="help_tab">-->
+<!-- <span id="help_toolbar">-->
+<!-- <button><a href="http://docs.python.org" target="_blank">Python</a></button>-->
+<!-- <button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>-->
+<!-- <button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>-->
+<!-- <button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>-->
+<!-- <button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>-->
+<!-- <button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>-->
+<!-- </span>-->
+<!-- </div>-->
+<!--</div>-->
+
+<!--</div>-->
+

0 comments on commit ad2890a

Please sign in to comment.
Something went wrong with that request. Please try again.