re-hook notification area for editor.

- re-order element to be the same as in notebook,
 - rename events correctly.
 - Add event on savign to show that save is in progress, that get
   dismissed on file save

Closes #7569

IPython/html/static/edit/js/editor.js

@@ -162,6 +162,7 @@ function($,
         var that = this;
         // record change generation for isClean
         this.generation = this.codemirror.changeGeneration();
+        that.events.trigger("file_saving.Editor");
         return this.contents.save(this.file_path, model).then(function(data) {
             that.events.trigger("file_saved.Editor", data);
         });

IPython/html/static/edit/js/main.js

@@ -64,6 +64,7 @@ require([
         '#notification_area', {
         events: events,
     });
+    editor.notification_area = notification_area;
     notification_area.init_notification_widgets();
 
     utils.load_extensions_from_config(config);

IPython/html/static/edit/js/notificationarea.js

@@ -17,10 +17,13 @@ define([
      */
     EditorNotificationArea.prototype.init_notification_widgets = function () {
         var that = this;
-        var enw = this.new_notification_widget('editor');
+        var savew = this.new_notification_widget('save');
         
-        this.events.on("save_succeeded.TextEditor", function() {
-            enw.set_message("File saved", 2000);
+        this.events.on("file_saving.Editor", function() {
+            savew.set_message("Saving File...");
+        });
+        this.events.on("file_saved.Editor", function() {
+            savew.set_message("File saved", 2000);
         });
     };
     

IPython/html/static/edit/less/edit.less

@@ -5,6 +5,11 @@
     padding: 0px 5px;
 }
 
+#current-mode{
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
 #texteditor-backdrop {
     padding-top: @page-header-padding;
     padding-bottom: @page-header-padding;

IPython/html/static/edit/less/menubar.less

@@ -13,10 +13,6 @@
   max-height: 20em;
 }
 
-#current-mode {
-    margin-right: @padding-large-horizontal;
-}
-
 .edit_app {
   #header {
     .box-shadow(@global-shadow);

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

@@ -4,19 +4,19 @@
 }
 
 .indicator_area {
+    .pull-right();
     color: @navbar-default-link-color;
     margin-left: 5px;
     margin-right: 5px;
     width: 11px;
     z-index: 10;
     text-align: center;
+    width: auto;
+    border-left: 1px solid;
 }
 
 #kernel_indicator {
-    .pull-right();
     .indicator_area();
-    width: auto;
-    border-left: 1px solid;
     
     .kernel_indicator_name {
         padding-left: 5px;

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

@@ -8723,9 +8723,6 @@ ul#new-menu {
   overflow: auto;
   max-height: 20em;
 }
-#current-mode {
-  margin-right: 16px;
-}
 .edit_app #header {
   -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
   box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
@@ -8740,6 +8737,10 @@ ul#new-menu {
   display: table;
   padding: 0px 5px;
 }
+#current-mode {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 #texteditor-backdrop {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -10392,12 +10393,16 @@ ul#help_menu li a i {
   z-index: 10;
 }
 .indicator_area {
+  float: right !important;
+  float: right;
   color: #777777;
   margin-left: 5px;
   margin-right: 5px;
   width: 11px;
   z-index: 10;
   text-align: center;
+  width: auto;
+  border-left: 1px solid;
 }
 #kernel_indicator {
   float: right !important;
@@ -10424,6 +10429,8 @@ ul#help_menu li a i {
   width: 11px;
   z-index: 10;
   text-align: center;
+  width: auto;
+  border-left: 1px solid;
 }
 .edit_mode .modal_indicator:before {
   display: inline-block;

IPython/html/templates/edit.html

@@ -31,6 +31,9 @@ data-file-path="{{file_path}}"
   <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
+          <p  class="navbar-text indicator_area">
+          <span id="current-mode" >current mode</span>
+          </p>
         <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <i class="fa fa-bars"></i>
           <span class="navbar-text">Menu</span>
@@ -69,7 +72,6 @@ data-file-path="{{file_path}}"
               </ul>
             </li>
           </ul>
-          <p id="current-mode" class="navbar-text navbar-right">current mode</p>
         </div>
       </div>
     </div>

IPython/html/templates/notebook.html

@@ -58,7 +58,7 @@ data-notebook-path="{{notebook_path}}"
               <i class="fa fa-bars"></i>
               <span class="navbar-text">Menu</span>
             </button>
-            <p id="kernel_indicator" class="navbar-text">
+            <p id="kernel_indicator" class="navbar-text indicator_area">
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>