Merge branch 'feature/load-external-themes' into develop

apps/api/documents/api.js

@@ -866,7 +866,8 @@
         path += app + "/";
         path += (config.type === "mobile" || isSafari_mobile)
             ? "mobile"
-            : (config.type === "embedded" || (app=='documenteditor') && (config.document.permissions.fillForms===true) && (config.document.permissions.edit === false) && (config.editorConfig.mode !== 'view'))
+            : (config.type === "embedded" || (app=='documenteditor') && config.document && config.document.permissions && (config.document.permissions.fillForms===true) &&
+                                                                       (config.document.permissions.edit === false) && (config.document.permissions.review !== true) && (config.editorConfig.mode !== 'view'))
                 ? "embed"
                 : "main";
 

apps/common/Gateway.js

@@ -151,7 +151,7 @@ if (window.Common === undefined) {
 
         var _onMessage = function(msg) {
             // TODO: check message origin
-            if (msg.origin !== window.parentOrigin && msg.origin !== window.location.origin) return;
+            if (msg.origin !== window.parentOrigin && msg.origin !== window.location.origin && !(msg.origin==="null" && (window.parentOrigin==="file://" || window.location.origin==="file://"))) return;
 
             var data = msg.data;
             if (Object.prototype.toString.apply(data) !== '[object String]' || !window.JSON) {

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

@@ -84,6 +84,14 @@
                 _user.group && (_user.fullname = (_user.group).toString() + AscCommon.UserInfoParser.getSeparator() + _user.fullname);
                 _user.guest = !_user.name;
                 return _user;
+            },
+
+            fixedDigits: function(num, digits, fill) {
+                (fill===undefined) && (fill = '0');
+                var strfill = "",
+                    str = num.toString();
+                for (var i=str.length; i<digits; i++) strfill += fill;
+                return strfill + str;
             }
         };
     })();

apps/common/embed/lib/view/LoadMask.js

@@ -0,0 +1,101 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2021
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  LoadMask.js
+ *
+ *  Displays loading mask over selected element(s) or component. Accepts both single and multiple selectors.
+ *
+ *  Created by Julia Radzhabova 24.06.2021
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+!window.common && (window.common = {});
+!common.view && (common.view = {});
+
+common.view.LoadMask = function(owner) {
+    var tpl = '<div class="asc-loadmask-body" role="presentation" tabindex="-1">' +
+                '<i id="loadmask-spinner" class="asc-loadmask-image"></i>' +
+                '<div class="asc-loadmask-title"></div>' +
+               '</div>';
+    var ownerEl = owner || $(document.body),
+        loaderEl,
+        maskedEl,
+        title = '',
+        timerId = 0,
+        rendered = false;
+    return {
+
+        show: function(){
+            if (!loaderEl || !maskedEl) {
+                loaderEl = $(tpl);
+                maskedEl = $('<div class="asc-loadmask"></div>');
+            }
+
+            $('.asc-loadmask-title', loaderEl).html(title);
+
+            // show mask after 500 ms if it wont be hided
+            if (!rendered) {
+                rendered = true;
+                timerId = setTimeout(function () {
+                    ownerEl.append(maskedEl);
+                    ownerEl.append(loaderEl);
+
+                    loaderEl.css('min-width', $('.asc-loadmask-title', loaderEl).width() + 105);
+                },500);
+            }
+        },
+
+        hide: function() {
+            if (timerId) {
+                clearTimeout(timerId);
+                timerId = 0;
+            }
+            maskedEl && maskedEl.remove();
+            loaderEl && loaderEl.remove();
+            maskedEl = loaderEl = null;
+            rendered = false;
+        },
+
+        setTitle: function(text) {
+            title = text;
+
+            if (ownerEl && loaderEl){
+                var el = $('.asc-loadmask-title', loaderEl);
+                el.html(title);
+                loaderEl.css('min-width', el.width() + 105);
+            }
+        }
+    }
+};
+

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

@@ -53,6 +53,8 @@
 @import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
 
 
+@import "loadmask.less";
+
 @toolbarBorderColor:            #dbdbdb;
 @toolbarBorderShadowColor:      #FAFAFA;
 @toolbarTopColor:               #F7F7F7;
@@ -683,9 +685,13 @@
         border: 1px solid rgba(0,0,0,0.15);
         color: #333;
         font-weight: bold;
-        line-height: 26px;
         font-size: 11px;
         box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+
+        padding: 5px 12px;
+        white-space: pre-wrap;
+        text-align: left;
+        word-wrap: break-word;
     }
 
     .tooltip-arrow {
@@ -712,4 +718,64 @@
     -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
     box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
     font-size: 11px;
+}
+
+.required-tooltip {
+    position: absolute;
+    z-index: 1000;
+
+    padding: 15px;
+    border-radius: 5px;
+    background-color: @btnColored;
+    color: #fff;
+    -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+    font-size: 11px;
+
+    &.bottom-left {
+        border-top-right-radius: 0;
+        margin: 15px 0 0 0;
+
+        .tip-arrow {
+            position: absolute;
+            overflow: hidden;
+            right: 0;
+            top: -15px;
+            width: 15px;
+            height: 15px;
+            .box-shadow(8px 5px 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                content: '';
+                position: absolute;
+                top: 8px;
+                left: 8px;
+                background-color: @btnColored;
+                width: 15px;
+                height: 15px;
+
+                -moz-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                -o-transform: rotate(45deg);
+                transform: rotate(45deg);
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+    .close-div {
+        display: inline-block;
+        border: 1px solid #fff;
+        border-radius: 2px;
+        padding: 3px 12px;
+        margin-top: 10px;
+    }
+}
+
+.tooltip {
+    .tooltip-inner {
+        .toolbar & {
+            font-weight: normal;
+        }
+    }
 }

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

@@ -0,0 +1,74 @@
+@loadmask-zindex: 10000;
+@loadmask-image-height: 28px;
+@loadmask-image-width: 28px;
+@loadmask-small-image-height: 20px;
+@loadmask-small-image-width: 20px;
+@background-loader-ie: fade(#000, 65%);
+@background-loader: fade(#181818, 90%);
+@text-contrast-background-ie: #fff;
+@text-contrast-background: #fff;
+
+.asc-loadmask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  zoom: 1;
+  background-color: transparent;
+  z-index: @loadmask-zindex;
+}
+
+.asc-loadmask-body {
+  position: absolute;
+  z-index: @loadmask-zindex + 1;
+  padding: 24px;
+  line-height: @loadmask-image-height;
+  border: none;
+  background-image: none;
+  background-color: @background-loader-ie;
+  background-color: @background-loader;
+  color: @text-contrast-background-ie;
+  color: @text-contrast-background;
+  border-radius: 6px;
+
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%);
+
+  & > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .asc-loadmask-image {
+    background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=)";
+    height: 28px;
+    width: 28px;
+    float: left;
+    margin-left: 8px;
+  }
+
+  .asc-loadmask-title {
+    font-size: 13px;
+    margin: 0 8px 0 12px;
+    white-space: pre-wrap;
+  }
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#loadmask-spinner {
+  animation-duration: .8s;
+  animation-name: rotation;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}

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

@@ -246,7 +246,9 @@ define([
                         'modal:show': _onModalDialog.bind(this, 'open'),
                         'modal:close': _onModalDialog.bind(this, 'close')
                         , 'uitheme:changed' : function (name) {
-                            native.execCommand("uitheme:changed", name);
+                            var theme = Common.UI.Themes.get(name);
+                            if ( theme )
+                                native.execCommand("uitheme:changed", JSON.stringify({name:name, type:theme.type}));
                         }
                     });
                 }

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

@@ -56,7 +56,7 @@ define([
 
 
         var createExternalEditor = function() {
-            !!customization && (customization.uiTheme = Common.localStorage.getItem("ui-theme", "theme-light"));
+            !!customization && (customization.uiTheme = Common.localStorage.getItem("ui-theme-id", "theme-light"));
             externalEditor = new DocsAPI.DocEditor('id-diagram-editor-placeholder', {
                 width       : '100%',
                 height      : '100%',
@@ -245,7 +245,7 @@ define([
 
             showExternalEditor: function () {
                 if ( externalEditor ) {
-                    var value = Common.localStorage.getItem("ui-theme", "theme-light");
+                    var value = Common.localStorage.getItem("ui-theme-id", "theme-light");
                     externalEditor.serviceCommand('theme:change', value);
                 }
 

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

@@ -12,21 +12,34 @@ define([
         var themes_map = {
             'theme-light': {
                 text: locale.txtThemeLight || 'Light',
-                type: 'light'
+                type: 'light',
+                source: 'static',
             },
             'theme-classic-light': {
                 text: locale.txtThemeClassicLight || 'Classic Light',
-                type: 'light'
+                type: 'light',
+                source: 'static',
             },
             'theme-dark': {
                 text: locale.txtThemeDark || 'Dark',
-                type: 'dark'
+                type: 'dark',
+                source: 'static',
             },
         }
+
+        if ( !!window.currentLoaderTheme ) {
+            themes_map[currentLoaderTheme.id] = {};
+            window.currentLoaderTheme = undefined;
+        }
+
         var id_default_light_theme = 'theme-classic-light',
             id_default_dark_theme = 'theme-dark';
 
         var name_colors = [
+            "toolbar-header-document",
+            "toolbar-header-spreadsheet",
+            "toolbar-header-presentation",
+
             "background-normal",
             "background-toolbar",
             "background-toolbar-additional",
@@ -169,33 +182,53 @@ define([
         }
 
         var get_themes_config = function (url) {
-            fetch(url, {
+            Common.Utils.loadConfig(url,
-                method: 'get',
+                function ( obj ) {
-                headers: {
+                    if ( obj != 'error' ) {
-                    'Accept': 'application/json',
+                        parse_themes_object(obj);
-                },
+                    }
-            }).then(function(response) {
-                if (!response.ok) {
-                    throw new Error('server error');
                 }
-                return response.json();
+            );
-            }).then(function(response) {
+            // fetch(url, {
-                if ( response.then ) {
+            //     method: 'get',
-                    // return response.json();
+            //     headers: {
-                } else {
+            //         'Accept': 'application/json',
-                    parse_themes_object(response);
+            //     },
-
+            // }).then(function(response) {
-                    /* to break promises chain */
+            //     if (!response.ok) {
-                    throw new Error('loaded');
+            //         throw new Error('server error');
-                }
+            //     }
-            }).catch(function(e) {
+            //     return response.json();
-                if ( e.message == 'loaded' ) {
+            // }).then(function(response) {
-                } else console.log('fetch error: ' + e);
+            //     if ( response.then ) {
-            });
+            //         // return response.json();
+            //     } else {
+            //         parse_themes_object(response);
+            //
+            //         /* to break promises chain */
+            //         throw new Error('loaded');
+            //     }
+            // }).catch(function(e) {
+            //     if ( e.message == 'loaded' ) {
+            //     } else console.log('fetch error: ' + e);
+            // });
         }
 
         var on_document_ready = function (el) {
-            // get_themes_config('../../common/main/resources/themes/themes.json')
+            get_themes_config('../../common/main/resources/themes/themes.json');
+        }
+
+        var get_ui_theme_name = function (objtheme) {
+            if ( typeof(objtheme) == 'string' &&
+                    objtheme.startsWith("{") && objtheme.endsWith("}") )
+            {
+                objtheme = JSON.parse(objtheme);
+            }
+
+            if ( objtheme && typeof(objtheme) == 'object' )
+                return objtheme.id;
+
+            return objtheme;
         }
 
         return {
@@ -203,13 +236,13 @@ define([
                 var me = this;
 
                 $(window).on('storage', function (e) {
-                    if ( e.key == 'ui-theme' ) {
+                    if ( e.key == 'ui-theme' || e.key == 'ui-theme-id' ) {
                         me.setTheme(e.originalEvent.newValue);
                     }
                 })
 
                 this.api = api;
-                var theme_name = Common.localStorage.getItem('ui-theme');
+                var theme_name = get_ui_theme_name(Common.localStorage.getItem('ui-theme'));
                 if ( !themes_map[theme_name] )
                     theme_name = id_default_light_theme;
 
@@ -242,7 +275,7 @@ define([
             },
 
             currentThemeId: function () {
-                return Common.localStorage.getItem('ui-theme') || id_default_light_theme;
+                return get_ui_theme_name(Common.localStorage.getItem('ui-theme')) || id_default_light_theme;
             },
 
             defaultThemeId: function (type) {
@@ -257,7 +290,8 @@ define([
                 return themes_map[this.currentThemeId()].type == 'dark';
             },
 
-            setTheme: function (id, force) {
+            setTheme: function (obj, force) {
+                var id = get_ui_theme_name(obj);
                 if ( (this.currentThemeId() != id || force) && !!themes_map[id] ) {
                     var classname = document.body.className.replace(/theme-\w+\s?/, '');
                     document.body.className = classname;
@@ -270,7 +304,20 @@ define([
 
                     this.api.asc_setSkin(obj);
 
-                    Common.localStorage.setItem('ui-theme', id);
+                    if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
+                        var theme_obj = {
+                            id: id,
+                            type: obj.type,
+                        };
+
+                        if ( themes_map[id].source != 'static' ) {
+                            theme_obj.colors = obj;
+                        }
+
+                        Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
+                    }
+
+                    Common.localStorage.setItem('ui-theme-id', id);
                     Common.NotificationCenter.trigger('uitheme:changed', id);
                 }
             },

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

@@ -32,7 +32,7 @@ var params = (function() {
     return urlParams;
 })();
 
-if ( !!params.uitheme && !localStorage.getItem("ui-theme") ) {
+if ( !!params.uitheme && !localStorage.getItem("ui-theme-id") ) {
     // const _t = params.uitheme.match(/([\w-]+)/g);
 
     if ( params.uitheme == 'default-dark' )
@@ -41,14 +41,14 @@ if ( !!params.uitheme && !localStorage.getItem("ui-theme") ) {
     if ( params.uitheme == 'default-light' )
         params.uitheme = 'theme-classic-light';
 
-    localStorage.setItem("ui-theme", params.uitheme);
+    localStorage.setItem("ui-theme-id", params.uitheme);
 }
 
-var ui_theme_name = localStorage.getItem("ui-theme");
+var ui_theme_name = localStorage.getItem("ui-theme-id");
 if ( !ui_theme_name ) {
     if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
         ui_theme_name = 'theme-dark';
-        localStorage.setItem("ui-theme", ui_theme_name);
+        localStorage.setItem("ui-theme-id", ui_theme_name);
     }
 }
 if ( !!ui_theme_name ) {

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

@@ -0,0 +1,28 @@
+
++function init_themes() {
+    var objtheme = localStorage.getItem("ui-theme");
+    if ( typeof(objtheme) == 'string' &&
+            objtheme.startsWith("{") && objtheme.endsWith("}") )
+    {
+        objtheme = JSON.parse(objtheme);
+    }
+
+    var ui_theme_name = objtheme && typeof(objtheme) == 'object' ? objtheme.id :
+        typeof(objtheme) == 'string' ? objtheme : localStorage.getItem("ui-theme-id");
+
+    if ( !!ui_theme_name ) {
+        if ( !!objtheme && !!objtheme.colors ) {
+            var colors = [];
+            for ( var c in objtheme.colors ) {
+                colors.push('--' + c + ':' + objtheme.colors[c]);
+            }
+
+            var style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = '.' + ui_theme_name + '{'+ colors.join(';') +';}';
+            document.getElementsByTagName('head')[0].appendChild(style);
+
+            window.currentLoaderTheme = objtheme;
+        }
+    }
+}();

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

@@ -641,6 +641,14 @@ Common.Utils.String = new (function() {
                 var nTrailingChar = 0xDC00 | (nUnicode & 0x3FF);
                 return String.fromCharCode(nLeadingChar) + String.fromCharCode(nTrailingChar);
             }
+        },
+
+        fixedDigits: function(num, digits, fill) {
+            (fill===undefined) && (fill = '0');
+            var strfill = "",
+                str = num.toString();
+            for (var i=str.length; i<digits; i++) strfill += fill;
+            return strfill + str;
         }
     }
 })();
@@ -789,10 +797,12 @@ Common.Utils.getConfigJson = function (url) {
 };
 
 Common.Utils.loadConfig = function(url, callback) {
-    "use strict";
+    fetch(url, {
-
+            method: 'get',
-    fetch(url)
+            headers: {
-        .then(function(response){
+                'Accept': 'application/json',
+            },
+        }).then(function(response){
             if ( response.ok )
                 return response.json();
             else return 'error';

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;">'+this.txtBtnReplaceAll+'</button>',
+                    '<button class="btn normal dlg-btn" result="replaceall" style="margin-left: 6px;width: auto;">'+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/less/common.less

@@ -222,49 +222,34 @@ textarea {
 
 .btn-edit-table,
 .btn-change-shape {
-    .background-ximage-v2('right-panels/rowscols_icon.png', 84px);
+    .background-ximage-v2('right-panels/rowscols_icon.png', 56px);
     margin-right: 2px !important;
     margin-bottom: 1px !important;
+
+    background-position-x: calc(@button-small-normal-icon-offset-x - 8px);
+
+    .btn-group.open &,
+        button.active:not(.disabled) &,
+        button:active:not(.disabled) &
+    {
+        background-position-x: calc(@button-small-active-icon-offset-x - 8px);
+    }
 }
 
 .btn-edit-table {
-    background-position: 0 0;
+    background-position-y: 0;
 
     button.over & {
         //background-position: -28px 0;
     }
-
-    .btn-group.open &,
-        button.active:not(.disabled) &,
-        button:active:not(.disabled) &
-    {
-        //background-position: -56px 0;
-    }
-
-    // TODO: not good, must be controled by variable
-    .theme-dark & {
-        background-position-x: -56px;
-    }
 }
 
 .btn-change-shape {
-    background-position: 0 -16px;
+    background-position-y: -16px;
 
     button.over & {
         //background-position: -28px -16px;
     }
-
-    .btn-group.open &,
-        button.active:not(.disabled) &,
-        button:active:not(.disabled) &
-    {
-        //background-position: -56px -16px;
-    }
-
-    // TODO: not good, must be controled by variable
-    .theme-dark & {
-        background-position-x: -56px;
-    }
 }
 
 .doc-content-color {

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

@@ -49,6 +49,7 @@
     .asc-loadmask-title {
         .fontsize(@font-size-large);
         margin: 0 8px 0 12px;
+        white-space: pre-wrap;
     }
 
     .left-panel & {

apps/common/main/resources/themes/classic-light.json

@@ -0,0 +1,20 @@
+{
+        "name": "Classic Light 2",
+        "id": "theme-classic-light2",
+        "type": "light",
+        "colors": {
+            "toolbar-header-document": "#446995",
+            "toolbar-header-spreadsheet": "#40865c",
+            "toolbar-header-presentation": "#aa5252",
+
+            "background-normal": "#f00",
+            "background-toolbar": "#f100f1",
+            "background-toolbar-additional": "#f100f1",
+            "background-primary-dialog-button": "#7d858c",
+            "background-tab-underline": "#444",
+            "background-notification-popover": "#fcfed7",
+            "background-notification-badge": "#ffd112",
+            "background-scrim": "rgba(0,0,0, 0.2)",
+            "background-loader": "rgba(0,0,0, .65)"
+        }
+}

apps/common/main/resources/themes/themes.json

@@ -0,0 +1,5 @@
+{
+    "themes": [
+        "../../common/main/resources/themes/classic-light.json"
+    ]
+}

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

@@ -56,12 +56,15 @@ const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
             ></a>)
         }
     }
+
+    let indexCurColor = colors.indexOf(curColor);
+    
     return (
         <div className='palette'>
             {colors && colors.length > 0 && colors.map((color, index) => {
                 return(
                     <a key={`dc-${index}`}
-                       className={curColor && curColor === color ? 'active' : ''}
+                       className={curColor && curColor === color && index === indexCurColor ? 'active' : ''}
                        style={{background: `#${color}`}}
                        onClick={() => {onColorClick(color)}}
                     ></a>

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

@@ -35,8 +35,6 @@ const PluginsController = inject('storeAppOptions')(observer(props => {
             api.asc_unregisterCallback("asc_onPluginClose", pluginClose);
             api.asc_unregisterCallback("asc_onPluginResize", pluginResize);
             api.asc_unregisterCallback('asc_onPluginsInit', onPluginsInit);
-
-            Common.Gateway.off('init', loadConfig);
         };
     });
 
@@ -46,7 +44,6 @@ const PluginsController = inject('storeAppOptions')(observer(props => {
         api.asc_pluginButtonClick(index);
     };
 
-
     const showPluginModal = (plugin, variationIndex, frameId, urlAddition) => {
         let isAndroid = Device.android;
         let variation = plugin.get_Variations()[variationIndex];
@@ -68,7 +65,8 @@ const PluginsController = inject('storeAppOptions')(observer(props => {
                     if ((storeAppOptions.isEdit || b.isViewer !== false)) {
                         newBtns[index] = {
                             text: b.text,
-                            attributes: {result: index}
+                            attributes: {result: index},
+                            close: false
                         };
                     }
                 });
@@ -123,8 +121,8 @@ const PluginsController = inject('storeAppOptions')(observer(props => {
     };
 
     const pluginClose = plugin => {
-        if (iframe) {
+        if (plugin) {
-            iframe = null;
+            modal.close();
         }
     };
 

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

@@ -17,6 +17,7 @@ class CollaborationController extends Component {
             api.asc_registerCallback('asc_OnTryUndoInFastCollaborative', this.onTryUndoInFastCollaborative.bind(this));
         });
 
+        Common.Notifications.on('api:disconnect', this.onCoAuthoringDisconnect.bind(this));
         Common.Notifications.on('document:ready', this.onDocumentReady.bind(this));
     }
 

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

@@ -51,6 +51,7 @@ class CommentsController extends Component {
         this.usersStore = this.props.users;
         this.appOptions = this.props.storeAppOptions;
         this.storeComments = this.props.storeComments;
+        this.storeApplicationSettings = this.props.storeApplicationSettings;
 
         Common.Notifications.on('engineCreated', api => {
             api.asc_registerCallback('asc_onAddComment', this.addComment.bind(this));
@@ -74,6 +75,8 @@ class CommentsController extends Component {
                 /** coauthoring begin **/
                 const isLiveCommenting = LocalStorage.getBool(`${window.editorType}-mobile-settings-livecomment`, true);
                 const resolved = LocalStorage.getBool(`${window.editorType}-settings-resolvedcomment`, true);
+                this.storeApplicationSettings.changeDisplayComments(isLiveCommenting);
+                this.storeApplicationSettings.changeDisplayResolved(resolved);
                 isLiveCommenting ? api.asc_showComments(resolved) : api.asc_hideComments();
                 /** coauthoring end **/
             }
@@ -98,6 +101,9 @@ class CommentsController extends Component {
     }
     removeComment (id) {
         this.storeComments.removeComment(id);
+        if (this.storeComments.showComments.length < 1) {
+            Device.phone ? f7.sheet.close('#view-comment-sheet') : f7.popover.close('#view-comment-popover');
+        }
     }
     removeComments (data) {
         for (let i = 0; i < data.length; i++) {
@@ -582,7 +588,7 @@ class ViewCommentsController extends Component {
     }
 }
 
-const _CommentsController = inject('storeAppOptions', 'storeComments', 'users')(observer(CommentsController));
+const _CommentsController = inject('storeAppOptions', 'storeComments', 'users', "storeApplicationSettings")(observer(CommentsController));
 const _AddCommentController = inject('storeAppOptions', 'storeComments', 'users')(observer(AddCommentController));
 const _EditCommentController = inject('storeComments', 'users')(observer(EditCommentController));
 const _ViewCommentsController = inject('storeComments', 'users')(observer(withTranslation()(ViewCommentsController)));

apps/common/mobile/lib/store/comments.js

@@ -39,6 +39,16 @@ export class storeComments {
         });
     }
 
+    removeShowComment(id) {
+        const index = this.showComments.findIndex((comment) => {
+            return comment.uid === id;
+        });
+
+        if (index !== -1) {
+            this.showComments.splice(index, 1);
+        }
+    }
+
     addComment (comment) {
         comment.groupName ? this.groupCollectionComments.push(comment) : this.collectionComments.push(comment);
     }
@@ -51,6 +61,7 @@ export class storeComments {
         if (index !== -1) {
             collection.splice(index, 1);
         }
+        this.removeShowComment(id);
     }
 
     changeComment (id, changeComment) {

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

@@ -740,7 +740,6 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC
     const isAndroid = Device.android;
 
     const viewMode = !storeAppOptions.canComments;
-
     const comments = storeComments.showComments;
 
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -760,13 +759,20 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC
     };
 
     const onViewNextComment = () => {
-        if (currentIndex + 1 === comments.length) {
+        if (currentIndex + 1 >= comments.length) {
             setCurrentIndex(0);
         } else {
             setCurrentIndex(currentIndex + 1);
         }
     };
 
+    if(!comment) {
+        if (comments.length > 0) {
+            onViewNextComment();
+        }
+        return null;
+    }
+
     return (
         <Fragment>
             <Toolbar position='bottom'>
@@ -779,77 +785,78 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC
                 </div>
             </Toolbar>
             <div className='pages'>
-            <Page className='page-current-comment'>
+                <Page className='page-current-comment'>
-            <List className='comment-list'>
+                    <List className='comment-list'>
-            <ListItem>
+                        <ListItem>
-                <div slot='header' className='comment-header'>
+                            <div slot='header' className='comment-header'>
-                    <div className='left'>
+                                <div className='left'>
-                        {isAndroid && <div className='initials' style={{backgroundColor: `${comment.userColor ? comment.userColor : '#cfcfcf'}`}}>{comment.userInitials}</div>}
+                                    {isAndroid && <div className='initials' style={{backgroundColor: `${comment.userColor ? comment.userColor : '#cfcfcf'}`}}>{comment.userInitials}</div>}
-                        <div>
+                                    <div>
-                            <div className='user-name'>{comment.userName}</div>
+                                        <div className='user-name'>{comment.userName}</div>
-                            <div className='comment-date'>{comment.date}</div>
+                                        <div className='comment-date'>{comment.date}</div>
-                        </div>
-                    </div>
-                    {!viewMode &&
-                    <div className='right'>
-                        <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div>
-                        <div className='comment-menu'
-                             onClick={() => {openActionComment(true);}}
-                        ><Icon icon='icon-menu-comment'/></div>
-                    </div>
-                    }
-                </div>
-                <div slot='footer'>
-                    {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
-                    <div className='comment-text'><pre>{pickLink(comment.comment)}</pre></div>
-                    {comment.replies.length > 0 &&
-                    <ul className='reply-list'>
-                        {comment.replies.map((reply, indexReply) => {
-                            return (
-                                <li key={`reply-${indexReply}`}
-                                    className='reply-item'
-                                >
-                                    <div className='item-content'>
-                                        <div className='item-inner'>
-                                            <div className='item-title'>
-                                                <div slot='header' className='reply-header'>
-                                                    <div className='left'>
-                                                        {isAndroid && <div className='initials' style={{backgroundColor: `${reply.userColor ? reply.userColor : '#cfcfcf'}`}}>{reply.userInitials}</div>}
-                                                        <div>
-                                                            <div className='user-name'>{reply.userName}</div>
-                                                            <div className='reply-date'>{reply.date}</div>
-                                                        </div>
-                                                    </div>
-                                                    {!viewMode &&
-                                                    <div className='right'>
-                                                        <div className='reply-menu'
-                                                             onClick={() => {setReply(reply); openActionReply(true);}}
-                                                        >
-                                                            <Icon icon='icon-menu-comment'/>
-                                                        </div>
-                                                    </div>
-                                                    }
-                                                </div>
-                                                <div slot='footer'>
-                                                    <div className='reply-text'><pre>{pickLink(reply.reply)}</pre></div>
-                                                </div>
-                                            </div>
-                                        </div>
                                     </div>
-                                </li>
+                                </div>
-                            )
+                                {!viewMode &&
-                        })}
+                                <div className='right'>
-                    </ul>
+                                    <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div>
-                    }
+                                    <div className='comment-menu'
-                </div>
+                                        onClick={() => {openActionComment(true);}}
-            </ListItem>
+                                    ><Icon icon='icon-menu-comment'/></div>
-            </List>
+                                </div>
-            <CommentActions comment={comment} onCommentMenuClick={onCommentMenuClick} opened={commentActionsOpened} openActionComment={openActionComment}/>
+                                }
-            <ReplyActions comment={comment} reply={reply} onCommentMenuClick={onCommentMenuClick} opened={replyActionsOpened} openActionReply={openActionReply}/>
+                            </div>
-            </Page>
+                            <div slot='footer'>
+                                {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
+                                <div className='comment-text'><pre>{pickLink(comment.comment)}</pre></div>
+                                {comment.replies.length > 0 &&
+                                <ul className='reply-list'>
+                                    {comment.replies.map((reply, indexReply) => {
+                                        return (
+                                            <li key={`reply-${indexReply}`}
+                                                className='reply-item'
+                                            >
+                                                <div className='item-content'>
+                                                    <div className='item-inner'>
+                                                        <div className='item-title'>
+                                                            <div slot='header' className='reply-header'>
+                                                                <div className='left'>
+                                                                    {isAndroid && <div className='initials' style={{backgroundColor: `${reply.userColor ? reply.userColor : '#cfcfcf'}`}}>{reply.userInitials}</div>}
+                                                                    <div>
+                                                                        <div className='user-name'>{reply.userName}</div>
+                                                                        <div className='reply-date'>{reply.date}</div>
+                                                                    </div>
+                                                                </div>
+                                                                {!viewMode &&
+                                                                <div className='right'>
+                                                                    <div className='reply-menu'
+                                                                        onClick={() => {setReply(reply); openActionReply(true);}}
+                                                                    >
+                                                                        <Icon icon='icon-menu-comment'/>
+                                                                    </div>
+                                                                </div>
+                                                                }
+                                                            </div>
+                                                            <div slot='footer'>
+                                                                <div className='reply-text'><pre>{pickLink(reply.reply)}</pre></div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </li>
+                                        )
+                                    })}
+                                </ul>
+                                }
+                            </div>
+                        </ListItem>
+                    </List>
+                    <CommentActions comment={comment} onCommentMenuClick={onCommentMenuClick} opened={commentActionsOpened} openActionComment={openActionComment}/>
+                    <ReplyActions comment={comment} reply={reply} onCommentMenuClick={onCommentMenuClick} opened={replyActionsOpened} openActionReply={openActionReply}/>
+                </Page>
             </div>
         </Fragment>
     )
+
 }));
 
 const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment}) => {

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

@@ -1,21 +1,22 @@
 
 :root {
     .theme-dark {
+        --brand-word: #208BFF;
+        --brand-cell: #34C759;
+        --brand-slide: #FF4A31;
+
         --background-primary: #1C1C1E;
         --background-secondary: #2C2C2E;
         --background-tab-active: #636366;
-        --text-tertiary: #48484A;
         --background-tab-normal: #757575;
+        --background-menu-divider: fade(#545458, 36%);
+
+        --text-tertiary: #48484A;
         --text-normal: #FFF;
         --text-secondary: fade(#EBEBF5, 60%);
         --text-link: #1976D2;
         --text-error: #FF453A;
 
-        --background-menu-divider: fade(#545458, 36%);
-        --brand-word: #208BFF;
-        --brand-cell: #34C759;
-        --brand-slide: #FF4A31;
-
         --component-disabled-opacity: .4;
     }
 }

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

@@ -1,19 +1,38 @@
 
 :root {
+    --brand-word: #446995;
+    --brand-cell: #40865C;
+    --brand-slide: #AA5252;
+
     --background-primary: #FFF;
     --background-secondary: #FFF;
     --background-tab-active: #AEAEB2;
-    --text-tertiary: #C7C7CC;
+    --background-menu-divider: fade(#3C3C43, 36%);
     --background-tab-normal: fade(#FFF, 50%);
+
+    --text-tertiary: #C7C7CC;
     --text-normal: #000;
     --text-secondary: fade(#3C3C43, 60%);
     --text-link: #007AFF;
     --text-error: #FF3B30;
 
-    --background-menu-divider: fade(#3C3C43, 36%);
-    --brand-word: #446995;
-    --brand-cell: #40865C;
-    --brand-slide: #AA5252;
-
     --component-disabled-opacity: .4;
-}
+}
+
+@brand-word: var(--brand-word);
+@brand-cell: var(--brand-cell);
+@brand-slide: var(--brand-slide);
+
+@background-primary: var(--background-primary);
+@background-secondary: var(--background-secondary);
+@background-tab-active: var(--background-tab-active);
+@background-tab-normal: var(--background-tab-normal);
+@background-menu-divider: var(--background-menu-divider);
+
+@text-tertiary: var(--text-tertiary);
+@text-normal: var(--text-normal);
+@text-secondary: var(--text-secondary);
+@text-link: var(--text-link);
+@text-error: var(--text-error);
+
+@component-disabled-opacity: var(--component-disabled-opacity);

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

@@ -212,6 +212,8 @@
 
 .dialog.modal-in {
   z-index: 14000;
+  max-height: 100%;
+  overflow: auto;
 }
 
 .dialog-backdrop.backdrop-in {

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

@@ -560,4 +560,26 @@
         white-space: normal;
         text-overflow: ellipsis;
     }
+
+    input.modal-text-input {
+        box-sizing: border-box;
+        height: 26px;
+        background: #fff;
+        margin: 0;
+        margin-top: 15px;
+        padding: 0 5px;
+        border: 1px solid rgba(0,0,0,.3);
+        border-radius: 0;
+        width: 100%;
+        font-size: 14px;
+        font-family: inherit;
+        display: block;
+        box-shadow: 0 0 0 transparent;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -ms-appearance: none;
+        appearance: none;
+    }
 }
+
+

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

@@ -56,6 +56,20 @@
         }
     }
 
+    .add-popup {
+        .view{
+            .block-title{
+                margin-bottom: 0;
+                margin-top: 8px;
+            }
+            .inputs-list {
+                ul:after, :before{
+                    display: none;
+                }
+            }
+        }
+    }
+
     // Buttons
     .segmented {
         .decrement, .increment {
@@ -493,4 +507,39 @@
             margin-left: 0;
         }
     }
+
+    input.modal-text-input {
+        box-sizing: border-box;
+        height: 36px;
+        background: #fff;
+        margin: 0;
+        margin-top: 15px;
+        padding: 0;
+        border: none;
+        width: 100%;
+        font-size: 16px;
+        font-family: inherit;
+        display: block;
+        box-shadow: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -ms-appearance: none;
+        appearance: none;
+        -webkit-transition-duration: .2s;
+        transition-duration: .2s;
+    }
+
+    .input-field {
+        .inputs-list {
+            margin: 15px 0 0;
+            ul {
+                &::before, &::after {
+                    display: none;
+                }
+            }
+            .item-input, .item-inner {
+                padding: 0;
+            }
+        }
+    }
 }

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

@@ -196,6 +196,9 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
+        &::before, &::after {
+            display: none;
+        }
     }
     li {
         position: relative;
@@ -784,9 +787,6 @@ input[type="number"]::-webkit-inner-spin-button {
             padding: 0;
             text-align: left;
             font-size: 16px;
-            span {
-                padding: 0;
-            }
         }
     }
     .picker-center-highlight {

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

@@ -24,5 +24,10 @@
                 display: none;
             }
         }
+        &.icon-edit {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="19.3,5.3 6.1,18.4 4.6,16.9 17.8,3.8 17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+        }
     }
 }

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

@@ -11,7 +11,7 @@
         &.icon-prev {
             width: 20px;
             height: 20px;
-            .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="@{white}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+            .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="@{themeColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
             &:after {
               display: none;
             }
@@ -19,7 +19,7 @@
         &.icon-next {
             width: 20px;
             height: 20px;
-            .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="@{white}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+            .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="@{themeColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
             &:after {
                 display: none;
             }
@@ -32,6 +32,11 @@
                 height: 24px;
                 .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9912 6C14.9912 8.18203 14.4464 9.76912 13.7789 10.7492C13.101 11.7447 12.4042 12 11.9912 12C11.5782 12 10.8814 11.7447 10.2035 10.7492C9.53601 9.76912 8.99121 8.18203 8.99121 6C8.99121 4.23017 10.4571 3 11.9912 3C13.5254 3 14.9912 4.23017 14.9912 6ZM13.4917 13.6397C13.0059 13.8771 12.4989 14 11.9912 14C11.4861 14 10.9817 13.8784 10.4983 13.6434C8.53188 14.3681 6.94518 15.0737 5.78927 15.7768C4.10512 16.8011 4 17.4079 4 17.5C4 17.7664 4.1014 18.3077 5.27104 18.8939C6.50029 19.5099 8.64545 19.9999 12 20C15.3546 20 17.4997 19.5099 18.7289 18.8939C19.8986 18.3078 20 17.7664 20 17.5C20 17.4079 19.8949 16.8011 18.2107 15.7768C17.0529 15.0726 15.4627 14.3657 13.4917 13.6397ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{navBarIconColor}"/></svg>');
             }
+            &.icon-edit {
+                width: 22px;
+                height: 22px;
+                .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+            }
         }
     }
 }

apps/documenteditor/embed/index.html

@@ -198,7 +198,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>
@@ -222,11 +222,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -257,6 +252,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>

apps/documenteditor/embed/index.html.deploy

@@ -190,7 +190,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>
@@ -214,11 +214,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->

apps/documenteditor/embed/index_loader.html

@@ -299,7 +299,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>
@@ -323,11 +323,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -351,6 +346,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>

apps/documenteditor/embed/index_loader.html.deploy

@@ -291,7 +291,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>
@@ -315,11 +315,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->

apps/documenteditor/embed/js/ApplicationController.js

@@ -43,7 +43,9 @@ DE.ApplicationController = new(function(){
         labelDocName,
         appOptions = {},
         btnSubmit,
-        _submitFail, $submitedTooltip;
+        _submitFail, $submitedTooltip, $requiredTooltip;
+
+    var LoadingDocument = -256;
 
     // Initialize analytics
     // -------------------------
@@ -166,6 +168,10 @@ DE.ApplicationController = new(function(){
                     _submitFail = false;
                     $submitedTooltip && $submitedTooltip.hide();
                     btnSubmit.attr({disabled: true});
+                    btnSubmit.css("pointer-events", "none");
+                break;
+            case LoadingDocument:
+                text = me.textLoadingDocument + '           ';
                 break;
             default:
                 text = me.waitText;
@@ -173,22 +179,27 @@ DE.ApplicationController = new(function(){
         }
 
         if (type == Asc.c_oAscAsyncActionType['BlockInteraction']) {
-            $('#id-loadmask .cmd-loader-title').html(text);
+            if (!me.loadMask)
-            showMask();
+                me.loadMask = new common.view.LoadMask();
+            me.loadMask.setTitle(text);
+            me.loadMask.show();
         }
     }
 
     function onLongActionEnd(type, id){
         if (id==Asc.c_oAscAsyncAction['Submit']) {
             btnSubmit.removeAttr('disabled');
-            if (!$submitedTooltip) {
+            btnSubmit.css("pointer-events", "auto");
-                $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
+            if (!_submitFail) {
-                $(document.body).append($submitedTooltip);
+                if (!$submitedTooltip) {
-                $submitedTooltip.on('click', function() {$submitedTooltip.hide();});
+                    $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
+                    $(document.body).append($submitedTooltip);
+                    $submitedTooltip.on('click', function() {$submitedTooltip.hide();});
+                }
+                $submitedTooltip.show();
             }
-            !_submitFail && $submitedTooltip.show();
         }
-        hideMask();
+        me.loadMask && me.loadMask.hide();
     }
 
     function onDocMouseMoveStart() {
@@ -251,12 +262,24 @@ DE.ApplicationController = new(function(){
         common.utils.dialogPrint(url, api);
     }
 
+    function onFillRequiredFields(isFilled) {
+        if (isFilled) {
+            btnSubmit.removeAttr('disabled');
+            btnSubmit.css("pointer-events", "auto");
+            // $requiredTooltip && $requiredTooltip.hide();
+        } else {
+            btnSubmit.attr({disabled: true});
+            btnSubmit.css("pointer-events", "none");
+        }
+    }
+
     function hidePreloader() {
         $('#loading-mask').fadeOut('slow');
     }
 
     function onDocumentContentReady() {
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -2);
         (zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
@@ -326,6 +349,7 @@ DE.ApplicationController = new(function(){
         api.asc_registerCallback('asc_onDownloadUrl',           onDownloadUrl);
         api.asc_registerCallback('asc_onPrint',                 onPrint);
         api.asc_registerCallback('asc_onPrintUrl',              onPrintUrl);
+        api.asc_registerCallback('sync_onAllRequiredFormsFilled', onFillRequiredFields);
 
         Common.Gateway.on('processmouse',       onProcessMouse);
         Common.Gateway.on('downloadas',         onDownloadAs);
@@ -406,6 +430,37 @@ DE.ApplicationController = new(function(){
             $pagenum.focus();
         });
 
+        // TODO: add asc_hasRequiredFields to sdk
+
+        if (appOptions.canSubmitForms && !api.asc_IsAllRequiredFormsFilled()) {
+            var sgroup = $('#id-submit-group');
+            btnSubmit.attr({disabled: true});
+            btnSubmit.css("pointer-events", "none");
+            if (!common.localStorage.getItem("de-embed-hide-submittip")) {
+                var offset = btnSubmit.offset();
+                $requiredTooltip = $('<div class="required-tooltip bottom-left" style="display:none;"><div class="tip-arrow bottom-left"></div><div>' + me.textRequired + '</div><div class="close-div">' + me.textGotIt + '</div></div>');
+                $(document.body).append($requiredTooltip);
+                $requiredTooltip.css({top : offset.top + btnSubmit.height() + 'px', left: offset.left + btnSubmit.outerWidth()/2 - $requiredTooltip.outerWidth() + 'px'});
+                $requiredTooltip.find('.close-div').on('click', function() {
+                    $requiredTooltip.hide();
+                    api.asc_MoveToFillingForm(true, true, true);
+                    common.localStorage.setItem("de-embed-hide-submittip", 1);
+                    sgroup.attr('data-toggle', 'tooltip');
+                    sgroup.tooltip({
+                        title       : me.textRequired,
+                        placement   : 'bottom'
+                    });
+                });
+                $requiredTooltip.show();
+            } else {
+                sgroup.attr('data-toggle', 'tooltip');
+                sgroup.tooltip({
+                    title       : me.textRequired,
+                    placement   : 'bottom'
+                });
+            }
+        }
+
         var documentMoveTimer;
         var ismoved = false;
         $(document).mousemove(function(event){
@@ -495,24 +550,15 @@ DE.ApplicationController = new(function(){
         else
             $parent.css('padding-right', _left_width - _right_width);
 
+        onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
         api.asc_LoadDocument();
         api.Resize();
     }
 
-    function showMask() {
-        $('#id-loadmask').modal({
-            backdrop: 'static',
-            keyboard: false
-        });
-    }
-
-    function hideMask() {
-        $('#id-loadmask').modal('hide');
-    }
-
     function onOpenDocument(progress) {
         var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-        $('#loadmask-text').html(me.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
+        me.loadMask && me.loadMask.setTitle(me.textLoadingDocument + ': ' + common.utils.fixedDigits(Math.min(Math.round(proc*100), 100), 3, "  ") + '%');
     }
 
     function onError(id, level, errData) {
@@ -527,6 +573,7 @@ DE.ApplicationController = new(function(){
         }
 
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var message;
 
@@ -757,6 +804,8 @@ DE.ApplicationController = new(function(){
         errorSubmit: 'Submit failed.',
         errorEditingDownloadas: 'An error occurred during the work with the document.<br>Use the \'Download as...\' option to save the file backup copy to your computer hard drive.',
         textGuest: 'Guest',
-        textAnonymous: 'Anonymous'
+        textAnonymous: 'Anonymous',
+        textRequired: 'Fill all required fields to send form.',
+        textGotIt: 'Got it'
     }
 })();

apps/documenteditor/embed/locale/en.json

@@ -21,10 +21,12 @@
   "DE.ApplicationController.scriptLoadError": "The connection is too slow, some of the components could not be loaded. Please reload the page.",
   "DE.ApplicationController.textAnonymous": "Anonymous",
   "DE.ApplicationController.textClear": "Clear All Fields",
+  "DE.ApplicationController.textGotIt": "Got it",
   "DE.ApplicationController.textGuest": "Guest",
   "DE.ApplicationController.textLoadingDocument": "Loading document",
   "DE.ApplicationController.textNext": "Next Field",
   "DE.ApplicationController.textOf": "of",
+  "DE.ApplicationController.textRequired": "Fill all required fields to send form.",
   "DE.ApplicationController.textSubmit": "Submit",
   "DE.ApplicationController.textSubmited": "<b>Form submitted successfully</b><br>Click to close the tip",
   "DE.ApplicationController.txtClose": "Close",

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

@@ -233,6 +233,18 @@ define([
         },
 
         onSubmitClick: function() {
+            if (!this.api.asc_IsAllRequiredFormsFilled()) {
+                var me = this;
+                Common.UI.warning({
+                    msg: this.view.textRequired,
+                    callback: function() {
+                        me.api.asc_MoveToFillingForm(true, true, true);
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                });
+                return;
+            }
+
             this.api.asc_SendForm();
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },

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

@@ -942,7 +942,7 @@ define([
                         break;
 
                     case LoadingDocument:
-                        title   = this.loadingDocumentTitleText;
+                        title   = this.loadingDocumentTitleText + '           ';
                         text    = this.loadingDocumentTextText;
                         break;
                     default:
@@ -1246,7 +1246,7 @@ define([
             onOpenDocument: function(progress) {
                 var elem = document.getElementById('loadmask-text');
                 var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-                proc = this.textLoadingDocument + ': ' + Math.min(Math.round(proc*100), 100) + '%';
+                proc = this.textLoadingDocument + ': ' + Common.Utils.String.fixedDigits(Math.min(Math.round(proc*100), 100), 3, "  ") + "%";
                 elem ? elem.innerHTML = proc : this.loadMask && this.loadMask.setTitle(proc);
             },
 

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

@@ -1227,8 +1227,12 @@ define([
 
         onHorizontalAlign: function(type, btn, e) {
             this._state.pralign = undefined;
-            if (this.api)
+            if (this.api) {
+                if (!btn.pressed) {
+                    type = (type==1) ? 3 : 1;
+                }
                 this.api.put_PrAlign(type);
+            }
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             Common.component.Analytics.trackEvent('ToolBar', 'Align');

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

@@ -2378,6 +2378,7 @@ define([
                     properties.put_Width(originalImageSize.get_ImageWidth());
                     properties.put_Height(originalImageSize.get_ImageHeight());
                     properties.put_ResetCrop(true);
+                    properties.put_Rot(0);
                     me.api.ImgApply(properties);
 
                     me.fireEvent('editcomplete', this);

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

@@ -388,7 +388,8 @@ define([
             tipPrevForm: 'Go to the previous field',
             tipNextForm: 'Go to the next field',
             tipSubmit: 'Submit form',
-            textSubmited: 'Form submitted successfully'
+            textSubmited: 'Form submitted successfully',
+            textRequired: 'Fill all required fields to send form.'
         }
     }()), DE.Views.FormsTab || {}));
 });

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

@@ -410,6 +410,7 @@ define([
                 properties.put_Width(w);
                 properties.put_Height(h);
                 properties.put_ResetCrop(true);
+                properties.put_Rot(0);
                 this.api.ImgApply(properties);
                 this.fireEvent('editcomplete', this);
             }

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

@@ -174,6 +174,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 el: $('#image-advanced-button-original-size')
             });
             this.btnOriginalSize.on('click', _.bind(function(btn, e) {
+                this.spnAngle.setValue(0);
                 this.spnWidth.setValue(this.sizeOriginal.width, true);
                 this.spnHeight.setValue(this.sizeOriginal.height, true);
                 this._nRatio = this.sizeOriginal.width/this.sizeOriginal.height;
@@ -181,6 +182,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                     this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue()));
                     this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()));
                     this._changedProps.put_ResetCrop(true);
+                    this._changedProps.put_Rot(0);
                 }
             }, this));
 

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

@@ -82,7 +82,7 @@ define([
                  * UI Components
                  */
 
-                this.SchemeNames = [
+                this.SchemeNames = [ this.txtScheme22,
                     this.txtScheme1, this.txtScheme2, this.txtScheme3, this.txtScheme4, this.txtScheme5,
                     this.txtScheme6, this.txtScheme7, this.txtScheme8, this.txtScheme9, this.txtScheme10,
                     this.txtScheme11, this.txtScheme12, this.txtScheme13, this.txtScheme14, this.txtScheme15,
@@ -311,7 +311,6 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-align-left',
                         enableToggle: true,
-                        allowDepress: false,
                         toggleGroup: 'alignGroup'
                     });
                     this.paragraphControls.push(this.btnAlignLeft);
@@ -321,7 +320,6 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-align-center',
                         enableToggle: true,
-                        allowDepress: false,
                         toggleGroup: 'alignGroup'
                     });
                     this.paragraphControls.push(this.btnAlignCenter);
@@ -331,7 +329,6 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-align-right',
                         enableToggle: true,
-                        allowDepress: false,
                         toggleGroup: 'alignGroup'
                     });
                     this.paragraphControls.push(this.btnAlignRight);
@@ -341,12 +338,10 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-align-just',
                         enableToggle: true,
-                        allowDepress: false,
                         toggleGroup: 'alignGroup'
                     });
                     this.paragraphControls.push(this.btnAlignJust);
 
-
                     this.btnDecLeftOffset = new Common.UI.Button({
                         id: 'id-toolbar-btn-decoffset',
                         cls: 'btn-toolbar',
@@ -2130,7 +2125,7 @@ define([
                         schemecolors.push(clr);
                     }
 
-                    if (index == 21) {
+                    if (index == 22) {
                         this.mnuColorSchema.addItem({
                             caption: '--'
                         });
@@ -2140,7 +2135,7 @@ define([
                         template: itemTemplate,
                         cls: 'color-schemas-menu',
                         colors: schemecolors,
-                        caption: (index < 21) ? (me.SchemeNames[index] || name) : name,
+                        caption: (index < 22) ? (me.SchemeNames[index] || name) : name,
                         value: index,
                         checkable: true,
                         toggleGroup: 'menuSchema'
@@ -2471,7 +2466,8 @@ define([
             mniCapitalizeWords: 'Capitalize Each Word',
             mniToggleCase: 'tOGGLE cASE',
             textChangeLevel: 'Change List Level',
-            mniTextToTable: 'Convert Text to Table'
+            mniTextToTable: 'Convert Text to Table',
+            txtScheme22: 'New Office'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/index.html

@@ -242,6 +242,7 @@
         if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
             document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
     </script>
+    <script src="../../common/main/lib/util/themeinit.js"></script>
 
     <!-- debug begin -->
     <link rel="stylesheet/less" type="text/css" href="resources/less/app.less" />

apps/documenteditor/main/locale/en.json

@@ -1783,6 +1783,7 @@
   "DE.Views.FormsTab.textHighlight": "Highlight Settings",
   "DE.Views.FormsTab.textNewColor": "Add New Custom Color",
   "DE.Views.FormsTab.textNoHighlight": "No highlighting",
+  "DE.Views.FormsTab.textRequired": "Fill all required fields to send form.",
   "DE.Views.FormsTab.textSubmited": "Form submitted successfully",
   "DE.Views.FormsTab.tipCheckBox": "Insert checkbox",
   "DE.Views.FormsTab.tipComboBox": "Insert combo box",
@@ -2721,6 +2722,7 @@
   "DE.Views.Toolbar.txtScheme2": "Grayscale",
   "DE.Views.Toolbar.txtScheme20": "Urban",
   "DE.Views.Toolbar.txtScheme21": "Verve",
+  "DE.Views.Toolbar.txtScheme22": "New Office",
   "DE.Views.Toolbar.txtScheme3": "Apex",
   "DE.Views.Toolbar.txtScheme4": "Aspect",
   "DE.Views.Toolbar.txtScheme5": "Civic",

apps/documenteditor/mobile/locale/en.json

@@ -1,5 +1,5 @@
 {
-  "Main" : {
+  "Main": {
     "SDK": {
       "Series": "Series",
       "Diagram Title": "Chart Title",
@@ -47,12 +47,10 @@
     "textPaidFeature": "Paid feature",
     "textCustomLoader": "Please note that according to the terms of the license you are not entitled to change the loader. Please contact our Sales Department to get a quote.",
     "textClose": "Close",
-
     "errorProcessSaveResult": "Saving is failed.",
     "criticalErrorTitle": "Error",
     "warnProcessRightsChange": "You have been denied the right to edit the file.",
     "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
-
     "errorUpdateVersion": "The file version has been changed. The page will be reloaded.",
     "titleUpdateVersion": "Version changed",
     "textHasMacros": "The file contains automatic macros.<br>Do you want to run macros?",
@@ -136,14 +134,14 @@
   },
   "Toolbar": {
     "dlgLeaveTitleText": "You leave the application",
-    "dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
+    "dlgLeaveMsgText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
     "leaveButtonText": "Leave this Page",
     "stayButtonText": "Stay on this Page"
   },
   "Common": {
     "ThemeColorPalette": {
       "textThemeColors": "Theme Colors",
-      "textStandartColors": "Standart Colors",
+      "textStandartColors": "Standard Colors",
       "textCustomColors": "Custom Colors"
     },
     "Collaboration": {
@@ -331,6 +329,8 @@
     "closeButtonText": "Close File",
     "advDRMOptions": "Protected File",
     "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
+    "textOpenFile": "Enter a password to open the file",
+    "txtIncorrectPwd": "Password is incorrect",
     "textNoTextFound": "Text not found",
     "textReplace": "Replace",
     "textReplaceAll": "Replace All",
@@ -466,7 +466,7 @@
     "textCancel": "Cancel",
     "textPictureFromLibrary": "Picture from Library",
     "textPictureFromURL": "Picture from URL",
-    "textLinkSettings": "LinkSettings",
+    "textLinkSettings": "Link Settings",
     "textBack": "Back",
     "textEmptyImgUrl": "You need to specify image URL.",
     "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",

apps/documenteditor/mobile/src/controller/Error.jsx

@@ -204,8 +204,8 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
                 if (id === Asc.c_oAscError.ID.Warning && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
                     api.asc_DownloadOrigin();
                 } else if(id === Asc.c_oAscError.ID.SplitCellMaxRows ||
-                                 Asc.c_oAscError.ID.SplitCellMaxCols ||
+                            id === Asc.c_oAscError.ID.SplitCellMaxCols ||
-                                 Asc.c_oAscError.ID.SplitCellRowsDivider && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
+                            id === Asc.c_oAscError.ID.SplitCellRowsDivider) {
                         Common.Notifications.trigger('showSplitModal',true);
                 }
                 storeAppOptions.changeEditingRights(false);

apps/documenteditor/mobile/src/controller/LongActions.jsx

@@ -39,11 +39,7 @@ const LongActionsController = () => {
             api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
             api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
 
-            Common.Notifications.off('preloader:endAction', (type, id) => {
+            Common.Notifications.off('preloader:endAction', onLongActionEnd);
-                if (stackLongActions.exist({id: id, type: type})) {
-                    onLongActionEnd(type, id);
-                }
-            });
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);
             Common.Notifications.off('preloader:close', closePreloader);
         })
@@ -55,22 +51,18 @@ const LongActionsController = () => {
         setLongActionView(action);
     };
 
-    const onLongActionEnd = (type, id) => {
+    const onLongActionEnd = (type, id, forceClose) => {
+        if (!stackLongActions.exist({id: id, type: type})) return;
+
         let action = {id: id, type: type};
         stackLongActions.pop(action);
 
         //this.updateWindowTitle(true);
 
-        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information}) || stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
 
-        if (action) {
+        if (action && !forceClose) {
-            setLongActionView(action)
+            setLongActionView(action);
-        }
-
-        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
-
-        if (action) {
-            setLongActionView(action)
         } else {
             loadMask && loadMask.el && loadMask.el.classList.contains('modal-in') && f7.dialog.close(loadMask.el);
         }

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -184,7 +184,7 @@ class MainController extends Component {
 
                 const storeAppOptions = this.props.storeAppOptions;
 
-                storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions);
+                storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions, EditorUIController.isSupportEditFeature());
 
                 this.applyMode(storeAppOptions);
 
@@ -510,6 +510,10 @@ class MainController extends Component {
     }
 
     bindEvents() {
+        $$(window).on('resize', () => {
+            this.api.Resize();
+        });
+
         this.api.asc_registerCallback('asc_onDocumentUpdateVersion', this.onUpdateVersion.bind(this));
         this.api.asc_registerCallback('asc_onServerVersion', this.onServerVersion.bind(this));
         this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this));
@@ -607,7 +611,8 @@ class MainController extends Component {
         this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => {
             const {t} = this.props;
             const _t = t("Settings", { returnObjects: true });
-            onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose);
+            onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM);
+            if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
         });
     }
 

apps/documenteditor/mobile/src/controller/Search.jsx

@@ -4,6 +4,7 @@ import { SearchController, SearchView, SearchSettingsView } from '../../../../co
 import { f7 } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
+import { observer, inject } from "mobx-react";
 
 class SearchSettings extends SearchSettingsView {
     constructor(props) {
@@ -22,6 +23,8 @@ class SearchSettings extends SearchSettingsView {
         const show_popover = !Device.phone;
         const { t } = this.props;
         const _t = t("Settings", {returnObjects: true});
+        const storeAppOptions = this.props.storeAppOptions;
+        const isEdit = storeAppOptions.isEdit;
 
         const markup = (
                 <Page>
@@ -34,9 +37,14 @@ class SearchSettings extends SearchSettingsView {
                     </Navbar>
                     <List>
                         <ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
-                        <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
+                        {isEdit ? 
-                        <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
+                            <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} 
+                                onClick={e => this.onFindReplaceClick('replace')} />
+                        : null}
+                        {isEdit ? 
+                            <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
                                 onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
+                        : null}
                     </List>
                     <List>
                         <ListItem title={_t.textCaseSensitive}>
@@ -115,6 +123,6 @@ const Search = withTranslation()(props => {
     return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
 });
 
-const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
+const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings)));
 
 export {Search, SearchSettingsWithTranslation as SearchSettings}

apps/documenteditor/mobile/src/controller/Toolbar.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { inject } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
 
-const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(props => {
+const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(observer(props => {
     const {t} = useTranslation();
     const _t = t("Toolbar", { returnObjects: true });
 
@@ -15,14 +15,14 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
     const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview;
     const readerMode = appOptions.readerMode;
 
+    const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
+
     useEffect(() => {
         const onDocumentReady = () => {
             const api = Common.EditorApi.get();
             api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
             api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
             api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
-            api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
-            Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
             Common.Notifications.on('toolbar:activatecontrols', activateControls);
             Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.on('goback', goBack);
@@ -35,10 +35,15 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
             onDocumentReady();
         }
 
+        if (isDisconnected) {
+            f7.popover.close();
+            f7.sheet.close();
+            f7.popup.close();
+        }
+
         return () => {
             Common.Notifications.off('document:ready', onDocumentReady);
             Common.Notifications.off('setdoctitle', setDocTitle);
-            Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
             Common.Notifications.off('toolbar:activatecontrols', activateControls);
             Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.off('goback', goBack);
@@ -47,7 +52,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
             api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
             api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
             api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
-            api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
         }
     });
 
@@ -76,7 +80,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
                     {
                         text: _t.leaveButtonText,
                         onClick: function() {
-                            goBack();
+                            goBack(true);
                         }
                     },
                     {
@@ -86,7 +90,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
                 ]
             }).open();
         } else {
-            goBack();
+            goBack(true);
         }
     };
     const goBack = (current) => {
@@ -161,20 +165,15 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
         }
     };
 
-    const onCoAuthoringDisconnect = (enableDownload) => {
-        deactivateEditControls(enableDownload);
-        setCanUndo(false);
-        setCanRedo(false);
-        f7.popover.close();
-        f7.sheet.close();
-        f7.popup.close();
-    };
-
     const [disabledControls, setDisabledControls] = useState(true);
     const activateControls = () => {
         setDisabledControls(false);
     };
 
+    const onEditDocument = () => {
+        Common.Gateway.requestEditRights();
+    };
+
     return (
         <ToolbarView openOptions={props.openOptions}
                      isEdit={appOptions.isEdit}
@@ -192,8 +191,11 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
                      disabledSettings={disabledSettings}
                      displayCollaboration={displayCollaboration}
                      readerMode={readerMode}
+                     showEditDocument={showEditDocument}
+                     onEditDocument={onEditDocument}
+                     isDisconnected={isDisconnected}
         />
     )
-});
+}));
 
 export {ToolbarController as Toolbar};

apps/documenteditor/mobile/src/controller/edit/EditImage.jsx

@@ -30,6 +30,7 @@ class EditImageController extends Component {
             properties.put_Width(imgSize.get_ImageWidth());
             properties.put_Height(imgSize.get_ImageHeight());
             properties.put_ResetCrop(true);
+            properties.put_Rot(0);
             api.ImgApply(properties);
         }
     }

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

@@ -1,11 +1,13 @@
 import React, { Component } from "react";
 import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
+import {observer, inject} from "mobx-react";
 
 class ApplicationSettingsController extends Component {
     constructor(props) {
         super(props);
         this.switchDisplayComments = this.switchDisplayComments.bind(this);
+        this.props.storeApplicationSettings.changeUnitMeasurement(Common.Utils.Metric.getCurrentMetric());
     }
 
     setUnitMeasurement(value) {
@@ -34,6 +36,8 @@ class ApplicationSettingsController extends Component {
 
     switchDisplayComments(value) {
         const api = Common.EditorApi.get();
+        this.props.storeAppOptions.changeCanViewComments(value);
+
         if (!value) {
             api.asc_hideComments();
             this.switchDisplayResolved(value);
@@ -42,6 +46,7 @@ class ApplicationSettingsController extends Component {
             const resolved = LocalStorage.getBool("de-settings-resolvedcomment");
             api.asc_showComments(resolved);
         }
+
         LocalStorage.setBool("de-mobile-settings-livecomment", value);
     }
 
@@ -73,4 +78,4 @@ class ApplicationSettingsController extends Component {
 }
 
 
-export default ApplicationSettingsController;
+export default inject("storeAppOptions", "storeApplicationSettings")(observer(ApplicationSettingsController));

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

@@ -25,6 +25,7 @@ class DownloadController extends Component {
         const _t = t("Settings", { returnObjects: true });
 
         if(format) {
+            this.closeModal();
             if (format == Asc.c_oAscFileType.TXT || format == Asc.c_oAscFileType.RTF) {
                 f7.dialog.confirm(
                     (format === Asc.c_oAscFileType.TXT) ? _t.textDownloadTxt : _t.textDownloadRtf,
@@ -32,19 +33,21 @@ class DownloadController extends Component {
                     () => {
                         if (format == Asc.c_oAscFileType.TXT) {
                             const isDocReady = this.props.storeAppOptions.isDocReady;
-                            onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.TXT, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, isDocReady);
+                            onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.TXT, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, isDocReady, isDRM);
                         }
                         else {
-                            api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
+                            setTimeout(() => {
+                                api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
+                            }, 400);
                         }
                     }
                 );
             } 
             else {
-                api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
+                setTimeout(() => {
+                    api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
+                }, 400);
             }
-
-            this.closeModal();
         }
     }
 
@@ -57,7 +60,7 @@ class DownloadController extends Component {
 
 const DownloadWithTranslation = inject("storeAppOptions")(observer(withTranslation()(DownloadController)));
 
-const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose) => {
+const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose, isDRM) => {
     if ($$('.dlg-adv-options.modal-in').length > 0) return;
 
     const api = Common.EditorApi.get();
@@ -70,7 +73,7 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
             pagesName.push(page.asc_getCodePageName());
         }
         Common.Notifications.trigger('preloader:close');
-        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
         const buttons = [];
         if (mode === 2) {
             buttons.push({
@@ -122,7 +125,7 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
         });
     } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
         Common.Notifications.trigger('preloader:close');
-        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
         const buttons = [{
             text: 'OK',
             bold: true,
@@ -134,6 +137,17 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
                 }
             }
         }];
+
+        if(isDRM) {
+            f7.dialog.create({
+                text: _t.txtIncorrectPwd,
+                buttons : [{
+                    text: 'OK',
+                    bold: true,
+                }]
+            }).open();
+        }
+
         if (canRequestClose)
             buttons.push({
                 text: _t.closeButtonText,
@@ -143,9 +157,9 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
             });
         f7.dialog.create({
             title: _t.advDRMOptions,
-            text: _t.txtProtected,
+            text: _t.textOpenFile,
-            content:
+            content: Device.ios ?
-                '<div class="input-field"><input type="password" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>',
+            '<div class="input-field"><input type="password" class="modal-text-input" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>' : '<div class="input-field"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="password" name="modal-password" id="modal-password" placeholder=' + _t.advDRMPassword + '></div></div></div></li></ul></div></div>',
             buttons: buttons,
             cssClass: 'dlg-adv-options'
         }).open();

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

@@ -19,11 +19,6 @@ const Settings = props => {
         }
     });
 
-    const onviewclosed = () => {
-        if ( props.onclosed )
-            props.onclosed();
-    };
-
     const closeModal = () => {
         if (Device.phone) {
             f7.sheet.close('.settings-popup');
@@ -46,15 +41,14 @@ const Settings = props => {
     };
 
     const onPrint = () => {
+        closeModal();
         setTimeout(() => {
             Common.EditorApi.get().asc_Print();
-        }, 1);
+        }, 400);
-        closeModal();
     };
 
     const showHelp = () => {
         let url = __HELP_URL__;
-        // let url = 'https://helpcenter.onlyoffice.com';
 
         if (url.charAt(url.length-1) !== '/') {
             url += '/';
@@ -68,17 +62,21 @@ const Settings = props => {
         }
 
         closeModal();
-        window.open(url, "_blank");
+        setTimeout(() => {
+            window.open(url, "_blank");
+        }, 400);
     };
 
     const onOrthographyCheck = () => {
         closeModal();
-        Common.EditorApi.get().asc_pluginRun("asc.{B631E142-E40B-4B4C-90B9-2D00222A286E}", 0);
+        setTimeout(() => {
+            Common.EditorApi.get().asc_pluginRun("asc.{B631E142-E40B-4B4C-90B9-2D00222A286E}", 0);
+        }, 400);
     };
 
     return <SettingsView usePopover={!Device.phone}
                          openOptions={props.openOptions}
-                         onclosed={onviewclosed}
+                         onclosed={props.onclosed}
                          onReaderMode={onReaderMode}
                          onPrint={onPrint}
                          showHelp={showHelp}

apps/documenteditor/mobile/src/index_dev.html

@@ -33,6 +33,18 @@
             // Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
             navigator.__defineGetter__('platform', () => 'Win32Debug');
 
+        if ( !isAndroid ) {
+            const ua = navigator.userAgent;
+            const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
+            const iPhone = !iPad && ua.match(/(iPhone\sOS|iOS)\s([\d_]+)/);
+
+            if ( !iPad && !iPhone ) {
+                Object.defineProperty(navigator, 'userAgent', {
+                    get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
+                });
+            }
+        }
+
         const getUrlParams = () => {
             let e,
                 a = /\+/g,  // Regex for replacing addition symbol with a space

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

@@ -26,6 +26,16 @@
         height: 22px;
         .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
       }
+      &.icon-prev {
+        width: 20px;
+        height: 20px;
+        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+      }
+      &.icon-next {
+          width: 20px;
+          height: 20px;
+          .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+      }
       &.icon-expand-down {
         width: 22px;
         height: 22px;

apps/documenteditor/mobile/src/page/main.jsx

@@ -129,7 +129,7 @@ class MainPage extends Component {
               }
               {
                   !this.state.settingsVisible ? null :
-                      <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                      <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
               }
               {
                   !this.state.collaborationVisible ? null :

apps/documenteditor/mobile/src/store/appOptions.js

@@ -27,7 +27,12 @@ export class storeAppOptions {
     }
 
     isEdit = false;
+
     canViewComments = false;
+    changeCanViewComments(value) {
+        this.canViewComments = value;
+    }
+
     canReview = false;
     canViewReview = false;
 
@@ -80,7 +85,7 @@ export class storeAppOptions {
         this.canBack = this.canBackToFolder === true;
         this.canPlugins = false;
     }
-    setPermissionOptions (document, licType, params, permissions) {
+    setPermissionOptions (document, licType, params, permissions, isSupportEditFeature) {
         this.review = (permissions.review === undefined) ? (permissions.edit !== false) : permissions.review;
         this.canAnalytics = params.asc_getIsAnalyticsEnable();
         this.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
@@ -92,7 +97,7 @@ export class storeAppOptions {
         this.canEdit = (permissions.edit !== false || permissions.review === true) && // can edit or review
             (this.config.canRequestEditRights || this.config.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined
             (!this.isReviewOnly || this.canLicense) && // if isReviewOnly==true -> canLicense must be true
-            true/*isSupportEditFeature*/;
+            isSupportEditFeature;
         this.isEdit = this.canLicense && this.canEdit && this.config.mode !== 'view';
         this.canReview = this.canLicense && this.isEdit && (permissions.review===true);
         this.canUseHistory = this.canLicense && !this.isLightVersion && this.config.canUseHistory && this.canCoAuthoring && !this.isDesktopApp;

apps/documenteditor/mobile/src/store/applicationSettings.js

@@ -1,4 +1,5 @@
 import {makeObservable, action, observable} from 'mobx';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
 
 export class storeApplicationSettings {
     constructor() {
@@ -24,8 +25,8 @@ export class storeApplicationSettings {
     isSpellChecking = true;
     isNonprintingCharacters = false;
     isHiddenTableBorders = false;
-    isComments = true;
+    isComments = false;
-    isResolvedComments = true;
+    isResolvedComments = false;
     macrosMode = 0;
 
     changeUnitMeasurement(value) {

apps/documenteditor/mobile/src/store/textSettings.js

@@ -74,6 +74,11 @@ export class storeTextSettings {
                 type        : font.asc_getFontType()
             });
         }
+
+        array.sort(function(a, b) {
+            return (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1;
+        });
+
         this.fontsArray = array;
     }
     resetFontName (font) {

apps/documenteditor/mobile/src/view/Toolbar.jsx

@@ -4,14 +4,15 @@ import { Device } from '../../../../common/mobile/utils/device';
 import EditorUIController from '../lib/patch'
 
 const ToolbarView = props => {
-    const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls;
+    const isDisconnected = props.isDisconnected;
+    const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls || isDisconnected;
     return (
         <Fragment>
             <NavLeft>
                 {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
                 {Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
-                    disabledUndo: !props.isCanUndo,
+                    disabledUndo: !props.isCanUndo || isDisconnected,
-                    disabledRedo: !props.isCanRedo,
+                    disabledRedo: !props.isCanRedo || isDisconnected,
                     onUndoClick: props.onUndo,
                     onRedoClick: props.onRedo
                 })}
@@ -24,6 +25,9 @@ const ToolbarView = props => {
                     onUndoClick: props.onUndo,
                     onRedoClick: props.onRedo
                 })}
+                {props.showEditDocument &&
+                    <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
+                }
                 {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
                         disabled: disableEditBtn || props.disabledControls,
                         onEditClick: e => props.openOptions('edit'),

apps/documenteditor/mobile/src/view/add/Add.jsx

@@ -76,30 +76,36 @@ const AddLayoutContent = ({ tabs }) => {
     )
 };
 
-const AddTabs = props => {
+const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPanels, style, inPopover}) => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
-    const showPanels = props.showPanels;
     const tabs = [];
-    if (!showPanels) {
+    const options = storeFocusObjects.settings;
+    if (!showPanels && options.indexOf('text') > -1) {
         tabs.push({
             caption: _t.textTable,
             id: 'add-table',
             icon: 'icon-add-table',
             component: <AddTableController/>
         });
+    }
+    if(!showPanels) {
         tabs.push({
             caption: _t.textShape,
             id: 'add-shape',
             icon: 'icon-add-shape',
             component: <AddShapeController/>
         });
+    }
+    if(!showPanels) {
         tabs.push({
             caption: _t.textImage,
             id: 'add-image',
             icon: 'icon-add-image',
             component: <AddImageController/>
         });
+    }
+    if(!showPanels) {
         tabs.push({
             caption: _t.textOther,
             id: 'add-other',
@@ -115,14 +121,14 @@ const AddTabs = props => {
         });
     }
     return (
-        <View style={props.style} stackPages={true} routes={routes}>
+        <View style={style} stackPages={true} routes={routes}>
             <Page pageContent={false}>
-                <AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
+                <AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
                 <AddLayoutContent tabs={tabs} />
             </Page>
         </View>
     )
-};
+}));
 
 class AddView extends Component {
     constructor(props) {

apps/documenteditor/mobile/src/view/add/AddImage.jsx

@@ -11,7 +11,7 @@ const PageLinkSettings = props => {
         <Page>
             <Navbar title={_t.textLinkSettings} backLink={_t.textBack}></Navbar>
             <BlockTitle>{_t.textAddress}</BlockTitle>
-            <List>
+            <List className='inputs-list'>
                 <ListInput
                     type='text'
                     placeholder={_t.textImageURL}

apps/documenteditor/mobile/src/view/add/AddOther.jsx

@@ -153,46 +153,55 @@ const PageFootnote = props => {
 const AddOther = props => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
+
+    const storeFocusObjects = props.storeFocusObjects;
+    let isShape = storeFocusObjects.settings.indexOf('shape') > -1,
+        isText = storeFocusObjects.settings.indexOf('text') > -1,
+        isChart = storeFocusObjects.settings.indexOf('chart') > -1;
+
     return (
         <List>
-            <ListItem title={_t.textComment} onClick={() => {
+            {isText &&<ListItem title={_t.textComment} onClick={() => {
                 props.closeModal();
                 Common.Notifications.trigger('addcomment');
             }}>
                 <Icon slot="media" icon="icon-insert-comment"></Icon>
-            </ListItem>
+            </ListItem>}
-            <ListItem title={_t.textLink} link={'/add-link/'} routeProps={{
+            {isText && <ListItem title={_t.textLink} link={'/add-link/'} routeProps={{
                 onInsertLink: props.onInsertLink,
                 getDisplayLinkText: props.getDisplayLinkText
             }}>
                 <Icon slot="media" icon="icon-link"></Icon>
-            </ListItem>
+            </ListItem>}
             <ListItem title={_t.textPageNumber} link={'/add-page-number/'} routeProps={{
                 onInsertPageNumber: props.onInsertPageNumber
             }}>
                 <Icon slot="media" icon="icon-pagenumber"></Icon>
             </ListItem>
-            <ListItem title={_t.textBreak} link={'/add-break/'} routeProps={{
+            {(isShape || isChart) ? null :
-                onPageBreak: props.onPageBreak,
+                [ <ListItem key='break' title={_t.textBreak} link={'/add-break/'} routeProps={{
-                onColumnBreak: props.onColumnBreak,
+                    onPageBreak: props.onPageBreak,
-                onInsertSectionBreak: props.onInsertSectionBreak
+                    onColumnBreak: props.onColumnBreak,
-            }}>
+                    onInsertSectionBreak: props.onInsertSectionBreak
-                <Icon slot="media" icon="icon-sectionbreak"></Icon>
+                }}>
-            </ListItem>
+                    <Icon slot="media" icon="icon-sectionbreak"></Icon>
-            <ListItem title={_t.textFootnote} link={'/add-footnote/'} routeProps={{
+                </ListItem>,
-                getFootnoteProps: props.getFootnoteProps,
+                
-                getFootnoteStartAt: props.getFootnoteStartAt,
+                <ListItem key='footnote' title={_t.textFootnote} link={'/add-footnote/'} routeProps={{
-                onFootnoteStartAt: props.onFootnoteStartAt,
+                    getFootnoteProps: props.getFootnoteProps,
-                onInsertFootnote: props.onInsertFootnote,
+                    getFootnoteStartAt: props.getFootnoteStartAt,
-                initFootnoteStartAt: props.initFootnoteStartAt
+                    onFootnoteStartAt: props.onFootnoteStartAt,
-            }}>
+                    onInsertFootnote: props.onInsertFootnote,
-                <Icon slot="media" icon="icon-footnote"></Icon>
+                    initFootnoteStartAt: props.initFootnoteStartAt
-            </ListItem>
+                }}>
+                    <Icon slot="media" icon="icon-footnote"></Icon>
+                </ListItem> ]
+            }
         </List>
     )
 };
 
-const AddOtherContainer = inject("storeComments")(observer(AddOther));
+const AddOtherContainer = inject("storeComments","storeFocusObjects")(observer(AddOther));
 
 export {AddOtherContainer as AddOther,
         PageNumber as PageAddNumber,

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -198,7 +198,7 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
             editors.length > 1 ?
                 <div className='tab-buttons tabbar'>
                     {editors.map((item, index) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
                 </div> :
                 <NavTitle>{ editors[0].caption }</NavTitle>
         }

apps/documenteditor/mobile/src/view/edit/EditChart.jsx

@@ -147,6 +147,7 @@ const PageStyle = props => {
     const types = storeChartSettings.types;
     const curType = chartProperties ? chartProperties.getType() : null;
     const chartStyles = storeChartSettings.chartStyles;
+    const isAndroid = Device.android;
     // console.log(chartStyles, curType);
     // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
 
@@ -184,6 +185,7 @@ const PageStyle = props => {
                     {chartStyles ? <Link key={"de-link-chart-style"}  tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
                     <Link key={"de-link-chart-fill"}  tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
                     <Link key={"de-link-chart-border"}  tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>

apps/documenteditor/mobile/src/view/edit/EditShape.jsx

@@ -144,6 +144,7 @@ const PageStyle = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeShapeSettings = props.storeShapeSettings;
     const shapeObject = props.storeFocusObjects.shapeObject;
+    const isAndroid = Device.android;
 
     let borderSize, borderType, transparent;
     if (shapeObject) {
@@ -177,9 +178,10 @@ const PageStyle = props => {
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className='tab-buttons tabbar'>
-                    <Link key={"de-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
+                    <Link key={"de-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
-                    <Link key={"de-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
+                    <Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
-                    <Link key={"de-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    <Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>

apps/documenteditor/mobile/src/view/edit/EditTable.jsx

@@ -466,6 +466,7 @@ const PageStyle = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
     const templates = storeTableSettings.styles;
+    const isAndroid = Device.android;
 
     const tableObject = props.storeFocusObjects.tableObject;
     if (!tableObject && Device.phone) {
@@ -477,9 +478,10 @@ const PageStyle = props => {
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className="tab-buttons tabbar">
-                    <Link key={"de-link-table-style"}  tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
+                    <Link key={"de-link-table-style"} tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
-                    <Link key={"de-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
+                    <Link key={"de-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
-                    <Link key={"de-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    <Link key={"de-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>

apps/presentationeditor/embed/index.html

@@ -273,11 +273,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -307,6 +302,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>

apps/presentationeditor/embed/index.html.deploy

@@ -267,11 +267,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->

apps/presentationeditor/embed/index_loader.html

@@ -322,11 +322,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -349,6 +344,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>

apps/presentationeditor/embed/index_loader.html.deploy

@@ -315,11 +315,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->

apps/presentationeditor/embed/js/ApplicationController.js

@@ -43,6 +43,8 @@ PE.ApplicationController = new(function(){
         ttOffset = [0, -10],
         labelDocName;
 
+    var LoadingDocument = -256;
+
     // Initialize analytics
     // -------------------------
 
@@ -156,19 +158,24 @@ PE.ApplicationController = new(function(){
             case Asc.c_oAscAsyncAction['Print']:
                 text = me.downloadTextText;
                 break;
+            case LoadingDocument:
+                text = me.textLoadingDocument + '           ';
+                break;
             default:
                 text = me.waitText;
                 break;
         }
 
         if (type == Asc.c_oAscAsyncActionType['BlockInteraction']) {
-            $('#id-loadmask .cmd-loader-title').html(text);
+            if (!me.loadMask)
-            showMask();
+                me.loadMask = new common.view.LoadMask();
+            me.loadMask.setTitle(text);
+            me.loadMask.show();
         }
     }
 
     function onLongActionEnd(){
-        hideMask();
+        me.loadMask && me.loadMask.hide();
     }
 
     function onDocMouseMoveStart() {
@@ -244,6 +251,7 @@ PE.ApplicationController = new(function(){
             onPlayStart();
         }
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -1);
         (zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
@@ -469,6 +477,7 @@ PE.ApplicationController = new(function(){
         else
             $parent.css('padding-right', _left_width - _right_width);
 
+        onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
         api.asc_setViewMode(true);
         api.asc_LoadDocument();
         api.Resize();
@@ -476,7 +485,7 @@ PE.ApplicationController = new(function(){
 
     function onOpenDocument(progress) {
         var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-        $('#loadmask-text').html(me.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
+        me.loadMask && me.loadMask.setTitle(me.textLoadingDocument + ': ' + common.utils.fixedDigits(Math.min(Math.round(proc*100), 100), 3, "  ") + '%');
     }
 
     var isplaymode;
@@ -505,17 +514,6 @@ PE.ApplicationController = new(function(){
             $('#page-number').val(number);
     }
 
-    function showMask() {
-        $('#id-loadmask').modal({
-            backdrop: 'static',
-            keyboard: false
-        });
-    }
-
-    function hideMask() {
-        $('#id-loadmask').modal('hide');
-    }
-
     function onError(id, level, errData) {
         if (id == Asc.c_oAscError.ID.LoadingScriptError) {
             $('#id-critical-error-title').text(me.criticalErrorTitle);
@@ -528,7 +526,8 @@ PE.ApplicationController = new(function(){
         }
 
         hidePreloader();
-
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+        
         var message;
 
         switch (id)

apps/presentationeditor/main/app.reporter.js

@@ -93,7 +93,7 @@ require([
     var api = new Asc.asc_docs_api({
         'id-view'  : 'editor_sdk',
         using      : 'reporter',
-        skin       : localStorage.getItem("ui-theme")
+        skin       : localStorage.getItem("ui-theme-id")
     });
 
     var setDocumentTitle = function(title) {

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

@@ -691,7 +691,7 @@ define([
                         break;
 
                     case LoadingDocument:
-                        title   = this.loadingDocumentTitleText;
+                        title   = this.loadingDocumentTitleText + '           ';
                         text    = this.loadingDocumentTextText;
                         break;
                     default:
@@ -981,7 +981,7 @@ define([
             onOpenDocument: function(progress) {
                 var elem = document.getElementById('loadmask-text');
                 var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-                proc = this.textLoadingDocument + ': ' + Math.min(Math.round(proc*100), 100) + '%';
+                proc = this.textLoadingDocument + ': ' + Common.Utils.String.fixedDigits(Math.min(Math.round(proc*100), 100), 3, "  ") + "%";
                 elem ? elem.innerHTML = proc : this.loadMask && this.loadMask.setTitle(proc);
             },
 

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

@@ -2887,6 +2887,7 @@ define([
                         properties.put_Width(originalImageSize.get_ImageWidth());
                         properties.put_Height(originalImageSize.get_ImageHeight());
                         properties.put_ResetCrop(true);
+                        properties.put_Rot(0);
                         me.api.ImgApply(properties);
                     }
 

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

@@ -300,6 +300,7 @@ define([
                 properties.put_Width(w);
                 properties.put_Height(h);
                 properties.put_ResetCrop(true);
+                properties.put_Rot(0);
                 this.api.ImgApply(properties);
                 this.fireEvent('editcomplete', this);
             }

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

@@ -133,6 +133,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                 el: $('#image-advanced-button-original-size')
             });
             this.btnOriginalSize.on('click', _.bind(function(btn, e) {
+                this.spnAngle.setValue(0);
                 this.spnWidth.setValue(this.sizeOriginal.width, true);
                 this.spnHeight.setValue(this.sizeOriginal.height, true);
                 this._nRatio = this.sizeOriginal.width/this.sizeOriginal.height;

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

@@ -104,7 +104,7 @@ define([
                 me.synchTooltip = undefined;
                 me.needShowSynchTip = false;
 
-                me.SchemeNames = [
+                me.SchemeNames = [me.txtScheme22,
                     me.txtScheme1, me.txtScheme2, me.txtScheme3, me.txtScheme4, me.txtScheme5,
                     me.txtScheme6, me.txtScheme7, me.txtScheme8, me.txtScheme9, me.txtScheme10,
                     me.txtScheme11, me.txtScheme12, me.txtScheme13, me.txtScheme14, me.txtScheme15,
@@ -1444,7 +1444,7 @@ define([
                             schemecolors.push(clr);
                         }
 
-                        if (index == 21) {
+                        if (index == 22) {
                             mnuColorSchema.addItem({
                                 caption: '--'
                             });
@@ -1454,7 +1454,7 @@ define([
                             template: itemTemplate,
                             cls: 'color-schemas-menu',
                             colors: schemecolors,
-                            caption: (index < 21) ? (me.SchemeNames[index] || name) : name,
+                            caption: (index < 22) ? (me.SchemeNames[index] || name) : name,
                             value: index,
                             checkable: true,
                             toggleGroup: 'menuSchema'
@@ -1815,7 +1815,8 @@ define([
             mniCapitalizeWords: 'Capitalize Each Word',
             mniToggleCase: 'tOGGLE cASE',
             strMenuNoFill: 'No Fill',
-            tipHighlightColor: 'Highlight color'
+            tipHighlightColor: 'Highlight color',
+            txtScheme22: 'New Office'
         }
     }()), PE.Views.Toolbar || {}));
 });

apps/presentationeditor/main/app_dev.reporter.js

@@ -94,7 +94,7 @@ require([
     var api = new Asc.asc_docs_api({
         'id-view'  : 'editor_sdk',
         using      : 'reporter',
-        skin       : localStorage.getItem("ui-theme")
+        skin       : localStorage.getItem("ui-theme-id")
     });
 
     var setDocumentTitle = function(title) {

apps/presentationeditor/main/locale/en.json

@@ -1988,6 +1988,7 @@
   "PE.Views.Toolbar.txtScheme2": "Grayscale",
   "PE.Views.Toolbar.txtScheme20": "Urban",
   "PE.Views.Toolbar.txtScheme21": "Verve",
+  "PE.Views.Toolbar.txtScheme22": "New Office",
   "PE.Views.Toolbar.txtScheme3": "Apex",
   "PE.Views.Toolbar.txtScheme4": "Aspect",
   "PE.Views.Toolbar.txtScheme5": "Civic",

apps/presentationeditor/main/resources/less/rightmenu.less

@@ -15,7 +15,7 @@
 }
 
 .combo-pattern-item {
-    .background-ximage('@{common-image-path}/right-panels/patterns.png', '@{common-image-path}/right-panels/patterns@2x.png', 112px);
+    .background-ximage-v2('right-panels/patterns.png', 112px);
 }
 
 .combo-dataview-menu {

apps/presentationeditor/mobile/locale/en.json

@@ -27,6 +27,9 @@
       "closeButtonText": "Close File",
       "advDRMOptions": "Protected File",
       "advDRMPassword": "Password",
+      "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
+      "textOpenFile": "Enter a password to open the file",
+      "txtIncorrectPwd": "Password is incorrect",
       "leavePageText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
       "titleLicenseExp": "License expired",
       "warnLicenseExp": "Your license has expired. Please update your license and refresh the page.",
@@ -129,7 +132,10 @@
   "ContextMenu": {
     "menuViewComment": "View Comment",
     "menuAddComment": "Add Comment",
+    "menuMerge": "Merge",
+    "menuSplit": "Split",
     "menuDelete": "Delete",
+    "menuDeleteTable": "Delete Table",
     "menuEdit": "Edit",
     "menuAddLink": "Add Link",
     "menuOpenLink": "Open Link",
@@ -137,11 +143,13 @@
     "menuCancel": "Cancel",
     "textCopyCutPasteActions": "Copy, Cut and Paste Actions",
     "errorCopyCutPaste": "Copy, cut and paste actions using the context menu will be performed within the current file only.",
-    "textDoNotShowAgain": "Don't show again"
+    "textDoNotShowAgain": "Don't show again",
+    "textColumns": "Columns",
+    "textRows": "Rows"
   },
   "Toolbar": {
     "dlgLeaveTitleText": "You leave the application",
-    "dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
+    "dlgLeaveMsgText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
     "leaveButtonText": "Leave this Page",
     "stayButtonText": "Stay on this Page"
   },
@@ -210,7 +218,7 @@
       "textOther": "Other",
       "textPictureFromLibrary": "Picture from Library",
       "textPictureFromURL": "Picture from URL",
-      "textLinkSettings": "LinkSettings",
+      "textLinkSettings": "Link Settings",
       "textBack": "Back",
       "textEmptyImgUrl": "You need to specify image URL.",
       "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",

apps/presentationeditor/mobile/src/controller/ContextMenu.jsx

@@ -111,12 +111,62 @@ class ContextMenu extends ContextMenuController {
                 text: 'OK',
                 onClick: () => {
                     const dontShow = $$('input[name="checkbox-show"]').prop('checked');
-                    if (dontShow) LocalStorage.setItem("de-hide-copy-cut-paste-warning", 1);
+                    if (dontShow) LocalStorage.setItem("pe-hide-copy-cut-paste-warning", 1);
                 }
             }]
         }).open();
     }
 
+    showSplitModal() {
+        const { t } = this.props;
+        const _t = t("ContextMenu", { returnObjects: true });
+        let picker;
+        const dialog = f7.dialog.create({
+            title: _t.menuSplit,
+            text: '',
+            content: `<div class="content-block">
+                        <div class="row">
+                            <div class="col-50">${_t.textColumns}</div>
+                            <div class="col-50">${_t.textRows}</div>
+                        </div>
+                        <div id="picker-split-size"></div>
+                    </div>`,
+            buttons: [
+                {
+                    text: _t.menuCancel
+                },
+                {
+                    text: 'OK',
+                    bold: true,
+                    onClick: function () {
+                        const size = picker.value;
+                        Common.EditorApi.get().SplitCell(parseInt(size[0]), parseInt(size[1]));
+                    }
+                }
+            ]
+        }).open();
+        dialog.on('opened', () => {
+            picker = f7.picker.create({
+                containerEl: document.getElementById('picker-split-size'),
+                cols: [
+                    {
+                        textAlign: 'center',
+                        width: '100%',
+                        values: [1,2,3,4,5,6,7,8,9,10]
+                    },
+                    {
+                        textAlign: 'center',
+                        width: '100%',
+                        values: [1,2,3,4,5,6,7,8,9,10]
+                    }
+                ],
+                toolbar: false,
+                rotateEffect: true,
+                value: [3, 3]
+            });
+        });
+    }
+
     openLink(url) {
         const api = Common.EditorApi.get();
         if (api.asc_getUrlType(url) > 0) {

apps/presentationeditor/mobile/src/controller/LongActions.jsx

@@ -39,11 +39,7 @@ const LongActionsController = () => {
             api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
             api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
 
-            Common.Notifications.off('preloader:endAction', (type, id) => {
+            Common.Notifications.off('preloader:endAction', onLongActionEnd);
-                if (stackLongActions.exist({id: id, type: type})) {
-                    onLongActionEnd(type, id);
-                }
-            });
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);
             Common.Notifications.off('preloader:close', closePreloader);
         })
@@ -55,21 +51,17 @@ const LongActionsController = () => {
         setLongActionView(action);
     };
 
-    const onLongActionEnd = (type, id) => {
+    const onLongActionEnd = (type, id, forceClose) => {
+        if (!stackLongActions.exist({id: id, type: type})) return;
+
         let action = {id: id, type: type};
         stackLongActions.pop(action);
 
         //this.updateWindowTitle(true);
 
-        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information}) || stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
 
-        if (action) {
+        if (action && !forceClose) {
-            setLongActionView(action)
-        }
-
-        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
-
-        if (action) {
             setLongActionView(action)
         } else {
             loadMask && loadMask.el && loadMask.el.classList.contains('modal-in') && f7.dialog.close(loadMask.el);

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -14,6 +14,7 @@ import LongActionsController from "./LongActions";
 import {LocalStorage} from "../../../../common/mobile/utils/LocalStorage";
 import About from '../../../../common/mobile/lib/view/About';
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
+import { Device } from '../../../../common/mobile/utils/device';
 
 @inject(
     "storeFocusObjects",
@@ -152,7 +153,7 @@ class MainController extends Component {
                 this.appOptions.canLicense      = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
 
                 const storeAppOptions = this.props.storeAppOptions;
-                storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions);
+                storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions, EditorUIController.isSupportEditFeature());
                 this.applyMode(storeAppOptions);
 
                 this.api.asc_LoadDocument();
@@ -292,10 +293,13 @@ class MainController extends Component {
     }
 
     bindEvents () {
+        $$(window).on('resize', () => {
+            this.api.Resize();
+        });
+
         this.api.asc_registerCallback('asc_onDocumentContentReady', this.onDocumentContentReady.bind(this));
         this.api.asc_registerCallback('asc_onDocumentUpdateVersion', this.onUpdateVersion.bind(this));
         this.api.asc_registerCallback('asc_onServerVersion', this.onServerVersion.bind(this));
-        this.api.asc_registerCallback('asc_onAdvancedOptions', this.onAdvancedOptions.bind(this));
         this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this));
         this.api.asc_registerCallback('asc_onPrintUrl', this.onPrintUrl.bind(this));
         this.api.asc_registerCallback('asc_onPrint', this.onPrint.bind(this));
@@ -305,6 +309,10 @@ class MainController extends Component {
 
         const storePresentationSettings = this.props.storePresentationSettings;
 
+        this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions) => {
+            this.onAdvancedOptions(type, advOptions);
+        });
+
         this.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
             storePresentationSettings.changeSizeIndex(width, height);
         });
@@ -585,12 +593,11 @@ class MainController extends Component {
 
         if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
             Common.Notifications.trigger('preloader:close');
-            Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+            Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument, true);
 
             const buttons = [{
                 text: 'OK',
                 bold: true,
-                close: false,
                 onClick: () => {
                     const password = document.getElementById('modal-password').value;
                     this.api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
@@ -600,6 +607,17 @@ class MainController extends Component {
                     }
                 }
             }];
+
+            if(this.isDRM) {
+                f7.dialog.create({
+                    text: _t.txtIncorrectPwd,
+                    buttons : [{
+                        text: 'OK',
+                        bold: true,
+                    }]
+                }).open();
+            }
+
             if (this.props.storeAppOptions.canRequestClose)
                 buttons.push({
                     text: _t.closeButtonText,
@@ -610,14 +628,13 @@ class MainController extends Component {
 
             f7.dialog.create({
                 title: _t.advDRMOptions,
-                text: (typeof advOptions === 'string' ? advOptions : _t.txtProtected),
+                text: _t.textOpenFile,
-                content:
+                content: Device.ios ?
-                    `<div class="input-field">
+                '<div class="input-field"><input type="password" class="modal-text-input" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>' : '<div class="input-field"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="password" name="modal-password" id="modal-password" placeholder=' + _t.advDRMPassword + '></div></div></div></li></ul></div></div>',
-                        <input type="password" name="modal-password" placeholder="${ _t.advDRMPassword }" class="modal-text-input">
-                    </div>`,
                 buttons: buttons,
                 cssClass: 'dlg-adv-options'
             }).open();
+            this.isDRM = true;
         }
     }
 

apps/presentationeditor/mobile/src/controller/Preview.jsx

@@ -3,6 +3,7 @@ import { inject } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import Preview from "../view/Preview";
+import ContextMenu from './ContextMenu';
 
 const PreviewController = props => {
     const { t } = useTranslation();
@@ -20,6 +21,7 @@ const PreviewController = props => {
             api.DemonstrationEndShowMessage(_t.textFinalMessage);
         };
 
+        ContextMenu.closeContextMenu();
         show();
         onDocumentReady();
 

apps/presentationeditor/mobile/src/controller/Search.jsx

@@ -4,6 +4,7 @@ import { SearchController, SearchView, SearchSettingsView } from '../../../../co
 import { f7 } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
+import { observer, inject } from "mobx-react";
 
 class SearchSettings extends SearchSettingsView {
     constructor(props) {
@@ -15,6 +16,8 @@ class SearchSettings extends SearchSettingsView {
         const show_popover = !Device.phone;
         const { t } = this.props;
         const _t = t("View.Settings", {returnObjects: true});
+        const storeAppOptions = this.props.storeAppOptions;
+        const isEdit = storeAppOptions.isEdit;
 
         const markup = (
                 <Page>
@@ -27,9 +30,14 @@ class SearchSettings extends SearchSettingsView {
                     </Navbar>
                     <List>
                         <ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
-                        <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
+                        {isEdit ?
-                        <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
+                            <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} 
-                            onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
+                                onClick={e => this.onFindReplaceClick('replace')} />
+                        : null}
+                        {isEdit ?
+                            <ListItem radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
+                                onClick={() => this.onFindReplaceClick('replace-all')}></ListItem>
+                        : null}
                     </List>
                     <List>
                         <ListItem title={_t.textCaseSensitive}>
@@ -97,6 +105,6 @@ const Search = withTranslation()(props => {
     return <PESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
 });
 
-const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
+const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings)));
 
 export {Search, SearchSettingsWithTranslation as SearchSettings}

apps/presentationeditor/mobile/src/controller/Toolbar.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { inject } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
 
-const ToolbarController = inject('storeAppOptions', 'users')(props => {
+const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
     const {t} = useTranslation();
     const _t = t("Toolbar", { returnObjects: true });
 
@@ -12,15 +12,15 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
     const isDisconnected = props.users.isDisconnected;
     const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments;
 
+    const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
+
     useEffect(() => {
         const onDocumentReady = () => {
             const api = Common.EditorApi.get();
             api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
             api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
             api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
-            api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
             api.asc_registerCallback('asc_onCountPages', onApiCountPages);
-            Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
             Common.Notifications.on('toolbar:activatecontrols', activateControls);
             Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.on('goback', goBack);
@@ -33,10 +33,15 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
             onDocumentReady();
         }
 
+        if (isDisconnected) {
+            f7.popover.close();
+            f7.sheet.close();
+            f7.popup.close();
+        }
+
         return () => {
             Common.Notifications.off('document:ready', onDocumentReady);
             Common.Notifications.off('setdoctitle', setDocTitle);
-            Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
             Common.Notifications.off('toolbar:activatecontrols', activateControls);
             Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.off('goback', goBack);
@@ -45,7 +50,6 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
             api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
             api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
             api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
-            api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
             api.asc_unregisterCallback('asc_onCountPages', onApiCountPages);
         }
     });
@@ -75,7 +79,7 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
                     {
                         text: _t.leaveButtonText,
                         onClick: function() {
-                            goBack();
+                            goBack(true);
                         }
                     },
                     {
@@ -85,7 +89,7 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
                 ]
             }).open();
         } else {
-            goBack();
+            goBack(true);
         }
     };
     const goBack = (current) => {
@@ -176,13 +180,8 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
         setDisabledControls(false);
     };
 
-    const onCoAuthoringDisconnect = (enableDownload) => {
+    const onEditDocument = () => {
-        deactivateEditControls(enableDownload);
+        Common.Gateway.requestEditRights();
-        setCanUndo(false);
-        setCanRedo(false);
-        f7.popover.close();
-        f7.sheet.close();
-        f7.popup.close();
     };
 
     return (
@@ -202,8 +201,11 @@ const ToolbarController = inject('storeAppOptions', 'users')(props => {
                      disabledEditControls={disabledEditControls}
                      disabledSettings={disabledSettings}
                      displayCollaboration={displayCollaboration}
+                     showEditDocument={showEditDocument}
+                     onEditDocument={onEditDocument}
+                     isDisconnected={isDisconnected}
         />
     )
-});
+}));
 
 export {ToolbarController as Toolbar};

apps/presentationeditor/mobile/src/controller/add/AddLink.jsx

@@ -64,7 +64,7 @@ class AddLinkController extends Component {
                     break;
                 case 1:
                     url = url + "showjump?jump=previousslide";
-                    slidetip = _t.textPrevSlide;
+                    slidetip = _t.textPreviousSlide;
                     break;
                 case 2:
                     url = url + "showjump?jump=firstslide";

apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx

@@ -79,6 +79,7 @@ class EditImageController extends Component {
         properties.put_Width(imgsize.get_ImageWidth());
         properties.put_Height(imgsize.get_ImageHeight());
         properties.put_ResetCrop(true);
+        properties.put_Rot(0);
         api.ImgApply(properties);
     }
 

apps/presentationeditor/mobile/src/controller/edit/EditText.jsx

@@ -134,11 +134,11 @@ class EditTextController extends Component {
         let size = curSize;
 
         if (isDecrement) {
-            typeof size === 'undefined' ? api.FontSizeOut() : size = Math.max(1, --size);
+            typeof size === 'undefined' || size == '' ? api.FontSizeOut() : size = Math.max(1, --size);
         } else {
-            typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(300, ++size);
+            typeof size === 'undefined' || size == '' ? api.FontSizeIn() : size = Math.min(300, ++size);
         }
-        if (typeof size !== 'undefined') {
+        if (typeof size !== 'undefined' || size == '') {
             api.put_TextPrFontSize(size);
         }
     };

apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -1,10 +1,12 @@
 import React, { Component } from "react";
 import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
+import {observer, inject} from "mobx-react";
 
 class ApplicationSettingsController extends Component {
     constructor(props) {
         super(props);
+        this.props.storeApplicationSettings.changeUnitMeasurement(Common.Utils.Metric.getCurrentMetric());
     }
 
     setUnitMeasurement(value) {
@@ -37,4 +39,4 @@ class ApplicationSettingsController extends Component {
 }
 
 
-export default ApplicationSettingsController;
+export default inject("storeApplicationSettings")(observer(ApplicationSettingsController));

apps/presentationeditor/mobile/src/index_dev.html

@@ -33,6 +33,18 @@
             // Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
             navigator.__defineGetter__('platform', () => 'Win32Debug');
 
+        if ( !isAndroid ) {
+            const ua = navigator.userAgent;
+            const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
+            const iPhone = !iPad && ua.match(/(iPhone\sOS|iOS)\s([\d_]+)/);
+
+            if ( !iPad && !iPhone ) {
+                Object.defineProperty(navigator, 'userAgent', {
+                    get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
+                });
+            }
+        }
+
         const getUrlParams = () => {
             let e,
                 a = /\+/g,  // Regex for replacing addition symbol with a space