Merge pull request #3535 from lucasoshiro/clickable-prompt

[WIP] Executing cell when clicking its prompt

Author: takluyver

notebook/static/notebook/js/codecell.js

@@ -160,6 +160,15 @@ define([
 
         var input = $('<div></div>').addClass('input');
         this.input = input;
+
+        var run_this_cell = $('<div></div>').addClass('run_this_cell');
+        run_this_cell.prop('title', 'Run this cell');
+        run_this_cell.append('<i class="fa-step-forward fa"></i>');
+        run_this_cell.click(function (event) {
+            event.stopImmediatePropagation();
+            that.execute();
+        });
+
         var prompt = $('<div/>').addClass('prompt input_prompt');
         var inner_cell = $('<div/>').addClass('inner_cell');
         this.celltoolbar = new celltoolbar.CellToolbar({
@@ -180,7 +189,7 @@ define([
         this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this));
         $(this.code_mirror.getInputField()).attr("spellcheck", "false");
         inner_cell.append(input_area);
-        input.append(prompt).append(inner_cell);
+        input.append(run_this_cell).append(prompt).append(inner_cell);
 
         var output = $('<div></div>');
         cell.append(input).append(output);
@@ -505,6 +514,7 @@ define([
         }
         this.input_prompt_number = number;
         var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
+
         // This HTML call is okay because the user contents are escaped.
         this.element.find('div.input_prompt').html(prompt_html);
         this.events.trigger('set_dirty.Notebook', {value: true});

notebook/static/notebook/less/codecell.less

@@ -27,6 +27,31 @@ div.input_prompt {
     border-top: 1px solid transparent;
 }
 
+.run_this_cell {
+    visibility: hidden;
+    cursor: pointer;
+    color: #333;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 1ex;
+    padding-right: 1ex;
+    width: 1ex;
+}
+
+div.code_cell div.input_prompt {
+    min-width: 11ex;
+}
+
+div.code_cell:hover .run_this_cell {
+    visibility: visible;
+}
+
+@media (-moz-touch-enabled: 1), (any-pointer: coarse) {
+    .run_this_cell {
+        visibility: visible;
+    }
+}
+
 // The styles related to div.highlight are for nbconvert HTML output only. This works
 // because the .highlight div isn't present in the live notebook. We could put this into
 // nbconvert, but it easily falls out of sync, can't use our less variables and doesn't