Merge branch 'feature/desktop-new' into develop

apps/api/documents/api.js

@@ -362,10 +362,11 @@
             if (!!result && result.length) {
                 if (result[1] == 'desktop') {
                     _config.editorConfig.targetApp = result[1];
-                    _config.editorConfig.canBackToFolder = false;
-                    _config.editorConfig.canUseHistory = false;
+                    // _config.editorConfig.canBackToFolder = false;
                     if (!_config.editorConfig.customization) _config.editorConfig.customization = {};
                     _config.editorConfig.customization.about = false;
+
+                    if ( window.AscDesktopEditor ) window.AscDesktopEditor.execCommand('webapps:events', 'loading');
                 }
             }
         })();

apps/api/documents/index.html.desktop

@@ -55,7 +55,10 @@
                 height: '100%',
                 documentType: urlParams['doctype'] || 'text',
                 document: doc,
-                editorConfig: cfg
+                editorConfig: cfg,
+                events: {
+                    onInternalMessage: onInternalMessage,
+                }
             });
 
 
@@ -91,6 +94,9 @@
 
             function getEditorConfig(urlParams) {
                 return {
+                    customization   : {
+                        goback: { url: "onlyoffice.com" }
+                    },
                     mode            : urlParams["mode"] || 'edit',
                     lang            : urlParams["lang"] || 'en',
                     user: {
@@ -144,6 +150,21 @@
                 }
             };
 
+            function onInternalMessage(event) {
+                let info = event.data;
+                if ( info.type == 'goback' ) {
+                    if ( window.AscDesktopEditor ) {
+                        window.AscDesktopEditor.execCommand('go:folder', info.data.status);
+                    }
+                }
+            };
+
+            function onDocumentReady() {
+                if ( window.AscDesktopEditor ) {
+                    window.AscDesktopEditor.execCommand('doc:onready', '');
+                }
+            }
+
             if (isMobile()){
                 window.addEventListener('load', fixSize);
                 window.addEventListener('resize', fixSize);

apps/common/main/lib/component/Button.js

@@ -119,6 +119,65 @@ define([
 ], function () {
     'use strict';
 
+    window.createButtonSet = function() {
+        function ButtonsArray(args) {};
+        ButtonsArray.prototype = new Array;
+        ButtonsArray.prototype.constructor = ButtonsArray;
+
+        var _disabled = false;
+
+        ButtonsArray.prototype.add = function(button) {
+            button.setDisabled(_disabled);
+            this.push(button);
+        };
+
+        ButtonsArray.prototype.setDisabled = function(disable) {
+            if ( _disabled != disable ) {
+                _disabled = disable;
+
+                this.forEach( function(button) {
+                    button.setDisabled(disable);
+                });
+            }
+        };
+
+        ButtonsArray.prototype.toggle = function(state, suppress) {
+            this.forEach(function(button) {
+                button.toggle(state, suppress);
+            });
+        };
+
+        ButtonsArray.prototype.pressed = function() {
+            return this.some(function(button) {
+                return button.pressed;
+            });
+        };
+
+        ButtonsArray.prototype.contains = function(id) {
+            return this.some(function(button) {
+                return button.id == id;
+            });
+        };
+
+        ButtonsArray.prototype.concat = function () {
+            var args = Array.prototype.slice.call(arguments);
+            var result = Array.prototype.slice.call(this);
+
+            args.forEach(function(sub){
+                Array.prototype.push.apply(result, sub);
+            });
+
+            return result;
+        }
+
+        var _out_array = Object.create(ButtonsArray.prototype);
+        for ( var i in arguments ) {
+            _out_array.add(arguments[i]);
+        }
+
+        return _out_array;
+    };
+
     var templateBtnIcon =
             '<% if ( iconImg ) { %>' +
                 '<img src="<%= iconImg %>">' +
@@ -291,6 +350,7 @@ define([
                         me.menu.render(me.cmpEl);
 
                     parentEl.html(me.cmpEl);
+                    me.$icon = me.$el.find('.icon');
                 }
             }
 
@@ -536,6 +596,13 @@ define([
                         }
                     }
                 }
+
+                if ( !!me.options.signals ) {
+                    var opts = me.options.signals;
+                    if ( !(opts.indexOf('disabled') < 0) ) {
+                        me.trigger('disabled', me, disabled);
+                    }
+                }
             }
 
             this.disabled = disabled;

apps/common/main/lib/component/DataView.js

@@ -140,9 +140,10 @@ define([
             el.html(this.template(this.model.toJSON()));
             el.addClass('item');
             el.toggleClass('selected', this.model.get('selected') && this.model.get('allowSelected'));
-            el.off('click').on('click', _.bind(this.onClick, this));
-            el.off('dblclick').on('dblclick', _.bind(this.onDblClick, this));
-            el.off('contextmenu').on('contextmenu', _.bind(this.onContextMenu, this));
+            el.off('click dblclick contextmenu');
+            el.on({ 'click': _.bind(this.onClick, this),
+                'dblclick': _.bind(this.onDblClick, this),
+                'contextmenu': _.bind(this.onContextMenu, this) });
             el.toggleClass('disabled', !!this.model.get('disabled'));
 
             if (!_.isUndefined(this.model.get('cls')))

apps/common/main/lib/component/Layout.js

@@ -187,6 +187,13 @@ define([
             return parseInt(el.css('width'));
         },
 
+        getItem: function (alias) {
+            for (var p in this.panels) {
+                var panel = this.panels[p];
+                if ( panel.alias == alias ) return panel;
+            }
+        },
+
         onSelectStart: function(e) {
             if (e.preventDefault) e.preventDefault();
             return false;

apps/common/main/lib/component/Mixtbar.js

@@ -257,7 +257,7 @@ define([
                     return config.tabs[index].action;
                 }
 
-                var _tabTemplate = _.template('<li class="ribtab" style="display: none;"><div class="tab-bg" /><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>');
+                var _tabTemplate = _.template('<li class="ribtab" style="display: none;"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>');
 
                 config.tabs[after + 1] = tab;
                 var _after_action = _get_tab_action(after);

apps/common/main/lib/controller/Desktop.js

@@ -0,0 +1,73 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2018
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ * Controller wraps up interaction with desktop app
+ *
+ * Created by Maxim.Kadushkin on 2/16/2018.
+ */
+
+define([
+    'core'
+], function () {
+    'use strict';
+
+    var Desktop = function () {
+        var config = {};
+        var app = window.AscDesktopEditor;
+
+        return {
+            init: function (opts) {
+                _.extend(config, opts);
+
+                if ( config.isDesktopApp ) {
+                    Common.NotificationCenter.on('app:ready', function (config) {
+                        !!app && app.execCommand('doc:onready', '');
+                    });
+                }
+            },
+            process: function (opts) {
+                if ( opts == 'goback' ) {
+                    if ( config.isDesktopApp && !!app ) {
+                        app.execCommand('go:folder',
+                            config.isOffline ? 'offline' : config.customization.goback.url);
+                        return true;
+                    }
+
+                    return false;
+                }
+            }
+        };
+    };
+
+    Common.Controllers.Desktop = new Desktop();
+});

apps/common/main/lib/util/utils.js

@@ -758,14 +758,22 @@ Common.Utils.InternalSettings = new(function() {
     var settings = {};
 
     var _get = function(name) {
-        return settings[name];
-    },
-    _set = function(name, value) {
-        settings[name] = value;
-    };
+            return settings[name];
+        },
+        _set = function(name, value) {
+            settings[name] = value;
+        };
 
     return {
         get: _get,
         set: _set
     }
-});
+});
+
+Common.Utils.InternalSettings.set('toolbar-height-tabs', 32);
+Common.Utils.InternalSettings.set('toolbar-height-tabs-top-title', 28);
+Common.Utils.InternalSettings.set('toolbar-height-controls', 67);
+Common.Utils.InternalSettings.set('document-title-height', 28);
+
+Common.Utils.InternalSettings.set('toolbar-height-compact', Common.Utils.InternalSettings.get('toolbar-height-tabs'));
+Common.Utils.InternalSettings.set('toolbar-height-normal', Common.Utils.InternalSettings.get('toolbar-height-tabs') + Common.Utils.InternalSettings.get('toolbar-height-controls'));

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

@@ -71,7 +71,7 @@ define([
 
         var templateRightBox = '<section>' +
                             '<section id="box-doc-name">' +
-                                '<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false"></input>' +
+                                '<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;">' +
                             '</section>' +
                             '<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' +
                             '<div class="hedset">' +
@@ -95,6 +95,7 @@ define([
                             '</div>' +
                             '<div class="hedset">' +
                                 '<div class="btn-slot" id="slot-btn-back"></div>' +
+                                '<div class="btn-slot" id="slot-btn-options"></div>' +
                             '</div>' +
                         '</section>';
 
@@ -102,6 +103,18 @@ define([
                                 '<div id="header-logo"><i /></div>' +
                             '</section>';
 
+        var templateTitleBox = '<section id="box-document-title">' +
+                                '<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>' +
+                                '<div class="lr-separator"></div>' +
+                                '<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;">' +
+                                '<label id="title-user-name" style="pointer-events: none;"></label>' +
+                            '</section>';
+
         function onAddUser(model, collection, opts) {
             if ( $userList ) {
                 var $ul = $userList.find('ul');
@@ -204,6 +217,8 @@ define([
             }
         }
 
+        function onAppShowed(config) {}
+
         function onAppReady(mode) {
             appConfig = mode;
 
@@ -261,6 +276,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);
@@ -269,13 +312,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) {
@@ -283,6 +319,9 @@ define([
                     });
                 }
             }
+
+            if ( me.btnOptions )
+                me.btnOptions.updateHint(me.tipViewSettings);
         }
 
         function onDocNameKeyDown(e) {
@@ -322,7 +361,6 @@ define([
         return {
             options: {
                 branding: {},
-                headerCaption: 'Default Caption',
                 documentCaption: '',
                 canBack: false
             },
@@ -339,11 +377,9 @@ define([
 
             initialize: function (options) {
                 var me = this;
-                this.options = this.options ? _({}).extend(this.options, options) : options;
+                this.options = this.options ? _.extend(this.options, options) : options;
 
-                this.headerCaption = this.options.headerCaption;
                 this.documentCaption = this.options.documentCaption;
-                this.canBack = this.options.canBack;
                 this.branding = this.options.customization;
                 this.isModified = false;
 
@@ -361,9 +397,20 @@ define([
                     reset   : onResetUsers
                 });
 
+                me.btnOptions = new Common.UI.Button({
+                    cls: 'btn-header no-caret',
+                    iconCls: 'svgicon svg-btn-options',
+                    menu: true
+                });
+
+                me.mnuZoom = {options: {value: 100}};
+
                 Common.NotificationCenter.on('app:ready', function(mode) {
                     Common.Utils.asyncCall(onAppReady, me, mode);
                 });
+                Common.NotificationCenter.on('app:face', function(mode) {
+                    Common.Utils.asyncCall(onAppShowed, me, mode);
+                });
             },
 
             render: function (el, role) {
@@ -373,6 +420,16 @@ define([
             },
 
             getPanel: function (role, config) {
+                var me = this;
+
+                function createTitleButton(iconid, slot, disabled) {
+                    return (new Common.UI.Button({
+                        cls: 'btn-header',
+                        iconCls: 'svgicon ' + iconid,
+                        disabled: disabled === true
+                    })).render(slot);
+                }
+
                 if ( role == 'left' && (!config || !config.isDesktopApp)) {
                     $html = $(templateLeftBox);
                     this.logo = $html.find('#header-logo');
@@ -391,64 +448,43 @@ define([
                         textSaveEnd: this.textSaveEnd
                     }));
 
-                    if ( this.labelDocName ) this.labelDocName.off();
-                    this.labelDocName = $html.find('#rib-doc-name');
-                    // this.labelDocName.attr('maxlength', 50);
-                    this.labelDocName.text = function (text) {
-                        this.val(text).attr('size', text.length);
-                    }
+                    if ( !me.labelDocName ) {
+                        me.labelDocName = $html.find('#rib-doc-name');
+                        // this.labelDocName.attr('maxlength', 50);
+                        me.labelDocName.text = function (text) {
+                            this.val(text).attr('size', text.length);
+                        }
 
-                    if ( this.documentCaption ) {
-                        this.labelDocName.text( this.documentCaption );
+                        if ( me.documentCaption ) {
+                            me.labelDocName.text(me.documentCaption);
+                        }
                     }
 
                     if ( !_.isUndefined(this.options.canRename) ) {
                         this.setCanRename(this.options.canRename);
                     }
 
-                    $saveStatus = $html.find('#rib-save-status');
-                    $saveStatus.hide();
+                    // $saveStatus = $html.find('#rib-save-status');
+                    $html.find('#rib-save-status').hide();
+                    // if ( config.isOffline ) $saveStatus = false;
 
-                    if ( config && config.isDesktopApp ) {
-                        $html.addClass('desktop');
-                        $html.find('#slot-btn-back').hide();
-                        this.labelDocName.hide();
-
-                        if ( config.isOffline )
-                            $saveStatus = false;
+                    if ( this.options.canBack === true ) {
+                        me.btnGoBack.render($html.find('#slot-btn-back'));
                     } else {
-                        if ( this.canBack === true ) {
-                            this.btnGoBack.render($html.find('#slot-btn-back'));
-                        } else {
-                            $html.find('#slot-btn-back').hide();
-                        }
+                        $html.find('#slot-btn-back').hide();
                     }
 
                     if ( !config.isEdit ) {
-                        if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline  ) {
-                            this.btnDownload = new Common.UI.Button({
-                                cls: 'btn-header',
-                                iconCls: 'svgicon svg-btn-download'
-                            });
+                        if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline  )
+                            this.btnDownload = createTitleButton('svg-btn-download', $html.find('#slot-hbtn-download'));
 
-                            this.btnDownload.render($html.find('#slot-hbtn-download'));
-                        }
+                        if ( config.canPrint )
+                            this.btnPrint = createTitleButton('svg-btn-print', $html.find('#slot-hbtn-print'));
 
-                        if ( config.canPrint ) {
-                            this.btnPrint = new Common.UI.Button({
-                                cls: 'btn-header',
-                                iconCls: 'svgicon svg-btn-print'
-                            });
-
-                            this.btnPrint.render($html.find('#slot-hbtn-print'));
-                        }
-
-                        if ( config.canEdit && config.canRequestEditRights ) {
-                            (this.btnEdit = new Common.UI.Button({
-                                cls: 'btn-header',
-                                iconCls: 'svgicon svg-btn-edit'
-                            })).render($html.find('#slot-hbtn-edit'));
-                        }
+                        if ( config.canEdit && config.canRequestEditRights )
+                            this.btnEdit = createTitleButton('svg-btn-edit', $html.find('#slot-hbtn-edit'));
+                    } else {
+                        me.btnOptions.render($html.find('#slot-btn-options'));
                     }
 
                     $userList = $html.find('.cousers-list');
@@ -457,6 +493,40 @@ define([
 
                     $panelUsers.hide();
 
+                    return $html;
+                } else
+                if ( role == 'title' ) {
+                    var $html = $(_.template(templateTitleBox)());
+
+                    !!me.labelDocName && me.labelDocName.hide().off();                  // hide document title if it was created in right box
+                    me.labelDocName = $html.find('> #title-doc-name');
+                    me.labelDocName.text = function (str) {this.val(str);};             // redefine text function to lock temporaly rename docuemnt option
+                    me.labelDocName.text( me.documentCaption );
+
+                    me.labelUserName = $('> #title-user-name', $html);
+                    me.setUserName(me.options.userName);
+
+                    if ( config.canPrint && config.isEdit ) {
+                        me.btnPrint = createTitleButton('svg-btn-print', $('#slot-btn-dt-print', $html));
+                    }
+
+                    me.btnSave = createTitleButton('svg-btn-save', $('#slot-btn-dt-save', $html), true);
+                    me.btnUndo = createTitleButton('svg-btn-undo', $('#slot-btn-dt-undo', $html), true);
+                    me.btnRedo = createTitleButton('svg-btn-redo', $('#slot-btn-dt-redo', $html), true);
+
+                    if ( me.btnSave.$icon.is('svg') ) {
+                        me.btnSave.$icon.addClass('icon-save');
+                        var _create_use = function (extid, intid) {
+                            var _use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+                            _use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', extid);
+                            _use.setAttribute('id', intid);
+
+                            return $(_use);
+                        };
+
+                        _create_use('#svg-btn-save-coauth', 'coauth').appendTo(me.btnSave.$icon);
+                        _create_use('#svg-btn-save-sync', 'sync').appendTo(me.btnSave.$icon);
+                    }
                     return $html;
                 }
             },
@@ -483,16 +553,6 @@ define([
                 }
             },
 
-            setHeaderCaption: function (value) {
-                this.headerCaption = value;
-
-                return value;
-            },
-
-            getHeaderCaption: function () {
-                return this.headerCaption;
-            },
-
             setDocumentCaption: function(value) {
                 !value && (value = '');
 
@@ -522,15 +582,16 @@ define([
             },
 
             setCanBack: function (value, text) {
-                this.canBack = value;
-
+                this.options.canBack = value;
                 this.btnGoBack[value ? 'show' : 'hide']();
                 if (value)
                     this.btnGoBack.updateHint((text && typeof text == 'string') ? text : this.textBack);
+
+                return this;
             },
 
             getCanBack: function () {
-                return this.canBack;
+                return this.options.canBack;
             },
 
             setCanRename: function (rename) {
@@ -581,6 +642,61 @@ define([
                 }
             },
 
+            setUserName: function(name) {
+                if ( !!this.labelUserName ) {
+                    if ( !!name ) {
+                        this.labelUserName.text(name).show();
+                    } else this.labelUserName.hide();
+                } else {
+                    this.options.userName = name;
+                }
+
+                return this;
+            },
+
+            getButton: function(type) {
+                if (type == 'save')
+                    return this.btnSave;
+            },
+
+            lockHeaderBtns: function (alias, lock) {
+                var me = this;
+                if ( alias == 'users' ) {
+                    if ( lock )
+                        $btnUsers.addClass('disabled').attr('disabled', 'disabled'); else
+                        $btnUsers.removeClass('disabled').attr('disabled', '');
+                } else {
+                    function _lockButton(btn) {
+                        if ( btn ) {
+                            if ( lock ) {
+                                btn.keepState = {
+                                    disabled: btn.isDisabled()
+                                };
+                                btn.setDisabled( true );
+                            } else {
+                                btn.setDisabled( btn.keepState.disabled );
+                                delete btn.keepState;
+                            }
+                        }
+                    }
+
+                    switch ( alias ) {
+                    case 'undo': _lockButton(me.btnUndo); break;
+                    case 'redo': _lockButton(me.btnRedo); break;
+                    case 'opts': _lockButton(me.btnOptions); break;
+                    default: break;
+                    }
+                }
+            },
+
+            fakeMenuItem: function() {
+                return {
+                    conf: {checked: false},
+                    setChecked: function (val) { this.conf.checked = val; },
+                    isChecked: function () { return this.conf.checked; }
+                };
+            },
+
             textBack: 'Go to Documents',
             txtRename: 'Rename',
             textSaveBegin: 'Saving...',
@@ -593,7 +709,16 @@ 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',
+            textCompactView: 'Hide Toolbar',
+            textHideStatusBar: 'Hide Status Bar',
+            textHideLines: 'Hide Rulers',
+            textZoom: 'Zoom',
+            textAdvSettings: 'Advanced Settings',
+            tipViewSettings: 'View Settings'
         }
     }(), Common.Views.Header || {}))
 });

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

@@ -11,10 +11,10 @@
         <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
     </symbol>
     <symbol id="svg-btn-users" viewBox="0 0 20 20">
-   		<path fill="#FFFFFF" d="M7,3.999c1.103,0,2,0.897,2,2C9,7.103,8.103,8,7,8C5.897,8,5,7.103,5,5.999C5,4.896,5.897,3.999,7,3.999 M7,2.999c-1.657,0-3,1.344-3,3S5.343,9,7,9c1.657,0,3-1.345,3-3.001S8.657,2.999,7,2.999L7,2.999z"/>
-		<path fill="#FFFFFF" d="M7,11.666c4.185,0,4.909,2.268,5,2.642V16H2v-1.688C2.1,13.905,2.841,11.666,7,11.666 M7,10.666 c-5.477,0-6,3.545-6,3.545V17h12v-2.789C13,14.211,12.477,10.666,7,10.666L7,10.666z"/>
-		<circle fill="#FFFFFF" cx="14.5" cy="8.001" r="2.5"/>
-		<path fill="#FFFFFF" d="M14.5,11.863c-0.566,0-1.056,0.059-1.49,0.152c0.599,0.726,0.895,1.481,0.979,2.049L14,14.138V17h5v-2.263 C19,14.737,18.607,11.863,14.5,11.863z"/>
+		<path d="M7,3.999c1.103,0,2,0.897,2,2C9,7.103,8.103,8,7,8C5.897,8,5,7.103,5,5.999C5,4.896,5.897,3.999,7,3.999 M7,2.999c-1.657,0-3,1.344-3,3S5.343,9,7,9c1.657,0,3-1.345,3-3.001S8.657,2.999,7,2.999L7,2.999z"/>
+		<path d="M7,11.666c4.185,0,4.909,2.268,5,2.642V16H2v-1.688C2.1,13.905,2.841,11.666,7,11.666 M7,10.666 c-5.477,0-6,3.545-6,3.545V17h12v-2.789C13,14.211,12.477,10.666,7,10.666L7,10.666z"/>
+		<circle cx="14.5" cy="8.001" r="2.5"/>
+		<path d="M14.5,11.863c-0.566,0-1.056,0.059-1.49,0.152c0.599,0.726,0.895,1.481,0.979,2.049L14,14.138V17h5v-2.263 C19,14.737,18.607,11.863,14.5,11.863z"/>
     </symbol>
     <symbol id="svg-btn-download" viewBox="0 0 20 20">
         <rect x="4" y="16" width="12" height="1"/>
@@ -32,4 +32,39 @@
 	<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">
+        <rect x="7" y="13" width="6" height="1"/>
+	    <rect x="7" y="11" width="6" height="1"/>
+	    <path d="M13,4H5C4.447,4,4,4.447,4,5v10c0,0.553,0.447,1,1,1h10c0.553,0,1-0.447,1-1V7L13,4z M11,5v2h-1V5H11z
+		 M15,15H5V5h2v3h5V5h0.5L15,7.5V15z"/>
+    </symbol>
+    <symbol id="svg-btn-save-coauth" viewBox="0 0 20 20">
+        <path d="M14,9c-2.209,0-4,1.791-4,4c0,0.348,0.059,0.679,0.142,1h1.043C11.072,13.686,11,13.353,11,13
+            c0-1.654,1.346-3,3-3s3,1.346,3,3s-1.346,3-3,3v-1l-2,1.5l2,1.5v-1c2.209,0,4-1.791,4-4S16.209,9,14,9z"/>
+        <rect x="6" y="13" width="3" height="1"/>
+        <rect x="6" y="11" width="3" height="1"/>
+        <path d="M9,15H4V5h2v3h3h2V5h0.5L14,7.5V8h1V7l-3-3H4C3.447,4,3,4.447,3,5v10c0,0.553,0.447,1,1,1h5V15z M9,5h1v2H9 V5z"/>
+    </symbol>
+    <symbol id="svg-btn-save-sync" viewBox="0 0 20 20">
+        <path fill="#FFD112" d="M18,16c0.553,0,1-0.447,1-1v-5c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v5c0,0.553,0.447,1,1,1h1
+                l1.5,2l1.5-2H18z"/>
+        <rect x="12" y="11" fill="#444444" width="5" height="1"/>
+        <rect x="12" y="13" fill="#444444" width="5" height="1"/>
+        <rect x="6" y="13" width="3" height="1"/>
+        <rect x="6" y="11" width="3" height="1"/>
+        <path d="M9,15H4V5h2v3h3h2V5h0.5L14,7.5V8h1V7l-3-3H4C3.447,4,3,4.447,3,5v10c0,0.553,0.447,1,1,1h5V15z M9,5h1v2H9 V5z"/>
+    </symbol>
+    <symbol id="svg-btn-undo" viewBox="0 0 20 20">
+        <path d="M11.355,7.625c-1.965,0-3.864,0.777-5.151,2.033L4,7.625V14h6.407l-2.091-2.219
+		c0.845-1.277,2.313-2.215,3.99-2.215c2.461,0,5.405,1.78,5.694,4.119C17.601,10.291,14.966,7.625,11.355,7.625z"/>
+    </symbol>
+    <symbol id="svg-btn-redo" viewBox="0 0 20 20">
+        <path d="M10.645,7.625c1.965,0,3.863,0.777,5.15,2.033L18,7.625V14h-6.406l2.09-2.219
+        c-0.845-1.277-2.313-2.215-3.989-2.215c-2.461,0-5.405,1.78-5.694,4.119C4.399,10.291,7.034,7.625,10.645,7.625z"/>
+    </symbol>
+    <symbol id="svg-btn-options" viewBox="0 0 20 20">
+        <rect x="4" y="6" width="12" height="1"/>
+        <rect x="4" y="9" width="12" height="1"/>
+        <rect x="4" y="12" width="12" height="1"/>
+    </symbol>
 </svg>

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

@@ -43,7 +43,6 @@
         line-height: 20px;
         height: 100%;
         display: flex;
-        align-items: center;
     }
 
     &.left {
@@ -53,11 +52,6 @@
     &.right {
         flex-grow: 1;
         min-width: 100px;
-
-        .desktop {
-            padding: 10px 0;
-            text-align: right;
-        }
     }
 
     .status-label {
@@ -68,6 +62,12 @@
         color: #fff;
     }
 
+    .dropdown-menu {
+        label {
+            color: @gray-deep;
+        }
+    }
+
     .btn-users,
     .btn-header {
         &:hover {
@@ -76,7 +76,7 @@
             }
         }
 
-        &:active {
+        &:active, &.active {
             &:not(.disabled) {
                 background-color: rgba(0,0,0,0.2);
             }
@@ -85,7 +85,7 @@
 
     #box-doc-name {
         flex-grow: 1;
-        text-align: center;
+        display: flex;
     }
 
     #rib-doc-name {
@@ -151,7 +151,6 @@
 }
 
 #tlb-box-users {
-    height: @height-tabs;
 }
 
 #tlb-change-rights {
@@ -159,9 +158,11 @@
 }
 
 .btn-users {
-    display: inline-flex;
+    display: flex;
+    align-items: center;
     cursor: pointer;
-    padding: 6px 12px;
+    padding: 0 12px;
+    height: 100%;
 
     .icon {
         display: inline-block;
@@ -173,6 +174,11 @@
         cursor: pointer;
         font-size: 14px;
     }
+
+    &.disabled {
+        opacity: 0.65;
+        pointer-events: none;
+    }
 }
 
 .cousers-menu {
@@ -185,6 +191,12 @@
     width: 285px;
     font-size: 12px;
 
+    z-index: 1042;
+
+    .top-title & {
+        top: @height-title + @height-tabs - 8px;
+    }
+
     > label {
         white-space: normal;
     }
@@ -235,16 +247,113 @@
 
 .hedset {
     font-size: 0;
+    display: flex;
+
+    .btn-group {
+        height: 100%;
+    }
+
 }
 
 .btn-header {
-    border: 0 none;
-    height: @height-tabs;
+    height: 100%;
     background-color: transparent;
-    padding: 6px 12px;
+    width: 40px;
 
     .icon {
         width: 20px;
         height: 20px;
     }
-}
+
+    svg.icon {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .btn&[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);
+        }
+    }
+
+    &.no-caret {
+        .inner-box-caret {
+            display: none;
+        }
+    }
+}
+
+#box-document-title {
+    background-color: @tabs-bg-color;
+    display: flex;
+    height: 100%;
+    color:#fff;
+    position: relative;
+
+    .btn-slot {
+        display: inline-block;
+    }
+
+    svg.icon {
+        fill: #fff;
+
+        &.icon-save {
+            &.btn-save-coauth, &.btn-synch {
+                use:first-child {
+                    display: none;
+                }
+            }
+
+            &:not(.btn-save-coauth) {
+                use#coauth {
+                    display: none;
+                }
+            }
+            &:not(.btn-synch) {
+                use#sync {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    #title-doc-name {
+        position: absolute;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: center;
+        font-size: 12px;
+        height: 100%;
+        width: 100%;
+        background-color: transparent;
+        border: 0 none;
+        cursor: default;
+   }
+    #title-user-name {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: right;
+        font-size: 11px;
+        max-width: 50%;
+        height: 100%;
+        padding: 0 12px;
+        line-height: @height-title;
+   }
+
+    .lr-separator {
+        flex-grow: 1;
+    }
+}

apps/common/main/resources/less/synchronize-tip.less

@@ -9,16 +9,19 @@
     }
 
     &.right {
-        margin: -32px 0 0 15px;
+        margin: 0 0 0 15px;
 
         .tip-arrow {
             left: -15px;
-            top: 20px;
-            width: 15px;
-            height: 30px;
+            top: 0;
+            width: 16px;
+            height: 15px;
+            .box-shadow(0 -5px 8px -5px rgba(0, 0, 0, 0.2));
+
             &:after {
-                top: 5px;
-                left: 8px;
+                top: -7px;
+                left: 6px;
+                width: 16px;
             }
         }
     }
@@ -42,13 +45,15 @@
         margin: 0 -32px 15px 0;
 
         .tip-arrow {
-            right: 15px;
+            right: 0;
             bottom: -15px;
-            width: 30px;
+            width: 15px;
             height: 15px;
+            .box-shadow(5px 0 8px -5px rgba(0, 0, 0, 0.2));
+
             &:after {
                 top: -8px;
-                left: 5px;
+                left: 8px;
             }
         }
     }
@@ -60,6 +65,14 @@
     background-color: #fcfed7;
     overflow: visible;
 
+    .right & {
+        border-top-left-radius: 0;
+    }
+
+    .top & {
+        border-bottom-right-radius: 0;
+    }
+
     .box-shadow(0 4px 15px -2px rgba(0, 0, 0, 0.5));
     font-size: 11px;
 }

apps/common/main/resources/less/toolbar.less

@@ -1,3 +1,4 @@
+@height-title: 28px;
 @height-tabs: 32px;
 @height-controls: 67px;
 
@@ -21,11 +22,11 @@
         }
 
         &:not(.expanded):not(.cover){
-          .ribtab.active {
-            > a {
-              font-weight: normal;
+            .ribtab.active {
+                > a {
+                    font-weight: normal;
+                }
             }
-          }
         }
     }
 
@@ -58,90 +59,73 @@
         overflow: hidden;
         display: flex;
 
-    > ul {
-      padding: 0;
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      list-style: none;
-      font-size: 0;
-    }
-
-    li {
-      display: inline-block;
-      height: 100%;
-      //background-color: #a6c995;
-
-        position: relative;
-        .tab-bg {
-            position: absolute;
-            height: 28px;
-            width: 100%;
-            top: 4px;
-            background-color: @tabs-bg-color;
+        > ul {
+            padding: 4px 0 0;
+            margin: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            list-style: none;
+            font-size: 0;
         }
 
-        &:hover {
-            .tab-bg {
+        li {
+            display: inline-flex;
+            align-items: center;
+            height: 100%;
+
+            &:hover {
                 background-color: rgba(255,255,255,0.2);
             }
-        }
 
-        &.active {
-            .tab-bg {
+            &.active {
                 background-color: @gray-light;
             }
+
+
+            > a {
+                display: inline-block;
+                padding: 0 12px;
+                text-decoration: none;
+                cursor: default;
+                font-size: 12px;
+                text-align: center;
+                color: #fff;
+            }
+
+            &.active {
+                > a {
+                    color: #444;
+                }
+            }
         }
 
-
-      > a {
-        display: inline-block;
-        line-height: @height-tabs;
-        height: 100%;
-        padding: 1px 12px;
-        text-decoration: none;
-        cursor: default;
-        font-size: 12px;
-        text-align: center;
-        color: #fff;
-
-          position: relative;
-      }
-
-      &.active {
-        > a {
-            color: #444;
+        &:not(.short) {
+            .scroll {
+                display: none;
+            }
+        }
+
+        .scroll {
+            line-height: @height-tabs;
+            min-width: 20px;
+            text-align: center;
+            z-index: 1;
+            cursor: pointer;
+            color: #fff;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            &.left{
+                box-shadow: 5px 0 20px 5px @tabs-bg-color
+            }
+            &.right{
+                box-shadow: -5px 0 20px 5px @tabs-bg-color
+            }
         }
-      }
     }
 
-    &:not(.short) {
-      .scroll {
-        display: none;
-      }
-    }
-
-    .scroll {
-      line-height: @height-tabs;
-      min-width: 20px;
-      text-align: center;
-      z-index: 1;
-      cursor: pointer;
-      color: #fff;
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      &.left{
-        box-shadow: 5px 0 20px 5px @tabs-bg-color
-      }
-      &.right{
-        box-shadow: -5px 0 20px 5px @tabs-bg-color
-      }
-    }
-  }
-
     .box-controls {
         //height: @height-controls;         // button has strange offset in IE when odd height
         padding: 10px 0;
@@ -229,11 +213,33 @@
             margin-top: 3px;
         }
     }
+
+    .top-title > & {
+        &:not(.folded) {
+            height: 28 + @height-controls;
+        }
+
+        &.folded {
+            height: 28px;
+
+            &.expanded {
+                height: 28 + @height-controls;
+            }
+        }
+
+        .tabs > ul {
+            padding-top: 0;
+        }
+
+        .box-tabs {
+            height: 28px;
+        }
+    }
+
 }
 
 .toolbar-fullview-panel {
     position: absolute;
-    top: @height-tabs;
     bottom: 0;
     width: 100%;
     z-index: 1041;

apps/documenteditor/main/app.js

@@ -203,6 +203,7 @@ require([
         ,'common/main/lib/controller/ExternalMergeEditor'
         ,'common/main/lib/controller/ReviewChanges'
         ,'common/main/lib/controller/Protection'
+        ,'common/main/lib/controller/Desktop'
     ], function() {
         app.start();
     });

apps/documenteditor/main/app/collection/ShapeGroups.js

@@ -46,6 +46,7 @@ define([
         var Common = {};
 
     Common.Collections = Common.Collections || {};
+    DE.Collections = DE.Collections || {};
 
     DE.Collections.ShapeGroups = Backbone.Collection.extend({
         model: DE.Models.ShapeGroup

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

@@ -62,6 +62,7 @@ define([
                 },
                 'Common.Views.Header': {
                     'click:users': _.bind(this.clickStatusbarUsers, this),
+                    'file:settings': _.bind(this.clickToolbarSettings,this),
                     'history:show': function () {
                         if ( !this.leftMenu.panelHistory.isVisible() )
                             this.clickMenuFileItem('header', 'history');
@@ -91,7 +92,8 @@ define([
                 'Toolbar': {
                     'file:settings': _.bind(this.clickToolbarSettings,this),
                     'file:open': this.clickToolbarTab.bind(this, 'file'),
-                    'file:close': this.clickToolbarTab.bind(this, 'other')
+                    'file:close': this.clickToolbarTab.bind(this, 'other'),
+                    'save:disabled': this.changeToolbarSaveState.bind(this)
                 },
                 'SearchDialog': {
                     'hide': _.bind(this.onSearchDlgHide, this),
@@ -392,6 +394,10 @@ define([
                 this.leftMenu.menuFile.hide();
         },
 
+        changeToolbarSaveState: function (state) {
+            this.leftMenu.menuFile.getButton('save').setDisabled(state);
+        },
+
         /** coauthoring begin **/
         clickStatusbarUsers: function() {
             this.leftMenu.menuFile.panels['rights'].changeAccessRights();

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

@@ -313,13 +313,16 @@ define([
                 this.plugins                    = this.editorConfig.plugins;
 
                 appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header');
-                appHeader.setCanBack(this.appOptions.canBackToFolder === true, (this.appOptions.canBackToFolder) ? this.editorConfig.customization.goback.text : '');
+                appHeader.setCanBack(this.appOptions.canBackToFolder === true, (this.appOptions.canBackToFolder) ? this.editorConfig.customization.goback.text : '')
+                            .setUserName(this.appOptions.user.fullname);
 
                 if (this.editorConfig.lang)
                     this.api.asc_setLocale(this.editorConfig.lang);
 
                 if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
                     Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
+
+                Common.Controllers.Desktop.init(this.appOptions);
             },
 
             loadDocument: function(data) {
@@ -588,11 +591,13 @@ define([
             },
 
             goBack: function() {
-                var href = this.appOptions.customization.goback.url;
-                if (this.appOptions.customization.goback.blank!==false) {
-                    window.open(href, "_blank");
-                } else {
-                    parent.location.href = href;
+                if ( !Common.Controllers.Desktop.process('goback') ) {
+                    var href = this.appOptions.customization.goback.url;
+                    if (this.appOptions.customization.goback.blank!==false) {
+                        window.open(href, "_blank");
+                    } else {
+                        parent.location.href = href;
+                    }
                 }
             },
 
@@ -622,12 +627,7 @@ define([
                         forcesave = this.appOptions.forcesave,
                         isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
                         isDisabled = !cansave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (toolbarView.btnSave.isDisabled() !== isDisabled)
-                        toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
 
@@ -1072,7 +1072,7 @@ define([
                                                  (!this.appOptions.isReviewOnly || this.appOptions.canLicense); // if isReviewOnly==true -> canLicense must be true
                 this.appOptions.isEdit         = this.appOptions.canLicense && this.appOptions.canEdit && this.editorConfig.mode !== 'view';
                 this.appOptions.canReview      = this.permissions.review === true && this.appOptions.canLicense && this.appOptions.isEdit;
-                this.appOptions.canUseHistory  = this.appOptions.canLicense && this.editorConfig.canUseHistory && this.appOptions.canCoAuthoring && !this.appOptions.isDesktopApp;
+                this.appOptions.canUseHistory  = this.appOptions.canLicense && this.editorConfig.canUseHistory && this.appOptions.canCoAuthoring;
                 this.appOptions.canHistoryClose  = this.editorConfig.canHistoryClose;
                 this.appOptions.canHistoryRestore= this.editorConfig.canHistoryRestore && !!this.permissions.changeHistory;
                 this.appOptions.canUseMailMerge= this.appOptions.canLicense && this.appOptions.canEdit && !this.appOptions.isOffline;
@@ -1518,15 +1518,10 @@ define([
                 var toolbarView = this.getApplication().getController('Toolbar').getView();
 
                 if (toolbarView && !toolbarView._state.previewmode) {
-                    var isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
+                    var isSyncButton = toolbarView.btnSave.$icon.hasClass('btn-synch'),
                         forcesave = this.appOptions.forcesave,
                         isDisabled = !isModified && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (toolbarView.btnSave.isDisabled() !== isDisabled)
-                        toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        toolbarView.btnSave.setDisabled(isDisabled);
                 }
 
                 /** coauthoring begin **/
@@ -1536,20 +1531,13 @@ define([
                 /** coauthoring end **/
             },
             onDocumentCanSaveChanged: function (isCanSave) {
-                var application = this.getApplication(),
-                    toolbarController = application.getController('Toolbar'),
-                    toolbarView = toolbarController.getView();
+                var toolbarView = this.getApplication().getController('Toolbar').getView();
 
                 if (toolbarView && this.api && !toolbarView._state.previewmode) {
                     var isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
                         forcesave = this.appOptions.forcesave,
                         isDisabled = !isCanSave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (toolbarView.btnSave.isDisabled() !== isDisabled)
-                        toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
 

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

@@ -55,6 +55,7 @@ define([
         ],
 
         initialize: function() {
+            var me = this;
             this.addListeners({
                 'Statusbar': {
                     'langchanged': this.onLangMenu,
@@ -62,6 +63,15 @@ define([
                         this.api.zoom(value);
                         Common.NotificationCenter.trigger('edit:complete', this.statusbar);
                     }.bind(this)
+                },
+                'Common.Views.Header': {
+                    'statusbar:hide': function (view, status) {
+                        me.statusbar.setVisible(!status);
+                        Common.localStorage.setBool('de-hidden-status', status);
+
+                        Common.NotificationCenter.trigger('layout:changed', 'status');
+                        Common.NotificationCenter.trigger('edit:complete', this.statusbar);
+                    }
                 }
             });
         },

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

@@ -114,10 +114,16 @@ define([
                     'menu:show': this.onFileMenu.bind(this, 'show')
                 },
                 'Common.Views.Header': {
+                    'toolbar:setcompact': this.onChangeCompactView.bind(this),
                     'print': function (opts) {
                         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,
@@ -228,7 +234,9 @@ define([
             toolbar.btnPrint.on('click',                                _.bind(this.onPrint, this));
             toolbar.btnSave.on('click',                                 _.bind(this.onSave, this));
             toolbar.btnUndo.on('click',                                 _.bind(this.onUndo, this));
+            toolbar.btnUndo.on('disabled',                              _.bind(this.onBtnChangeState, this, 'undo:disabled'));
             toolbar.btnRedo.on('click',                                 _.bind(this.onRedo, this));
+            toolbar.btnRedo.on('disabled',                              _.bind(this.onBtnChangeState, this, 'redo:disabled'));
             toolbar.btnCopy.on('click',                                 _.bind(this.onCopyPaste, this, true));
             toolbar.btnPaste.on('click',                                _.bind(this.onCopyPaste, this, false));
             toolbar.btnIncFontSize.on('click',                          _.bind(this.onIncrease, this));
@@ -289,7 +297,6 @@ define([
             toolbar.btnPageMargins.menu.on('item:click',                _.bind(this.onPageMarginsSelect, this));
             toolbar.btnClearStyle.on('click',                           _.bind(this.onClearStyleClick, this));
             toolbar.btnCopyStyle.on('toggle',                           _.bind(this.onCopyStyleToggle, this));
-            toolbar.btnAdvSettings.on('click',                          _.bind(this.onAdvSettingsClick, this));
             toolbar.mnuPageSize.on('item:click',                        _.bind(this.onPageSizeClick, this));
             toolbar.mnuColorSchema.on('item:click',                     _.bind(this.onColorSchemaClick, this));
             toolbar.btnMailRecepients.on('click',                       _.bind(this.onSelectRecepientsClick, this));
@@ -301,13 +308,6 @@ define([
             toolbar.listStyles.on('click',                              _.bind(this.onListStyleSelect, this));
             toolbar.listStyles.on('contextmenu',                        _.bind(this.onListStyleContextMenu, this));
             toolbar.styleMenu.on('hide:before',                         _.bind(this.onListStyleBeforeHide, this));
-            toolbar.mnuitemHideStatusBar.on('toggle',                   _.bind(this.onHideStatusBar, this));
-            toolbar.mnuitemHideRulers.on('toggle',                      _.bind(this.onHideRulers, this));
-            toolbar.mnuitemCompactToolbar.on('toggle',                  _.bind(this.onChangeCompactView, this));
-            toolbar.btnFitPage.on('toggle',                             _.bind(this.onZoomToPageToggle, this));
-            toolbar.btnFitWidth.on('toggle',                            _.bind(this.onZoomToWidthToggle, this));
-            toolbar.mnuZoomIn.on('click',                               _.bind(this.onZoomInClick, this));
-            toolbar.mnuZoomOut.on('click',                              _.bind(this.onZoomOutClick, this));
             toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
 
             $('#id-save-style-plus, #id-save-style-link', toolbar.$el).on('click', this.onMenuSaveStyle.bind(this));
@@ -372,7 +372,6 @@ define([
                 var me = this;
                 setTimeout(function () {
                     me.onChangeCompactView(null, !me.toolbar.isCompact());
-                    me.toolbar.mnuitemCompactToolbar.setChecked(me.toolbar.isCompact(), true);
                 }, 0);
             }
         },
@@ -518,14 +517,9 @@ define([
 
                 var btnHorizontalAlign = this.toolbar.btnHorizontalAlign;
 
-                if (btnHorizontalAlign.rendered) {
-                    var iconEl = $('.icon', btnHorizontalAlign.cmpEl);
-
-                    if (iconEl) {
-                        iconEl.removeClass(btnHorizontalAlign.options.icls);
-                        btnHorizontalAlign.options.icls = align;
-                        iconEl.addClass(btnHorizontalAlign.options.icls);
-                    }
+                if ( btnHorizontalAlign.rendered && btnHorizontalAlign.$icon ) {
+                    btnHorizontalAlign.$icon.removeClass(btnHorizontalAlign.options.icls).addClass(align);
+                    btnHorizontalAlign.options.icls = align;
                 }
 
                 if (v === null || v===undefined) {
@@ -740,7 +734,7 @@ define([
 
             var in_footnote = this.api.asc_IsCursorInFootnote();
             need_disable = paragraph_locked || header_locked || in_header || in_image || in_equation && !btn_eq_state || in_footnote || in_control;
-            toolbar.btnsPageBreak.disable(need_disable);
+            toolbar.btnsPageBreak.setDisabled(need_disable);
 
             need_disable = paragraph_locked || header_locked || !can_add_image || in_equation || control_plain;
             toolbar.btnInsertImage.setDisabled(need_disable);
@@ -773,10 +767,8 @@ define([
                 toolbar.listStylesAdditionalMenuItem.setDisabled(frame_pr===undefined);
 
             need_disable = (paragraph_locked || header_locked) && this.api.can_AddQuotedComment() || image_locked;
-            if (this.btnsComment && this.btnsComment.length>0 && need_disable != this.btnsComment[0].isDisabled())
-                _.each (this.btnsComment, function(item){
-                    item.setDisabled(need_disable);
-                }, this);
+            if ( this.btnsComment && this.btnsComment.length > 0 )
+                this.btnsComment.setDisabled(need_disable);
 
             this._state.in_equation = in_equation;
         },
@@ -845,12 +837,7 @@ define([
             this.toolbar.mnuInsertPageNum.setDisabled(false);
         },
 
-        onApiZoomChange: function(percent, type) {
-            this.toolbar.btnFitPage.setChecked(type == 2, true);
-            this.toolbar.btnFitWidth.setChecked(type == 1, true);
-            this.toolbar.mnuZoom.options.value = percent;
-            $('.menu-zoom .zoom', this.toolbar.el).html(percent + '%');
-        },
+        onApiZoomChange: function(percent, type) {},
 
         onApiStartHighlight: function(pressed) {
             this.toolbar.btnHighlightColor.toggle(pressed, true);
@@ -921,18 +908,14 @@ define([
             var toolbar = this.toolbar;
             if (this.api) {
                 var isModified = this.api.asc_isDocumentCanSave();
-                var isSyncButton = $('.icon', toolbar.btnSave.cmpEl).hasClass('btn-synch');
+                var isSyncButton = toolbar.btnCollabChanges.$icon.hasClass('btn-synch');
                 if (!isModified && !isSyncButton && !toolbar.mode.forcesave)
                     return;
 
                 this.api.asc_Save();
             }
 
-            toolbar.btnsSave.forEach(function(button) {
-                if ( button ) {
-                    button.setDisabled(!toolbar.mode.forcesave);
-                }
-            });
+            toolbar.btnSave.setDisabled(!toolbar.mode.forcesave);
 
             Common.NotificationCenter.trigger('edit:complete', toolbar);
 
@@ -940,6 +923,13 @@ define([
             Common.component.Analytics.trackEvent('ToolBar', 'Save');
         },
 
+        onBtnChangeState: function(prop) {
+            if ( /\:disabled$/.test(prop) ) {
+                var _is_disabled = arguments[2];
+                this.toolbar.fireEvent(prop, [_is_disabled]);
+            }
+        },
+
         onUndo: function(btn, e) {
             if (this.api)
                 this.api.Undo();
@@ -1078,14 +1068,11 @@ define([
 
         onMenuHorizontalAlignSelect: function(menu, item) {
             this._state.pralign = undefined;
-            var btnHorizontalAlign = this.toolbar.btnHorizontalAlign,
-                iconEl = $('.icon', btnHorizontalAlign.cmpEl);
+            var btnHorizontalAlign = this.toolbar.btnHorizontalAlign;
 
-            if (iconEl) {
-                iconEl.removeClass(btnHorizontalAlign.options.icls);
-                btnHorizontalAlign.options.icls = !item.checked ? 'btn-align-left' : item.options.icls;
-                iconEl.addClass(btnHorizontalAlign.options.icls);
-            }
+            btnHorizontalAlign.$icon.removeClass(btnHorizontalAlign.options.icls);
+            btnHorizontalAlign.options.icls = !item.checked ? 'btn-align-left' : item.options.icls;
+            btnHorizontalAlign.$icon.addClass(btnHorizontalAlign.options.icls);
 
             if (this.api && item.checked)
                 this.api.put_PrAlign(item.value);
@@ -1415,11 +1402,6 @@ define([
             this.modeAlwaysSetStyle = state;
         },
 
-        onAdvSettingsClick: function(btn, e) {
-            this.toolbar.fireEvent('file:settings', this);
-            btn.cmpEl.blur();
-        },
-
         onPageSizeClick: function(menu, item, state) {
             if (this.api && state) {
                 this._state.pgsize = [0, 0];
@@ -1993,61 +1975,6 @@ define([
         //     Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         // },
 
-        onHideStatusBar: function(item, checked) {
-            var headerView  = this.getApplication().getController('Statusbar').getView('Statusbar');
-            headerView  && headerView.setVisible(!checked);
-
-            Common.localStorage.setBool('de-hidden-status', checked);
-
-            Common.NotificationCenter.trigger('layout:changed', 'status');
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onHideRulers: function(item, checked) {
-            if (this.api) {
-                this.api.asc_SetViewRulers(!checked);
-            }
-
-            Common.localStorage.setBool('de-hidden-rulers', checked);
-
-            Common.NotificationCenter.trigger('layout:changed', 'rulers');
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomToPageToggle: function(item, state) {
-            if (this.api) {
-                if (state)
-                    this.api.zoomFitToPage();
-                else
-                    this.api.zoomCustomMode();
-            }
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomToWidthToggle: function(item, state) {
-            if (this.api) {
-                if (state)
-                    this.api.zoomFitToWidth();
-                else
-                    this.api.zoomCustomMode();
-            }
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomInClick: function(btn) {
-            if (this.api)
-                this.api.zoomIn();
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomOutClick: function(btn) {
-            if (this.api)
-                this.api.zoomOut();
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
         _clearBullets: function() {
             this.toolbar.btnMarkers.toggle(false, true);
             this.toolbar.btnNumbers.toggle(false, true);
@@ -2716,17 +2643,12 @@ define([
 
             disable = disable || (reviewmode ? toolbar_mask.length>0 : group_mask.length>0);
             toolbar.$el.find('.toolbar').toggleClass('masked', disable);
-            toolbar.btnHide.setDisabled(disable);
             if ( toolbar.synchTooltip )
                 toolbar.synchTooltip.hide();
 
             toolbar._state.previewmode = reviewmode && disable;
             if (reviewmode) {
-                toolbar._state.previewmode && toolbar.btnsSave.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(true);
-                    }
-                });
+                toolbar._state.previewmode && toolbar.btnSave.setDisabled(true);
 
                 if (toolbar.needShowSynchTip) {
                     toolbar.needShowSynchTip = false;
@@ -2783,12 +2705,25 @@ define([
                 if ( $panel )
                     me.toolbar.addTab(tab, $panel, 4);
 
-                if (config.isDesktopApp && config.isOffline) {
-                    tab = {action: 'protect', caption: me.toolbar.textTabProtect};
-                    $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
+                if ( config.isDesktopApp ) {
+                    me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
 
-                    if ( $panel )
-                        me.toolbar.addTab(tab, $panel, 5);
+                    // hide 'print' and 'save' buttons group and next separator
+                    me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
+
+                    // hide 'undo' and 'redo' buttons and retrieve parent container
+                    var $box =  me.toolbar.btnUndo.$el.hide().next().hide().parent();
+
+                    // move 'paste' button to the container instead of 'undo' and 'redo'
+                    me.toolbar.btnPaste.$el.detach().appendTo($box);
+                    me.toolbar.btnCopy.$el.removeClass('split');
+
+                    if ( config.isOffline ) {
+                        tab = {action: 'protect', caption: me.toolbar.textTabProtect};
+                        $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
+
+                        if ($panel) me.toolbar.addTab(tab, $panel, 5);
+                    }
                 }
 
                 var links = me.getApplication().getController('Links');
@@ -2801,7 +2736,7 @@ define([
             var me = this;
 
             if ( config.canCoAuthoring && config.canComments ) {
-                this.btnsComment = [];
+                this.btnsComment = createButtonSet();
                 var slots = me.toolbar.$el.find('.slot-comment');
                 slots.each(function(index, el) {
                     var _cls = 'btn-toolbar';
@@ -2814,7 +2749,7 @@ define([
                         caption: me.toolbar.capBtnComment
                     }).render( slots.eq(index) );
 
-                    me.btnsComment.push(button);
+                    me.btnsComment.add(button);
                 });
 
                 if ( this.btnsComment.length ) {

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

@@ -49,7 +49,7 @@ define([
 ], function (Viewport) {
     'use strict';
 
-    DE.Controllers.Viewport = Backbone.Controller.extend({
+    DE.Controllers.Viewport = Backbone.Controller.extend(_.assign({
         // Specifying a Viewport model
         models: [],
 
@@ -68,6 +68,10 @@ define([
 
             var me = this;
             this.addListeners({
+                'FileMenu': {
+                    'menu:hide': me.onFileMenu.bind(me, 'hide'),
+                    'menu:show': me.onFileMenu.bind(me, 'show')
+                },
                 'Toolbar': {
                     'render:before' : function (toolbar) {
                         var config = DE.getController('Main').appOptions;
@@ -75,7 +79,26 @@ define([
                         toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
+                        me.header.mnuitemCompactToolbar.setChecked(state, true);
+                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                                Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
+                    },
+                    'undo:disabled' : function (state) {
+                        if ( me.header.btnUndo ) {
+                            if ( me.header.btnUndo.keepState )
+                                me.header.btnUndo.keepState.disabled = state;
+                            else me.header.btnUndo.setDisabled(state);
+                        }
+                    },
+                    'redo:disabled' : function (state) {
+                        if ( me.header.btnRedo )
+                            if ( me.header.btnRedo.keepState )
+                                me.header.btnRedo.keepState.disabled = state;
+                            else me.header.btnRedo.setDisabled(state);
+                    },
+                    'save:disabled' : function (state) {
+                        if ( me.header.btnSave )
+                            me.header.btnSave.setDisabled(state);
                     }
                 }
             });
@@ -83,6 +106,7 @@ define([
 
         setApi: function(api) {
             this.api = api;
+            this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
         },
 
 
@@ -108,16 +132,151 @@ define([
             this.boxSdk = $('#editor_sdk');
             this.boxSdk.css('border-left', 'none');
 
+            this.header.mnuitemFitPage = this.header.fakeMenuItem();
+            this.header.mnuitemFitWidth = this.header.fakeMenuItem();
+
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
+            Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
         },
 
         onAppShowed: function (config) {
             var me = this;
+            me.appConfig = config;
+
+            var _intvars = Common.Utils.InternalSettings;
+            var $filemenu = $('.toolbar-fullview-panel');
+            $filemenu.css('top', _intvars.get('toolbar-height-tabs'));
 
             if ( !config.isEdit ||
                 ( !Common.localStorage.itemExists("de-compact-toolbar") &&
                 config.customization && config.customization.compactToolbar )) {
-                me.viewport.vlayout.panels[0].height = 32;
+
+                var panel = me.viewport.vlayout.getItem('toolbar');
+                if ( panel ) panel.height = _intvars.get('toolbar-height-tabs');
+            }
+
+            if ( config.isDesktopApp && config.isEdit ) {
+                var $title = me.viewport.vlayout.getItem('title').el;
+                $title.html(me.header.getPanel('title', config)).show();
+
+                var toolbar = me.viewport.vlayout.getItem('toolbar');
+                toolbar.el.addClass('top-title');
+                toolbar.height -= _intvars.get('toolbar-height-tabs') - _intvars.get('toolbar-height-tabs-top-title');
+
+                var _tabs_new_height = _intvars.get('toolbar-height-tabs-top-title');
+                _intvars.set('toolbar-height-tabs', _tabs_new_height);
+                _intvars.set('toolbar-height-compact', _tabs_new_height);
+                _intvars.set('toolbar-height-normal', _tabs_new_height + _intvars.get('toolbar-height-controls'));
+
+                $filemenu.css('top', _tabs_new_height + _intvars.get('document-title-height'));
+
+                toolbar = me.getApplication().getController('Toolbar').getView();
+                toolbar.btnCollabChanges = me.header.btnSave;
+            }
+        },
+
+        onAppReady: function (config) {
+            var me = this;
+            if ( me.header.btnOptions ) {
+                var compactview = !config.isEdit;
+                if ( config.isEdit ) {
+                    if ( Common.localStorage.itemExists("de-compact-toolbar") ) {
+                        compactview = Common.localStorage.getBool("de-compact-toolbar");
+                    } else
+                    if ( config.customization && config.customization.compactToolbar )
+                        compactview = true;
+                }
+
+                me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
+                    caption: me.header.textCompactView,
+                    checked: compactview,
+                    checkable: true,
+                    value: 'toolbar'
+                });
+
+                var mnuitemHideStatusBar = new Common.UI.MenuItem({
+                    caption: me.header.textHideStatusBar,
+                    checked: Common.localStorage.getBool("de-hidden-status"),
+                    checkable: true,
+                    value: 'statusbar'
+                });
+
+                if ( config.canBrandingExt && config.customization && config.customization.statusBar === false )
+                    mnuitemHideStatusBar.hide();
+
+                var mnuitemHideRulers = new Common.UI.MenuItem({
+                    caption: me.header.textHideLines,
+                    checked: Common.localStorage.getBool("de-hidden-rulers"),
+                    checkable: true,
+                    value: 'rulers'
+                });
+
+                me.header.mnuitemFitPage = new Common.UI.MenuItem({
+                    caption: me.textFitPage,
+                    checkable: true,
+                    checked: me.header.mnuitemFitPage.isChecked(),
+                    value: 'zoom:page'
+                });
+
+                me.header.mnuitemFitWidth = new Common.UI.MenuItem({
+                    caption: me.textFitWidth,
+                    checkable: true,
+                    checked: me.header.mnuitemFitWidth.isChecked(),
+                    value: 'zoom:width'
+                });
+
+                me.header.mnuZoom = new Common.UI.MenuItem({
+                    template: _.template([
+                        '<div id="hdr-menu-zoom" class="menu-zoom" style="height: 25px;" ',
+                            '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                'data-stopPropagation="true"',
+                            '<% } %>', '>',
+                            '<label class="title">' + me.header.textZoom + '</label>',
+                            '<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon btn-zoomup">&nbsp;</i></button>',
+                            '<label class="zoom"><%= options.value %>%</label>',
+                            '<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon btn-zoomdown">&nbsp;</i></button>',
+                        '</div>'
+                    ].join('')),
+                    stopPropagation: true,
+                    value: me.header.mnuZoom.options.value
+                });
+
+                me.header.btnOptions.setMenu(new Common.UI.Menu({
+                        cls: 'pull-right',
+                        style: 'min-width: 180px;',
+                        items: [
+                            me.header.mnuitemCompactToolbar,
+                            mnuitemHideStatusBar,
+                            mnuitemHideRulers,
+                            {caption:'--'},
+                            me.header.mnuitemFitPage,
+                            me.header.mnuitemFitWidth,
+                            me.header.mnuZoom,
+                            {caption:'--'},
+                            new Common.UI.MenuItem({
+                                caption: me.header.textAdvSettings,
+                                value: 'advanced'
+                            })
+                        ]
+                    })
+                );
+
+                var _on_btn_zoom = function (btn) {
+                    btn == 'up' ? me.api.zoomIn() : me.api.zoomOut();
+                    Common.NotificationCenter.trigger('edit:complete', me.header);
+                };
+
+                (new Common.UI.Button({
+                    el      : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
+                    cls     : 'btn-toolbar'
+                })).on('click', _on_btn_zoom.bind(me, 'down'));
+
+                (new Common.UI.Button({
+                    el      : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
+                    cls     : 'btn-toolbar'
+                })).on('click', _on_btn_zoom.bind(me, 'up'));
+
+                me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
             }
         },
 
@@ -161,6 +320,51 @@ define([
         onWindowResize: function(e) {
             this.onLayoutChanged('window');
             Common.NotificationCenter.trigger('window:resize');
-        }
-    });
+        },
+
+        onFileMenu: function (opts) {
+            var me = this;
+            var _need_disable =  opts == 'show';
+
+            me.header.lockHeaderBtns( 'undo', _need_disable );
+            me.header.lockHeaderBtns( 'redo', _need_disable );
+            me.header.lockHeaderBtns( 'opts', _need_disable );
+        },
+
+        onApiZoomChange: function(percent, type) {
+            this.header.mnuitemFitPage.setChecked(type == 2, true);
+            this.header.mnuitemFitWidth.setChecked(type == 1, true);
+            this.header.mnuZoom.options.value = percent;
+
+            if ( this.header.mnuZoom.$el )
+                $('.menu-zoom label.zoom', this.header.mnuZoom.$el).html(percent + '%');
+        },
+
+        onOptionsItemClick: function (menu, item, e) {
+            var me = this;
+
+            switch ( item.value ) {
+            case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
+            case 'statusbar': me.header.fireEvent('statusbar:hide', [item, item.isChecked()]); break;
+            case 'rulers':
+                me.api.asc_SetViewRulers(!item.isChecked());
+                Common.localStorage.setBool('de-hidden-rulers', item.isChecked());
+                Common.NotificationCenter.trigger('layout:changed', 'rulers');
+                Common.NotificationCenter.trigger('edit:complete', me.header);
+                break;
+            case 'zoom:page':
+                item.isChecked() ? me.api.zoomFitToPage() : me.api.zoomCustomMode();
+                Common.NotificationCenter.trigger('edit:complete', me.header);
+                break;
+            case 'zoom:width':
+                item.isChecked() ? me.api.zoomFitToWidth() : me.api.zoomCustomMode();
+                Common.NotificationCenter.trigger('edit:complete', me.header);
+                break;
+            case 'advanced': me.header.fireEvent('file:settings', me.header); break;
+            }
+        },
+
+        textFitPage: 'Fit to Page',
+        textFitWidth: 'Fit to Width'
+    }, DE.Controllers.Viewport));
 });

apps/documenteditor/main/app/template/Toolbar.template

@@ -8,7 +8,6 @@
             <ul>
                 <% for(var i in tabs) { %>
                     <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
-                        <div class="tab-bg" />
                         <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                     </li>
                 <% } %>
@@ -93,16 +92,7 @@
                         <span class="btn-slot" id="slot-btn-mailrecepients"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles">
-                </div>
-                <div class="group no-mask">
-                    <div class="elset">
-                        <span class="btn-slot split" id="slot-btn-hidebars"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot" id="slot-btn-settings"></span>
-                    </div>
-                </div>
+                <div class="group" id="slot-field-styles"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">

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

@@ -3,6 +3,7 @@
         <section class="layout-ct">
             <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
         </section>
+        <section id="app-title" class="layout-item"></section>
         <div id="toolbar" class="layout-item"></div>
         <div class="layout-item middle">
             <div id="viewport-hbox-layout" class="layout-ct hbox">

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

@@ -120,22 +120,25 @@ define([
                 this.btnSave = new Common.UI.Button({
                     id: 'id-toolbar-btn-save',
                     cls: 'btn-toolbar',
-                    iconCls: 'no-mask ' + this.btnSaveCls
+                    iconCls: 'no-mask ' + this.btnSaveCls,
+                    signals: ['disabled']
                 });
                 this.toolbarControls.push(this.btnSave);
-                this.btnsSave = [this.btnSave];
+                this.btnCollabChanges = this.btnSave;
 
                 this.btnUndo = new Common.UI.Button({
                     id: 'id-toolbar-btn-undo',
                     cls: 'btn-toolbar',
-                    iconCls: 'btn-undo'
+                    iconCls: 'btn-undo',
+                    signals: ['disabled']
                 });
                 this.toolbarControls.push(this.btnUndo);
 
                 this.btnRedo = new Common.UI.Button({
                     id: 'id-toolbar-btn-redo',
                     cls: 'btn-toolbar',
-                    iconCls: 'btn-redo'
+                    iconCls: 'btn-redo',
+                    signals: ['disabled']
                 });
                 this.toolbarControls.push(this.btnRedo);
 
@@ -941,33 +944,6 @@ define([
                     iconCls: 'btn-mailrecepients'
                 });
 
-                this.btnHide = new Common.UI.Button({
-                    id: 'id-toolbar-btn-hidebars',
-                    cls: 'btn-toolbar',
-                    iconCls: 'btn-hidebars no-mask',
-                    menu: true
-                });
-                this.toolbarControls.push(this.btnHide);
-
-                this.btnFitPage = {
-                    conf: {checked: false},
-                    setChecked: function (val) {
-                        this.conf.checked = val;
-                    },
-                    isChecked: function () {
-                        return this.conf.checked;
-                    }
-                };
-                this.btnFitWidth = clone(this.btnFitPage);
-                this.mnuZoom = {options: {value: 100}};
-
-                this.btnAdvSettings = new Common.UI.Button({
-                    id: 'id-toolbar-btn-settings',
-                    cls: 'btn-toolbar',
-                    iconCls: 'btn-settings no-mask'
-                });
-                this.toolbarControls.push(this.btnAdvSettings);
-
                 me.btnImgAlign = new Common.UI.Button({
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'btn-img-align',
@@ -1195,9 +1171,9 @@ define([
                     }
                 });
 
+                me.setTab('home');
                 if ( me.isCompactView )
-                    me.setFolded(true); else
-                    me.setTab('home');
+                    me.setFolded(true);
 
                 var top = Common.localStorage.getItem("de-pgmargins-top"),
                     left = Common.localStorage.getItem("de-pgmargins-left"),
@@ -1288,8 +1264,6 @@ define([
                 _injectComponent('#slot-btn-clearstyle', this.btnClearStyle);
                 _injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
                 _injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
-                _injectComponent('#slot-btn-hidebars', this.btnHide);
-                _injectComponent('#slot-btn-settings', this.btnAdvSettings);
                 _injectComponent('#slot-btn-paracolor', this.btnParagraphColor);
                 _injectComponent('#slot-field-styles', this.listStyles);
                 _injectComponent('#slot-btn-halign', this.btnHorizontalAlign);
@@ -1303,12 +1277,7 @@ define([
                 +function injectBreakButtons() {
                     var me = this;
 
-                    me.btnsPageBreak = [];
-                    me.btnsPageBreak.disable = function(status) {
-                        this.forEach(function(btn) {
-                            btn.setDisabled(status);
-                        });
-                    };
+                    me.btnsPageBreak = createButtonSet();
 
                     var $slots = $host.find('.btn-slot.btn-pagebreak');
                     $slots.each(function(index, el) {
@@ -1323,7 +1292,7 @@ define([
                             menu: true
                         }).render( $slots.eq(index) );
 
-                        me.btnsPageBreak.push(button);
+                        me.btnsPageBreak.add(button);
                     });
 
                     Array.prototype.push.apply(me.paragraphControls, me.btnsPageBreak);
@@ -1541,67 +1510,14 @@ define([
                 this.btnCopyStyle.updateHint(this.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C'));
                 this.btnColorSchemas.updateHint(this.tipColorSchemas);
                 this.btnMailRecepients.updateHint(this.tipMailRecepients);
-                this.btnHide.updateHint(this.tipViewSettings);
-                this.btnAdvSettings.updateHint(this.tipAdvSettings);
 
                 // set menus
 
                 var me = this;
 
-                this.btnHide.setMenu(new Common.UI.Menu({
-                        cls: 'pull-right',
-                        style: 'min-width: 180px;',
-                        items: [
-                            this.mnuitemCompactToolbar = new Common.UI.MenuItem({
-                                caption: this.textCompactView,
-                                checked: me.isCompactView,
-                                checkable: true
-                            }),
-                            this.mnuitemHideStatusBar = new Common.UI.MenuItem({
-                                caption: this.textHideStatusBar,
-                                checked: Common.localStorage.getBool("de-hidden-status"),
-                                checkable: true
-                            }),
-                            this.mnuitemHideRulers = new Common.UI.MenuItem({
-                                caption: this.textHideLines,
-                                checked: Common.localStorage.getBool("de-hidden-rulers"),
-                                checkable: true
-                            }),
-                            {caption: '--'},
-                            this.btnFitPage = new Common.UI.MenuItem({
-                                caption: this.textFitPage,
-                                checkable: true,
-                                checked: this.btnFitPage.isChecked()
-                            }),
-                            this.btnFitWidth = new Common.UI.MenuItem({
-                                caption: this.textFitWidth,
-                                checkable: true,
-                                checked: this.btnFitWidth.isChecked()
-                            }),
-                            this.mnuZoom = new Common.UI.MenuItem({
-                                template: _.template([
-                                    '<div id="id-toolbar-menu-zoom" class="menu-zoom" style="height: 25px;" ',
-                                    '<% if(!_.isUndefined(options.stopPropagation)) { %>',
-                                    'data-stopPropagation="true"',
-                                    '<% } %>', '>',
-                                    '<label class="title">' + this.textZoom + '</label>',
-                                    '<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon btn-zoomup">&nbsp;</i></button>',
-                                    '<label class="zoom"><%= options.value %>%</label>',
-                                    '<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon btn-zoomdown">&nbsp;</i></button>',
-                                    '</div>'
-                                ].join('')),
-                                stopPropagation: true,
-                                value: this.mnuZoom.options.value
-                            })
-                        ]
-                    })
-                );
                 // if (this.mode.isDesktopApp || this.mode.canBrandingExt && this.mode.customization && this.mode.customization.header === false)
                 //     this.mnuitemHideTitleBar.hide();
 
-                if (this.mode.canBrandingExt && this.mode.customization && this.mode.customization.statusBar===false)
-                    this.mnuitemHideStatusBar.hide();
-
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
                         style: 'min-width: 139px',
@@ -1659,15 +1575,6 @@ define([
                 this.paragraphControls.push(this.mnuPageNumCurrentPos);
                 this.paragraphControls.push(this.mnuInsertPageCount);
 
-                this.mnuZoomOut = new Common.UI.Button({
-                    el: $('#id-menu-zoom-out'),
-                    cls: 'btn-toolbar'
-                });
-                this.mnuZoomIn = new Common.UI.Button({
-                    el: $('#id-menu-zoom-in'),
-                    cls: 'btn-toolbar'
-                });
-
                 // set dataviews
 
                 var _conf = this.mnuMarkersPicker.conf;
@@ -1967,13 +1874,6 @@ define([
                     maxRows: 8,
                     maxColumns: 10
                 });
-
-                var btnsave = DE.getController('LeftMenu').getView('LeftMenu').getMenu('file').getButton('save');
-                if (btnsave && this.btnsSave) {
-                    this.btnsSave.push(btnsave);
-                    this.toolbarControls.push(btnsave);
-                    btnsave.setDisabled(this.btnsSave[0].isDisabled());
-                }
             },
 
             onToolbarAfterRender: function(toolbar) {
@@ -2057,11 +1957,7 @@ define([
 
             setMode: function (mode) {
                 if (mode.isDisconnected) {
-                    this.btnsSave.forEach(function(button) {
-                        if ( button ) {
-                            button.setDisabled(true);
-                        }
-                    });
+                    this.btnSave.setDisabled(true);
                     if (mode.disableDownload)
                         this.btnPrint.setDisabled(true);
                 }
@@ -2133,65 +2029,54 @@ define([
             /** coauthoring begin **/
             onCollaborativeChanges: function () {
                 if (this._state.hasCollaborativeChanges) return;
-                if (!this.btnSave.rendered || this._state.previewmode) {
+                if (!this.btnCollabChanges.rendered || this._state.previewmode) {
                     this.needShowSynchTip = true;
                     return;
                 }
 
                 this._state.hasCollaborativeChanges = true;
-                var iconEl = $('.icon', this.btnSave.cmpEl);
-                iconEl.removeClass(this.btnSaveCls);
-                iconEl.addClass('btn-synch');
+                this.btnCollabChanges.$icon.removeClass(this.btnSaveCls).addClass('btn-synch');
                 if (this.showSynchTip) {
-                    this.btnSave.updateHint('');
+                    this.btnCollabChanges.updateHint('');
                     if (this.synchTooltip === undefined)
                         this.createSynchTip();
 
                     this.synchTooltip.show();
                 } else {
-                    this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                    this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                 }
 
-                this.btnsSave.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(false);
-                    }
-                });
+                this.btnSave.setDisabled(false);
                 Common.Gateway.collaborativeChanges();
             },
 
             createSynchTip: function () {
                 this.synchTooltip = new Common.UI.SynchronizeTip({
-                    target: $('#id-toolbar-btn-save')
+                    target: this.btnCollabChanges.$el
                 });
                 this.synchTooltip.on('dontshowclick', function () {
                     this.showSynchTip = false;
                     this.synchTooltip.hide();
-                    this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                    this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                     Common.localStorage.setItem("de-hide-synch", 1);
                 }, this);
                 this.synchTooltip.on('closeclick', function () {
                     this.synchTooltip.hide();
-                    this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                    this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                 }, this);
             },
 
             synchronizeChanges: function () {
-                if (!this._state.previewmode && this.btnSave.rendered) {
-                    var iconEl = $('.icon', this.btnSave.cmpEl),
-                        me = this;
+                if ( !this._state.previewmode && this.btnCollabChanges.rendered ) {
+                    var me = this;
 
-                    if (iconEl.hasClass('btn-synch')) {
-                        iconEl.removeClass('btn-synch');
-                        iconEl.addClass(this.btnSaveCls);
+                    if ( me.btnCollabChanges.$icon.hasClass('btn-synch') ) {
+                        me.btnCollabChanges.$icon.removeClass('btn-synch').addClass(me.btnSaveCls);
                         if (this.synchTooltip)
                             this.synchTooltip.hide();
-                        this.btnSave.updateHint(this.btnSaveTip);
-                        this.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(!me.mode.forcesave);
-                            }
-                        });
+                        this.btnCollabChanges.updateHint(this.btnSaveTip);
+
+                        this.btnSave.setDisabled(!me.mode.forcesave);
                         this._state.hasCollaborativeChanges = false;
                     }
                 }
@@ -2204,18 +2089,18 @@ define([
                         editusers.push(item);
                 });
 
+                var me = this;
                 var length = _.size(editusers);
                 var cls = (length > 1) ? 'btn-save-coauth' : 'btn-save';
-                if (cls !== this.btnSaveCls && this.btnSave.rendered) {
-                    this.btnSaveTip = ((length > 1) ? this.tipSaveCoauth : this.tipSave ) + Common.Utils.String.platformKey('Ctrl+S');
+                if ( cls !== me.btnSaveCls && me.btnCollabChanges.rendered ) {
+                    me.btnSaveTip = ((length > 1) ? me.tipSaveCoauth : me.tipSave ) + Common.Utils.String.platformKey('Ctrl+S');
+
+                    if ( !me.btnCollabChanges.$icon.hasClass('btn-synch') ) {
+                        me.btnCollabChanges.$icon.removeClass(me.btnSaveCls).addClass(cls);
+                        me.btnCollabChanges.updateHint(me.btnSaveTip);
 
-                    var iconEl = $('.icon', this.btnSave.cmpEl);
-                    if (!iconEl.hasClass('btn-synch')) {
-                        iconEl.removeClass(this.btnSaveCls);
-                        iconEl.addClass(cls);
-                        this.btnSave.updateHint(this.btnSaveTip);
                     }
-                    this.btnSaveCls = cls;
+                    me.btnSaveCls = cls;
                 }
             },
 
@@ -2329,15 +2214,6 @@ define([
             tipInsertText: 'Insert Text',
             tipInsertTextArt: 'Insert Text Art',
             tipHAligh: 'Horizontal Align',
-            tipViewSettings: 'View Settings',
-            tipAdvSettings: 'Advanced Settings',
-            textCompactView: 'Hide Toolbar',
-            textHideTitleBar: 'Hide Title Bar',
-            textHideStatusBar: 'Hide Status Bar',
-            textHideLines: 'Hide Rulers',
-            textFitPage: 'Fit to Page',
-            textFitWidth: 'Fit to Width',
-            textZoom: 'Zoom',
             mniEditDropCap: 'Drop Cap Settings',
             textNone: 'None',
             textInText: 'In Text',

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

@@ -83,9 +83,15 @@ define([
             this.vlayout = new Common.UI.VBoxLayout({
                 box: $container,
                 items: [{
+                        el: $container.find('> .layout-item#app-title').hide(),
+                        alias: 'title',
+                        height: Common.Utils.InternalSettings.get('document-title-height')
+                    }, {
                         el: $container.find(' > .layout-item#toolbar'),
+                        alias: 'toolbar',
                         // rely: true
-                        height: Common.localStorage.getBool('de-compact-toolbar') ? 32 : 32+67
+                        height: Common.localStorage.getBool('de-compact-toolbar') ?
+                            Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal')
                     }, {
                         el: $container.find(' > .layout-item.middle'),
                         stretch: true

apps/documenteditor/main/app_dev.js

@@ -193,6 +193,7 @@ require([
         ,'common/main/lib/controller/ExternalMergeEditor'
         ,'common/main/lib/controller/ReviewChanges'
         ,'common/main/lib/controller/Protection'
+        ,'common/main/lib/controller/Desktop'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/documenteditor/main/locale/en.json

@@ -153,6 +153,12 @@
   "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.textAdvSettings": "Advanced settings",
+  "Common.Views.Header.textCompactView": "Hide Toolbar",
+  "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
+  "Common.Views.Header.textZoom": "Zoom",
+  "Common.Views.Header.tipViewSettings": "View settings",
+  "Common.Views.Header.textHideLines": "Hide Rulers",
   "Common.Views.History.textCloseHistory": "Close History",
   "Common.Views.History.textHide": "Collapse",
   "Common.Views.History.textHideAll": "Hide detailed changes",
@@ -779,6 +785,8 @@
   "DE.Controllers.Toolbar.txtSymbol_vdots": "Vertical ellipsis",
   "DE.Controllers.Toolbar.txtSymbol_xsi": "Xi",
   "DE.Controllers.Toolbar.txtSymbol_zeta": "Zeta",
+  "DE.Controllers.Viewport.textFitPage": "Fit to Page",
+  "DE.Controllers.Viewport.textFitWidth": "Fit to Width",
   "DE.Views.BookmarksDialog.textTitle": "Bookmarks",
   "DE.Views.BookmarksDialog.textLocation": "Location",
   "DE.Views.BookmarksDialog.textBookmarkName": "Bookmark name",
@@ -1762,14 +1770,14 @@
   "DE.Views.Toolbar.textColumnsRight": "Right",
   "DE.Views.Toolbar.textColumnsThree": "Three",
   "DE.Views.Toolbar.textColumnsTwo": "Two",
-  "DE.Views.Toolbar.textCompactView": "Hide Toolbar",
+  "del_DE.Views.Toolbar.textCompactView": "Hide Toolbar",
   "DE.Views.Toolbar.textContPage": "Continuous Page",
   "DE.Views.Toolbar.textEvenPage": "Even Page",
-  "DE.Views.Toolbar.textFitPage": "Fit to Page",
-  "DE.Views.Toolbar.textFitWidth": "Fit to Width",
-  "DE.Views.Toolbar.textHideLines": "Hide Rulers",
-  "DE.Views.Toolbar.textHideStatusBar": "Hide Status Bar",
-  "DE.Views.Toolbar.textHideTitleBar": "Hide Title Bar",
+  "del_DE.Views.Toolbar.textFitPage": "Fit to Page",
+  "del_DE.Views.Toolbar.textFitWidth": "Fit to Width",
+  "del_DE.Views.Toolbar.textHideLines": "Hide Rulers",
+  "del_DE.Views.Toolbar.textHideStatusBar": "Hide Status Bar",
+  "del_DE.Views.Toolbar.textHideTitleBar": "Hide Title Bar",
   "DE.Views.Toolbar.textInMargin": "In Margin",
   "DE.Views.Toolbar.textInsColumnBreak": "Insert Column Break",
   "DE.Views.Toolbar.textInsertPageCount": "Insert number of pages",
@@ -1823,8 +1831,8 @@
   "DE.Views.Toolbar.textToCurrent": "To current position",
   "DE.Views.Toolbar.textTop": "Top: ",
   "DE.Views.Toolbar.textUnderline": "Underline",
-  "DE.Views.Toolbar.textZoom": "Zoom",
-  "DE.Views.Toolbar.tipAdvSettings": "Advanced settings",
+  "del_DE.Views.Toolbar.textZoom": "Zoom",
+  "del_DE.Views.Toolbar.tipAdvSettings": "Advanced settings",
   "DE.Views.Toolbar.tipAlignCenter": "Align center",
   "DE.Views.Toolbar.tipAlignJust": "Justified",
   "DE.Views.Toolbar.tipAlignLeft": "Align left",
@@ -1880,7 +1888,7 @@
   "DE.Views.Toolbar.tipShowHiddenChars": "Nonprinting characters",
   "DE.Views.Toolbar.tipSynchronize": "The document has been changed by another user. Please click to save your changes and reload the updates.",
   "DE.Views.Toolbar.tipUndo": "Undo",
-  "DE.Views.Toolbar.tipViewSettings": "View settings",
+  "del_DE.Views.Toolbar.tipViewSettings": "View settings",
   "DE.Views.Toolbar.txtScheme1": "Office",
   "DE.Views.Toolbar.txtScheme10": "Median",
   "DE.Views.Toolbar.txtScheme11": "Metro",

apps/presentationeditor/main/app.js

@@ -190,6 +190,7 @@ require([
         'common/main/lib/controller/ExternalDiagramEditor'
         ,'common/main/lib/controller/ReviewChanges'
         ,'common/main/lib/controller/Protection'
+        ,'common/main/lib/controller/Desktop'
     ], function() {
         app.start();
     });

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

@@ -61,6 +61,7 @@ define([
                     'hide': _.bind(this.onHideChat, this)
                 },
                 'Common.Views.Header': {
+                    'file:settings': _.bind(this.clickToolbarSettings,this),
                     'click:users': _.bind(this.clickStatusbarUsers, this)
                 },
                 'Common.Views.Plugins': {
@@ -89,7 +90,8 @@ define([
                 'Toolbar': {
                     'file:settings': _.bind(this.clickToolbarSettings,this),
                     'file:open': this.clickToolbarTab.bind(this, 'file'),
-                    'file:close': this.clickToolbarTab.bind(this, 'other')
+                    'file:close': this.clickToolbarTab.bind(this, 'other'),
+                    'save:disabled' : this.changeToolbarSaveState.bind(this)
                 },
                 'SearchDialog': {
                     'hide': _.bind(this.onSearchDlgHide, this),
@@ -305,6 +307,10 @@ define([
                 this.leftMenu.menuFile.hide();
         },
 
+        changeToolbarSaveState: function (state) {
+            this.leftMenu.menuFile.getButton('save').setDisabled(state);
+        },
+
         /** coauthoring begin **/
         clickStatusbarUsers: function() {
             this.leftMenu.menuFile.panels['rights'].changeAccessRights();

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

@@ -292,13 +292,16 @@ define([
                 this.plugins                    = this.editorConfig.plugins;
 
                 appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header');
-                appHeader.setCanBack(this.appOptions.canBackToFolder === true, (this.appOptions.canBackToFolder) ? this.editorConfig.customization.goback.text : '');
+                appHeader.setCanBack(this.appOptions.canBackToFolder === true, (this.appOptions.canBackToFolder) ? this.editorConfig.customization.goback.text : '')
+                            .setUserName(this.appOptions.user.fullname);
 
                 if (this.editorConfig.lang)
                     this.api.asc_setLocale(this.editorConfig.lang);
 
                 if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
                     Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
+
+                Common.Controllers.Desktop.init(this.appOptions);
             },
 
             loadDocument: function(data) {
@@ -397,18 +400,20 @@ define([
             },
 
             goBack: function() {
-                 var href = this.appOptions.customization.goback.url;
-                 if (this.appOptions.customization.goback.blank!==false) {
-                     window.open(href, "_blank");
-                 } else {
-                     parent.location.href = href;
-                 }
+                var me = this;
+                if ( !Common.Controllers.Desktop.process('goback') ) {
+                    var href = me.appOptions.customization.goback.url;
+                    if (me.appOptions.customization.goback.blank!==false) {
+                        window.open(href, "_blank");
+                    } else {
+                        parent.location.href = href;
+                    }
+                }
              },
 
             onEditComplete: function(cmp) {
                 var application = this.getApplication(),
-                    toolbarController = application.getController('Toolbar'),
-                    toolbarView = toolbarController.getView('Toolbar');
+                    toolbarView = application.getController('Toolbar').getView('Toolbar');
 
                 application.getController('DocumentHolder').getView('DocumentHolder').focus();
                 if (this.api && this.api.asc_isDocumentCanSave) {
@@ -416,12 +421,7 @@ define([
                         forcesave = this.appOptions.forcesave,
                         isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
                         isDisabled = !cansave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (toolbarView.btnSave.isDisabled() !== isDisabled)
-                        toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
 
@@ -1264,28 +1264,16 @@ define([
                     var isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
                         forcesave = this.appOptions.forcesave,
                         isDisabled = !isModified && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (toolbarView.btnSave.isDisabled() !== isDisabled)
-                        toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
             onDocumentCanSaveChanged: function (isCanSave) {
-                var application = this.getApplication(),
-                    toolbarController = application.getController('Toolbar'),
-                    toolbarView = toolbarController.getView('Toolbar');
-                if (toolbarView) {
+                var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar');
+                if ( toolbarView ) {
                     var isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
                         forcesave = this.appOptions.forcesave,
                         isDisabled = !isCanSave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (toolbarView.btnSave.isDisabled() !== isDisabled)
-                        toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
 

apps/presentationeditor/main/app/controller/Statusbar.js

@@ -56,12 +56,22 @@ define([
         ],
 
         initialize: function() {
+            var me = this;
             this.addListeners({
                 'FileMenu': {
                     'settings:apply': _.bind(this.applySettings, this)
                 },
                 'Statusbar': {
                     'langchanged': this.onLangMenu
+                },
+                'Common.Views.Header': {
+                    'statusbar:hide': function (view, status) {
+                        me.statusbar.setVisible(!status);
+                        Common.localStorage.setBool('pe-hidden-status', status);
+
+                        Common.NotificationCenter.trigger('layout:changed', 'status');
+                        Common.NotificationCenter.trigger('edit:complete', this.statusbar);
+                    }
                 }
             });
             this._state = {

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

@@ -129,10 +129,16 @@ define([
                     'menu:show': this.onFileMenu.bind(this, 'show')
                 },
                 'Common.Views.Header': {
+                    'toolbar:setcompact': this.onChangeCompactView.bind(this),
                     'print': function (opts) {
                         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,
@@ -212,10 +218,14 @@ define([
         },
 
         onLaunch: function() {
-            // Create toolbar view
-            this.toolbar = this.createView('Toolbar');
-
             var me = this;
+
+            // Create toolbar view
+            me.toolbar = me.createView('Toolbar');
+            me.toolbar.btnSave.on('disabled', _.bind(this.onBtnChangeState, this, 'save:disabled'));
+            me.toolbar.btnUndo.on('disabled', _.bind(this.onBtnChangeState, this, 'undo:disabled'));
+            me.toolbar.btnRedo.on('disabled', _.bind(this.onBtnChangeState, this, 'redo:disabled'));
+
             Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
             Common.NotificationCenter.on('app:face', me.onAppShowed.bind(me));
 
@@ -284,18 +294,10 @@ define([
             toolbar.btnInsertTable.menu.on('item:click',                _.bind(this.onInsertTableClick, this));
             toolbar.btnClearStyle.on('click',                           _.bind(this.onClearStyleClick, this));
             toolbar.btnCopyStyle.on('toggle',                           _.bind(this.onCopyStyleToggle, this));
-            toolbar.btnAdvSettings.on('click',                          _.bind(this.onAdvSettingsClick, this));
             toolbar.btnColorSchemas.menu.on('item:click',               _.bind(this.onColorSchemaClick, this));
             toolbar.btnSlideSize.menu.on('item:click',                  _.bind(this.onSlideSize, this));
             toolbar.mnuInsertChartPicker.on('item:click',               _.bind(this.onSelectChart, this));
             toolbar.listTheme.on('click',                               _.bind(this.onListThemeSelect, this));
-            toolbar.mnuitemHideStatusBar.on('toggle',                   _.bind(this.onHideStatusBar, this));
-            toolbar.mnuitemHideRulers.on('toggle',                      _.bind(this.onHideRulers, this));
-            toolbar.mnuitemCompactToolbar.on('toggle',                  _.bind(this.onChangeCompactView, this));
-            toolbar.btnFitPage.on('toggle',                             _.bind(this.onZoomToPageToggle, this));
-            toolbar.btnFitWidth.on('toggle',                            _.bind(this.onZoomToWidthToggle, this));
-            toolbar.mnuZoomIn.on('click',                               _.bind(this.onZoomInClick, this));
-            toolbar.mnuZoomOut.on('click',                              _.bind(this.onZoomOutClick, this));
             toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
         },
 
@@ -360,7 +362,6 @@ define([
                 var me = this;
                 Common.Utils.asyncCall(function () {
                     me.onChangeCompactView(null, !me.toolbar.isCompact());
-                    me.toolbar.mnuitemCompactToolbar.setChecked(me.toolbar.isCompact(), true);
                 });
             }
         },
@@ -505,14 +506,9 @@ define([
                     btnHorizontalAlign.menu.clearAll();
                 }
 
-                if (btnHorizontalAlign.rendered) {
-                    var iconEl = $('.icon', btnHorizontalAlign.cmpEl);
-
-                    if (iconEl) {
-                        iconEl.removeClass(btnHorizontalAlign.options.icls);
-                        btnHorizontalAlign.options.icls = align;
-                        iconEl.addClass(btnHorizontalAlign.options.icls);
-                    }
+                if ( btnHorizontalAlign.rendered && btnHorizontalAlign.$icon ) {
+                    btnHorizontalAlign.$icon.removeClass(btnHorizontalAlign.options.icls).addClass(align);
+                    btnHorizontalAlign.options.icls = align;
                 }
             }
         },
@@ -538,14 +534,9 @@ define([
                     btnVerticalAlign.menu.clearAll();
                 }
 
-                if (btnVerticalAlign.rendered) {
-                    var iconEl = $('.icon', btnVerticalAlign.cmpEl);
-
-                    if (iconEl) {
-                        iconEl.removeClass(btnVerticalAlign.options.icls);
-                        btnVerticalAlign.options.icls = align;
-                        iconEl.addClass(btnVerticalAlign.options.icls);
-                    }
+                if ( btnVerticalAlign.rendered && btnVerticalAlign.$icon ) {
+                    btnVerticalAlign.$icon.removeClass(btnVerticalAlign.options.icls).addClass(align);
+                    btnVerticalAlign.options.icls = align;
                 }
             }
         },
@@ -776,18 +767,7 @@ define([
             this.editMode = false;
         },
 
-        onApiZoomChange: function(percent, type) {
-            if (this._state.zoom_type !== type) {
-                this.toolbar.btnFitPage.setChecked(type == 2, true);
-                this.toolbar.btnFitWidth.setChecked(type == 1, true);
-                this._state.zoom_type = type;
-            }
-            if (this._state.zoom_percent !== percent) {
-                $('.menu-zoom .zoom', this.toolbar.el).html(percent + '%');
-                this._state.zoom_percent = percent;
-            }
-            this.toolbar.mnuZoom.options.value = percent;
-        },
+        onApiZoomChange: function(percent, type) {},
 
         onApiInitEditorStyles: function(themes) {
             if (themes) {
@@ -903,24 +883,27 @@ define([
             var toolbar = this.toolbar;
             if (this.api && this.api.asc_isDocumentCanSave) {
                 var isModified = this.api.asc_isDocumentCanSave();
-                var isSyncButton = $('.icon', this.toolbar.btnSave.cmpEl).hasClass('btn-synch');
+                var isSyncButton = this.toolbar.btnCollabChanges.$icon.hasClass('btn-synch');
                 if (!isModified && !isSyncButton && !this.toolbar.mode.forcesave)
                     return;
 
                 this.api.asc_Save();
             }
 
-            toolbar.btnsSave.forEach(function(button) {
-                if ( button ) {
-                    button.setDisabled(!toolbar.mode.forcesave);
-                }
-            });
+            toolbar.btnsSave.setDisabled(!toolbar.mode.forcesave);
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             Common.component.Analytics.trackEvent('Save');
             Common.component.Analytics.trackEvent('ToolBar', 'Save');
         },
 
+        onBtnChangeState: function(prop) {
+            if ( /\:disabled$/.test(prop) ) {
+                var _is_disabled = arguments[2];
+                this.toolbar.fireEvent(prop, [_is_disabled]);
+            }
+        },
+
         onUndo: function(btn, e) {
             if (this.api) {
                 this.api.Undo();
@@ -1034,14 +1017,11 @@ define([
 
         onMenuHorizontalAlignSelect: function(menu, item) {
             this._state.pralign = undefined;
-            var btnHorizontalAlign = this.toolbar.btnHorizontalAlign,
-                iconEl = $('.icon', btnHorizontalAlign.cmpEl);
+            var btnHorizontalAlign = this.toolbar.btnHorizontalAlign;
 
-            if (iconEl) {
-                iconEl.removeClass(btnHorizontalAlign.options.icls);
-                btnHorizontalAlign.options.icls = !item.checked ? 'btn-align-left' : item.options.icls;
-                iconEl.addClass(btnHorizontalAlign.options.icls);
-            }
+            btnHorizontalAlign.$icon.removeClass(btnHorizontalAlign.options.icls);
+            btnHorizontalAlign.options.icls = !item.checked ? 'btn-align-left' : item.options.icls;
+            btnHorizontalAlign.$icon.addClass(btnHorizontalAlign.options.icls);
 
             if (this.api && item.checked)
                 this.api.put_PrAlign(item.value);
@@ -1051,14 +1031,11 @@ define([
         },
 
         onMenuVerticalAlignSelect: function(menu, item) {
-            var btnVerticalAlign = this.toolbar.btnVerticalAlign,
-                iconEl = $('.icon', btnVerticalAlign.cmpEl);
+            var btnVerticalAlign = this.toolbar.btnVerticalAlign;
 
-            if (iconEl) {
-                iconEl.removeClass(btnVerticalAlign.options.icls);
-                btnVerticalAlign.options.icls = !item.checked ? 'btn-align-middle' : item.options.icls;
-                iconEl.addClass(btnVerticalAlign.options.icls);
-            }
+            btnVerticalAlign.$icon.removeClass(btnVerticalAlign.options.icls);
+            btnVerticalAlign.options.icls = !item.checked ? 'btn-align-middle' : item.options.icls;
+            btnVerticalAlign.$icon.addClass(btnVerticalAlign.options.icls);
 
             this._state.vtextalign = undefined;
             if (this.api && item.checked)
@@ -1445,11 +1422,6 @@ define([
             this.modeAlwaysSetStyle = state;
         },
 
-        onAdvSettingsClick: function(btn, e) {
-            this.toolbar.fireEvent('file:settings', this);
-            btn.cmpEl.blur();
-        },
-
         onColorSchemaClick: function(menu, item) {
             if (this.api) {
                 this.api.ChangeColorScheme(item.value);
@@ -1563,69 +1535,6 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onHideStatusBar: function(item, checked) {
-            var headerView  = this.getApplication().getController('Statusbar').getView('Statusbar');
-            headerView  && headerView.setVisible(!checked);
-
-            Common.localStorage.setBool('pe-hidden-status', checked);
-
-            Common.NotificationCenter.trigger('layout:changed', 'status');
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onHideRulers: function(item, checked) {
-            if (this.api) {
-                this.api.asc_SetViewRulers(!checked);
-            }
-
-            Common.localStorage.setBool('pe-hidden-rulers', checked);
-
-            Common.NotificationCenter.trigger('layout:changed', 'rulers');
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomToPageToggle: function(item, state) {
-            if (this.api) {
-                this._state.zoom_type = undefined;
-                this._state.zoom_percent = undefined;
-                if (state)
-                    this.api.zoomFitToPage();
-                else
-                    this.api.zoomCustomMode();
-            }
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomToWidthToggle: function(item, state) {
-            if (this.api) {
-                this._state.zoom_type = undefined;
-                this._state.zoom_percent = undefined;
-                if (state)
-                    this.api.zoomFitToWidth();
-                else
-                    this.api.zoomCustomMode();
-            }
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomInClick: function(btn) {
-            this._state.zoom_type = undefined;
-            this._state.zoom_percent = undefined;
-            if (this.api)
-                this.api.zoomIn();
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomOutClick: function(btn) {
-            this._state.zoom_type = undefined;
-            this._state.zoom_percent = undefined;
-            if (this.api)
-                this.api.zoomOut();
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
         _clearBullets: function() {
             this.toolbar.btnMarkers.toggle(false, true);
             this.toolbar.btnNumbers.toggle(false, true);
@@ -2086,11 +1995,23 @@ define([
                 if ( $panel )
                     me.toolbar.addTab(tab, $panel, 3);
 
-                if (config.isDesktopApp && config.isOffline) {
-                    tab = {action: 'protect', caption: me.toolbar.textTabProtect};
-                    $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
-                    if ( $panel )
-                        me.toolbar.addTab(tab, $panel, 4);
+                if ( config.isDesktopApp ) {
+                    // hide 'print' and 'save' buttons group and next separator
+                    me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
+
+                    // hide 'undo' and 'redo' buttons and get container
+                    var $box =  me.toolbar.btnUndo.$el.hide().next().hide().parent();
+
+                    // move 'paste' button to the container instead of 'undo' and 'redo'
+                    me.toolbar.btnPaste.$el.detach().appendTo($box);
+                    me.toolbar.btnCopy.$el.removeClass('split');
+
+                    if ( config.isOffline ) {
+                        tab = {action: 'protect', caption: me.toolbar.textTabProtect};
+                        $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
+                        if ($panel)
+                            me.toolbar.addTab(tab, $panel, 4);
+                    }
                 }
             }
         },

apps/presentationeditor/main/app/controller/Viewport.js

@@ -49,7 +49,7 @@ define([
 ], function (Viewport) {
     'use strict';
 
-    PE.Controllers.Viewport = Backbone.Controller.extend({
+    PE.Controllers.Viewport = Backbone.Controller.extend(_.assign({
         // Specifying a Viewport model
         models: [],
 
@@ -69,6 +69,10 @@ define([
 
             // This most important part when we will tell our controller what events should be handled
             this.addListeners({
+                'FileMenu': {
+                    'menu:hide': me.onFileMenu.bind(me, 'hide'),
+                    'menu:show': me.onFileMenu.bind(me, 'show')
+                },
                 'Toolbar': {
                     'render:before' : function (toolbar) {
                         var config = PE.getController('Main').appOptions;
@@ -76,7 +80,26 @@ define([
                         toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
+                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                            Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
+                    },
+                    'undo:disabled' : function (state) {
+                        if ( me.header.btnUndo ) {
+                            if ( me.header.btnUndo.keepState )
+                                me.header.btnUndo.keepState.disabled = state;
+                            else me.header.btnUndo.setDisabled(state);
+                        }
+                    },
+                    'redo:disabled' : function (state) {
+                        if ( me.header.btnRedo ) {
+                            if ( me.header.btnRedo.keepState )
+                                me.header.btnRedo.keepState.disabled = state;
+                            else me.header.btnRedo.setDisabled(state);
+                        }
+                    },
+                    'save:disabled' : function (state) {
+                        if ( me.header.btnSave )
+                            me.header.btnSave.setDisabled(state);
                     }
                 },
                 // Events generated by main view
@@ -89,6 +112,7 @@ define([
 
         setApi: function(api) {
             this.api = api;
+            this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
         },
 
 
@@ -111,20 +135,152 @@ define([
                 Common.localStorage.setItem('pe-mainmenu-width',leftPanel.width());
             }, this);
 
+            this.header.mnuitemFitPage = this.header.fakeMenuItem();
+            this.header.mnuitemFitWidth = this.header.fakeMenuItem();
+
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
+            Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
         },
 
         onAppShowed: function (config) {
             var me = this;
+            me.appConfig = config;
+
+            var _intvars = Common.Utils.InternalSettings;
+            var $filemenu = $('.toolbar-fullview-panel');
+            $filemenu.css('top', _intvars.get('toolbar-height-tabs'));
 
             if ( !config.isEdit ||
                 ( !Common.localStorage.itemExists("pe-compact-toolbar") &&
                     config.customization && config.customization.compactToolbar ))
             {
-                me.viewport.vlayout.panels[0].height = 32;
+                me.viewport.vlayout.getItem('toolbar').height = _intvars.get('toolbar-height-compact');
+            }
+
+            if ( config.isDesktopApp && config.isEdit ) {
+                var $title = me.viewport.vlayout.getItem('title').el;
+                $title.html(me.header.getPanel('title', config)).show();
+
+                var toolbar = me.viewport.vlayout.getItem('toolbar');
+                toolbar.el.addClass('top-title');
+                toolbar.height -= _intvars.get('toolbar-height-tabs') - _intvars.get('toolbar-height-tabs-top-title');
+
+                var _tabs_new_height = _intvars.get('toolbar-height-tabs-top-title');
+                _intvars.set('toolbar-height-tabs', _tabs_new_height);
+                _intvars.set('toolbar-height-compact', _tabs_new_height);
+                _intvars.set('toolbar-height-normal', _tabs_new_height + _intvars.get('toolbar-height-controls'));
+
+                $filemenu.css('top', _tabs_new_height + _intvars.get('document-title-height'));
+
+                toolbar = me.getApplication().getController('Toolbar').getView('Toolbar');
+                toolbar.btnCollabChanges = me.header.btnSave;
             }
         },
 
+        onAppReady: function (config) {
+            var me = this;
+            if ( me.header.btnOptions ) {
+                var compactview = !config.isEdit;
+                if ( config.isEdit ) {
+                    if ( Common.localStorage.itemExists("pe-compact-toolbar") ) {
+                        compactview = Common.localStorage.getBool("pe-compact-toolbar");
+                    } else
+                    if ( config.customization && config.customization.compactToolbar )
+                        compactview = true;
+                }
+
+                me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
+                    caption: me.header.textCompactView,
+                    checked: compactview,
+                    checkable: true,
+                    value: 'toolbar'
+                });
+
+                var mnuitemHideStatusBar = new Common.UI.MenuItem({
+                    caption: me.header.textHideStatusBar,
+                    checked: Common.localStorage.getBool("pe-hidden-status"),
+                    checkable: true,
+                    value: 'statusbar'
+                });
+
+                if ( config.canBrandingExt && config.customization && config.customization.statusBar === false )
+                    mnuitemHideStatusBar.hide();
+
+                var mnuitemHideRulers = new Common.UI.MenuItem({
+                    caption: me.header.textHideLines,
+                    checked: Common.localStorage.getBool("pe-hidden-rulers"),
+                    checkable: true,
+                    value: 'rulers'
+                });
+
+                me.header.mnuitemFitPage = new Common.UI.MenuItem({
+                    caption: me.textFitPage,
+                    checkable: true,
+                    checked: me.header.mnuitemFitPage.isChecked(),
+                    value: 'zoom:page'
+                });
+
+                me.header.mnuitemFitWidth = new Common.UI.MenuItem({
+                    caption: me.textFitWidth,
+                    checkable: true,
+                    checked: me.header.mnuitemFitWidth.isChecked(),
+                    value: 'zoom:width'
+                });
+
+                me.header.mnuZoom = new Common.UI.MenuItem({
+                    template: _.template([
+                        '<div id="hdr-menu-zoom" class="menu-zoom" style="height: 25px;" ',
+                            '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                'data-stopPropagation="true"',
+                            '<% } %>', '>',
+                            '<label class="title">' + me.header.textZoom + '</label>',
+                            '<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon btn-zoomin">&nbsp;</i></button>',
+                            '<label class="zoom"><%= options.value %>%</label>',
+                            '<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon btn-zoomout">&nbsp;</i></button>',
+                        '</div>'
+                    ].join('')),
+                    stopPropagation: true,
+                    value: me.header.mnuZoom.options.value
+                });
+
+                me.header.btnOptions.setMenu(new Common.UI.Menu({
+                        cls: 'pull-right',
+                        style: 'min-width: 180px;',
+                        items: [
+                            me.header.mnuitemCompactToolbar,
+                            mnuitemHideStatusBar,
+                            mnuitemHideRulers,
+                            {caption:'--'},
+                            me.header.mnuitemFitPage,
+                            me.header.mnuitemFitWidth,
+                            me.header.mnuZoom,
+                            {caption:'--'},
+                            new Common.UI.MenuItem({
+                                caption: me.header.textAdvSettings,
+                                value: 'advanced'
+                            })
+                        ]
+                    })
+                );
+
+                var _on_btn_zoom = function (btn) {
+                    btn == 'up' ? me.api.zoomIn() : me.api.zoomOut();
+                    Common.NotificationCenter.trigger('edit:complete', me.header);
+                };
+
+                (new Common.UI.Button({
+                    el      : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
+                    cls     : 'btn-toolbar'
+                })).on('click', _on_btn_zoom.bind(me, 'down'));
+
+                (new Common.UI.Button({
+                    el      : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
+                    cls     : 'btn-toolbar'
+                })).on('click', _on_btn_zoom.bind(me, 'up'));
+
+                me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
+            }
+        },
 
         onLayoutChanged: function(area) {
             switch (area) {
@@ -201,6 +357,51 @@ define([
                     element.msRequestFullscreen();
                 }
             }
-        }
-    });
+        },
+
+        onFileMenu: function (opts) {
+            var me = this;
+            var _need_disable =  opts == 'show';
+
+            me.header.lockHeaderBtns( 'undo', _need_disable );
+            me.header.lockHeaderBtns( 'redo', _need_disable );
+            me.header.lockHeaderBtns( 'opts', _need_disable );
+        },
+
+        onApiZoomChange: function(percent, type) {
+            this.header.mnuitemFitPage.setChecked(type == 2, true);
+            this.header.mnuitemFitWidth.setChecked(type == 1, true);
+            this.header.mnuZoom.options.value = percent;
+
+            if ( this.header.mnuZoom.$el )
+                $('.menu-zoom label.zoom', this.header.mnuZoom.$el).html(percent + '%');
+        },
+
+        onOptionsItemClick: function (menu, item, e) {
+            var me = this;
+
+            switch ( item.value ) {
+            case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
+            case 'statusbar': me.header.fireEvent('statusbar:hide', [item, item.isChecked()]); break;
+            case 'rulers':
+                me.api.asc_SetViewRulers(!item.isChecked());
+                Common.localStorage.setBool('pe-hidden-rulers', item.isChecked());
+                Common.NotificationCenter.trigger('layout:changed', 'rulers');
+                Common.NotificationCenter.trigger('edit:complete', me.header);
+                break;
+            case 'zoom:page':
+                item.isChecked() ? me.api.zoomFitToPage() : me.api.zoomCustomMode();
+                Common.NotificationCenter.trigger('edit:complete', me.header);
+                break;
+            case 'zoom:width':
+                item.isChecked() ? me.api.zoomFitToWidth() : me.api.zoomCustomMode();
+                Common.NotificationCenter.trigger('edit:complete', me.header);
+                break;
+            case 'advanced': me.header.fireEvent('file:settings', me.header); break;
+            }
+        },
+
+        textFitPage: 'Fit to Page',
+        textFitWidth: 'Fit to Width'
+    }, PE.Controllers.Viewport));
 });

apps/presentationeditor/main/app/template/Toolbar.template

@@ -8,7 +8,6 @@
             <ul>
                 <% for(var i in tabs) { %>
                     <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
-                        <div class="tab-bg" />
                         <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                     </li>
                 <% } %>
@@ -111,16 +110,7 @@
                         <span class="btn-slot split" id="slot-btn-slidesize"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 140px;">
-                </div>
-                <div class="group no-mask">
-                    <div class="elset">
-                        <span class="btn-slot split" id="slot-btn-hidebars"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot" id="slot-btn-settings"></span>
-                    </div>
-                </div>
+                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 140px;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">

apps/presentationeditor/main/app/template/Viewport.template

@@ -4,6 +4,7 @@
         <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
     </section>
     <div id="viewport-vbox-layout" class="layout-ct vbox">
+        <section id="app-title" class="layout-item"></section>
         <div id="toolbar" class="layout-item"></div>
         <div class="layout-item middle">
             <div id="viewport-hbox-layout" class="layout-ct hbox">

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

@@ -83,45 +83,6 @@ define([
         commentLock: 'can-comment'
     };
 
-    var buttonsArray = function (opts) {
-        var arr = [];
-        arr.push.apply(arr, arguments);
-        arr.__proto__ = buttonsArray.prototype;
-        return arr;
-    };
-
-    buttonsArray.prototype = new Array;
-
-    buttonsArray.prototype.disable = function (state) {
-        this.forEach(function(btn) {
-            btn.setDisabled(state);
-        });
-    };
-
-    buttonsArray.prototype.toggle = function (state, suppress) {
-        this.forEach(function(btn) {
-            btn.toggle(state, suppress);
-        });
-    };
-
-    buttonsArray.prototype.pressed = function () {
-        return this.some(function(btn) {
-            return btn.pressed;
-        });
-    };
-
-    buttonsArray.prototype.on = function (event, func) {
-        this.forEach(function(btn) {
-            btn.on.apply(btn, arguments);
-        });
-    };
-
-    buttonsArray.prototype.contains = function (id) {
-        return this.some(function(btn) {
-            return btn.id == id;
-        });
-    };
-
     PE.Views.Toolbar =  Common.UI.Mixtbar.extend(_.extend((function(){
 
         return {
@@ -209,15 +170,17 @@ define([
                     id          : 'id-toolbar-btn-save',
                     cls         : 'btn-toolbar',
                     iconCls     : 'no-mask ' + me.btnSaveCls,
-                    lock        : [_set.lostConnect]
+                    lock        : [_set.lostConnect],
+                    signals     : ['disabled']
                 });
-                me.btnsSave = [me.btnSave];
+                me.btnCollabChanges = me.btnSave;
 
                 me.btnUndo = new Common.UI.Button({
                     id          : 'id-toolbar-btn-undo',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-undo',
-                    lock        : [_set.undoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart]
+                    lock        : [_set.undoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
+                    signals     : ['disabled']
                 });
                 me.slideOnlyControls.push(me.btnUndo);
 
@@ -225,7 +188,8 @@ define([
                     id          : 'id-toolbar-btn-redo',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-redo',
-                    lock        : [_set.redoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart]
+                    lock        : [_set.redoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
+                    signals     : ['disabled']
                 });
                 me.slideOnlyControls.push(me.btnRedo);
 
@@ -612,31 +576,6 @@ define([
                 });
                 me.slideOnlyControls.push(me.btnColorSchemas);
 
-                me.btnHide = new Common.UI.Button({
-                    id          : 'id-toolbar-btn-hidebars',
-                    cls         : 'btn-toolbar',
-                    iconCls     : 'btn-hidebars no-mask',
-                    lock        : [_set.menuFileOpen, _set.slideDeleted, _set.disableOnStart],
-                    menu        : true
-                });
-                me.slideOnlyControls.push(me.btnHide);
-
-                this.btnFitPage = {
-                    conf: {checked:false},
-                    setChecked: function(val) { this.conf.checked = val;},
-                    isChecked: function () { return this.conf.checked; }
-                };
-                this.btnFitWidth = clone(this.btnFitPage);
-                this.mnuZoom = {options: {value: 100}};
-
-                me.btnAdvSettings = new Common.UI.Button({
-                    id          : 'id-toolbar-btn-settings',
-                    cls         : 'btn-toolbar',
-                    iconCls     : 'btn-settings no-mask',
-                    lock        : [_set.slideDeleted, _set.disableOnStart]
-                });
-                me.slideOnlyControls.push(me.btnAdvSettings);
-
                 me.btnShapeAlign = new Common.UI.Button({
                     id          : 'id-toolbar-btn-shape-align',
                     cls         : 'btn-toolbar',
@@ -911,9 +850,9 @@ define([
                     }
                 });
 
+                me.setTab('home');
                 if ( me.isCompactView )
-                    me.setFolded(true); else
-                    me.setTab('home');
+                    me.setFolded(true);
 
                 return this;
             },
@@ -979,11 +918,9 @@ define([
                 _injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
                 _injectComponent('#slot-btn-slidesize', this.btnSlideSize);
                 _injectComponent('#slot-field-styles', this.listTheme);
-                _injectComponent('#slot-btn-hidebars', this.btnHide);
-                _injectComponent('#slot-btn-settings', this.btnAdvSettings);
 
                 function _injectBtns(opts) {
-                    var array = new buttonsArray;
+                    var array = createButtonSet();
                     var $slots = $host.find(opts.slot);
                     var id = opts.btnconfig.id;
                     $slots.each(function(index, el) {
@@ -992,7 +929,7 @@ define([
                         var button = new Common.UI.Button(opts.btnconfig);
                         button.render( $slots.eq(index) );
 
-                        array.push(button);
+                        array.add(button);
                     });
 
                     return array;
@@ -1141,8 +1078,6 @@ define([
                 this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
                 this.btnInsertTextArt.updateHint(this.tipInsertTextArt);
                 this.btnColorSchemas.updateHint(this.tipColorSchemas);
-                this.btnHide.updateHint(this.tipViewSettings);
-                this.btnAdvSettings.updateHint(this.tipAdvSettings);
                 this.btnShapeAlign.updateHint(this.tipShapeAlign);
                 this.btnShapeArrange.updateHint(this.tipShapeArrange);
                 this.btnSlideSize.updateHint(this.tipSlideSize);
@@ -1151,66 +1086,6 @@ define([
 
                 var me = this;
 
-                this.btnHide.setMenu(
-                    new Common.UI.Menu({
-                        cls: 'pull-right',
-                        style: 'min-width: 180px;',
-                        items: [
-                            this.mnuitemCompactToolbar = new Common.UI.MenuItem({
-                                caption: this.textCompactView,
-                                checkable: true,
-                                checked: me.isCompactView
-                            }),
-                            this.mnuitemHideStatusBar = new Common.UI.MenuItem({
-                                caption: this.textHideStatusBar,
-                                checkable: true
-                            }),
-                            this.mnuitemHideRulers = new Common.UI.MenuItem({
-                                caption: this.textHideLines,
-                                checkable: true
-                            }),
-                            {caption: '--'},
-                            this.btnFitPage = new Common.UI.MenuItem({
-                                caption: this.textFitPage,
-                                checkable: true,
-                                checked: this.btnFitPage.isChecked()
-                            }),
-                            this.btnFitWidth = new Common.UI.MenuItem({
-                                caption: this.textFitWidth,
-                                checkable: true,
-                                checked: this.btnFitWidth.isChecked()
-                            }),
-                            this.mnuZoom = new Common.UI.MenuItem({
-                                template: _.template([
-                                    '<div id="id-toolbar-menu-zoom" class="menu-zoom" style="height: 25px;" ',
-                                    '<% if(!_.isUndefined(options.stopPropagation)) { %>',
-                                    'data-stopPropagation="true"',
-                                    '<% } %>',
-                                    '>',
-                                    '<label class="title">' + this.textZoom + '</label>',
-                                    '<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon btn-zoomin"></i></button>',
-                                    '<label class="zoom"><%= options.value %>%</label>',
-                                    '<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon btn-zoomout"></i></button>',
-                                    '</div>'
-                                ].join('')),
-                                stopPropagation: true,
-                                value: this.mnuZoom.options.value
-                            })
-                        ]
-                    })
-                );
-                if (this.mode.canBrandingExt && this.mode.customization && this.mode.customization.statusBar === false)
-                    this.mnuitemHideStatusBar.hide();
-
-                this.mnuZoomOut = new Common.UI.Button({
-                    el: $('#id-menu-zoom-out'),
-                    cls: 'btn-toolbar'
-                });
-                this.mnuZoomIn = new Common.UI.Button({
-                    el: $('#id-menu-zoom-in'),
-                    cls: 'btn-toolbar'
-                });
-
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
                         style: 'min-width: 139px',
@@ -1375,19 +1250,9 @@ define([
                         me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
                 });
 
-                this.mnuitemHideStatusBar.setChecked(Common.localStorage.getBool('pe-hidden-status'), true);
-                this.mnuitemHideRulers.setChecked(Common.localStorage.getBool("pe-hidden-rulers", true), true);
-
 //            // Enable none paragraph components
                 this.lockToolbar(PE.enumLock.disableOnStart, false, {array: this.slideOnlyControls.concat(this.shapeControls)});
 
-                var btnsave = PE.getController('LeftMenu').getView('LeftMenu').getMenu('file').getButton('save');
-                if (btnsave && this.btnsSave) {
-                    this.btnsSave.push(btnsave);
-                    this.lockControls.push(btnsave);
-                    btnsave.setDisabled(this.btnsSave[0].isDisabled());
-                }
-
                 /** coauthoring begin **/
                 this.showSynchTip = !Common.localStorage.getBool('pe-hide-synch');
                 this.needShowSynchTip = false;
@@ -1511,7 +1376,7 @@ define([
             /** coauthoring begin **/
             onCollaborativeChanges: function () {
                 if (this._state.hasCollaborativeChanges) return;
-                if (!this.btnSave.rendered) {
+                if (!this.btnCollabChanges.rendered) {
                     this.needShowSynchTip = true;
                     return;
                 }
@@ -1523,59 +1388,47 @@ define([
                 }
 
                 this._state.hasCollaborativeChanges = true;
-                var iconEl = $('.icon', this.btnSave.cmpEl);
-                iconEl.removeClass(this.btnSaveCls);
-                iconEl.addClass('btn-synch');
+                this.btnCollabChanges.$icon.removeClass(this.btnSaveCls).addClass('btn-synch');
                 if (this.showSynchTip) {
-                    this.btnSave.updateHint('');
+                    this.btnCollabChanges.updateHint('');
                     if (this.synchTooltip === undefined)
                         this.createSynchTip();
 
                     this.synchTooltip.show();
                 } else {
-                    this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                    this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                 }
 
-                this.btnsSave.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(false);
-                    }
-                });
+                this.btnSave.setDisabled(false);
                 Common.Gateway.collaborativeChanges();
             },
 
             createSynchTip: function () {
                 this.synchTooltip = new Common.UI.SynchronizeTip({
-                    target: $('#id-toolbar-btn-save')
+                    target: this.btnCollabChanges.$el
                 });
                 this.synchTooltip.on('dontshowclick', function () {
                     this.showSynchTip = false;
                     this.synchTooltip.hide();
-                    this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                    this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                     Common.localStorage.setItem("pe-hide-synch", 1);
                 }, this);
                 this.synchTooltip.on('closeclick', function () {
                     this.synchTooltip.hide();
-                    this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                    this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                 }, this);
             },
 
             synchronizeChanges: function () {
-                if (this.btnSave.rendered) {
-                    var iconEl = $('.icon', this.btnSave.cmpEl),
-                        me = this;
+                if (this.btnCollabChanges.rendered) {
+                    var me = this;
 
-                    if (iconEl.hasClass('btn-synch')) {
-                        iconEl.removeClass('btn-synch');
-                        iconEl.addClass(this.btnSaveCls);
+                    if ( me.btnCollabChanges.$icon.hasClass('btn-synch') ) {
+                        me.btnCollabChanges.$icon.removeClass('btn-synch').addClass(this.btnSaveCls);
                         if (this.synchTooltip)
                             this.synchTooltip.hide();
-                        this.btnSave.updateHint(this.btnSaveTip);
-                        this.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(!me.mode.forcesave);
-                            }
-                        });
+                        this.btnCollabChanges.updateHint(this.btnSaveTip);
+                        this.btnSave.setDisabled(!me.mode.forcesave);
 
                         this._state.hasCollaborativeChanges = false;
                     }
@@ -1591,14 +1444,12 @@ define([
 
                 var length = _.size(editusers);
                 var cls = (length > 1) ? 'btn-save-coauth' : 'btn-save';
-                if (cls !== this.btnSaveCls && this.btnSave.rendered) {
+                if (cls !== this.btnSaveCls && this.btnCollabChanges.rendered) {
                     this.btnSaveTip = ((length > 1) ? this.tipSaveCoauth : this.tipSave ) + Common.Utils.String.platformKey('Ctrl+S');
 
-                    var iconEl = $('.icon', this.btnSave.cmpEl);
-                    if (!iconEl.hasClass('btn-synch')) {
-                        iconEl.removeClass(this.btnSaveCls);
-                        iconEl.addClass(cls);
-                        this.btnSave.updateHint(this.btnSaveTip);
+                    if ( !this.btnCollabChanges.$icon.hasClass('btn-synch') ) {
+                        this.btnCollabChanges.$icon.removeClass(this.btnSaveCls).addClass(cls);
+                        this.btnCollabChanges.updateHint(this.btnSaveTip);
                     }
                     this.btnSaveCls = cls;
                 }
@@ -1804,15 +1655,6 @@ define([
             mniSlideWide: 'Widescreen (16:9)',
             mniSlideAdvanced: 'Advanced Settings',
             tipSlideSize: 'Select Slide Size',
-            tipViewSettings: 'View Settings',
-            tipAdvSettings: 'Advanced Settings',
-            textCompactView: 'Hide Toolbar',
-            textHideTitleBar: 'Hide Title Bar',
-            textHideStatusBar: 'Hide Status Bar',
-            textHideLines: 'Hide Rulers',
-            textFitPage: 'Fit to Slide',
-            textFitWidth: 'Fit to Width',
-            textZoom: 'Zoom',
             tipInsertChart: 'Insert Chart',
             textLine: 'Line',
             textColumn: 'Column',

apps/presentationeditor/main/app/view/Viewport.js

@@ -86,13 +86,19 @@ define([
             this.vlayout = new Common.UI.VBoxLayout({
                 box: $container,
                 items: [{
-                    el: items[0],
-                    height: Common.localStorage.getBool('pe-compact-toolbar') ? 32 : 32+67
+                    el: $container.find('> .layout-item#app-title').hide(),
+                    alias: 'title',
+                    height: Common.Utils.InternalSettings.get('document-title-height')
                 }, {
                     el: items[1],
-                    stretch: true
+                    alias: 'toolbar',
+                    height: Common.localStorage.getBool('pe-compact-toolbar') ?
+                        Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal')
                 }, {
                     el: items[2],
+                    stretch: true
+                }, {
+                    el: items[3],
                     height: 25
                 }]
             });

apps/presentationeditor/main/app_dev.js

@@ -181,6 +181,7 @@ require([
         'common/main/lib/controller/ExternalDiagramEditor'
         ,'common/main/lib/controller/ReviewChanges'
         ,'common/main/lib/controller/Protection'
+        ,'common/main/lib/controller/Desktop'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/presentationeditor/main/locale/en.json

@@ -92,6 +92,12 @@
   "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.textAdvSettings": "Advanced settings",
+  "Common.Views.Header.textCompactView": "Hide Toolbar",
+  "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
+  "Common.Views.Header.textZoom": "Zoom",
+  "Common.Views.Header.tipViewSettings": "View settings",
+  "Common.Views.Header.textHideLines": "Hide Rulers",
   "Common.Views.ImageFromUrlDialog.cancelButtonText": "Cancel",
   "Common.Views.ImageFromUrlDialog.okButtonText": "OK",
   "Common.Views.ImageFromUrlDialog.textUrl": "Paste an image URL:",
@@ -700,6 +706,8 @@
   "PE.Controllers.Toolbar.txtSymbol_vdots": "Vertical ellipsis",
   "PE.Controllers.Toolbar.txtSymbol_xsi": "Xi",
   "PE.Controllers.Toolbar.txtSymbol_zeta": "Zeta",
+  "PE.Controllers.Viewport.textFitPage": "Fit to Slide",
+  "PE.Controllers.Viewport.textFitWidth": "Fit to Width",
   "PE.Views.ChartSettings.textAdvanced": "Show advanced settings",
   "PE.Views.ChartSettings.textArea": "Area",
   "PE.Views.ChartSettings.textBar": "Bar",
@@ -1405,12 +1413,12 @@
   "PE.Views.Toolbar.textCancel": "Cancel",
   "PE.Views.Toolbar.textCharts": "Charts",
   "PE.Views.Toolbar.textColumn": "Column",
-  "PE.Views.Toolbar.textCompactView": "Hide Toolbar",
-  "PE.Views.Toolbar.textFitPage": "Fit to Slide",
-  "PE.Views.Toolbar.textFitWidth": "Fit to Width",
-  "PE.Views.Toolbar.textHideLines": "Hide Rulers",
-  "PE.Views.Toolbar.textHideStatusBar": "Hide Status Bar",
-  "PE.Views.Toolbar.textHideTitleBar": "Hide Title Bar",
+  "del_PE.Views.Toolbar.textCompactView": "Hide Toolbar",
+  "del_PE.Views.Toolbar.textFitPage": "Fit to Slide",
+  "del_PE.Views.Toolbar.textFitWidth": "Fit to Width",
+  "del_PE.Views.Toolbar.textHideLines": "Hide Rulers",
+  "del_PE.Views.Toolbar.textHideStatusBar": "Hide Status Bar",
+  "del_PE.Views.Toolbar.textHideTitleBar": "Hide Title Bar",
   "PE.Views.Toolbar.textItalic": "Italic",
   "PE.Views.Toolbar.textLine": "Line",
   "PE.Views.Toolbar.textNewColor": "Custom Color",
@@ -1439,9 +1447,9 @@
   "PE.Views.Toolbar.textTabProtect": "Protection",
   "PE.Views.Toolbar.textTitleError": "Error",
   "PE.Views.Toolbar.textUnderline": "Underline",
-  "PE.Views.Toolbar.textZoom": "Zoom",
+  "del_PE.Views.Toolbar.textZoom": "Zoom",
   "PE.Views.Toolbar.tipAddSlide": "Add slide",
-  "PE.Views.Toolbar.tipAdvSettings": "Advanced settings",
+  "del_PE.Views.Toolbar.tipAdvSettings": "Advanced settings",
   "PE.Views.Toolbar.tipBack": "Back",
   "PE.Views.Toolbar.tipChangeChart": "Change chart type",
   "PE.Views.Toolbar.tipChangeSlide": "Change slide layout",
@@ -1454,7 +1462,7 @@
   "PE.Views.Toolbar.tipFontName": "Font",
   "PE.Views.Toolbar.tipFontSize": "Font size",
   "PE.Views.Toolbar.tipHAligh": "Horizontal align",
-  "PE.Views.Toolbar.tipHideBars": "Hide Title bar & Status bar",
+  "del_PE.Views.Toolbar.tipHideBars": "Hide Title bar & Status bar",
   "PE.Views.Toolbar.tipIncPrLeft": "Increase indent",
   "PE.Views.Toolbar.tipInsertChart": "Insert chart",
   "PE.Views.Toolbar.tipInsertEquation": "Insert equation",

apps/spreadsheeteditor/main/app.js

@@ -196,6 +196,7 @@ require([
         'common/main/lib/controller/Plugins'
         ,'common/main/lib/controller/ReviewChanges'
         ,'common/main/lib/controller/Protection'
+        ,'common/main/lib/controller/Desktop'
     ], function() {
         app.start();
     });

apps/spreadsheeteditor/main/app/controller/CellEditor.js

@@ -67,6 +67,13 @@ define([
                 'CellEditor': {},
                 'Viewport': {
                     'layout:resizedrag': _.bind(this.onLayoutResize, this)
+                },
+                'Common.Views.Header': {
+                    'formulabar:hide': function (state) {
+                        this.editor.setVisible(!state);
+                        Common.localStorage.setBool('sse-hidden-formula', state);
+                        Common.NotificationCenter.trigger('layout:changed', 'celleditor', state?'hidden':'showed');
+                    }.bind(this)
                 }
             });
         },

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

@@ -55,6 +55,7 @@ define([
                     'hide':        _.bind(this.onHidePlugins, this)
                 },
                 'Common.Views.Header': {
+                    'file:settings': _.bind(this.clickToolbarSettings,this),
                     'click:users': _.bind(this.clickStatusbarUsers, this)
                 },
                 'LeftMenu': {
@@ -79,7 +80,8 @@ define([
                 'Toolbar': {
                     'file:settings': _.bind(this.clickToolbarSettings,this),
                     'file:open': this.clickToolbarTab.bind(this, 'file'),
-                    'file:close': this.clickToolbarTab.bind(this, 'other')
+                    'file:close': this.clickToolbarTab.bind(this, 'other'),
+                    'save:disabled' : this.changeToolbarSaveState.bind(this)
                 },
                 'SearchDialog': {
                     'hide': _.bind(this.onSearchDlgHide, this),
@@ -342,6 +344,10 @@ define([
                 this.leftMenu.menuFile.hide();
         },
 
+        changeToolbarSaveState: function (state) {
+            this.leftMenu.menuFile.getButton('save').setDisabled(state);
+        },
+
         /** coauthoring begin **/
         clickStatusbarUsers: function() {
             this.leftMenu.menuFile.panels['rights'].changeAccessRights();

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

@@ -307,7 +307,8 @@ define([
                 this.plugins                    = this.editorConfig.plugins;
 
                 this.headerView = this.getApplication().getController('Viewport').getView('Common.Views.Header');
-                this.headerView.setCanBack(this.appOptions.canBackToFolder === true, (this.appOptions.canBackToFolder) ? this.editorConfig.customization.goback.text : '');
+                this.headerView.setCanBack(this.appOptions.canBackToFolder === true, (this.appOptions.canBackToFolder) ? this.editorConfig.customization.goback.text : '')
+                                .setUserName(this.appOptions.user.fullname);
 
                 var value = Common.localStorage.getItem("sse-settings-reg-settings");
                 if (value!==null)
@@ -332,6 +333,7 @@ define([
                     Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
 
                 this.isFrameClosed = (this.appOptions.isEditDiagram || this.appOptions.isEditMailMerge);
+                Common.Controllers.Desktop.init(this.appOptions);
             },
 
             loadDocument: function(data) {
@@ -425,11 +427,14 @@ define([
             },
 
             goBack: function() {
-                var href = this.appOptions.customization.goback.url;
-                if (this.appOptions.customization.goback.blank!==false) {
-                    window.open(href, "_blank");
-                } else {
-                    parent.location.href = href;
+                var me = this;
+                if ( !Common.Controllers.Desktop.process('goback') ) {
+                    var href = me.appOptions.customization.goback.url;
+                    if (me.appOptions.customization.goback.blank!==false) {
+                        window.open(href, "_blank");
+                    } else {
+                        parent.location.href = href;
+                    }
                 }
             },
 
@@ -908,16 +913,12 @@ define([
             applyModeCommonElements: function() {
                 window.editor_elements_prepared = true;
 
-                var value = Common.localStorage.getItem("sse-hidden-title");
-                value = this.appOptions.isEdit && (value!==null && parseInt(value) == 1);
-
                 var app             = this.getApplication(),
                     viewport        = app.getController('Viewport').getView('Viewport'),
                     statusbarView   = app.getController('Statusbar').getView('Statusbar');
 
                 if (this.headerView) {
-                    this.headerView.setHeaderCaption(this.appOptions.isEdit ? 'Spreadsheet Editor' : 'Spreadsheet Viewer');
-                    this.headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isEditMailMerge && 
+                    this.headerView.setVisible(!this.appOptions.nativeApp && !this.appOptions.isEditMailMerge &&
                             !this.appOptions.isDesktopApp && !this.appOptions.isEditDiagram);
                 }
 
@@ -1413,12 +1414,7 @@ define([
                         forcesave = this.appOptions.forcesave,
                         cansave = this.api.asc_isDocumentCanSave(),
                         isDisabled = !cansave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (this.toolbarView.btnSave.isDisabled() !== isDisabled)
-                        this.toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                        this.toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
 
@@ -1427,12 +1423,7 @@ define([
                     var isSyncButton = $('.icon', this.toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
                         forcesave = this.appOptions.forcesave,
                         isDisabled = !isCanSave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave;
-                    if (this.toolbarView.btnSave.isDisabled() !== isDisabled)
-                        this.toolbarView.btnsSave.forEach(function(button) {
-                            if ( button ) {
-                                button.setDisabled(isDisabled);
-                            }
-                        });
+                    this.toolbarView.btnSave.setDisabled(isDisabled);
                 }
             },
 

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

@@ -80,10 +80,16 @@ define([
                     'settings:apply': _.bind(this.applyFormulaSettings, this)
                 },
                 'Common.Views.Header': {
+                    'toolbar:setcompact': this.onChangeViewMode.bind(this),
                     'print': function (opts) {
                         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.appOptions.spreadsheet.fileType,
@@ -242,8 +248,11 @@ define([
             } else {
                 toolbar.btnPrint.on('click',                                _.bind(this.onPrint, this));
                 toolbar.btnSave.on('click',                                 _.bind(this.onSave, this));
+                toolbar.btnSave.on('disabled',                              _.bind(this.onBtnChangeState, this, 'save:disabled'));
                 toolbar.btnUndo.on('click',                                 _.bind(this.onUndo, this));
+                toolbar.btnUndo.on('disabled',                              _.bind(this.onBtnChangeState, this, 'undo:disabled'));
                 toolbar.btnRedo.on('click',                                 _.bind(this.onRedo, this));
+                toolbar.btnRedo.on('disabled',                              _.bind(this.onBtnChangeState, this, 'redo:disabled'));
                 toolbar.btnCopy.on('click',                                 _.bind(this.onCopyPaste, this, true));
                 toolbar.btnPaste.on('click',                                _.bind(this.onCopyPaste, this, false));
                 toolbar.btnIncFontSize.on('click',                          _.bind(this.onIncreaseFontSize, this));
@@ -297,7 +306,6 @@ define([
                 toolbar.btnDecDecimal.on('click',                           _.bind(this.onDecrement, this));
                 toolbar.btnIncDecimal.on('click',                           _.bind(this.onIncrement, this));
                 toolbar.btnInsertFormula.on('click',                        _.bind(this.onInsertFormulaMenu, this));
-                toolbar.btnSettings.on('click',                             _.bind(this.onAdvSettingsClick, this));
                 toolbar.btnInsertFormula.menu.on('item:click',              _.bind(this.onInsertFormulaMenu, this));
                 toolbar.btnNamedRange.menu.on('item:click',                 _.bind(this.onNamedRangeMenu, this));
                 toolbar.btnNamedRange.menu.on('show:after',                 _.bind(this.onNamedRangeMenuOpen, this));
@@ -318,16 +326,12 @@ define([
                 toolbar.cmbFontSize.on('hide:after',                        _.bind(this.onHideMenus, this));
                 toolbar.cmbFontSize.on('combo:blur',                        _.bind(this.onComboBlur, this));
                 toolbar.cmbFontSize.on('combo:focusin',                     _.bind(this.onComboOpen, this, false));
-                if (toolbar.mnuZoomIn)  toolbar.mnuZoomIn.on('click',       _.bind(this.onZoomInClick, this));
-                if (toolbar.mnuZoomOut) toolbar.mnuZoomOut.on('click',      _.bind(this.onZoomOutClick, this));
-                if (toolbar.btnShowMode.rendered) toolbar.btnShowMode.menu.on('item:click', _.bind(this.onHideMenu, this));
                 toolbar.listStyles.on('click',                              _.bind(this.onListStyleSelect, this));
                 toolbar.cmbNumberFormat.on('selected',                      _.bind(this.onNumberFormatSelect, this));
                 toolbar.cmbNumberFormat.on('show:before',                   _.bind(this.onNumberFormatOpenBefore, this, true));
                 if (toolbar.cmbNumberFormat.cmpEl)
                     toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
                 toolbar.btnCurrencyStyle.menu.on('item:click',              _.bind(this.onNumberFormatMenu, this));
-                if (toolbar.mnuitemCompactToolbar) toolbar.mnuitemCompactToolbar.on('toggle', _.bind(this.onChangeViewMode, this));
                 $('#id-toolbar-menu-new-fontcolor').on('click',             _.bind(this.onNewTextColor, this));
                 $('#id-toolbar-menu-new-paracolor').on('click',             _.bind(this.onNewBackColor, this));
                 $('#id-toolbar-menu-new-bordercolor').on('click',           _.bind(this.onNewBorderColor, this));
@@ -378,7 +382,7 @@ define([
         onSave: function(e) {
             if (this.api) {
                 var isModified = this.api.asc_isDocumentCanSave();
-                var isSyncButton = $('.icon', this.toolbar.btnSave.cmpEl).hasClass('btn-synch');
+                var isSyncButton = this.toolbar.btnCollabChanges.$icon.hasClass('btn-synch');
                 if (!isModified && !isSyncButton && !this.toolbar.mode.forcesave)
                     return;
 
@@ -391,6 +395,13 @@ define([
             Common.component.Analytics.trackEvent('ToolBar', 'Save');
         },
 
+        onBtnChangeState: function(prop) {
+            if ( /\:disabled$/.test(prop) ) {
+                var _is_disabled = arguments[2];
+                this.toolbar.fireEvent(prop, [_is_disabled]);
+            }
+        },
+
         onUndo: function(btn, e) {
             if (this.api)
                 this.api.asc_Undo();
@@ -480,8 +491,7 @@ define([
         },
 
         onSubscriptMenu: function(menu, item) {
-            var btnSubscript = this.toolbar.btnSubscript,
-                iconEl = $('.icon', btnSubscript.cmpEl);
+            var btnSubscript = this.toolbar.btnSubscript;
 
             if (item.value == 'sub') {
                 this._state.subscript = undefined;
@@ -491,9 +501,8 @@ define([
                 this.api.asc_setCellSuperscript(item.checked);
             }
             if (item.checked) {
-                iconEl.removeClass(btnSubscript.options.icls);
+                btnSubscript.$icon.removeClass(btnSubscript.options.icls).addClass(item.options.icls);
                 btnSubscript.options.icls = item.options.icls;
-                iconEl.addClass(btnSubscript.options.icls);
             }
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
@@ -597,14 +606,9 @@ define([
                     bordersWidth = btnBorders.options.borderswidth,
                     bordersColor = btnBorders.options.borderscolor;
 
-                if (btnBorders.rendered) {
-                    var iconEl = $('.icon', btnBorders.cmpEl);
-
-                    if (iconEl) {
-                        iconEl.removeClass(btnBorders.options.icls);
-                        btnBorders.options.icls = item.options.icls;
-                        iconEl.addClass(btnBorders.options.icls);
-                    }
+                if ( btnBorders.rendered ) {
+                    btnBorders.$icon.removeClass(btnBorders.options.icls).addClass(item.options.icls);
+                    btnBorders.options.icls = item.options.icls;
                 }
 
                 btnBorders.options.borderId = item.options.borderId;
@@ -666,14 +670,11 @@ define([
         },
 
         onHorizontalAlignMenu: function(menu, item) {
-            var btnHorizontalAlign = this.toolbar.btnHorizontalAlign,
-                iconEl = $('.icon', btnHorizontalAlign.cmpEl);
+            var btnHorizontalAlign = this.toolbar.btnHorizontalAlign;
 
-            if (iconEl) {
-                iconEl.removeClass(btnHorizontalAlign.options.icls);
-                btnHorizontalAlign.options.icls = !item.checked ? 'btn-align-left' : item.options.icls;
-                iconEl.addClass(btnHorizontalAlign.options.icls);
-            }
+            btnHorizontalAlign.$icon.removeClass(btnHorizontalAlign.options.icls);
+            btnHorizontalAlign.options.icls = !item.checked ? 'btn-align-left' : item.options.icls;
+            btnHorizontalAlign.$icon.addClass(btnHorizontalAlign.options.icls);
 
             this._state.pralign = undefined;
             if (this.api)
@@ -686,14 +687,11 @@ define([
         },
 
         onVerticalAlignMenu: function(menu, item) {
-            var btnVerticalAlign = this.toolbar.btnVerticalAlign,
-                iconEl = $('.icon', btnVerticalAlign.cmpEl);
+            var btnVerticalAlign = this.toolbar.btnVerticalAlign;
 
-            if (iconEl) {
-                iconEl.removeClass(btnVerticalAlign.options.icls);
-                btnVerticalAlign.options.icls = !item.checked ? 'btn-valign-bottom' : item.options.icls;
-                iconEl.addClass(btnVerticalAlign.options.icls);
-            }
+            btnVerticalAlign.$icon.removeClass(btnVerticalAlign.options.icls);
+            btnVerticalAlign.options.icls = !item.checked ? 'btn-valign-bottom' : item.options.icls;
+            btnVerticalAlign.$icon.addClass(btnVerticalAlign.options.icls);
 
             this._state.valign = undefined;
             if (this.api)
@@ -1359,53 +1357,6 @@ define([
             }
         },
 
-        onAdvSettingsClick: function(btn, e) {
-            this.toolbar.fireEvent('file:settings', this);
-            btn.cmpEl.blur();
-        },
-
-        onZoomInClick: function(btn) {
-            if (this.api) {
-                var f = Math.floor(this.api.asc_getZoom() * 10)/10;
-                f += .1;
-                if (f > 0 && !(f > 2.)) {
-                    this.api.asc_setZoom(f);
-                }
-            }
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onZoomOutClick: function(btn) {
-            if (this.api) {
-                var f = Math.ceil(this.api.asc_getZoom() * 10)/10;
-                f -= .1;
-                if (!(f < .5)) {
-                    this.api.asc_setZoom(f);
-                }
-            }
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
-        onHideMenu: function(menu, item) {
-            var params = {},
-                option;
-
-            switch(item.value) {
-                case 'title':       params.title = item.checked;      option = 'sse-hidden-title';      break;
-                case 'formula':     params.formula = item.checked;    option = 'sse-hidden-formula';    break;
-                case 'headings':    params.headings = item.checked;   break;
-                case 'gridlines':   params.gridlines = item.checked;  break;
-                case 'freezepanes': params.freezepanes = item.checked;  break;
-            }
-
-            this.hideElements(params);
-            option && Common.localStorage.setBool(option, item.checked);
-
-            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
-        },
-
         onListStyleSelect: function(combo, record) {
             this._state.prstyle = undefined;
             if (this.api) {
@@ -1511,7 +1462,6 @@ define([
             if ( from != 'file' ) {
                 Common.Utils.asyncCall(function () {
                     this.onChangeViewMode(null, !this.toolbar.isCompact());
-                    this.toolbar.mnuitemCompactToolbar.setChecked(this.toolbar.isCompact(), true);
                 }, this);
             }
         },
@@ -1709,26 +1659,9 @@ define([
             this.checkInsertAutoshape({action:'cancel'});
         },
 
-        onApiZoomChange: function(zf, type){
-            switch (type) {
-                case 1: // FitWidth
-                case 2: // FitPage
-                case 0:
-                default: {
-                    this.toolbar.mnuZoom.options.value = Math.floor((zf + .005) * 100);
-                    $('.menu-zoom .zoom', this.toolbar.el).html(Math.floor((zf + .005) * 100) + '%');
-                }
-            }
-        },
+        onApiZoomChange: function(zf, type){},
 
-        onApiSheetChanged: function() {
-            if ( this.api && !this.appConfig.isEditDiagram && !this.appConfig.isEditMailMerge ) {
-                var params  = this.api.asc_getSheetViewSettings();
-                this.toolbar.mnuitemHideHeadings.setChecked(!params.asc_getShowRowColHeaders());
-                this.toolbar.mnuitemHideGridlines.setChecked(!params.asc_getShowGridLines());
-                this.toolbar.mnuitemFreezePanes.setChecked(params.asc_getIsFreezePane());
-            }
-        },
+        onApiSheetChanged: function() {},
 
         onApiEditorSelectionChanged: function(fontobj) {
             if (!this.editMode) return;
@@ -1777,13 +1710,10 @@ define([
                         btnSubscript.menu.clearAll();
                     } else {
                         btnSubscript.menu.items[index].setChecked(true);
-                        if (btnSubscript.rendered) {
-                            var iconEl = $('.icon', btnSubscript.cmpEl);
-                            if (iconEl) {
-                                iconEl.removeClass(btnSubscript.options.icls);
-                                btnSubscript.options.icls = btnSubscript.menu.items[index].options.icls;
-                                iconEl.addClass(btnSubscript.options.icls);
-                            }
+                        if ( btnSubscript.rendered && btnSubscript.$icon ) {
+                            btnSubscript.$icon.removeClass(btnSubscript.options.icls);
+                            btnSubscript.options.icls = btnSubscript.menu.items[index].options.icls;
+                            btnSubscript.$icon.addClass(btnSubscript.options.icls);
                         }
                     }
 
@@ -1918,13 +1848,10 @@ define([
                         btnSubscript.menu.clearAll();
                     } else {
                         btnSubscript.menu.items[index].setChecked(true);
-                        if (btnSubscript.rendered) {
-                            var iconEl = $('.icon', btnSubscript.cmpEl);
-                            if (iconEl) {
-                                iconEl.removeClass(btnSubscript.options.icls);
-                                btnSubscript.options.icls = btnSubscript.menu.items[index].options.icls;
-                                iconEl.addClass(btnSubscript.options.icls);
-                            }
+                        if ( btnSubscript.rendered ) {
+                            btnSubscript.$icon.removeClass(btnSubscript.options.icls);
+                            btnSubscript.options.icls = btnSubscript.menu.items[index].options.icls;
+                            btnSubscript.$icon.addClass(btnSubscript.options.icls);
                         }
                     }
 
@@ -2053,14 +1980,9 @@ define([
                         }
 
                         var btnHorizontalAlign = this.toolbar.btnHorizontalAlign;
-                        if (btnHorizontalAlign.rendered) {
-                            var hIconEl = $('.icon', btnHorizontalAlign.cmpEl);
-
-                            if (hIconEl) {
-                                hIconEl.removeClass(btnHorizontalAlign.options.icls);
-                                btnHorizontalAlign.options.icls = align;
-                                hIconEl.addClass(btnHorizontalAlign.options.icls);
-                            }
+                        if ( btnHorizontalAlign.rendered ) {
+                            btnHorizontalAlign.$icon.removeClass(btnHorizontalAlign.options.icls).addClass(align);
+                            btnHorizontalAlign.options.icls = align;
                         }
                     }
 
@@ -2088,14 +2010,9 @@ define([
                             toolbar.btnVerticalAlign.menu.items[index].setChecked(true, false);
 
                             var btnVerticalAlign = this.toolbar.btnVerticalAlign;
-                            if (btnVerticalAlign.rendered) {
-                                var vIconEl = $('.icon', btnVerticalAlign.cmpEl);
-
-                                if (vIconEl) {
-                                    vIconEl.removeClass(btnVerticalAlign.options.icls);
-                                    btnVerticalAlign.options.icls = align;
-                                    vIconEl.addClass(btnVerticalAlign.options.icls);
-                                }
+                            if ( btnVerticalAlign.rendered ) {
+                                btnVerticalAlign.$icon.removeClass(btnVerticalAlign.options.icls).addClass(align);
+                                btnVerticalAlign.options.icls = align;
                             }
                         }
                     }
@@ -2425,13 +2342,6 @@ define([
         },
 
         hideElements: function(opts) {
-            if (!_.isUndefined(opts.title)) {
-                var headerView  = this.getApplication().getController('Viewport').getView('Common.Views.Header');
-                headerView && headerView.setVisible(!opts.title);
-
-                Common.NotificationCenter.trigger('layout:changed', 'header');
-            }
-
             if (!_.isUndefined(opts.compact)) {
                 this.onChangeViewMode(opts.compact);
             }
@@ -2995,7 +2905,7 @@ define([
             var toolbar = this.toolbar;
             toolbar.$el.find('.toolbar').toggleClass('masked', disable);
 
-            this.toolbar.lockToolbar(SSE.enumLock.menuFileOpen, disable, {array: [toolbar.btnShowMode]});
+            this.toolbar.lockToolbar(SSE.enumLock.menuFileOpen, disable);
             if(disable) {
                 mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
                 Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h, command+1, ctrl+1');
@@ -3034,6 +2944,9 @@ define([
                 me.toolbar.setMode(config);
 
                 if ( config.isEdit ) {
+                    me.toolbar.btnSave && me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
+                    me.toolbar.btnUndo && me.toolbar.btnUndo.on('disabled', _.bind(me.onBtnChangeState, me, 'undo:disabled'));
+                    me.toolbar.btnRedo && me.toolbar.btnRedo.on('disabled', _.bind(me.onBtnChangeState, me, 'redo:disabled'));
                     me.toolbar.setApi(me.api);
 
                     if ( !config.isEditDiagram && !config.isEditMailMerge ) {
@@ -3049,11 +2962,23 @@ define([
                         if ( $panel )
                             me.toolbar.addTab(tab, $panel, 4);
 
-                        if (config.isDesktopApp && config.isOffline) {
-                            tab = {action: 'protect', caption: me.toolbar.textTabProtect};
-                            var $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
-                            if ( $panel )
-                                me.toolbar.addTab(tab, $panel, 5);
+                        if ( config.isDesktopApp ) {
+                            // hide 'print' and 'save' buttons group and next separator
+                            me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
+
+                            // hide 'undo' and 'redo' buttons and get container
+                            var $box =  me.toolbar.btnUndo.$el.hide().next().hide().parent();
+
+                            // move 'paste' button to the container instead of 'undo' and 'redo'
+                            me.toolbar.btnPaste.$el.detach().appendTo($box);
+                            me.toolbar.btnCopy.$el.removeClass('split');
+
+                            if ( config.isOffline ) {
+                                tab = {action: 'protect', caption: me.toolbar.textTabProtect};
+                                var $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
+                                if ($panel)
+                                    me.toolbar.addTab(tab, $panel, 5);
+                            }
                         }
                     }
                 }

apps/spreadsheeteditor/main/app/controller/Viewport.js

@@ -48,7 +48,7 @@ define([
 ], function (Viewport) {
     'use strict';
 
-    SSE.Controllers.Viewport = Backbone.Controller.extend({
+    SSE.Controllers.Viewport = Backbone.Controller.extend(_.assign({
         // Specifying a Viewport model
         models: [],
 
@@ -67,36 +67,212 @@ define([
 
             // This most important part when we will tell our controller what events should be handled
             this.addListeners({
+                'FileMenu': {
+                    'menu:hide': me.onFileMenu.bind(me, 'hide'),
+                    'menu:show': me.onFileMenu.bind(me, 'show')
+                },
+                'Statusbar': {
+                    'sheet:changed': me.onApiSheetChanged.bind(me)
+                },
                 'Toolbar': {
                     'render:before' : function (toolbar) {
                         var config = SSE.getController('Main').appOptions;
                         toolbar.setExtra('right', me.header.getPanel('right', config));
                         toolbar.setExtra('left', me.header.getPanel('left', config));
+
+                        if ( me.appConfig && me.appConfig.isDesktopApp &&
+                                me.appConfig.isEdit && toolbar.btnCollabChanges )
+                            toolbar.btnCollabChanges = me.header.btnSave;
+
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
+                        me.header.mnuitemCompactToolbar.setChecked(state, true);
+                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                            Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
+                    },
+                    'undo:disabled' : function (state) {
+                        if ( me.header.btnUndo ) {
+                            if ( me.header.btnUndo.keepState )
+                                me.header.btnUndo.keepState.disabled = state;
+                            else me.header.btnUndo.setDisabled(state);
+                        }
+                    },
+                    'redo:disabled' : function (state) {
+                        if ( me.header.btnRedo ) {
+                            if ( me.header.btnRedo.keepState )
+                                me.header.btnRedo.keepState.disabled = state;
+                            else me.header.btnRedo.setDisabled(state);
+                        }
+                    },
+                    'save:disabled' : function (state) {
+                        if ( me.header.btnSave )
+                            me.header.btnSave.setDisabled(state);
                     }
                 }
             });
 
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
+            Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            Common.NotificationCenter.on('cells:range', this.onCellsRange.bind(this));
         },
 
         setApi: function(api) {
             this.api = api;
+            this.api.asc_registerCallback('asc_onZoomChanged',              this.onApiZoomChange.bind(this));
+            this.api.asc_registerCallback('asc_onSheetsChanged',            this.onApiSheetChanged.bind(this));
+            this.api.asc_registerCallback('asc_onUpdateSheetViewSettings',  this.onApiSheetChanged.bind(this));
+            this.api.asc_registerCallback('asc_onEditCell',                 this.onApiEditCell.bind(this));
         },
 
         onAppShowed: function (config) {
             var me = this;
+            me.appConfig = config;
+
+            var _intvars = Common.Utils.InternalSettings;
+            var $filemenu = $('.toolbar-fullview-panel');
+            $filemenu.css('top', _intvars.get('toolbar-height-tabs'));
 
             if ( !config.isEdit ||
                     ( !Common.localStorage.itemExists("sse-compact-toolbar") &&
                         config.customization && config.customization.compactToolbar ))
             {
-                me.viewport.vlayout.panels[0].height = 32;
+                me.viewport.vlayout.getItem('toolbar').height = _intvars.get('toolbar-height-compact');
             } else
             if ( config.isEditDiagram || config.isEditMailMerge ) {
-                me.viewport.vlayout.panels[0].height = 41;
+                me.viewport.vlayout.getItem('toolbar').height = 41;
+            }
+
+            if ( config.isDesktopApp && config.isEdit && !config.isEditDiagram && !config.isEditMailMerge ) {
+                var $title = me.viewport.vlayout.getItem('title').el;
+                $title.html(me.header.getPanel('title', config)).show();
+
+                var toolbar = me.viewport.vlayout.getItem('toolbar');
+                toolbar.el.addClass('top-title');
+                toolbar.height -= _intvars.get('toolbar-height-tabs') - _intvars.get('toolbar-height-tabs-top-title');
+
+                var _tabs_new_height = _intvars.get('toolbar-height-tabs-top-title');
+                _intvars.set('toolbar-height-tabs', _tabs_new_height);
+                _intvars.set('toolbar-height-compact', _tabs_new_height);
+                _intvars.set('toolbar-height-normal', _tabs_new_height + _intvars.get('toolbar-height-controls'));
+
+                $filemenu.css('top', _tabs_new_height + _intvars.get('document-title-height'));
+            }
+        },
+
+        onAppReady: function (config) {
+            var me = this;
+            if ( me.header.btnOptions ) {
+                var compactview = !config.isEdit;
+                if ( config.isEdit && !config.isEditDiagram && !config.isEditMailMerge ) {
+                    if ( Common.localStorage.itemExists("sse-compact-toolbar") ) {
+                        compactview = Common.localStorage.getBool("sse-compact-toolbar");
+                    } else
+                    if ( config.customization && config.customization.compactToolbar )
+                        compactview = true;
+                }
+
+                me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
+                    caption     : me.header.textCompactView,
+                    checked     : compactview,
+                    checkable   : true,
+                    value       : 'toolbar'
+                });
+
+                var mnuitemHideFormulaBar = new Common.UI.MenuItem({
+                    caption     : me.textHideFBar,
+                    checked     : Common.localStorage.getBool('sse-hidden-formula'),
+                    checkable   : true,
+                    value       : 'formula'
+                });
+
+                me.header.mnuitemHideHeadings = new Common.UI.MenuItem({
+                    caption     : me.textHideHeadings,
+                    checkable   : true,
+                    checked     : me.header.mnuitemHideHeadings.isChecked(),
+                    value       : 'headings'
+                });
+
+                me.header.mnuitemHideGridlines = new Common.UI.MenuItem({
+                    caption     : me.textHideGridlines,
+                    checkable   : true,
+                    checked     : me.header.mnuitemHideGridlines.isChecked(),
+                    value       : 'gridlines'
+                });
+
+                me.header.mnuitemFreezePanes = new Common.UI.MenuItem({
+                    caption     : me.textFreezePanes,
+                    checkable   : true,
+                    checked     : me.header.mnuitemFreezePanes.isChecked(),
+                    value       : 'freezepanes'
+                });
+
+                me.header.mnuZoom = new Common.UI.MenuItem({
+                    template: _.template([
+                        '<div id="hdr-menu-zoom" class="menu-zoom" style="height: 25px;" ',
+                            '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                            'data-stopPropagation="true"',
+                            '<% } %>', '>',
+                            '<label class="title">' + me.header.textZoom + '</label>',
+                            '<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon btn-zoomin">&nbsp;</i></button>',
+                            '<label class="zoom"><%= options.value %>%</label>',
+                            '<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon btn-zoomout">&nbsp;</i></button>',
+                        '</div>'
+                    ].join('')),
+                    stopPropagation: true,
+                    value: me.header.mnuZoom.options.value
+                });
+
+                var mnuitemAdvSettings = new Common.UI.MenuItem({
+                    caption: me.header.textAdvSettings,
+                    value: 'advanced'
+                });
+
+                me.header.btnOptions.setMenu(new Common.UI.Menu({
+                        cls: 'pull-right',
+                        style: 'min-width: 180px;',
+                        items: [
+                            me.header.mnuitemCompactToolbar,
+                            mnuitemHideFormulaBar,
+                            {caption:'--'},
+                            me.header.mnuitemHideHeadings,
+                            me.header.mnuitemHideGridlines,
+                            {caption:'--'},
+                            me.header.mnuitemFreezePanes,
+                            {caption:'--'},
+                            me.header.mnuZoom,
+                            {caption:'--'},
+                            mnuitemAdvSettings
+                        ]
+                    })
+                );
+
+                var _on_btn_zoom = function (btn) {
+                    if ( btn == 'up' ) {
+                        var _f = Math.floor(this.api.asc_getZoom() * 10)/10;
+                        _f += .1;
+                        if (_f > 0 && !(_f > 2.))
+                            this.api.asc_setZoom(_f);
+                    } else {
+                        _f = Math.ceil(this.api.asc_getZoom() * 10)/10;
+                        _f -= .1;
+                        if (!(_f < .5))
+                            this.api.asc_setZoom(_f);
+                    }
+
+                    Common.NotificationCenter.trigger('edit:complete', me.header);
+                };
+
+                (new Common.UI.Button({
+                    el      : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
+                    cls     : 'btn-toolbar'
+                })).on('click', _on_btn_zoom.bind(me, 'down'));
+
+                (new Common.UI.Button({
+                    el      : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
+                    cls     : 'btn-toolbar'
+                })).on('click', _on_btn_zoom.bind(me, 'up'));
+
+                me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
             }
         },
 
@@ -127,6 +303,10 @@ define([
             this.boxFormula = $('#cell-editing-box');
             this.boxSdk.css('border-left', 'none');
             this.boxFormula.css('border-left', 'none');
+
+            this.header.mnuitemHideHeadings = this.header.fakeMenuItem();
+            this.header.mnuitemHideGridlines = this.header.fakeMenuItem();
+            this.header.mnuitemFreezePanes = this.header.fakeMenuItem();
         },
 
         onLayoutChanged: function(area) {
@@ -171,6 +351,67 @@ define([
         onWindowResize: function(e) {
             this.onLayoutChanged('window');
             Common.NotificationCenter.trigger('window:resize');
-        }
-    });
+        },
+
+        onFileMenu: function (opts) {
+            var me = this;
+            var _need_disable =  opts == 'show';
+
+            me.header.lockHeaderBtns( 'undo', _need_disable );
+            me.header.lockHeaderBtns( 'redo', _need_disable );
+            me.header.lockHeaderBtns( 'opts', _need_disable );
+        },
+
+        onApiZoomChange: function(zf, type){
+            switch (type) {
+                case 1: // FitWidth
+                case 2: // FitPage
+                case 0:
+                default: {
+                    this.header.mnuZoom.options.value = Math.floor((zf + .005) * 100);
+                    $('.menu-zoom .zoom', this.header.mnuZoom.$el).html(Math.floor((zf + .005) * 100) + '%');
+                }
+            }
+        },
+
+        onApiSheetChanged: function() {
+            var me = this;
+            var appConfig = me.viewport.mode;
+            if ( !!appConfig && !appConfig.isEditDiagram && !appConfig.isEditMailMerge ) {
+                var params  = me.api.asc_getSheetViewSettings();
+                me.header.mnuitemHideHeadings.setChecked(!params.asc_getShowRowColHeaders());
+                me.header.mnuitemHideGridlines.setChecked(!params.asc_getShowGridLines());
+                me.header.mnuitemFreezePanes.setChecked(params.asc_getIsFreezePane());
+            }
+        },
+
+        onApiEditCell: function(state) {
+            if ( state == Asc.c_oAscCellEditorState.editStart )
+                this.header.lockHeaderBtns('opts', true); else
+            if ( state == Asc.c_oAscCellEditorState.editEnd )
+                this.header.lockHeaderBtns('opts', false);
+        },
+
+        onCellsRange: function(status) {
+            this.onApiEditCell(status != Asc.c_oAscSelectionDialogType.None ? Asc.c_oAscCellEditorState.editStart : Asc.c_oAscCellEditorState.editEnd);
+        },
+
+        onOptionsItemClick: function (menu, item, e) {
+            var me = this;
+
+            switch ( item.value ) {
+            case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
+            case 'formula': me.header.fireEvent('formulabar:hide', [item.isChecked()]); break;
+            case 'headings': me.api.asc_setDisplayHeadings(!item.isChecked()); break;
+            case 'gridlines': me.api.asc_setDisplayGridlines(!item.isChecked()); break;
+            case 'freezepanes': me.api.asc_freezePane(); break;
+            case 'advanced': me.header.fireEvent('file:settings', me.header); break;
+            }
+        },
+
+        textHideFBar: 'Hide Formula Bar',
+        textHideHeadings: 'Hide Headings',
+        textHideGridlines: 'Hide Gridlines',
+        textFreezePanes: 'Freeze Panes'
+    }, SSE.Controllers.Viewport));
 });

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -8,7 +8,6 @@
             <ul>
                 <% for(var i in tabs) { %>
                 <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
-                    <div class="tab-bg" />
                     <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
                 </li>
                 <% } %>
@@ -132,16 +131,7 @@
                         <span class="btn-slot split" id="slot-btn-table-tpl"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px;">
-                </div>
-                <div class="group no-mask">
-                    <div class="elset">
-                        <span class="btn-slot split" id="slot-btn-hidebars"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot" id="slot-btn-settings"></span>
-                    </div>
-                </div>
+                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">

apps/spreadsheeteditor/main/app/template/Viewport.template

@@ -3,6 +3,7 @@
         <section class="layout-ct">
             <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
         </section>
+        <section id="app-title" class="layout-item"></section>
         <div id="toolbar" class="layout-item"></div>
         <div class="layout-item">
             <div id="viewport-hbox-layout" class="layout-ct hbox">

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

@@ -157,7 +157,8 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'btn-undo',
                 disabled    : true,
-                lock        : [_set.lostConnect]
+                lock        : [_set.lostConnect],
+                signals     : ['disabled']
             });
 
             me.btnRedo = new Common.UI.Button({
@@ -165,7 +166,8 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'btn-redo',
                 disabled    : true,
-                lock        : [_set.lostConnect]
+                lock        : [_set.lostConnect],
+                signals     : ['disabled']
             });
 
             return this;
@@ -370,9 +372,10 @@ define([
                 me.btnSave = new Common.UI.Button({
                     id          : 'id-toolbar-btn-save',
                     cls         : 'btn-toolbar',
-                    iconCls     : 'no-mask ' + me.btnSaveCls
+                    iconCls     : 'no-mask ' + me.btnSaveCls,
+                    signals     : ['disabled']
                 });
-                me.btnsSave = [me.btnSave];
+                me.btnCollabChanges = me.btnSave;
 
                 me.btnIncFontSize = new Common.UI.Button({
                     id          : 'id-toolbar-btn-incfont',
@@ -1045,41 +1048,6 @@ define([
                     })
                 });
 
-                me.mnuZoomIn = dummyCmp();
-                me.mnuZoomOut = dummyCmp();
-
-                var clone = function(source) {
-                    var obj = {};
-                    for (var prop in source)
-                        obj[prop] = (typeof(source[prop])=='object') ? clone(source[prop]) : source[prop];
-                    return obj;
-                };
-
-                this.mnuitemHideHeadings = {
-                    conf: {checked:false},
-                    setChecked: function(val) { this.conf.checked = val;},
-                    isChecked: function () { return this.conf.checked; }
-                };
-                this.mnuitemHideGridlines = clone(this.mnuitemHideHeadings);
-                this.mnuitemFreezePanes = clone(this.mnuitemHideHeadings);
-                this.mnuZoom = {
-                    options: {value: 100}
-                };
-
-                me.btnShowMode = new Common.UI.Button({
-                    id          : 'id-toolbar-btn-showmode',
-                    cls         : 'btn-toolbar',
-                    iconCls     : 'btn-showmode no-mask',
-                    lock        : [_set.menuFileOpen, _set.editCell],
-                    menu        : true
-                });
-
-                me.btnSettings = new Common.UI.Button({
-                    id          : 'id-toolbar-btn-settings',
-                    cls         : 'btn-toolbar',
-                    iconCls     : 'btn-settings no-mask'
-                });
-
                 // Is unique for the short view
 
                 me.btnHorizontalAlign = new Common.UI.Button({
@@ -1219,7 +1187,7 @@ define([
 
                 var hidetip = Common.localStorage.getItem("sse-hide-synch");
                 me.showSynchTip = !(hidetip && parseInt(hidetip) == 1);
-                me.needShowSynchTip = false;
+                // me.needShowSynchTip = false;
             }
 
             me.lockControls = [
@@ -1232,8 +1200,8 @@ define([
                 me.btnTableTemplate, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell,
                 me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
                 me.btnInsertChart, me.btnColorSchemas,
-                me.btnAutofilter, me.btnCopy, me.btnPaste, me.btnSettings, me.listStyles, me.btnPrint, me.btnShowMode,
-                /*me.btnSave, */me.btnClearStyle, me.btnCopyStyle
+                me.btnAutofilter, me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint,
+                me.btnSave, me.btnClearStyle, me.btnCopyStyle
             ];
 
             var _temp_array = [me.cmbFontName, me.cmbFontSize, me.btnAlignLeft,me.btnAlignCenter,me.btnAlignRight,me.btnAlignJust,me.btnAlignTop,
@@ -1241,8 +1209,8 @@ define([
                 me.btnInsertImage, me.btnInsertText, me.btnInsertTextArt, me.btnInsertShape, me.btnInsertEquation, me.btnIncFontSize,
                 me.btnDecFontSize, me.btnBold, me.btnItalic, me.btnUnderline, me.btnStrikeout, me.btnSubscript, me.btnTextColor, me.btnBackColor,
                 me.btnInsertHyperlink, me.btnBorders, me.btnTextOrient, me.btnPercentStyle, me.btnCurrencyStyle, me.btnColorSchemas,
-                me.btnSettings, me.btnInsertFormula, me.btnNamedRange, me.btnDecDecimal, me.btnIncDecimal, me.cmbNumberFormat, me.btnWrap,
-                me.btnInsertChart, me.btnMerge, me.btnAddCell, me.btnDeleteCell, me.btnShowMode, me.btnPrint,
+                me.btnInsertFormula, me.btnNamedRange, me.btnDecDecimal, me.btnIncDecimal, me.cmbNumberFormat, me.btnWrap,
+                me.btnInsertChart, me.btnMerge, me.btnAddCell, me.btnDeleteCell, me.btnPrint,
                 me.btnAutofilter, me.btnSortUp, me.btnSortDown, me.btnTableTemplate, me.btnSetAutofilter, me.btnClearAutofilter,
                 me.btnSave, me.btnClearStyle, me.btnCopyStyle, me.btnCopy, me.btnPaste];
 
@@ -1291,9 +1259,9 @@ define([
                 }
             });
 
+            me.setTab('home');
             if ( me.isCompactView )
-                me.setFolded(true); else
-                me.setTab('home');
+                me.setFolded(true);
 
             return this;
         },
@@ -1376,8 +1344,6 @@ define([
             _injectComponent('#slot-btn-cell-ins',       this.btnAddCell);
             _injectComponent('#slot-btn-cell-del',       this.btnDeleteCell);
             _injectComponent('#slot-btn-colorschemas',   this.btnColorSchemas);
-            _injectComponent('#slot-btn-hidebars',       this.btnShowMode);
-            _injectComponent('#slot-btn-settings',       this.btnSettings);
             _injectComponent('#slot-btn-search',         this.btnSearch);
             _injectComponent('#slot-btn-inschart',       this.btnInsertChart);
             _injectComponent('#slot-field-styles',       this.listStyles);
@@ -1447,77 +1413,11 @@ define([
             _updateHint(this.btnAddCell, this.tipInsertOpt);
             _updateHint(this.btnDeleteCell, this.tipDeleteOpt);
             _updateHint(this.btnColorSchemas, this.tipColorSchemas);
-            _updateHint(this.btnShowMode, this.tipViewSettings);
-            _updateHint(this.btnSettings, this.tipAdvSettings);
             _updateHint(this.btnHorizontalAlign, this.tipHAligh);
             _updateHint(this.btnVerticalAlign, this.tipVAligh);
             _updateHint(this.btnAutofilter, this.tipAutofilter);
 
             // set menus
-            if ( this.btnShowMode && this.btnShowMode.rendered ) {
-                this.btnShowMode.setMenu(new Common.UI.Menu({
-                    items: [
-                        this.mnuitemCompactToolbar = new Common.UI.MenuItem({
-                            caption     : this.textCompactToolbar,
-                            checkable   : true,
-                            checked     : this.isCompactView,
-                            value       : 'compact'
-                        }),
-                        this.mnuitemHideFormulaBar = new Common.UI.MenuItem({
-                            caption     : this.textHideFBar,
-                            checkable   : true,
-                            checked     : Common.localStorage.getBool('sse-hidden-formula'),
-                            value       : 'formula'
-                        }),
-                        {caption: '--'},
-                        this.mnuitemHideHeadings = new Common.UI.MenuItem({
-                            caption     : this.textHideHeadings,
-                            checkable   : true,
-                            checked     : this.mnuitemHideHeadings.isChecked(),
-                            value       : 'headings'
-                        }),
-                        this.mnuitemHideGridlines = new Common.UI.MenuItem({
-                            caption     : this.textHideGridlines,
-                            checkable   : true,
-                            checked     : this.mnuitemHideGridlines.isChecked(),
-                            value       : 'gridlines'
-                        }),
-                        {caption: '--'},
-                        this.mnuitemFreezePanes = new Common.UI.MenuItem({
-                            caption     : this.textFreezePanes,
-                            checkable   : true,
-                            checked     : this.mnuitemFreezePanes.isChecked(),
-                            value       : 'freezepanes'
-                        }),
-                        {caption: '--'},
-                        this.mnuZoom = new Common.UI.MenuItem({
-                            template: _.template([
-                                '<div id="id-toolbar-menu-zoom" class="menu-zoom" style="height: 25px;" ',
-                                    '<% if(!_.isUndefined(options.stopPropagation)) { %>',
-                                        'data-stopPropagation="true"',
-                                    '<% } %>', '>',
-                                    '<label class="title">' + this.textZoom + '</label>',
-                                    '<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><span class="icon btn-zoomin">&nbsp;</span></button>',
-                                    '<label class="zoom"><%= options.value %>%</label>',
-                                    '<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><span class="icon btn-zoomout">&nbsp;</span></button>',
-                                '</div>'
-                            ].join('')),
-                            stopPropagation: true,
-                            value: this.mnuZoom.options.value
-                        })
-                    ]
-                }));
-
-                this.mnuZoomOut = new Common.UI.Button({
-                    el  : $('#id-menu-zoom-out'),
-                    cls : 'btn-toolbar'
-                });
-                this.mnuZoomIn = new Common.UI.Button({
-                    el  : $('#id-menu-zoom-in'),
-                    cls : 'btn-toolbar'
-                });
-            }
-            
             if (this.btnBorders && this.btnBorders.rendered) {
                 this.btnBorders.setMenu( new Common.UI.Menu({
                     items: [
@@ -1706,12 +1606,6 @@ define([
                     itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
                 });
             }
-
-            var btnsave = SSE.getController('LeftMenu').getView('LeftMenu').getMenu('file').getButton('save');
-            if (btnsave && this.btnsSave) {
-                this.btnsSave.push(btnsave);
-                btnsave.setDisabled(this.btnsSave[0].isDisabled());
-            }
         },
 
         onToolbarAfterRender: function(toolbar) {
@@ -1755,8 +1649,6 @@ define([
                 this.lockToolbar( SSE.enumLock.lostConnect, true );
                 this.lockToolbar( SSE.enumLock.lostConnect, true,
                     {array:[this.btnEditChart,this.btnUndo,this.btnRedo]} );
-                this.lockToolbar( SSE.enumLock.lostConnect, true,
-                    {array:this.btnsSave} );
                 this.lockToolbar(SSE.enumLock.cantPrint, !mode.canPrint || mode.disableDownload, {array: [this.btnPrint]});
             } else {
                 this.mode = mode;
@@ -1828,66 +1720,54 @@ define([
 
         onApiCollaborativeChanges: function() {
             if (this._state.hasCollaborativeChanges) return;
-            if (!this.btnSave.rendered) {
-                this.needShowSynchTip = true;
+            if (!this.btnCollabChanges.rendered) {
+                // this.needShowSynchTip = true;
                 return;
             }
 
             this._state.hasCollaborativeChanges = true;
-            var iconEl = $('.icon', this.btnSave.cmpEl);
-            iconEl.removeClass(this.btnSaveCls);
-            iconEl.addClass('btn-synch');
+            this.btnCollabChanges.$icon.removeClass(this.btnSaveCls).addClass('btn-synch');
 
             if (this.showSynchTip){
-                this.btnSave.updateHint('');
+                this.btnCollabChanges.updateHint('');
                 if (this.synchTooltip===undefined)
                     this.createSynchTip();
 
                 this.synchTooltip.show();
             } else {
-                this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
             }
 
-            this.btnsSave.forEach(function(button) {
-                if ( button ) {
-                    button.setDisabled(false);
-                }
-            });
+            this.btnSave.setDisabled(false);
             Common.Gateway.collaborativeChanges();
         },
 
         createSynchTip: function () {
             this.synchTooltip = new Common.UI.SynchronizeTip({
-                target    : $('#id-toolbar-btn-save')
+                target: this.btnCollabChanges.$el
             });
             this.synchTooltip.on('dontshowclick', function() {
                 this.showSynchTip = false;
                 this.synchTooltip.hide();
-                this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
                 Common.localStorage.setItem('sse-hide-synch', 1);
             }, this);
             this.synchTooltip.on('closeclick', function() {
                 this.synchTooltip.hide();
-                this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
+                this.btnCollabChanges.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S'));
             }, this);
         },
 
         synchronizeChanges: function() {
-            if (this.btnSave.rendered) {
-                var iconEl = $('.icon', this.btnSave.cmpEl),
-                    me = this;
+            if (this.btnCollabChanges.rendered) {
+                var me = this;
 
-                if (iconEl.hasClass('btn-synch')) {
-                    iconEl.removeClass('btn-synch');
-                    iconEl.addClass(this.btnSaveCls);
+                if ( me.btnCollabChanges.$icon.hasClass('btn-synch') ) {
+                    me.btnCollabChanges.$icon.removeClass('btn-synch').addClass(this.btnSaveCls);
                     if (this.synchTooltip)
                         this.synchTooltip.hide();
-                    this.btnSave.updateHint(this.btnSaveTip);
-                    this.btnsSave.forEach(function(button) {
-                        if ( button ) {
-                            button.setDisabled(!me.mode.forcesave);
-                        }
-                    });
+                    this.btnCollabChanges.updateHint(this.btnSaveTip);
+                    this.btnSave.setDisabled(!me.mode.forcesave);
 
                     this._state.hasCollaborativeChanges = false;
                 }
@@ -1903,14 +1783,12 @@ define([
 
             var length = _.size(editusers);
             var cls = (length>1) ? 'btn-save-coauth' : 'btn-save';
-            if (cls !== this.btnSaveCls && this.btnSave.rendered) {
+            if (cls !== this.btnSaveCls && this.btnCollabChanges.rendered) {
                 this.btnSaveTip = ((length>1) ? this.tipSaveCoauth : this.tipSave )+ Common.Utils.String.platformKey('Ctrl+S');
 
-                var iconEl = $('.icon', this.btnSave.cmpEl);
-                if (!iconEl.hasClass('btn-synch')) {
-                    iconEl.removeClass(this.btnSaveCls);
-                    iconEl.addClass(cls);
-                    this.btnSave.updateHint(this.btnSaveTip);
+                if ( !this.btnCollabChanges.$icon.hasClass('btn-synch') ) {
+                    this.btnCollabChanges.$icon.removeClass(this.btnSaveCls).addClass(cls);
+                    this.btnCollabChanges.updateHint(this.btnSaveTip);
                 }
                 this.btnSaveCls = cls;
             }
@@ -2010,8 +1888,6 @@ define([
         tipDigStylePercent: 'Percent Style',
 //        tipDigStyleCurrency:'Currency Style',
         tipDigStyleAccounting: 'Accounting Style',
-        tipViewSettings:    'View Settings',
-        tipAdvSettings:     'Advanced Settings',
         tipTextOrientation: 'Orientation',
         tipInsertOpt:       'Insert Cells',
         tipDeleteOpt:       'Delete Cells',
@@ -2054,12 +1930,6 @@ define([
         textDelLeft:        'Shift Cells Left',
         textDelUp:          'Shift Cells Up',
         textZoom:           'Zoom',
-        textCompactToolbar: 'Hide Toolbar',
-        textHideTBar:       'Hide Title Bar',
-        textHideFBar:       'Hide Formula Bar',
-        textHideHeadings:   'Hide Headings',
-        textHideGridlines:  'Hide Gridlines',
-        textFreezePanes:    'Freeze Panes',
         txtScheme1:         'Office',
         txtScheme2:         'Grayscale',
         txtScheme3:         'Apex',

apps/spreadsheeteditor/main/app/view/Viewport.js

@@ -85,18 +85,20 @@ define([
             var items = $container.find(' > .layout-item');
             this.vlayout = new Common.UI.VBoxLayout({
                 box: $container,
-                items: [
-                {
-                    // el: items[0],    // decorative element for view mode for desktop
-                    // height: 5
-                // }, {
-                    el: items[0],
-                    height: Common.localStorage.getBool('sse-compact-toolbar') ? 32 : 32+67
-                }, {
+                items: [{
+                    el: $container.find('> .layout-item#app-title').hide(),
+                    alias: 'title',
+                    height: Common.Utils.InternalSettings.get('document-title-height')
+                },{
                     el: items[1],
-                    stretch: true
+                    alias: 'toolbar',
+                    height: Common.localStorage.getBool('sse-compact-toolbar') ?
+                        Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal')
                 }, {
                     el: items[2],
+                    stretch: true
+                }, {
+                    el: items[3],
                     height: 25
                 }]
             });

apps/spreadsheeteditor/main/app_dev.js

@@ -186,6 +186,7 @@ require([
         'common/main/lib/controller/Plugins'
         ,'common/main/lib/controller/ReviewChanges'
         ,'common/main/lib/controller/Protection'
+        ,'common/main/lib/controller/Desktop'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/spreadsheeteditor/main/locale/en.json

@@ -86,6 +86,12 @@
   "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.textAdvSettings": "Advanced settings",
+  "Common.Views.Header.textCompactView": "Hide Toolbar",
+  "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
+  "Common.Views.Header.textZoom": "Zoom",
+  "Common.Views.Header.tipViewSettings": "View settings",
+  "Common.Views.Header.textHideLines": "Hide Rulers",
   "Common.Views.ImageFromUrlDialog.cancelButtonText": "Cancel",
   "Common.Views.ImageFromUrlDialog.okButtonText": "OK",
   "Common.Views.ImageFromUrlDialog.textUrl": "Paste an image URL:",
@@ -835,6 +841,10 @@
   "SSE.Controllers.Toolbar.txtSymbol_zeta": "Zeta",
   "SSE.Controllers.Toolbar.warnLongOperation": "The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?",
   "SSE.Controllers.Toolbar.warnMergeLostData": "Only the data from the upper-left cell will remain in the merged cell. <br>Are you sure you want to continue?",
+  "SSE.Controllers.Viewport.textHideFBar": "Hide Formula Bar",
+  "SSE.Controllers.Viewport.textHideGridlines": "Hide Gridlines",
+  "SSE.Controllers.Viewport.textHideHeadings": "Hide Headings",
+  "SSE.Controllers.Viewport.textFreezePanes": "Freeze Panes",
   "SSE.Views.AutoFilterDialog.btnCustomFilter": "Custom Filter",
   "SSE.Views.AutoFilterDialog.cancelButtonText": "Cancel",
   "SSE.Views.AutoFilterDialog.okButtonText": "OK",
@@ -1791,7 +1801,7 @@
   "SSE.Views.Toolbar.textClockwise": "Angle Clockwise",
   "SSE.Views.Toolbar.textColumn": "Column",
   "SSE.Views.Toolbar.textColumnSpark": "Column",
-  "SSE.Views.Toolbar.textCompactToolbar": "Hide Toolbar",
+  "del_SSE.Views.Toolbar.textCompactToolbar": "Hide Toolbar",
   "SSE.Views.Toolbar.textCounterCw": "Angle Counterclockwise",
   "SSE.Views.Toolbar.textDelLeft": "Shift Cells Left",
   "SSE.Views.Toolbar.textDelUp": "Shift Cells Up",
@@ -1799,11 +1809,11 @@
   "SSE.Views.Toolbar.textDiagUpBorder": "Diagonal Up Border",
   "SSE.Views.Toolbar.textEntireCol": "Entire Column",
   "SSE.Views.Toolbar.textEntireRow": "Entire Row",
-  "SSE.Views.Toolbar.textFreezePanes": "Freeze Panes",
-  "SSE.Views.Toolbar.textHideFBar": "Hide Formula Bar",
-  "SSE.Views.Toolbar.textHideGridlines": "Hide Gridlines",
-  "SSE.Views.Toolbar.textHideHeadings": "Hide Headings",
-  "SSE.Views.Toolbar.textHideTBar": "Hide Title Bar",
+  "del_SSE.Views.Toolbar.textFreezePanes": "Freeze Panes",
+  "del_SSE.Views.Toolbar.textHideFBar": "Hide Formula Bar",
+  "del_SSE.Views.Toolbar.textHideGridlines": "Hide Gridlines",
+  "del_SSE.Views.Toolbar.textHideHeadings": "Hide Headings",
+  "del_SSE.Views.Toolbar.textHideTBar": "Hide Title Bar",
   "SSE.Views.Toolbar.textHorizontal": "Horizontal Text",
   "SSE.Views.Toolbar.textInsDown": "Shift Cells Down",
   "SSE.Views.Toolbar.textInsideBorders": "Inside Borders",
@@ -1840,7 +1850,7 @@
   "SSE.Views.Toolbar.textUnderline": "Underline",
   "SSE.Views.Toolbar.textWinLossSpark": "Win/Loss",
   "SSE.Views.Toolbar.textZoom": "Zoom",
-  "SSE.Views.Toolbar.tipAdvSettings": "Advanced settings",
+  "del_SSE.Views.Toolbar.tipAdvSettings": "Advanced settings",
   "SSE.Views.Toolbar.tipAlignBottom": "Align bottom",
   "SSE.Views.Toolbar.tipAlignCenter": "Align center",
   "SSE.Views.Toolbar.tipAlignJust": "Justified",
@@ -1891,7 +1901,7 @@
   "SSE.Views.Toolbar.tipTextOrientation": "Orientation",
   "SSE.Views.Toolbar.tipUndo": "Undo",
   "SSE.Views.Toolbar.tipVAligh": "Vertical Alignment",
-  "SSE.Views.Toolbar.tipViewSettings": "View settings",
+  "del_SSE.Views.Toolbar.tipViewSettings": "View settings",
   "SSE.Views.Toolbar.tipWrap": "Wrap text",
   "SSE.Views.Toolbar.txtAccounting": "Accounting",
   "SSE.Views.Toolbar.txtAdditional": "Additional",

apps/spreadsheeteditor/sdk_dev_scripts.js

@@ -26,11 +26,11 @@ var sdk_dev_scrpipts = [
 	"../../../../sdkjs/common/NumFormat.js",
 	"../../../../sdkjs/common/SerializeChart.js",
 	"../../../../sdkjs/common/FontsFreeType/font_engine.js",
-    "../../../../sdkjs/common/FontsFreeType/FontFile.js",
-    "../../../../sdkjs/common/FontsFreeType/font_map.js",
+        "../../../../sdkjs/common/FontsFreeType/FontFile.js",
+        "../../../../sdkjs/common/FontsFreeType/font_map.js",
 	"../../../../sdkjs/common/FontsFreeType/RasterHeapManager.js",
 	"../../../../sdkjs/common/FontsFreeType/GlyphString.js",
-    "../../../../sdkjs/common/FontsFreeType/FontManager.js",
+        "../../../../sdkjs/common/FontsFreeType/FontManager.js",
 	"../../../../sdkjs/common/FontsFreeType/FontClassification.js",
 	"../../../../sdkjs/common/FontsFreeType/character.js",
 	"../../../../sdkjs/common/Drawings/Metafile.js",