diff --git a/notebook/static/notebook/js/cell.js b/notebook/static/notebook/js/cell.js index 963a856ec5..809143efc7 100644 --- a/notebook/static/notebook/js/cell.js +++ b/notebook/static/notebook/js/cell.js @@ -299,6 +299,7 @@ define([ this.element.removeClass('marked'); } } + this.events.trigger('cell:marking-changed', {cell:this, value:value}); } }); diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js index 27d3a49c10..8311053335 100644 --- a/notebook/static/notebook/js/notebook.js +++ b/notebook/static/notebook/js/notebook.js @@ -186,6 +186,11 @@ define(function (require) { Notebook.prototype.bind_events = function () { var that = this; + this.events.on('cell:marking-changed', function(){ + console.log('trigger'); + that.update_marked_status(); + }); + this.events.on('set_next_input.Notebook', function (event, data) { if (data.replace) { data.cell.set_text(data.text); @@ -621,6 +626,7 @@ define(function (require) { Notebook.prototype.toggle_cells_marked = function(cells) { cells = cells || this.get_cells(); cells.forEach(function(cell) { cell.marked = !cell.marked; }); + this.update_marked_status(); }; /** @@ -630,6 +636,7 @@ define(function (require) { Notebook.prototype.mark_all_cells = function(cells) { cells = cells || this.get_cells(); cells.forEach(function(cell) { cell.marked = true; }); + this.update_marked_status(); }; /** @@ -638,6 +645,7 @@ define(function (require) { */ Notebook.prototype.unmark_all_cells = function(cells) { this.get_marked_cells(cells).forEach(function(cell) { cell.marked = false; }); + this.update_marked_status(); }; /** @@ -728,8 +736,18 @@ define(function (require) { var selectedIndex = Math.min(Math.max(this.get_selected_index() + offset, 0), this.ncells()-1); this.select(selectedIndex); this.get_selected_cell().marked = true; + this.update_marked_status() }; + Notebook.prototype.update_marked_status = function(){ + var indicies = this.get_marked_indices(); + if ( indicies.length === 0){ + this.element.removeClass('jp-marking'); + } else { + this.element.addClass('jp-marking'); + } + } + // Cell selection. /** @@ -1018,6 +1036,7 @@ define(function (require) { this.set_dirty(true); return this; + this.update_marked_status(); }; /** @@ -1061,6 +1080,7 @@ define(function (require) { this.undelete_index = null; } $('#undelete_cell').addClass('disabled'); + this.update_marked_status(); }; /** @@ -1484,6 +1504,7 @@ define(function (require) { new_cell.set_text(texta); new_cell.marked = cell.marked; } + this.update_marked_status(); }; /** diff --git a/notebook/static/notebook/less/cell.less b/notebook/static/notebook/less/cell.less index 3f9d566fcb..983af40486 100644 --- a/notebook/static/notebook/less/cell.less +++ b/notebook/static/notebook/less/cell.less @@ -1,3 +1,10 @@ +._marked_style(@n) { + + border-left-color: @marked_border_color; + border-left-width: @n; + padding-left: 6px-@n; +} + div.cell { border: 1px solid transparent; .vbox(); @@ -7,13 +14,39 @@ div.cell { border-style: solid; &.selected { - border-color: @border_color; + border-color: transparent; /* Don't border the cells when printing */ @media print { border-color: transparent; } } + .command_mode .jp-marking &.selected { + + /* Don't border the cells when printing */ + @media print { + border-color: transparent; + } + + ._marked_style(2px); + + &.marked { + border-left-color: @marked_border_color; + ._marked_style(4px); + } + + + + } + + .command_mode &.selected { + + ._marked_style(2px); + + } + + + .edit_mode &.selected { border-color: green; @@ -24,9 +57,7 @@ div.cell { } &.marked { - border-left-color: @marked_border_color; - border-left-width: 3px; - padding-left: 3px; + ._marked_style(3px); } width: 100%;