[Common] added label for 'Save' operation

apps/common/main/lib/view/Header.js

@@ -53,6 +53,7 @@ define([
     Common.Views.Header =  Backbone.View.extend(_.extend(function(){
         var storeUsers, appConfig;
         var $userList, $panelUsers, $btnUsers;
+        var $saveStatus;
 
         var templateUserItem =
                 '<li id="status-chat-user-<%= user.get("id") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
@@ -69,7 +70,8 @@ define([
                 '</ul>');
 
         var templateRightBox = '<section>' +
-                            '<label id="doc-name"></label>' +
+                            '<label id="rib-doc-name" class="status-label"></label>' +
+                            '<a href="#" id="rib-save-status" class="status-label">All changes saved</a>' +
                             '<div class="elset">' +
                                 // '<span class="btn-slot text" id="slot-btn-users"></span>' +
                                 '<section id="tlb-box-users" class="box-cousers dropdown"">' +
@@ -194,6 +196,59 @@ define([
             }
         }
 
+        function onAppReady(mode) {
+            appConfig = mode;
+
+            var me = this;
+            me.btnGoBack.updateHint(me.textBack);
+            me.btnGoBack.on('click', function (e) {
+                me.fireEvent('go:back', ['page:current']);
+            });
+            me.btnGoBack.menu.on('item:click', function (e) {
+                me.fireEvent('go:back', ['page:new']);
+            })
+
+            me.logo.on('click', function (e) {
+                var _url = !!me.branding && !!me.branding.logo && !!me.branding.logo.url ?
+                    me.branding.logo.url : 'http://www.onlyoffice.com';
+
+                var newDocumentPage = window.open(_url);
+                newDocumentPage && newDocumentPage.focus();
+            });
+
+            $panelUsers.on('shown.bs.dropdown', function () {
+                $userList.scroller && $userList.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
+            });
+
+            $panelUsers.find('.cousers-menu')
+                .on('click', function(e) { return false; });
+
+            $btnUsers.tooltip({
+                title: 'Manage document access rights',
+                titleNorm: me.tipAccessRights,
+                titleExt: me.tipViewUsers,
+                placement: 'bottom',
+                html: true
+            });
+
+            $btnUsers.on('click', onUsersClick.bind(me));
+
+            var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
+            $labelChangeRights.on('click', onUsersClick.bind(me));
+
+            $labelChangeRights[(!mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length)?'show':'hide']();
+            $panelUsers[(storeUsers.size() > 1 || !mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
+
+            $saveStatus.attr('data-width', this.textSaveExpander);
+            if ( appConfig.canUseHistory ) {
+                $saveStatus.on('click', function(e) {
+                    me.fireEvent('history:show', ['header']);
+                });
+            } else {
+                $saveStatus.addClass('locked');
+            }
+        }
+
         return {
             options: {
                 branding: {},
@@ -231,7 +286,8 @@ define([
                     menu: new Common.UI.Menu({
                         style: 'min-width: 60px;',
                         items: [
-                            {caption: me.openNewTabText}
+                            {caption: me.itemBackCurrTab},
+                            {caption: me.itemBackNewTab}
                         ]
                     })
                 });
@@ -246,50 +302,7 @@ define([
 
                 (new Promise(function (accept, reject) {
                     Common.NotificationCenter.on('app:ready', function(mode) { accept(mode); });
-                })).then(function(m){
+                })).then(onAppReady.bind(me));
-                    mode = m;
-
-                    me.btnGoBack.updateHint(me.textBack);
-                    me.btnGoBack.on('click', function (e) {
-                        me.fireEvent('go:back', ['page:current']);
-                    });
-                    me.btnGoBack.menu.on('item:click', function (e) {
-                        me.fireEvent('go:back', ['page:new']);
-                    })
-
-                    me.logo.on('click', function (e) {
-                        var _url = !!this.branding && !!this.branding.logo && !!this.branding.logo.url ?
-                                        this.branding.logo.url : 'http://www.onlyoffice.com';
-
-                        var newDocumentPage = window.open(_url);
-                        newDocumentPage && newDocumentPage.focus();
-                    })
-
-                    $panelUsers.on('shown.bs.dropdown', function () {
-                        $userList.scroller && $userList.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
-                    });
-
-                    $panelUsers.find('.cousers-menu')
-                        .on('click', function (e) {
-                            return false;
-                        });
-
-                    $btnUsers.tooltip({
-                        title: 'Manage document access rights',
-                        titleNorm: me.tipAccessRights,
-                        titleExt: me.tipViewUsers,
-                        placement: 'bottom',
-                        html: true
-                    });
-
-                    $btnUsers.on('click', onUsersClick.bind(me));
-
-                    var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
-                    $labelChangeRights.on('click', onUsersClick.bind(me));
-
-                    $labelChangeRights[(!mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length)?'show':'hide']();
-                    $panelUsers[(storeUsers.size() > 1 || !mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
-                });
             },
 
             render: function (el, role) {
@@ -315,7 +328,7 @@ define([
                     }
 
                     if ( this.documentCaption ) {
-                        $html.find('#doc-name').html(
+                        $html.find('#rib-doc-name').text(
                             Common.Utils.String.htmlEncode(this.documentCaption) );
                     }
 
@@ -323,8 +336,10 @@ define([
                     $userList = $html.find('.cousers-list');
                     $panelUsers = $html.find('.box-cousers');
                     $btnUsers = $html.find('.btn-users');
+                    $saveStatus = $html.find('#rib-save-status');
 
                     $panelUsers.hide();
+                    $saveStatus.hide();
 
                     return $html;
                 }
@@ -423,8 +438,22 @@ define([
                 // dc.toggleClass('renamed', rename);
             },
 
+            setSaveStatus: function (status) {
+                if ( $saveStatus ) {
+                    if ( $saveStatus.is(':hidden') ) $saveStatus.show();
+
+                    var _text;
+                    switch ( status ) {
+                    case 'begin': _text = this.textSaveBegin; break;
+                    case 'changed': _text = this.textSaveChanged; break;
+                    default: _text = this.textSaveEnd;
+                    }
+
+                    $saveStatus.text( _text );
+                }
+            },
+
             textBack: 'Go to Documents',
-            openNewTabText: 'Open in New Tab',
             // txtHeaderDeveloper: 'DEVELOPER MODE',
             txtRename: 'Rename'
         }

apps/common/main/resources/less/header.less

@@ -61,6 +61,7 @@
         }
     }
 }
+
 .extra {
     > section {
         line-height: 20px;
@@ -75,13 +76,30 @@
     }
 
     &.right {
+        min-width: 150px;
         padding-right: 12px;
     }
 
-    #doc-name {
+    #rib-doc-name {
         flex-grow: 1;
     }
 
+    #rib-save-status {
+        &.locked {
+            text-decoration: none;
+            color: @gray-deep;
+            cursor: default;
+        }
+
+        &:after {
+            display: block;
+            content: attr(data-width);
+            height: 1px;
+            overflow: hidden;
+            visibility: hidden;
+        }
+    }
+
     #header-logo {
         width: 100%;
         height: 100%;
@@ -91,6 +109,10 @@
         background-size: contain;
         background-repeat: no-repeat;
     }
+
+    .status-label {
+        padding: 0 10px;
+    }
 }
 
 #tlb-box-users {

apps/documenteditor/main/app/controller/LeftMenu.js

@@ -62,7 +62,11 @@ define([
                     'hide': _.bind(this.onHideChat, this)
                 },
                 'Common.Views.Header': {
-                    'click:users': _.bind(this.clickStatusbarUsers, this)
+                    'click:users': _.bind(this.clickStatusbarUsers, this),
+                    'history:show': function () {
+                        if ( !this.leftMenu.panelHistory.isVisible() )
+                            this.clickMenuFileItem('header', 'history');
+                    }.bind(this)
                 },
                 'LeftMenu': {
                     'comments:show': _.bind(this.commentsShowHide, this, 'show'),

apps/documenteditor/main/app/controller/Main.js

@@ -569,18 +569,23 @@ define([
                 if (action) {
                     this.setLongActionView(action)
                 } else {
-                    if (this._state.fastCoauth && this._state.usersCount>1 && id==Asc.c_oAscAsyncAction['Save']) {
+                    if ( id==Asc.c_oAscAsyncAction.Save ) {
                         var me = this;
-                        if (me._state.timerSave===undefined)
+                        if ( me._state.fastCoauth && me._state.usersCount > 1 ) {
-                            me._state.timerSave = setInterval(function(){
+                            if ( !me._state.timerSave &&
-                                if ((new Date()) - me._state.isSaving>500) {
+                                        Date.now() - me._state.isSaving < 500 )
-                                    clearInterval(me._state.timerSave);
+                            {
-                                    me.getApplication().getController('Statusbar').setStatusCaption('');
+                                me._state.timerSave = setTimeout(function () {
-                                    me._state.timerSave = undefined;
+                                    me.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('end');
-                                }
+                                    delete me._state.timerSave;
-                            }, 500);
+                                }, 500);
-                    } else
+                            }
+                        } else {
+                            me.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('end');
+                        }
+                    } else {
                         this.getApplication().getController('Statusbar').setStatusCaption('');
+                    }
                 }
 
                 action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
@@ -607,9 +612,9 @@ define([
                         break;
 
                     case Asc.c_oAscAsyncAction['Save']:
-                        this._state.isSaving = new Date();
+                        this._state.isSaving = Date.now();
-                        title   = this.saveTitleText;
+                        // title   = this.saveTitleText;
-                        text    = this.saveTextText;
+                        // text    = this.saveTextText;
                         break;
 
                     case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
@@ -691,8 +696,10 @@ define([
 
                     if (!this.isShowOpenDialog)
                         this.loadMask.show();
-                }
+                } else
-                else {
+                if ( action.id == Asc.c_oAscAsyncAction.Save ) {
+                    this.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('begin');
+                } else {
                     this.getApplication().getController('Statusbar').setStatusCaption(text);
                 }
             },
@@ -763,7 +770,7 @@ define([
                 if (this._isDocReady)
                     return;
 
-                Common.NotificationCenter.trigger('app:ready', [this.appOptions]);
+                Common.NotificationCenter.trigger('app:ready', this.appOptions);
 
                 var me = this,
                     value;
@@ -1419,6 +1426,9 @@ define([
 
                 this.updateWindowTitle();
 
+                this.api.isDocumentModified() &&
+                    this.getApplication().getController('Viewport').getView('Common.Views.Header').setSaveStatus('changed');
+
                 var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar');
 
                 if (toolbarView) {

apps/documenteditor/main/locale/en.json

@@ -139,7 +139,12 @@
   "Common.Views.ExternalMergeEditor.textClose": "Close",
   "Common.Views.ExternalMergeEditor.textSave": "Save & Exit",
   "Common.Views.ExternalMergeEditor.textTitle": "Mail Merge Recipients",
-  "Common.Views.Header.openNewTabText": "Open in New Tab",
+  "Common.Views.Header.itemBackNewTab": "Open in New Tab",
+  "Common.Views.Header.itemBackCurrTab": "Open in Current Tab",
+  "Common.Views.Header.textSaveBegin": "Saving...",
+  "Common.Views.Header.textSaveEnd": "All changes saved",
+  "Common.Views.Header.textSaveChanged": "Modified",
+  "Common.Views.Header.textSaveExpander": "All changes saved",
   "Common.Views.Header.textBack": "Go to Documents",
   "Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
   "Common.Views.Header.txtRename": "Rename",