mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-18 11:55:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Major refactoring of notebook.

Browse Source 
* Created new base page html/css/js.
* Everything inherits from the page template.
* Universal header border.
* Notebook list borders are set to 1px all around.
* No border around notebook area.
* Border cleanup of toolbar/menubar.
* Lots of code reorg to get ready for further refactoring.
This commit is contained in:
Brian Granger 2012-02-07 21:40:33 -08:00
parent 6dc7b078b9
commit 3631fae153
9 changed files with 76 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
IPython/frontend/html/notebook/static/css/notebook.css
View File

@ -6,14 +6,6 @@
body {
background-color: white;
/* This makes sure that the body covers the entire window and needs to
be in a different element than the display: box in wrapper below */
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: hidden;
}
@ -31,11 +23,6 @@ span#notebook_name {
font-size: 146.5%;
}
#menubar {
/* Initially hidden to prevent FLOUC */
display: none;
}
.ui-menubar-item .ui-button .ui-button-text {
padding: 0.4em 1.0em;
font-size: 100%;
@ -69,8 +56,6 @@ span#notebook_name {
}
#toolbar {
/* Initially hidden to prevent FLOUC */
display: none;
padding: 3px 15px;
}
@ -80,8 +65,6 @@ span#notebook_name {
div#main_app {
/* Initially hidden to prevent FLOUC */
display: none;
width: 100%;
position: relative;
}

2
IPython/frontend/html/notebook/static/css/page.css
View File

@ -42,7 +42,7 @@ span#ipython_notebook h1 img {
}
#site {
width: 100%
width: 100%;
display: none;
}

1
IPython/frontend/html/notebook/static/js/menubar.js
View File

@ -22,6 +22,7 @@ var IPython = (function (IPython) {
MenuBar.prototype.style = function () {
this.element.addClass('border-box-sizing');
$('ul#menus').menubar({
select : function (event, ui) {
// The selected cell loses focus when the menu is entered, so we

1
IPython/frontend/html/notebook/static/js/notebooklist.js
View File

@ -93,6 +93,7 @@ var IPython = (function (IPython) {
NotebookList.prototype.new_notebook_item = function (index) {
var item = $('<div/>');
item.addClass('notebook_item ui-widget ui-widget-content ui-helper-clearfix');
item.css('border-top-style','none');
var item_name = $('<span/>').addClass('item_name');
item.append(item_name);

79
IPython/frontend/html/notebook/static/js/notebookmain.js
View File

@ -11,75 +11,17 @@
$(document).ready(function () {
if (window.MathJax){
// MathJax loaded
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
},
displayAlign: 'left', // Change this to 'center' to center equations.
"HTML-CSS": {
styles: {'.MathJax_Display': {"margin": 0}}
}
});
}else if (window.mathjax_url != ""){
// Don't have MathJax, but should. Show dialog.
var dialog = $('<div></div>')
.append(
$("<p></p>").addClass('dialog').html(
"Math/LaTeX rendering will be disabled."
)
).append(
$("<p></p>").addClass('dialog').html(
"If you have administrative access to the notebook server and" +
" a working internet connection, you can install a local copy" +
" of MathJax for offline use with the following command on the server" +
" at a Python or IPython prompt:"
)
).append(
$("<pre></pre>").addClass('dialog').html(
">>> from IPython.external import mathjax; mathjax.install_mathjax()"
)
).append(
$("<p></p>").addClass('dialog').html(
"This will try to install MathJax into the IPython source directory."
)
).append(
$("<p></p>").addClass('dialog').html(
"If IPython is installed to a location that requires" +
" administrative privileges to write, you will need to make this call as" +
" an administrator, via 'sudo'."
)
).append(
$("<p></p>").addClass('dialog').html(
"When you start the notebook server, you can instruct it to disable MathJax support altogether:"
)
).append(
$("<pre></pre>").addClass('dialog').html(
"$ ipython notebook --no-mathjax"
)
).append(
$("<p></p>").addClass('dialog').html(
"which will prevent this dialog from appearing."
)
).dialog({
title: "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
width: "70%",
modal: true,
})
}else{
// No MathJax, but none expected. No dialog.
}
IPython.init_mathjax();
IPython.markdown_converter = new Markdown.Converter();
IPython.read_only = $('meta[name=read_only]').attr("content") == 'True';
$('div#header').addClass('border-box-sizing');
$('div#main_app').addClass('border-box-sizing ui-widget ui-widget-content');
IPython.read_only = $('body').data('readOnly') === 'True';
$('div#main_app').addClass('border-box-sizing ui-widget');
$('div#notebook_panel').addClass('border-box-sizing ui-widget');
// The header's bottom border is provided by the menu bar so we remove it.
$('div#header').css('border-bottom-style','none');
IPython.page = new IPython.Page();
IPython.markdown_converter = new Markdown.Converter();
IPython.layout_manager = new IPython.LayoutManager();
IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
@ -92,9 +34,6 @@ $(document).ready(function () {
IPython.layout_manager.do_resize();
// These have display: none in the css file and are made visible here to prevent FLOUC.
$('div#header').css('display','block');
if(IPython.read_only){
// hide various elements from read-only view
$('div#pager').remove();
@ -104,9 +43,7 @@ $(document).ready(function () {
$('#notebook_name').attr('disabled','disabled')
}
$('div#menubar').css('display','block');
$('div#toolbar').css('display','block');
$('div#main_app').css('display','block');
IPython.page.show();
IPython.layout_manager.do_resize();
$([IPython.events]).on('notebook_loaded.Notebook', function () {

15
IPython/frontend/html/notebook/static/js/page.js
View File

@ -31,12 +31,27 @@ var IPython = (function (IPython) {
Page.prototype.show = function () {
// The header and site divs start out hidden to prevent FLOUC.
// Main scripts should call this method after styling everything.
this.show_header();
this.show_site();
};
Page.prototype.show_header = function () {
// The header and site divs start out hidden to prevent FLOUC.
// Main scripts should call this method after styling everything.
$('div#header').css('display','block');
};
Page.prototype.show_site = function () {
// The header and site divs start out hidden to prevent FLOUC.
// Main scripts should call this method after styling everything.
$('div#site').css('display','block');
};
IPython.Page = Page;
return IPython;

6
IPython/frontend/html/notebook/static/js/toolbar.js
View File

@ -22,7 +22,11 @@ var IPython = (function (IPython) {
ToolBar.prototype.style = function () {
this.element.addClass('border-box-sizing');
this.element.addClass('border-box-sizing').
addClass('ui-widget ui-widget-content').
css('border-top-style','none').
css('border-left-style','none').
css('border-right-style','none');
this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
this.element.find('#save_b').button({
icons : {primary: 'ui-icon-disk'},

91
IPython/frontend/html/notebook/templates/notebook.html
View File

@ -1,60 +1,49 @@
<!DOCTYPE HTML>
<html>
{% extends page.html %}
<head>
<meta charset="utf-8">
{% block stylesheet %}
<title>IPython Notebook</title>
{% if mathjax_url %}
<script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
{% end %}
<script type="text/javascript">
// MathJax disabled, set as null to distingish from *missing* MathJax,
// where it will be undefined, and should prompt a dialog later.
window.mathjax_url = "{{mathjax_url}}";
</script>
{% if mathjax_url %}
<script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
{% end %}
<script type="text/javascript">
// MathJax disabled, set as null to distingish from *missing* MathJax,
// where it will be undefined, and should prompt a dialog later.
window.mathjax_url = "{{mathjax_url}}";
</script>
<link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
<link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
<link rel="stylesheet" href="{{ static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
<link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
<link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
<link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
<link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("css/boilerplate.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("css/layout.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("css/base.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
<link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
{% end %}
{% comment In the notebook, the read-only flag is used to determine %}
{% comment whether to hide the side panels and switch off input %}
<meta name="read_only" content="{{read_only and not logged_in}}"/>
</head>
{% block params %}
<body
data-project={{project}} data-notebook-id={{notebook_id}}
data-base-project-url={{base_project_url}} data-base-kernel-url={{base_kernel_url}}
>
data-project={{project}}
data-base-project-url={{base_project_url}}
data-base-kernel-url={{base_kernel_url}}
data-read-only={{read_only and not logged_in}}
data-notebook-id={{notebook_id}}
<div id="header">
<span id="ipython_notebook"><h1><a href='..' alt='dashboard'><img src='{{static_url("ipynblogo.png")}}' alt='IPython Notebook'/></a></h1></span>
<span id="save_widget">
{% end %}
{% block header %}
<span id="save_widget">
<span id="notebook_name"></span>
<span id="save_status"></span>
</span>
</span>
<span id="login_widget">
{% comment This is a temporary workaround to hide the logout button %}
{% comment when appropriate until notebook.html is templated %}
{% if logged_in %}
<button id="logout">Logout</button>
{% elif not logged_in and login_available %}
<button id="login">Login</button>
{% end %}
</span>
</div>
{% end %}
{% block site %}
<div id="menubar_container">
<div id="menubar">
@ -204,8 +193,10 @@
</div>
<script src="{{ static_url("jquery/js/jquery-1.7.1.min.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("jquery/js/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script>
{% end %}
{% block script %}
<script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
<script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
@ -221,17 +212,16 @@
<script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
<script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
<script src="{{ static_url("js/namespace.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/initmathjax.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/layout.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
@ -239,6 +229,5 @@
<script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
</body>
{% end %}
</html>

3
IPython/frontend/html/notebook/templates/projectdashboard.html
View File

@ -8,12 +8,15 @@
{% block params %}
data-project={{project}}
data-base-project-url={{base_project_url}}
data-base-kernel-url={{base_kernel_url}}
data-read-only={{read_only}}
{% end %}
{% block site %}
<div id="main_app">