From 5fe94896958a77c05a6186ae72a167ad9a53beb3 2014-12-19 14:20:16
From: Bussonnier Matthias <bussonniermatthias@gmail.com>
Date: 2014-12-19 14:20:16
Subject: [PATCH] make global css change on command/edit mode

---

diff --git a/IPython/html/static/notebook/js/cell.js b/IPython/html/static/notebook/js/cell.js
index 77ca5a5..a20202e 100644
--- a/IPython/html/static/notebook/js/cell.js
+++ b/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 {
diff --git a/IPython/html/static/notebook/js/notificationarea.js b/IPython/html/static/notebook/js/notificationarea.js
index 2cc4371..4279bb6 100644
--- a/IPython/html/static/notebook/js/notificationarea.js
+++ b/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 
 
diff --git a/IPython/html/static/notebook/less/cell.less b/IPython/html/static/notebook/less/cell.less
index 448c570..e568115 100644
--- a/IPython/html/static/notebook/less/cell.less
+++ b/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 {
diff --git a/IPython/html/static/notebook/less/notificationarea.less b/IPython/html/static/notebook/less/notificationarea.less
index 2679d24..7bdacaa 100644
--- a/IPython/html/static/notebook/less/notificationarea.less
+++ b/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(' ');
 }
 
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index b0e529c..a29b598 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -370,12 +370,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;
   }
 }
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 1a9c872..090e05e 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -8240,12 +8240,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;
   }
 }
@@ -9793,7 +9793,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;
@@ -9802,13 +9802,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;
@@ -9817,10 +9817,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 {
diff --git a/IPython/html/templates/notebook.html b/IPython/html/templates/notebook.html
index 49dcf03..cfc6de9 100644
--- a/IPython/html/templates/notebook.html
+++ b/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">
diff --git a/IPython/html/tests/util.js b/IPython/html/tests/util.js
index 61f0a23..4186372 100644
--- a/IPython/html/tests/util.js
+++ b/IPython/html/tests/util.js
@@ -505,7 +505,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 === i) {
+            if (!this.cell_mode_is('edit')) {
+                return false;
+            }
+        } else {
+            if (this.cell_mode_is('edit')) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 
 casper.is_only_cell_on = function(i, on_class, off_class) {
@@ -527,6 +539,19 @@ casper.is_only_cell_on = function(i, on_class, off_class) {
     return true;
 };
 
+
+casper.cell_mode_is = function(index, mode) {
+    // Check if a cell is in a specific mode
+    return this.evaluate(function(i, c) {
+        var cell = IPython.notebook.get_cell(i);
+        if (cell) {
+            return cell.mode === mode;
+        }
+        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) {