Add edit/command mode indicator.

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

@@ -534,6 +534,7 @@ var IPython = (function (IPython) {
 
     Notebook.prototype.command_mode = function () {
         if (this.mode !== 'command') {
+            $([IPython.events]).trigger('command_mode.Notebook');
             var index = this.get_edit_index();
             var cell = this.get_cell(index);
             if (cell) {
@@ -546,6 +547,7 @@ var IPython = (function (IPython) {
 
     Notebook.prototype.edit_mode = function () {
         if (this.mode !== 'edit') {
+            $([IPython.events]).trigger('edit_mode.Notebook');
             var cell = this.get_selected_cell();
             if (cell === null) {return;}  // No cell is selected
             // We need to set the mode to edit to prevent reentering this method

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

@@ -69,17 +69,29 @@ var IPython = (function (IPython) {
 
     NotificationArea.prototype.init_notification_widgets = function() {
         var knw = this.new_notification_widget('kernel');
-        var $kernel_indic = $("#kernel_indicator");
+        var $kernel_ind_icon = $("#kernel_indicator_icon");
+        var $modal_ind_icon = $("#modal_indicator_icon");
+
+        // Command/Edit mode
+        $([IPython.events]).on('edit_mode.Notebook',function () {
+            IPython.save_widget.update_document_title();
+            $modal_ind_icon.attr('class','icon-pencil').attr('title','Edit Mode');
+        });
+
+        $([IPython.events]).on('command_mode.Notebook',function () {
+            IPython.save_widget.update_document_title();
+            $modal_ind_icon.attr('class','').attr('title','Command Mode');
+        });
 
         // Kernel events
         $([IPython.events]).on('status_idle.Kernel',function () {
             IPython.save_widget.update_document_title();
-            $kernel_indic.attr('class','icon-circle-blank').attr('title','Kernel Idle');
+            $kernel_ind_icon.attr('class','icon-circle-blank').attr('title','Kernel Idle');
         });
 
         $([IPython.events]).on('status_busy.Kernel',function () {
             window.document.title='(Busy) '+window.document.title;
-            $kernel_indic.attr('class','icon-circle').attr('title','Kernel Busy');
+            $kernel_ind_icon.attr('class','icon-circle').attr('title','Kernel Busy');
         });
 
         $([IPython.events]).on('status_restarting.Kernel',function () {

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

@@ -1,3 +1,17 @@
 #notification_area {
     z-index: 10;
 }
+
+.indicator_area {
+    color: @navbarLinkColor;
+    padding: 4px 3px;
+    margin: 0px;
+    width: 11px;
+    z-index: 10;
+}
+
+#kernel_indicator {
+    // Pull it to the right, outside the container boundary
+    margin-right: -16px;
+}
+

IPython/html/static/notebook/less/notificationwidget.less

@@ -1,4 +1,4 @@
-.notification_widget{
+.notification_widget {
     color: @navbarLinkColor;
     padding: 1px 12px;
     margin: 2px 4px;
@@ -10,13 +10,4 @@
     &.span {
         padding-right:2px;
     }
-    
-}
-
-#indicator_area{
-    color: @navbarLinkColor;
-    padding: 2px 2px;
-    margin: 2px -9px 2px 4px;
-    z-index: 10;
-    
 }

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

@@ -1502,8 +1502,9 @@ p{margin-bottom:0}
 i.menu-icon{padding-top:4px}
 ul#help_menu li a{overflow:hidden;padding-right:2.2em}ul#help_menu li a i{margin-right:-1.2em}
 #notification_area{z-index:10}
+.indicator_area{color:#777;padding:4px 3px;margin:0;width:11px;z-index:10}
+#kernel_indicator{margin-right:-16px}
 .notification_widget{color:#777;padding:1px 12px;margin:2px 4px;z-index:10;border:1px solid #ccc;border-radius:4px;background:rgba(240,240,240,0.5)}.notification_widget.span{padding-right:2px}
-#indicator_area{color:#777;padding:2px 2px;margin:2px -9px 2px 4px;z-index:10}
 div#pager_splitter{height:8px}
 #pager-container{position:relative;padding:15px 0}
 div#pager{overflow:auto;display:none}div#pager pre{font-size:13px;line-height:1.231em;color:#000;background-color:#f7f7f7;padding:.4em}

IPython/html/templates/notebook.html

@@ -251,8 +251,11 @@ class="notebook_app"
             </ul>
         </li>
     </ul>
-    <div class='pull-right' id="indicator_area">
-        <div id="kernel_indicator"></div>
+    <div id="kernel_indicator" class="indicator_area pull-right">
+       <i id="kernel_indicator_icon"></i>
+    </div>
+    <div id="modal_indicator" class="indicator_area pull-right">
+       <i id="modal_indicator_icon"></i>
     </div>
     <div id="notification_area"></div>
     </div>