[DE] Added print, save, undo, redo buttons and user name to header panel.

apps/api/documents/api.js

@@ -358,7 +358,7 @@
             if (!!result && result.length) {
                 if (result[1] == 'desktop') {
                     _config.editorConfig.targetApp = result[1];
-                    _config.editorConfig.canBackToFolder = false;
+                    // _config.editorConfig.canBackToFolder = false;
                     _config.editorConfig.canUseHistory = false;
                     if (!_config.editorConfig.customization) _config.editorConfig.customization = {};
                     _config.editorConfig.customization.about = false;

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

@@ -260,6 +260,34 @@ define([
                 }
             }
 
+            if ( me.btnPrint ) {
+                me.btnPrint.updateHint(me.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
+                me.btnPrint.on('click', function (e) {
+                    me.fireEvent('print', me);
+                });
+            }
+
+            if ( me.btnSave ) {
+                me.btnSave.updateHint(me.tipSave + Common.Utils.String.platformKey('Ctrl+S'));
+                me.btnSave.on('click', function (e) {
+                    me.fireEvent('save', me);
+                });
+            }
+
+            if ( me.btnUndo ) {
+                me.btnUndo.updateHint(me.tipUndo + Common.Utils.String.platformKey('Ctrl+Z'));
+                me.btnUndo.on('click', function (e) {
+                    me.fireEvent('undo', me);
+                });
+            }
+
+            if ( me.btnRedo ) {
+                me.btnRedo.updateHint(me.tipRedo + Common.Utils.String.platformKey('Ctrl+Y'));
+                me.btnRedo.on('click', function (e) {
+                    me.fireEvent('redo', me);
+                });
+            }
+
             if ( !mode.isEdit ) {
                 if ( me.btnDownload ) {
                     me.btnDownload.updateHint(me.tipDownload);
@@ -268,13 +296,6 @@ define([
                     });
                 }
 
-                if ( me.btnPrint ) {
-                    me.btnPrint.updateHint(me.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
-                    me.btnPrint.on('click', function (e) {
-                        me.fireEvent('print', me);
-                    });
-                }
-
                 if ( me.btnEdit ) {
                     me.btnEdit.updateHint(me.tipGoEdit);
                     me.btnEdit.on('click', function (e) {
@@ -325,6 +346,7 @@ define([
                 branding: {},
                 headerCaption: 'Default Caption',
                 documentCaption: '',
+                userName: '',
                 canBack: false
             },
 
@@ -344,6 +366,7 @@ define([
 
                 this.headerCaption = this.options.headerCaption;
                 this.documentCaption = this.options.documentCaption;
+                this.userName = this.options.userName;
                 this.canBack = this.options.canBack;
                 this.branding = this.options.customization;
                 this.isModified = false;
@@ -411,7 +434,7 @@ define([
 
                     if ( config && config.isDesktopApp ) {
                         $html.addClass('desktop');
-                        $html.find('#slot-btn-back').hide();
+                        // $html.find('#slot-btn-back').hide();
                         this.labelDocName.hide();
 
                         //TODO: for new design representation only
@@ -419,18 +442,49 @@ define([
                         this.labelDocName.text = function (str) {this.val(str);};
                         this.labelDocName.text( this.documentCaption );
 
+                        this.labelUserName = $('#box-document-title > #title-user-name');
+                        this.labelUserName.text( this.userName );
+
+                        if ( config.canPrint ) {
+                            this.btnPrint = new Common.UI.Button({
+                                cls: 'btn-header',
+                                iconCls: 'svgicon svg-btn-print'
+                            });
+
+                            this.btnPrint.render($('#box-document-title #slot-btn-dt-print'));
+                        }
+
+                        this.btnSave = new Common.UI.Button({
+                            cls: 'btn-header',
+                            iconCls: 'svgicon svg-btn-save'
+                        });
+                        this.btnSave.render($('#box-document-title #slot-btn-dt-save'));
+
+                        this.btnUndo = new Common.UI.Button({
+                            cls: 'btn-header',
+                            iconCls: 'svgicon svg-btn-undo'
+                        });
+                        this.btnUndo.render($('#box-document-title #slot-btn-dt-undo'));
+
+                        this.btnRedo = new Common.UI.Button({
+                            cls: 'btn-header',
+                            iconCls: 'svgicon svg-btn-redo'
+                        });
+                        this.btnRedo.render($('#box-document-title #slot-btn-dt-redo'));
+
                         $('.toolbar-fullview-panel').addClass('new-doctitle-offset');
                         /***********/
 
                         if ( config.isOffline )
                             $saveStatus = false;
-                    } else {
+                    }
+                    // else {
                         if ( this.canBack === true ) {
                             this.btnGoBack.render($html.find('#slot-btn-back'));
                         } else {
                             $html.find('#slot-btn-back').hide();
                         }
-                    }
+                    // }
 
                     if ( !config.isEdit ) {
                         if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline  ) {
@@ -576,6 +630,16 @@ define([
                 }
             },
 
+            setUserName: function (value) {
+                this.userName = value.fullname;
+                return value;
+            },
+
+            getButton: function(type) {
+                if (type == 'save')
+                    return this.btnSave;
+            },
+
             textBack: 'Go to Documents',
             txtRename: 'Rename',
             textSaveBegin: 'Saving...',
@@ -588,7 +652,10 @@ define([
             tipViewUsers: 'View users and manage document access rights',
             tipDownload: 'Download file',
             tipPrint: 'Print file',
-            tipGoEdit: 'Edit current file'
+            tipGoEdit: 'Edit current file',
+            tipSave: 'Save',
+            tipUndo: 'Undo',
+            tipRedo: 'Redo'
         }
     }(), Common.Views.Header || {}))
 });

apps/common/main/resources/img/header/buttons.svg

@@ -32,4 +32,19 @@
 	<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
 		c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
     </symbol>
+    <symbol id="svg-btn-save" viewBox="0 0 20 20">
+        <polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>
+	<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
+		c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
+    </symbol>
+    <symbol id="svg-btn-undo" viewBox="0 0 20 20">
+        <polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>
+	<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
+		c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
+    </symbol>
+    <symbol id="svg-btn-redo" viewBox="0 0 20 20">
+        <polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>
+	<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
+		c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
+    </symbol>
 </svg>

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

@@ -243,16 +243,62 @@
 
 #box-document-title {
     background-color: @tabs-bg-color;
+    display: flex;
+
+    .btn-slot {
+        display: inline-block;
+    }
+
+    .btn-header {
+        height: 26px;
+        padding: 3px 6px;
+
+        &[disabled],
+        &.disabled {
+            opacity: 0.65;
+        }
+
+        &:hover {
+            &:not(.disabled) {
+                background-color: rgba(255,255,255,0.2);
+            }
+        }
+
+        &:active {
+            &:not(.disabled) {
+                background-color: rgba(0,0,0,0.2);
+            }
+        }
+    }
+
+    svg.icon {
+        fill: #fff;
+    }
 
     #title-doc-name {
+        flex-grow: 1;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         text-align: center;
         font-size: 12px;
-        width: 100%;
         height: 100%;
 
+        color: #d3d9e3;
+        background-color: transparent;
+        border: 0 none;
+        cursor: default;
+   }
+    #title-user-name {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: right;
+        font-size: 12px;
+        width: 150px;
+        height: 100%;
+        padding: 4px 12px 4px 0;
+
         color: #d3d9e3;
         background-color: transparent;
         border: 0 none;

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

@@ -290,6 +290,7 @@ define([
 
                 appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header');
                 appHeader.setCanBack(this.appOptions.canBackToFolder === true);
+                appHeader.setUserName(this.appOptions.user);
 
                 if (this.editorConfig.lang)
                     this.api.asc_setLocale(this.editorConfig.lang);

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

@@ -119,6 +119,11 @@ define([
                         var _main = this.getApplication().getController('Main');
                         _main.onPrint();
                     },
+                    'save': function (opts) {
+                        this.api.asc_Save();
+                    },
+                    'undo': this.onUndo,
+                    'redo': this.onRedo,
                     'downloadas': function (opts) {
                         var _main = this.getApplication().getController('Main');
                         var _file_type = _main.document.fileType,

apps/documenteditor/main/app/template/Viewport.template

@@ -1,10 +1,14 @@
 <div class="layout-region">
     <div id="viewport-vbox-layout" class="layout-ct vbox">
         <section id="box-document-title" class="layout-item">
+            <div class="hedset">
+                <div class="btn-slot" id="slot-btn-dt-save"></div>
+                <div class="btn-slot" id="slot-btn-dt-print"></div>
+                <div class="btn-slot" id="slot-btn-dt-undo"></div>
+                <div class="btn-slot" id="slot-btn-dt-redo"></div>
+            </div>
             <input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
-        </section>
+            <label id="title-user-name"></label>
-        <section class="layout-ct">
-            <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
         </section>
         <div id="toolbar" class="layout-item"></div>
         <div class="layout-item middle">

apps/documenteditor/main/app/view/Toolbar.js

@@ -2037,6 +2037,13 @@ define([
                     this.toolbarControls.push(btnsave);
                     btnsave.setDisabled(this.btnsSave[0].isDisabled());
                 }
+
+                btnsave = DE.getController('Viewport').getView('Common.Views.Header').getButton('save');
+                if (btnsave && this.btnsSave) {
+                    this.btnsSave.push(btnsave);
+                    this.toolbarControls.push(btnsave);
+                    btnsave.setDisabled(this.btnsSave[0].isDisabled());
+                }
             },
 
             onToolbarAfterRender: function(toolbar) {