From f9eddd6a8f89b53ca5cc21d3caaec0f08ce5ab1e Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 3 Dec 2013 16:16:07 -0800 Subject: [PATCH 01/33] adding visual play button --- examples/notebooks/Part 1 - Running Code.ipynb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/notebooks/Part 1 - Running Code.ipynb b/examples/notebooks/Part 1 - Running Code.ipynb index c39ade916..e6692c8a4 100644 --- a/examples/notebooks/Part 1 - Running Code.ipynb +++ b/examples/notebooks/Part 1 - Running Code.ipynb @@ -34,7 +34,7 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "Run a code cell using `Shift-Enter` or pressing the \"Play\" button in the toolbar above:" + "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" ] }, { From 0cef349751bdf19e3fe6234dbf89808406d9514f Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 3 Dec 2013 16:21:57 -0800 Subject: [PATCH 02/33] adding visual interrupt button --- examples/notebooks/Part 1 - Running Code.ipynb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/notebooks/Part 1 - Running Code.ipynb b/examples/notebooks/Part 1 - Running Code.ipynb index e6692c8a4..cbba82aeb 100644 --- a/examples/notebooks/Part 1 - Running Code.ipynb +++ b/examples/notebooks/Part 1 - Running Code.ipynb @@ -34,7 +34,7 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" + "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" ] }, { @@ -79,7 +79,7 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "Code is run in a separate process called the IPython Kernel. The Kernel can be interrupted or restarted. Try running the following cell and then hit the \"Stop\" button in the toolbar above." + "Code is run in a separate process called the IPython Kernel. The Kernel can be interrupted or restarted. Try running the following cell and then hit the button in the toolbar above." ] }, { From 77165ad97ac9908d7dc79a12942a5fb248392ece Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 3 Dec 2013 18:45:09 -0800 Subject: [PATCH 03/33] add toolbar highlighting on hover --- examples/notebooks/Part 1 - Running Code.ipynb | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/examples/notebooks/Part 1 - Running Code.ipynb b/examples/notebooks/Part 1 - Running Code.ipynb index cbba82aeb..b051978c7 100644 --- a/examples/notebooks/Part 1 - Running Code.ipynb +++ b/examples/notebooks/Part 1 - Running Code.ipynb @@ -34,7 +34,18 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" + "\n", + "\n", + "\n", + "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" ] }, { @@ -79,7 +90,7 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "Code is run in a separate process called the IPython Kernel. The Kernel can be interrupted or restarted. Try running the following cell and then hit the button in the toolbar above." + "Code is run in a separate process called the IPython Kernel. The Kernel can be interrupted or restarted. Try running the following cell and then hit the button in the toolbar above." ] }, { From 1b41d3ae4d0b598a8f2fd433d9da069742b0149e Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 3 Dec 2013 20:39:48 -0800 Subject: [PATCH 04/33] try to have buttons render properly on nbviewer --- examples/notebooks/Part 1 - Running Code.ipynb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/notebooks/Part 1 - Running Code.ipynb b/examples/notebooks/Part 1 - Running Code.ipynb index b051978c7..ece375976 100644 --- a/examples/notebooks/Part 1 - Running Code.ipynb +++ b/examples/notebooks/Part 1 - Running Code.ipynb @@ -45,7 +45,7 @@ "};\n", "\n", "\n", - "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" + "Run a code cell using `Shift-Enter` or pressing the button in the toolbar above:" ] }, { @@ -90,7 +90,7 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "Code is run in a separate process called the IPython Kernel. The Kernel can be interrupted or restarted. Try running the following cell and then hit the button in the toolbar above." + "Code is run in a separate process called the IPython Kernel. The Kernel can be interrupted or restarted. Try running the following cell and then hit the button in the toolbar above." ] }, { From cc9e8e690ef570085d3631850b4985ebeef70480 Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Thu, 6 Feb 2014 15:06:41 -0800 Subject: [PATCH 05/33] a less jarring color --- examples/notebooks/Part 1 - Running Code.ipynb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/notebooks/Part 1 - Running Code.ipynb b/examples/notebooks/Part 1 - Running Code.ipynb index ece375976..690120a5d 100644 --- a/examples/notebooks/Part 1 - Running Code.ipynb +++ b/examples/notebooks/Part 1 - Running Code.ipynb @@ -40,7 +40,7 @@ "var hl = function (id, on){\n", " $(id)[0].style.background = '';\n", " if (on) {\n", - " $(id)[0].style.background = 'gold';\n", + " $(id)[0].style.background = 'lightcyan';\n", " }\n", "};\n", "\n", From 3cf601b58e6efa8a804aa52fa403ee4d71954ca6 Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Mon, 10 Feb 2014 23:51:29 -0800 Subject: [PATCH 06/33] initial bootstrap tour One way to get it to play currently is with a cell like this: %%javascript $.getScript('/static/notebook/js/tour.js') provided that you have Bootstrap Tour installed in the components --- IPython/html/static/notebook/js/tour.js | 105 ++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 IPython/html/static/notebook/js/tour.js diff --git a/IPython/html/static/notebook/js/tour.js b/IPython/html/static/notebook/js/tour.js new file mode 100644 index 000000000..3dace1678 --- /dev/null +++ b/IPython/html/static/notebook/js/tour.js @@ -0,0 +1,105 @@ +//---------------------------------------------------------------------------- +// Copyright (C) 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. +//---------------------------------------------------------------------------- + +//============================================================================ +// Tour of IPython Notebok UI (with Bootstrap Tour) +//============================================================================ + +var step_duration = 5000; +var tour_steps = [ + { + element: $("#ipython_notebook").parent(), + title: "Let's take it from the top", + placement: 'bottom', + content: "This is the Header.", + backdrop: true, + }, { + element: "#ipython_notebook", + title: "Header", + placement: 'bottom', + content: "Clicking here takes you back to the Dashboard." + }, { + element: "#notebook_name", + title: "Filename", + placement: 'bottom', + content: "You can click here to change the filename for this notebook." + }, + { + element: "#checkpoint_status", + title: "Checkpoint status", + placement: 'bottom', + content: "Information about the last time this notebook was saved." + }, { + element: "#menus", + placement: 'bottom', + title: "Notebook Menubar", + content: "The actions that you can perform with this notebook, its cells, and its kernel" + }, { + element: "#menus", + placement: 'bottom', + title: "Notebook Menubar", + content: "The actions that you can perform with this notebook, its cells, and its kernel" + }, { + element: "#notification_kernel", + placement: 'bottom', + onShow: function(tour) { IPython.notification_area.widget_dict.kernel.set_message("sample notification"); }, + onHide: function(tour) { IPython.notification_area.widget_dict.kernel.set_message("sample notification", 100); }, + title: "Notification area", + content: "Message in response to user action (Kernel busy, Interrupt, etc)" + }, { + element: "#modal_indicator", + title: "Mode indicator", + placement: 'bottom', + content: "IPython has two modes: Edit Mode and Command Mode. This indicator tells you which mode you are in." + }, { + element: "#modal_indicator", + title: "Mode indicator", + placement: 'bottom', + content: "Right now you are in Command mode, and many keyboard shortcuts are available." + }, { + element: "#modal_indicator", + title: "Edit Mode", + placement: 'bottom', + onShow: function(tour) { IPython.notebook.edit_mode(); }, + content: "And now we've switched to Edit Mode, regular typing will go into the currently active cell." + }, { + element: $('.selected'), + title: "Edit Mode", + placement: 'bottom', + onHide: function(tour) { IPython.notebook.command_mode(); }, + content: "Notice that the border around the currently active cell changed color." + }, { + element: "#kernel_indicator", + title: "Kernel indicator", + placement: 'bottom', + content: "This is the Kernel indicator. It looks like this when the Kernel is idle.", + }, { + element: "#kernel_indicator", + title: "Kernel Indicator", + placement: 'bottom', + onShow: function(tour) { $([IPython.events]).trigger('status_busy.Kernel'); }, + onHide: function(tour) { $([IPython.events]).trigger('status_idle.Kernel');}, + content: "The Kernel indicator looks like this when the Kernel is busy.", + } +]; +var tour = new Tour({ + //orphan: true, + storage: false, // start tour from beginning every time + //element: $("#ipython_notebook"), + debug: true, + reflex: true, // click on element to continue tour + //backdrop: true, // show dark behind popover + animation: false, + duration: step_duration, + onStart: function() { console.log('tour started'); }, + steps: tour_steps, +}); +// Initialize the tour +tour.init(); + +// Start the tour +tour.start(); From 52766703b46f475228b1d0faeb1aa73af1dba15f Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 11 Feb 2014 11:18:23 -0800 Subject: [PATCH 07/33] fix typo for the location of bower.json --- IPython/html/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/IPython/html/README.md b/IPython/html/README.md index cbb20a17f..eea16cb06 100644 --- a/IPython/html/README.md +++ b/IPython/html/README.md @@ -13,9 +13,9 @@ Developers of the IPython Notebook will need to install the following tools: We are moving to a model where our JavaScript dependencies are managed using [bower](http://bower.io/). These packages are installed in `static/components` -and commited into our git repo. Our dependencies are described in the file -`static/bower.json`. To update our bower packages, run `fab components` in this -directory. +and committed into our git repo. Our dependencies are described in the file +`static/components/bower.json`. To update our bower packages, run `fab +components` in this directory. Because CodeMirror does not use proper semantic versioning for its GitHub tags, we maintain our own fork of CodeMirror that is used with bower. This fork should From a765132684c89d92afdde460751a03809759bce8 Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 11 Feb 2014 18:32:49 -0800 Subject: [PATCH 08/33] add the tour to the page --- IPython/html/templates/notebook.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/IPython/html/templates/notebook.html b/IPython/html/templates/notebook.html index b5e136129..71e4e3468 100644 --- a/IPython/html/templates/notebook.html +++ b/IPython/html/templates/notebook.html @@ -215,6 +215,7 @@ class="notebook_app"
  • Help