Merge branch 'develop' into feature/table-contents

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 =
@@ -74,7 +74,8 @@ define([
         var templateRightBox = '<section>' +
                             '<section id="box-doc-name">' +
                                 // '<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;" disabled="disabled">' +
-                                '<label id="rib-doc-name" />' +
+                                //'<label id="rib-doc-name" />' +
+                                '<input id="rib-doc-name" autofill="off" autocomplete="off"/></input>' +
                             '</section>' +
                             '<section style="display: inherit;">' +
                                 '<div class="hedset">' +
@@ -84,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>' +
@@ -127,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),
@@ -164,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();
-                }
             }
         }
 
@@ -254,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) ?
@@ -276,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');
                     });
@@ -352,9 +332,6 @@ define([
                     });
                 }
             }
-
-            if ( me.btnOptions )
-                me.btnOptions.updateHint(me.tipViewSettings);
         }
 
         function onFocusDocName(e){
@@ -412,9 +389,6 @@ define([
             }
         }
 
-        function onContentThemeChangedToDark(isdark) {
-        }
-
         return {
             options: {
                 branding: {},
@@ -444,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'
@@ -457,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',
@@ -479,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));
             },
 
@@ -523,7 +484,7 @@ define([
                 if ( role == 'right' ) {
                     var $html = $(_.template(templateRightBox)({
                         tipUsers: this.labelCoUsersDescr,
-                        txtAccessRights: this.txtAccessRights
+                        textShare: this.textShare
                     }));
 
                     if ( !me.labelDocName ) {
@@ -563,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
@@ -590,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 ) {
@@ -708,7 +705,7 @@ define([
             },
 
             setCanRename: function (rename) {
-               // rename = true;      //for merge rename = false; ??
+                //rename = true;      //comment out for merge
 
                 var me = this;
                 me.options.canRename = rename;
@@ -760,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;
             },
 
@@ -785,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 {
@@ -823,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',
@@ -845,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',
@@ -859,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/img/toolbar/1x/.css.handlebars

@@ -11,12 +11,6 @@
         }
     }
 }
-.menu__icon {
-    .no-checkmark.checked & {
-        background-position-x: -20px;
-        background-position-x: @menu-icon-item-checked-offset-x;
-    }
-}
 .toolbar__icon, .menu__icon {
     background-image: url(resources/{{{escaped_image}}});
 }

apps/common/main/resources/less/about.less

@@ -22,7 +22,7 @@
         letter-spacing: 1px;
         color: @text-normal-ie;
         color: @text-normal;
-        font-weight: bold;
+        .font-weight-bold();
         white-space: nowrap;
     }
 
@@ -34,6 +34,7 @@
 
     .asc-about-companyname {
         font: bold 15px Tahoma;
+        letter-spacing: 0.01em;
         color: @text-normal-ie;
         color: @text-normal;
     }
@@ -54,7 +55,7 @@
         }
 
         &.asc-about-lic {
-            font-weight: bold;
+            .font-weight-bold();
         }
 
     }

apps/common/main/resources/less/asc-mixins.less

@@ -81,6 +81,11 @@
     button.disabled > .@{icon-class} {background-position: -3*@icon-size -@index*@icon-size;}
 }
 
+.font-weight-bold{
+    font-weight: bold;
+    letter-spacing: 0.01em;
+}
+
 /**
 */
 :root {

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

@@ -476,8 +476,9 @@
     display: block;
     position: relative;
     .border-radius(0);
+    .font-weight-bold();
     background-color: transparent;
-    font-weight: bold;
+
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
@@ -1046,7 +1047,7 @@
 // ------------------------
 
 .dlg-btn {
-    font-weight: bold;
+    .font-weight-bold();
     width: 86px;
     color: @text-normal-ie;
     color: @text-normal;

apps/common/main/resources/less/chat.less

@@ -64,7 +64,7 @@
 
         .name {
             font-size: 12px;
-            font-weight: bold;
+            .font-weight-bold();
             display: block;
             padding: 0 10px 0 0;
             white-space: nowrap;
@@ -96,7 +96,7 @@
                 word-wrap: break-word;
 
                 .user {
-                    font-weight: bold;
+                    .font-weight-bold();
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -106,7 +106,7 @@
                     color: @text-normal-ie;
                     color: @text-normal;
                     font-size: 12px;
-                    font-weight: bold;
+                    .font-weight-bold();
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;

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/combo-dataview.less

@@ -402,7 +402,7 @@
     .menu-picker-container {
         .group-description {
             padding: 3px 0 3px 10px;
-            font-weight: bold;
+            .font-weight-bold();
         }
 
         .group-items-container .item {

apps/common/main/resources/less/comments.less

@@ -20,7 +20,7 @@
 
         label {
             font-size: 12px;
-            font-weight: bold;
+            .font-weight-bold();
             margin-top: 2px;
         }
     }
@@ -152,7 +152,7 @@
         color: @text-normal-ie;
         color: @text-normal;
         font-size: 12px;
-        font-weight: bold;
+        .font-weight-bold();
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -338,7 +338,7 @@
             margin-right:0;
             line-height: 14px;
             font-size: 14px;
-            font-weight: bold;
+            .font-weight-bold();
             color: @text-normal-ie;
             color: @text-normal;
             opacity: 0.7;

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

@@ -113,7 +113,7 @@ label {
     .box-inner-shadow(0 @scaled-one-px-value 0 @border-toolbar);
 
     .status-label {
-        font-weight: bold;
+        .font-weight-bold();
         color: @text-normal-ie;
         color: @text-normal;
         white-space: nowrap;
@@ -183,7 +183,7 @@ label {
         }
 
         &.header {
-            font-weight: bold;
+            .font-weight-bold();
         }
     }
 

apps/common/main/resources/less/dataview.less

@@ -79,7 +79,7 @@
 
     .header-name {
         padding: 10px 2px 12px 4px;
-        font-weight: bold;
+        .font-weight-bold();
         cursor: default;
     }
 

apps/common/main/resources/less/dropdown-menu.less

@@ -33,6 +33,7 @@
     li {
         & > a {
             padding: 5px 20px;
+            line-height: 16px;
             cursor: pointer;
             color: @text-normal-ie;
             color: @text-normal;
@@ -91,16 +92,17 @@
             float: left;
             width: 20px;
             height: 20px;
-            margin: -3px 5px 0 -15px;
+            margin: -2px 5px 0 -15px;
             background-repeat: no-repeat;
             opacity: @component-normal-icon-opacity;
         }
 
         .no-checkmark.checked {
             .menu-item-icon {
-                background-color: @highlight-button-pressed-ie;
+                background-color: @background-normal-ie;
-                background-color: @highlight-button-pressed;
+                background-color: @background-normal;
-                border-radius: 2px;
+                .box-shadow(0 0 0 2px @border-preview-select-ie);
+                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
             }
         }
 
@@ -136,7 +138,7 @@
                 padding-left: 28px;
             }
             .menu-item-icon {
-                margin: -3px 0 0 -24px;
+                margin: -2px 0 0 -24px;
             }
             .checked:not(.no-checkmark):before  {
                 margin-left: -22px;

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;
@@ -475,3 +520,5 @@
         }
     }
 }
+
+

apps/common/main/resources/less/history.less

@@ -99,7 +99,7 @@
         .user-date {
             display: inline-block;
             font-size: 12px;
-            font-weight: bold;
+            .font-weight-bold();
             margin-right: 12px;
             white-space: nowrap;
             overflow: hidden;
@@ -128,7 +128,7 @@
             white-space: nowrap;
             overflow: hidden;
             font-size: 12px;
-            font-weight: bold;
+            .font-weight-bold();
             cursor: pointer;
             text-overflow: ellipsis;
             padding-right: 35px;

apps/common/main/resources/less/opendialog.less

@@ -33,7 +33,7 @@
         }
 
         &.header {
-          font-weight: bold;
+          .font-weight-bold();
         }
 
       }

apps/common/main/resources/less/plugins.less

@@ -8,7 +8,7 @@
         height: 20px;
         left: 0;
         top: 0;
-        font-weight: bold;
+        .font-weight-bold();
         margin-top: 10px;
         margin-left: 12px;
 
@@ -91,7 +91,7 @@
         label {
             width: 100%;
             padding-right: 20px;
-            font-weight: bold;
+            .font-weight-bold();
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

apps/common/main/resources/less/tabbar.less

@@ -36,7 +36,7 @@
 
             &::after {
                 content: attr(title);
-                font-weight: bold;
+                .font-weight-bold();
                 display: block;
             }
 

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/common/main/resources/less/window.less

@@ -101,6 +101,7 @@
         text-align: center;
         font-size: 12px;
         font-weight: 700;
+        letter-spacing: 0.01em;
         vertical-align: bottom;
         line-height: 26px;
 
@@ -122,7 +123,7 @@
             margin-right:0;
             line-height: 14px;
             font-size: 14px;
-            font-weight: bold;
+            .font-weight-bold();
             color: @text-normal-ie;
             color: @text-normal;
             opacity: 0.7;

apps/common/mobile/lib/component/ThemeColorPalette.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { f7, ListItem, List, Icon } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
-const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }) => {
+const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isTypeCustomColors }) => {
     return (
         <div className='palette'>
             {themeColors.map((row, rowIndex) => {
@@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }
                         {row.map((effect, index) => {
                             return(
                                 <a key={`tc-${rowIndex}-${index}`}
-                                   className={(curColor && !isTypeCustomColors && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color)))  ? 'active' : ''}
+                                   className={(curColor && !isTypeCustomColors && !isTypeColors && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color)))  ? 'active' : ''}
                                    style={{ background: `#${effect.color}`}}
                                    onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
                                 ></a>
@@ -115,7 +115,7 @@ const ThemeColorPalette = props => {
             <List>
                 <ListItem className='theme-colors'>
                     <div>{ _t.textThemeColors }</div>
-                    <ThemeColors isTypeCustomColors={isTypeCustomColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
+                    <ThemeColors isTypeCustomColors={isTypeCustomColors} isTypeColors={isTypeColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
                 </ListItem>
                 <ListItem className='standart-colors'>
                     <div>{ _t.textStandartColors }</div>

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);
@@ -226,10 +239,9 @@ define([
         },
 
         onChangeRulers: function (btn, checked) {
-            this.api.asc_SetViewRulers(checked);
             Common.localStorage.setBool('de-hidden-rulers', !checked);
             Common.Utils.InternalSettings.set("de-hidden-rulers", !checked);
-            this.view.fireEvent('rulers:hide', [!checked]);
+            this.api.asc_SetViewRulers(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':
-                me.api.asc_SetViewRulers(!item.isChecked());
-                Common.localStorage.setBool('de-hidden-rulers', item.isChecked());
-                Common.Utils.InternalSettings.set("de-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 '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/DocumentHolder.js

@@ -683,7 +683,7 @@ define([
                     me._arrSpecialPaste[Asc.c_oSpecialPasteProps.overwriteCells] = me.txtOverwriteCells;
 
                     pasteContainer = $('<div id="special-paste-container" style="position: absolute;"><div id="id-document-holder-btn-special-paste"></div></div>');
-                    me.cmpEl.append(pasteContainer);
+                    me.cmpEl.find('#id_main_view').append(pasteContainer);
 
                     me.btnSpecialPaste = new Common.UI.Button({
                         parentEl: $('#id-document-holder-btn-special-paste'),
@@ -719,6 +719,9 @@ define([
                     if (pasteContainer.is(':visible')) pasteContainer.hide();
                 } else {
                     var showPoint = [coord.asc_getX() + coord.asc_getWidth() + 3, coord.asc_getY() + coord.asc_getHeight() + 3];
+                    if (!Common.Utils.InternalSettings.get("de-hidden-rulers")) {
+                        showPoint = [showPoint[0] - 19, showPoint[1] - 26];
+                    }
                     pasteContainer.css({left: showPoint[0], top : showPoint[1]});
                     pasteContainer.show();
                 }

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/filemenu.less

@@ -134,7 +134,7 @@
           width: 30%;
 
           label {
-            font-weight: bold;
+            .font-weight-bold();
             font-size: 12px;
           }
         }
@@ -157,7 +157,7 @@
     font-size: 10pt;
     color: @text-normal-ie;
     color: @text-normal;
-    font-weight: bold;
+    .font-weight-bold();
     padding: 0 0 10px 10px;
     white-space: nowrap;
   }
@@ -344,7 +344,7 @@
           width: 30%;
 
           label {
-            font-weight: bold;
+            .font-weight-bold();
           }
         }
 
@@ -428,7 +428,7 @@ label {
 }
 
 .header {
-  font-weight: bold;
+  .font-weight-bold();
   margin: 30px 0 10px;
 }
 

apps/documenteditor/main/resources/less/navigation.less

@@ -9,7 +9,7 @@
         left: 0;
         top: 0;
         width: 100%;
-        font-weight: bold;
+        .font-weight-bold();
         padding: 10px 12px;
         border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-bottom: @scaled-one-px-value solid @border-toolbar;

apps/documenteditor/main/resources/less/thumbnails.less

@@ -19,7 +19,7 @@
 
         label {
             font-size: 12px;
-            font-weight: bold;
+            .font-weight-bold();
             margin-top: 2px;
         }
 

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/documenteditor/mobile/locale/en.json

@@ -575,6 +575,7 @@
     "textFindAndReplaceAll": "Find and Replace All",
     "textFormat": "Format",
     "textHelp": "Help",
+    "textFeedback": "Feedback & Support",
     "textHiddenTableBorders": "Hidden Table Borders",
     "textHighlightResults": "Highlight Results",
     "textInch": "Inch",

apps/documenteditor/mobile/src/controller/settings/Settings.jsx

@@ -67,6 +67,17 @@ const Settings = props => {
         }, 400);
     };
 
+    const showFeedback = () => {
+        let config = props.storeAppOptions.config;
+
+        closeModal();
+        setTimeout(() => {
+            if(config && !!config.feedback && !!config.feedback.url) {
+                window.open(config.feedback.url, "_blank");
+            } else window.open('{{__SUPPORT_URL__}}', "_blank");
+        }, 400);
+    }
+
     const onOrthographyCheck = () => {
         closeModal();
         setTimeout(() => {
@@ -87,6 +98,7 @@ const Settings = props => {
                          onReaderMode={onReaderMode}
                          onPrint={onPrint}
                          showHelp={showHelp}
+                         showFeedback={showFeedback}
                          onOrthographyCheck={onOrthographyCheck}
                          onDownloadOrigin={onDownloadOrigin}
     />

apps/documenteditor/mobile/src/less/icons-ios.less

@@ -74,7 +74,7 @@
     &.icon-help {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 22C17.5224 22 21.9995 17.5228 21.9995 12C21.9995 6.47715 17.5224 2 11.9995 2C6.47666 2 1.99951 6.47715 1.99951 12C1.99951 17.5228 6.47666 22 11.9995 22ZM11.9995 21C16.9701 21 20.9995 16.9706 20.9995 12C20.9995 7.02944 16.9701 3 11.9995 3C7.02895 3 2.99951 7.02944 2.99951 12C2.99951 16.9706 7.02895 21 11.9995 21Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 9.83333H8V9.33333C8 8.61238 8.25215 7.67613 8.87874 6.90143C9.53629 6.08847 10.5714 5.5 12 5.5C13.3745 5.5 14.4185 5.98364 15.1033 6.78325C15.7633 7.5539 16 8.51284 16 9.33333C16 10.2045 15.8037 10.8795 15.4735 11.4464C15.1947 11.9251 14.8353 12.2932 14.5602 12.575L14.4676 12.67C14.1626 12.9842 13.9449 13.2293 13.7843 13.549C13.6298 13.8568 13.5 14.2947 13.5 15V15.5H11.5V15C11.5 14.0311 11.6826 13.2778 11.9969 12.6517C12.305 12.0381 12.7119 11.6072 13.0324 11.277L13.104 11.2034C13.4061 10.8929 13.599 10.691 13.7452 10.4399C13.8839 10.2019 14 9.87881 14 9.33333C14 8.86643 13.862 8.40851 13.5842 8.08418C13.3312 7.78871 12.8749 7.5 12 7.5C11.1786 7.5 10.7137 7.81307 10.4338 8.15917C10.1227 8.5437 10 9.02417 10 9.33333V9.83333ZM11.5 16.5H13.5V18.5H11.5V16.5Z" fill="black"/></svg>');
     }
     &.icon-about {
       width: 22px;
@@ -84,7 +84,12 @@
     &.icon-navigation {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4H2V5H16V4Z" fill="@{brandColor}"/><path d="M19 9H5V10H19V9Z" fill="@{brandColor}"/><path d="M23 14V15H9V14H23Z" fill="@{brandColor}" /><path d="M16 20V19H2V20H16Z" fill="@{brandColor}"/></svg>')
+      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4H2V5H16V4Z" fill="@{brandColor}"/><path d="M19 9H5V10H19V9Z" fill="@{brandColor}"/><path d="M23 14V15H9V14H23Z" fill="@{brandColor}" /><path d="M16 20V19H2V20H16Z" fill="@{brandColor}"/></svg>');
+    }
+    &.icon-feedback {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 6H3V18H21V6ZM3 5C2.44772 5 2 5.44772 2 6V18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18V6C22 5.44772 21.5523 5 21 5H3Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.66552 6.37165L3.33448 5.62835L12 13.3273L20.6655 5.62835L21.3345 6.37165L12 14.6727L2.66552 6.37165Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.37629 11.3293L3.37629 18.3293L2.62371 17.6707L8.62371 10.6707L9.37629 11.3293Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.3763 10.6707L21.3763 17.6707L20.6237 18.3293L14.6237 11.3293L15.3763 10.6707Z" fill="black"/></svg>');
     }
 
     // Download

apps/documenteditor/mobile/src/less/icons-material.less

@@ -129,7 +129,7 @@
     &.icon-help {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.1875 7.17188C9.96875 6.39062 10.9062 6 12 6C13.0938 6 14.0312 6.39062 14.8125 7.17188C15.5938 7.95312 15.9844 8.89062 15.9844 9.98438C15.9844 10.8281 15.4844 11.7031 14.4844 12.6094C13.4844 13.4844 12.9844 14.2812 12.9844 15H11.0156C11.0156 14.2812 11.1719 13.6719 11.4844 13.1719C11.7969 12.6406 12.1406 12.2656 12.5156 12.0469C12.8906 11.7969 13.2344 11.5 13.5469 11.1562C13.8594 10.8125 14.0156 10.4219 14.0156 9.98438C14.0156 9.45312 13.8125 9 13.4062 8.625C13 8.21875 12.5312 8.01562 12 8.01562C11.4688 8.01562 11 8.21875 10.5938 8.625C10.1875 9 9.98438 9.45312 9.98438 9.98438H8.01562C8.01562 8.89062 8.40625 7.95312 9.1875 7.17188ZM6.32812 17.6719C7.92188 19.2344 9.8125 20.0156 12 20.0156C14.1875 20.0156 16.0625 19.2344 17.625 17.6719C19.2188 16.0781 20.0156 14.1875 20.0156 12C20.0156 9.8125 19.2188 7.9375 17.625 6.375C16.0625 4.78125 14.1875 3.98438 12 3.98438C9.8125 3.98438 7.92188 4.78125 6.32812 6.375C4.76562 7.9375 3.98438 9.8125 3.98438 12C3.98438 14.1875 4.76562 16.0781 6.32812 17.6719ZM4.92188 4.96875C6.89062 3 9.25 2.01562 12 2.01562C14.75 2.01562 17.0938 3 19.0312 4.96875C21 6.90625 21.9844 9.25 21.9844 12C21.9844 14.75 21 17.1094 19.0312 19.0781C17.0938 21.0156 14.75 21.9844 12 21.9844C9.25 21.9844 6.89062 21.0156 4.92188 19.0781C2.98438 17.1094 2.01562 14.75 2.01562 12C2.01562 9.25 2.98438 6.90625 4.92188 4.96875ZM11.0156 18V15.9844H12.9844V18H11.0156Z" fill="black"/></svg>');
     }
     &.icon-about {
       width: 22px;
@@ -144,7 +144,12 @@
     &.icon-navigation {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4H2V5H16V4Z" fill="@{brandColor}"/><path d="M19 9H5V10H19V9Z" fill="@{brandColor}"/><path d="M23 14V15H9V14H23Z" fill="@{brandColor}" /><path d="M16 20V19H2V20H16Z" fill="@{brandColor}"/></svg>')
+      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4H2V5H16V4Z" fill="@{brandColor}"/><path d="M19 9H5V10H19V9Z" fill="@{brandColor}"/><path d="M23 14V15H9V14H23Z" fill="@{brandColor}" /><path d="M16 20V19H2V20H16Z" fill="@{brandColor}"/></svg>');
+    }
+    &.icon-feedback {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 6H3V18H21V6ZM2 5V19H22V5H2Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.66552 6.37165L3.33448 5.62835L12 13.3273L20.6655 5.62835L21.3345 6.37165L12 14.6727L2.66552 6.37165Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.37629 11.3293L3.37629 18.3293L2.62371 17.6707L8.62371 10.6707L9.37629 11.3293Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.3763 10.6707L21.3763 17.6707L20.6237 18.3293L14.6237 11.3293L15.3763 10.6707Z" fill="black"/></svg>');
     }
 
     // Download

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -186,7 +186,7 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                         <Icon slot="media" icon="icon-info"></Icon>
                     </ListItem>
                     {_canHelp &&
-                        <ListItem title={_t.textHelp} link="#" onClick={props.showHelp}>
+                        <ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={props.showHelp}>
                             <Icon slot="media" icon="icon-help"></Icon>
                         </ListItem>
                     }
@@ -195,6 +195,9 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                             <Icon slot="media" icon="icon-about"></Icon>
                         </ListItem>
                     }
+                    <ListItem title={t('Settings.textFeedback')} link="#" className='no-indicator' onClick={props.showFeedback}>
+                            <Icon slot="media" icon="icon-feedback"></Icon>
+                    </ListItem>
                 </List>
             </Page>
         </View>
@@ -217,10 +220,10 @@ class SettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
+                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
                 </Popup>
         )
     }

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

@@ -56,6 +56,7 @@ define([
             this.editMode = true;
             this._state = {no_slides: undefined};
             this._initSettings = true;
+            this._priorityArr = [];
 
             this.addListeners({
                 'RightMenu': {
@@ -95,8 +96,15 @@ define([
             this.editMode = mode.isEdit;
         },
 
-        onRightMenuClick: function(menu, type, minimized) {
+        onRightMenuClick: function(menu, type, minimized, event) {
             if (!minimized && this.editMode) {
+                if (event) { // user click event
+                    var idx = this._priorityArr.indexOf(type);
+                    if (idx>=0)
+                        this._priorityArr.splice(idx, 1);
+                    this._priorityArr.unshift(type);
+                }
+
                 var panel = this._settings[type].panel;
                 var props = this._settings[type].props;
                 if (props && panel)
@@ -191,6 +199,16 @@ define([
             if (!this.rightmenu.minimizedMode || open) {
                 var active;
 
+                if (priorityactive<0 && this._priorityArr.length>0) {
+                    for (i=0; i<this._priorityArr.length; i++) {
+                        var type = this._priorityArr[i],
+                            pnl = this._settings[type];
+                        if (pnl===undefined || pnl.btn===undefined || pnl.panel===undefined || pnl.hidden) continue;
+                        priorityactive = type;
+                        break;
+                    }
+                }
+
                 if (priorityactive>-1) active = priorityactive;
                 else if (currentactive>=0) active = currentactive;
                 else if (lastactive>=0) active = lastactive;
@@ -249,23 +267,35 @@ define([
         },
 
         onInsertTable:  function() {
-            this._settings[Common.Utils.documentSettingsType.Table].needShow = true;
+            // this._settings[Common.Utils.documentSettingsType.Table].needShow = true;
+            var idx = this._priorityArr.indexOf(Common.Utils.documentSettingsType.Table);
+            if (idx>=0)
+                this._priorityArr.splice(idx, 1);
+            this._priorityArr.unshift(Common.Utils.documentSettingsType.Table);
         },
 
         onInsertImage:  function() {
-            this._settings[Common.Utils.documentSettingsType.Image].needShow = true;
+            // this._settings[Common.Utils.documentSettingsType.Image].needShow = true;
+            var idx = this._priorityArr.indexOf(Common.Utils.documentSettingsType.Image);
+            if (idx>=0)
+                this._priorityArr.splice(idx, 1);
+            this._priorityArr.unshift(Common.Utils.documentSettingsType.Image);
         },
 
         onInsertChart:  function() {
-            this._settings[Common.Utils.documentSettingsType.Chart].needShow = true;
+            // this._settings[Common.Utils.documentSettingsType.Chart].needShow = true;
+            var idx = this._priorityArr.indexOf(Common.Utils.documentSettingsType.Chart);
+            if (idx>=0)
+                this._priorityArr.splice(idx, 1);
+            this._priorityArr.unshift(Common.Utils.documentSettingsType.Chart);
         },
 
         onInsertShape:  function() {
-            this._settings[Common.Utils.documentSettingsType.Shape].needShow = true;
+            // this._settings[Common.Utils.documentSettingsType.Shape].needShow = true;
         },
 
         onInsertTextArt:  function() {
-            this._settings[Common.Utils.documentSettingsType.TextArt].needShow = true;
+            // this._settings[Common.Utils.documentSettingsType.TextArt].needShow = true;
         },
 
         UpdateThemeColors:  function() {

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();
@@ -1425,6 +1424,7 @@ define([
                                 var win = new PE.Views.ShapeSettingsAdvanced(
                                     {
                                         shapeProps: elValue,
+                                        slideSize: PE.getController('Toolbar').currentPageSize,
                                         handler: function(result, value) {
                                             if (result == 'ok') {
                                                 if (me.api) {
@@ -2502,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();
 
@@ -2533,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/ChartSettingsAdvanced.template

@@ -1,4 +1,57 @@
-<div id="id-adv-chart-alttext" class="settings-panel active">
+<div  id="id-adv-chart-placement" class="settings-panel active">
+    <div class="inner-content">
+        <table cols="3">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textSize %></label>
+                </td>
+            </tr>
+            <tr>
+                <td width="93px" class="padding-large">
+                    <label class="input-label"><%= scope.textWidth %></label>
+                    <div id="chart-advanced-spin-width"></div>
+                </td>
+                <td width="28px" style="vertical-align: bottom;" class="padding-large">
+                    <div id="chart-advanced-button-ratio"></div>
+                </td>
+                <td width="93px" class="padding-large">
+                    <label class="input-label"><%= scope.textHeight %></label>
+                    <div id="chart-advanced-spin-height"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+    <div class="inner-content">
+        <table cols="2" style="width: 100%;">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textPosition %></label>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small" width="121px">
+                    <label class="input-label"><%= scope.textHorizontal %></label>
+                    <div id="chart-advanced-spin-x"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="chart-advanced-combo-from-x"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textVertical %></label>
+                    <div id="chart-advanced-spin-y"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="chart-advanced-combo-from-y"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="id-adv-chart-alttext" class="settings-panel">
     <div class="inner-content">
         <table cols="1" width="100%">
             <tr>

apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template

@@ -24,7 +24,6 @@
             </tr>
         </table>
     </div>
-    <div class="padding-large"></div>
     <div class="inner-content">
         <table cols="2" style="width: 100%;">
             <tr>
@@ -33,14 +32,24 @@
                 </td>
             </tr>
             <tr>
-                <td class="padding-small" width="115px">
+                <td class="padding-small" width="106px">
-                    <label class="input-label">X</label>
+                    <label class="input-label"><%= scope.textHorizontal %></label>
                     <div id="image-advanced-spin-x"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label">Y</label>
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="image-advanced-combo-from-x"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textVertical %></label>
                     <div id="image-advanced-spin-y"></div>
                 </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="image-advanced-combo-from-y"></div>
+                </td>
             </tr>
         </table>
     </div>

apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template

@@ -2,20 +2,55 @@
     <div class="inner-content">
         <table cols="3">
             <tr>
-                <td width="108px">
+                <td colspan="3" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textSize %></label>
+                </td>
+            </tr>
+            <tr>
+                <td width="93px">
                     <label class="input-label"><%= scope.textWidth %></label>
                     <div id="shape-advanced-spin-width"></div>
                 </td>
                 <td width="28px" style="vertical-align: bottom;">
                     <div id="shape-advanced-button-ratio"></div>
                 </td>
-                <td width="108px">
+                <td width="93px">
                     <label class="input-label"><%= scope.textHeight %></label>
                     <div id="shape-advanced-spin-height"></div>
                 </td>
             </tr>
         </table>
     </div>
+    <div class="padding-large"></div>
+    <div class="inner-content">
+        <table cols="2" style="width: 100%;">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textPosition %></label>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small" width="121px">
+                    <label class="input-label"><%= scope.textHorizontal %></label>
+                    <div id="shape-advanced-spin-x"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="shape-advanced-combo-from-x"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textVertical %></label>
+                    <div id="shape-advanced-spin-y"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="shape-advanced-combo-from-y"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
 </div>
 <div id="id-adv-shape-rotate" class="settings-panel active">
     <div class="inner-content  padding-large">

apps/presentationeditor/main/app/template/TableSettingsAdvanced.template

@@ -1,4 +1,58 @@
-<div id="id-adv-table-cell-props" class="settings-panel active">
+<div  id="id-adv-table-placement" class="settings-panel active">
+    <div class="inner-content">
+        <table cols="3">
+            <tr>
+                <td colspan="3" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textSize %></label>
+                </td>
+            </tr>
+            <tr>
+                <td width="93px">
+                    <label class="input-label"><%= scope.textWidth %></label>
+                    <div id="tableadv-spin-width"></div>
+                </td>
+                <td width="28px" style="vertical-align: bottom;">
+                    <div id="tableadv-button-ratio"></div>
+                </td>
+                <td width="93px">
+                    <label class="input-label"><%= scope.textHeight %></label>
+                    <div id="tableadv-spin-height"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+    <div class="padding-large"></div>
+    <div class="inner-content">
+        <table cols="2" style="width: 100%;">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textPosition %></label>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small" width="121px">
+                    <label class="input-label"><%= scope.textHorizontal %></label>
+                    <div id="tableadv-spin-x"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="tableadv-combo-from-x"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textVertical %></label>
+                    <div id="tableadv-spin-y"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="tableadv-combo-from-y"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="id-adv-table-cell-props" class="settings-panel">
     <div class="inner-content">
         <table cols="2" style="width: 100%;">
             <tr>

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

@@ -486,6 +486,7 @@ define([
                             (new PE.Views.ChartSettingsAdvanced(
                                 {
                                     chartProps: elValue,
+                                    slideSize: PE.getController('Toolbar').currentPageSize,
                                     handler: function(result, value) {
                                         if (result == 'ok') {
                                             if (me.api) {

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

@@ -50,13 +50,15 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
             height: 342,
             toggleGroup: 'chart-adv-settings-group',
             properties: null,
-            storageName: 'pe-chart-settings-adv-category'
+            storageName: 'pe-chart-settings-adv-category',
+            sizeMax: {width: 55.88, height: 55.88},
         },
 
         initialize : function(options) {
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
+                    {panelId: 'id-adv-chart-placement',  panelCaption: this.textPlacement},
                     {panelId: 'id-adv-chart-alttext',    panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
@@ -65,7 +67,10 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
             }, options);
             Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
 
+            this.spinners = [];
+
             this._originalProps = this.options.chartProps;
+            this.slideSize = this.options.slideSize;
             this._changedProps = null;
         },
 
@@ -74,6 +79,129 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
 
             var me = this;
 
+            // Placement
+
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $('#chart-advanced-spin-width'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnWidth.on('change', _.bind(function(field){
+                if (this.btnRatio.pressed) {
+                    var w = field.getNumberValue();
+                    var h = w/this._nRatio;
+                    if (h>this.sizeMax.height) {
+                        h = this.sizeMax.height;
+                        w = h * this._nRatio;
+                        this.spnWidth.setValue(w, true);
+                    }
+                    this.spnHeight.setValue(h, true);
+                }
+                if (this._changedProps) {
+                    this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                    this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue()));
+                }
+            }, this));
+            this.spinners.push(this.spnWidth);
+
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $('#chart-advanced-spin-height'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var h = field.getNumberValue(), w = null;
+                if (this.btnRatio.pressed) {
+                    w = h * this._nRatio;
+                    if (w>this.sizeMax.width) {
+                        w = this.sizeMax.width;
+                        h = w/this._nRatio;
+                        this.spnHeight.setValue(h, true);
+                    }
+                    this.spnWidth.setValue(w, true);
+                }
+                if (this._changedProps) {
+                    this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                    this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()));
+                }
+            }, this));
+            this.spinners.push(this.spnHeight);
+
+            this.btnRatio = new Common.UI.Button({
+                parentEl: $('#chart-advanced-button-ratio'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon advanced-btn-ratio',
+                style: 'margin-bottom: 1px;',
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.btnRatio.on('click', _.bind(function(btn, e) {
+                if (btn.pressed && this.spnHeight.getNumberValue()>0) {
+                    this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
+                }
+                if (this._changedProps) {
+                    this._changedProps.asc_putLockAspect(btn.pressed);
+                }
+            }, this));
+
+            this.spnX = new Common.UI.MetricSpinner({
+                el: $('#chart-advanced-spin-x'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnX);
+
+            this.spnY = new Common.UI.MetricSpinner({
+                el: $('#chart-advanced-spin-y'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnY);
+
+            this.cmbFromX = new Common.UI.ComboBox({
+                el: $('#chart-advanced-combo-from-x'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
+            this.cmbFromY = new Common.UI.ComboBox({
+                el: $('#chart-advanced-combo-from-y'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
             // Alt Text
 
             this.inputAltTitle = new Common.UI.InputField({
@@ -97,6 +225,7 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
         },
 
         afterRender: function() {
+            this.updateMetricUnit();
             this._setDefaults(this._originalProps);
             if (this.storageName) {
                 var value = Common.localStorage.getItem(this.storageName);
@@ -106,7 +235,8 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.inputAltTitle, this.textareaAltDescription  // 0 tab
+                this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
+                this.inputAltTitle, this.textareaAltDescription  // 1 tab
             ];
         },
 
@@ -117,6 +247,9 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
             setTimeout(function(){
                 switch (index) {
                     case 0:
+                        me.spnWidth.focus();
+                        break;
+                    case 1:
                         me.inputAltTitle.focus();
                         break;
                 }
@@ -125,6 +258,30 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
 
         _setDefaults: function(props) {
             if (props ){
+                this.spnWidth.setMaxValue(this.sizeMax.width);
+                this.spnHeight.setMaxValue(this.sizeMax.height);
+
+                this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.asc_getWidth()).toFixed(2), true);
+                this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.asc_getHeight()).toFixed(2), true);
+
+                if (props.asc_getHeight()>0)
+                    this._nRatio = props.asc_getWidth()/props.asc_getHeight();
+
+                var value = props.asc_getLockAspect();
+                this.btnRatio.toggle(value);
+
+                this.cmbFromX.setValue('left');
+                this.cmbFromY.setValue('left');
+
+                if (props.asc_getPosition()) {
+                    var Position = {X: props.asc_getPosition().get_X(), Y: props.asc_getPosition().get_Y()};
+                    this.spnX.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
+                    this.spnY.setValue((Position.Y !== null && Position.Y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.Y) : '', true);
+                } else {
+                    this.spnX.setValue('', true);
+                    this.spnY.setValue('', true);
+                }
+
                 var value = props.asc_getTitle();
                 this.inputAltTitle.setValue(value ? value : '');
 
@@ -136,6 +293,23 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
         },
 
         getSettings: function() {
+            var Position = new Asc.CPosition();
+            if (this.spnX.getValue() !== '') {
+                var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
+                if (this.cmbFromX.getValue() === 'center') {
+                    x = (this.slideSize.width/36000)/2 + x;
+                }
+                Position.put_X(x);
+            }
+            if (this.spnY.getValue() !== '') {
+                var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
+                if (this.cmbFromY.getValue() === 'center') {
+                    y = (this.slideSize.height/36000)/2 + y;
+                }
+                Position.put_Y(y);
+            }
+            this._changedProps.asc_putPosition(Position);
+
             if (this.isAltTitleChanged)
                 this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
 
@@ -145,11 +319,36 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
             return { chartProps: this._changedProps} ;
         },
 
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
+                }
+            }
+            this.sizeMax = {
+                width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.width*10),
+                height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.height*10)
+            };
+        },
+
         textTitle:      'Chart - Advanced Settings',
         textAlt: 'Alternative Text',
         textAltTitle: 'Title',
         textAltDescription: 'Description',
-        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
+        textPlacement: 'Placement',
+        textSize: 'Size',
+        textWidth: 'Width',
+        textHeight: 'Height',
+        textPosition: 'Position',
+        textHorizontal: 'Horizontal',
+        textVertical: 'Vertical',
+        textFrom: 'From',
+        textTopLeftCorner: 'Top Left Corner',
+        textCenter: 'Center',
+        textKeepRatio: 'Constant Proportions',
 
     }, PE.Views.ChartSettingsAdvanced || {}));
 });

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

@@ -2484,6 +2484,7 @@ define([
                                 (new PE.Views.TableSettingsAdvanced(
                                     {
                                         tableProps: elValue,
+                                        slideSize: PE.getController('Toolbar').currentPageSize,
                                         handler: function(result, value) {
                                             if (result == 'ok') {
                                                 if (me.api) {
@@ -2527,6 +2528,7 @@ define([
                                     {
                                         imageProps: elValue,
                                         sizeOriginal: imgsizeOriginal,
+                                        slideSize: PE.getController('Toolbar').currentPageSize,
                                         handler: function(result, value) {
                                             if (result == 'ok') {
                                                 if (me.api) {
@@ -2559,6 +2561,7 @@ define([
                                 (new PE.Views.ShapeSettingsAdvanced(
                                     {
                                         shapeProps: elValue,
+                                        slideSize: PE.getController('Toolbar').currentPageSize,
                                         handler: function(result, value) {
                                             if (result == 'ok') {
                                                 if (me.api) {

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

@@ -436,6 +436,7 @@ define([
                                 {
                                     imageProps: elValue,
                                     sizeOriginal: imgsizeOriginal,
+                                    slideSize: PE.getController('Toolbar').currentPageSize,
                                     handler: function(result, value) {
                                         if (result == 'ok') {
                                             if (me.api) {

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

@@ -74,6 +74,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             this._nRatio = 1;
             this._isDefaultSize = false;
             this._originalProps = this.options.imageProps;
+            this.slideSize = this.options.slideSize;
         },
 
         render: function() {
@@ -178,6 +179,32 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             });
             this.spinners.push(this.spnY);
 
+            this.cmbFromX = new Common.UI.ComboBox({
+                el: $('#image-advanced-combo-from-x'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
+            this.cmbFromY = new Common.UI.ComboBox({
+                el: $('#image-advanced-combo-from-y'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
             // Rotation
             this.spnAngle = new Common.UI.MetricSpinner({
                 el: $('#image-advanced-spin-angle'),
@@ -223,7 +250,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.btnOriginalSize, this.spnX, this.spnY,// 0 tab
+                this.spnWidth, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 0 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
                 this.inputAltTitle, this.textareaAltDescription  // 2 tab
             ];
@@ -271,6 +298,9 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                 if (props.get_Height()>0)
                     this._nRatio = props.get_Width()/props.get_Height();
 
+                this.cmbFromX.setValue('left');
+                this.cmbFromY.setValue('left');
+
                 if (props.get_Position()) {
                     var Position = {X: props.get_Position().get_X(), Y: props.get_Position().get_Y()};
                     this.spnX.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
@@ -306,10 +336,20 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             properties.put_ResetCrop(this._isDefaultSize);
 
             var Position = new Asc.CPosition();
-            if (this.spnX.getValue() !== '')
+            if (this.spnX.getValue() !== '') {
-                Position.put_X(Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue()));
+                var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
-            if (this.spnY.getValue() !== '')
+                if (this.cmbFromX.getValue() === 'center') {
-                Position.put_Y(Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue()));
+                    x = (this.slideSize.width/36000)/2 + x;
+                }
+                Position.put_X(x);
+            }
+            if (this.spnY.getValue() !== '') {
+                var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
+                if (this.cmbFromY.getValue() === 'center') {
+                    y = (this.slideSize.height/36000)/2 + y;
+                }
+                Position.put_Y(y);
+            }
             properties.put_Position(Position);
 
             if (this.isAltTitleChanged)
@@ -360,7 +400,12 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
         textAngle: 'Angle',
         textFlipped: 'Flipped',
         textHorizontally: 'Horizontally',
-        textVertically: 'Vertically'
+        textVertically: 'Vertically',
+        textHorizontal: 'Horizontal',
+        textVertical: 'Vertical',
+        textFrom: 'From',
+        textTopLeftCorner: 'Top Left Corner',
+        textCenter: 'Center'
 
     }, PE.Views.ImageSettingsAdvanced || {}));
 });

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

@@ -258,7 +258,7 @@ define([
                 Common.localStorage.setItem("pe-hide-right-settings", 1);
             }
 
-            this.fireEvent('rightmenuclick', [this, btn.options.asctype, this.minimizedMode]);
+            this.fireEvent('rightmenuclick', [this, btn.options.asctype, this.minimizedMode, e]);
         },
 
         SetActivePane: function(type, open) {

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

@@ -737,6 +737,7 @@ define([
                             (new PE.Views.ShapeSettingsAdvanced(
                                 {
                                     shapeProps: elValue,
+                                    slideSize: PE.getController('Toolbar').currentPageSize,
                                     handler: function(result, value) {
                                         if (result == 'ok') {
                                             if (me.api) {

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

@@ -61,7 +61,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
-                    {panelId: 'id-adv-shape-width',      panelCaption: this.textSize},
+                    {panelId: 'id-adv-shape-width',      panelCaption: this.textPlacement},
                     {panelId: 'id-adv-shape-rotate',     panelCaption: this.textRotation},
                     {panelId: 'id-adv-shape-shape',      panelCaption: this.textWeightArrows},
                     {panelId: 'id-adv-shape-margins',    panelCaption: this.textTextBox},
@@ -80,6 +80,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             this._nRatio = 1;
 
             this._originalProps = this.options.shapeProps;
+            this.slideSize = this.options.slideSize;
             this._changedProps = null;
         },
 
@@ -91,7 +92,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             this.spnWidth = new Common.UI.MetricSpinner({
                 el: $('#shape-advanced-spin-width'),
                 step: .1,
-                width: 100,
+                width: 85,
                 defaultUnit : "cm",
                 value: '3 cm',
                 maxValue: 55.88,
@@ -118,7 +119,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             this.spnHeight = new Common.UI.MetricSpinner({
                 el: $('#shape-advanced-spin-height'),
                 step: .1,
-                width: 100,
+                width: 85,
                 defaultUnit : "cm",
                 value: '3 cm',
                 maxValue: 55.88,
@@ -159,6 +160,56 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 }
             }, this));
 
+            this.spnX = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-x'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnX);
+
+            this.spnY = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-y'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnY);
+
+            this.cmbFromX = new Common.UI.ComboBox({
+                el: $('#shape-advanced-combo-from-x'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
+            this.cmbFromY = new Common.UI.ComboBox({
+                el: $('#shape-advanced-combo-from-y'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
             // Margins
             this.spnMarginTop = new Common.UI.MetricSpinner({
                 el: $('#shape-margin-top'),
@@ -521,7 +572,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, // 0 tab
+                this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
                 this.cmbCapType, this.cmbJoinType, // 2 tab
                 this.radioNofit, this.radioShrink, this.radioFit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab
@@ -578,15 +629,27 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                     this.radioFit.setDisabled(true);
                 }
 
-                this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Width()).toFixed(2), true);
+                this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.asc_getWidth()).toFixed(2), true);
-                this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Height()).toFixed(2), true);
+                this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.asc_getHeight()).toFixed(2), true);
 
-                if (props.get_Height()>0)
+                if (props.asc_getHeight()>0)
-                    this._nRatio = props.get_Width()/props.get_Height();
+                    this._nRatio = props.asc_getWidth()/props.asc_getHeight();
 
                 var value = props.asc_getLockAspect();
                 this.btnRatio.toggle(value);
 
+                this.cmbFromX.setValue('left');
+                this.cmbFromY.setValue('left');
+
+                if (props.asc_getPosition()) {
+                    var Position = {X: props.asc_getPosition().get_X(), Y: props.asc_getPosition().get_Y()};
+                    this.spnX.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
+                    this.spnY.setValue((Position.Y !== null && Position.Y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.Y) : '', true);
+                } else {
+                    this.spnX.setValue('', true);
+                    this.spnY.setValue('', true);
+                }
+
                 this._setShapeDefaults(props);
 
                 var margins = props.get_paddings();
@@ -643,6 +706,23 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
         },
 
         getSettings: function() {
+            var Position = new Asc.CPosition();
+            if (this.spnX.getValue() !== '') {
+                var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
+                if (this.cmbFromX.getValue() === 'center') {
+                    x = (this.slideSize.width/36000)/2 + x;
+                }
+                Position.put_X(x);
+            }
+            if (this.spnY.getValue() !== '') {
+                var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
+                if (this.cmbFromY.getValue() === 'center') {
+                    y = (this.slideSize.height/36000)/2 + y;
+                }
+                Position.put_Y(y);
+            }
+            this._changedProps.asc_putPosition(Position);
+
             if (this.isAltTitleChanged)
                 this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
 
@@ -868,7 +948,14 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
         textAutofit: 'AutoFit',
         textNofit: 'Do not Autofit',
         textShrink: 'Shrink text on overflow',
-        textResizeFit: 'Resize shape to fit text'
+        textResizeFit: 'Resize shape to fit text',
+        textPlacement: 'Placement',
+        textPosition: 'Position',
+        textHorizontal: 'Horizontal',
+        textFrom: 'From',
+        textVertical: 'Vertical',
+        textTopLeftCorner: 'Top Left Corner',
+        textCenter: 'Center'
 
     }, PE.Views.ShapeSettingsAdvanced || {}));
 });

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

@@ -763,6 +763,7 @@ define([
                             (new PE.Views.TableSettingsAdvanced(
                             {
                                 tableProps: elValue,
+                                slideSize: PE.getController('Toolbar').currentPageSize,
                                 handler: function(result, value) {
                                     if (result == 'ok') {
                                         if (me.api) {

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

@@ -49,13 +49,15 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
             alias: 'TableSettingsAdvanced',
             contentWidth: 280,
             height: 385,
-            storageName: 'pe-table-settings-adv-category'
+            storageName: 'pe-table-settings-adv-category',
+            sizeMax: {width: 55.88, height: 55.88},
         },
 
         initialize : function(options) {
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
+                    {panelId: 'id-adv-table-placement',  panelCaption: this.textPlacement},
                     {panelId: 'id-adv-table-cell-props', panelCaption: this.textWidthSpaces},
                     {panelId: 'id-adv-table-alttext',    panelCaption: this.textAlt}
                 ],
@@ -86,6 +88,7 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
 
             this._initialMarginsDefault = false;  // если для всех выделенных ячеек пришло одинаковое значение Flag=0 (Use Default Margins)
             this._originalProps = new Asc.CTableProp(this.options.tableProps);
+            this.slideSize = this.options.slideSize;
         },
 
         render: function() {
@@ -93,6 +96,117 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
 
             var me = this;
 
+            // Placement
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-width'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnWidth.on('change', _.bind(function(field){
+                if (this.btnRatio.pressed) {
+                    var w = field.getNumberValue();
+                    var h = w/this._nRatio;
+                    if (h>this.sizeMax.height) {
+                        h = this.sizeMax.height;
+                        w = h * this._nRatio;
+                        this.spnWidth.setValue(w, true);
+                    }
+                    this.spnHeight.setValue(h, true);
+                }
+            }, this));
+            this.spinners.push(this.spnWidth);
+
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-height'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var h = field.getNumberValue(), w = null;
+                if (this.btnRatio.pressed) {
+                    w = h * this._nRatio;
+                    if (w>this.sizeMax.width) {
+                        w = this.sizeMax.width;
+                        h = w/this._nRatio;
+                        this.spnHeight.setValue(h, true);
+                    }
+                    this.spnWidth.setValue(w, true);
+                }
+            }, this));
+            this.spinners.push(this.spnHeight);
+
+            this.btnRatio = new Common.UI.Button({
+                parentEl: $('#tableadv-button-ratio'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon advanced-btn-ratio',
+                style: 'margin-bottom: 1px;',
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.btnRatio.on('click', _.bind(function(btn, e) {
+                if (btn.pressed && this.spnHeight.getNumberValue()>0) {
+                    this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
+                }
+            }, this));
+
+            this.spnX = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-x'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnX);
+
+            this.spnY = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-y'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnY);
+
+            this.cmbFromX = new Common.UI.ComboBox({
+                el: $('#tableadv-combo-from-x'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
+            this.cmbFromY = new Common.UI.ComboBox({
+                el: $('#tableadv-combo-from-y'),
+                cls: 'input-group-nr',
+                style: "width: 115px;",
+                menuStyle: 'min-width: 115px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ],
+                editable: false,
+                takeFocusOnClose: true
+            });
+
             this._marginsChange = function(field, newValue, oldValue, eOpts, source, property){
                 if (source=='table')
                     this.TableMargins[property] = field.getNumberValue();
@@ -317,9 +431,10 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
+                this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
                 this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight,
-                this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, // 0 tab
+                this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, // 1 tab
-                this.inputAltTitle, this.textareaAltDescription  // 1 tab
+                this.inputAltTitle, this.textareaAltDescription  // 2 tab
             ];
         },
 
@@ -330,12 +445,15 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
             setTimeout(function(){
                 switch (index) {
                     case 0:
+                        me.spnWidth.focus();
+                        break;
+                    case 1:
                         if (!me.spnMarginTop.isDisabled())
                             me.spnMarginTop.focus();
                         else
                             me.spnTableMarginTop.focus();
                         break;
-                    case 1:
+                    case 2:
                         me.inputAltTitle.focus();
                         break;
                 }
@@ -352,6 +470,27 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
         },
 
         getSettings: function() {
+            if (this.spnHeight.getValue()!=='')
+                this._changedProps.put_FrameHeight(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue()));
+            if (this.spnWidth.getValue()!=='')
+                this._changedProps.put_FrameWidth(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()));
+            this._changedProps.put_FrameLockAspect(this.btnRatio.pressed);
+
+            if (this.spnX.getValue() !== '') {
+                var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
+                if (this.cmbFromX.getValue() === 'center') {
+                    x = (this.slideSize.width/36000)/2 + x;
+                }
+                this._changedProps.put_FrameX(x);
+            }
+            if (this.spnY.getValue() !== '') {
+                var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
+                if (this.cmbFromY.getValue() === 'center') {
+                    y = (this.slideSize.height/36000)/2 + y;
+                }
+                this._changedProps.put_FrameY(y);
+            }
+
             if (this.isAltTitleChanged)
                 this._changedProps.put_TableCaption(this.inputAltTitle.getValue());
 
@@ -365,6 +504,24 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
             if (props ){
                 this._allTable = !props.get_CellSelect();
 
+                // placement
+                this.spnWidth.setMaxValue(this.sizeMax.width);
+                this.spnHeight.setMaxValue(this.sizeMax.height);
+                this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_FrameWidth()).toFixed(2), true);
+                this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_FrameHeight()).toFixed(2), true);
+
+                var value = props.get_FrameLockAspect();
+                this.btnRatio.toggle(value);
+                if (props.get_FrameHeight()>0)
+                    this._nRatio = props.get_FrameWidth()/props.get_FrameHeight();
+
+                this.cmbFromX.setValue('left');
+                this.cmbFromY.setValue('left');
+
+                var position = {x: props.get_FrameX(), y: props.get_FrameY()};
+                this.spnX.setValue((position.x !== null && position.x !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(position.x) : '', true);
+                this.spnY.setValue((position.y !== null && position.y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(position.y) : '', true);
+
                 // margins
                 var margins = props.get_DefaultMargins();
                 if (margins) {
@@ -442,6 +599,10 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
                     spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
                 }
             }
+            this.sizeMax = {
+                width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.width*10),
+                height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.height*10)
+            };
         },
 
         textWidthSpaces:    'Margins',
@@ -456,7 +617,18 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
         textAlt: 'Alternative Text',
         textAltTitle: 'Title',
         textAltDescription: 'Description',
-        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
+        textPlacement: 'Placement',
+        textSize: 'Size',
+        textPosition: 'Position',
+        textHorizontal: 'Horizontal',
+        textVertical: 'Vertical',
+        textFrom: 'From',
+        textTopLeftCorner: 'Top Left Corner',
+        textCenter: 'Center',
+        textWidth: 'Width',
+        textHeight: 'Height',
+        textKeepRatio: 'Constant Proportions'
 
     }, PE.Views.TableSettingsAdvanced || {}));
 });

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",
@@ -1321,6 +1323,17 @@
   "PE.Views.ChartSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart, or table.",
   "PE.Views.ChartSettingsAdvanced.textAltTitle": "Title",
   "PE.Views.ChartSettingsAdvanced.textTitle": "Chart - Advanced Settings",
+  "PE.Views.ChartSettingsAdvanced.textPlacement": "Placement",
+  "PE.Views.ChartSettingsAdvanced.textSize": "Size",
+  "PE.Views.ChartSettingsAdvanced.textWidth": "Width",
+  "PE.Views.ChartSettingsAdvanced.textHeight": "Height",
+  "PE.Views.ChartSettingsAdvanced.textPosition": "Position",
+  "PE.Views.ChartSettingsAdvanced.textHorizontal": "Horizontal",
+  "PE.Views.ChartSettingsAdvanced.textVertical": "Vertical",
+  "PE.Views.ChartSettingsAdvanced.textFrom": "From",
+  "PE.Views.ChartSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
+  "PE.Views.ChartSettingsAdvanced.textCenter": "Center",
+  "PE.Views.ChartSettingsAdvanced.textKeepRatio": "Constant Proportions",
   "PE.Views.DateTimeDialog.confirmDefault": "Set default format for {0}: \"{1}\"",
   "PE.Views.DateTimeDialog.textDefault": "Set as default",
   "PE.Views.DateTimeDialog.textFormat": "Formats",
@@ -1696,6 +1709,11 @@
   "PE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
   "PE.Views.ImageSettingsAdvanced.textVertically": "Vertically",
   "PE.Views.ImageSettingsAdvanced.textWidth": "Width",
+  "PE.Views.ImageSettingsAdvanced.textHorizontal": "Horizontal",
+  "PE.Views.ImageSettingsAdvanced.textVertical": "Vertical",
+  "PE.Views.ImageSettingsAdvanced.textFrom": "From",
+  "PE.Views.ImageSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
+  "PE.Views.ImageSettingsAdvanced.textCenter": "Center",
   "PE.Views.LeftMenu.tipAbout": "About",
   "PE.Views.LeftMenu.tipChat": "Chat",
   "PE.Views.LeftMenu.tipComments": "Comments",
@@ -1861,6 +1879,13 @@
   "PE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "PE.Views.ShapeSettingsAdvanced.textWidth": "Width",
   "PE.Views.ShapeSettingsAdvanced.txtNone": "None",
+  "PE.Views.ShapeSettingsAdvanced.textPlacement": "Placement",
+  "PE.Views.ShapeSettingsAdvanced.textPosition": "Position",
+  "PE.Views.ShapeSettingsAdvanced.textHorizontal": "Horizontal",
+  "PE.Views.ShapeSettingsAdvanced.textFrom": "From",
+  "PE.Views.ShapeSettingsAdvanced.textVertical": "Vertical",
+  "PE.Views.ShapeSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
+  "PE.Views.ShapeSettingsAdvanced.textCenter": "Center",
   "PE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "PE.Views.SignatureSettings.strDelete": "Remove Signature",
   "PE.Views.SignatureSettings.strDetails": "Signature Details",
@@ -2018,6 +2043,17 @@
   "PE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings",
   "PE.Views.TableSettingsAdvanced.textTop": "Top",
   "PE.Views.TableSettingsAdvanced.textWidthSpaces": "Margins",
+  "PE.Views.TableSettingsAdvanced.textPlacement": "Placement",
+  "PE.Views.TableSettingsAdvanced.textSize": "Size",
+  "PE.Views.TableSettingsAdvanced.textWidth": "Width",
+  "PE.Views.TableSettingsAdvanced.textHeight": "Height",
+  "PE.Views.TableSettingsAdvanced.textPosition": "Position",
+  "PE.Views.TableSettingsAdvanced.textHorizontal": "Horizontal",
+  "PE.Views.TableSettingsAdvanced.textVertical": "Vertical",
+  "PE.Views.TableSettingsAdvanced.textFrom": "From",
+  "PE.Views.TableSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
+  "PE.Views.TableSettingsAdvanced.textCenter": "Center",
+  "PE.Views.TableSettingsAdvanced.textKeepRatio": "Constant Proportions",
   "PE.Views.TextArtSettings.strBackground": "Background color",
   "PE.Views.TextArtSettings.strColor": "Color",
   "PE.Views.TextArtSettings.strFill": "Fill",

apps/presentationeditor/main/resources/less/advanced-settings.less

@@ -32,7 +32,7 @@
     .div-category {
         padding: 0 15px;
         text-align: right;
-        font-weight: bold;
+        .font-weight-bold();
         font-size: 11px;
     }
 }

apps/presentationeditor/main/resources/less/animation.less

@@ -12,7 +12,7 @@
 
   .group-description {
     padding: 3px 0 3px 10px;
-    font-weight: bold;
+    .font-weight-bold();
   }
 
   .grouped-data .group-items-container {

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -171,7 +171,7 @@
                             width: 30%;
 
                             label {
-                                font-weight: bold;
+                                .font-weight-bold();
                                 font-size: 12px;
                             }
                         }
@@ -194,7 +194,7 @@
                 font-size: 10pt;
                 color: @text-normal-ie;
                 color: @text-normal;
-                font-weight: bold;
+                .font-weight-bold();
                 padding: 0 0 10px 10px;
                 white-space: nowrap;
             }
@@ -377,7 +377,7 @@
                             width: 30%;
 
                             label {
-                                font-weight: bold;
+                                .font-weight-bold();
                             }
                         }
 
@@ -439,7 +439,7 @@
             padding: 30px 30px;
 
             .header {
-                font-weight: bold;
+                .font-weight-bold();
                 margin: 30px 0 10px;
             }
 

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/presentationeditor/mobile/locale/en.json

@@ -423,6 +423,7 @@
       "textFindAndReplace": "Find and Replace",
       "textFindAndReplaceAll": "Find and Replace All",
       "textHelp": "Help",
+      "textFeedback": "Feedback & Support",
       "textHighlight": "Highlight Results",
       "textInch": "Inch",
       "textLastModified": "Last Modified",

apps/presentationeditor/mobile/src/less/icons-ios.less

@@ -88,7 +88,13 @@
     &.icon-help {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 22C17.5224 22 21.9995 17.5228 21.9995 12C21.9995 6.47715 17.5224 2 11.9995 2C6.47666 2 1.99951 6.47715 1.99951 12C1.99951 17.5228 6.47666 22 11.9995 22ZM11.9995 21C16.9701 21 20.9995 16.9706 20.9995 12C20.9995 7.02944 16.9701 3 11.9995 3C7.02895 3 2.99951 7.02944 2.99951 12C2.99951 16.9706 7.02895 21 11.9995 21Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 9.83333H8V9.33333C8 8.61238 8.25215 7.67613 8.87874 6.90143C9.53629 6.08847 10.5714 5.5 12 5.5C13.3745 5.5 14.4185 5.98364 15.1033 6.78325C15.7633 7.5539 16 8.51284 16 9.33333C16 10.2045 15.8037 10.8795 15.4735 11.4464C15.1947 11.9251 14.8353 12.2932 14.5602 12.575L14.4676 12.67C14.1626 12.9842 13.9449 13.2293 13.7843 13.549C13.6298 13.8568 13.5 14.2947 13.5 15V15.5H11.5V15C11.5 14.0311 11.6826 13.2778 11.9969 12.6517C12.305 12.0381 12.7119 11.6072 13.0324 11.277L13.104 11.2034C13.4061 10.8929 13.599 10.691 13.7452 10.4399C13.8839 10.2019 14 9.87881 14 9.33333C14 8.86643 13.862 8.40851 13.5842 8.08418C13.3312 7.78871 12.8749 7.5 12 7.5C11.1786 7.5 10.7137 7.81307 10.4338 8.15917C10.1227 8.5437 10 9.02417 10 9.33333V9.83333ZM11.5 16.5H13.5V18.5H11.5V16.5Z" fill="black"/></svg>');
+    }
+
+    &.icon-feedback {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 6H3V18H21V6ZM3 5C2.44772 5 2 5.44772 2 6V18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18V6C22 5.44772 21.5523 5 21 5H3Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.66552 6.37165L3.33448 5.62835L12 13.3273L20.6655 5.62835L21.3345 6.37165L12 14.6727L2.66552 6.37165Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.37629 11.3293L3.37629 18.3293L2.62371 17.6707L8.62371 10.6707L9.37629 11.3293Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.3763 10.6707L21.3763 17.6707L20.6237 18.3293L14.6237 11.3293L15.3763 10.6707Z" fill="black"/></svg>');
     }
 
     &.icon-setup {

apps/presentationeditor/mobile/src/less/icons-material.less

@@ -76,7 +76,13 @@
     &.icon-help {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.1875 7.17188C9.96875 6.39062 10.9062 6 12 6C13.0938 6 14.0312 6.39062 14.8125 7.17188C15.5938 7.95312 15.9844 8.89062 15.9844 9.98438C15.9844 10.8281 15.4844 11.7031 14.4844 12.6094C13.4844 13.4844 12.9844 14.2812 12.9844 15H11.0156C11.0156 14.2812 11.1719 13.6719 11.4844 13.1719C11.7969 12.6406 12.1406 12.2656 12.5156 12.0469C12.8906 11.7969 13.2344 11.5 13.5469 11.1562C13.8594 10.8125 14.0156 10.4219 14.0156 9.98438C14.0156 9.45312 13.8125 9 13.4062 8.625C13 8.21875 12.5312 8.01562 12 8.01562C11.4688 8.01562 11 8.21875 10.5938 8.625C10.1875 9 9.98438 9.45312 9.98438 9.98438H8.01562C8.01562 8.89062 8.40625 7.95312 9.1875 7.17188ZM6.32812 17.6719C7.92188 19.2344 9.8125 20.0156 12 20.0156C14.1875 20.0156 16.0625 19.2344 17.625 17.6719C19.2188 16.0781 20.0156 14.1875 20.0156 12C20.0156 9.8125 19.2188 7.9375 17.625 6.375C16.0625 4.78125 14.1875 3.98438 12 3.98438C9.8125 3.98438 7.92188 4.78125 6.32812 6.375C4.76562 7.9375 3.98438 9.8125 3.98438 12C3.98438 14.1875 4.76562 16.0781 6.32812 17.6719ZM4.92188 4.96875C6.89062 3 9.25 2.01562 12 2.01562C14.75 2.01562 17.0938 3 19.0312 4.96875C21 6.90625 21.9844 9.25 21.9844 12C21.9844 14.75 21 17.1094 19.0312 19.0781C17.0938 21.0156 14.75 21.9844 12 21.9844C9.25 21.9844 6.89062 21.0156 4.92188 19.0781C2.98438 17.1094 2.01562 14.75 2.01562 12C2.01562 9.25 2.98438 6.90625 4.92188 4.96875ZM11.0156 18V15.9844H12.9844V18H11.0156Z" fill="black"/></svg>');
+    }
+
+    &.icon-feedback {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 6H3V18H21V6ZM2 5V19H22V5H2Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.66552 6.37165L3.33448 5.62835L12 13.3273L20.6655 5.62835L21.3345 6.37165L12 14.6727L2.66552 6.37165Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.37629 11.3293L3.37629 18.3293L2.62371 17.6707L8.62371 10.6707L9.37629 11.3293Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.3763 10.6707L21.3763 17.6707L20.6237 18.3293L14.6237 11.3293L15.3763 10.6707Z" fill="black"/></svg>');
     }
 
     &.icon-setup {

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -111,6 +111,15 @@ const SettingsList = inject("storeAppOptions", "storeToolbarSettings")(observer(
         window.open(url, "_blank");
     };
 
+    const showFeedback = () => {
+        let config = props.storeAppOptions.config;
+
+        closeModal();
+        if(config && !!config.feedback && !!config.feedback.url) {
+            window.open(config.feedback.url, "_blank");
+        } else window.open('{{__SUPPORT_URL__}}', "_blank");
+    };
+
     const appOptions = props.storeAppOptions;
     let _isEdit = false;
 
@@ -150,12 +159,15 @@ const SettingsList = inject("storeAppOptions", "storeToolbarSettings")(observer(
                     <ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
                         <Icon slot="media" icon="icon-info"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textHelp} link="#" onClick={showHelp}>
+                    <ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={showHelp}>
                         <Icon slot="media" icon="icon-help"></Icon>
                     </ListItem>
                     <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
                         <Icon slot="media" icon="icon-about"></Icon>
                     </ListItem>
+                    <ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={showFeedback}>
+                            <Icon slot="media" icon="icon-feedback"></Icon>
+                    </ListItem>
                 </List>
             </Page>
         </View>

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/ChartSettings.template

@@ -40,6 +40,11 @@
             <div id="chart-btn-select-data" style="width:100%;"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="chart-btn-switch" style="width:100%;"></div>
+        </td>
+    </tr>
 </table>
 <table cols="1" id="spark-panel-types">
     <tr>

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

@@ -222,6 +222,10 @@ define([
                         this.btnRatio.toggle(value);
                         this._state.keepRatio=value;
                     }
+
+                    var chartSettings = this.api.asc_getChartObject(),
+                        series = chartSettings ? chartSettings.getSeries() : null;
+                    this.btnSwitch.setDisabled(!series || series.length<1 || !chartSettings || !chartSettings.getRange());
                 } else { //sparkline
                     this._originalProps = props;
                     this.isChart = false;
@@ -774,6 +778,19 @@ define([
             this.btnSelectData.on('click', _.bind(this.onSelectData, this));
             this.lockedControls.push(this.btnSelectData);
 
+            this.btnSwitch = new Common.UI.Button({
+                parentEl: $('#chart-btn-switch'),
+                cls         : 'btn-toolbar',
+                iconCls     : 'toolbar__icon switch_row_column',
+                caption     : this.textSwitch,
+                style       : 'width: 100%;text-align: left;',
+                dataHint    : '1',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+            this.btnSwitch.on('click', _.bind(this.onSwitch, this));
+            this.lockedControls.push(this.btnSwitch);
+
             this.linkAdvanced = $('#chart-advanced-link');
             $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
@@ -1247,7 +1264,22 @@ define([
             }
             Common.NotificationCenter.trigger('edit:complete', this);
         },
-        
+
+        onSwitch:   function() {
+            if (this.api){
+                var props = this.api.asc_getChartObject();
+                if (props) {
+                    props.startEdit();
+                    var res = props.switchRowCol();
+                    if (res === Asc.c_oAscError.ID.MaxDataSeriesError) {
+                        props.cancelEdit();
+                        Common.UI.warning({msg: this.errorMaxRows, maxwidth: 600});
+                    } else
+                        props.endEdit();
+                }
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
@@ -1286,7 +1318,9 @@ define([
         textSelectData: 'Select Data',
         textRanges: 'Data Range',
         textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
-        textChangeType: 'Change type'
+        textChangeType: 'Change type',
+        textSwitch: 'Switch Row/Column',
+        errorMaxRows: 'The maximum number of data series per chart is 255.'
 
     }, SSE.Views.ChartSettings || {}));
 });

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>