From 6dc7b078b95484fe8c1d93986d0ac755491e305f Mon Sep 17 00:00:00 2001 From: Brian Granger Date: Tue, 7 Feb 2012 16:05:54 -0800 Subject: [PATCH] Refactoring templates and top level js/css organization. --- IPython/frontend/html/notebook/handlers.py | 2 + .../html/notebook/static/css/login.css | 6 +++ .../html/notebook/static/css/logout.css | 7 +++ .../html/notebook/static/css/notebook.css | 8 +++ .../static/css/{base.css => page.css} | 20 +++++--- .../notebook/static/css/projectdashboard.css | 37 ++------------ .../html/notebook/static/js/loginmain.js | 16 ++---- .../html/notebook/static/js/loginwidget.js | 2 + .../html/notebook/static/js/logoutmain.js | 20 ++++++++ .../html/notebook/static/js/notebooklist.js | 1 - .../html/notebook/static/js/notebookmain.js | 1 - .../frontend/html/notebook/static/js/page.js | 44 ++++++++++++++++ .../html/notebook/static/js/pagemain.js | 19 +++++++ .../static/js/projectdashboardmain.js | 18 ++----- .../html/notebook/templates/login.html | 50 ++++++++++++------- .../html/notebook/templates/logout.html | 50 ++++++++++++------- .../templates/{layout.html => page.html} | 42 +++------------- .../notebook/templates/projectdashboard.html | 20 ++++---- 18 files changed, 214 insertions(+), 149 deletions(-) create mode 100644 IPython/frontend/html/notebook/static/css/login.css create mode 100644 IPython/frontend/html/notebook/static/css/logout.css rename IPython/frontend/html/notebook/static/css/{base.css => page.css} (86%) create mode 100644 IPython/frontend/html/notebook/static/js/logoutmain.js create mode 100644 IPython/frontend/html/notebook/static/js/page.js create mode 100644 IPython/frontend/html/notebook/static/js/pagemain.js rename IPython/frontend/html/notebook/templates/{layout.html => page.html} (58%) diff --git a/IPython/frontend/html/notebook/handlers.py b/IPython/frontend/html/notebook/handlers.py index ba1e5a26f..eb9e9cdba 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/login.css b/IPython/frontend/html/notebook/static/css/login.css new file mode 100644 index 000000000..41eb7900a --- /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 000000000..7767494f8 --- /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 6fa3ab9bb..dabd75528 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 86% rename from IPython/frontend/html/notebook/static/css/base.css rename to IPython/frontend/html/notebook/static/css/page.css index 5088bfb77..e6e7e778c 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 0ca74842f..1217970e1 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; +#main_app { + width: 920px; + margin: auto; } -#left_panel { -} - -#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/loginmain.js b/IPython/frontend/html/notebook/static/js/loginmain.js index 684d3e00c..503f1eaa2 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 763118e8d..288772a94 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 000000000..8bbddb4af --- /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 50dd96a61..1a79e045a 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 34cd61c33..f048e938b 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 000000000..7eaca8372 --- /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 000000000..35c2670fc --- /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 516b406ba..41337c38a 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 4c5b2c069..b99dc0866 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 %} - -
- Password: - -
- - {% end %} + {% end %} + {% block login_widget %} {% end %} -{% block script %} - + +{% block site %} + +
+ + {% if login_available %} +
+ Password: + +
+ {% end %} + + {% if message %} + {% for key in message %} +
+ {{message[key]}} +
+ {% end %} + {% end %} + +
+ +{% end %} + + +{% block script %} + + + {% end %} diff --git a/IPython/frontend/html/notebook/templates/logout.html b/IPython/frontend/html/notebook/templates/logout.html index 8087508af..e31f0ac1c 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 %} - - Proceed to the login page. - - {% end %} - -
+ {% end %} + {% block login_widget %} {% end %} -{% block script %} - +{% block site %} + +
+ + {% 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 script %} + + + {% end %} diff --git a/IPython/frontend/html/notebook/templates/layout.html b/IPython/frontend/html/notebook/templates/page.html similarity index 58% rename from IPython/frontend/html/notebook/templates/layout.html rename to IPython/frontend/html/notebook/templates/page.html index 700a7062c..2701985b7 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 9a64a0c60..b5cb84840 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 %}