From a53b1a9f3987316de3ff241b33612107b6d8f868 2012-03-08 19:27:29 From: Brian Granger Date: 2012-03-08 19:27:29 Subject: [PATCH] Refactoring templates and top level js/css organization. --- diff --git a/IPython/frontend/html/notebook/handlers.py b/IPython/frontend/html/notebook/handlers.py index ba1e5a2..eb9e9cd 100644 --- a/IPython/frontend/html/notebook/handlers.py +++ b/IPython/frontend/html/notebook/handlers.py @@ -211,6 +211,7 @@ class LoginHandler(AuthenticatedHandler): read_only=self.read_only, logged_in=self.logged_in, login_available=self.login_available, + base_project_url=self.application.ipython_app.base_project_url, message=message ) @@ -246,6 +247,7 @@ class LogoutHandler(AuthenticatedHandler): read_only=self.read_only, logged_in=self.logged_in, login_available=self.login_available, + base_project_url=self.application.ipython_app.base_project_url, message=message) diff --git a/IPython/frontend/html/notebook/static/css/layout.css b/IPython/frontend/html/notebook/static/css/fbm.css similarity index 85% rename from IPython/frontend/html/notebook/static/css/layout.css rename to IPython/frontend/html/notebook/static/css/fbm.css index d8bec47..0e21d19 100644 --- a/IPython/frontend/html/notebook/static/css/layout.css +++ b/IPython/frontend/html/notebook/static/css/fbm.css @@ -1,10 +1,4 @@ -.border-box-sizing { - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; -} - /* Flexible box model classes */ /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */ @@ -101,30 +95,3 @@ -moz-box-pack: center; box-pack: center; } - -.message { - border-width: 1px; - border-style: solid; - text-align: center; - padding: 0.5em; - margin: 0.5em 0; -} - -.message.error { - background-color: #FFD3D1; - border-color: red; -} - -.message.warning { - background-color: #FFD09E; - border-color: orange; -} - -.message.info { - background-color: #CBFFBA; - border-color: green; -} - -#content_panel { - margin: 0.5em; -} \ No newline at end of file diff --git a/IPython/frontend/html/notebook/static/css/login.css b/IPython/frontend/html/notebook/static/css/login.css new file mode 100644 index 0000000..41eb790 --- /dev/null +++ b/IPython/frontend/html/notebook/static/css/login.css @@ -0,0 +1,6 @@ + +#main_app { + height: 100px; + width: 350px; + margin: 50px auto; +} diff --git a/IPython/frontend/html/notebook/static/css/logout.css b/IPython/frontend/html/notebook/static/css/logout.css new file mode 100644 index 0000000..7767494 --- /dev/null +++ b/IPython/frontend/html/notebook/static/css/logout.css @@ -0,0 +1,7 @@ + +#main_app { + height: 100px; + width: 200px; + margin: 50px auto; +} + diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index 6fa3ab9..dabd755 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -78,6 +78,14 @@ span#notebook_name { font-size: 85%; } + +div#main_app { + /* Initially hidden to prevent FLOUC */ + display: none; + width: 100%; + position: relative; +} + span#quick_help_area { position: static; padding: 5px 0px; diff --git a/IPython/frontend/html/notebook/static/css/base.css b/IPython/frontend/html/notebook/static/css/page.css similarity index 85% rename from IPython/frontend/html/notebook/static/css/base.css rename to IPython/frontend/html/notebook/static/css/page.css index 5088bfb..e6e7e77 100644 --- a/IPython/frontend/html/notebook/static/css/base.css +++ b/IPython/frontend/html/notebook/static/css/page.css @@ -14,7 +14,7 @@ body { right: 0px; top: 0px; bottom: 0px; - overflow: hidden; + overflow: visible; } @@ -41,11 +41,9 @@ span#ipython_notebook h1 img { color: black; } -div#main_app { - /* Initially hidden to prevent FLOUC */ +#site { + width: 100% display: none; - width: 100%; - position: relative; } /* We set the fonts by hand here to override the values in the theme */ @@ -63,11 +61,17 @@ div#main_app { font-size: 77%; } +input.ui-button { + padding: 0.3em 0.9em; +} + span#login_widget { float: right; } -/* generic class for hidden objects */ -.hidden { - display: none; +.border-box-sizing { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; } + diff --git a/IPython/frontend/html/notebook/static/css/projectdashboard.css b/IPython/frontend/html/notebook/static/css/projectdashboard.css index 0ca7484..1217970 100644 --- a/IPython/frontend/html/notebook/static/css/projectdashboard.css +++ b/IPython/frontend/html/notebook/static/css/projectdashboard.css @@ -5,46 +5,17 @@ * Author: IPython Development Team */ - -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: auto; -} - -#left_panel { +#main_app { + width: 920px; + margin: auto; } -#drop_zone { - height: 200px; - width: 200px -} - -#content_panel { - width: 600px; -} - -#content_toolbar { +#notebooks_toolbar { padding: 5px; height: 25px; line-height: 25px; } -#header_border { - width: 100%; - height: 2px; -} - -#app_hbox { - width: 100%; -} - #drag_info { float: left; } diff --git a/IPython/frontend/html/notebook/static/js/layout.js b/IPython/frontend/html/notebook/static/js/layoutmanager.js similarity index 100% rename from IPython/frontend/html/notebook/static/js/layout.js rename to IPython/frontend/html/notebook/static/js/layoutmanager.js diff --git a/IPython/frontend/html/notebook/static/js/loginmain.js b/IPython/frontend/html/notebook/static/js/loginmain.js index 684d3e0..503f1ea 100644 --- a/IPython/frontend/html/notebook/static/js/loginmain.js +++ b/IPython/frontend/html/notebook/static/js/loginmain.js @@ -12,19 +12,11 @@ $(document).ready(function () { - $('div#header').addClass('border-box-sizing'); - $('div#header_border').addClass('border-box-sizing ui-widget ui-widget-content'); - + IPython.page = new IPython.Page(); + $('input#login_submit').button(); $('div#main_app').addClass('border-box-sizing ui-widget'); - $('div#app_hbox').addClass('hbox'); - - $('div#left_panel').addClass('box-flex'); - $('div#right_panel').addClass('box-flex'); - $('input#signin').button(); - - // These have display: none in the css file and are made visible here to prevent FLOUC. - $('div#header').css('display','block'); - $('div#main_app').css('display','block'); + IPython.page.show(); + $('input#password_input').focus(); }); diff --git a/IPython/frontend/html/notebook/static/js/loginwidget.js b/IPython/frontend/html/notebook/static/js/loginwidget.js index 763118e..288772a 100644 --- a/IPython/frontend/html/notebook/static/js/loginwidget.js +++ b/IPython/frontend/html/notebook/static/js/loginwidget.js @@ -24,6 +24,8 @@ var IPython = (function (IPython) { this.element.find('button#logout').button(); this.element.find('button#login').button(); }; + + LoginWidget.prototype.bind_events = function () { var that = this; this.element.find("button#logout").click(function () { diff --git a/IPython/frontend/html/notebook/static/js/logoutmain.js b/IPython/frontend/html/notebook/static/js/logoutmain.js new file mode 100644 index 0000000..8bbddb4 --- /dev/null +++ b/IPython/frontend/html/notebook/static/js/logoutmain.js @@ -0,0 +1,20 @@ +//---------------------------------------------------------------------------- +// Copyright (C) 2008-2011 The IPython Development Team +// +// Distributed under the terms of the BSD License. The full license is in +// the file COPYING, distributed as part of this software. +//---------------------------------------------------------------------------- + +//============================================================================ +// On document ready +//============================================================================ + + +$(document).ready(function () { + + IPython.page = new IPython.Page(); + $('div#main_app').addClass('border-box-sizing ui-widget'); + IPython.page.show(); + +}); + diff --git a/IPython/frontend/html/notebook/static/js/notebooklist.js b/IPython/frontend/html/notebook/static/js/notebooklist.js index 50dd96a..1a79e04 100644 --- a/IPython/frontend/html/notebook/static/js/notebooklist.js +++ b/IPython/frontend/html/notebook/static/js/notebooklist.js @@ -21,7 +21,6 @@ var IPython = (function (IPython) { }; NotebookList.prototype.style = function () { - this.element.addClass('ui-widget ui-widget-content'); $('div#project_name').addClass('ui-widget ui-widget-header'); }; diff --git a/IPython/frontend/html/notebook/static/js/notebookmain.js b/IPython/frontend/html/notebook/static/js/notebookmain.js index 34cd61c..f048e93 100644 --- a/IPython/frontend/html/notebook/static/js/notebookmain.js +++ b/IPython/frontend/html/notebook/static/js/notebookmain.js @@ -99,7 +99,6 @@ $(document).ready(function () { // hide various elements from read-only view $('div#pager').remove(); $('div#pager_splitter').remove(); - $('span#login_widget').removeClass('hidden'); // set the notebook name field as not modifiable $('#notebook_name').attr('disabled','disabled') diff --git a/IPython/frontend/html/notebook/static/js/page.js b/IPython/frontend/html/notebook/static/js/page.js new file mode 100644 index 0000000..7eaca83 --- /dev/null +++ b/IPython/frontend/html/notebook/static/js/page.js @@ -0,0 +1,44 @@ +//---------------------------------------------------------------------------- +// Copyright (C) 2008-2011 The IPython Development Team +// +// Distributed under the terms of the BSD License. The full license is in +// the file COPYING, distributed as part of this software. +//---------------------------------------------------------------------------- + +//============================================================================ +// Global header/site setup. +//============================================================================ + +var IPython = (function (IPython) { + + var Page = function () { + this.style(); + this.bind_events(); + }; + + Page.prototype.style = function () { + $('div#header').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'); + $('div#site').addClass('border-box-sizing') + }; + + + Page.prototype.bind_events = function () { + }; + + + Page.prototype.show = 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'); + $('div#site').css('display','block'); + }; + + IPython.Page = Page; + + return IPython; + +}(IPython)); diff --git a/IPython/frontend/html/notebook/static/js/pagemain.js b/IPython/frontend/html/notebook/static/js/pagemain.js new file mode 100644 index 0000000..35c2670 --- /dev/null +++ b/IPython/frontend/html/notebook/static/js/pagemain.js @@ -0,0 +1,19 @@ +//---------------------------------------------------------------------------- +// Copyright (C) 2008-2011 The IPython Development Team +// +// Distributed under the terms of the BSD License. The full license is in +// the file COPYING, distributed as part of this software. +//---------------------------------------------------------------------------- + +//============================================================================ +// On document ready +//============================================================================ + + +$(document).ready(function () { + + IPython.page = new IPython.Page(); + IPython.page.show(); + +}); + diff --git a/IPython/frontend/html/notebook/static/js/projectdashboardmain.js b/IPython/frontend/html/notebook/static/js/projectdashboardmain.js index 516b406..41337c3 100644 --- a/IPython/frontend/html/notebook/static/js/projectdashboardmain.js +++ b/IPython/frontend/html/notebook/static/js/projectdashboardmain.js @@ -12,31 +12,21 @@ $(document).ready(function () { - $('div#header').addClass('border-box-sizing'); - $('div#header_border').addClass('border-box-sizing ui-widget ui-widget-content'); + IPython.page = new IPython.Page(); $('div#main_app').addClass('border-box-sizing ui-widget'); - $('div#app_hbox').addClass('hbox'); - - $('div#content_toolbar').addClass('ui-widget ui-helper-clearfix'); - + $('div#notebooks_toolbar').addClass('ui-widget ui-helper-clearfix'); $('#new_notebook').button().click(function (e) { window.open($('body').data('baseProjectUrl')+'new'); }); - $('div#left_panel').addClass('box-flex'); - $('div#right_panel').addClass('box-flex'); - - IPython.read_only = $('meta[name=read_only]').attr("content") == 'True'; + IPython.read_only = $('body').data('readOnly') === 'True'; IPython.notebook_list = new IPython.NotebookList('div#notebook_list'); IPython.login_widget = new IPython.LoginWidget('span#login_widget'); IPython.notebook_list.load_list(); - // These have display: none in the css file and are made visible here to prevent FLOUC. - $('div#header').css('display','block'); - $('div#main_app').css('display','block'); - + IPython.page.show(); }); diff --git a/IPython/frontend/html/notebook/templates/login.html b/IPython/frontend/html/notebook/templates/login.html index 4c5b2c0..b99dc08 100644 --- a/IPython/frontend/html/notebook/templates/login.html +++ b/IPython/frontend/html/notebook/templates/login.html @@ -1,26 +1,42 @@ -{% extends layout.html %} +{% extends page.html %} -{% block content_panel %} +{% block stylesheet %} - {% if login_available %} + + +{% end %} + + +{% block login_widget %} +{% end %} + + +{% block site %} +
+ + {% if login_available %}
- Password: - + Password: +
+ {% end %} + {% if message %} + {% for key in message %} +
+ {{message[key]}} +
+ {% end %} {% end %} -{% end %} +
-{% block login_widget %} {% end %} + {% block script %} - + + + {% end %} diff --git a/IPython/frontend/html/notebook/templates/logout.html b/IPython/frontend/html/notebook/templates/logout.html index 8087508..e31f0ac 100644 --- a/IPython/frontend/html/notebook/templates/logout.html +++ b/IPython/frontend/html/notebook/templates/logout.html @@ -1,28 +1,40 @@ -{% extends layout.html %} +{% extends page.html %} -{% block content_panel %} -
    - {% if read_only or not login_available %} +{% block stylesheet %} - Proceed to the list of notebooks. + - {% else %} +{% end %} + + +{% block login_widget %} +{% end %} + +{% block site %} - Proceed to the login page. +
    + {% if message %} + {% for key in message %} +
    + {{message[key]}} +
    + {% end %} {% end %} -
+ {% if read_only or not login_available %} + Proceed to the dashboard. + {% else %} + Proceed to the login page. + {% end %} -{% end %} -{% block login_widget %} +
+ {% end %} {% block script %} - + + + {% end %} diff --git a/IPython/frontend/html/notebook/templates/layout.html b/IPython/frontend/html/notebook/templates/page.html similarity index 68% rename from IPython/frontend/html/notebook/templates/layout.html rename to IPython/frontend/html/notebook/templates/page.html index 700a706..2701985 100644 --- a/IPython/frontend/html/notebook/templates/layout.html +++ b/IPython/frontend/html/notebook/templates/page.html @@ -8,8 +8,8 @@ - - + + {% block stylesheet %} {% end %} @@ -21,7 +21,7 @@ -
- -
- -
- -
- {% block left_panel %} - {% end %} -
- -
- {% if message %} - - {% for key in message %} -
- {{message[key]}} -
- {% end %} - {% end %} - - {% block content_panel %} - {% end %} -
-
- {% block right_panel %} - {% end %} -
- -
- +
+{% block site %} +{% end %}
- + {% block script %} diff --git a/IPython/frontend/html/notebook/templates/projectdashboard.html b/IPython/frontend/html/notebook/templates/projectdashboard.html index 9a64a0c..b5cb848 100644 --- a/IPython/frontend/html/notebook/templates/projectdashboard.html +++ b/IPython/frontend/html/notebook/templates/projectdashboard.html @@ -1,27 +1,26 @@ -{% extends layout.html %} +{% extends page.html %} -{% block title %} -IPython Dashboard -{% end %} +{% block title %}IPython Dashboard{% end %} {% block stylesheet %} {% end %} -{% block meta %} - -{% end %} {% 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 content_panel %} +{% block site %} + +
+ {% if logged_in or not read_only %} -
+
Drag files onto the list to import notebooks. @@ -35,6 +34,9 @@ data-base-kernel-url={{base_kernel_url}}

{{project}}

+ +
+ {% end %} {% block script %}