Skip to content

Commit d61cd6e

Browse files
authored
Merge pull request #3776 from gnestor/inline-run-button
Update styles for inline run button
2 parents a71a822 + 43bd70b commit d61cd6e

File tree

2 files changed

+20
-12
lines changed

2 files changed

+20
-12
lines changed

notebook/static/notebook/js/codecell.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@ define([
161161
var input = $('<div></div>').addClass('input');
162162
this.input = input;
163163

164+
var prompt_container = $('<div/>').addClass('prompt_container');
165+
164166
var run_this_cell = $('<div></div>').addClass('run_this_cell');
165167
run_this_cell.prop('title', 'Run this cell');
166168
run_this_cell.append('<i class="fa-step-forward fa"></i>');
@@ -170,6 +172,7 @@ define([
170172
});
171173

172174
var prompt = $('<div/>').addClass('prompt input_prompt');
175+
173176
var inner_cell = $('<div/>').addClass('inner_cell');
174177
this.celltoolbar = new celltoolbar.CellToolbar({
175178
cell: this,
@@ -189,7 +192,8 @@ define([
189192
this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this));
190193
$(this.code_mirror.getInputField()).attr("spellcheck", "false");
191194
inner_cell.append(input_area);
192-
input.append(run_this_cell).append(prompt).append(inner_cell);
195+
prompt_container.append(prompt).append(run_this_cell);
196+
input.append(prompt_container).append(inner_cell);
193197

194198
var output = $('<div></div>');
195199
cell.append(input).append(output);

notebook/static/notebook/less/codecell.less

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,34 +21,38 @@ div.input {
2121
}
2222
}
2323

24+
div.prompt_container {
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: space-between;
28+
align-items: flex-start;
29+
text-align: right;
30+
}
31+
2432
/* input_area and input_prompt must match in top border and margin for alignment */
2533
div.input_prompt {
2634
color: @input_prompt_color;
2735
border-top: 1px solid transparent;
2836
}
2937

30-
.run_this_cell {
31-
visibility: hidden;
38+
div.run_this_cell {
39+
display: none;
3240
cursor: pointer;
3341
color: #333;
3442
padding-top: 5px;
3543
padding-bottom: 5px;
36-
padding-left: 1ex;
37-
padding-right: 1ex;
44+
padding-left: 2ex;
45+
padding-right: 2ex;
3846
width: 1ex;
3947
}
4048

4149
div.code_cell div.input_prompt {
42-
min-width: 11ex;
43-
}
44-
45-
div.code_cell:hover div.input .run_this_cell {
46-
visibility: visible;
50+
min-width: 15ex;
4751
}
4852

4953
@media (-moz-touch-enabled: 1), (any-pointer: coarse) {
50-
.run_this_cell {
51-
visibility: visible;
54+
div.run_this_cell {
55+
display: block;
5256
}
5357
}
5458

0 commit comments

Comments
 (0)