Merge branch 'develop' into feature/forms-editor

Readme.md

@@ -2,23 +2,21 @@
 
 ## web-apps
 
-The frontend for [ONLYOFFICE Document Server][2]. Builds the program interface and allows the user create, edit, save and export text, spreadsheet and presentation documents using the common interface of a document editor.
+The frontend for [ONLYOFFICE Document Server][2] and [ONLYOFFICE Desktop Editors](https://github.com/ONLYOFFICE/DesktopEditors). Builds the program interface and allows the user create, edit, save and export text documents, spreadsheets, and presentations.
 
 ## Previous versions
 
-Until 2019-10-23 the repository was called web-apps-pro
+Until 2019-10-23 the repository was called web-apps-pro.
 
-## Project Information
+## Project information
 
-Official website: [http://www.onlyoffice.org](http://onlyoffice.org "http://www.onlyoffice.org")
+Official website: [https://www.onlyoffice.com/](https://www.onlyoffice.com "https://www.onlyoffice.com")
 
 Code repository: [https://github.com/ONLYOFFICE/web-apps](https://github.com/ONLYOFFICE/web-apps "https://github.com/ONLYOFFICE/web-apps")
 
-SaaS version: [http://www.onlyoffice.com](http://www.onlyoffice.com "http://www.onlyoffice.com")
+## User feedback and support
 
-## User Feedback and Support
+If you have any problems with or questions about [ONLYOFFICE Document Server][2], please visit our official forum: [dev.onlyoffice.org][1] or you can ask and answer ONLYOFFICE development questions on [Stack Overflow][3].
-
-If you have any problems with or questions about [ONLYOFFICE Document Server][2], please visit our official forum to find answers to your questions: [dev.onlyoffice.org][1] or you can ask and answer ONLYOFFICE development questions on [Stack Overflow][3].
 
   [1]: http://dev.onlyoffice.org
   [2]: https://github.com/ONLYOFFICE/DocumentServer

apps/api/documents/api.js

@@ -136,9 +136,10 @@
                         label: string (default: "Guest") // postfix for user name
                     },
                     review: {
-                        hideReviewDisplay: false // hide button Review mode,
+                        hideReviewDisplay: false, // hide button Review mode
+                        hoverMode: false, // true - show review balloons on mouse move, not on click on text
                         showReviewChanges: false,
-                        reviewDisplay: 'original',
+                        reviewDisplay: 'original', // original for viewer, markup for editor
                         trackChanges: undefined // true/false - open editor with track changes mode on/off,
                     },
                     chat: true,
@@ -872,9 +873,9 @@
         path += app + "/";
         path += (config.type === "mobile" || isSafari_mobile)
             ? "mobile"
-            : (config.type === "embedded") ? "embed"
+            : (config.type === "embedded")
-            : (app=='documenteditor') && config.document && config.document.permissions && (config.document.permissions.fillForms===true) &&
+                ? "embed"
-              (config.document.permissions.edit === false) && (config.document.permissions.review !== true) && (config.editorConfig.mode !== 'view') ? "forms" : "main";
+                : "main";
 
         var index = "/index.html";
         if (config.editorConfig) {

apps/api/wopi/editor-wopi.ejs

@@ -308,7 +308,7 @@ div {
                 }
 			};
 
-            postMessageOrigin = fileInfo.PostMessageOrigin;
+            postMessageOrigin = fileInfo.PostMessageOrigin || "*";
             if (postMessageOrigin && (typeof postMessageOrigin === 'string') && postMessageOrigin.charAt(postMessageOrigin.length-1)=='/')
                 postMessageOrigin = postMessageOrigin.substring(0, postMessageOrigin.length - 1);
             lang = config.editorConfig.lang;

apps/common/Gateway.js

@@ -203,12 +203,13 @@ if (window.Common === undefined) {
                 });
             },
 
-            requestRestore: function(version, url) {
+            requestRestore: function(version, url, fileType) {
                 _postMessage({
                     event: 'onRequestRestore',
                     data: {
                         version: version,
-                        url: url
+                        url: url,
+                        fileType: fileType
                     }
                 });
             },
@@ -273,19 +274,23 @@ if (window.Common === undefined) {
                 _postMessage({ event: 'onOutdatedVersion' });
             },
 
-            downloadAs: function(url) {
+            downloadAs: function(url, fileType) {
                 _postMessage({
                     event: 'onDownloadAs',
-                    data: url
+                    data: {
+                        url: url,
+                        fileType: fileType
+                    }
                 });
             },
 
-            requestSaveAs: function(url, title) {
+            requestSaveAs: function(url, title, fileType) {
                 _postMessage({
                     event: 'onRequestSaveAs',
                     data: {
                         url: url,
-                        title: title
+                        title: title,
+                        fileType: fileType
                     }
                 });
             },

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

@@ -92,6 +92,14 @@
                     str = num.toString();
                 for (var i=str.length; i<digits; i++) strfill += fill;
                 return strfill + str;
+            },
+            getKeyByValue: function(obj, value) {
+                for(var prop in obj) {
+                    if(obj.hasOwnProperty(prop)) {
+                        if(obj[prop] === value)
+                            return prop;
+                    }
+                }
             }
         };
     })();

apps/common/embed/resources/less/common.less

@@ -693,6 +693,7 @@
         font-weight: bold;
         font-size: 11px;
         box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+        max-width: 350px;
 
         padding: 5px 12px;
         white-space: pre-wrap;

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

@@ -49,24 +49,28 @@ define([
     'use strict';
 
     Common.UI.ComboBoxFonts = Common.UI.ComboBox.extend((function() {
-        var iconWidth       = 302,
+        var iconWidth       = 300,
-            iconHeight      = Asc.FONT_THUMBNAIL_HEIGHT || 26,
+            iconHeight      = Asc.FONT_THUMBNAIL_HEIGHT || 28,
             thumbCanvas     = document.createElement('canvas'),
             thumbContext    = thumbCanvas.getContext('2d'),
             thumbs       = [
                 {ratio: 1,      path: '../../../../sdkjs/common/Images/fonts_thumbnail.png', width: iconWidth, height: iconHeight},
+                {ratio: 1.25,   path: '../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: iconWidth * 1.25, height: iconHeight * 1.25},
                 {ratio: 1.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: iconWidth * 1.5, height: iconHeight * 1.5},
+                {ratio: 1.75,   path: '../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: iconWidth * 1.75, height: iconHeight * 1.75},
                 {ratio: 2,      path: '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: iconWidth * 2, height: iconHeight * 2}
             ],
             thumbIdx = 0,
-            listItemHeight  = 26,
+            listItemHeight  = 28,
             spriteCols     = 1,
             applicationPixelRatio = Common.Utils.applicationPixelRatio();
 
         if (typeof window['AscDesktopEditor'] === 'object') {
             thumbs[0].path     = window['AscDesktopEditor'].getFontsSprite('');
-            thumbs[1].path     = window['AscDesktopEditor'].getFontsSprite('@1.5x');
+            thumbs[1].path     = window['AscDesktopEditor'].getFontsSprite('@1.25x');
-            thumbs[2].path     = window['AscDesktopEditor'].getFontsSprite('@2x');
+            thumbs[2].path     = window['AscDesktopEditor'].getFontsSprite('@1.5x');
+            thumbs[3].path     = window['AscDesktopEditor'].getFontsSprite('@1.75x');
+            thumbs[4].path     = window['AscDesktopEditor'].getFontsSprite('@2x');
         }
 
         var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);

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

@@ -214,6 +214,9 @@ define([
 
                 me.trigger('render:after', me);
             }
+            if (this.disabled) {
+                this.setDisabled(!!this.disabled);
+            }
 
             return this;
         },
@@ -241,9 +244,10 @@ define([
         onResize: function() {
             if (this.openButton) {
                 var button = $('button', this.openButton.cmpEl);
-                button && button.css({
+                var cntButton = $('.button', this.cmpEl);
-                    width : $('.button', this.cmpEl).width(),
+                button && cntButton.width() > 0 && button.css({
-                    height: $('.button', this.cmpEl).height()
+                    width : cntButton.width(),
+                    height: cntButton.height()
                 });
 
                 this.openButton.menu.hide();

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

@@ -251,10 +251,17 @@ Common.UI.HintManager = new(function() {
     };
 
     var _getHints = function() {
+        var docH = Common.Utils.innerHeight() - 20,
+            docW = Common.Utils.innerWidth() - 20,
+            topSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? $(_currentSection).offset().top : 0,
+            bottomSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? topSection + $(_currentSection).height() : docH;
+
         if (_currentControls.length === 0)
             _getControls();
         _currentControls.forEach(function(item, index) {
             if (!_isItemDisabled(item)) {
+                var leftBorder = 0,
+                    rightBorder = docW;
                 if ($(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || item.closest('.group').find('.toolbar-group-mask').length > 0)) {
                     return;
                 }
@@ -264,6 +271,15 @@ Common.UI.HintManager = new(function() {
                         return;
                     }
                 }
+                if (_currentLevel === 0 && item.closest('.tabs.short').length > 0) {
+                    var blockTabs = item.closest('.tabs.short');
+                    leftBorder = blockTabs.offset().left;
+                    rightBorder = leftBorder + blockTabs.width();
+                    if (!item.hasClass('scroll')) {
+                        leftBorder += 20;
+                        rightBorder -= 20;
+                    }
+                }
                 var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
                 var direction = item.attr('data-hint-direction');
                 // exceptions
@@ -277,6 +293,12 @@ Common.UI.HintManager = new(function() {
                         item.attr('data-hint-direction', 'bottom');
                     }
                 }
+                var maxHeight = docH;
+                if ($('#file-menu-panel').is(':visible') && _currentLevel > 1 &&
+                    ($('.fms-flex-apply').is(':visible') || $('#fms-flex-apply').is(':visible')) &&
+                    item.closest('.fms-flex-apply').length < 1 && item.closest('#fms-flex-apply').length < 1) {
+                    maxHeight = docH - $('.fms-flex-apply').height();
+                }
                 var offsets = item.attr('data-hint-offset');
                 var applyOffset = offsets === 'big' ? 6 : (offsets === 'medium' ? 4 : (offsets === 'small' ? 2 : 0));
                 if (applyOffset) {
@@ -298,32 +320,31 @@ Common.UI.HintManager = new(function() {
                     offsets = offsets ? item.attr('data-hint-offset').split(',').map(function (item) { return parseInt(item); }) : [0, 0];
                 }
                 var offset = item.offset();
-                if (direction === 'left-top')
+                var top, left;
+                if (direction === 'left-top') {
+                    top = offset.top - 10 + offsets[0];
+                    left = offset.left - 10 + offsets[1];
+                } else if (direction === 'top') {
+                    top = offset.top - 18 + offsets[0];
+                    left = offset.left + (item.outerWidth() - 18) / 2 + offsets[1];
+                } else if (direction === 'right') {
+                    top = offset.top + (item.outerHeight() - 18) / 2 + offsets[0];
+                    left = offset.left + item.outerWidth() + offsets[1];
+                } else if (direction === 'left') {
+                    top = offset.top + (item.outerHeight() - 18) / 2 + offsets[0];
+                    left = offset.left - 18 + offsets[1];
+                } else {
+                    top = offset.top + item.outerHeight() + offsets[0];
+                    left = offset.left + (item.outerWidth() - 18) / 2 + offsets[1];
+                }
+
+                if (top < maxHeight && left < docW && top > topSection && top < bottomSection && left > leftBorder && left + 18 < rightBorder) {
                     hint.css({
-                        top: offset.top - 10 + offsets[0],
+                        top: top,
-                        left: offset.left - 10 + offsets[1]
+                        left: left
-                    });
-                else if (direction === 'top')
-                    hint.css({
-                        top: offset.top - 18 + offsets[0],
-                        left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
-                    });
-                else if (direction === 'right')
-                    hint.css({
-                        top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
-                        left: offset.left + item.outerWidth() + offsets[1]
-                    });
-                else if (direction === 'left')
-                    hint.css({
-                        top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
-                        left: offset.left - 18 + offsets[1]
-                    });
-                else
-                    hint.css({
-                        top: offset.top + item.outerHeight() + offsets[0],
-                        left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
                     });
                     $(document.body).append(hint);
+                }
 
                 _currentHints.push(hint);
             }
@@ -350,7 +371,8 @@ Common.UI.HintManager = new(function() {
                 _lang = mode.lang;
                 _getAlphabetLetters();
             },
-            'hints:clear': _clearHints
+            'hints:clear': _clearHints,
+            'window:resize': _clearHints
         });
         $('#editor_sdk').on('click', function () {
             _clearHints();
@@ -362,7 +384,7 @@ Common.UI.HintManager = new(function() {
             if (e.keyCode == Common.UI.Keys.ALT && _isAlt) {
                 e.preventDefault();
                 if (!_hintVisible) {
-                    $('input').blur(); // to change value in inputField
+                    $('input:focus').blur(); // to change value in inputField
                     _currentLevel = $('#file-menu-panel').is(':visible') ? 1 : 0;
                     _setCurrentSection();
                     _showHints();
@@ -441,7 +463,7 @@ Common.UI.HintManager = new(function() {
                                         }
                                     }
                                 }
-                                if (curr.prop('id') === 'btn-goback' || curr.closest('.btn-slot').prop('id') === 'slot-btn-options' || curr.prop('id') === 'left-btn-thumbs') {
+                                if (curr.prop('id') === 'btn-goback' || curr.closest('.btn-slot').prop('id') === 'slot-btn-options' || curr.prop('id') === 'left-btn-thumbs' || curr.hasClass('scroll')) {
                                     _resetToDefault();
                                     return;
                                 }

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

@@ -104,38 +104,44 @@ define([
                 return this;
             },
 
-            show: function(){
+            internalShowLoader: function() {
-                // if (maskeEl || loaderEl)
+                this.ownerEl.append(this.loaderEl);
-                //     return;
+                this.loaderEl.css('min-width', $('.asc-loadmask-title', this.loaderEl).width() + 105);
+
+                if (this.ownerEl && this.ownerEl.closest('.asc-window.modal').length==0)
+                    Common.util.Shortcuts.suspendEvents();
+            },
+
+            internalShowMask: function() {
+                if (!!this.ownerEl.ismasked) return;
+
+                this.ownerEl.ismasked = true;
+                this.ownerEl.append(this.maskeEl);
+            },
+
+            show: function(immediately){
+                this.internalShowMask();
 
                 // The owner is already masked
-                var ownerEl = this.ownerEl,
+                if (!!this.ownerEl.hasloader)
-                    loaderEl = this.loaderEl,
-                    maskeEl = this.maskeEl;
-                if (!!ownerEl.ismasked)
                     return this;
 
-                ownerEl.ismasked = true;
+                this.ownerEl.hasloader = true;
 
                 var me = this;
                 if (me.title != me.options.title) {
                     me.options.title = me.title;
-                    $('.asc-loadmask-title', loaderEl).html(me.title);
+                    $('.asc-loadmask-title', this.loaderEl).html(me.title);
                 }
 
+                if (immediately) {
+                    me.internalShowLoader();
+                } else if (!me.timerId) {
                     // show mask after 500 ms if it wont be hided
                     me.timerId = setTimeout(function () {
-                    ownerEl.append(maskeEl);
+                        me.internalShowLoader();
-                    ownerEl.append(loaderEl);
-
-                    // if (ownerEl.height()<1 || ownerEl.width()<1)
-                    //     loaderEl.css({visibility: 'hidden'});
-
-                    loaderEl.css('min-width', $('.asc-loadmask-title', loaderEl).width() + 105);
-
-                    if (ownerEl && ownerEl.closest('.asc-window.modal').length==0)
-                        Common.util.Shortcuts.suspendEvents();
                     },500);
+                }
 
                 return this;
             },
@@ -146,20 +152,23 @@ define([
                     clearTimeout(this.timerId);
                     this.timerId = 0;
                 }
-                if (ownerEl && ownerEl.ismasked) {
+
+                ownerEl && ownerEl.ismasked && this.maskeEl && this.maskeEl.remove();
+                delete ownerEl.ismasked;
+
+                if (ownerEl && ownerEl.hasloader) {
                     if (ownerEl.closest('.asc-window.modal').length==0 && !Common.Utils.ModalWindow.isVisible())
                         Common.util.Shortcuts.resumeEvents();
 
-                    this.maskeEl     && this.maskeEl.remove();
                     this.loaderEl    && this.loaderEl.remove();
                 }
-                delete ownerEl.ismasked;
+                delete ownerEl.hasloader;
             },
 
             setTitle: function(title) {
                 this.title = title;
 
-                if (this.ownerEl && this.ownerEl.ismasked && this.loaderEl){
+                if (this.ownerEl && this.ownerEl.hasloader && this.loaderEl){
                     var el = $('.asc-loadmask-title', this.loaderEl);
                     el.html(title);
                     this.loaderEl.css('min-width', el.width() + 105);
@@ -173,7 +182,7 @@ define([
             updatePosition: function() {
                 var ownerEl = this.ownerEl,
                     loaderEl = this.loaderEl;
-                if (ownerEl && ownerEl.ismasked && loaderEl){
+                if (ownerEl && ownerEl.hasloader && loaderEl){
                     loaderEl.css({
                         top : Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css('padding-top'))  + parseInt(loaderEl.css('padding-bottom'))) / 2) + 'px',
                         left: Math.round(ownerEl.width()  / 2 - (loaderEl.width()  + parseInt(loaderEl.css('padding-left')) + parseInt(loaderEl.css('padding-right')))  / 2) + 'px'

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

@@ -588,7 +588,7 @@ define([
                 if (this.options.additionalAlign)
                     this.options.additionalAlign.call(this, menuRoot, left, top);
                 else {
-                    var _css = {left: Math.ceil(left), top: Math.ceil(top)};
+                    var _css = {left: left, top: top};
                     if (!(menuH < docH)) _css['margin-top'] = 0;
 
                     menuRoot.css(_css);

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

@@ -93,7 +93,7 @@ define([
 
                 var _template_tabs =
                     '<section class="tabs">' +
-                        '<a class="scroll left"></a>' +
+                        '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
                         '<ul>' +
                             '<% for(var i in items) { %>' +
                                 '<% if (typeof items[i] == "object") { %>' +
@@ -105,7 +105,7 @@ define([
                                 '<% } %>' +
                             '<% } %>' +
                         '</ul>' +
-                        '<a class="scroll right"></a>' +
+                        '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
                     '</section>';
 
                 this.$layout = $(options.template({

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

@@ -55,6 +55,8 @@ define([
             values: [0, 100],
             colorValues: ['#000000', '#ffffff'],
             currentThumb: 0,
+            includeSnap: true,
+            intervalSnap: 5,
             thumbTemplate: '<div class="thumb" style="">' +
                             '<div class="thumb-top"><div class="thumb-top-inner"></div></div>' +
                             '<div class="thumb-bottom"><div class="thumb-bottom-inner"></div></div>' +

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

@@ -82,13 +82,14 @@ define([
             maxValue: 100,
             step: 1,
             value: 100,
-            enableKeyEvents: false
+            enableKeyEvents: false,
+            direction: 'horizontal' // 'vertical'
         },
 
         disabled: false,
 
         template    : _.template([
-            '<div class="slider single-slider" style="">',
+            '<div class="slider single-slider <% if (this.options.direction === \'vertical\') { %>vertical<% } %>" style="">',
                 '<div class="track"></div>',
                 '<div class="thumb" style=""></div>',
                 '<% if (this.options.enableKeyEvents) { %>',
@@ -107,6 +108,7 @@ define([
             me.maxValue = me.options.maxValue;
             me.delta = 100/(me.maxValue - me.minValue);
             me.step = me.options.step;
+            me.direction = me.options.direction;
 
             if (me.options.el) {
                 me.render();
@@ -133,7 +135,7 @@ define([
             }
 
             this.cmpEl.find('.track-center').width(me.options.width - 14);
-            this.cmpEl.width(me.options.width);
+            this.cmpEl[me.direction === 'vertical' ? 'height' : 'width'](me.options.width);
 
             this.thumb = this.cmpEl.find('.thumb');
 
@@ -141,7 +143,9 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
+                var pos = Math.max(0, Math.min(100, (Math.round((
+                    me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top) : (e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) - me._dragstart
+                ) / me.width * 100))));
                 me.setThumbPosition(pos);
 
                 me.lastValue = me.value;
@@ -162,7 +166,9 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
+                var pos = Math.max(0, Math.min(100, (Math.round((
+                    me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top) : (e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) - me._dragstart
+                ) / me.width * 100))));
                 me.setThumbPosition(pos);
 
                 me.lastValue = me.value;
@@ -174,7 +180,7 @@ define([
 
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
-                me._dragstart = e.pageX*Common.Utils.zoom() - me.thumb.offset().left - 7;
+                me._dragstart = me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.thumb.offset().top) : (e.pageX*Common.Utils.zoom() - me.thumb.offset().left) - 7;
 
                 me.thumb.addClass('active');
                 $(document).on('mouseup',   onMouseUp);
@@ -187,7 +193,9 @@ define([
             var onTrackMouseDown = function (e) {
                 if ( me.disabled ) return;
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100))));
+                var pos = Math.max(0, Math.min(100, (Math.round((
+                    me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top) : (e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left)
+                ) / me.width * 100))));
                 me.setThumbPosition(pos);
 
                 me.lastValue = me.value;
@@ -245,8 +253,12 @@ define([
             return this;
         },
 
-        setThumbPosition: function(x) {
+        setThumbPosition: function(pos) {
-            this.thumb.css({left: x + '%'});
+            if (this.direction === 'vertical') {
+                this.thumb.css({top: pos + '%'});
+            } else {
+                this.thumb.css({left: pos + '%'});
+            }
         },
 
         setValue: function(value) {
@@ -273,6 +285,8 @@ define([
             minValue: 0,
             maxValue: 100,
             values: [0, 100],
+            includeSnap: false,
+            intervalSnap: undefined,
             thumbTemplate: '<div class="thumb" style=""></div>'
         },
 
@@ -300,8 +314,9 @@ define([
             me.minValue = me.options.minValue;
             me.maxValue = me.options.maxValue;
             me.delta = 100/(me.maxValue - me.minValue);
+            me.includeSnap = me.options.includeSnap;
+            me.intervalSnap = me.options.intervalSnap;
             me.thumbs = [];
-
             if (me.options.el) {
                 me.render();
             }
@@ -330,9 +345,38 @@ define([
             el.find('.track-center').width(me.options.width - 14);
             el.width(me.options.width);
 
+            var setCenters = function (index) {
+                if(!me.includeSnap) return;
+                var n = me.minValue;
+
+                var getX = function (position) {
+                    return (0.01 * me.width * position + me.cmpEl.offset().left + me._dragstart)/Common.Utils.zoom();
+                };
+
+                me.centers = [];
+                _.each(me.thumbs, function (thumb, indexT) {
+                    if ((indexT != index) && (n != thumb.position)) {
+                        me.centers.push(getX((thumb.position - n) / 2 + n));
+                        n = thumb.position;
+                    }
+                });
+                if(n != me.maxValue) me.centers.push(getX((me.maxValue - n) / 2 + n));
+            };
+
+            var resetPageX =  function (e) {
+                if(!me.includeSnap) return;
+                _.each(me.centers, function (x) {
+                    if((e.pageX <= x + me.intervalSnap) && (e.pageX >= x - me.intervalSnap)) {
+                        e.pageX = x;
+                        return;
+                    }
+                });
+            };
+
             var onMouseUp = function (e) {
                 e.preventDefault();
                 e.stopPropagation();
+                resetPageX(e);
 
                 var index = e.data.index,
                     lastValue = me.thumbs[index].value,
@@ -375,6 +419,7 @@ define([
 
                 e.preventDefault();
                 e.stopPropagation();
+                resetPageX(e);
 
                 var index = e.data.index,
                     lastValue = me.thumbs[index].value,
@@ -406,6 +451,7 @@ define([
                     thumb = me.thumbs[index].thumb;
 
                 me._dragstart = e.pageX*Common.Utils.zoom() - thumb.offset().left - thumb.width()/2;
+                setCenters(index);
                 me.setActiveThumb(index);
 
                 _.each(me.thumbs, function (item, idx) {
@@ -416,6 +462,7 @@ define([
                 $(document).on('mousemove', null, e.data, me.binding.onMouseMove);
             };
 
+
             var onTrackMouseUp = function (e) {
                 if ( me.disabled || !_.isUndefined(me._dragstart) || me.thumbs.length > 9) return;
 

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

@@ -423,6 +423,7 @@ define([
                     this.setTabVisible('backward');
                 }
             }
+            Common.NotificationCenter.trigger('hints:clear');
         },
 
         onProcessMouse: function(data) {
@@ -686,6 +687,14 @@ define([
             newHintTab.attr('data-hint-direction', 'top');
             newHintTab.attr('data-hint-offset', 'medium');
             newHintTab.attr('data-hint-title', 'M');
-        }
+        },
+
+        getWidth: function() {
+            var width = 21;
+            this.tabs.forEach(function(tab){
+                width += tab.$el.width();
+            });
+            return width;
+        },
     });
 });

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

@@ -87,7 +87,7 @@ define([
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
                 '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
-                        '<a class="color-dynamic-<%=i%> dynamic-empty-color" style="background:#ffffff" color="" idx="<%=idx++%>">' +
+                        '<a class="color-dynamic-<%=i%> dynamic-empty-color" color="" idx="<%=idx++%>">' +
                         '<em><span unselectable="on">&#160;</span></em></a>' +
                     '<% } %>' +
                 '<% } %>' +

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

@@ -1222,7 +1222,8 @@ define([
                     renderTo : this.sdkViewName,
                     canRequestUsers: (this.mode) ? this.mode.canRequestUsers : undefined,
                     canRequestSendNotify: (this.mode) ? this.mode.canRequestSendNotify : undefined,
-                    mentionShare: (this.mode) ? this.mode.mentionShare : true
+                    mentionShare: (this.mode) ? this.mode.mentionShare : true,
+                    api: this.api
                 });
                 this.popover.setCommentsStore(this.popoverComments);
             }

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

@@ -100,9 +100,10 @@ define([
             this.panelHistory.$el.find('#history-list').css('padding-bottom', hasChanges ? '45px' : 0);
         },
 
-        onDownloadUrl: function(url) {
+        onDownloadUrl: function(url, fileType) {
-            if (this.isFromSelectRevision !== undefined)
+            if (this.isFromSelectRevision !== undefined) {
-                Common.Gateway.requestRestore(this.isFromSelectRevision, url);
+                Common.Gateway.requestRestore(this.isFromSelectRevision, url, fileType);
+            }
             this.isFromSelectRevision = undefined;
         },
 
@@ -111,7 +112,7 @@ define([
                 var btn = $(e.target);
                 if (btn && btn.hasClass('revision-restore')) {
                     if (record.get('isRevision'))
-                        Common.Gateway.requestRestore(record.get('revision'));
+                        Common.Gateway.requestRestore(record.get('revision'), undefined, record.get('fileType'));
                     else {
                         this.isFromSelectRevision = record.get('revision');
                         var fileType = Asc.c_oAscFileType[(record.get('fileType') || '').toUpperCase()] || Asc.c_oAscFileType.DOCX;
@@ -136,9 +137,15 @@ define([
             this.currentServerVersion = record.get('serverVersion');
 
             if ( _.isEmpty(url) || (urlGetTime - record.get('urlGetTime') > 5 * 60000)) {
+                var me = this;
+                if (!me.timerId) {
+                    me.timerId = setTimeout(function () {
+                        me.timerId = 0;
+                    },30000);
                     _.delay(function() {
                         Common.Gateway.requestHistoryData(rev); // получаем url-ы для ревизий
                     }, 10);
+                }
             } else {
                 var commentsController = this.getApplication().getController('Common.Controllers.Comments');
                 if (commentsController) {
@@ -168,6 +175,11 @@ define([
         onSetHistoryData: function(opts) {
             if (!this.mode.canUseHistory) return;
 
+            if (this.timerId) {
+                clearTimeout(this.timerId);
+                this.timerId = 0;
+            }
+
             if (opts.data.error) {
                  var config = {
                     title: this.notcriticalErrorTitle,
@@ -205,6 +217,7 @@ define([
                                 rev.set('docIdPrev', docIdPrev, {silent: true});
                             }
                             rev.set('token', token, {silent: true});
+                            opts.data.fileType && rev.set('fileType', opts.data.fileType, {silent: true});
                         }
                     }
                     var hist = new Asc.asc_CVersionHistory();
@@ -217,6 +230,7 @@ define([
                     hist.asc_setIsRequested(true);
                     hist.asc_setServerVersion(this.currentServerVersion);
                     this.api.asc_showRevision(hist);
+                    this.currentRev = data.version;
 
                     var reviewController = this.getApplication().getController('Common.Controllers.ReviewChanges');
                     if (reviewController)

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

@@ -153,7 +153,6 @@ define([
             var me = this,
                 win = new Common.Views.PasswordDialog({
                     api: me.api,
-                    signType: 'invisible',
                     handler: function(result, props) {
                         if (result == 'ok') {
                             me.api.asc_setCurrentPassword(props);

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

@@ -109,6 +109,7 @@ define([
             Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
             Common.NotificationCenter.on('collaboration:sharing', this.changeAccessRights.bind(this));
             Common.NotificationCenter.on('collaboration:sharingdeny', this.onLostEditRights.bind(this));
+            Common.NotificationCenter.on('protect:wslock', _.bind(this.onChangeProtectSheet, this));
 
             this.userCollection.on('reset', _.bind(this.onUpdateUsers, this));
             this.userCollection.on('add',   _.bind(this.onUpdateUsers, this));
@@ -131,8 +132,7 @@ define([
                     this.api.asc_registerCallback('asc_onUpdateRevisionsChangesPosition', _.bind(this.onApiUpdateChangePosition, this));
                     this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onAuthParticipantsChanged, this));
                     this.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(this.onAuthParticipantsChanged, this));
-                    this.api.asc_registerCallback('asc_onBeginViewModeInReview',   _.bind(this.onBeginViewModeInReview, this));
+                    this.api.asc_registerCallback('asc_onChangeDisplayModeInReview',   _.bind(this.onChangeDisplayModeInReview, this));
-                    this.api.asc_registerCallback('asc_onEndViewModeInReview',     _.bind(this.onEndViewModeInReview, this));
                 }
                 if (this.appConfig.canReview)
                     this.api.asc_registerCallback('asc_onOnTrackRevisionsChange', _.bind(this.onApiTrackRevisionsChange, this));
@@ -163,7 +163,7 @@ define([
         SetDisabled: function(state) {
             if (this.dlgChanges)
                 this.dlgChanges.close();
-            this.view && this.view.SetDisabled(state, this.langs);
+            this.view && this.view.SetDisabled(state, this.langs, {comments: !!this._state.wsProps['Objects']});
             this.setPreviewMode(state);
         },
 
@@ -181,7 +181,7 @@ define([
 
         onApiShowChange: function (sdkchange) {
             if (this.getPopover()) {
-                if (sdkchange && sdkchange.length>0) {
+                if (!this.appConfig.reviewHoverMode && sdkchange && sdkchange.length>0) {
                     var i = 0,
                         changes = this.readSDKChange(sdkchange),
                         posX = sdkchange[0].get_X(),
@@ -256,7 +256,8 @@ define([
             if ((this.appConfig.canReview || this.appConfig.canViewReview) && _.isUndefined(this.popover)) {
                 this.popover = Common.Views.ReviewPopover.prototype.getPopover({
                     reviewStore : this.popoverChanges,
-                    renderTo : this.sdkViewName
+                    renderTo : this.sdkViewName,
+                    api: this.api
                 });
                 this.popover.setReviewStore(this.popoverChanges);
             }
@@ -595,7 +596,10 @@ define([
 
         onReviewViewClick: function(menu, item, e) {
             this.turnDisplayMode(item.value);
-            !this.appConfig.canReview && Common.localStorage.setItem(this.view.appPrefix + "review-mode", item.value);
+            if (!this.appConfig.isEdit && !this.appConfig.isRestrictedEdit)
+                Common.localStorage.setItem(this.view.appPrefix + "review-mode", item.value); // for viewer
+            else if (item.value=='markup' || item.value=='simple')
+                Common.localStorage.setItem(this.view.appPrefix + "review-mode-editor", item.value); // for editor save only markup modes
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
@@ -685,27 +689,40 @@ define([
 
         turnDisplayMode: function(mode) {
             if (this.api) {
-                if (mode === 'final')
+                var type = Asc.c_oAscDisplayModeInReview.Edit;
-                    this.api.asc_BeginViewModeInReview(true);
+                switch (mode) {
-                else if (mode === 'original')
+                    case 'final':
-                    this.api.asc_BeginViewModeInReview(false);
+                        type = Asc.c_oAscDisplayModeInReview.Final;
-                else
+                        break;
-                    this.api.asc_EndViewModeInReview();
+                    case 'original':
+                        type = Asc.c_oAscDisplayModeInReview.Original;
+                        break;
+                    case 'simple':
+                        type = Asc.c_oAscDisplayModeInReview.Simple;
+                        break;
+                }
+                this.api.asc_SetDisplayModeInReview(type);
             }
             this.disableEditing(mode == 'final' || mode == 'original');
             this._state.previewMode = (mode == 'final' || mode == 'original');
         },
 
-        onBeginViewModeInReview: function(mode) {
+        onChangeDisplayModeInReview: function(type) {
-            this.disableEditing(true);
+            this.disableEditing(type===Asc.c_oAscDisplayModeInReview.Final || type===Asc.c_oAscDisplayModeInReview.Original);
-            this.view && this.view.turnDisplayMode(mode ? 'final' : 'original');
+            var mode = 'markup';
-            this._state.previewMode = true;
+            switch (type) {
-        },
+                case Asc.c_oAscDisplayModeInReview.Final:
-
+                    mode = 'final';
-        onEndViewModeInReview: function() {
+                    break;
-            this.disableEditing(false);
+                case Asc.c_oAscDisplayModeInReview.Original:
-            this.view && this.view.turnDisplayMode('markup');
+                    mode = 'original';
-            this._state.previewMode = false;
+                    break;
+                case Asc.c_oAscDisplayModeInReview.Simple:
+                    mode = 'simple';
+                    break;
+            }
+            this.view && this.view.turnDisplayMode(mode);
+            this._state.previewMode = (type===Asc.c_oAscDisplayModeInReview.Final || type===Asc.c_oAscDisplayModeInReview.Original);
         },
 
         isPreviewChangesMode: function() {
@@ -807,7 +824,15 @@ define([
                         me.onApiTrackRevisionsChange(me.api.asc_GetLocalTrackRevisions(), me.api.asc_GetGlobalTrackRevisions());
                     me.api.asc_HaveRevisionsChanges() && me.view.markChanges(true);
 
-                    // _setReviewStatus(state, global);
+                    var val = Common.localStorage.getItem(me.view.appPrefix + "review-mode-editor");
+                    if (val===null) {
+                        val = me.appConfig.customization && me.appConfig.customization.review ? me.appConfig.customization.review.reviewDisplay : undefined;
+                        !val && (val = me.appConfig.customization ? me.appConfig.customization.reviewDisplay : undefined);
+                        val = /^(original|final|markup|simple)$/i.test(val) ? val.toLocaleLowerCase() : 'markup';
+                    }
+
+                    me.turnDisplayMode(val); // load display mode for all modes (viewer or editor)
+                    me.view.turnDisplayMode(val);
 
                     if ( typeof (me.appConfig.customization) == 'object' && (me.appConfig.customization.review && me.appConfig.customization.review.showReviewChanges==true ||
                         (!me.appConfig.customization.review || me.appConfig.customization.review.showReviewChanges===undefined) && me.appConfig.customization.showReviewChanges==true) ) {
@@ -823,14 +848,14 @@ define([
             } else if (config.canViewReview) {
                 config.canViewReview = (config.isEdit || me.api.asc_HaveRevisionsChanges(true)); // check revisions from all users
                 if (config.canViewReview) {
-                    var val = Common.localStorage.getItem(me.view.appPrefix + "review-mode");
+                    var val = Common.localStorage.getItem(me.view.appPrefix + (config.isEdit || config.isRestrictedEdit ? "review-mode-editor" : "review-mode"));
                     if (val===null) {
                         val = me.appConfig.customization && me.appConfig.customization.review ? me.appConfig.customization.review.reviewDisplay : undefined;
                         !val && (val = me.appConfig.customization ? me.appConfig.customization.reviewDisplay : undefined);
-                        val = /^(original|final|markup)$/i.test(val) ? val.toLocaleLowerCase() : 'original';
+                        val = /^(original|final|markup|simple)$/i.test(val) ? val.toLocaleLowerCase() : (config.isEdit || config.isRestrictedEdit ? 'markup' : 'original');
                     }
-                    me.turnDisplayMode((config.isEdit || config.isRestrictedEdit) ? 'markup' : val); // load display mode only in viewer
+                    me.turnDisplayMode(val);
-                    me.view.turnDisplayMode((config.isEdit || config.isRestrictedEdit) ? 'markup' : val);
+                    me.view.turnDisplayMode(val);
                 }
             }
 
@@ -840,10 +865,19 @@ define([
                         me.view.turnChat(state);
                 });
             }
+            me.onChangeProtectSheet();
             if (me.view) {
-                me.view.btnCommentRemove && me.view.btnCommentRemove.setDisabled(!Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true));
+                me.view.btnCommentRemove && me.view.btnCommentRemove.setDisabled(!Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true) || !!this._state.wsProps['Objects']);
-                me.view.btnCommentResolve && me.view.btnCommentResolve.setDisabled(!Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true));
+                me.view.btnCommentResolve && me.view.btnCommentResolve.setDisabled(!Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true) || !!this._state.wsProps['Objects']);
             }
+
+            var val = Common.localStorage.getItem(me.view.appPrefix + "settings-review-hover-mode");
+            if (val === null) {
+                val = me.appConfig.customization && me.appConfig.customization.review ? !!me.appConfig.customization.review.hoverMode : false;
+            } else
+                val = !!parseInt(val);
+            Common.Utils.InternalSettings.set(me.view.appPrefix + "settings-review-hover-mode", val);
+            me.appConfig.reviewHoverMode = val;
         },
 
         showTips: function(strings) {
@@ -974,8 +1008,24 @@ define([
         commentsShowHide: function(mode) {
             if (!this.view) return;
             var value = Common.Utils.InternalSettings.get(this.view.appPrefix + "settings-livecomment");
-            (value!==undefined) && this.view.btnCommentRemove && this.view.btnCommentRemove.setDisabled(mode != 'show' && !value);
+            (value!==undefined) && this.view.btnCommentRemove && this.view.btnCommentRemove.setDisabled(mode != 'show' && !value || !!this._state.wsProps['Objects']);
-            (value!==undefined) && this.view.btnCommentResolve && this.view.btnCommentResolve.setDisabled(mode != 'show' && !value);
+            (value!==undefined) && this.view.btnCommentResolve && this.view.btnCommentResolve.setDisabled(mode != 'show' && !value || !!this._state.wsProps['Objects']);
+        },
+
+        onChangeProtectSheet: function(props) {
+            if (!props) {
+                var wbprotect = this.getApplication().getController('WBProtection');
+                props = wbprotect ? wbprotect.getWSProps() : null;
+            }
+            this._state.wsProps = props ? props.wsProps : {};
+            this._state.wsLock = props ? props.wsLock : false;
+
+            if (!this.view) return;
+            var leftmenu = this.getApplication().getController('LeftMenu'),
+                isCommentsVisible = leftmenu && leftmenu.isCommentsVisible();
+            var value = Common.Utils.InternalSettings.get(this.view.appPrefix + "settings-livecomment");
+            (value!==undefined) && this.view.btnCommentRemove && this.view.btnCommentRemove.setDisabled(!isCommentsVisible && !value || !!this._state.wsProps['Objects']);
+            (value!==undefined) && this.view.btnCommentResolve && this.view.btnCommentResolve.setDisabled(!isCommentsVisible && !value || !!this._state.wsProps['Objects']);
         },
 
         textInserted: '<b>Inserted:</b>',

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

@@ -245,6 +245,16 @@ define([
 
                 this.api = api;
                 var theme_name = get_ui_theme_name(Common.localStorage.getItem('ui-theme'));
+                if ( !theme_name ) {
+                    if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) )
+                        for (var i of document.body.classList.entries()) {
+                            if ( i[1].startsWith('theme-') && !i[1].startsWith('theme-type-') ) {
+                                theme_name = i[1];
+                                break;
+                            }
+                        }
+                }
+
                 if ( !themes_map[theme_name] )
                     theme_name = id_default_light_theme;
 
@@ -286,7 +296,8 @@ define([
 
             currentThemeId: function () {
                 var t = Common.localStorage.getItem('ui-theme') || Common.localStorage.getItem('ui-theme-id');
-                return get_ui_theme_name(t) || id_default_light_theme;
+                var id = get_ui_theme_name(t);
+                return !!themes_map[id] ? id : id_default_light_theme;
             },
 
             defaultThemeId: function (type) {

apps/common/main/lib/mods/perfect-scrollbar.js

@@ -316,6 +316,7 @@
 
         var shouldPrevent = false;
         $this.bind('mousewheel' + eventClassName, function (e, deprecatedDelta, deprecatedDeltaX, deprecatedDeltaY) {
+          Common.NotificationCenter.trigger('hints:clear');
           var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX,
               deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY;
 

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

@@ -42,7 +42,17 @@ var params = (function() {
     return urlParams;
 })();
 
-if ( !!params.uitheme && !localStorage.getItem("ui-theme-id") ) {
+var checkLocalStorage = (function () {
+    try {
+        var storage = window['localStorage'];
+        return true;
+    }
+    catch(e) {
+        return false;
+    }
+})();
+
+if ( !!params.uitheme && checkLocalStorage && !localStorage.getItem("ui-theme-id") ) {
     // const _t = params.uitheme.match(/([\w-]+)/g);
 
     if ( params.uitheme == 'default-dark' )
@@ -54,11 +64,11 @@ if ( !!params.uitheme && !localStorage.getItem("ui-theme-id") ) {
     localStorage.setItem("ui-theme-id", params.uitheme);
 }
 
-var ui_theme_name = localStorage.getItem("ui-theme-id");
+var ui_theme_name = checkLocalStorage ? localStorage.getItem("ui-theme-id") : undefined;
 if ( !ui_theme_name ) {
     if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
         ui_theme_name = 'theme-dark';
-        localStorage.setItem("ui-theme-id", ui_theme_name);
+        checkLocalStorage && localStorage.setItem("ui-theme-id", ui_theme_name);
     }
 }
 if ( !!ui_theme_name ) {

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

@@ -1072,3 +1072,12 @@ Common.Utils.UserInfoParser = new(function() {
         }
     }
 })();
+
+Common.Utils.getKeyByValue = function(obj, value) {
+    for(var prop in obj) {
+        if(obj.hasOwnProperty(prop)) {
+            if(obj[prop] === value)
+                return prop;
+        }
+    }
+};

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

@@ -806,7 +806,7 @@ define([
             tipUndo: 'Undo',
             tipRedo: 'Redo',
             textCompactView: 'Hide Toolbar',
-            textHideStatusBar: 'Hide Status Bar',
+            textHideStatusBar: 'Combine sheet and status bars',
             textHideLines: 'Hide Rulers',
             textZoom: 'Zoom',
             textAdvSettings: 'Advanced Settings',

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

@@ -91,6 +91,8 @@ define([
 
             }, options);
 
+            this.txtOpenFile = options.txtOpenFile || this.txtOpenFile;
+
             this.template = options.template || [
                 '<div class="box" style="height:' + (_options.height - 85) + 'px;">',
                     '<div class="content-panel" >',
@@ -160,10 +162,10 @@ define([
                 '<div class="footer center">',
                     '<button class="btn normal dlg-btn primary" result="ok">' + t.okButtonText + '</button>',
                     '<% if (closeFile) { %>',
-                    '<button class="btn normal dlg-btn" result="cancel" style="margin-left:10px;">' + t.closeButtonText + '</button>',
+                    '<button class="btn normal dlg-btn custom" result="cancel" style="margin-left:10px;">' + t.closeButtonText + '</button>',
                     '<% } %>',
                     '<% if (closable) { %>',
-                    '<button class="btn normal dlg-btn" result="cancel" style="margin-left:10px;">' + t.cancelButtonText + '</button>',
+                    '<button class="btn normal dlg-btn custom" result="cancel" style="margin-left:10px;">' + t.cancelButtonText + '</button>',
                     '<% } %>',
                 '</div>'
             ].join('');

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

@@ -64,13 +64,15 @@ define([
 
             }, options);
 
+            this.handler        =   options.handler;
+
             this.template = options.template || [
                 '<div class="box">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<label>' + t.txtDescription + '</label>',
                     '</div>',
                     '<div class="input-row">',
-                        '<label>' + t.txtPassword + '</label>',
+                        '<label>' + t.txtPassword + (t.passwordOptional ? ' (' + t.txtOptional + ')': '') + '</label>',
                     '</div>',
                     '<div id="id-password-txt" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
@@ -81,9 +83,6 @@ define([
                 '</div>'
             ].join('');
 
-            this.handler        =   options.handler;
-            this.settings       =   options.settings;
-
             _options.tpl        =   _.template(this.template)(_options);
 
             Common.UI.Window.prototype.initialize.call(this, _options);

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

@@ -121,7 +121,10 @@ define([
                     this.btnAddPwd = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-protect',
-                        caption: this.txtEncrypt
+                        caption: this.txtEncrypt,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
                     });
                     this.btnsAddPwd.push(this.btnAddPwd);
 
@@ -130,7 +133,10 @@ define([
                         iconCls: 'toolbar__icon btn-ic-protect',
                         caption: this.txtEncrypt,
                         menu: true,
-                        visible: false
+                        visible: false,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
                     });
                 }
                 if (this.appConfig.isSignatureSupport) {
@@ -138,7 +144,10 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-signature',
                         caption: this.txtSignature,
-                        menu: (this.appPrefix !== 'pe-')
+                        menu: (this.appPrefix !== 'pe-'),
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
                     });
                     if (!this.btnSignature.menu)
                         this.btnsInvisibleSignature.push(this.btnSignature);

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

@@ -316,6 +316,15 @@ define([
                                         template: menuTemplate,
                                         description: this.txtMarkup
                                     },
+                                    {
+                                        caption: this.txtMarkupSimpleCap,
+                                        checkable: true,
+                                        toggleGroup: 'menuReviewView',
+                                        checked: false,
+                                        value: 'simple',
+                                        template: menuTemplate,
+                                        description: this.txtMarkupSimple
+                                    },
                                     {
                                         caption: this.txtFinalCap,
                                         checkable: true,
@@ -798,12 +807,13 @@ define([
             turnDisplayMode: function(mode) {
                 if (this.btnReviewView) {
                     this.btnReviewView.menu.items[0].setChecked(mode=='markup', true);
-                    this.btnReviewView.menu.items[1].setChecked(mode=='final', true);
+                    this.btnReviewView.menu.items[1].setChecked(mode=='simple', true);
-                    this.btnReviewView.menu.items[2].setChecked(mode=='original', true);
+                    this.btnReviewView.menu.items[2].setChecked(mode=='final', true);
+                    this.btnReviewView.menu.items[3].setChecked(mode=='original', true);
                 }
             },
 
-            SetDisabled: function (state, langs) {
+            SetDisabled: function (state, langs, protectProps) {
                 this.btnsSpelling && this.btnsSpelling.forEach(function(button) {
                     if ( button ) {
                         button.setDisabled(state);
@@ -821,8 +831,8 @@ define([
                 }, this);
                 // this.btnChat && this.btnChat.setDisabled(state);
 
-                this.btnCommentRemove && this.btnCommentRemove.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment"));
+                this.btnCommentRemove && this.btnCommentRemove.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment") || protectProps && protectProps.comments);
-                this.btnCommentResolve && this.btnCommentResolve.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment"));
+                this.btnCommentResolve && this.btnCommentResolve.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment") || protectProps && protectProps.comments);
             },
 
             onLostEditRights: function() {
@@ -898,7 +908,9 @@ define([
             txtOff: 'OFF for me',
             textWarnTrackChangesTitle: 'Enable Track Changes for everyone?',
             textWarnTrackChanges: 'Track Changes will be switched ON for all users with full access. The next time anyone opens the doc, Track Changes will remain enabled.',
-            textEnable: 'Enable'
+            textEnable: 'Enable',
+            txtMarkupSimpleCap: 'Simple Markup',
+            txtMarkupSimple: 'All changes (Editing)<br>Turn off balloons'
         }
     }()), Common.Views.ReviewChanges || {}));
 

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

@@ -103,6 +103,7 @@ define([
             this.canRequestUsers = options.canRequestUsers;
             this.canRequestSendNotify = options.canRequestSendNotify;
             this.mentionShare = options.mentionShare;
+            this.api = options.api;
             this.externalUsers = [];
             this._state = {commentsVisible: false, reviewVisible: false};
 
@@ -737,7 +738,8 @@ define([
                         leftPos = Math.min(sdkBoundsLeft + posX + this.arrow.width, sdkBoundsLeft + this.sdkBounds.width - this.$window.outerWidth() - 25);
                         leftPos = Math.max(sdkBoundsLeft + sdkPanelLeftWidth + this.arrow.width, leftPos);
 
-                        arrowView.removeClass('right').addClass('left');
+                        arrowView.removeClass('right top bottom').addClass('left');
+                        arrowView.css({left: ''});
 
                         if (!_.isUndefined(leftX)) {
                             windowWidth = this.$window.outerWidth();
@@ -784,7 +786,7 @@ define([
                     }
                 }
             }
-            if (!retainContent)
+            if (!retainContent || this.isOverCursor())
                 this.calculateSizeOfContent();
         },
         calculateSizeOfContent: function (testVisible) {
@@ -804,6 +806,7 @@ define([
                 sdkPanelTop = '',
                 sdkPanelHeight = 0,
                 arrowPosY = 0,
+                arrowPosX = 0,
                 windowHeight = 0,
                 outerHeight = 0,
                 topPos = 0,
@@ -839,7 +842,46 @@ define([
 
                             outerHeight = Math.max(commentsView.outerHeight(), this.$window.outerHeight());
 
-                            if (sdkBoundsHeight <= outerHeight) {
+                            var movePos = this.isOverCursor();
+                            if (movePos) {
+                                var leftPos = parseInt(this.$window.css('left')) - this.arrow.width,
+                                    newTopDown = movePos[1][1] + sdkPanelHeight + this.arrow.width,// try move down
+                                    newTopUp = movePos[0][1] + sdkPanelHeight - this.arrow.width, // try move up
+                                    isMoveDown = false;
+                                if (newTopDown + outerHeight>sdkBoundsTop + sdkBoundsHeight) {
+                                    var diffDown = sdkBoundsTop + sdkBoundsHeight - newTopDown;
+                                    if (newTopUp - outerHeight<sdkBoundsTop) {
+                                        var diffUp = newTopUp - sdkBoundsTop;
+                                        if (diffDown < diffUp * 0.9) {// magic)
+                                            this.$window.css({
+                                                maxHeight: diffUp + 'px',
+                                                top: sdkBoundsTop + 'px'
+                                            });
+                                            commentsView.css({height: diffUp - 3 + 'px'});
+                                        } else {
+                                            this.$window.css({
+                                                maxHeight: diffDown + 'px',
+                                                top: newTopDown + 'px'
+                                            });
+                                            isMoveDown = true;
+                                            commentsView.css({height: diffDown - 3 + 'px'});
+                                        }
+                                    } else
+                                        this.$window.css('top', newTopUp - outerHeight + 'px'); // move up
+                                } else {
+                                    isMoveDown = true;
+                                    this.$window.css('top', newTopDown + 'px'); // move down
+                                }
+                                leftPos -= this.arrow.height;
+                                this.$window.css('left', leftPos + 'px');
+                                arrowPosX = movePos[isMoveDown ? 1 : 0][0];
+                                arrowPosX = Math.max(0, arrowPosX - leftPos - this.arrow.height/2);
+                                arrowPosX = Math.min(arrowPosX, this.$window.outerWidth() - this.arrow.height);
+                                arrowView.css({top: '', left: arrowPosX + 'px'});
+                                arrowView.toggleClass('top', isMoveDown);
+                                arrowView.toggleClass('bottom', !isMoveDown);
+                                arrowView.removeClass('left right');
+                            } else if (sdkBoundsHeight <= outerHeight) {
                                 this.$window.css({
                                     maxHeight: sdkBoundsHeight - sdkPanelHeight + 'px',
                                     top: sdkBoundsTop + sdkPanelHeight + 'px'
@@ -850,7 +892,9 @@ define([
                                 // arrowPosY = Math.max(this.arrow.margin, this.arrowPosY - sdkPanelHeight - this.arrow.width);
                                 arrowPosY = Math.min(arrowPosY, sdkBoundsHeight - (sdkPanelHeight + this.arrow.margin + this.arrow.height));
 
-                                arrowView.css({top: arrowPosY + 'px'});
+                                arrowView.css({top: arrowPosY + 'px', left: ''});
+                                arrowView.removeClass('top bottom right');
+                                arrowView.addClass('left');
                                 this.scroller.scrollTop(scrollPos);
                             } else {
 
@@ -868,7 +912,9 @@ define([
                                 arrowPosY = Math.max(this.arrow.margin, this.arrowPosY - (sdkBoundsHeight - outerHeight) - this.arrow.height);
                                 arrowPosY = Math.min(arrowPosY, outerHeight - this.arrow.margin - this.arrow.height);
 
-                                arrowView.css({top: arrowPosY + 'px'});
+                                arrowView.css({top: arrowPosY + 'px', left: ''});
+                                arrowView.removeClass('top bottom right');
+                                arrowView.addClass('left');
                             }
                         }
                     }
@@ -880,6 +926,27 @@ define([
                 this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
             }
         },
+
+        isOverCursor: function() {
+            if (!this.api.asc_GetSelectionBounds) return;
+            
+            var p = this.api.asc_GetSelectionBounds(),
+                isCursor = Math.abs(p[0][0] - p[1][0])<0.1 && Math.abs(p[0][1] - p[1][1])<0.1 && Math.abs(p[2][0] - p[3][0])<0.1 && Math.abs(p[2][1] - p[3][1])<0.1,
+                sdkPanelLeft = $('#id_panel_left'),
+                sdkPanelLeftWidth = 0;
+            if (sdkPanelLeft.length)
+                sdkPanelLeftWidth = (sdkPanelLeft.css('display') !== 'none') ? sdkPanelLeft.width() : 0;
+            var x0 = p[0][0] + sdkPanelLeftWidth, y0 = p[0][1],
+                x1 = p[isCursor ? 2 : 1][0] + sdkPanelLeftWidth, y1 = p[isCursor ? 2 : 1][1];
+            var leftPos = parseInt(this.$window.css('left')) - this.arrow.width,
+                windowWidth = this.$window.outerWidth() + this.arrow.width;
+            if (x0>leftPos && x0<leftPos+windowWidth || x1>leftPos && x1<leftPos+windowWidth) {
+                var newDown = (y0>y1) ? [x0, y0] : [x1, y1],// try move down
+                    newUp = (y0<y1) ? [x0, y0] : [x1, y1]; // try move up
+                return [newUp, newDown];
+            }
+        },
+
         saveText: function (clear) {
             if (this.commentsView && this.commentsView.cmpEl.find('.lock-area').length < 1) {
                 this.textVal = undefined;

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

@@ -99,7 +99,7 @@
                 '<div class="separator horizontal"></div>',
                 '<div class="footer right">',
                     '<button class="btn normal dlg-btn" result="replace">'+this.txtBtnReplace+'</button>',
-                    '<button class="btn normal dlg-btn" result="replaceall" style="margin-left: 6px;width: auto;">'+this.txtBtnReplaceAll+'</button>',
+                    '<button class="btn normal dlg-btn" result="replaceall" style="margin-left: 6px;width: auto;min-width: 100px;">'+this.txtBtnReplaceAll+'</button>',
                     '<button class="btn normal dlg-btn iconic" result="back"><span class="icon img-commonctrl back"></span></button>',
                     '<button class="btn normal dlg-btn iconic" result="next" style="margin-left: 6px;"><span class="icon img-commonctrl next"></span></button>',
                 '</div>'

apps/common/main/resources/img/doc-formats/blank.svg

@@ -1,10 +1,12 @@
 <svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
   <symbol id="svg-format-blank">
-  <clipPath id="a">
+    <g clip-path="url(#clip0)">
-    <path d="m0 0h96v96h-96z"/>
+      <path d="M94 9.5C94.8284 9.5 95.5 10.1716 95.5 11L95.5 85C95.5 85.8284 94.8284 86.5 94 86.5L2 86.5C1.17157 86.5 0.499997 85.8284 0.499997 85L0.5 11C0.5 10.1716 1.17158 9.5 2 9.5L94 9.5Z" fill="white" stroke="#BFBFBF"/>
-  </clipPath>
-  <g clip-path="url(#a)">
-    <path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
     </g>
+    <defs>
+      <clipPath id="clip0">
+        <rect width="96" height="96" fill="white"/>
+      </clipPath>
+    </defs>
   </symbol>
 </svg>

apps/common/main/resources/img/toolbar/1.25x/big/.css.handlebars

@@ -4,7 +4,7 @@
             (min-resolution: 1.25dppx) and (max-resolution: 1.4dppx),
                 (min-resolution: 120dpi) and (max-resolution: 143dpi)
     {
-        .x-huge .toolbar__icon {
+        .x-huge .toolbar__icon, .toolbar__icon.toolbar__icon-big {
             background-image: url(resources/{{{escaped_image}}});
             background-size: {{scaled width 1.25}}px auto;
         }

apps/common/main/resources/img/toolbar/1.25x/huge/.css.handlebars

@@ -1,6 +1,9 @@
 {{#spritesheet}}
+.pixel-ratio__1_25 {
     .options__icon.options__icon-huge {
+        background-image: url(resources/{{{escaped_image}}});
         background-size: 80px auto;
         background-size: var(--huge-icon-background-image-width) auto;
     }
+}
 {{/spritesheet}}

apps/common/main/resources/img/toolbar/1.75x/big/.css.handlebars

@@ -4,7 +4,7 @@
             (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx),
                 (min-resolution: 168dpi) and (max-resolution: 191dpi)
     {
-        .x-huge .toolbar__icon {
+        .x-huge .toolbar__icon, .toolbar__icon.toolbar__icon-big {
             background-image: url(resources/{{{escaped_image}}});
             background-size: {{scaled width 1.75}}px auto;
         }

apps/common/main/resources/img/toolbar/1.75x/huge/.css.handlebars

@@ -1,6 +1,9 @@
 {{#spritesheet}}
+.pixel-ratio__1_75 {
     .options__icon.options__icon-huge {
+        background-image: url(resources/{{{escaped_image}}});
         background-size: 80px auto;
         background-size: var(--huge-icon-background-image-width) auto;
     }
+}
 {{/spritesheet}}

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

@@ -100,6 +100,26 @@
 
     .pixel-ratio__2 {
     }
+
+    .pixel-ratio__1_25 {
+        @ratio: 1.25;
+        @one-px: 1px / @ratio;
+        @two-px: 2px / @ratio;
+
+        --pixel-ratio-factor: @ratio;
+        --scaled-one-pixel: @one-px;
+        --scaled-two-pixel: @two-px;
+    }
+
+    .pixel-ratio__1_75 {
+        @ratio: 1.75;
+        @one-px: 1px / @ratio;
+        @two-px: 2px / @ratio;
+
+        --pixel-ratio-factor: @ratio;
+        --scaled-one-pixel: @one-px;
+        --scaled-two-pixel: @two-px;
+    }
 }
 
 .button-normal-icon(@icon-class, @index, @icon-size, @normal-h-offset: 0px) {
@@ -211,6 +231,53 @@
     }
 }
 
+.background-ximage-all(@image, @w: auto, @h: auto, @repeat: no-repeat, @commonimage: true) {
+    .choose-image-path(@commonimage);
+    @imagepath: '@{path}/@{image}';
+
+    background-image: if(@icon-src-base64, data-uri(%("%s", '@{imagepath}')), ~"url(@{imagepath})");
+    background-repeat: @repeat;
+
+    @1d5ximage: replace(@imagepath, '\.png$', '@1.5x.png');
+    @1d75ximage: replace(@imagepath, '\.png$', '@1.75x.png');
+    @1d25ximage: replace(@imagepath, '\.png$', '@1.25x.png');
+    @2ximage: replace(@imagepath, '\.png$', '@2x.png');
+
+    @media only screen {
+        @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
+        (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx),
+        (min-resolution: 120dpi) and (max-resolution: 143dpi)
+        {
+            background-image: ~"url(@{1d25ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
+        (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx),
+        (min-resolution: 144dpi) and (max-resolution: 167dpi)
+        {
+            background-image: ~"url(@{1d5ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9),
+        (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx),
+        (min-resolution: 168dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{1d75ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 2dppx),
+        (min-resolution: 192dpi)
+        {
+            background-image: ~"url(@{2ximage})";
+            background-size: @w @h;
+        }
+    }
+}
+
 .img-commonctrl {
     &.img-colored {
         filter: none;
@@ -226,7 +293,9 @@
     background-repeat: no-repeat;
     filter: @component-normal-icon-filter;
 
+    @1d25ximage: replace(@common-controls, '\.png$', '@1.25x.png');
     @1d5ximage: replace(@common-controls, '\.png$', '@1.5x.png');
+    @1d75ximage: replace(@common-controls, '\.png$', '@1.75x.png');
     @2ximage: replace(@common-controls, '\.png$', '@2x.png');
 
     @media only screen {
@@ -246,6 +315,16 @@
             background-size: @common-controls-width auto;
         }
     }
+
+    .pixel-ratio__1_25 & {
+        background-image: ~"url(@{common-image-const-path}/@{1d25ximage})";
+        background-size: @common-controls-width auto;
+    }
+
+    .pixel-ratio__1_75 & {
+        background-image: ~"url(@{common-image-const-path}/@{1d75ximage})";
+        background-size: @common-controls-width auto;
+    }
 }
 
 @img-colorpicker-width: 205px;

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

@@ -700,8 +700,8 @@
     li > a.selected,
     li > a:hover {
         span.color-auto {
-            outline: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            outline: @scaled-one-px-value-ie solid @icon-normal-ie;
-            outline: @scaled-one-px-value solid @border-regular-control;
+            outline: @scaled-one-px-value solid @icon-normal;
             border: @scaled-one-px-value-ie solid @background-normal-ie;
             border: @scaled-one-px-value solid @background-normal;
         }

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

@@ -45,6 +45,7 @@
         --text-inverse: #fff;
         --text-toolbar-header: #fff;
         --text-contrast-background: #fff;
+        --text-alt-key-hint: #444;
 
         --icon-normal: #444;
         --icon-normal-pressed: #fff;

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

@@ -46,6 +46,7 @@
         --text-inverse: #333;
         --text-toolbar-header: fade(#fff, 80%);
         --text-contrast-background: #fff;
+        --text-alt-key-hint: #2a2a2a;
 
         --icon-normal: fade(#fff, 80%);
         --icon-normal-pressed: fade(#fff, 80%);

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

@@ -188,6 +188,7 @@
 @text-inverse: var(--text-inverse);
 @text-toolbar-header: var(--text-toolbar-header);
 @text-contrast-background: var(--text-contrast-background);
+@text-alt-key-hint: var(--text-alt-key-hint);
 
 // Icon
 // -------------------------

apps/common/main/resources/less/combo-border-size.less

@@ -27,6 +27,7 @@
             width:60px;
             height:20px;
             background-color: transparent;
+            image-rendering: pixelated;
         }
     }
 
@@ -37,16 +38,25 @@
         display: inline-block;
         background-color: transparent;
         margin: 0 0 0 -3px;
+        image-rendering: pixelated;
     }
 
     img, .image {
         background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0";
         background-size: 60px auto;
 
+        .pixel-ratio__1_25 & {
+            background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.25x.png)";
+        }
+
         .pixel-ratio__1_5 & {
             background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.5x.png)";
         }
 
+        .pixel-ratio__1_75 & {
+            background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.75x.png)";
+        }
+
         .pixel-ratio__2 & {
             background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
         }

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

@@ -99,7 +99,7 @@
     }
 
     .item {
-        padding: 3px;
+        padding: 2px;
         border: @scaled-one-px-value-ie solid @border-regular-control-ie;
         border: @scaled-one-px-value solid @border-regular-control;
         .box-shadow(none);
@@ -164,6 +164,11 @@
         width: @combo-dataview-button-width;
         height: @combo-dataview-height;
 
+        .btn-group, button {
+            width: 100%;
+            height: 100%;
+        }
+
         button {
             &.dropdown-toggle {
                 padding: 0;

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

@@ -38,6 +38,8 @@
 
     .btn {
         border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
         border-color: @border-regular-control-ie;
         border-color: @border-regular-control;
         background-color: transparent;

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

@@ -472,7 +472,7 @@
     width:100%;
     position: relative;
     overflow-y: hidden;
-    margin-bottom: 5px;
+    //margin-bottom: 5px;
 
     .dataview-ct.inner {
         overflow: visible;
@@ -482,24 +482,6 @@
 .comments-arrow {
     position: absolute;
     overflow: hidden;
-    left: -10px;
-    top: 20px;
-    width: 10px;
-    height: 30px;
-
-    &.right {
-        left: 100%;
-
-        &:after {
-            left: -8px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-
-            body.safari &,
-            body.chrome & {
-                box-shadow: none;
-            }
-        }
-    }
 
     &:after {
         content: '';
@@ -518,4 +500,53 @@
         border: solid @scaled-one-px-value-ie @border-toolbar-ie;
         border: solid @scaled-one-px-value @border-toolbar;
     }
+
+    &.left {
+        left: -10px;
+        top: 20px;
+        width: 10px;
+        height: 30px;
+    }
+
+    &.right {
+        left: 100%;
+        top: 20px;
+        width: 10px;
+        height: 30px;
+
+        &:after {
+            left: -8px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+
+            body.safari &,
+            body.chrome & {
+                box-shadow: none;
+            }
+        }
+    }
+
+    &.top {
+        left: 20px;
+        top: -10px;
+        height: 10px;
+        width: 30px;
+
+        &:after {
+            top: 2px;
+            left: 5px;
+        }
+    }
+
+    &.bottom {
+        left: 20px;
+        top: auto;
+        bottom: -10px;
+        height: 10px;
+        width: 30px;
+
+        &:after {
+            top: -7px;
+            left: 5px;
+        }
+    }
 }

apps/common/main/resources/less/dimension-picker.less

@@ -21,13 +21,13 @@
 
 .dimension-picker-unhighlighted {
     //background: transparent repeat scroll 0 0;
-    .background-ximage-v2('dimension-picker/dimension-unhighlighted.png', 18px);
+    .background-ximage-all('dimension-picker/dimension-unhighlighted.png', 18px);
     background-repeat: repeat;
 }
 
 .dimension-picker div.dimension-picker-highlighted {
     //background: transparent repeat scroll 0 0;
-    .background-ximage-v2('dimension-picker/dimension-highlighted.png', 18px);
+    .background-ximage-all('dimension-picker/dimension-highlighted.png', 18px);
     background-repeat: repeat;
 }
 

apps/common/main/resources/less/hint-manager.less

@@ -8,7 +8,7 @@
   text-align: center;
   background-color: @background-alt-key-hint-ie;
   background-color: @background-alt-key-hint;
-  color: @text-normal;
+  color: @text-alt-key-hint;
   font-size: 12px;
   line-height: 18px;
   padding: 0 4px;

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

@@ -11,6 +11,8 @@
             border: @track-height / 2 solid @border-regular-control-ie;
             border: @track-height / 2 solid @border-regular-control;
             border-radius: @track-height / 2;
+            background-color: @border-regular-control-ie;
+            background-color: @border-regular-control;
             width: calc(100% + @track-height);
             margin-left: -@track-height / 2;
         }
@@ -32,6 +34,28 @@
             &.active {
             }
         }
+
+        &.vertical {
+            height: auto;
+            width: 18px;
+            padding-top: 0;
+            padding-left: 7px;
+            .track {
+                position: absolute;
+                @track-height: 4px;
+                height: calc(100% + @track-height);
+                width: @track-height;
+                margin-left: 0;
+                margin-top: -@track-height / 2;
+            }
+            .thumb {
+                @thumb-width: 12px;
+                top: auto;
+                left: 3px;
+                margin-left: 0;
+                margin-top: @thumb-width / -2;
+            }
+        }
     }
 
     .thumb {

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

@@ -39,7 +39,7 @@
     .spinner-buttons {
         position: absolute;
         top: 0;
-        right: 1px;
+        right: @scaled-one-px-value;
         border-top: @scaled-one-px-value-ie solid transparent;
         border-top: @scaled-one-px-value solid transparent;
         border-bottom: @scaled-one-px-value-ie solid transparent;

apps/common/main/resources/less/theme-colorpalette.less

@@ -39,12 +39,17 @@
         }
     }
 
-    .dynamic-empty-color em span {
+    .dynamic-empty-color {
+        background: @background-normal-ie;
+        background: @background-normal;
+
+        em span {
             border: solid @scaled-one-px-value-ie @border-color-shading-ie;
             border: solid @scaled-one-px-value @border-color-shading;
             background: @background-normal-ie;
             background: @background-normal;
         }
+    }
 
     .color-transparent {
         em span {

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

@@ -239,6 +239,10 @@
         &:not(:first-child) {
             margin-top: 6px;
         }
+
+        &.font-normal {
+            .font-size-normal();
+        }
     }
 
     .separator {
@@ -547,6 +551,12 @@
         .icon {
             width: 22px;
             height: 22px;
+
+            .pixel-ratio__1_25 &,
+            .pixel-ratio__1_75 & {
+                width: 20px;
+                height: 20px;
+            }
         }
     }
 }
@@ -580,7 +590,7 @@
     border: @scaled-one-px-value solid @border-regular-control;
 
     .equation-icon {
-        .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
+        .background-ximage-all('toolbar/math.png', 1500px, @commonimage: true);
         opacity: @component-normal-icon-opacity;
 
         .theme-dark & {
@@ -648,7 +658,8 @@
         &, &:hover, &:focus {
             background-color: @highlight-button-pressed-ie;
             background-color: @highlight-button-pressed;
-            color: @dropdown-link-active-color;
+            color: @text-normal-ie;
+            color: @text-normal;
             span.color {
                 border-color: @icon-normal-ie;
                 border-color: @icon-normal;

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

@@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
                         {row.map((effect, index) => {
                             return(
                                 <a key={`tc-${rowIndex}-${index}`}
-                                   className={(curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) ? 'active' : ''}
+                                   className={(curColor && ((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>

apps/common/mobile/lib/controller/ContextMenu.jsx

@@ -150,8 +150,8 @@ class ContextMenuController extends Component {
         this.setState({openedMore: false});
     }
 
-    onMenuItemClick(action) {
+    async onMenuItemClick(action) {
-        this.onApiHideContextMenu();
+        await this.onApiHideContextMenu();
 
         if (action === 'showActionSheet') {
             this.setState({openedMore: true});

apps/common/mobile/lib/controller/collaboration/Comments.jsx

@@ -564,25 +564,37 @@ class ViewCommentsController extends Component {
                 this.onResolveComment(comment);
                 break;
             case 'deleteComment':
-                f7.dialog.confirm(
+                f7.dialog.create({
-                    _t.textMessageDeleteComment,
+                    title: _t.textDeleteComment,
-                    _t.textDeleteComment,
+                    text: _t.textMessageDeleteComment,
-                    () => {
+                    buttons: [
-                        this.deleteComment(comment);
+                        {
+                            text: _t.textCancel
+                        },
+                        {
+                            text: _t.textOk,
+                            onClick: () => this.deleteComment(comment)
                         }
-                );
+                    ]
+                }).open();
                 break;
             case 'editReply':
                 this.props.storeComments.openEditReply(true, comment, reply);
                 break;
             case 'deleteReply':
-                f7.dialog.confirm(
+                f7.dialog.create({
-                    _t.textMessageDeleteReply,
+                    title: _t.textDeleteReply,
-                    _t.textDeleteReply,
+                    text: _t.textMessageDeleteReply,
-                    () => {
+                    buttons: [
-                        this.deleteReply(comment, reply);
+                        {
+                            text: _t.textCancel
+                        },
+                        {
+                            text: _t.textOk,
+                            onClick: () => this.deleteReply(comment, reply)
                         }
-                );
+                    ]
+                }).open();
                 break;
             case 'addReply':
                 this.props.storeComments.openAddReply(true, comment);

apps/common/mobile/lib/controller/collaboration/Review.jsx

@@ -25,28 +25,30 @@ class InitReview extends Component {
 
             api.asc_SetTrackRevisions(trackChanges);
             // Init display mode
-            if (!appOptions.canReview) {
+
-                const canViewReview = appOptions.isEdit || api.asc_HaveRevisionsChanges(true);
+            const canViewReview = appOptions.canReview || appOptions.isEdit || api.asc_HaveRevisionsChanges(true);
+            if (!appOptions.canReview)
                 appOptions.setCanViewReview(canViewReview);
             if (canViewReview) {
-                    let viewReviewMode = LocalStorage.getItem("de-view-review-mode");
+                let viewReviewMode = (appOptions.isEdit || appOptions.isRestrictedEdit) ? null : LocalStorage.getItem("de-view-review-mode");
                 if (viewReviewMode === null) {
                     viewReviewMode = appOptions.customization && appOptions.customization.review ? appOptions.customization.review.reviewDisplay : undefined;
                     !viewReviewMode && (viewReviewMode = appOptions.customization ? appOptions.customization.reviewDisplay : undefined);
-                        viewReviewMode = /^(original|final|markup)$/i.test(viewReviewMode) ? viewReviewMode.toLocaleLowerCase() : 'original';
+                    viewReviewMode = /^(original|final|markup|simple)$/i.test(viewReviewMode) ? viewReviewMode.toLocaleLowerCase() : ( appOptions.isEdit || appOptions.isRestrictedEdit ? 'markup' : 'original');
                 }
-                    viewReviewMode = (appOptions.isEdit || appOptions.isRestrictedEdit) ? 'markup' : viewReviewMode;
+                let displayMode = viewReviewMode.toLocaleLowerCase();
-                    const displayMode = viewReviewMode.toLocaleLowerCase();
+                let type = Asc.c_oAscDisplayModeInReview.Edit;
-                    if (displayMode === 'final') {
+                switch (displayMode) {
-                        api.asc_BeginViewModeInReview(true);
+                    case 'final':
-                    } else if (displayMode === 'original') {
+                        type = Asc.c_oAscDisplayModeInReview.Final;
-                        api.asc_BeginViewModeInReview(false);
+                        break;
-                    } else {
+                    case 'original':
-                        api.asc_EndViewModeInReview();
+                        type = Asc.c_oAscDisplayModeInReview.Original;
+                        break;
                 }
+                api.asc_SetDisplayModeInReview(type);
                 props.storeReview.changeDisplayMode(displayMode);
             }
-            }
         });
     }
 
@@ -102,14 +104,17 @@ class Review extends Component {
 
     onDisplayMode (mode) {
         const api = Common.EditorApi.get();
-        if (mode === 'final') {
+        let type = Asc.c_oAscDisplayModeInReview.Edit;
-            api.asc_BeginViewModeInReview(true);
+        switch (mode) {
-        } else if (mode === 'original') {
+            case 'final':
-            api.asc_BeginViewModeInReview(false);
+                type = Asc.c_oAscDisplayModeInReview.Final;
-        } else {
+                break;
-            api.asc_EndViewModeInReview();
+            case 'original':
+                type = Asc.c_oAscDisplayModeInReview.Original;
+                break;
         }
-        !this.appConfig.canReview && LocalStorage.setItem("de-view-review-mode", mode);
+        api.asc_SetDisplayModeInReview(type);
+        !this.appConfig.isEdit && !this.appConfig.isRestrictedEdit && LocalStorage.setItem("de-view-review-mode", mode);
         this.props.storeReview.changeDisplayMode(mode);
     }
 

apps/common/mobile/lib/view/Search.jsx

@@ -203,26 +203,21 @@ class SearchView extends Component {
 
     onEditorTouchStart(e) {
         this.startPoint = this.pointerPosition(e);
-        // console.log(this.startPoint);
     }
 
     onEditorTouchEnd(e) {
         const endPoint = this.pointerPosition(e);
-        // console.log(endPoint);
 
         if (this.searchbar.enabled) {
             let distance;
 
             if(this.startPoint) {
-                distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 : 
+                distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
                     Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
             } else {
                 distance = 0;
             }
 
-            // const distance = (this.startPoint === undefined || this.startPoint === undefined) ? 0 :
-            //     Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
-
             if (distance < 1) {
                 this.searchbar.disable();
             }
@@ -231,15 +226,10 @@ class SearchView extends Component {
 
     pointerPosition(e) {
         let out = {x:0, y:0};
-        if ( e.type == 'touchstart' || e.type == 'touchend' ) {
+        if ( e.type == 'pointerdown' || e.type == 'pointerup' || e.type == 'mousedown' || e.type == 'mouseup') {
-            const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
-            out.x = touch.pageX;
-            out.y = touch.pageY;
-        } else if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
             out.x = e.pageX;
             out.y = e.pageY;
         }
-
         return out;
     }
 

apps/common/mobile/lib/view/collaboration/Collaboration.jsx

@@ -85,7 +85,7 @@ const routes = [
     }
 ];
 
-const PageCollaboration = inject('storeAppOptions')(observer(props => {
+const PageCollaboration = inject('storeAppOptions', 'users')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     const appOptions = props.storeAppOptions;
@@ -102,9 +102,11 @@ const PageCollaboration = inject('storeAppOptions')(observer(props => {
                     }
                 </Navbar>
                 <List>
+                    {props.users.editUsers.length > 0 &&
                         <ListItem link={'/users/'} title={_t.textUsers}>
                             <Icon slot="media" icon="icon-users"></Icon>
                         </ListItem>
+                    }
                     {appOptions.canViewComments &&
                         <ListItem link='/comments/' title={_t.textComments}>
                             <Icon slot="media" icon="icon-insert-comment"></Icon>

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -628,10 +628,11 @@ const pickLink = (message) => {
 }
 
 // View comments
-const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, showComment}) => {
+const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, showComment, storeReview}) => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     const isAndroid = Device.android;
+    const displayMode = storeReview.displayMode;
 
     const viewMode = !storeAppOptions.canComments;
     const comments = storeComments.groupCollectionFilter || storeComments.collectionComments;
@@ -672,10 +673,13 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
                                     </div>
                                     {!viewMode &&
                                         <div className='right'>
-                                            {comment.editable && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
+                                            {(comment.editable && displayMode === 'markup') && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
+                                            {displayMode === 'markup' && 
                                                 <div className='comment-menu'
-                                                 onClick={() => {setComment(comment); openActionComment(true);}}
+                                                    onClick={() => {setComment(comment); openActionComment(true);}}>
-                                            ><Icon icon='icon-menu-comment'/></div>
+                                                    <Icon icon='icon-menu-comment'/>
+                                                </div>
+                                            }
                                         </div>
                                     }
                                 </div>
@@ -734,13 +738,14 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
     )
 };
 
-const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments));
+const _ViewComments = inject('storeComments', 'storeAppOptions', "storeReview")(observer(ViewComments));
 
 
-const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => {
+const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, storeReview}) => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     const isAndroid = Device.android;
+    const displayMode = storeReview.displayMode;
 
     const viewMode = !storeAppOptions.canComments;
     const comments = storeComments.showComments;
@@ -801,10 +806,13 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC
                                 </div>
                                 {!viewMode &&
                                 <div className='right'>
-                                    {comment.editable && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
+                                    {(comment.editable && displayMode === 'markup') && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
+                                    {displayMode === 'markup' &&
                                         <div className='comment-menu'
-                                        onClick={() => {openActionComment(true);}}
+                                            onClick={() => {openActionComment(true);}}>
-                                    ><Icon icon='icon-menu-comment'/></div>
+                                            <Icon icon='icon-menu-comment'/>
+                                        </div>
+                                    }
                                 </div>
                                 }
                             </div>

apps/common/mobile/resources/less/comments.less

@@ -189,6 +189,7 @@
     }
   }
   .toolbar {
+    position: absolute;
     border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
   }
 }
@@ -227,3 +228,11 @@
   text-align: center;
   margin-top: 35px;
 }
+
+.actions-modal.modal-in {
+  z-index: 13700;
+}
+
+.actions-backdrop.backdrop-in {
+  z-index: 13600;
+}

apps/common/mobile/resources/less/common-ios.less

@@ -580,6 +580,14 @@
         -ms-appearance: none;
         appearance: none;
     }
+
+    // Fonts List 
+
+    .font-item {
+        .item-content {
+            padding-left: 0;
+        }
+    }
 }
 
 

apps/common/mobile/resources/less/common-material.less

@@ -48,6 +48,11 @@
             display: flex;
             justify-content: center;
         }
+        &-inner {
+            background: var(--f7-navbar-bg-color);
+            background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
+            background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
+        }
     }
 
     .page.page-with-subnavbar.page-with-logo {
@@ -62,8 +67,13 @@
                 margin-bottom: 0;
                 margin-top: 8px;
             }
+            .add-image {
+                ul:before, :after{
+                    display: none;
+                }
+            }
             .inputs-list {
-                ul:after, :before{
+                ul:after {
                     display: none;
                 }
             }
@@ -545,4 +555,12 @@
             }
         }
     }
+
+    // Fonts List 
+
+    .font-item {
+        .item-radio:not(.item-radio-icon-end) > .icon-radio {
+            margin-right: 0;
+        }
+    }
 }

apps/common/mobile/resources/less/common.less

@@ -257,6 +257,8 @@
         margin-top: 14px;
         background-image: url(../img/themes/themes.png);
         display: block;
+        background-repeat: no-repeat;
+        background-size: cover;
     }
     .item-theme.active:before {
         content: '';
@@ -531,8 +533,7 @@
         padding-left: 5px;
         padding-right: 5px;
         padding-top: 5px;
-    }
+        li.item-theme {
-    li {
             border: 0.5px solid #c8c7cc;
             padding: 2px;
             background-repeat: no-repeat;
@@ -540,11 +541,26 @@
             height: 56px;
             margin-bottom: 10px;
             background-position: center;
-    }
+            .item-content {
-    .item-inner:after {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                .item-inner {
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    &:after {
                         display: none;
                     }
-    .item-theme.active:before {
+                    .thumb {
+                        width: 100%;
+                        height: 100%;
+                        padding: 0;
+                        background-size: contain;
+                    }
+                }
+            }
+            &.active:before {
                 content: '';
                 position: absolute;
                 width: 22px;
@@ -555,6 +571,8 @@
                 .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
             }
         }
+    }
+}
 
 // input[type="number"]
 
@@ -836,6 +854,23 @@ input[type="number"]::-webkit-inner-spin-button {
     overflow: hidden;
 }
 
+// Statusbar
+
+.statusbar .statusbar--box-tabs > ul > .locked a {
+    box-shadow: inset 0 2px red;
+}
+
+// Fonts List 
+
+.font-item {
+    .item-inner {
+        overflow: hidden;
+        &:after {
+            left: 16px;
+        }
+    }
+}
+
 
 
 

apps/documenteditor/embed/index.html

@@ -50,7 +50,7 @@
 
         .loadmask > .brendpanel .loading-logo > img {
             display: inline-block;
-            max-width: 100px;
+            max-width: 124px;
             max-height: 20px;
             margin-top: 2px;
             opacity: 0;
@@ -221,7 +221,7 @@
           </div>
       </div>
 
-      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="" style="display:none;"></div>
 
       <!--vendor-->
       <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>

apps/documenteditor/embed/index.html.deploy

@@ -48,7 +48,7 @@
 
         .loadmask > .brendpanel .loading-logo > img {
             display: inline-block;
-            max-width: 100px;
+            max-width: 124px;
             max-height: 20px;
             margin-top: 2px;
             opacity: 0;
@@ -213,7 +213,7 @@
           </div>
       </div>
 
-      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="" style="display:none;"></div>
 
       <!--vendor-->
       <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>