Merge pull request #7274 from Carreau/global-command

make global css change on command/edit mode

IPython/html/static/notebook/js/cell.js

@@ -126,11 +126,6 @@ define([
         } else {
             this.element.addClass('unrendered');
         }
-        if (this.mode === 'edit') {
-            this.element.addClass('edit_mode');
-        } else {
-            this.element.addClass('command_mode');
-        }
     };
 
     /**
@@ -345,8 +340,6 @@ define([
      */
     Cell.prototype.command_mode = function () {
         if (this.mode !== 'command') {
-            this.element.addClass('command_mode');
-            this.element.removeClass('edit_mode');
             this.mode = 'command';
             return true;
         } else {
@@ -361,8 +354,6 @@ define([
      */
     Cell.prototype.edit_mode = function () {
         if (this.mode !== 'edit') {
-            this.element.addClass('edit_mode');
-            this.element.removeClass('command_mode');
             this.mode = 'edit';
             return true;
         } else {

IPython/html/static/notebook/js/notificationarea.js

@@ -37,21 +37,27 @@ define([
         var that = this;
         var knw = this.new_notification_widget('kernel');
         var $kernel_ind_icon = $("#kernel_indicator_icon");
-        var $modal_ind_icon = $("#modal_indicator_icon");
+        var $modal_ind_icon = $("#modal_indicator");
+        var $body = $('body')
 
         // Command/Edit mode
         this.events.on('edit_mode.Notebook', function () {
             that.save_widget.update_document_title();
-            $modal_ind_icon.attr('class','edit_mode_icon').attr('title','Edit Mode');
+            $body.addClass('edit_mode');
+            $body.removeClass('command_mode');
+            $modal_ind_icon.attr('title','Edit Mode');
         });
 
         this.events.on('command_mode.Notebook', function () {
             that.save_widget.update_document_title();
-            $modal_ind_icon.attr('class','command_mode_icon').attr('title','Command Mode');
+            $body.removeClass('edit_mode');
+            $body.addClass('command_mode');
+            $modal_ind_icon.attr('title','Command Mode');
         });
 
         // Implicitly start off in Command mode, switching to Edit mode will trigger event
-        $modal_ind_icon.attr('class','command_mode_icon').attr('title','Command Mode');
+        $modal_ind_icon.addClass('modal_indicator').attr('title','Command Mode');
+        $body.addClass('command_mode')
 
         // Kernel events 
 

IPython/html/static/notebook/less/cell.less

@@ -14,7 +14,7 @@ div.cell {
         }
     }
 
-    &.edit_mode {
+    .edit_mode &.selected {
         border-color: green;
         /* Don't border the cells when printing */
         @media print {

IPython/html/static/notebook/less/notificationarea.less

@@ -29,11 +29,11 @@
     .indicator_area();
 }
 
-.edit_mode_icon:before {
+.edit_mode .modal_indicator:before {
     .icon(@fa-var-pencil)
 }
 
-.command_mode_icon:before {
+.command_mode .modal_indicator:before {
     .icon(' ');
 }
 

IPython/html/static/style/ipython.min.css

@@ -372,12 +372,12 @@ div.cell.selected {
     border-color: transparent;
   }
 }
-div.cell.edit_mode {
+.edit_mode div.cell.selected {
   border-color: green;
   /* Don't border the cells when printing */
 }
 @media print {
-  div.cell.edit_mode {
+  .edit_mode div.cell.selected {
     border-color: transparent;
   }
 }

IPython/html/static/style/style.min.css

@@ -8297,12 +8297,12 @@ div.cell.selected {
     border-color: transparent;
   }
 }
-div.cell.edit_mode {
+.edit_mode div.cell.selected {
   border-color: green;
   /* Don't border the cells when printing */
 }
 @media print {
-  div.cell.edit_mode {
+  .edit_mode div.cell.selected {
     border-color: transparent;
   }
 }
@@ -9867,7 +9867,7 @@ ul#help_menu li a i {
   z-index: 10;
   text-align: center;
 }
-.edit_mode_icon:before {
+.edit_mode .modal_indicator:before {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
@@ -9876,13 +9876,13 @@ ul#help_menu li a i {
   -moz-osx-font-smoothing: grayscale;
   content: "\f040";
 }
-.edit_mode_icon:before.pull-left {
+.edit_mode .modal_indicator:before.pull-left {
   margin-right: .3em;
 }
-.edit_mode_icon:before.pull-right {
+.edit_mode .modal_indicator:before.pull-right {
   margin-left: .3em;
 }
-.command_mode_icon:before {
+.command_mode .modal_indicator:before {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
@@ -9891,10 +9891,10 @@ ul#help_menu li a i {
   -moz-osx-font-smoothing: grayscale;
   content: ' ';
 }
-.command_mode_icon:before.pull-left {
+.command_mode .modal_indicator:before.pull-left {
   margin-right: .3em;
 }
-.command_mode_icon:before.pull-right {
+.command_mode .modal_indicator:before.pull-right {
   margin-left: .3em;
 }
 .kernel_idle_icon:before {

IPython/html/templates/notebook.html

@@ -61,9 +61,7 @@ class="notebook_app"
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
-            <p id="modal_indicator" class="navbar-text">
-              <i id="modal_indicator_icon"></i>
-            </p>
+            <i id="modal_indicator" class="navbar-text"></i>
             <span id="notification_area"></span>
             <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">

IPython/html/tests/util.js

@@ -395,7 +395,7 @@ casper.validate_notebook_state = function(message, mode, cell_index) {
         if (cell_index!==undefined) {
             // Is the specified cell the only cell in edit mode?
             this.test.assert(this.is_only_cell_edit(cell_index),
-                message + '; cell ' + cell_index + ' is the only cell in edit mode');
+                message + '; cell ' + cell_index + ' is the only cell in edit mode '+ this.cells_modes());
             // Is the specified cell the only cell with a focused code mirror?
             this.test.assert(this.is_cell_editor_focused(cell_index),
                 message + '; cell ' + cell_index + '\'s editor is appropriately focused');
@@ -506,7 +506,19 @@ casper.is_only_cell_selected = function(index) {
 casper.is_only_cell_edit = function(index) {
     // Check if a cell is the only cell in edit mode.
     // Pass null as the index to check if all of the cells are in command mode.
-    return this.is_only_cell_on(index, 'edit_mode', 'command_mode');
+    var cells_length = this.get_cells_length();
+    for (var j = 0; j < cells_length; j++) {
+        if (j === index) {
+            if (!this.cell_mode_is(j, 'edit')) {
+                return false;
+            }
+        } else {
+            if (this.cell_mode_is(j, 'edit')) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 
 casper.is_only_cell_on = function(i, on_class, off_class) {
@@ -528,6 +540,24 @@ casper.is_only_cell_on = function(i, on_class, off_class) {
     return true;
 };
 
+casper.cells_modes = function(){
+    return this.evaluate(function(){
+        return IPython.notebook.get_cells().map(function(x,c){return x.mode})
+    }, {});
+};
+
+casper.cell_mode_is = function(index, mode) {
+    // Check if a cell is in a specific mode
+    return this.evaluate(function(i, m) {
+        var cell = IPython.notebook.get_cell(i);
+        if (cell) {
+            return cell.mode === m;
+        }
+        return false;
+    }, {i : index, m: mode});
+};
+
+
 casper.cell_has_class = function(index, classes) {
     // Check if a cell has a class.
     return this.evaluate(function(i, c) {