Merge pull request #3776 from gnestor/inline-run-button

Update styles for inline run button

Author: takluyver

notebook/static/notebook/js/codecell.js

@@ -161,6 +161,8 @@ define([
         var input = $('<div></div>').addClass('input');
         this.input = input;
 
+        var prompt_container = $('<div/>').addClass('prompt_container');
+
         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>');
@@ -170,6 +172,7 @@ define([
         });
 
         var prompt = $('<div/>').addClass('prompt input_prompt');
+        
         var inner_cell = $('<div/>').addClass('inner_cell');
         this.celltoolbar = new celltoolbar.CellToolbar({
             cell: this, 
@@ -189,7 +192,8 @@ 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(run_this_cell).append(prompt).append(inner_cell);
+        prompt_container.append(prompt).append(run_this_cell);
+        input.append(prompt_container).append(inner_cell);
 
         var output = $('<div></div>');
         cell.append(input).append(output);

notebook/static/notebook/less/codecell.less

@@ -21,34 +21,38 @@ div.input {
     }
 }
 
+div.prompt_container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    text-align: right;
+}
+
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_prompt {
     color: @input_prompt_color;
     border-top: 1px solid transparent;
 }
 
-.run_this_cell {
-    visibility: hidden;
+div.run_this_cell {
+    display: none;
     cursor: pointer;
     color: #333;
     padding-top: 5px;
     padding-bottom: 5px;
-    padding-left: 1ex;
-    padding-right: 1ex;
+    padding-left: 2ex;
+    padding-right: 2ex;
     width: 1ex;
 }
 
 div.code_cell div.input_prompt {
-    min-width: 11ex;
-}
-
-div.code_cell:hover div.input .run_this_cell {
-    visibility: visible;
+    min-width: 15ex;
 }
 
 @media (-moz-touch-enabled: 1), (any-pointer: coarse) {
-    .run_this_cell {
-        visibility: visible;
+    div.run_this_cell {
+        display: block;
     }
 }