From ad2890ad658d91f8c05d7488266fa5c51f740857 2011-07-21 03:42:35
From: Brian E. Granger <ellisonbg@gmail.com>
Date: 2011-07-21 03:42:35
Subject: [PATCH] Starting to refactor the notebook layout

---

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 1e64842..0526484 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/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;
 }
 
diff --git a/IPython/frontend/html/notebook/static/js/notebook_main.js b/IPython/frontend/html/notebook/static/js/notebook_main.js
index ab54a2b..2944581 100644
--- a/IPython/frontend/html/notebook/static/js/notebook_main.js
+++ b/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();
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 5c4d086..542a27f 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/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>-->
+