Merge pull request #1541 from ONLYOFFICE/feature/header-share

Feature/header share

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

@@ -43,6 +43,10 @@ define([
             "toolbar-header-spreadsheet",
             "toolbar-header-presentation",
 
+            "text-toolbar-header-on-background-document",
+            "text-toolbar-header-on-background-spreadsheet",
+            "text-toolbar-header-on-background-presentation",
+
             "background-normal",
             "background-toolbar",
             "background-toolbar-additional",

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

@@ -52,7 +52,7 @@ define([
 
     Common.Views.Header =  Backbone.View.extend(_.extend(function(){
         var storeUsers, appConfig;
-        var $userList, $panelUsers, $btnUsers;
+        var $userList, $panelUsers, $btnUsers, $btnUserName;
         var _readonlyRights = false;
 
         var templateUserItem =
@@ -85,28 +85,34 @@ define([
                                 '</div>' +
                                 '<div class="hedset" data-layout-name="header-users">' +
                                     // '<span class="btn-slot text" id="slot-btn-users"></span>' +
-                                    '<section id="tlb-box-users" class="box-cousers dropdown"">' +
+                                    '<section id="tlb-box-users" class="box-cousers dropdown">' +
-                                        '<div class="btn-users" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
+                                        '<div class="btn-users dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
-                                            '<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
+                                            '<div class="inner-box-icon">' +
-                                            '<label class="caption">&plus;</label>' +
+                                                '<svg class=""><use xlink:href="#svg-icon-users"></use></svg>' +
+                                            '</div>' +
+                                            '<label class="caption"></label>' +
                                         '</div>' +
                                         '<div class="cousers-menu dropdown-menu">' +
                                             '<label id="tlb-users-menu-descr"><%= tipUsers %></label>' +
                                             '<div class="cousers-list"></div>' +
-                                            '<label id="tlb-change-rights" class="link"><%= txtAccessRights %></label>' +
                                         '</div>' +
                                     '</section>'+
                                 '</div>' +
+                                '<div class="hedset">' +
+                                    '<div class="btn-slot" id="slot-btn-share"></div>' +
+                                '</div>' +
                                 '<div class="hedset">' +
                                     '<div class="btn-slot" id="slot-btn-mode"></div>' +
                                     '<div class="btn-slot" id="slot-btn-back"></div>' +
                                     '<div class="btn-slot" id="slot-btn-favorite"></div>' +
-                                    '<div class="btn-slot" id="slot-btn-options"></div>' +
                                 '</div>' +
                                 '<div class="hedset">' +
-                                    '<div class="btn-slot" id="slot-btn-user-name"></div>' +
+                                    // '<div class="btn-slot slot-btn-user-name"></div>' +
-                                    '<div class="btn-current-user btn-header hidden">' +
+                                    '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
-                                        '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</button>' +
+                                    '<div class="btn-current-user hidden">' +
+                                        '<div class="color-user-name"></div>' +
                                     '</div>' +
                                 '</div>' +
                             '</section>' +
@@ -128,13 +134,21 @@ define([
                                     // '<label id="title-doc-name" /></label>' +
                                     '<input id="title-doc-name" autofill="off" autocomplete="off"/></input>' +
                                 '</div>' +
-                                '<label id="title-user-name"></label>' +
+                                '<div class="hedset">' +
+                                    // '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</button>' +
+                                    '<div class="btn-current-user hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</div>' +
+                                '</div>' +
                             '</section>';
 
         function onResetUsers(collection, opts) {
             var usercount = collection.getVisibleEditingCount();
             if ( $userList ) {
-                if ( usercount > 1 || usercount > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit) {
+                if (usercount > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) {
                     $userList.html(templateUserList({
                         users: collection.chain().filter(function(item){return item.get('online') && !item.get('view') && !item.get('hidden')}).groupBy(function(item) {return item.get('idOriginal');}).value(),
                         usertpl: _.template(templateUserItem),
@@ -165,53 +179,27 @@ define([
         function applyUsers(count, originalCount) {
             if (!$btnUsers) return;
 
-            var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit; // has other user(s) who edit document
+            var has_edit_users = count > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit); // has other user(s) who edit document
             if ( has_edit_users ) {
-                $btnUsers
-                    .attr('data-toggle', 'dropdown')
-                    .addClass('dropdown-toggle')
-                    .menu = true;
-
                 $panelUsers['show']();
+                $btnUsers.find('.caption').html(originalCount);
             } else {
-                $btnUsers
+                $panelUsers['hide']();
-                    .removeAttr('data-toggle')
-                    .removeClass('dropdown-toggle')
-                    .menu = false;
-
-                $panelUsers[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide']();
-            }
-
-            $btnUsers.find('.caption')
-                .css({'font-size': ((has_edit_users) ? '12px' : '14px'),
-                    'margin-top': ((has_edit_users) ? '0' : '-1px')})
-                .html((has_edit_users) ? originalCount : '&plus;');
-
-            var usertip = $btnUsers.data('bs.tooltip');
-            if ( usertip ) {
-                usertip.options.title = (has_edit_users) ? usertip.options.titleExt : usertip.options.titleNorm;
-                usertip.setContent();
             }
         }
 
         function onLostEditRights() {
             _readonlyRights = true;
-            $panelUsers && $panelUsers.find('#tlb-change-rights').hide();
+            this.btnShare && this.btnShare.setVisible(false);
-            $btnUsers && !$btnUsers.menu && $panelUsers.hide();
         }
 
         function onUsersClick(e) {
-            if ( !$btnUsers.menu ) {
+            var usertip = $btnUsers.data('bs.tooltip');
-                $panelUsers.removeClass('open');
+            if ( usertip ) {
-                Common.NotificationCenter.trigger('collaboration:sharing');
+                if ( usertip.dontShow===undefined)
-            } else {
+                    usertip.dontShow = true;
-                var usertip = $btnUsers.data('bs.tooltip');
-                if ( usertip ) {
-                    if ( usertip.dontShow===undefined)
-                        usertip.dontShow = true;
 
-                    usertip.hide();
+                usertip.hide();
-                }
             }
         }
 
@@ -255,6 +243,14 @@ define([
                 Common.NotificationCenter.trigger('markfavorite', !me.options.favorite);
             });
 
+            if (me.btnShare) {
+                me.btnShare.on('click', function (e) {
+                    Common.NotificationCenter.trigger('collaboration:sharing');
+                });
+                me.btnShare.updateHint(me.tipAccessRights);
+                me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings));
+            }
+
             if ( me.logo )
                 me.logo.children(0).on('click', function (e) {
                     var _url = !!me.branding && !!me.branding.logo && (me.branding.logo.url!==undefined) ?
@@ -277,33 +273,16 @@ define([
 
                 var editingUsers = storeUsers.getVisibleEditingCount();
                 $btnUsers.tooltip({
-                    title: (editingUsers > 1 || editingUsers>0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? me.tipViewUsers : me.tipAccessRights,
+                    title: me.tipUsers,
-                    titleNorm: me.tipAccessRights,
-                    titleExt: me.tipViewUsers,
                     placement: 'bottom',
                     html: true
                 });
-
                 $btnUsers.on('click', onUsersClick.bind(me));
-
+                $panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide']();
-                var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
-                $labelChangeRights.on('click', function(e) {
-                    $panelUsers.removeClass('open');
-                    Common.NotificationCenter.trigger('collaboration:sharing');
-                });
-
-                $labelChangeRights[(!mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings))?'show':'hide']();
-                $panelUsers[(editingUsers > 1  || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings)) ? 'show' : 'hide']();
             }
 
-
             if (appConfig.user.guest && appConfig.canRenameAnonymous) {
-                if (me.labelUserName) {
+                if (me.btnUserName) {
-                    me.labelUserName.addClass('clickable');
-                    me.labelUserName.on('click', function (e) {
-                        Common.NotificationCenter.trigger('user:rename');
-                    });
-                } else if (me.btnUserName) {
                     me.btnUserName.on('click', function (e) {
                         Common.NotificationCenter.trigger('user:rename');
                     });
@@ -353,9 +332,6 @@ define([
                     });
                 }
             }
-
-            if ( me.btnOptions )
-                me.btnOptions.updateHint(me.tipViewSettings);
         }
 
         function onFocusDocName(e){
@@ -413,9 +389,6 @@ define([
             }
         }
 
-        function onContentThemeChangedToDark(isdark) {
-        }
-
         return {
             options: {
                 branding: {},
@@ -445,7 +418,6 @@ define([
                     id: 'btn-goback',
                     cls: 'btn-header',
                     iconCls: 'toolbar__icon icon--inverse btn-goback',
-                    split: true,
                     dataHint: '0',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'big'
@@ -458,17 +430,6 @@ define([
                     reset   : onResetUsers
                 });
 
-                me.btnOptions = new Common.UI.Button({
-                    cls: 'btn-header no-caret',
-                    iconCls: 'toolbar__icon icon--inverse btn-ic-options',
-                    menu: true,
-                    dataHint: '0',
-                    dataHintDirection: 'bottom',
-                    dataHintOffset: 'big'
-                });
-
-                me.mnuZoom = {options: {value: 100}};
-
                 me.btnFavorite = new Common.UI.Button({
                     id: 'btn-favorite',
                     cls: 'btn-header',
@@ -480,10 +441,9 @@ define([
 
                 Common.NotificationCenter.on({
                     'app:ready': function(mode) {Common.Utils.asyncCall(onAppReady, me, mode);},
-                    'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}
+                    'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);},
+                    'collaboration:sharingdeny': function(mode) {Common.Utils.asyncCall(onLostEditRights, me, mode);}
                 });
-                Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
-                Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this));
                 Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
             },
 
@@ -524,7 +484,7 @@ define([
                 if ( role == 'right' ) {
                     var $html = $(_.template(templateRightBox)({
                         tipUsers: this.labelCoUsersDescr,
-                        txtAccessRights: this.txtAccessRights
+                        textShare: this.textShare
                     }));
 
                     if ( !me.labelDocName ) {
@@ -564,22 +524,43 @@ define([
                         if ( config.canEdit && config.canRequestEditRights )
                             this.btnEdit = createTitleButton('toolbar__icon icon--inverse btn-edit', $html.findById('#slot-hbtn-edit'), undefined, 'bottom', 'big');
                     }
-                    me.btnOptions.render($html.find('#slot-btn-options'));
 
                     if (!config.isEdit || config.customization && !!config.customization.compactHeader) {
-                        if (config.user.guest && config.canRenameAnonymous)
+                        if (config.user.guest && config.canRenameAnonymous) {
-                            me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('#slot-btn-user-name'), undefined, 'bottom', 'big' );
+                            me.btnUserName = new Common.UI.Button({
-                        else {
+                                el: $html.findById('.slot-btn-user-name'),
+                                cls: 'btn-header',
+                                dataHint:'0',
+                                dataHintDirection: 'bottom',
+                                dataHintOffset: 'big',
+                                visible: true
+                            });
+                            me.btnUserName.cmpEl.removeClass('hidden');
+                        } else {
                             me.elUserName = $html.find('.btn-current-user');
                             me.elUserName.removeClass('hidden');
                         }
+                        $btnUserName = $html.find('.color-user-name');
                         me.setUserName(me.options.userName);
                     }
 
+                    if (!_readonlyRights && config && (config.sharingSettingsUrl && config.sharingSettingsUrl.length || config.canRequestSharingSettings)) {
+                        me.btnShare = new Common.UI.Button({
+                            cls: 'btn-header btn-header-share',
+                            iconCls: 'toolbar__icon icon--inverse btn-users-share',
+                            caption: me.textShare,
+                            dataHint: '0',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'big'
+                        });
+                        me.btnShare.render($html.find('#slot-btn-share'));
+                    } else {
+                        $html.find('#slot-btn-share').hide();
+                    }
+
                     $userList = $html.find('.cousers-list');
                     $panelUsers = $html.find('.box-cousers');
-                    $btnUsers = $html.find('.btn-users');
+                    $btnUsers = $panelUsers.find('> .btn-users');
-
                     $panelUsers.hide();
                     return $html;
                 } else
@@ -591,7 +572,22 @@ define([
                     me.labelDocName.val( me.documentCaption );
                     me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
 
-                    me.labelUserName = $('> #title-user-name', $html);
+                    if (config.user.guest && config.canRenameAnonymous) {
+                        me.btnUserName = new Common.UI.Button({
+                            el: $html.findById('.slot-btn-user-name'),
+                            cls: 'btn-header',
+                            dataHint:'0',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'big',
+                            visible: true
+                        });
+                        me.btnUserName.cmpEl.removeClass('hidden');
+                    }
+                    else {
+                        me.elUserName = $html.find('.btn-current-user');
+                        me.elUserName.removeClass('hidden');
+                    }
+                    $btnUserName = $html.find('.color-user-name');
                     me.setUserName(me.options.userName);
 
                     if ( config.canPrint && config.isEdit ) {
@@ -761,23 +757,17 @@ define([
             },
 
             setUserName: function(name) {
-                if ( !!this.labelUserName ) {
+                this.options.userName = name;
-                    if ( !!name ) {
+                if ( this.btnUserName ) {
-                        this.labelUserName.text(name).show();
+                    this.btnUserName.updateHint(name);
-                    } else this.labelUserName.hide();
+                } else if (this.elUserName) {
-                } else {
+                    this.elUserName.tooltip({
-                    this.options.userName = name;
+                        title: Common.Utils.String.htmlEncode(name),
-                    if ( this.btnUserName ) {
+                        placement: 'cursor',
-                        this.btnUserName.updateHint(name);
+                        html: true
-                    } else if (this.elUserName) {
+                    });
-                        this.elUserName.tooltip({
-                            title: Common.Utils.String.htmlEncode(name),
-                            placement: 'cursor',
-                            html: true
-                        });
-                    }
                 }
-
+                $btnUserName && $btnUserName.text(this.getInitials(name));
                 return this;
             },
 
@@ -786,24 +776,23 @@ define([
                     return this.btnSave;
                 else if (type == 'users')
                     return $panelUsers;
+                else if (type == 'share')
+                    return this.btnShare;
             },
 
             lockHeaderBtns: function (alias, lock) {
                 var me = this;
                 if ( alias == 'users' ) {
-                    if ( lock )
+                    if ( lock ) {
-                        $btnUsers.addClass('disabled').attr('disabled', 'disabled'); else
+                        $btnUsers.addClass('disabled').attr('disabled', 'disabled');
+                    } else {
                         $btnUsers.removeClass('disabled').removeAttr('disabled');
+                    }
+                    if (me.btnShare) {
+                        me.btnShare.setDisabled(lock);
+                    }
                 } else if ( alias == 'rename-user' ) {
-                    if (me.labelUserName) {
+                    if (me.btnUserName) {
-                        if ( lock ) {
-                            me.labelUserName.removeClass('clickable');
-                            me.labelUserName.addClass('disabled');
-                        } else {
-                            me.labelUserName.addClass('clickable');
-                            me.labelUserName.removeClass('disabled');
-                        }
-                    } else if (me.btnUserName) {
                         me.btnUserName.setDisabled(lock);
                     }
                 } else {
@@ -824,20 +813,21 @@ define([
                     switch ( alias ) {
                     case 'undo': _lockButton(me.btnUndo); break;
                     case 'redo': _lockButton(me.btnRedo); break;
-                    case 'opts': _lockButton(me.btnOptions); break;
                     default: break;
                     }
                 }
             },
 
-            fakeMenuItem: function() {
+            getInitials: function(name) {
-                return {
+                var fio = name.split(' ');
-                    conf: {checked: false, disabled: false},
+                var initials = fio[0].substring(0, 1).toUpperCase();
-                    setChecked: function (val) { this.conf.checked = val; },
+                for (var i = fio.length-1; i>0; i--) {
-                    isChecked: function () { return this.conf.checked; },
+                    if (fio[i][0]!=='(' && fio[i][0]!==')') {
-                    setDisabled: function (val) { this.conf.disabled = val; },
+                        initials += fio[i].substring(0, 1).toUpperCase();
-                    isDisabled: function () { return this.conf.disabled; }
+                        break;
-                };
+                    }
+                }
+                return initials;
             },
 
             textBack: 'Go to Documents',
@@ -846,6 +836,7 @@ define([
             tipAccessRights: 'Manage document access rights',
             labelCoUsersDescr: 'Document is currently being edited by several users.',
             tipViewUsers: 'View users and manage document access rights',
+            tipUsers: 'View users',
             tipDownload: 'Download file',
             tipPrint: 'Print file',
             tipGoEdit: 'Edit current file',
@@ -860,7 +851,8 @@ define([
             tipViewSettings: 'View Settings',
             textRemoveFavorite: 'Remove from Favorites',
             textAddFavorite: 'Mark as favorite',
-            textHideNotes: 'Hide Notes'
+            textHideNotes: 'Hide Notes',
+            textShare: 'Share'
         }
     }(), Common.Views.Header || {}))
 });

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

@@ -178,4 +178,7 @@
     <symbol id="svg-icon-crypted" viewBox="0 0 20 20">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.00049C6.99987 4.99948 4 5.00023 4 5.00023V8.50023C4 10.5001 4.56284 15.9767 9.99961 17.0001C15.4364 15.9767 16 10.5001 16 8.50023V5.00023C16 5.00023 13.0001 4.99948 10 3.00049ZM14.0232 7.96528L12.9768 7.03517L9.42726 11.0284L6.94813 8.96247L6.05187 10.038L9.57274 12.972L14.0232 7.96528Z" fill="white"/>
     </symbol>
+    <symbol id="svg-icon-users" viewBox="0 0 28 20">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M27 10C27 14.9706 22.9706 19 18 19C13.0294 19 9 14.9706 9 10C9 5.02944 13.0294 1 18 1C22.9706 1 27 5.02944 27 10ZM28 10C28 15.5228 23.5228 20 18 20C15.3747 20 12.9857 18.9884 11.2016 17.3336C10.2212 17.7622 9.13838 18 8 18C3.58172 18 0 14.4183 0 10C0 5.58172 3.58172 2 8 2C9.13838 2 10.2212 2.23777 11.2016 2.66636C12.9857 1.01164 15.3747 0 18 0C23.5228 0 28 4.47715 28 10ZM10.4512 3.44117C9.68831 3.15594 8.86237 3 8 3C4.13401 3 1 6.13401 1 10C1 11.5218 1.48561 12.9302 2.31032 14.0786C2.59986 13.8548 2.9787 13.5869 3.43399 13.319C4.5435 12.6664 6.13166 12 8 12C8.06722 12 8.13407 12.0009 8.20056 12.0026C8.13373 11.6738 8.08304 11.3392 8.04934 10.9996C8.03292 10.9999 8.01648 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C8.42609 5 8.83142 5.08883 9.19851 5.24898C9.54968 4.59978 9.97058 3.99383 10.4512 3.44117ZM8.76702 6.15236C8.53082 6.05419 8.27174 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10C8 8.63651 8.27289 7.33675 8.76702 6.15236ZM8.46271 13.0156C8.31059 13.0054 8.1563 13 8 13C6.36834 13 4.9565 13.5836 3.94101 14.181C3.54196 14.4157 3.20793 14.6503 2.95039 14.8478C4.22421 16.1743 6.01568 17 8 17C8.86237 17 9.68831 16.8441 10.4512 16.5588C9.56377 15.5384 8.87988 14.3362 8.46271 13.0156Z"/>
+    </symbol>
 </svg>

apps/common/main/resources/less/colors-table-classic.less

@@ -5,6 +5,10 @@
         --toolbar-header-spreadsheet: #40865c;
         --toolbar-header-presentation: #aa5252;
 
+        --text-toolbar-header-on-background-document: #38567A;
+        --text-toolbar-header-on-background-spreadsheet: #336B49;
+        --text-toolbar-header-on-background-presentation: #8D4444;
+
         --background-normal: #fff;
         --background-toolbar: #f1f1f1;
         --background-toolbar-additional: #f1f1f1;
@@ -55,7 +59,7 @@
         --icon-normal: #444;
         --icon-normal-pressed: #fff;
         --icon-inverse: #444;
-        --icon-toolbar-header: fade(#fff, 80%);
+        --icon-toolbar-header: #fff;
         --icon-notification-badge: #000;
         --icon-contrast-popover: #fff;
         --icon-success: #5b9f27;

apps/common/main/resources/less/colors-table-dark.less

@@ -5,6 +5,10 @@
         --toolbar-header-spreadsheet: #2a2a2a;
         --toolbar-header-presentation: #2a2a2a;
 
+        --text-toolbar-header-on-background-document: #2a2a2a;
+        --text-toolbar-header-on-background-spreadsheet: #2a2a2a;
+        --text-toolbar-header-on-background-presentation: #2a2a2a;
+
         --background-normal: #333;
         --background-toolbar: #404040;
         --background-toolbar-additional: #505050;
@@ -56,7 +60,7 @@
         --icon-normal: fade(#fff, 80%);
         --icon-normal-pressed: fade(#fff, 80%);
         --icon-inverse: #444;
-        --icon-toolbar-header: fade(#fff, 80%);
+        --icon-toolbar-header: #fff;
         --icon-notification-badge: #000;
         --icon-contrast-popover: #fff;
         --icon-success: #090;

apps/common/main/resources/less/colors-table-ie-fix.less

@@ -3,6 +3,10 @@
 @toolbar-header-spreadsheet-ie: #40865c;
 @toolbar-header-presentation-ie: #aa5252;
 
+@text-toolbar-header-on-background-document-ie: #38567A;
+@text-toolbar-header-on-background-spreadsheet-ie: #336B49;
+@text-toolbar-header-on-background-presentation-ie: #8D4444;
+
 @background-normal-ie: #fff;
 @background-toolbar-ie: #f1f1f1;
 @background-toolbar-additional-ie: #f1f1f1;
@@ -51,7 +55,7 @@
 @icon-normal-ie: #444;
 @icon-normal-pressed-ie: #fff;
 @icon-inverse-ie: #444;
-@icon-toolbar-header-ie: fade(#fff, 80%);
+@icon-toolbar-header-ie: #fff;
 @icon-notification-badge-ie: #000;
 @icon-contrast-popover-ie: #fff;
 @icon-success-ie: #5b9f27;

apps/common/main/resources/less/colors-table.less

@@ -15,6 +15,10 @@
     --toolbar-header-spreadsheet: #40865c;
     --toolbar-header-presentation: #aa5252;
 
+    --text-toolbar-header-on-background-document: #38567A;
+    --text-toolbar-header-on-background-spreadsheet: #336B49;
+    --text-toolbar-header-on-background-presentation: #8D4444;
+
     --background-normal: #fff;
     --background-toolbar: #f7f7f7;
     --background-toolbar-additional: #efefef;

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

@@ -162,143 +162,6 @@
     margin-top: 15px;
 }
 
-.btn-users {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    padding: 0 12px;
-    height: 100%;
-
-    .icon {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        background-repeat: no-repeat;
-        padding: 0;
-
-        &.icon--inverse {
-            background-position-x: @button-header-normal-icon-offset-x-ie;
-            background-position-x: @button-header-normal-icon-offset-x;
-        }
-    }
-
-    .caption {
-        cursor: pointer;
-        font-size: 14px;
-    }
-
-    &.disabled {
-        opacity: @component-disabled-opacity;
-        pointer-events: none;
-    }
-}
-
-.btn-current-user {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 40px;
-    padding: 0 10px;
-
-    .icon {
-        width: 20px;
-        height: 20px;
-        display: inline-block;
-        background-repeat: no-repeat;
-        padding: 0;
-
-        &.icon--inverse {
-            background-position-x: -20px;
-        }
-    }
-
-    svg.icon {
-        vertical-align: middle;
-
-        @media
-        only screen and (-webkit-min-device-pixel-ratio: 1.5),
-        only screen and (min-resolution: 1.5dppx),
-        only screen and (min-resolution: 144dpi) {
-            width:calc(~"28px/1.5");
-            height:calc(~"28px/1.5");
-        }
-    }
-}
-
-.cousers-menu {
-    position: fixed;
-    top: @height-tabs - 8px;
-    left: 100%;
-    margin-left: -285px;
-
-    padding: 14px;
-    width: 285px;
-    font-size: 12px;
-
-    z-index: 1042;
-
-    .top-title & {
-        top: @height-title + @height-tabs - 8px;
-    }
-
-    > label {
-        white-space: normal;
-    }
-
-    label {
-        color: @text-normal-ie;
-        color: @text-normal;
-    }
-
-    .cousers-list {
-        margin-top: 15px;
-
-        ul {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            max-height: 195px;
-            position: relative;
-
-            li {
-                list-style: none;
-                padding: 2px 0;
-                overflow: hidden;
-
-                &.offline, &.viewmode {
-                    display: none;
-                }
-            }
-        }
-
-        .color {
-            width: 12px;
-            height: 12px;
-            display: inline-block;
-            vertical-align: middle;
-            border: @scaled-one-px-value solid @border-toolbar;
-            margin: 0 5px 1px 0;
-        }
-
-        .user-name {
-            color: @text-normal-ie;
-            color: @text-normal;
-            font-size: 12px;
-            .font-weight-bold();
-            white-space: nowrap;
-            cursor: default;
-
-            label {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                vertical-align: middle;
-                max-width: 200px;
-                .font-weight-bold();
-            }
-        }
-    }
-}
-
 .hedset {
     font-size: 0;
     display: flex;
@@ -385,6 +248,204 @@
     }
 }
 
+.btn-users {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 8px 0 6px;
+    height: 100%;
+
+    .inner-box-icon {
+        width: 28px;
+        position: relative;
+
+        > svg {
+            position: absolute;
+            width: 28px;
+            height: 20px;
+            top: 50%;
+            margin-top: -10px;
+            fill: @icon-toolbar-header-ie;
+            fill: @icon-toolbar-header;
+        }
+    }
+
+    .caption {
+        cursor: pointer;
+        font-size: 9px;
+        margin-left: -18px;
+        width: 16px;
+        text-align: center;
+        overflow: hidden;
+    }
+
+    &:not(:disabled) {
+        .inner-box-icon, .caption {
+            opacity: @header-component-normal-icon-opacity;
+        }
+    }
+
+    &:hover:not(:disabled)  {
+        .inner-box-icon, .caption {
+            opacity: @header-component-hover-icon-opacity;
+        }
+    }
+
+    &:active:not(:disabled), &.active:not(:disabled) {
+        .inner-box-icon, .caption {
+            opacity: @header-component-active-icon-opacity;
+        }
+    }
+
+    &.disabled {
+        opacity: @component-disabled-opacity;
+        pointer-events: none;
+    }
+}
+
+.btn-header-share {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    width: auto;
+
+    .caption {
+        margin: 2px 0 0 2px;
+        color: @text-toolbar-header-ie;
+        color: @text-toolbar-header;
+    }
+
+    &:not(:disabled) {
+        .caption {
+            opacity: @header-component-normal-icon-opacity;
+        }
+    }
+
+    &:hover:not(:disabled)  {
+        .caption {
+            opacity: @header-component-hover-icon-opacity;
+        }
+    }
+
+    &:active:not(:disabled), &.active:not(:disabled) {
+        .caption {
+            opacity: @header-component-active-icon-opacity;
+        }
+    }
+}
+
+.btn-current-user {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 40px;
+    padding: 1px 3px;
+    border: var(--scaled-one-pixel, 1px) solid transparent;
+}
+
+.btn-current-user, .btn-header {
+    &:not(:disabled) .color-user-name {
+        opacity: @header-component-normal-icon-opacity;
+    }
+
+    &:active, &.active .color-user-name {
+        opacity: @header-component-active-icon-opacity;
+    }
+
+    &:hover:not(:disabled) .color-user-name {
+        opacity: @header-component-hover-icon-opacity;
+    }
+
+    .color-user-name {
+        width: 20px;
+        height: 20px;
+        border-radius: 20px;
+        background-color: @icon-toolbar-header-ie;
+        background-color: @icon-toolbar-header;
+        color: @toolbar-header-text-on-background-ie;
+        color: @toolbar-header-text-on-background;
+        font-size: 10px;
+        line-height: 20px;
+        overflow: hidden;
+        margin: 0 6px;
+        text-align: center;
+    }
+}
+
+.cousers-menu {
+    position: fixed;
+    top: @height-tabs - 8px;
+    left: 100%;
+    margin-left: -285px;
+
+    padding: 14px;
+    width: 285px;
+    font-size: 12px;
+
+    z-index: 1042;
+
+    .top-title & {
+        top: @height-title + @height-tabs - 8px;
+    }
+
+    > label {
+        white-space: normal;
+    }
+
+    label {
+        color: @text-normal-ie;
+        color: @text-normal;
+    }
+
+    .cousers-list {
+        margin-top: 15px;
+
+        ul {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            max-height: 195px;
+            position: relative;
+
+            li {
+                list-style: none;
+                padding: 2px 0;
+                overflow: hidden;
+
+                &.offline, &.viewmode {
+                    display: none;
+                }
+            }
+        }
+
+        .color {
+            width: 12px;
+            height: 12px;
+            display: inline-block;
+            vertical-align: middle;
+            border: @scaled-one-px-value solid @border-toolbar;
+            margin: 0 5px 1px 0;
+        }
+
+        .user-name {
+            color: @text-normal-ie;
+            color: @text-normal;
+            font-size: 12px;
+            .font-weight-bold();
+            white-space: nowrap;
+            cursor: default;
+
+            label {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                vertical-align: middle;
+                max-width: 200px;
+                .font-weight-bold();
+            }
+        }
+    }
+}
+
 #box-document-title {
     background-color: @header-background-color-ie;
     background-color: @header-background-color;
@@ -439,22 +500,6 @@
         border: 0 none;
         cursor: default;
    }
-    #title-user-name {
-        white-space: pre;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        text-align: right;
-        font-size: 11px;
-        width: 200px;
-        height: 100%;
-        padding: 0 12px;
-        line-height: @height-title;
-        pointer-events: none;
-        &.clickable {
-            cursor: pointer;
-            pointer-events: auto;
-        }
-   }
 
     .lr-separator {
         flex-grow: 1;

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

@@ -461,10 +461,29 @@
         }
 
         // TODO: move to appropriate module
-        .btn-header, .btn-users {
+        .btn-current-user, .btn-header  {
-            &:not(:active) .icon--inverse {
+            .color-user-name {
-                background-position-x: 0;
+                background-color: @text-normal-ie;
-                background-position-x: @button-small-normal-icon-offset-x;
+                background-color: @text-normal;
+                color: @text-inverse-ie;
+                color: @text-inverse;
+            }
+        }
+
+        .btn-header, .btn-users, .btn-header-share {
+            .icon {
+                &.icon--inverse {
+                    background-position-x: 0 !important;
+                    background-position-x: @button-small-normal-icon-offset-x !important;
+                }
+            }
+
+            &:active, &.active {
+                &:not(.disabled) .icon.toolbar__icon {
+                    &.icon--inverse {
+                        background-position-x: @button-small-active-icon-offset-x !important;
+                    }
+                }
             }
 
             svg.icon {
@@ -477,6 +496,13 @@
                 color: @text-normal;
             }
 
+            .inner-box-icon {
+                > svg {
+                    fill: @text-normal-ie;
+                    fill: @text-normal;
+                }
+            }
+
             &:hover:not(.disabled) {
                 background-color: @highlight-button-hover-ie;
                 background-color: @highlight-button-hover;
@@ -487,34 +513,33 @@
                     background-color: @highlight-button-pressed-ie;
                     background-color: @highlight-button-pressed;
 
-                    .icon--inverse {
-                        background-position-x: @button-small-active-icon-offset-x;
-                    }
-
                     svg.icon {
                         fill: @icon-toolbar-header-ie;
                         fill: @icon-toolbar-header;
                     }
 
                     .caption {
-                        color: @text-inverse-ie;
+                        color: @text-normal-pressed-ie;
-                        color: @text-inverse;
+                        color: @text-normal-pressed;
+                    }
+
+                    .inner-box-icon {
+                        > svg {
+                            fill: @text-normal-pressed-ie;
+                            fill: @text-normal-pressed;
+                        }
+                    }
+
+                    .color-user-name {
+                        background-color: @text-normal-pressed-ie;
+                        background-color: @text-normal-pressed;
+                        color: @highlight-button-pressed-ie;
+                        color: @highlight-button-pressed;
                     }
                 }
             }
         }
 
-        .btn-current-user {
-            .icon--inverse {
-                background-position-x: 0;
-            }
-
-            svg.icon {
-                fill: @icon-toolbar-header-ie;
-                fill: @icon-toolbar-header;
-            }
-        }
-
         #rib-doc-name {
             color: @text-normal-ie;
             color: @text-normal;

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

@@ -46,7 +46,7 @@ define([
     'common/main/lib/view/SaveAsDlg',
     'documenteditor/main/app/view/LeftMenu',
     'documenteditor/main/app/view/FileMenu',
-    'documenteditor/main/app/view/ViewTab',
+    'documenteditor/main/app/view/ViewTab'
 ], function () {
     'use strict';
 
@@ -64,7 +64,6 @@ define([
                     'hide': _.bind(this.onHideChat, this)
                 },
                 'Common.Views.Header': {
-                    'file:settings': _.bind(this.clickToolbarSettings,this),
                     'history:show': function () {
                         if ( !this.leftMenu.panelHistory.isVisible() )
                             this.clickMenuFileItem('header', 'history');

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

@@ -607,6 +607,7 @@ define([
                     this.api.asc_coAuthoringDisconnect();
                     appHeader.setCanRename(false);
                     appHeader.getButton('users') && appHeader.getButton('users').hide();
+                    appHeader.getButton('share') && appHeader.getButton('share').setVisible(false);
                     this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
                     this.disableEditing(true);
                     this._renameDialog && this._renameDialog.close();
@@ -1595,12 +1596,10 @@ define([
                     reviewController    = application.getController('Common.Controllers.ReviewChanges');
                 reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document});
 
-                if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode
+                var toolbarController   = application.getController('Toolbar');
-                    var toolbarController   = application.getController('Toolbar');
+                toolbarController   && toolbarController.setApi(me.api);
-                    toolbarController   && toolbarController.setApi(me.api);
-
-                    if (!this.appOptions.isEdit) return;
 
+                if (this.appOptions.isEdit) {
                     var rightmenuController = application.getController('RightMenu'),
                         fontsControllers    = application.getController('Common.Controllers.Fonts');
                     fontsControllers    && fontsControllers.setApi(me.api);

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

@@ -64,9 +64,6 @@ define([
                         Common.NotificationCenter.trigger('edit:complete', this.statusbar);
                     }.bind(this)
                 },
-                'Common.Views.Header': {
-                    'statusbar:hide': _.bind(me.onChangeCompactView, me)
-                },
                 'ViewTab': {
                     'statusbar:hide': _.bind(me.onChangeCompactView, me)
                 }

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

@@ -125,7 +125,6 @@ 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();
@@ -3184,11 +3183,8 @@ define([
                 var links = me.getApplication().getController('Links');
                 links.setApi(me.api).setConfig({toolbar: me});
                 Array.prototype.push.apply(me.toolbar.lockControls, links.getView('Links').getButtons());
-
-                var viewtab = me.getApplication().getController('ViewTab');
-                viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
-                Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
             }
+
             if ( config.isEdit && config.canFeatureContentControl && config.canFeatureForms || config.isRestrictedEdit && config.canFillForms ) {
                 if (config.isFormCreator) {
                     tab = {caption: me.textTabForms, action: 'forms', dataHintTitle: 'M'};
@@ -3204,6 +3200,15 @@ define([
                 }
             }
             config.isEdit && config.canFeatureContentControl && me.onChangeSdtGlobalSettings();
+
+            tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
+            var viewtab = me.getApplication().getController('ViewTab');
+            viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
+            $panel = viewtab.createToolbarPanel();
+            if ($panel) {
+                me.toolbar.addTab(tab, $panel, 7);
+                me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
+            }
         },
 
         onAppReady: function (config) {

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

@@ -61,12 +61,15 @@ define([
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
             Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
+            Common.NotificationCenter.on('document:ready', _.bind(this.onDocumentReady, this));
         },
 
         setApi: function (api) {
             if (api) {
                 this.api = api;
                 this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this));
+                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this));
+                Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
             }
             return this;
         },
@@ -79,15 +82,7 @@ define([
                 mode: mode,
                 compactToolbar: this.toolbar.toolbar.isCompactView
             });
-            if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+
-                this.view.chStatusbar.$el.remove();
-                var slotChkRulers = this.view.chRulers.$el,
-                    groupRulers = slotChkRulers.closest('.group'),
-                    groupToolbar = this.view.chToolbar.$el.closest('.group');
-                groupToolbar.find('.elset')[1].append(slotChkRulers[0]);
-                groupRulers.remove();
-                this.view.cmpEl.find('.separator-rulers').remove();
-            }
             this.addListeners({
                 'ViewTab': {
                     'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'),
@@ -104,11 +99,6 @@ define([
                     'view:hide': _.bind(function (statusbar, state) {
                         this.view.chStatusbar.setValue(!state, true);
                     }, this)
-                },
-                'Common.Views.Header': {
-                    'rulers:hide': _.bind(function (isChecked) {
-                        this.view.chRulers.setValue(!isChecked, true);
-                    }, this)
                 }
             });
         },
@@ -117,13 +107,17 @@ define([
             this.view && this.view.SetDisabled(state);
         },
 
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
+
         getView: function(name) {
             return !name && this.view ?
                 this.view : Backbone.Controller.prototype.getView.call(this, name);
         },
 
         onCoAuthoringDisconnect: function() {
-            this.SetDisabled(true);
+            Common.Utils.lockControls(Common.enumLock.lostConnect, true, {array: this.view.lockedControls});
         },
 
         onAppReady: function (config) {
@@ -134,6 +128,21 @@ define([
                 })).then(function(){
                     me.view.setEvents();
 
+                    if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+                        me.view.chStatusbar.$el.remove();
+                        var slotChkRulers = me.view.chRulers.$el,
+                            groupRulers = slotChkRulers.closest('.group'),
+                            groupToolbar = me.view.chToolbar.$el.closest('.group');
+                        groupToolbar.find('.elset')[1].append(slotChkRulers[0]);
+                        groupRulers.remove();
+                        me.view.$el.find('.separator-rulers').remove();
+                    }
+
+                    if (!config.isEdit) { // if view tab will be visible in view/restricted-editing mode
+                        me.view.chRulers.hide();
+                        me.view.$el.find('.separator-rulers').remove();
+                    }
+
                     me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me))
                         .on('changed:before',_.bind(me.onZoomChanged, me, true))
                         .on('changed:after', _.bind(me.onZoomChanged, me, false))
@@ -173,6 +182,10 @@ define([
             }
         },
 
+        onDocumentReady: function() {
+            Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls});
+        },
+
         onZoomChange: function (percent, type) {
             this.view.btnFitToPage.toggle(type == 2, true);
             this.view.btnFitToWidth.toggle(type == 1, true);
@@ -229,7 +242,6 @@ define([
             Common.localStorage.setBool('de-hidden-rulers', !checked);
             Common.Utils.InternalSettings.set("de-hidden-rulers", !checked);
             this.api.asc_SetViewRulers(checked);
-            this.view.fireEvent('rulers:hide', [!checked]);
             Common.NotificationCenter.trigger('layout:changed', 'rulers');
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },

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

@@ -80,7 +80,6 @@ define([
                             toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        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');
                     },
@@ -105,21 +104,12 @@ define([
                         if ( me.header.btnSave )
                             me.header.btnSave.setDisabled(state);
                     }
-                },
-                'ViewTab': {
-                    'rulers:hide': function (state) {
-                        me.header.mnuitemHideRulers.setChecked(state, true);
-                    },
-                    'statusbar:hide': function (view, state) {
-                        me.header.mnuitemHideStatusBar.setChecked(state, true);
-                    }
                 }
             });
         },
 
         setApi: function(api) {
             this.api = api;
-            this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
             Common.NotificationCenter.on('api:disconnect',              this.onApiCoAuthoringDisconnect.bind(this));
         },
@@ -156,13 +146,8 @@ 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));
-            Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
-            Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
         },
 
         onAppShowed: function (config) {
@@ -213,131 +198,6 @@ define([
         },
 
         onAppReady: function (config) {
-            var me = this;
-            if ( me.header.btnOptions ) {
-                var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms && config.isFormCreator);
-                if ( config.isEdit || config.isRestrictedEdit && config.canFillForms && config.isFormCreator) {
-                    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'
-                });
-                if (!config.isEdit) {
-                    me.header.mnuitemCompactToolbar.hide();
-                    Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
-                        if ((action=='plugins' || action=='review' || action=='forms') && visible) {
-                            me.header.mnuitemCompactToolbar.show();
-                        }
-                    }, this));
-                }
-
-                me.header.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 || !Common.UI.LayoutManager.isElementVisible('statusBar'))
-                    me.header.mnuitemHideStatusBar.hide();
-
-                me.header.mnuitemHideRulers = new Common.UI.MenuItem({
-                    caption: me.header.textHideLines,
-                    checked: Common.Utils.InternalSettings.get("de-hidden-rulers"),
-                    checkable: true,
-                    value: 'rulers'
-                });
-                if (!config.isEdit)
-                    me.header.mnuitemHideRulers.hide();
-
-                me.header.menuItemsDarkMode = new Common.UI.MenuItem({
-                    caption: me.txtDarkMode,
-                    checkable: true,
-                    checked: Common.UI.Themes.isContentThemeDark(),
-                    value: 'mode:dark'
-                });
-
-                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: 26px;" ',
-                            '<% 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 toolbar__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 toolbar__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,
-                            me.header.mnuitemHideStatusBar,
-                            me.header.mnuitemHideRulers,
-                            {caption:'--'},
-                            me.header.menuItemsDarkMode,
-                            {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));
-                if ( !Common.UI.Themes.isDarkTheme() ) {
-                    me.header.menuItemsDarkMode.hide();
-                    me.header.menuItemsDarkMode.$el.prev('.divider').hide();
-                }
-            }
         },
 
         onLayoutChanged: function(area) {
@@ -377,22 +237,6 @@ define([
             this.api.Resize();
         },
 
-        onThemeChanged: function (id) {
-            if ( this.header.menuItemsDarkMode ) {
-                var current_dark = Common.UI.Themes.isDarkTheme();
-                var menuItem = this.header.menuItemsDarkMode;
-                menuItem.setVisible(current_dark);
-                menuItem.$el.prev('.divider')[current_dark ? 'show' : 'hide']();
-
-                menuItem.setChecked(Common.UI.Themes.isContentThemeDark());
-            }
-        },
-
-        onContentThemeChangedToDark: function (isdark) {
-            if ( this.header.menuItemsDarkMode )
-                this.header.menuItemsDarkMode.setChecked(isdark, true);
-        },
-
         onWindowResize: function(e) {
             this.onLayoutChanged('window');
             Common.NotificationCenter.trigger('window:resize');
@@ -404,46 +248,9 @@ define([
 
             me.header.lockHeaderBtns( 'undo', _need_disable );
             me.header.lockHeaderBtns( 'redo', _need_disable );
-            me.header.lockHeaderBtns( 'opts', _need_disable );
             me.header.lockHeaderBtns( 'users', _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':
-                Common.localStorage.setBool('de-hidden-rulers', item.isChecked());
-                Common.Utils.InternalSettings.set("de-hidden-rulers", item.isChecked());
-                me.api.asc_SetViewRulers(!item.isChecked());
-                Common.NotificationCenter.trigger('layout:changed', 'rulers');
-                Common.NotificationCenter.trigger('edit:complete', me.header);
-                me.header.fireEvent('rulers:hide', [item.isChecked()]);
-                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;
-            case 'mode:dark': Common.UI.Themes.toggleContentTheme(); break;
-            }
-        },
-
         onApiCoAuthoringDisconnect: function(enableDownload) {
             if (this.header) {
                 if (this.header.btnDownload && !enableDownload)

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

@@ -174,49 +174,6 @@
                     </div>
                 </div>
             </section>
-            <section class="panel" data-tab="view">
-                <div class="group" data-layout-name="toolbar-view-navigation">
-                    <span class="btn-slot text x-huge" id="slot-btn-navigation"></span>
-                </div>
-                <div class="separator long" data-layout-name="toolbar-view-navigation"></div>
-                <div class="group small">
-                    <div class="elset" style="display: flex;">
-                        <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
-                    </div>
-                    <div class="elset" style="text-align: center;">
-                        <span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
-                    </div>
-                </div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-ftp" style="font-size: 11px;text-align: center;"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
-                    <span class="btn-slot text x-huge" id="slot-btn-dark-document"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-toolbar"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-statusbar"></span>
-                    </div>
-                </div>
-                <div class="separator long separator-rulers"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-rulers"></span>
-                    </div>
-                    <div class="elset"></div>
-                </div>
-            </section>
         </section>
     </section>
 </div>

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

@@ -174,9 +174,8 @@ define([
                                 {caption: me.textTabHome, action: 'home', extcls: 'canedit', dataHintTitle: 'H'},
                                 {caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
                                 {caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'},
-                                {caption: me.textTabLinks, action: 'links', extcls: 'canedit', layoutname: 'toolbar-references', dataHintTitle: 'R'},
+                                {caption: me.textTabLinks, action: 'links', extcls: 'canedit', layoutname: 'toolbar-references', dataHintTitle: 'R'}
-                                undefined, undefined, undefined,
+                                // undefined, undefined, undefined, undefined,
-                                {caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
                             ]
                         }
                     );

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

@@ -46,6 +46,51 @@ define([
     'use strict';
 
     DE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
+        var template =
+        '<section class="panel" data-tab="view">' +
+            '<div class="group" data-layout-name="toolbar-view-navigation">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-navigation"></span>' +
+            '</div>' +
+            '<div class="separator long" data-layout-name="toolbar-view-navigation"></div>' +
+            '<div class="group small">' +
+                '<div class="elset" style="display: flex;">' +
+                    '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
+                '</div>' +
+                '<div class="elset" style="text-align: center;">' +
+                    '<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-btn-ftp" style="font-size: 11px;text-align: center;"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long"></div>' +
+            '<div class="group">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-dark-document"></span>' +
+            '</div>' +
+            '<div class="separator long"></div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long separator-rulers"></div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-rulers"></span>' +
+                '</div>' +
+                '<div class="elset"></div>' +
+            '</div>' +
+        '</section>';
+
         return {
             options: {},
 
@@ -83,12 +128,10 @@ define([
 
                 this.lockedControls = [];
 
-                var me = this,
+                var me = this;
-                    $host = me.toolbar.$el;
                 var _set = Common.enumLock;
 
                 this.btnNavigation = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-navigation'),
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon btn-menu-navigation',
                     lock: [_set.lostConnect, _set.disableOnStart],
@@ -101,7 +144,6 @@ define([
                 this.lockedControls.push(this.btnNavigation);
 
                 this.cmbZoom = new Common.UI.ComboBox({
-                    el: $host.find('#slot-field-zoom'),
                     cls: 'input-group-nr',
                     lock: [_set.lostConnect, _set.disableOnStart],
                     menuStyle: 'min-width: 55px;',
@@ -125,10 +167,7 @@ define([
                 this.cmbZoom.setValue(100);
                 this.lockedControls.push(this.cmbZoom);
 
-                $host.find('#slot-lbl-zoom').text(this.textZoom);
-
                 this.btnFitToPage = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-ftp'),
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-ic-zoomtopage',
                     lock: [_set.lostConnect, _set.disableOnStart],
@@ -142,7 +181,6 @@ define([
                 this.lockedControls.push(this.btnFitToPage);
 
                 this.btnFitToWidth = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-ftw'),
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-ic-zoomtowidth',
                     lock: [_set.lostConnect, _set.disableOnStart],
@@ -156,7 +194,6 @@ define([
                 this.lockedControls.push(this.btnFitToWidth);
 
                 this.btnInterfaceTheme = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-interface-theme'),
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon day',
                     lock: [_set.lostConnect, _set.disableOnStart],
@@ -169,7 +206,6 @@ define([
                 this.lockedControls.push(this.btnInterfaceTheme);
 
                 this.btnDarkDocument = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-dark-document'),
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon dark-mode',
                     lock: [_set.inLightTheme, _set.lostConnect, _set.disableOnStart],
@@ -182,7 +218,6 @@ define([
                 this.lockedControls.push(this.btnDarkDocument);
 
                 this.chStatusbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-statusbar'),
                     lock: [_set.lostConnect, _set.disableOnStart],
                     labelText: this.textStatusBar,
                     value: !Common.localStorage.getBool("de-hidden-status"),
@@ -193,7 +228,6 @@ define([
                 this.lockedControls.push(this.chStatusbar);
 
                 this.chToolbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-toolbar'),
                     lock: [_set.lostConnect, _set.disableOnStart],
                     labelText: this.textAlwaysShowToolbar,
                     value: !options.compactToolbar,
@@ -204,7 +238,6 @@ define([
                 this.lockedControls.push(this.chToolbar);
 
                 this.chRulers = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-rulers'),
                     lock: [_set.lostConnect, _set.disableOnStart],
                     labelText: this.textRulers,
                     value: !Common.Utils.InternalSettings.get("de-hidden-rulers"),
@@ -214,14 +247,32 @@ define([
                 });
                 this.lockedControls.push(this.chRulers);
 
-                this.cmpEl = $host;
                 Common.Utils.lockControls(_set.disableOnStart, true, {array: this.lockedControls});
             },
 
             render: function (el) {
+                if ( el ) el.html( this.getPanel() );
+
                 return this;
             },
 
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+                var $host = this.$el;
+
+                this.btnNavigation.render($host.find('#slot-btn-navigation'));
+                this.cmbZoom.render($host.find('#slot-field-zoom'));
+                $host.find('#slot-lbl-zoom').text(this.textZoom);
+                this.btnFitToPage.render($host.find('#slot-btn-ftp'));
+                this.btnFitToWidth.render($host.find('#slot-btn-ftw'));
+                this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
+                this.btnDarkDocument.render($host.find('#slot-btn-dark-document'));
+                this.chStatusbar.render($host.find('#slot-chk-statusbar'));
+                this.chToolbar.render($host.find('#slot-chk-toolbar'));
+                this.chRulers.render($host.find('#slot-chk-rulers'));
+                return this.$el;
+            },
+
             show: function () {
                 Common.UI.BaseView.prototype.show.call(this);
                 this.fireEvent('show', this);

apps/documenteditor/main/index.html

@@ -33,7 +33,7 @@
         .theme-light {
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
-            --highlight-button-hover: #ccc;
+            --highlight-button-hover: #e0e0e0;
             --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #eee;
             --loadmask-canvas-page-border: #ccc;
@@ -92,6 +92,16 @@
             background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 20px;
+            margin: 0 10px;
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+        }
+
         .loadmask > .sktoolbar {
             background: #f1f1f1;
             background: var(--background-toolbar, #f1f1f1);
@@ -258,7 +268,7 @@
     <script src="../../common/main/lib/util/htmlutils.js"></script>
     <div id="loading-mask" class="loadmask">
         <div class="brendpanel" style="display: none;">
-            <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
+            <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
         <div class="sktoolbar" style="display: none;">
             <ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul>
             <ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul>

apps/documenteditor/main/index.html.deploy

@@ -70,6 +70,16 @@
             background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 20px;
+            margin: 0 10px;
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+        }
+
         .loadmask > .sktoolbar {
             background: #f1f1f1;
             background: var(--background-toolbar, #f1f1f1);
@@ -226,7 +236,7 @@
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
 
-    <div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
     <div id="viewport"></div>
 
     <script>

apps/documenteditor/main/locale/en.json

@@ -294,8 +294,10 @@
   "Common.Views.Header.tipUndo": "Undo",
   "Common.Views.Header.tipViewSettings": "View settings",
   "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
+  "Common.Views.Header.tipUsers": "View users",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.textShare": "Share",
   "Common.Views.History.textCloseHistory": "Close History",
   "Common.Views.History.textHide": "Collapse",
   "Common.Views.History.textHideAll": "Hide detailed changes",

apps/documenteditor/main/resources/less/variables.less

@@ -3,6 +3,8 @@
 // --------------------------------------------------
 @header-background-color-ie: @toolbar-header-document-ie;
 @header-background-color: var(--toolbar-header-document);
+@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-document-ie;
+@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-document);
 
 // Active color
 // -------------------------

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

@@ -62,7 +62,6 @@ define([
                     'hide': _.bind(this.onHideChat, this)
                 },
                 'Common.Views.Header': {
-                    'file:settings': _.bind(this.clickToolbarSettings,this),
                     'history:show': function () {
                         if ( !this.leftMenu.panelHistory.isVisible() )
                             this.clickMenuFileItem('header', 'history');

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

@@ -1255,12 +1255,10 @@ define([
                     reviewController    = application.getController('Common.Controllers.ReviewChanges');
                 reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document});
 
-                if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode)
+                var toolbarController   = application.getController('Toolbar');
-                    var toolbarController   = application.getController('Toolbar');
+                toolbarController   && toolbarController.setApi(me.api);
-                    toolbarController   && toolbarController.setApi(me.api);
-
-                    if (!this.appOptions.isEdit) return;
 
+                if (this.appOptions.isEdit) { // set api events for toolbar in the Restricted Editing mode)
                     var rightmenuController = application.getController('RightMenu'),
                         fontsControllers    = application.getController('Common.Controllers.Fonts');
 
@@ -2338,6 +2336,7 @@ define([
                     this.api.asc_coAuthoringDisconnect();
                     appHeader.setCanRename(false);
                     appHeader.getButton('users') && appHeader.getButton('users').hide();
+                    appHeader.getButton('share') && appHeader.getButton('share').setVisible(false);
                     this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
                     this.disableEditing(true);
                     this._renameDialog && this._renameDialog.close();

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

@@ -61,9 +61,6 @@ define([
                 'Statusbar': {
                     'langchanged': this.onLangMenu
                 },
-                'Common.Views.Header': {
-                    'statusbar:hide': _.bind(me.onChangeCompactView, me)
-                },
                 'ViewTab': {
                     'statusbar:hide': _.bind(me.onChangeCompactView, me)
                 }

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

@@ -141,7 +141,6 @@ 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();
@@ -2503,10 +2502,6 @@ define([
                 Array.prototype.push.apply(me.toolbar.lockControls,transitController.getView().getButtons());
                 Array.prototype.push.apply(me.toolbar.slideOnlyControls,transitController.getView().getButtons());
 
-                var viewtab = me.getApplication().getController('ViewTab');
-                viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
-                Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
-
                 var animationController = me.getApplication().getController('Animation');
                 animationController.setApi(me.api).setConfig({toolbar: me,mode:config}).createToolbarPanel();
 
@@ -2534,6 +2529,15 @@ define([
                     }
                 }
             }
+
+            tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
+            var viewtab = me.getApplication().getController('ViewTab');
+            viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
+            $panel = viewtab.createToolbarPanel();
+            if ($panel) {
+                me.toolbar.addTab(tab, $panel, 6);
+                me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
+            }
         },
 
         onAppReady: function (config) {

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

@@ -63,12 +63,16 @@ define([
             };
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
+            Common.NotificationCenter.on('document:ready', _.bind(this.onDocumentReady, this));
         },
 
         setApi: function (api) {
             if (api) {
                 this.api = api;
                 this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this));
+                this.api.asc_registerCallback('asc_onNotesShow', _.bind(this.onNotesShow, this));
+                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this));
+                Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
             }
             return this;
         },
@@ -81,15 +85,13 @@ define([
                 mode: mode,
                 compactToolbar: this.toolbar.toolbar.isCompactView
             });
-            if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+
-                this.view.chStatusbar.$el.remove();
-            }
             this.addListeners({
                 'ViewTab': {
                     'zoom:toslide': _.bind(this.onBtnZoomTo, this, 'toslide'),
                     'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
                     'rulers:change': _.bind(this.onChangeRulers, this),
-                    'notes:change': _.bind(this.onChangeNotes, this),
+                    'notes:change': _.bind(this.onChangeNotes, this)
                 },
                 'Toolbar': {
                     'view:compact': _.bind(function (toolbar, state) {
@@ -100,14 +102,6 @@ define([
                     'view:hide': _.bind(function (statusbar, state) {
                         this.view.chStatusbar.setValue(!state, true);
                     }, this)
-                },
-                'Common.Views.Header': {
-                    'rulers:hide': _.bind(function (isChecked) {
-                        this.view.chRulers.setValue(!isChecked, true);
-                    }, this),
-                    'notes:hide': _.bind(function (isChecked) {
-                        this.view.chNotes.setValue(!isChecked, true);
-                    }, this),
                 }
             });
         },
@@ -116,6 +110,10 @@ define([
             this.view && this.view.SetDisabled(state);
         },
 
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
+
         getView: function(name) {
             return !name && this.view ?
                 this.view : Backbone.Controller.prototype.getView.call(this, name);
@@ -125,6 +123,10 @@ define([
             this.SetDisabled(true);
         },
 
+        onDocumentReady: function() {
+            Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls});
+        },
+
         onZoomChange: function (percent, type) {
             if (this._state.zoom_type !== type) {
                 this.view.btnFitToSlide.toggle(type == 2, true);
@@ -137,6 +139,11 @@ define([
             }
         },
 
+        onNotesShow: function(bIsShow) {
+            this.view.chNotes.setValue(bIsShow, true);
+            Common.localStorage.setBool('pe-hidden-notes', !bIsShow);
+        },
+
         onAppReady: function (config) {
             var me = this;
             if (me.view) {
@@ -144,6 +151,22 @@ define([
                     accept();
                 })).then(function () {
                     me.view.setEvents();
+
+                    if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+                        me.view.chStatusbar.$el.remove();
+
+                        if (!config.isEdit) {
+                            var slotChkNotes = me.view.chNotes.$el,
+                                groupRulers = slotChkNotes.closest('.group'),
+                                groupToolbar = me.view.chToolbar.$el.closest('.group');
+                            groupToolbar.find('.elset')[1].append(slotChkNotes[0]);
+                            groupRulers.remove();
+                            me.view.$el.find('.separator-rulers').remove();
+                        }
+                    } else if (!config.isEdit) {
+                        me.view.chRulers.hide();
+                    }
+
                     me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me))
                         .on('changed:before',_.bind(me.onZoomChanged, me, true))
                         .on('changed:after', _.bind(me.onZoomChanged, me, false))
@@ -186,7 +209,6 @@ define([
             this.api.asc_SetViewRulers(checked);
             Common.localStorage.setBool('pe-hidden-rulers', !checked);
             Common.Utils.InternalSettings.set("pe-hidden-rulers", !checked);
-            this.view.fireEvent('rulers:hide', [!checked]);
             Common.NotificationCenter.trigger('layout:changed', 'rulers');
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
@@ -194,7 +216,6 @@ define([
         onChangeNotes: function (btn, checked) {
             this.api.asc_ShowNotes(checked);
             Common.localStorage.setBool('pe-hidden-notes', !checked);
-            this.view.fireEvent('notes:hide', [!checked]);
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 

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

@@ -81,7 +81,6 @@ define([
                             toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        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');
                     },
@@ -107,21 +106,6 @@ define([
                         if ( me.header.btnSave )
                             me.header.btnSave.setDisabled(state);
                     }
-                },
-                // Events generated by main view
-                'Viewport': {
-
-                },
-                'ViewTab': {
-                    'rulers:hide': function (state) {
-                        me.header.mnuitemHideRulers.setChecked(state, true);
-                    },
-                    'notes:hide': function (state) {
-                        me.header.mnuitemHideNotes.setChecked(state, true);
-                    },
-                    'statusbar:hide': function (view, state) {
-                        me.header.mnuitemHideStatusBar.setChecked(state, true);
-                    }
                 }
             });
             Common.NotificationCenter.on('preview:start', this.onPreviewStart.bind(this));
@@ -129,9 +113,7 @@ define([
 
         setApi: function(api) {
             this.api = api;
-            this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
-            this.api.asc_registerCallback('asc_onNotesShow', this.onNotesShow.bind(this));
             Common.NotificationCenter.on('api:disconnect',              this.onApiCoAuthoringDisconnect.bind(this));
         },
 
@@ -168,9 +150,6 @@ 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));
         },
@@ -222,126 +201,6 @@ define([
         },
 
         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'
-                });
-                if (!config.isEdit) {
-                    me.header.mnuitemCompactToolbar.hide();
-                    Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
-                        if ((action=='plugins' || action=='review') && visible) {
-                            me.header.mnuitemCompactToolbar.show();
-                        }
-                    }, this));
-                }
-
-                me.header.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 || !Common.UI.LayoutManager.isElementVisible('statusBar'))
-                    me.header.mnuitemHideStatusBar.hide();
-
-                me.header.mnuitemHideRulers = new Common.UI.MenuItem({
-                    caption: me.header.textHideLines,
-                    checked: Common.Utils.InternalSettings.get("pe-hidden-rulers"),
-                    checkable: true,
-                    value: 'rulers'
-                });
-                if (!config.isEdit)
-                    me.header.mnuitemHideRulers.hide();
-
-                me.header.mnuitemHideNotes = new Common.UI.MenuItem({
-                    caption: me.header.textHideNotes,
-                    checked: Common.localStorage.getBool('pe-hidden-notes', config.customization && config.customization.hideNotes===true),
-                    checkable: true,
-                    value: 'notes'
-                });
-
-                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: 26px;" ',
-                            '<% 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 toolbar__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 toolbar__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,
-                            me.header.mnuitemHideStatusBar,
-                            me.header.mnuitemHideRulers,
-                            me.header.mnuitemHideNotes,
-                            {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) {
@@ -446,51 +305,9 @@ define([
 
             me.header.lockHeaderBtns( 'undo', _need_disable );
             me.header.lockHeaderBtns( 'redo', _need_disable );
-            me.header.lockHeaderBtns( 'opts', _need_disable );
             me.header.lockHeaderBtns( 'users', _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.Utils.InternalSettings.set("pe-hidden-rulers", item.isChecked());
-                Common.NotificationCenter.trigger('layout:changed', 'rulers');
-                Common.NotificationCenter.trigger('edit:complete', me.header);
-                me.header.fireEvent('rulers:hide', [item.isChecked()]);
-                break;
-            case 'notes':
-                me.api.asc_ShowNotes(!item.isChecked());
-                Common.localStorage.setBool('pe-hidden-notes', item.isChecked());
-                Common.NotificationCenter.trigger('edit:complete', me.header);
-                me.header.fireEvent('notes:hide', [item.isChecked()]);
-                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;
-            }
-        },
-
         onApiCoAuthoringDisconnect: function(enableDownload) {
             if (this.header) {
                 if (this.header.btnDownload && !enableDownload)
@@ -507,11 +324,6 @@ define([
             this.header && this.header.lockHeaderBtns( 'rename-user', disable);
         },
 
-        onNotesShow: function(bIsShow) {
-            this.header && this.header.mnuitemHideNotes.setChecked(!bIsShow, true);
-            Common.localStorage.setBool('pe-hidden-notes', !bIsShow);
-        },
-
         textFitPage: 'Fit to Page',
         textFitWidth: 'Fit to Width'
     }, PE.Controllers.Viewport));

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

@@ -178,46 +178,6 @@
                     </div>
                 </div>
             </section>
-            <section class="panel" data-tab="view">
-                <div class="group small">
-                    <div class="elset" style="display: flex;">
-                        <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
-                    </div>
-                    <div class="elset" style="text-align: center;">
-                        <span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
-                    </div>
-                </div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-fts" style="font-size: 11px;text-align: center;"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-notes"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-rulers"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-toolbar"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-statusbar"></span>
-                    </div>
-                </div>
-            </section>
             <section id="animation-panel" class="panel" data-tab="animate">
                 <div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 210px;" data-group-width="700px"></div>
                 <div class="group small">

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

@@ -150,9 +150,8 @@ define([
                                 {caption: me.textTabHome, action: 'home', extcls: 'canedit', dataHintTitle: 'H'},
                                 {caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
                                 {caption: me.textTabTransitions, action: 'transit', extcls: 'canedit', dataHintTitle: 'N'},
-                                {caption: me.textTabAnimation, action: 'animate', extcls: 'canedit', dataHintTitle: 'A'},
+                                {caption: me.textTabAnimation, action: 'animate', extcls: 'canedit', dataHintTitle: 'A'}
-                                undefined, undefined,
+                                // undefined, undefined, undefined,
-                                {caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
                             ]
                         }
                     );

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

@@ -46,6 +46,47 @@ define([
     'use strict';
 
     PE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
+        var template =
+            '<section class="panel" data-tab="view">' +
+                '<div class="group small">' +
+                    '<div class="elset" style="display: flex;">' +
+                        '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
+                    '</div>' +
+                    '<div class="elset" style="text-align: center;">' +
+                        '<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="group small">' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-btn-fts" style="font-size: 11px;text-align: center;"></span>' +
+                    '</div>' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="separator long"></div>' +
+                '<div class="group">' +
+                    '<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
+                '</div>' +
+                '<div class="separator long"></div>' +
+                '<div class="group small">' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-notes"></span>' +
+                    '</div>' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-rulers"></span>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="separator long separator-rulers"></div>' +
+                '<div class="group small">' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
+                    '</div>' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
+                    '</div>' +
+                '</div>' +
+            '</section>';
         return {
             options: {},
 
@@ -81,11 +122,9 @@ define([
 
                 this.lockedControls = [];
 
-                var me = this,
+                var me = this;
-                    $host = me.toolbar.$el;
 
                 this.cmbZoom = new Common.UI.ComboBox({
-                    el: $host.find('#slot-field-zoom'),
                     cls: 'input-group-nr',
                     menuStyle: 'min-width: 55px;',
                     editable: true,
@@ -109,10 +148,7 @@ define([
                 this.cmbZoom.setValue(100);
                 this.lockedControls.push(this.cmbZoom);
 
-                $host.find('#slot-lbl-zoom').text(this.textZoom);
-
                 this.btnFitToSlide = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-fts'),
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-ic-zoomtoslide',
                     caption: this.textFitToSlide,
@@ -126,7 +162,6 @@ define([
                 this.lockedControls.push(this.btnFitToSlide);
 
                 this.btnFitToWidth = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-ftw'),
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-ic-zoomtowidth',
                     caption: this.textFitToWidth,
@@ -140,7 +175,6 @@ define([
                 this.lockedControls.push(this.btnFitToWidth);
 
                 this.btnInterfaceTheme = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-interface-theme'),
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon day',
                     caption: this.textInterfaceTheme,
@@ -153,7 +187,6 @@ define([
                 this.lockedControls.push(this.btnInterfaceTheme);
 
                 this.chStatusbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-statusbar'),
                     labelText: this.textStatusBar,
                     value: !Common.localStorage.getBool("pe-hidden-status"),
                     lock: [_set.disableOnStart],
@@ -164,7 +197,6 @@ define([
                 this.lockedControls.push(this.chStatusbar);
 
                 this.chToolbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-toolbar'),
                     labelText: this.textAlwaysShowToolbar,
                     value: !options.compactToolbar,
                     lock: [_set.disableOnStart],
@@ -175,7 +207,6 @@ define([
                 this.lockedControls.push(this.chToolbar);
 
                 this.chRulers = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-rulers'),
                     labelText: this.textRulers,
                     value: !Common.Utils.InternalSettings.get("pe-hidden-rulers"),
                     lock: [_set.disableOnStart],
@@ -186,7 +217,6 @@ define([
                 this.lockedControls.push(this.chRulers);
 
                 this.chNotes = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-notes'),
                     labelText: this.textNotes,
                     value: !Common.localStorage.getBool('pe-hidden-notes', this.appConfig.customization && this.appConfig.customization.hideNotes===true),
                     lock: [_set.disableOnStart],
@@ -198,9 +228,27 @@ define([
             },
 
             render: function (el) {
+                if ( el ) el.html( this.getPanel() );
+
                 return this;
             },
 
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+                var $host = this.$el;
+
+                this.cmbZoom.render($host.find('#slot-field-zoom'));
+                $host.find('#slot-lbl-zoom').text(this.textZoom);
+                this.btnFitToSlide.render($host.find('#slot-btn-fts'));
+                this.btnFitToWidth.render($host.find('#slot-btn-ftw'));
+                this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
+                this.chStatusbar.render($host.find('#slot-chk-statusbar'));
+                this.chToolbar.render($host.find('#slot-chk-toolbar'));
+                this.chRulers.render($host.find('#slot-chk-rulers'));
+                this.chNotes.render($host.find('#slot-chk-notes'));
+                return this.$el;
+            },
+
             show: function () {
                 Common.UI.BaseView.prototype.show.call(this);
                 this.fireEvent('show', this);

apps/presentationeditor/main/index.html

@@ -75,6 +75,15 @@
             background: rgba(255, 255, 255, 0.2);
         }
 
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 20px;
+            margin: 0 10px;
+            background: rgba(255,255,255,.2);
+        }
+
         .loadmask > .sktoolbar {
             background: #f7f7f7;
             background: var(--background-toolbar, #f7f7f7);
@@ -273,7 +282,7 @@
     <script src="../../common/main/lib/util/htmlutils.js"></script>
     <div id="loading-mask" class="loadmask">
         <div class="brendpanel" style="display: none;">
-            <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
+            <div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
         </div>
         <div class="sktoolbar" style="display: none;">
             <ul><li/><li class="space" style="width: 76px;"/><li class="split" /><li class="space"/><li style="width: 176px;"/><li class="space"/><li style="width: 115px;"/><li class="space" style="width: 183px;"/><li style="width: 95px;"/><li class="fat"/></ul>

apps/presentationeditor/main/index.html.deploy

@@ -63,6 +63,15 @@
             background: rgba(255, 255, 255, 0.2);
         }
 
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 20px;
+            margin: 0 10px;
+            background: rgba(255,255,255,.2);
+        }
+
         .loadmask > .sktoolbar {
             background: #f7f7f7;
             background: var(--background-toolbar, #f7f7f7);
@@ -263,7 +272,7 @@
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
     <div id="loading-mask" class="loadmask">
         <div class="brendpanel" style="display: none;">
-            <div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
+            <div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
         </div>
         <div class="sktoolbar" style="display: none;">
             <ul><li/><li class="space" style="width: 76px;"/><li class="split" /><li class="space"/><li style="width: 176px;"/><li class="space"/><li style="width: 115px;"/><li class="space" style="width: 183px;"/><li style="width: 95px;"/><li class="fat"/></ul>

apps/presentationeditor/main/locale/en.json

@@ -379,8 +379,10 @@
   "Common.Views.Header.tipUndock": "Undock into separate window",
   "Common.Views.Header.tipViewSettings": "View settings",
   "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
+  "Common.Views.Header.tipUsers": "View users",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.textShare": "Share",
   "Common.Views.History.textCloseHistory": "Close History",
   "Common.Views.History.textHide": "Collapse",
   "Common.Views.History.textHideAll": "Hide detailed changes",

apps/presentationeditor/main/resources/less/variables.less

@@ -2,7 +2,8 @@
 // -------------------------
 @header-background-color-ie: @toolbar-header-presentation-ie;
 @header-background-color: var(--toolbar-header-presentation);
-
+@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-presentation-ie;
+@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-presentation);
 // Grays
 // -------------------------
 

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

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

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

@@ -56,7 +56,6 @@ define([
                     'hide':        _.bind(this.onHidePlugins, this)
                 },
                 'Common.Views.Header': {
-                    'file:settings': _.bind(this.clickToolbarSettings,this),
                     'history:show': function () {
                         if ( !this.leftMenu.panelHistory.isVisible() )
                             this.clickMenuFileItem('header', 'history');

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

@@ -1406,14 +1406,12 @@ define([
                 Common.Utils.Metric.setCurrentMetric(value);
                 Common.Utils.InternalSettings.set("sse-settings-unit", value);
 
+                var toolbarController   = application.getController('Toolbar');
+                toolbarController   && toolbarController.setApi(me.api);
+
                 if (this.appOptions.isRestrictedEdit) {
-                    var toolbarController   = application.getController('Toolbar');
-                    toolbarController   && toolbarController.setApi(me.api);
                     application.getController('WBProtection').setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
                 } else if (this.appOptions.isEdit) { // set api events for toolbar in the Restricted Editing mode
-                    var toolbarController   = application.getController('Toolbar');
-                    toolbarController   && toolbarController.setApi(me.api);
-
                     var statusbarController = application.getController('Statusbar'),
                         rightmenuController = application.getController('RightMenu'),
                         fontsControllers    = application.getController('Common.Controllers.Fonts');
@@ -2849,6 +2847,7 @@ define([
                     this.api.asc_coAuthoringDisconnect();
                     this.headerView.setCanRename(false);
                     this.headerView.getButton('users') && this.headerView.getButton('users').hide();
+                    this.headerView.getButton('share') && this.headerView.getButton('share').setVisible(false);
                     this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
                     this.disableEditing(true);
                     this._renameDialog && this._renameDialog.close();

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

@@ -68,9 +68,6 @@ define([
                     'sheet:updateColors':   _.bind(this.updateTabsColors, this),
                     'sheet:move':           _.bind(this.moveWorksheet, this)
                 },
-                'Common.Views.Header': {
-                    'statusbar:setcompact': _.bind(this.onChangeViewMode, this)
-                },
                 'ViewTab': {
                     'statusbar:setcompact': _.bind(this.onChangeViewMode, this)
                 }

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

@@ -94,7 +94,6 @@ define([
                     'sheet:changed': _.bind(this.onApiSheetChanged, this)
                 },
                 'Common.Views.Header': {
-                    'toolbar:setcompact': this.onChangeViewMode.bind(this),
                     'print': function (opts) {
                         var _main = this.getApplication().getController('Main');
                         _main.onPrint();
@@ -3811,12 +3810,19 @@ define([
                         me.toolbar.addTab(tab, $panel, 7);
                         Array.prototype.push.apply(me.toolbar.lockControls, wbtab.getView('WBProtection').getButtons());
                     }
-
-                    var viewtab = me.getApplication().getController('ViewTab');
-                    viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
-                    Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
                 }
             }
+            if ( !config.isEditDiagram && !config.isEditMailMerge ) {
+                tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
+                var viewtab = me.getApplication().getController('ViewTab');
+                viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
+                $panel = viewtab.createToolbarPanel();
+                if ($panel) {
+                    me.toolbar.addTab(tab, $panel, 8);
+                    me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
+                }
+                config.isEdit && Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
+            }
         },
 
         onAppReady: function (config) {

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

@@ -84,9 +84,7 @@ define([
                 mode: mode,
                 compactToolbar: this.toolbar.toolbar.isCompactView
             });
-            if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+
-                this.view.chStatusbar.$el.remove();
-            }
             this.addListeners({
                 'ViewTab': {
                     'zoom:selected': _.bind(this.onSelectedZoomValue, this),
@@ -114,11 +112,6 @@ define([
                     'view:compact': _.bind(function (toolbar, state) {
                         this.view.chToolbar.setValue(!state, true);
                     }, this)
-                },
-                'Common.Views.Header': {
-                    'toolbar:freezeshadow': _.bind(function (isChecked) {
-                        this.view.btnFreezePanes.menu.items[4].setChecked(isChecked, true);
-                    }, this)
                 }
             });
             Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
@@ -128,6 +121,10 @@ define([
             this.view && this.view.SetDisabled(state);
         },
 
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
+
         getView: function(name) {
             return !name && this.view ?
                 this.view : Backbone.Controller.prototype.getView.call(this, name);
@@ -154,7 +151,6 @@ define([
         onFreezeShadow: function (checked) {
             this.api.asc_setFrozenPaneBorderType(checked ? Asc.c_oAscFrozenPaneBorderType.shadow : Asc.c_oAscFrozenPaneBorderType.line);
             Common.localStorage.setBool('sse-freeze-shadow', checked);
-            this.view.fireEvent('freeze:shadow', [checked]);
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
@@ -191,10 +187,9 @@ define([
         onViewSettings: function(type, value){
             if (this.api) {
                 switch (type) {
-                    case 0: this.getApplication().getController('Viewport').header.fireEvent('formulabar:hide', [ value!=='checked']); break;
+                    case 1: this.api.asc_setDisplayHeadings(value); break;
-                    case 1: this.api.asc_setDisplayHeadings(value=='checked'); break;
+                    case 2: this.api.asc_setDisplayGridlines(value); break;
-                    case 2: this.api.asc_setDisplayGridlines( value=='checked'); break;
+                    case 3: this.api.asc_setShowZeros(value); break;
-                    case 3: this.api.asc_setShowZeros( value=='checked'); break;
                 }
             }
             Common.NotificationCenter.trigger('edit:complete', this.view);

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

@@ -72,9 +72,7 @@ define([
                     'menu:show': me.onFileMenu.bind(me, 'show')
                 },
                 'Statusbar': {
-                    'sheet:changed': me.onApiSheetChanged.bind(me),
                     'view:compact': function (statusbar, state) {
-                        me.header.mnuitemCompactStatusBar.setChecked(state, true);
                         me.viewport.vlayout.getItem('statusbar').height = state ? 25 : 50;
                     }
                 },
@@ -92,7 +90,6 @@ define([
 
                     },
                     'view:compact'  : function (toolbar, state) {
-                        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');
                     },
@@ -118,26 +115,15 @@ define([
                         if ( me.header.btnSave )
                             me.header.btnSave.setDisabled(state);
                     }
-                },
-                'ViewTab': {
-                    'freeze:shadow': function (checked) {
-                        me.header.mnuitemFreezePanesShadow.setChecked(checked, true);
-                    }
                 }
             });
 
             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_onWorksheetLocked',          this.onWorksheetLocked.bind(this));
-            this.api.asc_registerCallback('asc_onEditCell',                 this.onApiEditCell.bind(this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
             Common.NotificationCenter.on('api:disconnect',              this.onApiCoAuthoringDisconnect.bind(this));
         },
@@ -193,161 +179,6 @@ define([
         },
 
         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'
-                });
-                if (!config.isEdit && !config.isEditDiagram && !config.isEditMailMerge) {
-                    me.header.mnuitemCompactToolbar.hide();
-                    Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
-                        if ((action=='plugins' || action=='review') && visible) {
-                            me.header.mnuitemCompactToolbar.show();
-                        }
-                    }, this));
-                }
-
-                me.header.mnuitemCompactStatusBar = new Common.UI.MenuItem({
-                    caption: me.header.textHideStatusBar,
-                    checked: Common.localStorage.getBool("sse-compact-statusbar", true),
-                    checkable: true,
-                    value: 'statusbar'
-                });
-                if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar'))
-                    me.header.mnuitemCompactStatusBar.hide();
-
-                me.header.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(),
-                    disabled    : me.header.mnuitemHideHeadings.isDisabled(),
-                    value       : 'headings'
-                });
-
-                me.header.mnuitemHideGridlines = new Common.UI.MenuItem({
-                    caption     : me.textHideGridlines,
-                    checkable   : true,
-                    checked     : me.header.mnuitemHideGridlines.isChecked(),
-                    disabled    : me.header.mnuitemHideGridlines.isDisabled(),
-                    value       : 'gridlines'
-                });
-
-                me.header.mnuitemFreezePanes = new Common.UI.MenuItem({
-                    caption     : me.textFreezePanes,
-                    checkable   : true,
-                    checked     : me.header.mnuitemFreezePanes.isChecked(),
-                    disabled    : me.header.mnuitemFreezePanes.isDisabled(),
-                    value       : 'freezepanes'
-                });
-
-                me.header.mnuitemFreezePanesShadow = new Common.UI.MenuItem({
-                    caption     : me.textFreezePanesShadow,
-                    checkable   : true,
-                    checked     : Common.localStorage.getBool('sse-freeze-shadow', true),
-                    value       : 'freezepanesshadow'
-                });
-
-                me.header.mnuZoom = new Common.UI.MenuItem({
-                    template: _.template([
-                        '<div id="hdr-menu-zoom" class="menu-zoom" style="height: 26px;" ',
-                            '<% 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 toolbar__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 toolbar__icon btn-zoomdown">&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,
-                            me.header.mnuitemHideFormulaBar,
-                            me.header.mnuitemCompactStatusBar,
-                            {caption:'--'},
-                            me.header.mnuitemHideHeadings,
-                            me.header.mnuitemHideGridlines,
-                            {caption:'--'},
-                            me.header.mnuitemFreezePanes,
-                            me.header.mnuitemFreezePanesShadow,
-                            {caption:'--'},
-                            me.header.mnuZoom,
-                            {caption:'--'},
-                            mnuitemAdvSettings
-                        ]
-                    })
-                );
-
-                if (!config.isEdit) {
-                    var menu = me.header.btnOptions.menu;
-                    me.header.mnuitemHideHeadings.hide();
-                    me.header.mnuitemHideGridlines.hide();
-                    me.header.mnuitemFreezePanes.hide();
-                    menu.items[6].hide();
-                    if (!config.canViewComments) { // show advanced settings for editing and commenting mode
-                        // mnuitemAdvSettings.hide();
-                        // menu.items[9].hide();
-                    }
-                }
-
-                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 > 5.))
-                            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));
-            }
         },
 
         // When our application is ready, lets get started
@@ -386,10 +217,6 @@ 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) {
@@ -432,7 +259,6 @@ define([
             case 'celleditor':
                 if (arguments[1]) {
                     this.boxSdk.css('border-top', arguments[1]=='hidden'?'none':'');
-                    this.header.mnuitemHideFormulaBar && this.header.mnuitemHideFormulaBar.setChecked(arguments[1]=='hidden', true);
                 }
                 this.viewport.celayout.doLayout();
                 break;
@@ -451,79 +277,9 @@ define([
 
             me.header.lockHeaderBtns( 'undo', _need_disable );
             me.header.lockHeaderBtns( 'redo', _need_disable );
-            me.header.lockHeaderBtns( 'opts', _need_disable );
             me.header.lockHeaderBtns( 'users', _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());
-
-                var currentSheet = me.api.asc_getActiveWorksheetIndex();
-                this.onWorksheetLocked(currentSheet, this.api.asc_isWorksheetLockedOrDeleted(currentSheet));
-            }
-        },
-
-        onWorksheetLocked: function(index,locked) {
-            var me = this;
-            var appConfig = me.viewport.mode;
-            if ( !!appConfig && !appConfig.isEditDiagram && !appConfig.isEditMailMerge ) {
-                if (index == this.api.asc_getActiveWorksheetIndex()) {
-                    locked = locked || me.viewmode;
-                    me.header.mnuitemHideHeadings.setDisabled(locked);
-                    me.header.mnuitemHideGridlines.setDisabled(locked);
-                    me.header.mnuitemFreezePanes.setDisabled(locked);
-                }
-            }
-        },
-
-        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 'statusbar': me.header.fireEvent('statusbar: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 'freezepanesshadow':
-                me.api.asc_setFrozenPaneBorderType(item.isChecked() ? Asc.c_oAscFrozenPaneBorderType.shadow : Asc.c_oAscFrozenPaneBorderType.line);
-                Common.localStorage.setBool('sse-freeze-shadow', item.isChecked());
-                me.header.fireEvent('toolbar:freezeshadow', [item.isChecked()]);
-                break;
-            case 'advanced': me.header.fireEvent('file:settings', me.header); break;
-            }
-        },
-
         onApiCoAuthoringDisconnect: function(enableDownload) {
             if (this.header) {
                 if (this.header.btnDownload && !enableDownload)
@@ -536,10 +292,6 @@ define([
         },
 
         SetDisabled: function (disabled) {
-            this.viewmode = disabled;
-            this.header.mnuitemHideHeadings.setDisabled(disabled);
-            this.header.mnuitemHideGridlines.setDisabled(disabled);
-            this.header.mnuitemFreezePanes.setDisabled(disabled);
         },
 
         textHideFBar: 'Hide Formula Bar',

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

@@ -245,62 +245,6 @@
                     <!--</div>-->
                 <!--</div>-->
             </section>
-            <section class="panel" data-tab="view">
-                <div class="group sheet-views">
-                    <span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>
-                </div>
-                <div class="group sheet-views small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-createview"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-closeview"></span>
-                    </div>
-                </div>
-                <div class="separator long sheet-views"></div>
-                <div class="group small">
-                    <div class="elset" style="display: flex;">
-                        <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
-                    </div>
-                    <div class="elset" style="text-align: center;">
-                        <span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-freeze"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-formula"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-heading"></span>
-                    </div>
-                </div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-gridlines"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-zeros"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-toolbar"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-statusbar"></span>
-                    </div>
-                </div>
-            </section>
         </section>
     </section>
 </section>

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

@@ -390,9 +390,8 @@ define([
                         { caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
                         {caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'},
                         {caption: me.textTabFormula, action: 'formula', extcls: 'canedit', dataHintTitle: 'O'},
-                        {caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'},
+                        {caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'}
-                        undefined, undefined, undefined,
+                        // undefined, undefined, undefined, undefined
-                        {caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
                     ]}
                 );
 

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

@@ -46,9 +46,66 @@ define([
     'use strict';
 
     SSE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
+        var template = '<section class="panel" data-tab="view">' +
+            '<div class="group sheet-views">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>' +
+            '</div>' +
+            '<div class="group sheet-views small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-createview"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-closeview"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long sheet-views"></div>' +
+            '<div class="group small">' +
+                '<div class="elset" style="display: flex;">' +
+                    '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
+                '</div>' +
+                '<div class="elset" style="text-align: center;">' +
+                    '<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long"></div>' +
+            '<div class="group">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
+            '</div>' +
+            '<div class="separator long"></div>' +
+            '<div class="group sheet-freeze">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-freeze"></span>' +
+            '</div>' +
+            '<div class="separator long sheet-freeze"></div>' +
+            '<div class="group small sheet-formula">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-formula"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-heading"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="group small sheet-gridlines">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-gridlines"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-zeros"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long separator-formula"></div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
+                '</div>' +
+            '</div>' +
+        '</section>';
+
         function setEvents() {
             var me = this;
-            if ( me.appConfig.canFeatureViews ) {
+            if ( me.appConfig.canFeatureViews && me.appConfig.isEdit) {
                 me.btnCloseView.on('click', function (btn, e) {
                     me.fireEvent('viewtab:openview', [{name: 'default', value: 'default'}]);
                 });
@@ -57,7 +114,7 @@ define([
                 });
             }
 
-            me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
+            me.btnFreezePanes && me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
                 if (item.value === 'shadow') {
                     me.fireEvent('viewtab:freezeshadow', [item.checked]);
                 } else {
@@ -65,16 +122,16 @@ define([
                 }
             });
             this.chFormula.on('change', function (field, value) {
-                me.fireEvent('viewtab:formula', [0, value]);
+                me.fireEvent('viewtab:formula', [0, value=='checked']);
             });
-            this.chHeadings.on('change', function (field, value) {
+            this.chHeadings && this.chHeadings.on('change', function (field, value) {
-                me.fireEvent('viewtab:headings', [1, value]);
+                me.fireEvent('viewtab:headings', [1, value=='checked']);
             });
-            this.chGridlines.on('change', function (field, value) {
+            this.chGridlines && this.chGridlines.on('change', function (field, value) {
-                me.fireEvent('viewtab:gridlines', [2, value]);
+                me.fireEvent('viewtab:gridlines', [2, value=='checked']);
             });
-            this.chZeros.on('change', function (field, value) {
+            this.chZeros && this.chZeros.on('change', function (field, value) {
-                me.fireEvent('viewtab:zeros', [3, value]);
+                me.fireEvent('viewtab:zeros', [3, value=='checked']);
             });
             this.chToolbar.on('change', function (field, value) {
                 me.fireEvent('viewtab:showtoolbar', [field, value !== 'checked']);
@@ -105,12 +162,10 @@ define([
                 this.lockedControls = [];
 
                 var me = this,
-                    $host = me.toolbar.$el,
                     _set = Common.enumLock;
 
-                if ( me.appConfig.canFeatureViews ) {
+                if ( me.appConfig.canFeatureViews && me.appConfig.isEdit ) {
                     this.btnSheetView = new Common.UI.Button({
-                        parentEl: $host.find('#slot-btn-sheet-view'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-sheet-view',
                         caption: me.capBtnSheetView,
@@ -133,7 +188,6 @@ define([
                         dataHintOffset: 'big'
                     });
                     this.lockedControls.push(this.btnCreateView);
-                    Common.Utils.injectComponent($host.find('#slot-createview'), this.btnCreateView);
 
                     this.btnCloseView = new Common.UI.Button({
                         id          : 'id-toolbar-btn-closeview',
@@ -146,29 +200,55 @@ define([
                         dataHintOffset: 'big'
                     });
                     this.lockedControls.push(this.btnCloseView);
-                    Common.Utils.injectComponent($host.find('#slot-closeview'), this.btnCloseView);
                 }
 
-                this.btnFreezePanes = new Common.UI.Button({
+                if (me.appConfig.isEdit) {
-                    parentEl: $host.find('#slot-btn-freeze'),
+                    this.btnFreezePanes = new Common.UI.Button({
-                    cls: 'btn-toolbar x-huge icon-top',
+                        cls: 'btn-toolbar x-huge icon-top',
-                    iconCls: 'toolbar__icon btn-freeze-panes',
+                        iconCls: 'toolbar__icon btn-freeze-panes',
-                    caption: this.capBtnFreeze,
+                        caption: this.capBtnFreeze,
-                    menu: true,
+                        menu: true,
-                    lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint: '1',
+                        dataHint: '1',
-                    dataHintDirection: 'bottom',
+                        dataHintDirection: 'bottom',
-                    dataHintOffset: 'small'
+                        dataHintOffset: 'small'
-                });
+                    });
-                this.lockedControls.push(this.btnFreezePanes);
+                    this.lockedControls.push(this.btnFreezePanes);
+
+                    this.chHeadings = new Common.UI.CheckBox({
+                        labelText: this.textHeadings,
+                        lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        dataHint    : '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    });
+                    this.lockedControls.push(this.chHeadings);
+
+                    this.chGridlines = new Common.UI.CheckBox({
+                        labelText: this.textGridlines,
+                        lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        dataHint    : '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    });
+                    this.lockedControls.push(this.chGridlines);
+
+                    this.chZeros = new Common.UI.CheckBox({
+                        labelText: this.textZeros,
+                        lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        dataHint    : '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    });
+                    this.lockedControls.push(this.chZeros);
+                }
 
                 this.cmbZoom = new Common.UI.ComboBox({
-                    el          : $host.find('#slot-field-zoom'),
                     cls         : 'input-group-nr',
                     menuStyle   : 'min-width: 55px;',
                     hint        : me.tipFontSize,
                     editable    : true,
-                    lock        : [_set.coAuth, _set.lostConnect, _set.editCell],
+                    lock        : [_set.lostConnect, _set.editCell],
                     data        : [
                         { displayValue: "50%", value: 50 },
                         { displayValue: "75%", value: 75 },
@@ -185,52 +265,9 @@ define([
                     dataHintDirection: 'top',
                     dataHintOffset: 'small'
                 });
-                this.cmbZoom.setValue(100);
                 this.lockedControls.push(this.cmbZoom);
 
-                this.chFormula = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-formula'),
-                    labelText: this.textFormula,
-                    value: !Common.localStorage.getBool('sse-hidden-formula'),
-                    lock        : [_set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chFormula);
-
-                this.chHeadings = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-heading'),
-                    labelText: this.textHeadings,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chHeadings);
-
-                this.chGridlines = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-gridlines'),
-                    labelText: this.textGridlines,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chGridlines);
-
-                this.chZeros = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-zeros'),
-                    labelText: this.textZeros,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chZeros);
-
                 this.btnInterfaceTheme = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-interface-theme'),
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon day',
                     caption: this.textInterfaceTheme,
@@ -241,11 +278,20 @@ define([
                 });
                 this.lockedControls.push(this.btnInterfaceTheme);
 
+                this.chFormula = new Common.UI.CheckBox({
+                    labelText: this.textFormula,
+                    value: !Common.localStorage.getBool('sse-hidden-formula'),
+                    lock        : [_set.lostConnect, _set.editCell],
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chFormula);
+
                 this.chStatusbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-statusbar'),
                     labelText: this.textCombineSheetAndStatusBars,
                     value       : Common.localStorage.getBool('sse-compact-statusbar', true),
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                    lock        : [_set.lostConnect, _set.editCell],
                     dataHint    : '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
@@ -253,31 +299,51 @@ define([
                 this.lockedControls.push(this.chStatusbar);
 
                 this.chToolbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-toolbar'),
                     labelText: this.textAlwaysShowToolbar,
                     value       : !options.compactToolbar,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                    lock        : [_set.lostConnect, _set.editCell],
                     dataHint    : '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.chToolbar);
 
-                $host.find('#slot-lbl-zoom').text(this.textZoom);
-
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
             render: function (el) {
+                if ( el ) el.html( this.getPanel() );
+
                 return this;
             },
 
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+                var $host = this.$el;
+
+                this.btnSheetView && this.btnSheetView.render($host.find('#slot-btn-sheet-view'));
+                this.btnCreateView && this.btnCreateView.render($host.find('#slot-createview'));
+                this.btnCloseView && this.btnCloseView.render($host.find('#slot-closeview'));
+                this.btnFreezePanes && this.btnFreezePanes.render($host.find('#slot-btn-freeze'));
+                this.cmbZoom.render($host.find('#slot-field-zoom'));
+                this.cmbZoom.setValue(100);
+                $host.find('#slot-lbl-zoom').text(this.textZoom);
+                this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
+                this.chFormula.render($host.find('#slot-chk-formula'));
+                this.chStatusbar.render($host.find('#slot-chk-statusbar'));
+                this.chToolbar.render($host.find('#slot-chk-toolbar'));
+                this.chHeadings && this.chHeadings.render($host.find('#slot-chk-heading'));
+                this.chGridlines && this.chGridlines.render($host.find('#slot-chk-gridlines'));
+                this.chZeros && this.chZeros.render($host.find('#slot-chk-zeros'));
+                return this.$el;
+            },
+
             onAppReady: function (config) {
                 var me = this;
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function(){
-                    if (!config.canFeatureViews) {
+                    if (!(config.canFeatureViews && me.appConfig.isEdit)) {
                         me.toolbar && me.toolbar.$el.find('.group.sheet-views').hide();
                         me.toolbar && me.toolbar.$el.find('.separator.sheet-views').hide();
                     } else {
@@ -287,31 +353,49 @@ define([
                         me.btnCreateView.updateHint(me.tipCreate);
                         me.btnCloseView.updateHint(me.tipClose);
                     }
-                    me.btnFreezePanes.setMenu(new Common.UI.Menu({
-                        items: [
-                            {
-                                caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
-                                value: undefined
-                            },
-                            {
-                                caption: me.textFreezeRow,
-                                value: Asc.c_oAscFrozenPaneAddType.firstRow
-                            },
-                            {
-                                caption: me.textFreezeCol,
-                                value: Asc.c_oAscFrozenPaneAddType.firstCol
-                            },
-                            { caption: '--' },
-                            {
-                                caption: me.textShowFrozenPanesShadow,
-                                value: 'shadow',
-                                checkable: true,
-                                checked: Common.localStorage.getBool('sse-freeze-shadow', true)
-                            }
-                        ]
-                    }));
-                    me.btnFreezePanes.updateHint(me.tipFreeze);
 
+                    if (config.isEdit) {
+                        me.btnFreezePanes.setMenu(new Common.UI.Menu({
+                            items: [
+                                {
+                                    caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
+                                    value: undefined
+                                },
+                                {
+                                    caption: me.textFreezeRow,
+                                    value: Asc.c_oAscFrozenPaneAddType.firstRow
+                                },
+                                {
+                                    caption: me.textFreezeCol,
+                                    value: Asc.c_oAscFrozenPaneAddType.firstCol
+                                },
+                                { caption: '--' },
+                                {
+                                    caption: me.textShowFrozenPanesShadow,
+                                    value: 'shadow',
+                                    checkable: true,
+                                    checked: Common.localStorage.getBool('sse-freeze-shadow', true)
+                                }
+                            ]
+                        }));
+                        me.btnFreezePanes.updateHint(me.tipFreeze);
+                    } else {
+                        me.toolbar && me.toolbar.$el.find('.group.sheet-freeze').hide();
+                        me.toolbar && me.toolbar.$el.find('.separator.sheet-freeze').hide();
+                        me.toolbar && me.toolbar.$el.find('.group.sheet-gridlines').hide();
+                    }
+
+                    if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+                        me.chStatusbar.$el.remove();
+                        if (!config.isEdit) {
+                            var slotChkFormula = me.chFormula.$el,
+                                groupFormula = slotChkFormula.closest('.group'),
+                                groupToolbar = me.chToolbar.$el.closest('.group');
+                            groupToolbar.find('.elset')[1].append(slotChkFormula[0]);
+                            groupFormula.remove();
+                            me.$el.find('.separator-formula').remove();
+                        }
+                    }
                     var menuItems = [],
                         currentTheme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId();
                     for (var t in Common.UI.Themes.map()) {

apps/spreadsheeteditor/main/index.html

@@ -84,6 +84,16 @@
             background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 20px;
+            margin: 0 10px;
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+        }
+
         .loadmask > .sktoolbar {
             background: #f1f1f1;
             background: var(--background-toolbar, #f1f1f1);
@@ -284,7 +294,7 @@
     <div id="loading-mask" class="loadmask">
         <div class="brendpanel" style="display: none;"><div>
             <div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div>
-            <div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
+            <div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
         </div>
         <div class="sktoolbar" style="display: none;">
             <ul><li/><li class="space"/><li style="width: 219px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li style="width: 340px;"/><li class="fat"/></ul>

apps/spreadsheeteditor/main/index.html.deploy

@@ -63,6 +63,16 @@
             background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 20px;
+            margin: 0 10px;
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+        }
+
         .loadmask > .sktoolbar {
             background: #f1f1f1;
             background: var(--background-toolbar, #f1f1f1);
@@ -265,7 +275,7 @@
     <div id="loading-mask" class="loadmask">
         <div class="brendpanel" style="display: none;"><div>
             <div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo_s.svg"></div>
-            <div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
+            <div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
         </div>
         <div class="sktoolbar" style="display: none;">
             <ul><li/><li class="space"/><li style="width: 219px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li style="width: 340px;"/><li class="fat"/></ul>

apps/spreadsheeteditor/main/locale/en.json

@@ -235,8 +235,10 @@
   "Common.Views.Header.tipUndock": "Undock into separate window",
   "Common.Views.Header.tipViewSettings": "View settings",
   "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
+  "Common.Views.Header.tipUsers": "View users",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.textShare": "Share",
   "Common.Views.History.textCloseHistory": "Close History",
   "Common.Views.History.textHide": "Collapse",
   "Common.Views.History.textHideAll": "Hide detailed changes",

apps/spreadsheeteditor/main/resources/less/variables.less

@@ -3,6 +3,8 @@
 // --------------------------------------------------
 @header-background-color-ie: @toolbar-header-spreadsheet-ie;
 @header-background-color: var(--toolbar-header-spreadsheet);
+@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-spreadsheet-ie;
+@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-spreadsheet);
 
 // Active color
 // -------------------------