Merge branch 'develop' into feature/documentation-translations

CHANGELOG.md

@@ -1,13 +1,16 @@
 # Change log
 ## 5.1.1
 ### All Editors
-* 
+* Customize initial zoom for the embedded editors
 
 ### Document Editor
-* 
+* Create and manage bookmarks
+* Create internal hyperlinks to bookmarks and headings
+* Export to RTF format
 
 ### Spreadsheet Editor
 * Support Spanish in formulas
+* Set options for saving in PDF format
 
 ### Presentation Editor
 * 

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/component/SynchronizeTip.js

@@ -103,13 +103,20 @@ define([
             },
 
             applyPlacement: function () {
-                var showxy = this.target.offset();
+                var showxy = this.target.offset(),
+                    innerHeight = Common.Utils.innerHeight();
                 if (this.placement == 'top')
-                    this.cmpEl.css({bottom : Common.Utils.innerHeight() - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
-                else if (this.placement == 'left')
-                    this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'});
-                else // right
-                    this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'});
+                    this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
+                else {// left or right
+                    var top = showxy.top + this.target.height()/2,
+                        height = this.cmpEl.height();
+                    if (top+height>innerHeight)
+                        top = innerHeight - height;
+                    if (this.placement == 'left')
+                        this.cmpEl.css({top : top + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'});
+                    else
+                        this.cmpEl.css({top : top + 'px', left: showxy.left + this.target.width() + 'px'});
+                }
             },
 
             isVisible: function() {

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

@@ -785,7 +785,7 @@ define([
 
             isLocked: function() {
                 return this.$window.hasClass('dethrone') ||
-                            (!this.options.modal && this.$window.parent().find('.asc-window.modal:visible').length);
+                            (!this.initConfig.modal && this.$window.parent().find('.asc-window.modal:visible').length);
             },
 
             getChild: function(selector) {

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/controller/ExternalDiagramEditor.js

@@ -141,7 +141,12 @@ define([
             handler: function(result, value) {
                 if (this.isHandlerCalled) return;
                 this.isHandlerCalled = true;
-                externalEditor && externalEditor.serviceCommand('queryClose',{mr:result});
+                if (this.diagramEditorView._isExternalDocReady)
+                    externalEditor && externalEditor.serviceCommand('queryClose',{mr:result});
+                else {
+                    this.diagramEditorView.hide();
+                    this.isHandlerCalled = false;
+                }
             },
 
             setChartData: function() {

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/ExternalDiagramEditor.js

@@ -82,11 +82,9 @@ define([
                 disabled: true
             });
             this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-diagram-editor-cancel'),
-                disabled: true
+                el: $('#id-btn-diagram-editor-cancel')
             });
 
-            this.$window.find('.tool.close').addClass('disabled');
             this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
         },
 

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/advanced-settings-window.less

@@ -36,12 +36,16 @@
     }
 
     .footer {
-        padding-top: 15px;
+        padding: 15px 15px 0;
 
         &.center {
             text-align: center;
         }
 
+        &.right {
+            text-align: right;
+        }
+
         &.justify {
             padding-left: 30px;
             padding-right: 30px;

apps/common/main/resources/less/buttons.less

@@ -512,6 +512,12 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
+    &.auto {
+        width: auto;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
     &:hover:not(.disabled),
     .over:not(.disabled) {
         background-color: @secondary !important;
@@ -520,6 +526,7 @@
     &:active:not(.disabled),
     &.active:not(.disabled) {
         background-color: @primary !important;
+        border-color: @primary;
         color: white;
     }
 

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,46 +9,54 @@
     }
 
     &.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: 7px;
+                width: 16px;
             }
         }
     }
 
     &.left {
-        margin: -32px 15px 0 0;
+        margin: 0 15px 0 0;
 
         .tip-arrow {
             right: -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: -7px;
+                width: 15px;
             }
         }
     }
 
     &.top {
-        margin: 0 -32px 15px 0;
+        margin: 0 0 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 +68,18 @@
     background-color: #fcfed7;
     overflow: visible;
 
+    .right & {
+        border-top-left-radius: 0;
+    }
+
+    .left & {
+        border-top-right-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;
@@ -311,3 +317,4 @@
 .button-normal-icon(~'x-huge .btn-contents', 53, @toolbar-big-icon-size);
 .button-normal-icon(btn-controls,         54, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-select-pivot', 55, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-bookmarks', 56, @toolbar-big-icon-size);

apps/documenteditor/embed/js/ApplicationController.js

@@ -220,6 +220,9 @@ var ApplicationController = new(function(){
 
         hidePreloader();
 
+        var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -2);
+        (zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
+
         if ( !embedConfig.shareUrl )
             $('#idt-share').hide();
 
@@ -338,7 +341,6 @@ var ApplicationController = new(function(){
         api.asc_setViewMode(true);
         api.asc_LoadDocument();
         api.Resize();
-        api.zoomFitToWidth();
     }
 
     function showMask() {

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/Links.js

@@ -44,7 +44,8 @@ define([
     'documenteditor/main/app/view/Links',
     'documenteditor/main/app/view/NoteSettingsDialog',
     'documenteditor/main/app/view/HyperlinkSettingsDialog',
-    'documenteditor/main/app/view/TableOfContentsSettings'
+    'documenteditor/main/app/view/TableOfContentsSettings',
+    'documenteditor/main/app/view/BookmarksDialog'
 ], function () {
     'use strict';
 
@@ -64,7 +65,8 @@ define([
                     'links:contents': this.onTableContents,
                     'links:update': this.onTableContentsUpdate,
                     'links:notes': this.onNotesClick,
-                    'links:hyperlink': this.onHyperlinkClick
+                    'links:hyperlink': this.onHyperlinkClick,
+                    'links:bookmarks': this.onBookmarksClick
                 },
                 'DocumentHolder': {
                     'links:contents': this.onTableContents,
@@ -311,6 +313,19 @@ define([
             }
         },
 
+        onBookmarksClick: function(btn) {
+            var me = this;
+            (new DE.Views.BookmarksDialog({
+                api: me.api,
+                props: me.api.asc_GetBookmarksManager(),
+                handler: function (result, settings) {
+                    if (settings) {
+                    }
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                }
+            })).show();
+        },
+
         onShowContentControlsActions: function(action, x, y) {
             var menu = (action==1) ? this.view.contentsUpdateMenu : this.view.contentsMenu,
                 documentHolderView  = this.getApplication().getController('DocumentHolder').documentHolder,

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.isOffline;
                 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);
                 }
             },
 
@@ -1908,6 +1896,7 @@ define([
                                 this._state.fastCoauth = false;
                                 Common.localStorage.setItem("de-settings-showchanges-strict", 'last');
                                 this.api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.LastChanges);
+                                this.getApplication().getController('Common.Controllers.ReviewChanges').applySettings();
                             }
                             this.onEditComplete();
                         }, this)

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));
@@ -355,6 +355,7 @@ define([
             this.api.asc_registerCallback('asc_onColumnsProps',         _.bind(this.onColumnsProps, this));
             this.api.asc_registerCallback('asc_onSectionProps',         _.bind(this.onSectionProps, this));
             this.api.asc_registerCallback('asc_onContextMenu',          _.bind(this.onContextMenu, this));
+            this.api.asc_registerCallback('asc_onShowParaMarks',        _.bind(this.onShowParaMarks, this));
         },
 
         onChangeCompactView: function(view, compact) {
@@ -371,7 +372,6 @@ define([
                 var me = this;
                 setTimeout(function () {
                     me.onChangeCompactView(null, !me.toolbar.isCompact());
-                    me.toolbar.mnuitemCompactToolbar.setChecked(me.toolbar.isCompact(), true);
                 }, 0);
             }
         },
@@ -517,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) {
@@ -614,6 +609,12 @@ define([
             }
         },
 
+        onShowParaMarks: function(v) {
+            this.toolbar.mnuNonPrinting.items[0].setChecked(v, true);
+            this.toolbar.btnShowHidenChars.toggle(v, true);
+            Common.localStorage.setItem("de-show-hiddenchars", v);
+        },
+
         onApiFocusObject: function(selectedObjects) {
             if (!this.editMode) return;
 
@@ -733,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);
@@ -766,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;
         },
@@ -838,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);
@@ -914,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);
 
@@ -933,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();
@@ -1071,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);
@@ -1408,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];
@@ -1986,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);
@@ -2709,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;
@@ -2776,12 +2705,24 @@ 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();
+                me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
+                if ( config.isDesktopApp ) {
+                    // hide 'print' and 'save' buttons group and next separator
+                    me.toolbar.btnPrint.$el.parents('.group').hide().next().hide();
 
-                    if ( $panel )
-                        me.toolbar.addTab(tab, $panel, 5);
+                    // 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');
@@ -2794,7 +2735,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';
@@ -2807,7 +2748,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">
@@ -171,6 +161,7 @@
                 <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge slot-inshyperlink"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-bookmarks"></span>
                 </div>
             </section>
         </section>

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/BookmarksDialog.js

@@ -0,0 +1,303 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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
+ *
+ */
+
+/**
+ *  BookmarksDialog.js.js
+ *
+ *  Created by Julia Radzhabova on 15.02.2018
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/ListView',
+    'common/main/lib/component/InputField',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/RadioBox',
+    'common/main/lib/view/AdvancedSettingsWindow'
+], function () { 'use strict';
+
+    DE.Views.BookmarksDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            contentWidth: 300,
+            height: 360
+        },
+
+        initialize : function(options) {
+            var me = this;
+
+            _.extend(this.options, {
+                title: this.textTitle,
+                template: [
+                    '<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
+                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
+                            '<div class="settings-panel active">',
+                                '<table cols="1" style="width: 100%;">',
+                                    '<tr>',
+                                        '<td class="padding-extra-small">',
+                                        '<label class="input-label">', me.textBookmarkName, '</label>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-large">',
+                                            '<div id="bookmarks-txt-name" style="display:inline-block;vertical-align: top;margin-right: 10px;"></div>',
+                                            '<button type="button" result="add" class="btn btn-text-default" id="bookmarks-btn-add" style="vertical-align: top;">', me.textAdd,'</button>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-extra-small">',
+                                            '<label class="header" style="margin-right: 10px;">', me.textSort,'</label>',
+                                            '<div id="bookmarks-radio-name" style="display: inline-block; margin-right: 10px;"></div>',
+                                            '<div id="bookmarks-radio-location" style="display: inline-block;"></div>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-small">',
+                                        '<div id="bookmarks-list" style="width:100%; height: 130px;"></div>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-large">',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-goto" style="margin-right: 10px;">', me.textGoto,'</button>',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-delete" style="">', me.textDelete,'</button>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td>',
+                                            '<div id="bookmarks-checkbox-hidden"></div>',
+                                        '</td>',
+                                    '</tr>',
+                                '</table>',
+                            '</div></div>',
+                        '</div>',
+                    '</div>',
+                    '<div class="footer right">',
+                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + me.textClose + '</button>',
+                    '</div>'
+                ].join('')
+            }, options);
+
+            this.api        = options.api;
+            this.handler    = options.handler;
+            this.props      = options.props;
+
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+            var me = this;
+
+            this.txtName = new Common.UI.InputField({
+                el          : $('#bookmarks-txt-name'),
+                allowBlank  : true,
+                validateOnChange: true,
+                validateOnBlur: false,
+                style       : 'width: 195px;',
+                value       : '',
+                maxLength: 40
+            }).on('changing', _.bind(this.onNameChanging, this));
+
+            this.radioName = new Common.UI.RadioBox({
+                el: $('#bookmarks-radio-name'),
+                labelText: this.textName,
+                name: 'asc-radio-bookmark-sort',
+                checked: true
+            });
+            this.radioName.on('change', _.bind(this.onRadioSort, this));
+
+            this.radioLocation = new Common.UI.RadioBox({
+                el: $('#bookmarks-radio-location'),
+                labelText: this.textLocation,
+                name: 'asc-radio-bookmark-sort'
+            });
+            this.radioLocation.on('change', _.bind(this.onRadioSort, this));
+
+            this.bookmarksList = new Common.UI.ListView({
+                el: $('#bookmarks-list', this.$window),
+                store: new Common.UI.DataViewStore(),
+                itemTemplate: _.template('<div id="<%= id %>" class="list-item" style="pointer-events:none;"><%= value %></div>')
+            });
+            this.bookmarksList.store.comparator = function(rec) {
+                return (me.radioName.getValue() ? rec.get("value") : rec.get("location"));
+            };
+            this.bookmarksList.on('item:dblclick', _.bind(this.onDblClickBookmark, this));
+            this.bookmarksList.on('entervalue', _.bind(this.onPrimary, this));
+            this.bookmarksList.on('item:select', _.bind(this.onSelectBookmark, this));
+
+            this.btnAdd = new Common.UI.Button({
+                el: $('#bookmarks-btn-add'),
+                disabled: true
+            });
+            this.$window.find('#bookmarks-btn-add').on('click', _.bind(this.onDlgBtnClick, this));
+
+            this.btnGoto = new Common.UI.Button({
+                el: $('#bookmarks-btn-goto'),
+                disabled: true
+            });
+            this.btnGoto.on('click', _.bind(this.gotoBookmark, this));
+
+            this.btnDelete = new Common.UI.Button({
+                el: $('#bookmarks-btn-delete'),
+                disabled: true
+            });
+            this.btnDelete.on('click', _.bind(this.deleteBookmark, this));
+
+            this.chHidden = new Common.UI.CheckBox({
+                el: $('#bookmarks-checkbox-hidden'),
+                labelText: this.textHidden,
+                value: Common.Utils.InternalSettings.get("de-bookmarks-hidden") || false
+            });
+            this.chHidden.on('change', _.bind(this.onChangeHidden, this));
+
+            this.afterRender();
+        },
+
+        afterRender: function() {
+            this._setDefaults(this.props);
+        },
+
+        show: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+        },
+
+        close: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.close.apply(this, arguments);
+            Common.Utils.InternalSettings.set("de-bookmarks-hidden", this.chHidden.getValue()=='checked');
+        },
+
+        _setDefaults: function (props) {
+            this.refreshBookmarks();
+            this.bookmarksList.scrollToRecord(this.bookmarksList.selectByIndex(0));
+        },
+
+        getSettings: function () {
+            return {};
+        },
+
+        onDlgBtnClick: function(event) {
+            var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event;
+            if (state == 'add') {
+                this.props.asc_AddBookmark(this.txtName.getValue());
+            }
+
+            this.close();
+        },
+
+        onPrimary: function() {
+            return true;
+        },
+
+        refreshBookmarks: function() {
+            if (this.props) {
+                var store = this.bookmarksList.store,
+                    count = this.props.asc_GetCount(),
+                    showHidden = this.chHidden.getValue()=='checked',
+                    arr = [];
+                for (var i=0; i<count; i++) {
+                    var name = this.props.asc_GetName(i);
+                    if (!this.props.asc_IsInternalUseBookmark(name) && (showHidden || !this.props.asc_IsHiddenBookmark(name))) {
+                        var rec = new Common.UI.DataViewModel();
+                        rec.set({
+                            value: name,
+                            location: i
+                        });
+                        arr.push(rec);
+                    }
+                }
+                store.reset(arr, {silent: false});
+            }
+        },
+
+        onSelectBookmark: function(listView, itemView, record) {
+            var value = record.get('value');
+            this.txtName.setValue(value);
+            this.btnAdd.setDisabled(false);
+            this.btnGoto.setDisabled(false);
+            this.btnDelete.setDisabled(false);
+        },
+
+        gotoBookmark: function(btn, eOpts){
+            var rec = this.bookmarksList.getSelectedRec();
+            if (rec.length>0) {
+                this.props.asc_GoToBookmark(rec[0].get('value'));
+            }
+        },
+
+        onDblClickBookmark: function(listView, itemView, record) {
+            this.props.asc_GoToBookmark(record.get('value'));
+        },
+
+        deleteBookmark: function(btn, eOpts){
+            var rec = this.bookmarksList.getSelectedRec();
+            if (rec.length>0) {
+                this.props.asc_RemoveBookmark(rec[0].get('value'));
+                var store = this.bookmarksList.store;
+                var idx = _.indexOf(store.models, rec[0]);
+                store.remove(rec[0]);
+            }
+        },
+
+        onRadioSort: function(field, newValue, eOpts) {
+            if (newValue) {
+                this.bookmarksList.store.sort();
+                this.bookmarksList.onResetItems();
+            }
+        },
+
+        onChangeHidden: function(field, newValue, oldValue, eOpts){
+            this.refreshBookmarks();
+        },
+
+        onNameChanging: function (input, value) {
+            var exist = this.props.asc_HaveBookmark(value);
+            this.bookmarksList.deselectAll();
+            this.btnAdd.setDisabled(!this.props.asc_CheckNewBookmarkName(value) && !exist);
+            this.btnGoto.setDisabled(!exist);
+            this.btnDelete.setDisabled(!exist);
+        },
+
+        textTitle:    'Bookmarks',
+        textLocation: 'Location',
+        textBookmarkName: 'Bookmark name',
+        textSort: 'Sort by',
+        textName: 'Name',
+        textAdd: 'Add',
+        textGoto: 'Go to',
+        textDelete: 'Delete',
+        textClose: 'Close',
+        textHidden: 'Hidden bookmarks'
+
+    }, DE.Views.BookmarksDialog || {}))
+});

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

@@ -556,12 +556,13 @@ define([
                         ToolTip = getUserName(moveData.get_UserId());
 
                         showPoint = [moveData.get_X()+me._XY[0], moveData.get_Y()+me._XY[1]];
+                        var maxwidth = showPoint[0];
                         showPoint[0] = me._BodyWidth - showPoint[0];
                         showPoint[1] -= ((moveData.get_LockedObjectType()==2) ? me._TtHeight : 0);
 
                         if (showPoint[1] > me._XY[1] && showPoint[1]+me._TtHeight < me._XY[1]+me._Height)  {
                             src.text(ToolTip);
-                            src.css({visibility: 'visible', top: showPoint[1] + 'px', right: showPoint[0] + 'px'});
+                            src.css({visibility: 'visible', top: showPoint[1] + 'px', right: showPoint[0] + 'px', 'max-width': maxwidth + 'px'});
                         } else {
                             src.css({visibility: 'hidden'});
                         }

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

@@ -58,7 +58,7 @@ define([
         ],[
 //            {name: 'DOC',            imgCls: 'doc-format btn-doc',   type: Asc.c_oAscFileType.DOC},
             {name: 'ODT',   imgCls: 'odt',   type: Asc.c_oAscFileType.ODT},
-//            {name: 'RTF',   imgCls: 'doc-format btn-rtf',   type: Asc.c_oAscFileType.RTF},
+            {name: 'RTF',   imgCls: 'rtf',   type: Asc.c_oAscFileType.RTF},
             {name: 'HTML (Zipped)',  imgCls: 'html',  type: Asc.c_oAscFileType.HTML}
 //            {name: 'EPUB',  imgCls: 'doc-format btn-epub',  type: Asc.c_oAscFileType.EPUB}
         ]],

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

@@ -42,6 +42,11 @@
 if (Common === undefined)
     var Common = {};
 
+var c_oHyperlinkType = {
+    InternalLink:0,
+    WebLink: 1
+};
+
 define([
     'common/main/lib/util/utils',
     'common/main/lib/component/InputField',
@@ -61,11 +66,20 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box">',
-                    '<div class="input-row">',
-                        '<label>' + this.textUrl + ' *</label>',
+                '<div class="box" style="height: 260px;">',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternal,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternal,'</button>',
+                    '</div>',
+                    '<div id="id-external-link">',
+                        '<div class="input-row">',
+                            '<label>' + this.textUrl + ' *</label>',
+                        '</div>',
+                        '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
+                    '</div>',
+                    '<div id="id-internal-link">',
+                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 130px;border: 1px solid #cfcfcf;"></div>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
                         '<label>' + this.textDisplay + '</label>',
                     '</div>',
@@ -94,6 +108,23 @@ define([
             var me = this,
                 $window = this.getChild();
 
+            me.btnExternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-external'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
+            });
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.InternalLink));
+
             me.inputUrl = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-url'),
                 allowBlank  : false,
@@ -122,8 +153,117 @@ define([
                 maxLength   : Asc.c_oAscMaxTooltipLength
             });
 
+            me.internalList = new Common.UI.TreeView({
+                el: $('#id-dlg-hyperlink-list'),
+                store: new Common.UI.TreeViewStore(),
+                enableKeyEvents: true
+            });
+            me.internalList.on('item:select', _.bind(this.onSelectItem, this));
+
+            me.btnOk = new Common.UI.Button({
+                el: $window.find('.primary')
+            });
+
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
+            me.externalPanel = $window.find('#id-external-link');
+            me.internalPanel = $window.find('#id-internal-link');
+        },
+
+        ShowHideElem: function(value) {
+            this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            var store = this.internalList.store;
+            if (value==c_oHyperlinkType.InternalLink) {
+                if (store.length<1) {
+                    var anchors = this.api.asc_GetHyperlinkAnchors(),
+                        count = anchors.length,
+                        prev_level = 0,
+                        header_level = 0,
+                        arr = [];
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtBeginning,
+                        level: 0,
+                        index: 0,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: false
+                    }));
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtHeadings,
+                        level: 0,
+                        index: 1,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: false,
+                        hasSubItems: false
+                    }));
+
+                    for (var i=0; i<count; i++) {
+                        var anchor = anchors[i],
+                            level = anchors[i].asc_GetHeadingLevel(),
+                            hasParent = true;
+                        if (anchor.asc_GetType()== Asc.c_oAscHyperlinkAnchor.Heading){
+                            if (level>prev_level)
+                                arr[arr.length-1].set('hasSubItems', true);
+                            if (level<=header_level) {
+                                header_level = level;
+                                hasParent = false;
+                            }
+                            arr.push(new Common.UI.TreeViewModel({
+                                name : anchor.asc_GetHeadingText(),
+                                level: level,
+                                index: i+2,
+                                hasParent: hasParent,
+                                type: Asc.c_oAscHyperlinkAnchor.Heading,
+                                headingParagraph: anchor.asc_GetHeadingParagraph()
+                            }));
+                            prev_level = level;
+                        }
+                    }
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtBookmarks,
+                        level: 0,
+                        index: arr.length,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: false,
+                        hasSubItems: false
+                    }));
+
+                    prev_level = 0;
+                    for (var i=0; i<count; i++) {
+                        var anchor = anchors[i],
+                            hasParent = true;
+                        if (anchor.asc_GetType()== Asc.c_oAscHyperlinkAnchor.Bookmark){
+                            if (prev_level<1)
+                                arr[arr.length-1].set('hasSubItems', true);
+                            arr.push(new Common.UI.TreeViewModel({
+                                name : anchor.asc_GetBookmarkName(),
+                                level: 1,
+                                index: arr.length,
+                                hasParent: false,
+                                type: Asc.c_oAscHyperlinkAnchor.Bookmark
+                            }));
+                            prev_level = 1;
+                        }
+                    }
+                    store.reset(arr);
+                }
+                var rec = this.internalList.getSelectedRec();
+                this.btnOk.setDisabled(rec.length<1 || rec[0].get('level')==0 && rec[0].get('index')>0);
+
+            } else
+                this.btnOk.setDisabled(false);
+        },
+
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
+        onSelectItem: function(picker, item, record, e){
+            this.btnOk.setDisabled(record.get('level')==0 && record.get('index')>0);
         },
 
         show: function() {
@@ -139,10 +279,31 @@ define([
             if (props) {
                 var me = this;
 
-                if (props.get_Value()) {
-                    me.inputUrl.setValue(props.get_Value().replace(new RegExp(" ",'g'), "%20"));
+                var bookmark = props.get_Bookmark(),
+                    type = (bookmark === null || bookmark=='') ? c_oHyperlinkType.WebLink : c_oHyperlinkType.InternalLink;
+
+                (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
+                me.ShowHideElem(type);
+
+                if (type == c_oHyperlinkType.WebLink) {
+                    if (props.get_Value()) {
+                        me.inputUrl.setValue(props.get_Value().replace(new RegExp(" ",'g'), "%20"));
+                    } else {
+                        me.inputUrl.setValue('');
+                    }
                 } else {
-                    me.inputUrl.setValue('');
+                    if (props.is_TopOfDocument())
+                        this.internalList.selectByIndex(0);
+                    else if (props.is_Heading()) {
+                        var heading = props.get_Heading(),
+                            rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Heading, headingParagraph: heading });
+                        if (rec)
+                            this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                    } else {
+                        var rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Bookmark, name: bookmark});
+                        if (rec)
+                            this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                    }
                 }
 
                 if (props.get_Text() !== null) {
@@ -163,17 +324,34 @@ define([
         getSettings: function () {
             var me      = this,
                 props   = new Asc.CHyperlinkProperty(),
-                url     = $.trim(me.inputUrl.getValue());
+                display = '';
 
-            if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
-                url = ( (me.isEmail) ? 'mailto:' : 'http://' ) + url;
+            if (this.btnExternal.isActive()) {//WebLink
+                var url     = $.trim(me.inputUrl.getValue());
 
-            url = url.replace(new RegExp("%20",'g')," ");
-            props.put_Value(url);
+                if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
+                    url = ( (me.isEmail) ? 'mailto:' : 'http://' ) + url;
+
+                url = url.replace(new RegExp("%20",'g')," ");
+                props.put_Value(url);
+                props.put_Bookmark(null);
+                display = url;
+            } else {
+                var rec = this.internalList.getSelectedRec();
+                if (rec.length>0) {
+                    props.put_Bookmark(rec[0].get('name'));
+                    if (rec[0].get('index')==0)
+                        props.put_TopOfDocument();
+                    var para = rec[0].get('headingParagraph');
+                    if (para)
+                        props.put_Heading(para);
+                    display = rec[0].get('name');
+                }
+            }
 
             if (!me.inputDisplay.isDisabled() && ( this.isTextChanged || _.isEmpty(me.inputDisplay.getValue()))) {
                 if (_.isEmpty(me.inputDisplay.getValue()))
-                    me.inputDisplay.setValue(url);
+                    me.inputDisplay.setValue(display);
                 props.put_Text(me.inputDisplay.getValue());
             } else {
                 props.put_Text(null);
@@ -199,13 +377,17 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = this.inputUrl.checkValidate(),
-                        checkdisp = this.inputDisplay.checkValidate();
-                    if (checkurl !== true)  {
-                        this.inputUrl.cmpEl.find('input').focus();
-                        return;
+                    if (this.btnExternal.isActive()) {//WebLink
+                        if (this.inputUrl.checkValidate() !== true)  {
+                            this.inputUrl.cmpEl.find('input').focus();
+                            return;
+                        }
+                    } else {
+                        var rec = this.internalList.getSelectedRec();
+                        if (rec.length<1 || rec[0].get('level')==0 && rec[0].get('index')>0)
+                            return;
                     }
-                    if (checkdisp !== true) {
+                    if (this.inputDisplay.checkValidate() !== true) {
                         this.inputDisplay.cmpEl.find('input').focus();
                         return;
                     }
@@ -225,6 +407,11 @@ define([
         txtNotUrl:          'This field should be a URL in the format \"http://www.example.com\"',
         textTooltip:        'ScreenTip text',
         textDefault:        'Selected text',
-        textTitle:          'Hyperlink Settings'
+        textTitle:          'Hyperlink Settings',
+        textExternal:       'External Link',
+        textInternal:       'Place in Document',
+        txtBeginning: 'Beginning of document',
+        txtHeadings: 'Headings',
+        txtBookmarks: 'Bookmarks'
     }, DE.Views.HyperlinkSettingsDialog || {}))
 });

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

@@ -318,7 +318,7 @@ define([
             if (this.api) {
                 var section = this.api.asc_GetSectionProps(),
                     ratio = (this._state.Height>0) ? this._state.Width/this._state.Height : 1,
-                    pagew = section.get_W() - section.get_LeftMargin() - section.get_RightMargin(),
+                    pagew = this.api.asc_GetCurrentColumnWidth(),
                     pageh = section.get_H() - section.get_TopMargin() - section.get_BottomMargin(),
                     pageratio = pagew/pageh,
                     w, h;

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

@@ -101,6 +101,10 @@ define([
                     me.fireEvent('links:hyperlink');
                 });
             });
+
+            this.btnBookmarks.on('click', function (b, e) {
+                me.fireEvent('links:bookmarks');
+            });
         }
 
         return {
@@ -161,6 +165,15 @@ define([
                 _injectComponent('#slot-btn-contents-update', this.btnContentsUpdate);
                 this.paragraphControls.push(this.btnContentsUpdate);
 
+                this.btnBookmarks = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-bookmarks',
+                    caption: this.capBtnBookmarks,
+                    disabled: true
+                });
+                _injectComponent('#slot-btn-bookmarks', this.btnBookmarks);
+                this.paragraphControls.push(this.btnBookmarks);
+
                 this._state = {disabled: false};
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
@@ -255,6 +268,8 @@ define([
                         btn.updateHint(me.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
                     });
 
+                    me.btnBookmarks.updateHint(me.tipBookmarks);
+
                     setEvents.call(me);
                 });
             },
@@ -293,7 +308,9 @@ define([
             capBtnInsFootnote: 'Footnotes',
             confirmDeleteFootnotes: 'Do you want to delete all footnotes?',
             capBtnInsLink: 'Hyperlink',
-            tipInsertHyperlink: 'Add Hyperlink'
+            tipInsertHyperlink: 'Add Hyperlink',
+            capBtnBookmarks: 'Bookmark',
+            tipBookmarks: 'Create a bookmark'
         }
     }()), DE.Views.Links || {}));
 });

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);
@@ -1519,7 +1488,7 @@ define([
                 this.btnDecLeftOffset.updateHint(this.tipDecPrLeft + Common.Utils.String.platformKey('Ctrl+Shift+M'));
                 this.btnIncLeftOffset.updateHint(this.tipIncPrLeft + Common.Utils.String.platformKey('Ctrl+M'));
                 this.btnLineSpace.updateHint(this.tipLineSpace);
-                this.btnShowHidenChars.updateHint(this.tipShowHiddenChars);
+                this.btnShowHidenChars.updateHint(this.tipShowHiddenChars + Common.Utils.String.platformKey('Ctrl+*'));
                 this.btnMarkers.updateHint(this.tipMarkers);
                 this.btnNumbers.updateHint(this.tipNumbers);
                 this.btnMultilevels.updateHint(this.tipMultilevels);
@@ -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,18 @@
   "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",
+  "DE.Views.BookmarksDialog.textSort": "Sort by",
+  "DE.Views.BookmarksDialog.textName": "Name",
+  "DE.Views.BookmarksDialog.textAdd": "Add",
+  "DE.Views.BookmarksDialog.textGoto": "Go to",
+  "DE.Views.BookmarksDialog.textDelete": "Delete",
+  "DE.Views.BookmarksDialog.textClose": "Close",
+  "DE.Views.BookmarksDialog.textHidden": "Hidden bookmarks",
   "DE.Views.ChartSettings.textAdvanced": "Show advanced settings",
   "DE.Views.ChartSettings.textArea": "Area",
   "DE.Views.ChartSettings.textBar": "Bar",
@@ -1169,6 +1187,11 @@
   "DE.Views.HyperlinkSettingsDialog.textUrl": "Link to",
   "DE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",
   "DE.Views.HyperlinkSettingsDialog.txtNotUrl": "This field should be a URL in the \"http://www.example.com\" format",
+  "DE.Views.HyperlinkSettingsDialog.textExternal": "External Link",
+  "DE.Views.HyperlinkSettingsDialog.textInternal": "Place in Document",
+  "DE.Views.HyperlinkSettingsDialog.txtBeginning": "Beginning of document",
+  "DE.Views.HyperlinkSettingsDialog.txtHeadings": "Headings",
+  "DE.Views.HyperlinkSettingsDialog.txtBookmarks": "Bookmarks",
   "DE.Views.ImageSettings.textAdvanced": "Show advanced settings",
   "DE.Views.ImageSettings.textEdit": "Edit",
   "DE.Views.ImageSettings.textEditObject": "Edit Object",
@@ -1283,6 +1306,8 @@
   "DE.Views.Links.tipContentsUpdate": "Refresh table of contents",
   "DE.Views.Links.tipInsertHyperlink": "Add hyperlink",
   "DE.Views.Links.tipNotes": "Insert or edit footnotes",
+  "DE.Views.Links.capBtnBookmarks": "Bookmark",
+  "DE.Views.Links.tipBookmarks": "Create a bookmark",
   "DE.Views.MailMergeEmailDlg.cancelButtonText": "Cancel",
   "DE.Views.MailMergeEmailDlg.filePlaceholder": "PDF",
   "DE.Views.MailMergeEmailDlg.okButtonText": "Send",
@@ -1745,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",
@@ -1806,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",
@@ -1863,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/documenteditor/main/resources/less/rightmenu.less

@@ -31,6 +31,10 @@
         display: block;
     }
 
+    .padding-extra-small {
+        padding-bottom: 2px;
+    }
+
     .padding-small {
         padding-bottom: 8px;
     }

apps/documenteditor/main/resources/less/toolbar.less

@@ -401,6 +401,8 @@
     font: 11px arial;
     white-space: nowrap;
     letter-spacing: 1px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #id-toolbar-menu-auto-fontcolor > a.selected {

apps/presentationeditor/embed/js/ApplicationController.js

@@ -224,6 +224,9 @@ var ApplicationController = new(function(){
         }
         hidePreloader();
 
+        var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -1);
+        (zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
+
         if ( !embedConfig.shareUrl )
             $('#idt-share').hide();
 
@@ -411,7 +414,6 @@ var ApplicationController = new(function(){
         api.asc_setViewMode(true);
         api.asc_LoadDocument();
         api.Resize();
-        api.zoomFitToPage();
     }
 
     function onOpenDocument(progress) {
@@ -545,7 +547,6 @@ var ApplicationController = new(function(){
     function onDocumentResize() {
         if (api) {
             api.Resize();
-            api.zoomFitToPage();
         }
     }
 

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);
                 }
             },
 
@@ -1625,6 +1613,7 @@ define([
                                 Common.localStorage.setItem("pe-settings-coauthmode", 0);
                                 this.api.asc_SetFastCollaborative(false);
                                 Common.Utils.InternalSettings.set("pe-settings-coauthmode", false);
+                                this.getApplication().getController('Common.Controllers.ReviewChanges').applySettings();
                                 this._state.fastCoauth = false;
                             }
                             this.onEditComplete();

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/DocumentHolder.js

@@ -530,12 +530,13 @@ define([
                         ToolTip = getUserName(moveData.get_UserId());
 
                         showPoint = [moveData.get_X()+me._XY[0], moveData.get_Y()+me._XY[1]];
+                        var maxwidth = showPoint[0];
                         showPoint[0] = me._BodyWidth - showPoint[0];
                         showPoint[1] -= ((moveData.get_LockedObjectType()==2) ? me._TtHeight : 0);
 
                         if (showPoint[1] > me._XY[1] && showPoint[1]+me._TtHeight < me._XY[1]+me._Height)  {
                             src.text(ToolTip);
-                            src.css({visibility: 'visible', top: showPoint[1] + 'px', right: showPoint[0] + 'px'});
+                            src.css({visibility: 'visible', top: showPoint[1] + 'px', right: showPoint[0] + 'px', 'max-width': maxwidth + 'px'});
                         }
                     }
                     /** coauthoring end **/

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

@@ -294,8 +294,13 @@ define([
                             me.previewControls.css('display', 'none');
                             me.$el.css('cursor', 'none');
                         }, 3000);
-
                 });
+                if (!me.previewControls.hasClass('over')) {
+                    me.timerMove = setTimeout(function () {
+                        me.previewControls.css('display', 'none');
+                        me.$el.css('cursor', 'none');
+                    }, 3000);
+                }
             }, 1000);
             $('#viewport-vbox-layout').css('z-index','0');
             this.fireEvent('editcomplete', this);

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

@@ -69,14 +69,14 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box" style="height: 270px;">',
-                    '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.textLinkType + '</label>',
+                '<div class="box" style="height: 250px;">',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-type" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
-                            '<label style="font-weight: bold;">' + this.strLinkTo + ' *</label>',
+                            '<label>' + this.strLinkTo + ' *</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
@@ -89,11 +89,11 @@ define([
                         '<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>',
                     '</div>',
                     '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.strDisplay + '</label>',
+                        '<label>' + this.strDisplay + '</label>',
                     '</div>',
                     '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.textTipText + '</label>',
+                        '<label>' + this.textTipText + '</label>',
                     '</div>',
                         '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
@@ -116,23 +116,22 @@ define([
             var me = this,
                 $window = this.getChild();
 
-            me._arrTypeSrc = [
-                {displayValue: me.textInternalLink,   value: c_oHyperlinkType.InternalLink},
-                {displayValue: me.textExternalLink,   value: c_oHyperlinkType.WebLink}
-            ];
-
-            me.cmbLinkType = new Common.UI.ComboBox({
-                el: $('#id-dlg-hyperlink-type'),
-                cls: 'input-group-nr',
-                style: 'width: 100%;',
-                menuStyle: 'min-width: 318px;',
-                editable: false,
-                data: this._arrTypeSrc
+            me.btnExternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-external'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
             });
-            me.cmbLinkType.setValue(me._arrTypeSrc[1].value);
-            me.cmbLinkType.on('selected', _.bind(function(combo, record) {
-                this.ShowHideElem(record.value);
-            }, me));
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.InternalLink));
 
             me.inputUrl = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-url'),
@@ -217,7 +216,7 @@ define([
                 var me = this;
 
                 var type = me.parseUrl(props.get_Value());
-                me.cmbLinkType.setValue(type);
+                (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
                 me.ShowHideElem(type);
                 
                 if (props.get_Text()!==null) {
@@ -239,7 +238,7 @@ define([
             var me      = this,
                 props   = new Asc.CHyperlinkProperty();
             var def_display = '';
-            if (me.cmbLinkType.getValue() == c_oHyperlinkType.InternalLink) {
+            if (this.btnInternal.isActive()) {//InternalLink
                 var url = "ppaction://hlink";
                 var tip = '';
                 var txttip = me.inputTip.getValue();
@@ -298,7 +297,7 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = (this.cmbLinkType.getValue() == c_oHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
+                    var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
@@ -321,6 +320,10 @@ define([
             this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
         },
 
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
         parseUrl: function(url) {
             if (url===null || url===undefined || url=='' )
                 return c_oHyperlinkType.WebLink;
@@ -364,13 +367,12 @@ define([
         },
 
         textTitle:          'Hyperlink Settings',
-        textInternalLink:   'Place In This Document',
-        textExternalLink:   'File or Web Page',
+        textInternalLink:   'Slide In This Presentation',
+        textExternalLink:   'External Link',
         textEmptyLink:      'Enter link here',
         textEmptyDesc:      'Enter caption here',
         textEmptyTooltip:   'Enter tooltip here',
         txtSlide:           'Slide',
-        textLinkType:       'Link Type',
         strDisplay:         'Display',
         textTipText:        'Screen Tip Text',
         strLinkTo:          'Link To',

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",
@@ -980,7 +988,7 @@
   "PE.Views.HyperlinkSettingsDialog.textEmptyTooltip": "Enter tooltip here",
   "PE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
   "PE.Views.HyperlinkSettingsDialog.textInternalLink": "Slide In This Presentation",
-  "PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
+  "del_PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
   "PE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "PE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "PE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",
@@ -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/presentationeditor/main/resources/less/toolbar.less

@@ -341,6 +341,8 @@
     font: 11px arial;
     white-space: nowrap;
     letter-spacing: 1px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .item-equation {

apps/spreadsheeteditor/embed/js/ApplicationController.js

@@ -353,6 +353,8 @@ var ApplicationController = new(function(){
                 case Asc.c_oAscAsyncAction.Open:
                     if (api) {
                         api.asc_Resize();
+                        var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom)/100 : 1);
+                        api.asc_setZoom(zf>0 ? zf : 1);
                     }
 
                     onDocumentContentReady();

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),
@@ -260,6 +262,9 @@ define([
                         }
                     }, this)
                 });
+            } else if (format == Asc.c_oAscFileType.PDF) {
+                menu.hide();
+                Common.NotificationCenter.trigger('download:settings', this.leftMenu);
             } else {
                 this.api.asc_DownloadAs(format);
                 menu.hide();
@@ -342,6 +347,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) {
@@ -410,7 +412,10 @@ define([
 
                 if ( !_format || _supported.indexOf(_format) < 0 )
                     _format = Asc.c_oAscFileType.XLSX;
-                this.api.asc_DownloadAs(_format, true);
+                if (_format == Asc.c_oAscFileType.PDF)
+                    Common.NotificationCenter.trigger('download:settings', this, true);
+                else
+                    this.api.asc_DownloadAs(_format, true);
             },
 
             onProcessMouse: function(data) {
@@ -425,11 +430,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 +916,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 +1417,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 +1426,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);
                 }
             },
 
@@ -1854,6 +1848,7 @@ define([
                                 Common.localStorage.setItem("sse-settings-coauthmode", 0);
                                 this.api.asc_SetFastCollaborative(false);
                                 Common.Utils.InternalSettings.set("sse-settings-coauthmode", false);
+                                this.getApplication().getController('Common.Controllers.ReviewChanges').applySettings();
                                 this._state.fastCoauth = false;
                             }
                             this.onEditComplete();

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

@@ -69,7 +69,8 @@ define([
         onAfterRender: function(view) {
             this.printSettings.cmbSheet.on('selected', _.bind(this.comboSheetsChange, this, this.printSettings));
             this.printSettings.btnOk.on('click', _.bind(this.querySavePrintSettings, this));
-            Common.NotificationCenter.on('print', _.bind(this.openPrintSettings, this));
+            Common.NotificationCenter.on('print', _.bind(this.openPrintSettings, this, 'print'));
+            Common.NotificationCenter.on('download:settings', _.bind(this.openPrintSettings, this, 'download'));
             this.registerControlEvents(this.printSettings);
         },
 
@@ -219,9 +220,11 @@ define([
             }
         },
 
-        openPrintSettings: function(btn) {
+        openPrintSettings: function(type, cmp, asUrl) {
             if (this.api) {
+                this.asUrl = asUrl;
                 this.printSettingsDlg = (new SSE.Views.PrintSettings({
+                    type: type,
                     handler: _.bind(this.resultPrintSettings,this),
                     afterrender: _.bind(function() {
                         this._changedProps = [];
@@ -245,10 +248,12 @@ define([
                     this.adjPrintParams.asc_setPrintType(printtype);
                     Common.localStorage.setItem("sse-print-settings-range", printtype);
 
-                    this.api.asc_Print(this.adjPrintParams, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera);
-
-                    Common.component.Analytics.trackEvent('Print');
-                    Common.component.Analytics.trackEvent('ToolBar', 'Print');
+                    if ( this.printSettingsDlg.type=='print' )
+                        this.api.asc_Print(this.adjPrintParams, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera);
+                    else
+                        this.api.asc_DownloadAs(Asc.c_oAscFileType.PDF, this.asUrl, this.adjPrintParams);
+                    Common.component.Analytics.trackEvent((this.printSettingsDlg.type=='print') ? 'Print' : 'DownloadAs');
+                    Common.component.Analytics.trackEvent('ToolBar', (this.printSettingsDlg.type=='print') ? 'Print' : 'DownloadAs');
                     Common.NotificationCenter.trigger('edit:complete', view);
                 } else
                     return true;

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,
@@ -101,7 +107,10 @@ define([
                         if ( !_format || _supported.indexOf(_format) < 0 )
                             _format = Asc.c_oAscFileType.PDF;
 
-                        _main.api.asc_DownloadAs(_format);
+                        if (_format == Asc.c_oAscFileType.PDF)
+                            Common.NotificationCenter.trigger('download:settings', this.toolbar);
+                        else
+                            _main.api.asc_DownloadAs(_format);
                     },
                     'go:editor': function() {
                         Common.Gateway.requestEditRights();
@@ -242,8 +251,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 +309,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 +329,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 +385,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 +398,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 +494,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 +504,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 +609,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 +673,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 +690,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 +1360,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 +1465,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 +1662,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 +1713,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 +1851,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 +1983,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 +2013,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 +2345,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 +2908,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 +2947,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 +2965,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/CellEditor.js

@@ -81,8 +81,11 @@ define([
             this.$btnfunc = $('#ce-func-label', this.el);
 
             var me = this;
-            this.$cellname.on('focusin', function(e){
-                me.$cellname.select().one('mouseup', function (e) {e.preventDefault();});
+            this.$cellname.on('focus', function(e){
+                var txt = me.$cellname[0];
+                txt.selectionStart = 0;
+                txt.selectionEnd = txt.value.length;
+                txt.scrollLeft = txt.scrollWidth;
             });
 
             this.$btnfunc.addClass('disabled');

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

@@ -63,18 +63,17 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div class="input-row">',
-                        '<label>' + this.textLinkType + '</label>',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
                     '</div>',
-                    '<div class="input-row" id="id-dlg-hyperlink-type" style="margin-bottom: 5px;">',
-                    '</div>',
-                    '<div id="id-dlg-hyperlink-external">',
+                    '<div id="id-external-link">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + ' *</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-internal" style="display: none;">',
+                    '<div id="id-internal-link" class="hidden">',
                         '<div class="input-row">',
                             '<label style="width: 50%;">' + this.strSheet + '</label>',
                             '<label style="width: 50%;">' + this.strRange + ' *</label>',
@@ -111,20 +110,22 @@ define([
             var $window = this.getChild(),
                 me = this;
 
-            me.cmbLinkType = new Common.UI.ComboBox({
-                el      : $('#id-dlg-hyperlink-type'),
-                cls     : 'input-group-nr',
-                editable: false,
-                menuStyle: 'min-width: 100%;',
-                data    : [
-                    {displayValue: this.textInternalLink, value: Asc.c_oAscHyperlinkType.RangeLink},
-                    {displayValue: this.textExternalLink, value: Asc.c_oAscHyperlinkType.WebLink}
-                ]
-            }).on('selected', function(combo, record) {
-                $('#id-dlg-hyperlink-external')[record.value == Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
-                $('#id-dlg-hyperlink-internal')[record.value != Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
+            me.btnExternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-external'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
             });
-            me.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.RangeLink));
 
             me.cmbSheets = new Common.UI.ComboBox({
                 el      : $('#id-dlg-hyperlink-sheet'),
@@ -182,6 +183,9 @@ define([
 
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
+
+            me.externalPanel = $window.find('#id-external-link');
+            me.internalPanel = $window.find('#id-internal-link');
         },
 
         show: function() {
@@ -198,20 +202,18 @@ define([
                 var me = this;
 
                 this.cmbSheets.setData(settings.sheets);
+                var type = (settings.props) ? settings.props.asc_getType() : Asc.c_oAscHyperlinkType.WebLink;
+                (type == Asc.c_oAscHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
+                me.ShowHideElem(type);
+                me.btnInternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.WebLink));
+                me.btnExternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.RangeLink));
+
                 if (!settings.props) {
-                    this.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
-                    this.cmbLinkType.setDisabled(!settings.allowInternal);
                     this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.text);
                     this.focusedInput = this.inputUrl.cmpEl.find('input');
                     this.cmbSheets.setValue(settings.currentSheet);
                 } else {
-                    this.cmbLinkType.setValue(settings.props.asc_getType());
-                    this.cmbLinkType.setDisabled(!settings.allowInternal);
-
-                    if (settings.props.asc_getType() == Asc.c_oAscHyperlinkType.RangeLink) {
-                        $('#id-dlg-hyperlink-external').hide();
-                        $('#id-dlg-hyperlink-internal').show();
-
+                    if (type == Asc.c_oAscHyperlinkType.RangeLink) {
                         this.cmbSheets.setValue(settings.props.asc_getSheet());
                         this.inputRange.setValue(settings.props.asc_getRange());
                         this.focusedInput = this.inputRange.cmpEl.find('input');
@@ -231,9 +233,9 @@ define([
         getSettings: function() {
             var props = new Asc.asc_CHyperlink(),
                 def_display = "";
-            props.asc_setType(this.cmbLinkType.getValue());
+            props.asc_setType(this.btnInternal.isActive() ? Asc.c_oAscHyperlinkType.RangeLink : Asc.c_oAscHyperlinkType.WebLink);
 
-            if (this.cmbLinkType.getValue() == Asc.c_oAscHyperlinkType.RangeLink) {
+            if (this.btnInternal.isActive()) {
                 props.asc_setSheet(this.cmbSheets.getValue());
                 props.asc_setRange(this.inputRange.getValue());
                 def_display = this.cmbSheets.getValue() + '!' + this.inputRange.getValue();
@@ -273,8 +275,8 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
-                        checkrange = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.RangeLink) ? this.inputRange.checkValidate() : true,
+                    var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
+                        checkrange = (this.btnInternal.isActive()) ? this.inputRange.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
@@ -296,6 +298,15 @@ define([
             this.close();
         },
 
+        ShowHideElem: function(value) {
+            this.externalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.RangeLink);
+        },
+
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
         textTitle:          'Hyperlink Settings',
         textInternalLink:   'Internal Data Range',
         textExternalLink:   'Web Link',
@@ -304,7 +315,6 @@ define([
         textEmptyTooltip:   'Enter tooltip here',
         strSheet:           'Sheet',
         strRange:           'Range',
-        textLinkType:       'Link Type',
         strDisplay:         'Display',
         textTipText:        'Screen Tip Text',
         strLinkTo:          'Link To',

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

@@ -55,25 +55,26 @@ define([    'text!spreadsheeteditor/main/app/template/PrintSettings.template',
         },
 
         initialize : function(options) {
+            this.type = options.type || 'print';
             _.extend(this.options, {
-                title: this.textTitle,
+                title: (this.type == 'print') ? this.textTitle : this.textTitlePDF,
                 template: [
                     '<div class="box" style="height:' + (this.options.height-85) + 'px;">',
                         '<div class="menu-panel" style="overflow: hidden;">',
-                            '<div style="height: 42px; line-height: 42px;" class="div-category">' + this.textPrintRange + '</div>',
+                            '<div style="height: 42px; line-height: 42px;" class="div-category">' + ((this.type == 'print') ? this.textPrintRange : this.textRange)+ '</div>',
                             '<div style="height: 52px; line-height: 66px;" class="div-category">' + this.textSettings + '</div>',
                             '<div style="height: 38px; line-height: 38px;" class="div-category">' + this.textPageSize + '</div>',
                             '<div style="height: 38px; line-height: 38px;" class="div-category">' + this.textPageOrientation + '</div>',
                             '<div style="height: 38px; line-height: 38px;" class="div-category">' + this.textPageScaling + '</div>',
                             '<div style="height: 108px; line-height: 33px;" class="div-category">' + this.strMargins + '</div>',
-                            '<div style="height: 58px; line-height: 40px;" class="div-category">' + this.strPrint + '</div>',
+                            '<div style="height: 58px; line-height: 40px;" class="div-category">' + ((this.type == 'print') ? this.strPrint : this.strShow) + '</div>',
                         '</div>',
                         '<div class="content-panel">' + _.template(contentTemplate)({scope: this}) + '</div>',
                     '</div>',
                     '<div class="separator horizontal"/>',
                     '<div class="footer justify">',
                         '<button id="printadv-dlg-btn-hide" class="btn btn-text-default" style="margin-right: 55px; width: 100px;">' + this.textHideDetails + '</button>',
-                        '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;  width: 150px;">' + this.btnPrint + '</button>',
+                        '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;  width: 150px;">' + ((this.type == 'print') ? this.btnPrint : this.btnDownload) + '</button>',
                         '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
                     '</div>'
                 ].join('')
@@ -145,12 +146,12 @@ define([    'text!spreadsheeteditor/main/app/template/PrintSettings.template',
 
             this.chPrintGrid = new Common.UI.CheckBox({
                 el: $('#printadv-dlg-chb-grid'),
-                labelText: this.textPrintGrid
+                labelText: (this.type == 'print') ? this.textPrintGrid : this.textShowGrid
             });
 
             this.chPrintRows = new Common.UI.CheckBox({
                 el: $('#printadv-dlg-chb-rows'),
-                labelText: this.textPrintHeadings
+                labelText: (this.type == 'print') ? this.textPrintHeadings : this.textShowHeadings
             });
 
             this.spnMarginTop = new Common.UI.MetricSpinner({
@@ -301,6 +302,13 @@ define([    'text!spreadsheeteditor/main/app/template/PrintSettings.template',
         cancelButtonText:       'Cancel',
         textHideDetails:        'Hide Details',
         textPageScaling:        'Scaling',
-        textSettings:           'Sheet Settings'
+        textSettings:           'Sheet Settings',
+        textTitlePDF:           'PDF Settings',
+        textShowGrid:           'Show Gridlines',
+        textShowHeadings:       'Show Rows and Columns Headings',
+        strShow:                'Show',
+        btnDownload:            'Save & Download',
+        textRange:              'Range'
+
     }, SSE.Views.PrintSettings || {}));
 });

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",
@@ -1286,7 +1296,7 @@
   "SSE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
   "SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Internal Data Range",
   "SSE.Views.HyperlinkSettingsDialog.textInvalidRange": "ERROR! Invalid cells range",
-  "SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
+  "del_SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
   "SSE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "SSE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "SSE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",
@@ -1497,6 +1507,12 @@
   "SSE.Views.PrintSettings.textSettings": "Sheet Settings",
   "SSE.Views.PrintSettings.textShowDetails": "Show Details",
   "SSE.Views.PrintSettings.textTitle": "Print Settings",
+  "SSE.Views.PrintSettings.textTitlePDF": "PDF Settings",
+  "SSE.Views.PrintSettings.textShowGrid": "Show Gridlines",
+  "SSE.Views.PrintSettings.textShowHeadings": "Show Rows and Columns Headings",
+  "SSE.Views.PrintSettings.strShow": "Show",
+  "SSE.Views.PrintSettings.btnDownload": "Save & Download",
+  "SSE.Views.PrintSettings.textRange": "Range",
   "SSE.Views.RightMenu.txtChartSettings": "Chart settings",
   "SSE.Views.RightMenu.txtImageSettings": "Image settings",
   "SSE.Views.RightMenu.txtParagraphSettings": "Text settings",
@@ -1755,7 +1771,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",
@@ -1763,11 +1779,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",
@@ -1804,7 +1820,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",
@@ -1855,7 +1871,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",