Enable mobile editing

For Bug 59971

.gitignore

@@ -3,6 +3,7 @@ Thumbs.db
 .DS_Store
 /deploy
 build/node_modules
+build/plugins/**/node_modules/
 build/sprites/node_modules/
 vendor/framework7-react/
 apps/documenteditor/embed/resources/less/node_modules

apps/api/documents/api.js

@@ -56,6 +56,7 @@
                          edit: ["Group1", ""] // current user can edit comments made by users from Group1 and users without a group.
                          remove: ["Group1", ""] // current user can remove comments made by users from Group1 and users without a group.
                     },
+                    userInfoGroups: ["Group1", ""], // show tooltips/cursors/info in header only for users in userInfoGroups groups. [""] - means users without group, [] - don't show any users, null/undefined/"" - show all users
                     protect: <can protect document> // default = true. show/hide protect tab or protect buttons
                 }
             },
@@ -114,6 +115,7 @@
                         address: 'New-York, 125f-25',
                         mail: 'support@gmail.com',
                         www: 'www.superpuper.com',
+                        phone: '1234567890',
                         info: 'Some info',
                         logo: '',
                         logoDark: '', // logo for dark theme
@@ -161,8 +163,11 @@
                             collaboration:  false / true // collaboration tab
                             protect:  false / true, // protect tab
                             plugins:  false / true // plugins tab
+                            view: {
+                                navigation: false/true // navigation button in de
+                            } / false / true, // view tab
                             save: false/true // save button on toolbar in 
-                        },
+                        } / false / true, // use instead of customization.toolbar,
                         header: {
                             users: false/true // users list button
                             save: false/true // save button
@@ -176,7 +181,7 @@
                             textLang: false/true // text language button in de/pe
                             docLang: false/true // document language button in de/pe
                             actionStatus: false/true // status of operation
-                        }
+                        } / false / true, // use instead of customization.statusBar
                     },
                     features: { // disable feature
                         spellcheck: {
@@ -191,8 +196,8 @@
                     leftMenu: true, // must be deprecated. use layout.leftMenu instead
                     rightMenu: true, // must be deprecated. use layout.rightMenu instead
                     hideRightMenu: false, // hide or show right panel on first loading
-                    toolbar: true,
-                    statusBar: true,
+                    toolbar: true, // must be deprecated. use layout.toolbar instead
+                    statusBar: true, // must be deprecated. use layout.statusBar instead
                     autosave: true,
                     forcesave: false,
                     commentAuthorOnly: false, // must be deprecated. use permissions.editCommentAuthorOnly and permissions.deleteCommentAuthorOnly instead
@@ -213,10 +218,12 @@
                     hideRulers: false // hide or show rulers on first loading (presentation or document editor)
                     hideNotes: false // hide or show notes panel on first loading (presentation editor)
                     uiTheme: 'theme-dark' // set interface theme: id or default-dark/default-light
+                    integrationMode: "embed" // turn off scroll to frame
                 },
                  coEditing: {
-                     mode: 'fast', // <coauthoring mode>, 'fast' or 'strict'. if 'fast' and 'customization.autosave'=false -> set 'customization.autosave'=true
-                     change: true, // can change co-authoring mode
+                     mode: 'fast', // <coauthoring mode>, 'fast' or 'strict'. if 'fast' and 'customization.autosave'=false -> set 'customization.autosave'=true. 'fast' - default for editor
+                     // for viewer: 'strict' is default, offline viewer; 'fast' - live viewer, show changes from other users
+                     change: true, // can change co-authoring mode. true - default for editor, false - default for viewer
                  },
                 plugins: {
                     autostart: ['asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}'],
@@ -368,36 +375,6 @@
             }
         };
 
-        var _callLocalStorage = function(data) {
-            if (data.cmd == 'get') {
-                if (data.keys && data.keys.length) {
-                    var af = data.keys.split(','), re = af[0];
-                    for (i = 0; ++i < af.length;)
-                        re += '|' + af[i];
-
-                    re = new RegExp(re); k = {};
-                    for (i in localStorage)
-                        if (re.test(i)) k[i] = localStorage[i];
-                } else {
-                    k = localStorage;
-                }
-
-                _sendCommand({
-                    command: 'internalCommand',
-                    data: {
-                        type: 'localstorage',
-                        keys: k
-                    }
-                });
-            } else
-            if (data.cmd == 'set') {
-                var k = data.keys, i;
-                for (i in k) {
-                    localStorage.setItem(i, k[i]);
-                }
-            }
-        };
-
         var _onMessage = function(msg) {
             if ( msg ) {
                 if ( msg.type === "onExternalPluginMessage" ) {
@@ -412,8 +389,6 @@
 
                     if (msg.event === 'onRequestEditRights' && !handler) {
                         _applyEditRights(false, 'handler isn\'t defined');
-                    } else if (msg.event === 'onInternalMessage' && msg.data && msg.data.type == 'localstorage') {
-                        _callLocalStorage(msg.data.data);
                     } else {
                         if (msg.event === 'onAppReady') {
                             _onAppReady();
@@ -516,6 +491,9 @@
 
         if (target && _checkConfigParams()) {
             iframe = createIframe(_config);
+            if (_config.editorConfig.customization && _config.editorConfig.customization.integrationMode==='embed')
+                window.AscEmbed && window.AscEmbed.initWorker(iframe);
+
             if (iframe.src) {
                 var pathArray = iframe.src.split('/');
                 this.frameOrigin = pathArray[0] + '//' + pathArray[2];
@@ -929,18 +907,10 @@
             path_type;
 
         path += app + "/";
-        if (config.document && typeof config.document.fileType === 'string' && config.document.fileType.toLowerCase() === 'oform') {
-            var canFillForms =  !config.document.permissions
-                                ? true : (config.document.permissions.fillForms===undefined)
-                                ? (config.document.permissions.edit !== false) : config.document.permissions.fillForms;
-            path_type = (config.type === "mobile" || isSafari_mobile)
-                        ? "mobile" : (config.type === "embedded" || !canFillForms || config.editorConfig.mode === 'view')
-                        ? "embed" : "forms";
-        } else {
         path_type = (config.type === "mobile" || isSafari_mobile)
                     ? "mobile" : (config.type === "embedded")
-                        ? "embed" : "main";
-        }
+                    ? "embed" : (config.document && typeof config.document.fileType === 'string' && config.document.fileType.toLowerCase() === 'oform')
+                    ? "forms" : "main";
 
         path += path_type;
         var index = "/index.html";
@@ -949,7 +919,7 @@
             if ( typeof(customization) == 'object' && ( customization.toolbarNoTabs ||
                                                         (config.editorConfig.targetApp!=='desktop') && (customization.loaderName || customization.loaderLogo))) {
                 index = "/index_loader.html";
-            } else if (config.editorConfig.mode === 'editdiagram' || config.editorConfig.mode === 'editmerge')
+            } else if (config.editorConfig.mode === 'editdiagram' || config.editorConfig.mode === 'editmerge' || config.editorConfig.mode === 'editole')
                 index = "/index_internal.html";
 
         }
@@ -968,9 +938,11 @@
                 if (config.editorConfig.customization.loaderName !== 'none') params += "&customer=" + encodeURIComponent(config.editorConfig.customization.loaderName);
             } else
                 params += "&customer={{APP_CUSTOMER_NAME}}";
-            if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.loaderLogo) {
-                if (config.editorConfig.customization.loaderLogo !== '') params += "&logo=" + encodeURIComponent(config.editorConfig.customization.loaderLogo);
-            } else if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.logo) {
+            if (typeof(config.editorConfig.customization) == 'object') {
+                if ( config.editorConfig.customization.loaderLogo && config.editorConfig.customization.loaderLogo !== '') {
+                    params += "&logo=" + encodeURIComponent(config.editorConfig.customization.loaderLogo);
+                }
+                if ( config.editorConfig.customization.logo ) {
                     if (config.type=='embedded' && (config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageEmbedded))
                         params += "&headerlogo=" + encodeURIComponent(config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageEmbedded);
                     else if (config.type!='embedded' && (config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageDark)) {
@@ -979,8 +951,9 @@
                     }
                 }
             }
+        }
 
-        if (config.editorConfig && (config.editorConfig.mode == 'editdiagram' || config.editorConfig.mode == 'editmerge'))
+        if (config.editorConfig && (config.editorConfig.mode == 'editdiagram' || config.editorConfig.mode == 'editmerge' || config.editorConfig.mode == 'editole'))
             params += "&internal=true";
 
         if (config.frameEditorId)
@@ -995,8 +968,6 @@
 
         if (config.editorConfig && config.editorConfig.customization && (config.editorConfig.customization.toolbar===false))
             params += "&toolbar=false";
-        else if (config.document && config.document.permissions && (config.document.permissions.edit === false && config.document.permissions.fillForms ))
-            params += "&toolbar=true";
 
         if (config.parentOrigin)
             params += "&parentOrigin=" + config.parentOrigin;
@@ -1016,10 +987,11 @@
         iframe.align = "top";
         iframe.frameBorder = 0;
         iframe.name = "frameEditor";
+        config.title && (typeof config.title === 'string') && (iframe.title = config.title);
         iframe.allowFullscreen = true;
         iframe.setAttribute("allowfullscreen",""); // for IE11
         iframe.setAttribute("onmousewheel",""); // for Safari on Mac
-        iframe.setAttribute("allow", "autoplay; camera; microphone; display-capture");
+        iframe.setAttribute("allow", "autoplay; camera; microphone; display-capture; clipboard-write;");
 
 		if (config.type == "mobile")
 		{

apps/api/wopi/editor-wopi.ejs

@@ -262,7 +262,7 @@ div {
 			var config = {
 				"width": "100%",
 				"height": "100%",
-				"type": "desktop",
+				"type": queryParams.embed==="1" ? "embedded" : "desktop",
 				"documentType": documentType,
 				"token": token,
 				"document": {
@@ -302,7 +302,7 @@ div {
                         "uiTheme": queryParams.thm==="1" ? "default-light" : (queryParams.thm==="2" ? "default-dark" : undefined)
 					},
                     "coEditing": {
-                        "mode": "fast",
+                        "mode": userAuth.mode !== "view" ? "fast" : "strict",
                         "change": false
                     },
                     "wopi": {

apps/common/embed/lib/controller/modals.js

@@ -57,6 +57,16 @@
 
             $dlgShare.find('#btn-copyshort').on('click', copytext.bind(this, $dlgShare.find('#id-short-url')));
             $dlgShare.find('.share-buttons > span').on('click', function(e){
+                if ( window.config ) {
+                    const key = $(e.target).attr('data-name');
+                    const btn = config.btnsShare[key];
+                    if ( btn && btn.getUrl ) {
+                        window.open(btn.getUrl(appConfig.shareUrl, appConfig.docTitle), btn.target || '',
+                            btn.features || 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
+                        return;
+                    }
+                }
+
                 var _url;
                 switch ($(e.target).attr('data-name')) {
                     case 'facebook':

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

@@ -36,6 +36,11 @@
     !common.utils && (common.utils = {});
 
     common.utils = new(function(){
+        var userAgent = navigator.userAgent.toLowerCase(),
+            check = function(regex){
+                return regex.test(userAgent);
+            },
+            isMac = check(/macintosh|mac os x/);
         return {
             openLink: function(url) {
                 if (url) {
@@ -100,7 +105,9 @@
                             return prop;
                     }
                 }
-            }
+            },
+
+            isMac : isMac
         };
     })();
 }();

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

@@ -0,0 +1,77 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * 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
+ *
+ */
+
+/**
+ *  SearchBar.js
+ *
+ *  Created by Julia Svinareva on 27.04.2022
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+!window.common && (window.common = {});
+!common.view && (common.view = {});
+common.view.SearchBar = new(function() {
+    var tpl = '<div class="asc-window search-window" style="display: none;">' +
+                    '<div class="body">{body}</div>' +
+                '</div>';
+    var tplBody = '<input type="text" id="search-bar-text" placeholder="{textFind}" autocomplete="off">' +
+                '<div class="tools">' +
+                    '<button id="search-bar-back" class="svg-icon search-arrow-up"></button>' +
+                    '<button id="search-bar-next" class="svg-icon search-arrow-down"></button>' +
+                    '<button id="search-bar-close" class="svg-icon search-close"></button>' +
+                '</div>';
+
+    return {
+        create: function(parent) {
+            !parent && (parent = 'body');
+
+            var _$dlg = $(tpl
+                .replace(/\{body}/, tplBody)
+                .replace(/\{textFind}/, this.textFind))
+                    .appendTo(parent)
+                    .attr('id', 'dlg-search');
+
+            return _$dlg;
+        },
+
+        disableNavButtons: function (resultNumber, allResults) {
+            var disable = $('#search-bar-text').val() === '' || !allResults;
+            $('#search-bar-back').attr({disabled: disable});
+            $('#search-bar-next').attr({disabled: disable});
+        },
+
+        textFind: 'Find'
+
+    };
+})();

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

@@ -73,6 +73,20 @@ common.view.modals = new(function() {
 
             var _$dlg;
             if (name == 'share') {
+                if ( window.config && window.config.btnsShare ) {
+                    let _btns = [];
+                    for (const key of Object.keys(config.btnsShare))
+                        _btns.push(`<span class="svg big-${key}" data-name="${key}"></span>`);
+
+                    if ( _btns ) {
+                        let $sharebox = $(_tplbody_share);
+                        $sharebox.find('.autotest').prevAll().remove();
+                        $sharebox.eq(1).prepend(_btns.join(''));
+
+                        _tplbody_share = $("<div>").append($sharebox).html();
+                    }
+                }
+
                 _$dlg = $(tplDialog
                             .replace(/\{title}/, this.txtShare)
                             .replace(/\{body}/, _tplbody_share)

apps/common/embed/resources/img/icon-menu-sprite.svg

@@ -1,152 +1,220 @@
-<svg width="380" height="40" viewBox="0 0 380 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="icon-menu-sprite Embedded Viewer">
-<g id="view-settings">
-<path id="Vector" d="M17 26H3V27H17V26Z" fill="white"/>
-<path id="Vector_2" d="M17 30H3V31H17V30Z" fill="white"/>
-<path id="Vector_3" d="M17 34H3V35H17V34Z" fill="white"/>
-</g>
-<g id="download">
-<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M31 22H30V33.2929L25.3536 28.6464L24.6465 29.3536L30.1465 34.8536L30.5 35.2071L30.8536 34.8536L36.3536 29.3536L35.6465 28.6464L31 33.2929V22Z" fill="white"/>
-<rect id="Rectangle 88" x="24" y="36" width="13" height="1" fill="white"/>
-</g>
-<g id="share">
-<path id="share_2" d="M56 25C56 26.1046 55.1046 27 54 27C53.4663 27 52.9815 26.791 52.6229 26.4503L47.9076 29.3974C47.9676 29.5875 48 29.79 48 30C48 30.21 47.9676 30.4125 47.9076 30.6026L52.6229 33.5497C52.9815 33.209 53.4663 33 54 33C55.1046 33 56 33.8954 56 35C56 36.1046 55.1046 37 54 37C52.8954 37 52 36.1046 52 35C52 34.79 52.0324 34.5875 52.0924 34.3974L47.3771 31.4503C47.0185 31.791 46.5337 32 46 32C44.8954 32 44 31.1046 44 30C44 28.8954 44.8954 28 46 28C46.5337 28 47.0185 28.209 47.3771 28.5497L52.0924 25.6026C52.0324 25.4125 52 25.21 52 25C52 23.8954 52.8954 23 54 23C55.1046 23 56 23.8954 56 25Z" fill="white"/>
-</g>
-<g id="embed ">
-<g id="embed _2">
-<path d="M67.8536 25.3536L67.1465 24.6465L62.293 29.5L67.1465 34.3536L67.8536 33.6465L63.7072 29.5L67.8536 25.3536Z" fill="white"/>
-<path d="M72.1465 25.3536L72.8536 24.6465L77.7072 29.5L72.8536 34.3536L72.1465 33.6465L76.293 29.5L72.1465 25.3536Z" fill="white"/>
-</g>
-</g>
-<g id="full-screen">
-<path id="Rectangle 81 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M93 27H87V33H93V27ZM86 26V34H94V26H86Z" fill="white"/>
-<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M86 23H83V26H84V24H86V23Z" fill="white"/>
-<path id="Subtract_2" fill-rule="evenodd" clip-rule="evenodd" d="M97 26L97 23L94 23L94 24L96 24L96 26L97 26Z" fill="white"/>
-<path id="Subtract_3" fill-rule="evenodd" clip-rule="evenodd" d="M94 37L97 37L97 34L96 34L96 36L94 36L94 37Z" fill="white"/>
-<path id="Subtract_4" fill-rule="evenodd" clip-rule="evenodd" d="M83 34L83 37L86 37L86 36L84 36L84 34L83 34Z" fill="white"/>
-</g>
-<g id="zoom-in">
-<path id="Union_2" fill-rule="evenodd" clip-rule="evenodd" d="M111 25H110V30H105V31H110V36H111V31H116V30H111V25Z" fill="white"/>
-</g>
-<g id="zoom-out">
-<rect id="Rectangle 44.8" x="135" y="30" width="1" height="10" transform="rotate(90 135 30)" fill="white"/>
-</g>
-<g id="scroll-to-first-sheet">
-<path id="Vector 13 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M155 25L147 30L155 35V25Z" fill="white"/>
-<path id="Rectangle 225" d="M145 25H146V35H145V25Z" fill="white"/>
-</g>
-<g id="scroll-to-last-sheet">
-<path id="Vector 13 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M165 35L173 30L165 25V35Z" fill="white"/>
-<path id="Rectangle 225 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M174 35H175V25H174V35Z" fill="white"/>
-</g>
-<g id="play">
-<path id="Vector 8 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M185 23L198 30L185 37V23Z" fill="white"/>
-</g>
-<g id="pause">
-<path id="Rectangle 81 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M205 25V35H209V25H205Z" fill="white"/>
-<path id="Rectangle 81.1 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M211 25V35H215V25H211Z" fill="white"/>
-</g>
-<g id=" print">
-<path id="Union_3" fill-rule="evenodd" clip-rule="evenodd" d="M226 24H234V26H226V24ZM225 26V24C225 23.4477 225.448 23 226 23H234C234.552 23 235 23.4477 235 24V26H237C237.552 26 238 26.4477 238 27V33C238 33.5523 237.552 34 237 34H235V36C235 36.5523 234.552 37 234 37H226C225.448 37 225 36.5523 225 36V34H223C222.448 34 222 33.5523 222 33V27C222 26.4477 222.448 26 223 26H225ZM225 33V31C225 30.4477 225.448 30 226 30H234C234.552 30 235 30.4477 235 31V33H237V27H234H226H223V33H225ZM225 28H224V29H225V28ZM234 31H226V36H234V31ZM227 32H233V33H227V32ZM233 34H227V35H233V34Z" fill="white"/>
-</g>
-<g id="clear-style">
-<path id="Union_4" fill-rule="evenodd" clip-rule="evenodd" d="M253.268 24.5608C252.291 23.5845 250.708 23.5845 249.732 24.5608L243.561 30.7324C242.584 31.7087 242.584 33.2916 243.561 34.268L245.146 35.8537L245.293 36.0002L245.5 36.0002H249.5L249.707 36.0002L255 36.0002V35.0002H250.707L255.439 30.268C256.416 29.2916 256.416 27.7087 255.439 26.7324L253.268 24.5608ZM249.293 35.0002L252.793 31.5002L248.5 27.2073L244.268 31.4395C243.682 32.0253 243.682 32.9751 244.268 33.5609L245.707 35.0002L249.293 35.0002ZM249.207 26.5002L253.5 30.7931L254.732 29.5608C255.318 28.9751 255.318 28.0253 254.732 27.4395L252.561 25.268C251.975 24.6822 251.025 24.6822 250.439 25.268L249.207 26.5002Z" fill="white"/>
-</g>
-<g id="view-settings_2">
-<path id="Vector_4" d="M17 6H3V7H17V6Z" fill="black"/>
-<path id="Vector_5" d="M17 10H3V11H17V10Z" fill="black"/>
-<path id="Vector_6" d="M17 14H3V15H17V14Z" fill="black"/>
-</g>
-<g id="download_2">
-<path id="Union_5" fill-rule="evenodd" clip-rule="evenodd" d="M31 2H30V13.2929L25.3536 8.64645L24.6465 9.35355L30.1465 14.8536L30.5 15.2071L30.8536 14.8536L36.3536 9.35355L35.6465 8.64645L31 13.2929V2Z" fill="black"/>
-<rect id="Rectangle 88_2" x="24" y="16" width="13" height="1" fill="black"/>
-</g>
-<g id="share_3">
-<path id="share_4" d="M56 5C56 6.10457 55.1046 7 54 7C53.4663 7 52.9815 6.79098 52.6229 6.45034L47.9076 9.39737C47.9676 9.58754 48 9.78999 48 10C48 10.21 47.9676 10.4125 47.9076 10.6026L52.6229 13.5497C52.9815 13.209 53.4663 13 54 13C55.1046 13 56 13.8954 56 15C56 16.1046 55.1046 17 54 17C52.8954 17 52 16.1046 52 15C52 14.79 52.0324 14.5875 52.0924 14.3974L47.3771 11.4503C47.0185 11.791 46.5337 12 46 12C44.8954 12 44 11.1046 44 10C44 8.89543 44.8954 8 46 8C46.5337 8 47.0185 8.20902 47.3771 8.54966L52.0924 5.60264C52.0324 5.41246 52 5.21001 52 5C52 3.89543 52.8954 3 54 3C55.1046 3 56 3.89543 56 5Z" fill="black"/>
-</g>
-<g id="embed _3">
-<g id="embed _4">
-<path d="M67.8536 5.35359L67.1465 4.64648L62.293 9.50004L67.1465 14.3536L67.8536 13.6465L63.7072 9.50004L67.8536 5.35359Z" fill="black"/>
-<path d="M72.1465 5.35359L72.8536 4.64648L77.7072 9.50004L72.8536 14.3536L72.1465 13.6465L76.293 9.50004L72.1465 5.35359Z" fill="black"/>
-</g>
-</g>
-<g id="full-screen_2">
-<path id="Rectangle 81 (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M93 7H87V13H93V7ZM86 6V14H94V6H86Z" fill="black"/>
-<path id="Subtract_5" fill-rule="evenodd" clip-rule="evenodd" d="M86 3H83V6H84V4H86V3Z" fill="black"/>
-<path id="Subtract_6" fill-rule="evenodd" clip-rule="evenodd" d="M97 6L97 3L94 3L94 4L96 4L96 6L97 6Z" fill="black"/>
-<path id="Subtract_7" fill-rule="evenodd" clip-rule="evenodd" d="M94 17L97 17L97 14L96 14L96 16L94 16L94 17Z" fill="black"/>
-<path id="Subtract_8" fill-rule="evenodd" clip-rule="evenodd" d="M83 14L83 17L86 17L86 16L84 16L84 14L83 14Z" fill="black"/>
-</g>
-<g id="zoom-in_2">
-<path id="Union_6" fill-rule="evenodd" clip-rule="evenodd" d="M111 5H110V10H105V11H110V16H111V11H116V10H111V5Z" fill="black"/>
-</g>
-<g id="zoom-out_2">
-<rect id="Rectangle 44.8_2" x="135" y="10" width="1" height="10" transform="rotate(90 135 10)" fill="black"/>
-</g>
-<g id="scroll-to-first-sheet_2">
-<path id="Vector 13 (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M155 5L147 10L155 15V5Z" fill="black"/>
-<path id="Rectangle 225_2" d="M145 5H146V15H145V5Z" fill="black"/>
-</g>
-<g id="scroll-to-last-sheet_2">
-<path id="Vector 13 (Stroke)_4" fill-rule="evenodd" clip-rule="evenodd" d="M165 15L173 10L165 5V15Z" fill="black"/>
-<path id="Rectangle 225 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M174 15H175V5H174V15Z" fill="black"/>
-</g>
-<g id="play_2">
-<path id="Vector 8 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M185 3L198 10L185 17V3Z" fill="black"/>
-</g>
-<g id="pause_2">
-<path id="Rectangle 81 (Stroke)_4" fill-rule="evenodd" clip-rule="evenodd" d="M205 5V15H209V5H205Z" fill="black"/>
-<path id="Rectangle 81.1 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M211 5V15H215V5H211Z" fill="black"/>
-</g>
-<g id=" print_2">
-<path id="Union_7" fill-rule="evenodd" clip-rule="evenodd" d="M226 4H234V6H226V4ZM225 6V4C225 3.44772 225.448 3 226 3H234C234.552 3 235 3.44772 235 4V6H237C237.552 6 238 6.44772 238 7V13C238 13.5523 237.552 14 237 14H235V16C235 16.5523 234.552 17 234 17H226C225.448 17 225 16.5523 225 16V14H223C222.448 14 222 13.5523 222 13V7C222 6.44772 222.448 6 223 6H225ZM225 13V11C225 10.4477 225.448 10 226 10H234C234.552 10 235 10.4477 235 11V13H237V7H234H226H223V13H225ZM225 8H224V9H225V8ZM234 11H226V16H234V11ZM227 12H233V13H227V12ZM233 14H227V15H233V14Z" fill="black"/>
-</g>
-<g id="clear-style_2">
-<path id="Union_8" fill-rule="evenodd" clip-rule="evenodd" d="M253.268 4.56085C252.291 3.58454 250.708 3.58453 249.732 4.56085L243.561 10.7324C242.584 11.7087 242.584 13.2916 243.561 14.268L245.146 15.8537L245.293 16.0002L245.5 16.0002H249.5L249.707 16.0002L255 16.0002V15.0002H250.707L255.439 10.268C256.416 9.29164 256.416 7.70873 255.439 6.73242L253.268 4.56085ZM249.293 15.0002L252.793 11.5002L248.5 7.20729L244.268 11.4395C243.682 12.0253 243.682 12.9751 244.268 13.5609L245.707 15.0002L249.293 15.0002ZM249.207 6.50019L253.5 10.7931L254.732 9.56085C255.318 8.97506 255.318 8.02531 254.732 7.43953L252.561 5.26795C251.975 4.68217 251.025 4.68217 250.439 5.26795L249.207 6.50019Z" fill="black"/>
-</g>
-<g id="edit">
-<path id="Vector_7" d="M263 34V37H266L274 29L271 26L263 34Z" fill="white"/>
-<path id="Vector 2" d="M275 28L272 25L274 23H275L277 25V26L275 28Z" fill="white"/>
-</g>
-<g id="more-vertical">
-<circle id="Ellipse" cx="290" cy="26" r="1" transform="rotate(90 290 26)" fill="white"/>
-<circle id="Ellipse_2" cx="290" cy="30" r="1" transform="rotate(90 290 30)" fill="white"/>
-<circle id="Ellipse_3" cx="290" cy="34" r="1" transform="rotate(90 290 34)" fill="white"/>
-</g>
-<g id="go-to-location">
-<path id="Vector_8" d="M317 26H311V25C311 24.45 310.55 24 310 24H303C302.45 24 302 24.45 302 25V36C302 36.55 302.45 37 303 37H317C317.55 37 318 36.55 318 36V27C318 26.45 317.55 26 317 26ZM317 36H303V25H310V27H317V36Z" fill="white"/>
-<path id="Union_9" fill-rule="evenodd" clip-rule="evenodd" d="M309.646 33.6465L310.354 34.3536L313.207 31.5L310.354 28.6465L309.646 29.3536L311.268 30.9747H306V31.9747H311.318L309.646 33.6465Z" fill="white"/>
-</g>
-<g id="arrow-down">
-<path id="Union_10" fill-rule="evenodd" clip-rule="evenodd" d="M331 23H330V34.2929L325.354 29.6464L324.646 30.3536L330.146 35.8536L330.5 36.2071L330.854 35.8536L336.354 30.3536L335.646 29.6464L331 34.2929V23Z" fill="white"/>
-</g>
-<g id="edit_2">
-<path id="Vector_9" d="M263 14V17H266L274 9L271 6L263 14Z" fill="black"/>
-<path id="Vector 2_2" d="M275 8L272 5L274 3H275L277 5V6L275 8Z" fill="black"/>
-</g>
-<g id="more-vertical_2">
-<circle id="Ellipse_4" cx="290" cy="6" r="1" transform="rotate(90 290 6)" fill="black"/>
-<circle id="Ellipse_5" cx="290" cy="10" r="1" transform="rotate(90 290 10)" fill="black"/>
-<circle id="Ellipse_6" cx="290" cy="14" r="1" transform="rotate(90 290 14)" fill="black"/>
-</g>
-<g id="go-to-location_2">
-<path id="Vector_10" d="M317 6H311V5C311 4.45 310.55 4 310 4H303C302.45 4 302 4.45 302 5V16C302 16.55 302.45 17 303 17H317C317.55 17 318 16.55 318 16V7C318 6.45 317.55 6 317 6ZM317 16H303V5H310V7H317V16Z" fill="black"/>
-<path id="Union_11" fill-rule="evenodd" clip-rule="evenodd" d="M309.646 13.6465L310.354 14.3536L313.207 11.5L310.354 8.64648L309.646 9.35359L311.268 10.9747H306V11.9747H311.318L309.646 13.6465Z" fill="black"/>
-</g>
-<g id="arrow-down_2">
-<path id="Union_12" fill-rule="evenodd" clip-rule="evenodd" d="M331 3H330V14.2929L325.354 9.64645L324.646 10.3536L330.146 15.8536L330.5 16.2071L330.854 15.8536L336.354 10.3536L335.646 9.64645L331 14.2929V3Z" fill="black"/>
-</g>
-<g id="arrow-up">
-<path id="Union_13" fill-rule="evenodd" clip-rule="evenodd" d="M350 36.207L351 36.207L351 24.9141L355.646 29.5606L356.354 28.8535L350.854 23.3535L350.5 22.9999L350.146 23.3535L344.646 28.8535L345.354 29.5606L350 24.9141L350 36.207Z" fill="white"/>
-</g>
-<g id="arrow-up_2">
-<path id="Union_14" fill-rule="evenodd" clip-rule="evenodd" d="M350 16.207L351 16.207L351 4.91414L355.646 9.56059L356.354 8.85348L350.854 3.35348L350.5 2.99993L350.146 3.35348L344.646 8.85348L345.354 9.56059L350 4.91414L350 16.207Z" fill="black"/>
-</g>
-<g id="close">
-<path id="Vector 73" d="M366 25L375 34M375 25L366 34" stroke="white" stroke-width="1.5"/>
-</g>
-<g id="close_2">
-<path id="Vector 73_2" d="M366 5L375 14M375 5L366 14" stroke="black" stroke-width="1.5"/>
-</g>
-</g>
+<svg width="580" height="40" viewBox="0 0 580 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon-menu-sprite Embedded Viewer">
+        <g id="view-settings">
+            <path id="Vector" d="M17 26H3V27H17V26Z" fill="white"/>
+            <path id="Vector_2" d="M17 30H3V31H17V30Z" fill="white"/>
+            <path id="Vector_3" d="M17 34H3V35H17V34Z" fill="white"/>
+        </g>
+        <g id="download">
+            <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M31 22H30V33.2929L25.3536 28.6464L24.6465 29.3536L30.1465 34.8536L30.5 35.2071L30.8536 34.8536L36.3536 29.3536L35.6465 28.6464L31 33.2929V22Z" fill="white"/>
+            <rect id="Rectangle 88" x="24" y="36" width="13" height="1" fill="white"/>
+        </g>
+        <g id="share">
+            <path id="share_2" d="M56 25C56 26.1046 55.1046 27 54 27C53.4663 27 52.9815 26.791 52.6229 26.4503L47.9076 29.3974C47.9676 29.5875 48 29.79 48 30C48 30.21 47.9676 30.4125 47.9076 30.6026L52.6229 33.5497C52.9815 33.209 53.4663 33 54 33C55.1046 33 56 33.8954 56 35C56 36.1046 55.1046 37 54 37C52.8954 37 52 36.1046 52 35C52 34.79 52.0324 34.5875 52.0924 34.3974L47.3771 31.4503C47.0185 31.791 46.5337 32 46 32C44.8954 32 44 31.1046 44 30C44 28.8954 44.8954 28 46 28C46.5337 28 47.0185 28.209 47.3771 28.5497L52.0924 25.6026C52.0324 25.4125 52 25.21 52 25C52 23.8954 52.8954 23 54 23C55.1046 23 56 23.8954 56 25Z" fill="white"/>
+        </g>
+        <g id="embed ">
+            <g id="embed _2">
+                <path d="M67.8536 25.3536L67.1465 24.6465L62.293 29.5L67.1465 34.3536L67.8536 33.6465L63.7072 29.5L67.8536 25.3536Z" fill="white"/>
+                <path d="M72.1465 25.3536L72.8536 24.6465L77.7072 29.5L72.8536 34.3536L72.1465 33.6465L76.293 29.5L72.1465 25.3536Z" fill="white"/>
+            </g>
+        </g>
+        <g id="full-screen">
+            <path id="Rectangle 81 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M93 27H87V33H93V27ZM86 26V34H94V26H86Z" fill="white"/>
+            <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M86 23H83V26H84V24H86V23Z" fill="white"/>
+            <path id="Subtract_2" fill-rule="evenodd" clip-rule="evenodd" d="M97 26L97 23L94 23L94 24L96 24L96 26L97 26Z" fill="white"/>
+            <path id="Subtract_3" fill-rule="evenodd" clip-rule="evenodd" d="M94 37L97 37L97 34L96 34L96 36L94 36L94 37Z" fill="white"/>
+            <path id="Subtract_4" fill-rule="evenodd" clip-rule="evenodd" d="M83 34L83 37L86 37L86 36L84 36L84 34L83 34Z" fill="white"/>
+        </g>
+        <g id="zoom-in">
+            <path id="Union_2" fill-rule="evenodd" clip-rule="evenodd" d="M111 25H110V30H105V31H110V36H111V31H116V30H111V25Z" fill="white"/>
+        </g>
+        <g id="zoom-out">
+            <rect id="Rectangle 44.8" x="135" y="30" width="1" height="10" transform="rotate(90 135 30)" fill="white"/>
+        </g>
+        <g id="scroll-to-first-sheet">
+            <path id="Vector 13 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M155 25L147 30L155 35V25Z" fill="white"/>
+            <path id="Rectangle 225" d="M145 25H146V35H145V25Z" fill="white"/>
+        </g>
+        <g id="scroll-to-last-sheet">
+            <path id="Vector 13 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M165 35L173 30L165 25V35Z" fill="white"/>
+            <path id="Rectangle 225 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M174 35H175V25H174V35Z" fill="white"/>
+        </g>
+        <g id="play">
+            <path id="Vector 8 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M185 23L198 30L185 37V23Z" fill="white"/>
+        </g>
+        <g id="pause">
+            <path id="Rectangle 81 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M205 25V35H209V25H205Z" fill="white"/>
+            <path id="Rectangle 81.1 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M211 25V35H215V25H211Z" fill="white"/>
+        </g>
+        <g id=" print">
+            <path id="Union_3" fill-rule="evenodd" clip-rule="evenodd" d="M226 24H234V26H226V24ZM225 26V24C225 23.4477 225.448 23 226 23H234C234.552 23 235 23.4477 235 24V26H237C237.552 26 238 26.4477 238 27V33C238 33.5523 237.552 34 237 34H235V36C235 36.5523 234.552 37 234 37H226C225.448 37 225 36.5523 225 36V34H223C222.448 34 222 33.5523 222 33V27C222 26.4477 222.448 26 223 26H225ZM225 33V31C225 30.4477 225.448 30 226 30H234C234.552 30 235 30.4477 235 31V33H237V27H234H226H223V33H225ZM225 28H224V29H225V28ZM234 31H226V36H234V31ZM227 32H233V33H227V32ZM233 34H227V35H233V34Z" fill="white"/>
+        </g>
+        <g id="clear-style">
+            <path id="Union_4" fill-rule="evenodd" clip-rule="evenodd" d="M253.268 24.5608C252.291 23.5845 250.708 23.5845 249.732 24.5608L243.561 30.7324C242.584 31.7087 242.584 33.2916 243.561 34.268L245.146 35.8537L245.293 36.0002L245.5 36.0002H249.5L249.707 36.0002L255 36.0002V35.0002H250.707L255.439 30.268C256.416 29.2916 256.416 27.7087 255.439 26.7324L253.268 24.5608ZM249.293 35.0002L252.793 31.5002L248.5 27.2073L244.268 31.4395C243.682 32.0253 243.682 32.9751 244.268 33.5609L245.707 35.0002L249.293 35.0002ZM249.207 26.5002L253.5 30.7931L254.732 29.5608C255.318 28.9751 255.318 28.0253 254.732 27.4395L252.561 25.268C251.975 24.6822 251.025 24.6822 250.439 25.268L249.207 26.5002Z" fill="white"/>
+        </g>
+        <g id="view-settings_2">
+            <path id="Vector_4" d="M17 6H3V7H17V6Z" fill="black"/>
+            <path id="Vector_5" d="M17 10H3V11H17V10Z" fill="black"/>
+            <path id="Vector_6" d="M17 14H3V15H17V14Z" fill="black"/>
+        </g>
+        <g id="download_2">
+            <path id="Union_5" fill-rule="evenodd" clip-rule="evenodd" d="M31 2H30V13.2929L25.3536 8.64645L24.6465 9.35355L30.1465 14.8536L30.5 15.2071L30.8536 14.8536L36.3536 9.35355L35.6465 8.64645L31 13.2929V2Z" fill="black"/>
+            <rect id="Rectangle 88_2" x="24" y="16" width="13" height="1" fill="black"/>
+        </g>
+        <g id="share_3">
+            <path id="share_4" d="M56 5C56 6.10457 55.1046 7 54 7C53.4663 7 52.9815 6.79098 52.6229 6.45034L47.9076 9.39737C47.9676 9.58754 48 9.78999 48 10C48 10.21 47.9676 10.4125 47.9076 10.6026L52.6229 13.5497C52.9815 13.209 53.4663 13 54 13C55.1046 13 56 13.8954 56 15C56 16.1046 55.1046 17 54 17C52.8954 17 52 16.1046 52 15C52 14.79 52.0324 14.5875 52.0924 14.3974L47.3771 11.4503C47.0185 11.791 46.5337 12 46 12C44.8954 12 44 11.1046 44 10C44 8.89543 44.8954 8 46 8C46.5337 8 47.0185 8.20902 47.3771 8.54966L52.0924 5.60264C52.0324 5.41246 52 5.21001 52 5C52 3.89543 52.8954 3 54 3C55.1046 3 56 3.89543 56 5Z" fill="black"/>
+        </g>
+        <g id="embed _3">
+            <g id="embed _4">
+                <path d="M67.8536 5.35359L67.1465 4.64648L62.293 9.50004L67.1465 14.3536L67.8536 13.6465L63.7072 9.50004L67.8536 5.35359Z" fill="black"/>
+                <path d="M72.1465 5.35359L72.8536 4.64648L77.7072 9.50004L72.8536 14.3536L72.1465 13.6465L76.293 9.50004L72.1465 5.35359Z" fill="black"/>
+            </g>
+        </g>
+        <g id="full-screen_2">
+            <path id="Rectangle 81 (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M93 7H87V13H93V7ZM86 6V14H94V6H86Z" fill="black"/>
+            <path id="Subtract_5" fill-rule="evenodd" clip-rule="evenodd" d="M86 3H83V6H84V4H86V3Z" fill="black"/>
+            <path id="Subtract_6" fill-rule="evenodd" clip-rule="evenodd" d="M97 6L97 3L94 3L94 4L96 4L96 6L97 6Z" fill="black"/>
+            <path id="Subtract_7" fill-rule="evenodd" clip-rule="evenodd" d="M94 17L97 17L97 14L96 14L96 16L94 16L94 17Z" fill="black"/>
+            <path id="Subtract_8" fill-rule="evenodd" clip-rule="evenodd" d="M83 14L83 17L86 17L86 16L84 16L84 14L83 14Z" fill="black"/>
+        </g>
+        <g id="zoom-in_2">
+            <path id="Union_6" fill-rule="evenodd" clip-rule="evenodd" d="M111 5H110V10H105V11H110V16H111V11H116V10H111V5Z" fill="black"/>
+        </g>
+        <g id="zoom-out_2">
+            <rect id="Rectangle 44.8_2" x="135" y="10" width="1" height="10" transform="rotate(90 135 10)" fill="black"/>
+        </g>
+        <g id="scroll-to-first-sheet_2">
+            <path id="Vector 13 (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M155 5L147 10L155 15V5Z" fill="black"/>
+            <path id="Rectangle 225_2" d="M145 5H146V15H145V5Z" fill="black"/>
+        </g>
+        <g id="scroll-to-last-sheet_2">
+            <path id="Vector 13 (Stroke)_4" fill-rule="evenodd" clip-rule="evenodd" d="M165 15L173 10L165 5V15Z" fill="black"/>
+            <path id="Rectangle 225 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M174 15H175V5H174V15Z" fill="black"/>
+        </g>
+        <g id="play_2">
+            <path id="Vector 8 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M185 3L198 10L185 17V3Z" fill="black"/>
+        </g>
+        <g id="pause_2">
+            <path id="Rectangle 81 (Stroke)_4" fill-rule="evenodd" clip-rule="evenodd" d="M205 5V15H209V5H205Z" fill="black"/>
+            <path id="Rectangle 81.1 (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M211 5V15H215V5H211Z" fill="black"/>
+        </g>
+        <g id=" print_2">
+            <path id="Union_7" fill-rule="evenodd" clip-rule="evenodd" d="M226 4H234V6H226V4ZM225 6V4C225 3.44772 225.448 3 226 3H234C234.552 3 235 3.44772 235 4V6H237C237.552 6 238 6.44772 238 7V13C238 13.5523 237.552 14 237 14H235V16C235 16.5523 234.552 17 234 17H226C225.448 17 225 16.5523 225 16V14H223C222.448 14 222 13.5523 222 13V7C222 6.44772 222.448 6 223 6H225ZM225 13V11C225 10.4477 225.448 10 226 10H234C234.552 10 235 10.4477 235 11V13H237V7H234H226H223V13H225ZM225 8H224V9H225V8ZM234 11H226V16H234V11ZM227 12H233V13H227V12ZM233 14H227V15H233V14Z" fill="black"/>
+        </g>
+        <g id="clear-style_2">
+            <path id="Union_8" fill-rule="evenodd" clip-rule="evenodd" d="M253.268 4.56085C252.291 3.58454 250.708 3.58453 249.732 4.56085L243.561 10.7324C242.584 11.7087 242.584 13.2916 243.561 14.268L245.146 15.8537L245.293 16.0002L245.5 16.0002H249.5L249.707 16.0002L255 16.0002V15.0002H250.707L255.439 10.268C256.416 9.29164 256.416 7.70873 255.439 6.73242L253.268 4.56085ZM249.293 15.0002L252.793 11.5002L248.5 7.20729L244.268 11.4395C243.682 12.0253 243.682 12.9751 244.268 13.5609L245.707 15.0002L249.293 15.0002ZM249.207 6.50019L253.5 10.7931L254.732 9.56085C255.318 8.97506 255.318 8.02531 254.732 7.43953L252.561 5.26795C251.975 4.68217 251.025 4.68217 250.439 5.26795L249.207 6.50019Z" fill="black"/>
+        </g>
+        <g id="edit">
+            <path id="Vector_7" d="M263 34V37H266L274 29L271 26L263 34Z" fill="white"/>
+            <path id="Vector 2" d="M275 28L272 25L274 23H275L277 25V26L275 28Z" fill="white"/>
+        </g>
+        <g id="more-vertical">
+            <circle id="Ellipse" cx="290" cy="26" r="1" transform="rotate(90 290 26)" fill="white"/>
+            <circle id="Ellipse_2" cx="290" cy="30" r="1" transform="rotate(90 290 30)" fill="white"/>
+            <circle id="Ellipse_3" cx="290" cy="34" r="1" transform="rotate(90 290 34)" fill="white"/>
+        </g>
+        <g id="go-to-location">
+            <path id="Vector_8" d="M317 26H311V25C311 24.45 310.55 24 310 24H303C302.45 24 302 24.45 302 25V36C302 36.55 302.45 37 303 37H317C317.55 37 318 36.55 318 36V27C318 26.45 317.55 26 317 26ZM317 36H303V25H310V27H317V36Z" fill="white"/>
+            <path id="Union_9" fill-rule="evenodd" clip-rule="evenodd" d="M309.646 33.6465L310.354 34.3536L313.207 31.5L310.354 28.6465L309.646 29.3536L311.268 30.9747H306V31.9747H311.318L309.646 33.6465Z" fill="white"/>
+        </g>
+        <g id="arrow-down">
+            <path id="Union_10" fill-rule="evenodd" clip-rule="evenodd" d="M331 23H330V34.2929L325.354 29.6464L324.646 30.3536L330.146 35.8536L330.5 36.2071L330.854 35.8536L336.354 30.3536L335.646 29.6464L331 34.2929V23Z" fill="white"/>
+        </g>
+        <g id="edit_2">
+            <path id="Vector_9" d="M263 14V17H266L274 9L271 6L263 14Z" fill="black"/>
+            <path id="Vector 2_2" d="M275 8L272 5L274 3H275L277 5V6L275 8Z" fill="black"/>
+        </g>
+        <g id="more-vertical_2">
+            <circle id="Ellipse_4" cx="290" cy="6" r="1" transform="rotate(90 290 6)" fill="black"/>
+            <circle id="Ellipse_5" cx="290" cy="10" r="1" transform="rotate(90 290 10)" fill="black"/>
+            <circle id="Ellipse_6" cx="290" cy="14" r="1" transform="rotate(90 290 14)" fill="black"/>
+        </g>
+        <g id="go-to-location_2">
+            <path id="Vector_10" d="M317 6H311V5C311 4.45 310.55 4 310 4H303C302.45 4 302 4.45 302 5V16C302 16.55 302.45 17 303 17H317C317.55 17 318 16.55 318 16V7C318 6.45 317.55 6 317 6ZM317 16H303V5H310V7H317V16Z" fill="black"/>
+            <path id="Union_11" fill-rule="evenodd" clip-rule="evenodd" d="M309.646 13.6465L310.354 14.3536L313.207 11.5L310.354 8.64648L309.646 9.35359L311.268 10.9747H306V11.9747H311.318L309.646 13.6465Z" fill="black"/>
+        </g>
+        <g id="arrow-down_2">
+            <path id="Union_12" fill-rule="evenodd" clip-rule="evenodd" d="M331 3H330V14.2929L325.354 9.64645L324.646 10.3536L330.146 15.8536L330.5 16.2071L330.854 15.8536L336.354 10.3536L335.646 9.64645L331 14.2929V3Z" fill="black"/>
+        </g>
+        <g id="arrow-up">
+            <path id="Union_13" fill-rule="evenodd" clip-rule="evenodd" d="M350 36.207L351 36.207L351 24.9141L355.646 29.5606L356.354 28.8535L350.854 23.3535L350.5 22.9999L350.146 23.3535L344.646 28.8535L345.354 29.5606L350 24.9141L350 36.207Z" fill="white"/>
+        </g>
+        <g id="arrow-up_2">
+            <path id="Union_14" fill-rule="evenodd" clip-rule="evenodd" d="M350 16.207L351 16.207L351 4.91414L355.646 9.56059L356.354 8.85348L350.854 3.35348L350.5 2.99993L350.146 3.35348L344.646 8.85348L345.354 9.56059L350 4.91414L350 16.207Z" fill="black"/>
+        </g>
+        <g id="close">
+            <path id="Vector 73" d="M366 25L375 34M375 25L366 34" stroke="white" stroke-width="1.5"/>
+        </g>
+        <g id="close_2">
+            <path id="Vector 73_2" d="M366 5L375 14M375 5L366 14" stroke="black" stroke-width="1.5"/>
+        </g>
+        <g id="сut">
+            <circle id="Ellipse 103" cx="385.5" cy="13.5" r="2" stroke="black"/>
+            <circle id="Ellipse 104" cx="385.5" cy="6.5" r="2" stroke="black"/>
+            <path id="Rectangle 1552" d="M387.188 7.56689L398.446 14.0669V14.0669C398.17 14.5452 397.559 14.7091 397.08 14.4329L386.688 8.43292L387.188 7.56689Z" fill="black"/>
+            <path id="Rectangle 1553" d="M386.688 11.5669L397.08 5.56689C397.558 5.29075 398.17 5.45463 398.446 5.93292V5.93292L387.188 12.4329L386.688 11.5669Z" fill="black"/>
+        </g>
+        <g id="сut_2">
+            <circle id="Ellipse 103_2" cx="385.5" cy="33.5" r="2" stroke="white"/>
+            <circle id="Ellipse 104_2" cx="385.5" cy="26.5" r="2" stroke="white"/>
+            <path id="Rectangle 1552_2" d="M387.188 27.5669L398.446 34.0669V34.0669C398.17 34.5452 397.559 34.7091 397.08 34.4329L386.688 28.4329L387.188 27.5669Z" fill="white"/>
+            <path id="Rectangle 1553_2" d="M386.688 31.5669L397.08 25.5669C397.558 25.2908 398.17 25.4546 398.446 25.9329V25.9329L387.188 32.4329L386.688 31.5669Z" fill="white"/>
+        </g>
+        <g id="copy">
+            <path id="Union_27" fill-rule="evenodd" clip-rule="evenodd" d="M404 5H412V7H413V5C413 4.44772 412.552 4 412 4H404C403.448 4 403 4.44772 403 5V12C403 12.5523 403.448 13 404 13H406V12H404V5ZM411 6H405V7H411V6ZM408 9V16H416V9H408ZM408 8C407.448 8 407 8.44772 407 9V16C407 16.5523 407.448 17 408 17H416C416.552 17 417 16.5523 417 16V9C417 8.44772 416.552 8 416 8H408ZM406 8H405V9H406V8ZM405 10H406V11H405V10ZM415 11V10H409V11H415ZM415 12V13H409V12H415ZM415 15V14H409V15H415Z" fill="black"/>
+        </g>
+        <g id="copy_2">
+            <path id="Union_28" fill-rule="evenodd" clip-rule="evenodd" d="M404 25H412V27H413V25C413 24.4477 412.552 24 412 24H404C403.448 24 403 24.4477 403 25V32C403 32.5523 403.448 33 404 33H406V32H404V25ZM411 26H405V27H411V26ZM408 29V36H416V29H408ZM408 28C407.448 28 407 28.4477 407 29V36C407 36.5523 407.448 37 408 37H416C416.552 37 417 36.5523 417 36V29C417 28.4477 416.552 28 416 28H408ZM406 28H405V29H406V28ZM405 30H406V31H405V30ZM415 31V30H409V31H415ZM415 32V33H409V32H415ZM415 35V34H409V35H415Z" fill="white"/>
+        </g>
+        <g id="paste">
+            <path id="Union_29" fill-rule="evenodd" clip-rule="evenodd" d="M426 3H432V4H434C434.552 4 435 4.44772 435 5V7H434V5H432V6H426V5H424V12H426V13H424C423.448 13 423 12.5523 423 12V5C423 4.44772 423.448 4 424 4H426V3ZM436 16V9H428V16H436ZM428 8C427.448 8 427 8.44772 427 9V16C427 16.5523 427.448 17 428 17H436C436.552 17 437 16.5523 437 16V9C437 8.44772 436.552 8 436 8H428ZM429 11V10H435V11H429ZM435 12H429V13H435V12ZM429 15V14H435V15H429Z" fill="black"/>
+        </g>
+        <g id="paste_2">
+            <path id="Union_30" fill-rule="evenodd" clip-rule="evenodd" d="M426 23H432V24H434C434.552 24 435 24.4477 435 25V27H434V25H432V26H426V25H424V32H426V33H424C423.448 33 423 32.5523 423 32V25C423 24.4477 423.448 24 424 24H426V23ZM436 36V29H428V36H436ZM428 28C427.448 28 427 28.4477 427 29V36C427 36.5523 427.448 37 428 37H436C436.552 37 437 36.5523 437 36V29C437 28.4477 436.552 28 436 28H428ZM429 31V30H435V31H429ZM435 32H429V33H435V32ZM429 35V34H435V35H429Z" fill="white"/>
+        </g>
+        <g id="redo">
+            <path id="Vector" d="M469.1 7C471.1 7 473.2 8.3 474.5 9.5L477 7V14H470L472.5 11.5C471.7 10.2 469.9 9.1 468.2 9.1C465.7 9.1 462.8 10.8 462.5 13.2C462.9 9.7 465.5 7 469.1 7Z" fill="black"/>
+        </g>
+        <g id="redo_2">
+            <path id="Vector_2" d="M469.1 27C471.1 27 473.2 28.3 474.5 29.5L477 27V34H470L472.5 31.5C471.7 30.2 469.9 29.1 468.2 29.1C465.7 29.1 462.8 30.8 462.5 33.2C462.9 29.7 465.5 27 469.1 27Z" fill="white"/>
+        </g>
+        <g id="undo">
+            <path id="Vector_3" d="M450.9 7C448.9 7 446.8 8.3 445.5 9.5L443 7V14H450L447.5 11.5C448.3 10.2 450.1 9.1 451.8 9.1C454.3 9.1 457.2 10.8 457.5 13.2C457.1 9.7 454.5 7 450.9 7Z" fill="black"/>
+        </g>
+        <g id="undo_2">
+            <path id="Vector_4" d="M450.9 27C448.9 27 446.8 28.3 445.5 29.5L443 27V34H450L447.5 31.5C448.3 30.2 450.1 29.1 451.8 29.1C454.3 29.1 457.2 30.8 457.5 33.2C457.1 29.7 454.5 27 450.9 27Z" fill="white"/>
+        </g>
+        <g id="search">
+            <path id="Union_31" fill-rule="evenodd" clip-rule="evenodd" d="M493 8.5C493 10.9853 490.985 13 488.5 13C486.015 13 484 10.9853 484 8.5C484 6.01472 486.015 4 488.5 4C490.985 4 493 6.01472 493 8.5ZM492.02 12.7266C491.066 13.5217 489.839 14 488.5 14C485.462 14 483 11.5376 483 8.5C483 5.46243 485.462 3 488.5 3C491.538 3 494 5.46243 494 8.5C494 9.83875 493.522 11.0658 492.727 12.0195L496.854 16.1465L496.146 16.8536L492.02 12.7266Z" fill="black"/>
+        </g>
+        <g id="search_2">
+            <path id="Union_32" fill-rule="evenodd" clip-rule="evenodd" d="M493 28.5C493 30.9853 490.985 33 488.5 33C486.015 33 484 30.9853 484 28.5C484 26.0147 486.015 24 488.5 24C490.985 24 493 26.0147 493 28.5ZM492.02 32.7266C491.066 33.5217 489.839 34 488.5 34C485.462 34 483 31.5376 483 28.5C483 25.4624 485.462 23 488.5 23C491.538 23 494 25.4624 494 28.5C494 29.8387 493.522 31.0658 492.727 32.0195L496.854 36.1465L496.146 36.8536L492.02 32.7266Z" fill="white"/>
+        </g>
+        <g id="btn-sheet-view">
+            <path id="Union_33" fill-rule="evenodd" clip-rule="evenodd" d="M509.93 13C507.552 13 505.45 11.8151 504.184 10C505.45 8.18485 507.552 7 509.93 7C512.307 7 514.409 8.18486 515.675 10C514.409 11.8151 512.307 13 509.93 13ZM509.93 6C512.891 6 515.476 7.6088 516.859 10C515.476 12.3912 512.891 14 509.93 14C506.969 14 504.383 12.3912 503 10C504.383 7.60879 506.969 6 509.93 6ZM509.93 12C511.034 12 511.93 11.1046 511.93 10C511.93 8.89543 511.034 8 509.93 8C508.825 8 507.93 8.89543 507.93 10C507.93 11.1046 508.825 12 509.93 12Z" fill="black"/>
+        </g>
+        <g id="btn-sheet-view_2">
+            <path id="Union_34" fill-rule="evenodd" clip-rule="evenodd" d="M509.93 33C507.552 33 505.45 31.8151 504.184 30C505.45 28.1849 507.552 27 509.93 27C512.307 27 514.409 28.1849 515.675 30C514.409 31.8151 512.307 33 509.93 33ZM509.93 26C512.891 26 515.476 27.6088 516.859 30C515.476 32.3912 512.891 34 509.93 34C506.969 34 504.383 32.3912 503 30C504.383 27.6088 506.969 26 509.93 26ZM509.93 32C511.034 32 511.93 31.1046 511.93 30C511.93 28.8954 511.034 28 509.93 28C508.825 28 507.93 28.8954 507.93 30C507.93 31.1046 508.825 32 509.93 32Z" fill="white"/>
+        </g>
+        <g id="hide-password">
+            <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M530.948 6.05196C530.638 6.01766 530.321 6 530 6C526.91 6 524.243 7.63505 523 10C523.439 10.8356 524.056 11.5801 524.807 12.1935L525.518 11.4821C524.979 11.055 524.519 10.5539 524.158 10C525.311 8.23092 527.473 7 530 7C530 7 530 7 530 7L530.948 6.05196ZM530 13C532.527 12.9999 534.689 11.769 535.842 10C535.481 9.44626 535.021 8.94525 534.482 8.51821L535.194 7.80682C535.944 8.42019 536.561 9.16455 537 10C535.757 12.3649 533.09 14 530 14C529.679 14 529.363 13.9824 529.052 13.9481L530 13Z" fill="black"/>
+            <path id="Vector 169" d="M525 15L535 5" stroke="black"/>
+        </g>
+        <g id="hide-password_2">
+            <path id="Subtract_2" fill-rule="evenodd" clip-rule="evenodd" d="M530.948 26.052C530.638 26.0177 530.321 26 530 26C526.91 26 524.243 27.6351 523 30C523.439 30.8356 524.056 31.5801 524.807 32.1935L525.518 31.4821C524.979 31.055 524.519 30.5539 524.158 30C525.311 28.2309 527.473 27 530 27C530 27 530 27 530 27L530.948 26.052ZM530 33C532.527 32.9999 534.689 31.769 535.842 30C535.481 29.4463 535.021 28.9453 534.482 28.5182L535.194 27.8068C535.944 28.4202 536.561 29.1646 537 30C535.757 32.3649 533.09 34 530 34C529.679 34 529.363 33.9824 529.052 33.9481L530 33Z" fill="white"/>
+            <path id="Vector 169_2" d="M525 35L535 25" stroke="white"/>
+        </g>
+        <g id="arrow-up">
+            <path id="Union_4" fill-rule="evenodd" clip-rule="evenodd" d="M550 6.29297L550.354 6.64652L555.854 12.1465L555.146 12.8536L550 7.70718L544.854 12.8536L544.146 12.1465L549.646 6.64652L550 6.29297Z" fill="black"/>
+        </g>
+        <g id="arrow-up_2">
+            <path id="Union_3" fill-rule="evenodd" clip-rule="evenodd" d="M550 26.293L550.354 26.6465L555.854 32.1465L555.146 32.8536L550 27.7072L544.854 32.8536L544.146 32.1465L549.646 26.6465L550 26.293Z" fill="white"/>
+        </g>
+        <g id="arrow-down">
+            <path id="Union_2" fill-rule="evenodd" clip-rule="evenodd" d="M570 13.7071L570.354 13.3536L575.854 7.85359L575.146 7.14648L570 12.2929L564.854 7.14648L564.146 7.85359L569.646 13.3536L570 13.7071Z" fill="black"/>
+        </g>
+        <g id="arrow-down_2">
+            <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M570 33.7071L570.354 33.3536L575.854 27.8536L575.146 27.1465L570 32.2929L564.854 27.1465L564.146 27.8536L569.646 33.3536L570 33.7071Z" fill="white"/>
+        </g>
+    </g>
 </svg>

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

@@ -503,7 +503,7 @@
 @icon-height: 20px;
 .svg-icon {
     background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat;
-    background-size: @icon-width*19 @icon-height*2;
+    background-size: @icon-width*29 @icon-height*2;
 
     &.download {
         background-position: -@icon-width 0;
@@ -557,6 +557,18 @@
     &.more-vertical {
         background-position: -@icon-width*14 0;
     }
+    &.search-close {
+        background-position: -@icon-width*18 0;
+    }
+    &.search {
+        background-position: -@icon-width*24 0;
+    }
+    &.search-arrow-up {
+        background-position: -@icon-width*27 0;
+    }
+    &.search-arrow-down {
+        background-position: -@icon-width*28 0;
+    }
 }
 
 .mi-icon {
@@ -786,3 +798,72 @@
         }
     }
 }
+
+#id-search {
+    button.active {
+        background-color: @btnActiveColor !important;
+        background-position: -@icon-width*19 -@icon-height;
+    }
+}
+
+.search-window {
+    width: 301px;
+    height: 54px;
+    z-index: 50;
+    position: fixed;
+
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    border-radius: 5px;
+    border: solid 1px #CBCBCB;
+
+    .body {
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        background-color: #FFFFFF;
+        display: flex;
+        padding: 16px;
+
+        input {
+            width: 192px;
+            height: 22px;
+            border-radius: 2px;
+            box-shadow: none;
+            border: solid 1px #CFCFCF;
+            padding: 1px 3px;
+            color: #444444;
+            font-size: 11px;
+
+            &::placeholder {
+                color: #CFCFCF;
+            }
+
+            &:focus {
+                border-color: #848484;
+                outline: 0;
+            }
+        }
+
+        .tools {
+            display: flex;
+
+            button {
+                border: none;
+                margin-left: 7px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                opacity: 0.8;
+
+                &:hover:not(:disabled) {
+                    background-color: #d8dadc;
+                }
+
+                &:disabled {
+                    opacity: 0.4;
+                    cursor: default;
+                }
+            }
+        }
+    }
+}

apps/common/forms/resources/img/icon-menu-sprite.svg

@@ -1,4 +1,4 @@
-<svg width="440" height="40" viewBox="0 0 440 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="580" height="40" viewBox="0 0 580 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="icon-menu-sprite Embedded Viewer">
 <g id="view-settings">
 <path id="Vector" d="M17 26H3V27H17V26Z" fill="white"/>
@@ -172,5 +172,49 @@
 <g id="paste_2">
     <path id="Union_30" fill-rule="evenodd" clip-rule="evenodd" d="M426 23H432V24H434C434.552 24 435 24.4477 435 25V27H434V25H432V26H426V25H424V32H426V33H424C423.448 33 423 32.5523 423 32V25C423 24.4477 423.448 24 424 24H426V23ZM436 36V29H428V36H436ZM428 28C427.448 28 427 28.4477 427 29V36C427 36.5523 427.448 37 428 37H436C436.552 37 437 36.5523 437 36V29C437 28.4477 436.552 28 436 28H428ZM429 31V30H435V31H429ZM435 32H429V33H435V32ZM429 35V34H435V35H429Z" fill="white"/>
 </g>
+<g id="redo">
+<path id="Vector" d="M469.1 7C471.1 7 473.2 8.3 474.5 9.5L477 7V14H470L472.5 11.5C471.7 10.2 469.9 9.1 468.2 9.1C465.7 9.1 462.8 10.8 462.5 13.2C462.9 9.7 465.5 7 469.1 7Z" fill="black"/>
+</g>
+<g id="redo_2">
+<path id="Vector_2" d="M469.1 27C471.1 27 473.2 28.3 474.5 29.5L477 27V34H470L472.5 31.5C471.7 30.2 469.9 29.1 468.2 29.1C465.7 29.1 462.8 30.8 462.5 33.2C462.9 29.7 465.5 27 469.1 27Z" fill="white"/>
+</g>
+<g id="undo">
+<path id="Vector_3" d="M450.9 7C448.9 7 446.8 8.3 445.5 9.5L443 7V14H450L447.5 11.5C448.3 10.2 450.1 9.1 451.8 9.1C454.3 9.1 457.2 10.8 457.5 13.2C457.1 9.7 454.5 7 450.9 7Z" fill="black"/>
+</g>
+<g id="undo_2">
+<path id="Vector_4" d="M450.9 27C448.9 27 446.8 28.3 445.5 29.5L443 27V34H450L447.5 31.5C448.3 30.2 450.1 29.1 451.8 29.1C454.3 29.1 457.2 30.8 457.5 33.2C457.1 29.7 454.5 27 450.9 27Z" fill="white"/>
+</g>
+<g id="search">
+    <path id="Union_31" fill-rule="evenodd" clip-rule="evenodd" d="M493 8.5C493 10.9853 490.985 13 488.5 13C486.015 13 484 10.9853 484 8.5C484 6.01472 486.015 4 488.5 4C490.985 4 493 6.01472 493 8.5ZM492.02 12.7266C491.066 13.5217 489.839 14 488.5 14C485.462 14 483 11.5376 483 8.5C483 5.46243 485.462 3 488.5 3C491.538 3 494 5.46243 494 8.5C494 9.83875 493.522 11.0658 492.727 12.0195L496.854 16.1465L496.146 16.8536L492.02 12.7266Z" fill="black"/>
+</g>
+<g id="search_2">
+    <path id="Union_32" fill-rule="evenodd" clip-rule="evenodd" d="M493 28.5C493 30.9853 490.985 33 488.5 33C486.015 33 484 30.9853 484 28.5C484 26.0147 486.015 24 488.5 24C490.985 24 493 26.0147 493 28.5ZM492.02 32.7266C491.066 33.5217 489.839 34 488.5 34C485.462 34 483 31.5376 483 28.5C483 25.4624 485.462 23 488.5 23C491.538 23 494 25.4624 494 28.5C494 29.8387 493.522 31.0658 492.727 32.0195L496.854 36.1465L496.146 36.8536L492.02 32.7266Z" fill="white"/>
+</g>
+<g id="btn-sheet-view">
+    <path id="Union_33" fill-rule="evenodd" clip-rule="evenodd" d="M509.93 13C507.552 13 505.45 11.8151 504.184 10C505.45 8.18485 507.552 7 509.93 7C512.307 7 514.409 8.18486 515.675 10C514.409 11.8151 512.307 13 509.93 13ZM509.93 6C512.891 6 515.476 7.6088 516.859 10C515.476 12.3912 512.891 14 509.93 14C506.969 14 504.383 12.3912 503 10C504.383 7.60879 506.969 6 509.93 6ZM509.93 12C511.034 12 511.93 11.1046 511.93 10C511.93 8.89543 511.034 8 509.93 8C508.825 8 507.93 8.89543 507.93 10C507.93 11.1046 508.825 12 509.93 12Z" fill="black"/>
+</g>
+<g id="btn-sheet-view_2">
+    <path id="Union_34" fill-rule="evenodd" clip-rule="evenodd" d="M509.93 33C507.552 33 505.45 31.8151 504.184 30C505.45 28.1849 507.552 27 509.93 27C512.307 27 514.409 28.1849 515.675 30C514.409 31.8151 512.307 33 509.93 33ZM509.93 26C512.891 26 515.476 27.6088 516.859 30C515.476 32.3912 512.891 34 509.93 34C506.969 34 504.383 32.3912 503 30C504.383 27.6088 506.969 26 509.93 26ZM509.93 32C511.034 32 511.93 31.1046 511.93 30C511.93 28.8954 511.034 28 509.93 28C508.825 28 507.93 28.8954 507.93 30C507.93 31.1046 508.825 32 509.93 32Z" fill="white"/>
+</g>
+<g id="hide-password">
+    <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M530.948 6.05196C530.638 6.01766 530.321 6 530 6C526.91 6 524.243 7.63505 523 10C523.439 10.8356 524.056 11.5801 524.807 12.1935L525.518 11.4821C524.979 11.055 524.519 10.5539 524.158 10C525.311 8.23092 527.473 7 530 7C530 7 530 7 530 7L530.948 6.05196ZM530 13C532.527 12.9999 534.689 11.769 535.842 10C535.481 9.44626 535.021 8.94525 534.482 8.51821L535.194 7.80682C535.944 8.42019 536.561 9.16455 537 10C535.757 12.3649 533.09 14 530 14C529.679 14 529.363 13.9824 529.052 13.9481L530 13Z" fill="black"/>
+    <path id="Vector 169" d="M525 15L535 5" stroke="black"/>
+</g>
+<g id="hide-password_2">
+    <path id="Subtract_2" fill-rule="evenodd" clip-rule="evenodd" d="M530.948 26.052C530.638 26.0177 530.321 26 530 26C526.91 26 524.243 27.6351 523 30C523.439 30.8356 524.056 31.5801 524.807 32.1935L525.518 31.4821C524.979 31.055 524.519 30.5539 524.158 30C525.311 28.2309 527.473 27 530 27C530 27 530 27 530 27L530.948 26.052ZM530 33C532.527 32.9999 534.689 31.769 535.842 30C535.481 29.4463 535.021 28.9453 534.482 28.5182L535.194 27.8068C535.944 28.4202 536.561 29.1646 537 30C535.757 32.3649 533.09 34 530 34C529.679 34 529.363 33.9824 529.052 33.9481L530 33Z" fill="white"/>
+    <path id="Vector 169_2" d="M525 35L535 25" stroke="white"/>
+</g>
+<g id="arrow-up">
+    <path id="Union_4" fill-rule="evenodd" clip-rule="evenodd" d="M550 6.29297L550.354 6.64652L555.854 12.1465L555.146 12.8536L550 7.70718L544.854 12.8536L544.146 12.1465L549.646 6.64652L550 6.29297Z" fill="black"/>
+</g>
+<g id="arrow-up_2">
+   <path id="Union_3" fill-rule="evenodd" clip-rule="evenodd" d="M550 26.293L550.354 26.6465L555.854 32.1465L555.146 32.8536L550 27.7072L544.854 32.8536L544.146 32.1465L549.646 26.6465L550 26.293Z" fill="white"/>
+</g>
+<g id="arrow-down">
+   <path id="Union_2" fill-rule="evenodd" clip-rule="evenodd" d="M570 13.7071L570.354 13.3536L575.854 7.85359L575.146 7.14648L570 12.2929L564.854 7.14648L564.146 7.85359L569.646 13.3536L570 13.7071Z" fill="black"/>
+</g>
+<g id="arrow-down_2">
+   <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M570 33.7071L570.354 33.3536L575.854 27.8536L575.146 27.1465L570 32.2929L564.854 27.1465L564.146 27.8536L569.646 33.3536L570 33.7071Z" fill="white"/>
+</g>
 </g>
 </svg>

apps/common/forms/resources/less/common.less

@@ -5,6 +5,7 @@
 @import "../../../../common/main/resources/less/colors-table.less";
 @import "../../../../common/main/resources/less/colors-table-classic.less";
 @import "../../../../common/main/resources/less/colors-table-dark.less";
+@import "../../../../common/main/resources/less/colors-table-dark-contrast.less";
 
 // Core variables and mixins
 //@import "../../../../../vendor/bootstrap/less/variables.less";
@@ -67,6 +68,7 @@
 @import "../../../../common/main/resources/less/dropdown-submenu.less";
 @import "../../../../common/main/resources/less/separator.less";
 @import "../../../../common/main/resources/less/input.less";
+@import "../../../../common/main/resources/less/combobox.less";
 @import "../../../../common/main/resources/less/window.less";
 @import "../../../../common/main/resources/less/loadmask.less";
 @import "../../../../common/main/resources/less/dataview.less";
@@ -78,6 +80,9 @@
 @import "../../../../common/main/resources/less/calendar.less";
 @import "../../../../common/main/resources/less/spinner.less";
 @import "../../../../common/main/resources/less/checkbox.less";
+@import "../../../../common/main/resources/less/opendialog.less";
+@import "../../../../common/main/resources/less/advanced-settings-window.less";
+@import "../../../../common/main/resources/less/searchdialog.less";
 
 @toolbarBorderColor:            @border-toolbar-ie;
 @toolbarBorderColor:            @border-toolbar;
@@ -222,7 +227,7 @@
     background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat;
 }
 
-.theme-dark {
+.theme-type-dark {
     .brand-logo {
         background: data-uri('../../../../common/main/resources/img/header/header-logo_s.svg') no-repeat;
     }
@@ -428,7 +433,7 @@
 @icon-width: 20px;
 @icon-height: 20px;
 
-.theme-dark {
+.theme-type-dark {
     @neg-value: -@icon-height;
     --icon-normal-top: @neg-value;
 }
@@ -436,7 +441,7 @@
 
 .svg-icon {
     background: data-uri('../../../../common/forms/resources/img/icon-menu-sprite.svg') no-repeat;
-    background-size: @icon-width*22 @icon-height*2;
+    background-size: @icon-width*29 @icon-height*2;
 
     &.download {
         background-position: -@icon-width 0;
@@ -454,6 +459,14 @@
         background-position: -@icon-width*4 0;
         background-position: -@icon-width*4 @icon-normal-top;
     }
+    &.zoom-in {
+        background-position: -@icon-width*5 0;
+        background-position: -@icon-width*5 @icon-normal-top;
+    }
+    &.zoom-out {
+        background-position: -@icon-width*6 0;
+        background-position: -@icon-width*6 @icon-normal-top;
+    }
     &.zoom-up {
         background-position: -@icon-width*5 -@icon-height;
     }
@@ -512,6 +525,38 @@
         background-position: -@icon-width*21 0;
         background-position: -@icon-width*21 @icon-normal-top;
     }
+    &.undo {
+        background-position: -@icon-width*22 0;
+        background-position: -@icon-width*22 @icon-normal-top;
+    }
+    &.redo {
+        background-position: -@icon-width*23 0;
+        background-position: -@icon-width*23 @icon-normal-top;
+    }
+    &.search {
+        background-position: -@icon-width*24 0;
+        background-position: -@icon-width*24 @icon-normal-top;
+    }
+    &.btn-sheet-view {
+        background-position: -@icon-width*25 0;
+        background-position: -@icon-width*25 @icon-normal-top;
+    }
+    &.hide-password {
+        background-position: -@icon-width*26 0;
+        background-position: -@icon-width*26 @icon-normal-top;
+    }
+    &.search-close {
+        background-position: -@icon-width*18 0;
+        background-position: -@icon-width*18 @icon-normal-top;
+    }
+    &.search-arrow-up {
+        background-position: -@icon-width*27 0;
+        background-position: -@icon-width*27 @icon-normal-top;
+    }
+    &.search-arrow-down {
+        background-position: -@icon-width*28 0;
+        background-position: -@icon-width*28 @icon-normal-top;
+    }
 }
 
 .btn {
@@ -590,11 +635,13 @@
     display: inline-block;
     line-height: 22px;
     padding: 0 0 0 3px;
+    vertical-align: middle;
 }
 
 #page-number {
     .masked {
         cursor: pointer;
+        line-height: 22px;
     }
 }
 
@@ -612,6 +659,32 @@
     font-size: 11px;
 }
 
+.menu-zoom {
+    line-height: @line-height-base;
+
+    .title {
+        padding: 5px 5px 5px 28px;
+        float: left;
+        font-weight: normal;
+        font-size: 11px;
+        margin: 0px;
+        text-overflow: ellipsis;
+    }
+
+    .zoom {
+        padding: 5px 3px;
+        float: right;
+        min-width: 40px;
+        text-align: center;
+        font-weight: normal;
+        font-size: 11px;
+        padding-bottom: 0px;
+    }
+    .mi-icon  {
+        margin: 0;
+    }
+}
+
 .font-size-small {
     .fontsize(@font-size-small);
 }
@@ -623,3 +696,7 @@
 .font-size-large {
     .fontsize(@font-size-large);
 }
+
+.search-bar {
+    z-index: 50;
+}

apps/common/locale.js

@@ -40,7 +40,8 @@ Common.Locale = new(function() {
     var loadcallback,
         apply = false,
         defLang = '{{DEFAULT_LANG}}',
-        currentLang = defLang;
+        currentLang = defLang,
+        _4letterLangs = ['pt-pt', 'zh-tw'];
 
     var _applyLocalization = function(callback) {
         try {
@@ -87,6 +88,10 @@ Common.Locale = new(function() {
         return currentLang;
     };
 
+    var _getDefaultLanguage = function() {
+        return defLang;
+    };
+
     var _getLoadedLanguage = function() {
         return loadedLang;
     };
@@ -99,11 +104,17 @@ Common.Locale = new(function() {
     };
 
     var _requireLang = function (l) {
-        var lang = (l || _getUrlParameterByName('lang') || defLang).split(/[\-_]/)[0];
+        typeof l != 'string' && (l = null);
+        var lang = (l || _getUrlParameterByName('lang') || defLang);
+        var idx4Letters = _4letterLangs.indexOf(lang.replace('_', '-').toLowerCase()); // try to load 4 letters language
+        lang = (idx4Letters<0) ? lang.split(/[\-_]/)[0] : _4letterLangs[idx4Letters];
         currentLang = lang;
         fetch('locale/' + lang + '.json')
             .then(function(response) {
                 if (!response.ok) {
+                    if (idx4Letters>=0) { // try to load 2-letters language
+                        throw new Error('4letters error');
+                    }
                     currentLang = defLang;
                     if (lang != defLang)
                         /* load default lang if fetch failed */
@@ -127,6 +138,12 @@ Common.Locale = new(function() {
                 l10n = json || {};
                 apply && _applyLocalization();
             }).catch(function(e) {
+                if ( /4letters/.test(e) ) {
+                    return setTimeout(function(){
+                        _requireLang(lang.split(/[\-_]/)[0]);
+                    }, 0);
+                }
+
                 if ( !/loaded/.test(e) && currentLang != defLang && defLang && defLang.length < 3 ) {
                     return setTimeout(function(){
                         _requireLang(defLang)
@@ -157,7 +174,8 @@ Common.Locale = new(function() {
     return {
         apply: _applyLocalization,
         get: _get,
-        getCurrentLanguage: _getCurrentLanguage
+        getCurrentLanguage: _getCurrentLanguage,
+        getDefaultLanguage: _getDefaultLanguage
     };
     
 })();

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

@@ -210,8 +210,10 @@ define([
                     templateBtnIcon +
                 '</div>' +
                 '<div class="inner-box-caption">' +
-                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caption"><%= caption %>' +
                         '<i class="caret"></i>' +
+                    '</span>' +
+                    '<i class="caret compact-caret"></i>' +
                 '</div>' +
             '</button>' +
         '</div>';
@@ -225,12 +227,38 @@ define([
             '</button>' +
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
                 '<span class="btn-fixflex-vcenter">' +
-                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caption"><%= caption %>' +
                         '<i class="caret"></i>' +
                     '</span>' +
+                    '<i class="caret compact-caret"></i>' +
+                '</span>' +
             '</button>' +
         '</div>';
 
+    var getWidthOfCaption = function (txt) {
+        var el = document.createElement('span');
+        el.style.fontSize = '11px';
+        el.style.fontFamily = 'Arial, Helvetica, "Helvetica Neue", sans-serif';
+        el.style.position = "absolute";
+        el.style.top = '-1000px';
+        el.style.left = '-1000px';
+        el.innerHTML = txt;
+        document.body.appendChild(el);
+        var result = el.offsetWidth;
+        document.body.removeChild(el);
+        return result;
+    };
+
+    var getShortText = function (txt, max) {
+        var lastIndex = txt.length - 1,
+            word = txt;
+        while (getWidthOfCaption(word) > max) {
+            word = txt.slice(0, lastIndex).trim() + '...';
+            lastIndex--;
+        }
+        return word;
+    };
+
     Common.UI.Button = Common.UI.BaseView.extend({
         options : {
             id              : null,
@@ -320,6 +348,37 @@ define([
                 me.render(me.options.parentEl);
         },
 
+        getCaptionWithBreaks: function (caption) {
+            var words = caption.split(' '),
+                newCaption = null,
+                maxWidth = 85 - 4;
+            if (words.length > 1) {
+                maxWidth = !!this.menu || this.split === true ? maxWidth - 10 : maxWidth;
+                if (words.length < 3) {
+                    words[1] = getShortText(words[1], maxWidth);
+                    newCaption = words[0] + '<br>' + words[1];
+                } else {
+                    if (getWidthOfCaption(words[0] + ' ' + words[1]) < maxWidth) { // first and second words in first line
+                        words[2] = getShortText(words[2], maxWidth);
+                        newCaption = words[0] + ' ' + words[1] + '<br>' + words[2];
+                    } else if (getWidthOfCaption(words[1] + ' ' + words[2]) < maxWidth) { // second and third words in second line
+                        words[2] = getShortText(words[2], maxWidth);
+                        newCaption = words[0] + '<br>' + words[1] + ' ' + words[2];
+                    } else {
+                        words[1] = getShortText(words[1] + ' ' + words[2], maxWidth);
+                        newCaption = words[0] + '<br>' + words[1];
+                    }
+                }
+            } else {
+                var width = getWidthOfCaption(caption);
+                newCaption = width < maxWidth ? caption : getShortText(caption, maxWidth);
+                if (!!this.menu || this.split === true) {
+                    newCaption += '<br>';
+                }
+            }
+            return newCaption;
+        },
+
         render: function(parentEl) {
             var me = this;
 
@@ -341,6 +400,10 @@ define([
                         } else {
                             this.template = _.template(templateHugeCaption);
                         }
+                        var newCaption = this.getCaptionWithBreaks(this.caption);
+                        if (newCaption) {
+                            me.caption = newCaption;
+                        }
                     }
 
                     me.cmpEl = $(this.template({
@@ -748,15 +811,19 @@ define([
 
         setCaption: function(caption) {
             if (this.caption != caption) {
+                if ( /icon-top/.test(this.cls) && !!this.caption && /huge/.test(this.cls) ) {
+                    var newCaption = this.getCaptionWithBreaks(caption);
+                    this.caption = newCaption || caption;
+                } else
                     this.caption = caption;
 
                 if (this.rendered) {
                     var captionNode = this.cmpEl.find('.caption');
 
                     if (captionNode.length > 0) {
-                        captionNode.text(caption);
+                        captionNode.html(this.caption);
                     } else {
-                        this.cmpEl.find('button:first').addBack().filter('button').text(caption);
+                        this.cmpEl.find('button:first').addBack().filter('button').html(this.caption);
                     }
                 }
             }

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

@@ -456,6 +456,13 @@ define([
             }
         },
 
+        focus: function () {
+            var me = this;
+            me.enableKeyEvents && me.monthPicker && _.delay(function() {
+                me.monthPicker.focus();
+            }, 10);
+        },
+
         textJanuary: 'January',
         textFebruary: 'February',
         textMarch: 'March',

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

@@ -55,12 +55,15 @@ define([
 
         getPicker: function(color, colors) {
             if (!this.colorPicker) {
-                this.colorPicker = new Common.UI.ThemeColorPalette({
+                var config = {
                     el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
-                    transparent: this.options.transparent,
                     value: color,
                     colors: colors
-                });
+                };
+                (this.options.transparent!==undefined) && (config['transparent'] = this.options.transparent);
+                (this.options.hideEmptyColors!==undefined) && (config['hideEmptyColors'] = this.options.hideEmptyColors);
+
+                this.colorPicker = new Common.UI.ThemeColorPalette(config);
                 this.colorPicker.on('select', _.bind(this.onColorSelect, this));
                 this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
                 if (this.options.auto) {
@@ -80,7 +83,7 @@ define([
         getMenu: function(options) {
             if (typeof this.menu !== 'object') {
                 options = options || this.options;
-                var height = options.paletteHeight || 240,
+                var height = options.paletteHeight ? options.paletteHeight + 'px' : 'auto',
                     id = Common.UI.getId(),
                     auto = [];
                 if (options.auto) {
@@ -98,7 +101,8 @@ define([
                     cls: 'shifted-left',
                     additionalAlign: options.additionalAlign,
                     items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
-                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 164px; height:' + height + '; display: inline-block;"></div>') },
+                        {caption: '--'},
                         {
                             id: id + '-color-new',
                             template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')

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

@@ -358,6 +358,9 @@ define([
                 Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl);
                 if (this.options.takeFocusOnClose) {
                     var me = this;
+                    (me._input && me._input.length>0 && !me.editable) && (me._input[0].selectionStart===me._input[0].selectionEnd) && setTimeout(function() {
+                        me._input[0].selectionStart = me._input[0].selectionEnd = 0;
+                    },1);
                     setTimeout(function(){me.focus();}, 1);
                 }
             },
@@ -545,6 +548,7 @@ define([
             },
 
             setDisabled: function(disabled) {
+                disabled = !!disabled;
                 this.disabled = disabled;
 
                 if (!this.rendered)

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

@@ -66,12 +66,12 @@ define([
             spriteCols     = 1,
             applicationPixelRatio = Common.Utils.applicationPixelRatio();
 
-        if (typeof window['AscDesktopEditor'] === 'object') {
-            thumbs[0].path     = window['AscDesktopEditor'].getFontsSprite('');
-            thumbs[1].path     = window['AscDesktopEditor'].getFontsSprite('@1.25x');
-            thumbs[2].path     = window['AscDesktopEditor'].getFontsSprite('@1.5x');
-            thumbs[3].path     = window['AscDesktopEditor'].getFontsSprite('@1.75x');
-            thumbs[4].path     = window['AscDesktopEditor'].getFontsSprite('@2x');
+        if ( Common.Controllers.Desktop.isActive() ) {
+            thumbs[0].path     = Common.Controllers.Desktop.call('getFontsSprite');
+            thumbs[1].path     = Common.Controllers.Desktop.call('getFontsSprite', '@1.25x');
+            thumbs[2].path     = Common.Controllers.Desktop.call('getFontsSprite', '@1.5x');
+            thumbs[3].path     = Common.Controllers.Desktop.call('getFontsSprite', '@1.75x');
+            thumbs[4].path     = Common.Controllers.Desktop.call('getFontsSprite', '@2x');
         }
 
         var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);
@@ -88,6 +88,201 @@ define([
         thumbCanvas.height  = thumbs[thumbIdx].height;
         thumbCanvas.width   = thumbs[thumbIdx].width;
 
+        function CThumbnailLoader() {
+            this.supportBinaryFormat = !(Common.Controllers.Desktop.isActive() && !Common.Controllers.Desktop.isFeatureAvailable('isSupportBinaryFontsSprite'));
+            // наш формат - альфамаска с сжатием типа rle для полностью прозрачных пикселов
+
+            this.image = null;
+            this.binaryFormat = null;
+            this.data = null;
+            this.width = 0;
+            this.height = 0;
+            this.heightOne = 0;
+            this.count = 0;
+            this.offsets = null;
+
+            this.load = function(url, callback) {
+                if (!callback)
+                    return;
+
+                if (!this.supportBinaryFormat) {
+                    this.width = thumbs[thumbIdx].width;
+                    this.heightOne = thumbs[thumbIdx].height;
+
+                    this.image = new Image();
+                    this.image.onload = callback;
+                    this.image.src = thumbs[thumbIdx].path;
+                } else {
+                    var me = this;
+                    var xhr = new XMLHttpRequest();
+                    xhr.open('GET', url + ".bin", true);
+                    xhr.responseType = 'arraybuffer';
+
+                    if (xhr.overrideMimeType)
+                        xhr.overrideMimeType('text/plain; charset=x-user-defined');
+                    else
+                        xhr.setRequestHeader('Accept-Charset', 'x-user-defined');
+
+                    xhr.onload = function() {
+                        // TODO: check errors
+                        me.binaryFormat = new Uint8Array(this.response);
+                        callback();
+                    };
+
+                    xhr.send(null);
+                }
+            };
+
+            this.openBinary = function(arrayBuffer) {
+                //var t1 = performance.now();
+
+                var binaryAlpha = this.binaryFormat;
+                this.width      = (binaryAlpha[0] << 24) | (binaryAlpha[1] << 16) | (binaryAlpha[2] << 8) | (binaryAlpha[3] << 0);
+                this.heightOne  = (binaryAlpha[4] << 24) | (binaryAlpha[5] << 16) | (binaryAlpha[6] << 8) | (binaryAlpha[7] << 0);
+                this.count      = (binaryAlpha[8] << 24) | (binaryAlpha[9] << 16) | (binaryAlpha[10] << 8) | (binaryAlpha[11] << 0);
+                this.height     = this.count * this.heightOne;
+
+                var MAX_MEMORY_SIZE = 50000000;
+                var memorySize = 4 * this.width * this.height;
+                var isOffsets = (memorySize > MAX_MEMORY_SIZE) ? true : false;
+                    
+                if (!isOffsets)
+                    this.data = new Uint8ClampedArray(memorySize);
+                else
+                    this.offsets = new Array(this.count);
+
+                var binaryIndex = 12;
+                var binaryLen = binaryAlpha.length;
+                var index = 0;
+
+                var len0 = 0;
+                var tmpValue = 0;
+
+                if (!isOffsets) {
+                    var imagePixels = this.data;
+                    while (binaryIndex < binaryLen) {
+                        tmpValue = binaryAlpha[binaryIndex++];
+                        if (0 == tmpValue) {
+                            len0 = binaryAlpha[binaryIndex++];
+                            while (len0 > 0) {
+                                len0--;
+                                imagePixels[index] = imagePixels[index + 1] = imagePixels[index + 2] = 255;
+                                imagePixels[index + 3] = 0; // this value is already 0.
+                                index += 4;
+                            }
+                        } else {
+                            imagePixels[index] = imagePixels[index + 1] = imagePixels[index + 2] = 255 - tmpValue;
+                            imagePixels[index + 3] = tmpValue;
+                            index += 4;
+                        }
+                    }
+                } else {
+                    var module = this.width * this.heightOne;
+                    var moduleCur = module - 1;
+                    while (binaryIndex < binaryLen) {
+                        tmpValue = binaryAlpha[binaryIndex++];
+                        if (0 == tmpValue) {
+                            len0 = binaryAlpha[binaryIndex++];
+                            while (len0 > 0) {
+                                len0--;
+                                moduleCur++;
+                                if (moduleCur === module) {
+                                    this.offsets[index++] = { pos : binaryIndex, len : len0 + 1 };
+                                    moduleCur = 0;
+                                }
+                            }
+                        } else {
+                            moduleCur++;
+                            if (moduleCur === module) {
+                                this.offsets[index++] = { pos : binaryIndex - 1, len : -1 };
+                                moduleCur = 0;
+                            }
+                        }
+                    }
+                }
+
+                if (!this.offsets)
+                    delete this.binaryFormat;
+
+                //var t2 = performance.now();
+                //console.log(t2 - t1);
+            };
+
+            this.getImage = function(index, canvas, ctx) {
+
+                //var t1 = performance.now();
+                if (!canvas)
+                {
+                    canvas = document.createElement("canvas");
+                    canvas.width = this.width;
+                    canvas.height = this.heightOne;
+                    canvas.style.width = iconWidth + "px";
+                    canvas.style.height = iconHeight + "px";
+
+                    ctx = canvas.getContext("2d");
+                }
+
+                if (this.supportBinaryFormat) {
+                    if (!this.data && !this.offsets) {
+                        this.openBinary(this.binaryFormat);
+                    }
+
+                    var dataTmp = ctx.createImageData(this.width, this.heightOne);
+                    var sizeImage = 4 * this.width * this.heightOne;
+
+                    if (!this.offsets) {
+                        dataTmp.data.set(new Uint8ClampedArray(this.data.buffer, index * sizeImage, sizeImage));                        
+                    } else {
+                        var binaryAlpha = this.binaryFormat;
+                        var binaryIndex = this.offsets[index].pos;
+                        var alphaChannel = 0;
+                        var pixelsCount = this.width * this.heightOne;
+                        var tmpValue = 0, len0 = 0;
+                        var imagePixels = dataTmp.data;
+                        if (-1 != this.offsets[index].len) {
+                            /*
+                            // this values is already 0.
+                            for (var i = 0; i < this.offsets[index].len; i++) {
+                                pixels[alphaChannel] = 0;
+                                alphaChannel += 4;
+                            }
+                            */
+                            alphaChannel += 4 * this.offsets[index].len;
+                        }
+                        while (pixelsCount > 0) {
+                            tmpValue = binaryAlpha[binaryIndex++];
+                            if (0 == tmpValue) {
+                                len0 = binaryAlpha[binaryIndex++];
+                                if (len0 > pixelsCount)
+                                    len0 = pixelsCount;
+                                while (len0 > 0) {
+                                    len0--;
+                                    imagePixels[alphaChannel] = imagePixels[alphaChannel + 1] = imagePixels[alphaChannel + 2] = 255;
+                                    imagePixels[alphaChannel + 3] = 0; // this value is already 0.
+                                    alphaChannel += 4;
+                                    pixelsCount--;
+                                }
+                            } else {
+                                imagePixels[alphaChannel] = imagePixels[alphaChannel + 1] = imagePixels[alphaChannel + 2] = 255 - tmpValue;
+                                imagePixels[alphaChannel + 3] = tmpValue;
+                                alphaChannel += 4;
+                                pixelsCount--;
+                            }
+                        }
+                    }
+                    ctx.putImageData(dataTmp, 0, 0);
+                } else {
+                    ctx.clearRect(0, 0, this.width, this.heightOne);
+                    ctx.drawImage(this.image, 0, -this.heightOne * index);
+                }
+
+                //var t2 = performance.now();
+                //console.log(t2 - t1);
+
+                return canvas;
+            };
+        }
+
         return {
             template: _.template([
                 '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
@@ -229,8 +424,10 @@ define([
                         me.onAfterHideMenu(e);
                     }, 10);
                 } else if (e.keyCode != Common.UI.Keys.RETURN && e.keyCode != Common.UI.Keys.CTRL && e.keyCode != Common.UI.Keys.SHIFT && e.keyCode != Common.UI.Keys.ALT && e.keyCode != Common.UI.Keys.TAB){
-                    if (!this.isMenuOpen() && !e.ctrlKey)
+                    if (!this.isMenuOpen() && !e.ctrlKey) {
                         this.openMenu();
+                        (this.recent > 0) && this.flushVisibleFontsTiles();
+                    }
 
                     if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
                         _.delay(function() {
@@ -303,10 +500,8 @@ define([
                     return img != null ? img[0].src : undefined;
                 }
 
-                thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
-                thumbContext.drawImage(this.spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(opts.imgidx/spriteCols));
-
-                return thumbCanvas.toDataURL();
+                var index = Math.floor(opts.imgidx/spriteCols);
+                return this.spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
             },
 
             getImageWidth: function() {
@@ -322,11 +517,8 @@ define([
             },
 
             loadSprite: function(callback) {
-                if (callback) {
-                    this.spriteThumbs = new Image();
-                    this.spriteThumbs.onload = callback;
-                    this.spriteThumbs.src = thumbs[thumbIdx].path;
-                }
+                this.spriteThumbs = new CThumbnailLoader();
+                this.spriteThumbs.load(thumbs[thumbIdx].path, callback);
             },
 
             fillFonts: function(store, select) {
@@ -455,6 +647,7 @@ define([
                     this.trigger('show:after', this, e);
                     this.flushVisibleFontsTiles();
                     this.updateVisibleFontsTiles(null, 0);
+                    Common.Utils.isGecko && this.scroller && this.scroller.update();
                 } else {
                     Common.UI.ComboBox.prototype.onAfterShowMenu.apply(this, arguments);
                 }
@@ -551,19 +744,8 @@ define([
                 for (j = 0; j < storeCount; ++j) {
                     if (from <= j && j < to) {
                         if (null === me.tiles[j]) {
-                            var fontImage = document.createElement('canvas');
-                            var context = fontImage.getContext('2d');
-
-                            fontImage.height = thumbs[thumbIdx].height;
-                            fontImage.width = thumbs[thumbIdx].width;
-
-                            fontImage.style.width = iconWidth + 'px';
-                            fontImage.style.height = iconHeight + 'px';
-
                             index = Math.floor(me.store.at(j).get('imgidx')/spriteCols);
-
-                            context.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
-                            context.drawImage(me.spriteThumbs, 0, -thumbs[thumbIdx].height * index);
+                            var fontImage = me.spriteThumbs.getImage(index);
 
                             me.tiles[j] = fontImage;
                             $(listItems[j]).get(0).appendChild(fontImage);

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

@@ -81,6 +81,7 @@ define([
             this.style       = this.options.style;
             this.hint        = this.options.hint;
             this.store       = this.options.store || new Common.UI.DataViewStore();
+            this.groups      = this.options.groups;
             this.itemWidth   = this.options.itemWidth;
             this.itemHeight  = this.options.itemHeight;
             this.menuMaxHeight = this.options.menuMaxHeight;
@@ -92,18 +93,19 @@ define([
             this.needFillComboView = false;
             this.minWidth = this.options.minWidth;
             this.delayRenderTips = this.options.delayRenderTips || false;
-
-            this.fieldPicker = new Common.UI.DataView({
-                cls: 'field-picker',
-                allowScrollbar: false,
-                itemTemplate : _.template([
+            this.itemTemplate   = this.options.itemTemplate || _.template([
                 '<div class="style" id="<%= id %>">',
-                        '<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',
+                    '<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '" + <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
                     '<% if (typeof title !== "undefined") {%>',
                         '<span class="title"><%= title %></span>',
                     '<% } %>',
                 '</div>'
-                ].join('')),
+            ].join(''));
+
+            this.fieldPicker = new Common.UI.DataView({
+                cls: 'field-picker',
+                allowScrollbar: false,
+                itemTemplate : this.itemTemplate,
                 delayRenderTips: this.delayRenderTips
             });
 
@@ -128,15 +130,9 @@ define([
                 restoreHeight: this.menuMaxHeight,
                 style: 'max-height: '+this.menuMaxHeight+'px;',
                 enableKeyEvents: this.options.enableKeyEvents,
+                groups: this.groups,
                 store: this.store,
-                itemTemplate : _.template([
-                    '<div class="style" id="<%= id %>">',
-                        '<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',
-                        '<% if (typeof title !== "undefined") {%>',
-                            '<span class="title"><%= title %></span>',
-                        '<% } %>',
-                    '</div>'
-                ].join('')),
+                itemTemplate : this.itemTemplate,
                 delayRenderTips: this.delayRenderTips
             });
 
@@ -259,6 +255,7 @@ define([
                 var picker = this.menuPicker;
                 if (picker) {
                     var record = picker.getSelectedRec();
+                    this.itemMarginLeft = undefined;
                     this.fillComboView(record || picker.store.at(0), !!record, true);
 
                     picker.onResize();
@@ -384,6 +381,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             this.disabled = disabled;
 
             if (!this.rendered)
@@ -418,6 +416,9 @@ define([
                     if (forceFill || !me.fieldPicker.store.findWhere({'id': record.get('id')})){
                         if (me.itemMarginLeft===undefined) {
                             var div = $($(this.menuPicker.el).find('.inner > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail)')[0]);
+                            if (!div || div.length<1) { // try to find items in groups
+                                div = $($(this.menuPicker.el).find('.inner .group-items-container > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail)')[0]);
+                            }
                             if (div.length > 0) {
                                 me.itemMarginLeft  = parseInt(div.css('margin-left'));
                                 me.itemMarginRight = parseInt(div.css('margin-right'));
@@ -458,6 +459,7 @@ define([
                             me.resumeEvents();
                         }
                     }
+                    return me.fieldPicker.store.models; // return list of visible items
                 }
             }
         },

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

@@ -128,6 +128,39 @@ define([
                 recents = Common.localStorage.getItem(this.appPrefix + 'recent-shapes');
             recents = recents ? JSON.parse(recents) : [];
 
+            // check lang
+            if (recents.length > 0) {
+                var isTranslated = _.findWhere(groups, {groupName: recents[0].groupName});
+                if (!isTranslated) {
+                    for (var r = 0; r < recents.length; r++) {
+                        var type = recents[r].data.shapeType,
+                            record;
+                        for (var g = 0; g < groups.length; g++) {
+                            var store = groups[g].groupStore,
+                                groupName = groups[g].groupName;
+                            for (var i = 0; i < store.length; i++) {
+                                if (store.at(i).get('data').shapeType === type) {
+                                    record = store.at(i).toJSON();
+                                    recents[r] = {
+                                        data: record.data,
+                                        tip: record.tip,
+                                        allowSelected: record.allowSelected,
+                                        selected: false,
+                                        groupName: groupName
+                                    };
+                                    break;
+                                }
+                            }
+                            if (record) {
+                                record = undefined;
+                                break;
+                            }
+                        }
+                    }
+                    Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(recents));
+                }
+            }
+
             if (recents.length < 12) {
                 var count = 12 - recents.length;
 
@@ -439,6 +472,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             this.disabled = disabled;
 
             if (!this.rendered)

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

@@ -223,6 +223,7 @@ define([
             listenStoreEvents: true,
             allowScrollbar: true,
             scrollAlwaysVisible: false,
+            minScrollbarLength: 40,
             showLast: true,
             useBSKeydown: false,
             cls: ''
@@ -272,10 +273,12 @@ define([
             me.listenStoreEvents= (me.options.listenStoreEvents!==undefined) ? me.options.listenStoreEvents : true;
             me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
             me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
+            me.minScrollbarLength = me.options.minScrollbarLength || 40;
             me.tabindex = me.options.tabindex || 0;
             me.delayRenderTips = me.options.delayRenderTips || false;
             if (me.parentMenu)
                 me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
+            me.delaySelect = me.options.delaySelect || false;
             me.rendered       = false;
             me.dataViewItems = [];
             if (me.options.keyMoveDirection=='vertical')
@@ -299,7 +302,8 @@ define([
                 this.cmpEl = $(this.template({
                     groups: me.groups ? me.groups.toJSON() : null,
                     style: me.style,
-                    cls: me.cls
+                    cls: me.cls,
+                    options: me.options
                 }));
 
                 parentEl.html(this.cmpEl);
@@ -308,7 +312,8 @@ define([
                 this.cmpEl.html(this.template({
                     groups: me.groups ? me.groups.toJSON() : null,
                     style: me.style,
-                    cls: me.cls
+                    cls: me.cls,
+                    options: me.options
                 }));
             }
 
@@ -352,7 +357,7 @@ define([
                 this.scroller = new Common.UI.Scroller({
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                    minScrollbarLength  : 40,
+                    minScrollbarLength  : this.minScrollbarLength,
                     wheelSpeed: 10,
                     alwaysVisibleY: this.scrollAlwaysVisible
                 });
@@ -393,8 +398,9 @@ define([
                     rec.set({selected: false});
                 });
 
-                if (record)
+                if (record) {
                     record.set({selected: true});
+                }
             } else {
                 if (record)
                     record.set({selected: !record.get('selected')});
@@ -447,24 +453,35 @@ define([
                     }
                 }
 
+                var idx = _.indexOf(this.store.models, record);
                 if (innerEl) {
-                    if (opts && opts.at == 0)
-                        innerEl.prepend(view.render().el); else
+                    if (opts && (typeof opts.at==='number') && opts.at >= 0) {
+                        if (opts.at == 0) {
+                            innerEl.prepend(view.render().el);
+                        } else if (!(this.groups && this.groups.length > 0)) { // for dataview without groups
+                            var innerDivs = innerEl.find('> div');
+                            if (idx > 0)
+                                $(innerDivs.get(idx - 1)).after(view.render().el);
+                            else {
+                                (innerDivs.length > 0) ? $(innerDivs[idx]).before(view.render().el) : innerEl.append(view.render().el);
+                            }
+                        } else
+                            innerEl.append(view.render().el);
+                    } else
                         innerEl.append(view.render().el);
 
                     (this.dataViewItems.length<1) && innerEl.find('.empty-text').remove();
-                    var idx = _.indexOf(this.store.models, record);
                     this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx));
 
                     var me = this,
                         view_el = $(view.el),
                         tip = record.get('tip');
-                    if (tip) {
+                    if (tip!==undefined && tip!==null) {
                         if (this.delayRenderTips)
                             view_el.one('mouseenter', function(){ // hide tooltip when mouse is over menu
                                 view_el.attr('data-toggle', 'tooltip');
                                 view_el.tooltip({
-                                    title       : tip,
+                                    title       : record.get('tip'), // use actual tip, because it can be changed
                                     placement   : 'cursor',
                                     zIndex : me.tipZIndex
                                 });
@@ -473,7 +490,7 @@ define([
                         else {
                             view_el.attr('data-toggle', 'tooltip');
                             view_el.tooltip({
-                                title       : tip,
+                                title       : record.get('tip'), // use actual tip, because it can be changed
                                 placement   : 'cursor',
                                 zIndex : me.tipZIndex
                             });
@@ -506,7 +523,8 @@ define([
             $(this.el).html(this.template({
                 groups: this.groups ? this.groups.toJSON() : null,
                 style: this.style,
-                cls: this.cls
+                cls: this.cls,
+                options: this.options
             }));
 
             if (!_.isUndefined(this.scroller)) {
@@ -532,7 +550,7 @@ define([
                 this.scroller = new Common.UI.Scroller({
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                    minScrollbarLength  : 40,
+                    minScrollbarLength  : this.minScrollbarLength,
                     wheelSpeed: 10,
                     alwaysVisibleY: this.scrollAlwaysVisible
                 });
@@ -585,15 +603,31 @@ define([
 
             window._event = e;  //  for FireFox only
 
-            if (this.showLast) this.selectRecord(record);
+            if (this.showLast) {
+                if (!this.delaySelect) {
+                    this.selectRecord(record);
+                } else {
+                    _.each(this.store.where({selected: true}), function(rec){
+                        rec.set({selected: false});
+                    });
+                    if (record) {
+                        setTimeout(_.bind(function () {
+                            record.set({selected: true});
+                            this.trigger('item:click', this, view, record, e);
+                        }, this), 300);
+                    }
+                }
+            }
             this.lastSelectedRec = null;
 
             var tip = view.$el.data('bs.tooltip');
             if (tip) (tip.tip()).remove();
 
             if (!this.isSuspendEvents) {
+                if (!this.delaySelect) {
                     this.trigger('item:click', this, view, record, e);
                 }
+            }
         },
 
         onDblClickItem: function(view, record, e) {
@@ -760,6 +794,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             this.disabled = disabled;
             $(this.el).find('.inner').addBack().filter('.inner').toggleClass('disabled', disabled);
         },
@@ -770,6 +805,12 @@ define([
 
         setEmptyText: function(emptyText) {
             this.emptyText = emptyText;
+
+            if (this.store.length < 1) {
+                var el = $(this.el).find('.inner').addBack().filter('.inner').find('.empty-text td');
+                if ( el.length>0 )
+                    el.text(this.emptyText);
+            }
         },
 
         alignPosition: function() {
@@ -783,7 +824,7 @@ define([
                 paddings = parseInt(menuRoot.css('padding-top')) + parseInt(menuRoot.css('padding-bottom')),
                 menuH = menuRoot.outerHeight(),
                 top = parseInt(menuRoot.css('top')),
-                props = {minScrollbarLength  : 40};
+                props = {minScrollbarLength  : this.minScrollbarLength};
             this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
 
             if (top + menuH > docH ) {
@@ -805,14 +846,14 @@ define([
             };
 
             var el = $(this.dataViewItems[0].el),
-                itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
+                itemW = el.outerWidth() + parseFloat(el.css('margin-left')) + parseFloat(el.css('margin-right')),
                 offsetLeft = this.$el.offset().left,
                 offsetTop = el.offset().top,
                 prevtop = -1, topIdx = 0, leftIdx = 0;
 
             for (var i=0; i<this.dataViewItems.length; i++) {
                 var top = $(this.dataViewItems[i].el).offset().top - offsetTop;
-                leftIdx = Math.floor(($(this.dataViewItems[i].el).offset().left - offsetLeft)/itemW);
+                leftIdx = Math.floor(($(this.dataViewItems[i].el).offset().left - offsetLeft)/itemW + 0.01);
                 if (top>prevtop) {
                     prevtop = top;
                     this._layoutParams.itemsIndexes.push([]);
@@ -954,7 +995,7 @@ define([
                 this.scroller = new Common.UI.Scroller({
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                    minScrollbarLength  : 40,
+                    minScrollbarLength  : this.minScrollbarLength,
                     wheelSpeed: 10,
                     alwaysVisibleY: this.scrollAlwaysVisible
                 });
@@ -1046,7 +1087,7 @@ define([
             this.scroller = new Common.UI.Scroller({
                 el: $(this.el).find('.inner').addBack().filter('.inner'),
                 useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                minScrollbarLength  : 40,
+                minScrollbarLength  : this.minScrollbarLength,
                 wheelSpeed: 10,
                 alwaysVisibleY: this.scrollAlwaysVisible
             });
@@ -1234,6 +1275,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             this.disabled = disabled;
             $(this.el).find('.inner').addBack().filter('.inner').toggleClass('disabled', disabled);
         },
@@ -1253,7 +1295,7 @@ define([
                 paddings = parseInt(menuRoot.css('padding-top')) + parseInt(menuRoot.css('padding-bottom')),
                 menuH = menuRoot.outerHeight(),
                 top = parseInt(menuRoot.css('top')),
-                props = {minScrollbarLength  : 40};
+                props = {minScrollbarLength  : this.minScrollbarLength};
             this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
 
             if (top + menuH > docH ) {
@@ -1275,7 +1317,7 @@ define([
             };
 
             var el = this.dataViewItems[0].el,
-                itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
+                itemW = el.outerWidth() + parseFloat(el.css('margin-left')) + parseFloat(el.css('margin-right')),
                 offsetLeft = this.$el.offset().left,
                 offsetTop = el.offset().top,
                 prevtop = -1, topIdx = 0, leftIdx = 0;
@@ -1363,6 +1405,39 @@ define([
 
             me.recentShapes = recentArr;
 
+            // check lang
+            if (me.recentShapes.length > 0) {
+                var isTranslated = _.findWhere(me.groups, {groupName: me.recentShapes[0].groupName});
+                if (!isTranslated) {
+                    for (var r = 0; r < me.recentShapes.length; r++) {
+                        var type = me.recentShapes[r].data.shapeType,
+                            record;
+                        for (var g = 0; g < me.groups.length; g++) {
+                            var store = me.groups[g].groupStore,
+                                groupName = me.groups[g].groupName;
+                            for (var i = 0; i < store.length; i++) {
+                                if (store.at(i).get('data').shapeType === type) {
+                                    record = store.at(i).toJSON();
+                                    me.recentShapes[r] = {
+                                        data: record.data,
+                                        tip: record.tip,
+                                        allowSelected: record.allowSelected,
+                                        selected: false,
+                                        groupName: groupName
+                                    };
+                                    break;
+                                }
+                            }
+                            if (record) {
+                                record = undefined;
+                                break;
+                            }
+                        }
+                    }
+                    Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(me.recentShapes));
+                }
+            }
+
             // Add default recent
 
             if (me.recentShapes.length < 12) {
@@ -1419,7 +1494,7 @@ define([
                 var models = group.groupStore.models;
                 if (index > 0) {
                     for (var i = 0; i < models.length; i++) {
-                        models.at(i).set({groupName: group.groupName})
+                        models[i].set({groupName: group.groupName});
                     }
                 }
                 store.add(models);
@@ -1555,11 +1630,8 @@ define([
                     selected: false,
                     groupName: groupName
                 };
-            me.recentShapes.unshift(model);
-            if (me.recentShapes.length > 12) {
-                me.recentShapes.splice(12, 1);
-            }
-            Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(me.recentShapes));
+            var arr = [model].concat(me.recentShapes.slice(0, 11));
+            Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(arr));
             me.recentShapes = undefined;
         },
         updateRecents: function () {
@@ -1580,7 +1652,18 @@ define([
 
             if (recents.length > 0 && diff) {
                 me.recentShapes = recents;
-                me.groups[0].groupStore.reset(me.recentShapes);
+                var resentsStore = new Common.UI.DataViewStore();
+                _.each(me.recentShapes, function (recent) {
+                    var model = {
+                        data: {shapeType: recent.data.shapeType},
+                        tip: recent.tip,
+                        allowSelected: recent.allowSelected,
+                        selected: recent.selected,
+                        groupName: recent.groupName
+                    };
+                    resentsStore.push(model);
+                });
+                me.groups[0].groupStore = resentsStore;
 
                 var store = new Common.UI.DataViewStore();
                 _.each(me.groups, function (group) {

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

@@ -49,7 +49,7 @@ define([
     Common.UI.DimensionPicker = Common.UI.BaseView.extend((function(){
         return {
             options: {
-                itemSize    : 18,
+                itemSize    : 20,
                 minRows     : 5,
                 minColumns  : 5,
                 maxRows     : 20,

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

@@ -81,7 +81,7 @@ define([
             template: _.template([
                 '<div class="input-field" style="<%= style %>">',
                     '<input ',
-                        'type="text" ',
+                        'type="<%= type %>" ',
                         'name="<%= name %>" ',
                         'spellcheck="<%= spellcheck %>" ',
                         'class="form-control <%= cls %>" ',
@@ -164,8 +164,6 @@ define([
                         this._input.on('keydown',    _.bind(this.onKeyDown, this));
                         this._input.on('keyup',    _.bind(this.onKeyUp, this));
                         if (this.validateOnChange) this._input.on('input', _.bind(this.onInputChanging, this));
-                        if (this.type=='password') this._input.on('input', _.bind(this.checkPasswordType, this));
-
                         if (this.maxLength) this._input.attr('maxlength', this.maxLength);
                     }
 
@@ -190,15 +188,6 @@ define([
                 return this;
             },
 
-            checkPasswordType: function(){
-                if(this.type == 'text') return;
-                if (this._input.val() !== '') {
-                    (this._input.attr('type') !== 'password') && this._input.attr('type', 'password');
-                } else {
-                    this._input.attr('type', 'text');
-                }
-            },
-
             _doChange: function(e, extra) {
                 // skip processing for internally-generated synthetic event
                 // to avoid double processing
@@ -299,6 +288,7 @@ define([
             },
 
             setDisabled: function(disabled) {
+                disabled = !!disabled;
                 this.disabled = disabled;
                 $(this.el).toggleClass('disabled', disabled);
                 disabled
@@ -316,8 +306,6 @@ define([
                 if (this.rendered){
                     this._input.val(value);
                 }
-
-                (this.type=='password') && this.checkPasswordType();
             },
 
             getValue: function() {
@@ -430,23 +418,25 @@ define([
                 validateOnBlur: true,
                 disabled: false,
                 editable: true,
-                iconCls: 'btn-select-range',
+                iconCls: 'toolbar__icon btn-select-range',
                 btnHint: ''
             },
 
             template: _.template([
                 '<div class="input-field input-field-btn" style="<%= style %>">',
                     '<input ',
-                        'type="text" ',
+                        'type=<%= type %> ',
                         'name="<%= name %>" ',
                         'spellcheck="<%= spellcheck %>" ',
                         'class="form-control <%= cls %>" ',
                         'placeholder="<%= placeHolder %>" ',
                         'value="<%= value %>"',
+                        'data-hint="<%= dataHint %>"',
+                        'data-hint-offset="<%= dataHintOffset %>"',
+                        'data-hint-direction="<%= dataHintDirection %>"',
                     '>',
                     '<span class="input-error"></span>',
                     '<div class="select-button">' +
-                        '<button type="button" class="btn btn-toolbar"><i class="icon toolbar__icon <%= iconCls %>"></i></button>' +
                     '</div>',
                 '</div>'
             ].join('')),
@@ -464,8 +454,10 @@ define([
                         name        : this.name,
                         placeHolder : this.placeHolder,
                         spellcheck  : this.spellcheck,
-                        iconCls     : this.options.iconCls,
-                        scope       : me
+                        scope       : me,
+                        dataHint    : this.options.dataHint,
+                        dataHintOffset: this.options.dataHintOffset,
+                        dataHintDirection: this.options.dataHintDirection
                     }));
 
                     if (parentEl) {
@@ -482,10 +474,12 @@ define([
                     var el = this.cmpEl;
 
                     this._button = new Common.UI.Button({
-                        el: this.cmpEl.find('button'),
+                        cls: 'btn-toolbar',
                         iconCls: this.options.iconCls,
-                        hint: this.options.btnHint || ''
+                        hint: this.options.btnHint || '',
+                        menu: this.options.menu
                     });
+                    this._button.render(this.cmpEl.find('.select-button'));
                     this._button.on('click', _.bind(this.onButtonClick, this));
 
                     this._input = this.cmpEl.find('input').addBack().filter('input');
@@ -525,6 +519,7 @@ define([
             },
 
             setDisabled: function(disabled) {
+                disabled = !!disabled;
                 this.disabled = disabled;
                 $(this.el).toggleClass('disabled', disabled);
                 disabled
@@ -554,6 +549,7 @@ define([
                 style: '',
                 value: '',
                 name: '',
+                type: 'password',
                 validation: null,
                 allowBlank: true,
                 placeHolder: '',
@@ -564,7 +560,8 @@ define([
                 validateOnBlur: true,
                 disabled: false,
                 editable: true,
-                iconCls: 'btn-sheet-view',
+                showCls: 'toolbar__icon btn-sheet-view',
+                hideCls: 'toolbar__icon hide-password',
                 btnHint: '',
                 repeatInput: null,
                 showPwdOnClick: true
@@ -573,6 +570,7 @@ define([
             initialize : function(options) {
                 options = options || {};
                 options.btnHint = options.btnHint || this.textHintShowPwd;
+                options.iconCls = options.showCls || this.options.showCls;
 
                 Common.UI.InputFieldBtn.prototype.initialize.call(this, options);
 
@@ -584,7 +582,6 @@ define([
                 Common.UI.InputFieldBtn.prototype.render.call(this, parentEl);
 
                 this._btnElm = this._button.$el;
-                this._input.on('input', _.bind(this.checkPasswordType, this));
                 if(this.options.showPwdOnClick)
                     this._button.on('click', _.bind(this.passwordClick, this));
                 else
@@ -603,11 +600,19 @@ define([
                     this.passwordHide(e);
                     this.hidePwd = true;
                 }
+                var me = this;
+                var prevstart = me._input[0].selectionStart,
+                    prevend = me._input[0].selectionEnd;
+                setTimeout(function () {
+                    me.focus();
+                    me._input[0].selectionStart = prevstart;
+                    me._input[0].selectionEnd = prevend;
+                }, 1);
             },
 
             passwordShow: function (e) {
                 if (this.disabled) return;
-                this._button.setIconCls('hide-password');
+                this._button.setIconCls(this.options.hideCls);
                 this.type = 'text';
 
                 this._input.attr('type', this.type);
@@ -626,13 +631,13 @@ define([
             },
 
             passwordHide: function (e) {
-                this._button.setIconCls('btn-sheet-view');
+                this._button.setIconCls(this.options.showCls);
                 this.type = 'password';
 
-                (this._input.val() !== '') && this._input.attr('type', this.type);
+                this._input.attr('type', this.type);
                 if(this.repeatInput) {
                     this.repeatInput.type = this.type;
-                    (this.repeatInput._input.val() !== '') && this.repeatInput._input.attr('type', this.type);
+                    this.repeatInput._input.attr('type', this.type);
                 }
 
                 if(this.options.showPwdOnClick) {
@@ -641,10 +646,80 @@ define([
                 else {
                     this._btnElm.off('mouseup', this.passwordHide);
                     this._btnElm.off('mouseout', this.passwordHide);
+                    var me = this;
+                    var prevstart = me._input[0].selectionStart,
+                        prevend = me._input[0].selectionEnd;
+                    setTimeout(function () {
+                        me.focus();
+                        me._input[0].selectionStart = prevstart;
+                        me._input[0].selectionEnd = prevend;
+                    }, 1);
                 }
             },
             textHintShowPwd: 'Show password',
             textHintHidePwd: 'Hide password'
         }
     })(), Common.UI.InputFieldBtnPassword || {}));
+
+    Common.UI.InputFieldBtnCalendar = Common.UI.InputFieldBtn.extend((function (){
+        return {
+            options: {
+                id: null,
+                cls: '',
+                style: '',
+                value: '',
+                type: 'date',
+                name: '',
+                validation: null,
+                allowBlank: true,
+                placeHolder: '',
+                blankError: null,
+                spellcheck: false,
+                maskExp: '',
+                validateOnChange: false,
+                validateOnBlur: true,
+                disabled: false,
+                editable: true,
+                iconCls: 'toolbar__icon btn-datetime',
+                btnHint: '',
+                menu: true
+            },
+
+            render: function (parentEl) {
+                var me = this;
+                Common.UI.InputFieldBtn.prototype.render.call(this, parentEl);
+
+                var id = 'id-' + Common.UI.getId() + 'input-field-datetime',
+                    menu = new Common.UI.Menu({
+                        menuAlign: 'tr-br',
+                        style: 'border: none; padding: 0;',
+                        items: [
+                            {template: _.template('<div id="' + id + '" style=""></div>'), stopPropagation: true}
+                        ]
+                    });
+                $('button', this._button.cmpEl).addClass('no-caret');
+                this._button.setMenu(menu);
+                this._button.menu.on('show:after', function(menu) {
+                    if (!me.cmpCalendar) {
+                        me.cmpCalendar = new Common.UI.Calendar({
+                            el: me.cmpEl.find('#' + id),
+                            enableKeyEvents: true,
+                            firstday: 1
+                        });
+                        me.cmpCalendar.on('date:click', function (cmp, date) {
+                            me.trigger('date:click', me, date);
+                            menu.hide();
+                        });
+                        menu.alignPosition();
+                    }
+                    me.cmpCalendar.focus();
+                })
+            },
+
+            setDate: function(date) {
+                if (this.cmpCalendar && date && date instanceof Date && !isNaN(date))
+                    this.cmpCalendar && this.cmpCalendar.setDate(date);
+            }
+        }
+    })());
 });

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

@@ -0,0 +1,127 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * 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
+ *
+*/
+/**
+ *  Label.js
+ *
+ *  Created by Julia Radzhabova on 1/20/22
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/component/BaseView',
+    'underscore'
+], function (base, _) {
+    'use strict';
+
+    Common.UI.Label = Common.UI.BaseView.extend({
+
+        options : {
+            id          : null,
+            disabled    : false,
+            cls     : '',
+            iconCls     : '',
+            style       : '',
+            caption     : ''
+        },
+
+        template    : _.template('<label class="label-cmp <%= cls %>" style="<%= style %>">' +
+                                    '<% if ( iconCls ) { %>' +
+                                        '<i class="icon <%= iconCls %>"></i>' +
+                                    '<% } %>' +
+                                    '<span class="caption"><%= caption %></span>' +
+                                 '</label>'),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            this.id           = this.options.id || Common.UI.getId();
+            this.cls          = this.options.cls;
+            this.iconCls      = this.options.iconCls;
+            this.style        = this.options.style;
+            this.disabled     = this.options.disabled;
+            this.caption      = this.options.caption;
+            this.template     = this.options.template || this.template;
+            this.rendered     = false;
+
+            if (this.options.el)
+                this.render();
+        },
+
+        render: function (parentEl) {
+            var me = this;
+            if (!me.rendered) {
+                var elem = this.template({
+                    id           : me.id,
+                    cls          : me.cls,
+                    iconCls      : me.iconCls,
+                    style        : me.style,
+                    caption      : me.caption
+                });
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(elem);
+                } else {
+                    me.$el.html(elem);
+                }
+
+                this.$label = me.$el.find('.label-cmp');
+                this.rendered = true;
+            }
+
+            if (this.disabled)
+                this.setDisabled(this.disabled);
+
+            return this;
+        },
+
+        setDisabled: function(disabled) {
+            if (!this.rendered)
+                return;
+
+            disabled = (disabled===true);
+            if (disabled !== this.disabled) {
+                this.$label.toggleClass('disabled', disabled);
+            }
+
+            this.disabled = disabled;
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        }
+    });
+});

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

@@ -59,7 +59,7 @@ define([
             },
 
             template: _.template([
-                '<div class="listview inner <%= cls %>"></div>'
+                '<div class="listview inner <%= cls %>" <% if (options.dataHint) { %> data-hint="<%= options.dataHint %>" <% } if (options.dataHintDirection) { %> data-hint-direction="<%= options.dataHintDirection %>" <% } if (options.dataHintOffset) { %> data-hint-offset="<%= options.dataHintOffset %>" <% } %>></div>'
             ].join('')),
 
             onResetItems : function() {

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

@@ -377,12 +377,12 @@ define([
             onBeforeShowMenu: function(e) {
                 Common.NotificationCenter.trigger('menu:show');
                 this.trigger('show:before', this, e);
-                this.alignPosition();
+                (e && e.target===e.currentTarget) && this.alignPosition();
             },
 
             onAfterShowMenu: function(e) {
                 this.trigger('show:after', this, e);
-                if (this.scroller) {
+                if (this.scroller && e && e.target===e.currentTarget) {
                     var menuRoot = this.menuRoot;
                     if (this.wheelSpeed===undefined) {
                         var item = menuRoot.find('> li:first'),
@@ -651,7 +651,28 @@ define([
                 if (left < 0)
                     left = 0;
 
-                if (this.options.restoreHeight) {
+                if (this.options.restoreHeightAndTop) { // can change top position, if top<0 - then change menu height
+                    var cg = Common.Utils.croppedGeometry();
+                    docH = cg.height - 10;
+                    menuRoot.css('max-height', 'none');
+                    menuH = menuRoot.outerHeight();
+                    if (top + menuH > docH + cg.top) {
+                        top = docH - menuH;
+                    }
+                    if (top < cg.top)
+                        top = cg.top;
+                    if (top + menuH > docH + cg.top) {
+                        menuRoot.css('max-height', (docH - top) + 'px');
+                        (!this.scroller) && (this.scroller = new Common.UI.Scroller({
+                            el: this.$el.find('> .dropdown-menu '),
+                            minScrollbarLength: 30,
+                            suppressScrollX: true,
+                            alwaysVisibleY: this.scrollAlwaysVisible
+                        }));
+                        this.wheelSpeed = undefined;
+                    }
+                    this.scroller && this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
+                } else if (this.options.restoreHeight) {
                     if (typeof (this.options.restoreHeight) == "number") {
                         if (top + menuH > docH) {
                             menuRoot.css('max-height', (docH - top) + 'px');
@@ -954,12 +975,12 @@ define([
         onBeforeShowMenu: function(e) {
             Common.NotificationCenter.trigger('menu:show');
             this.trigger('show:before', this, e);
-            this.alignPosition();
+            (e && e.target===e.currentTarget) && this.alignPosition();
         },
 
         onAfterShowMenu: function(e) {
             this.trigger('show:after', this, e);
-            if (this.scroller) {
+            if (this.scroller && e && e.target===e.currentTarget) {
                 this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
                 var menuRoot = this.menuRoot,
                     $selected = menuRoot.find('> li .checked');

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

@@ -301,6 +301,7 @@ define([
         },
 
         onItemMouseDown: function(e) {
+            Common.UI.HintManager && Common.UI.HintManager.clearHints();
             if (e.which != 1) {
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -147,8 +147,13 @@ define([
             el.on('input', '.form-control', _.bind(this.onInput, this));
             if (!this.options.allowDecimal)
                 el.on('keypress',   '.form-control', _.bind(this.onKeyPress, this));
-            el.on('focus', 'input.form-control', function() {
-                setTimeout(function(){me.$input && me.$input.select();}, 1);
+            el.on('focus', 'input.form-control', function(e) {
+                setTimeout(function(){
+                    if (me.$input) {
+                        me.$input[0].selectionStart = 0;
+                        me.$input[0].selectionEnd = me.$input.val().length;
+                    }
+                }, 1);
             });
             Common.Utils.isGecko && el.on('blur', 'input.form-control', function() {
                 setTimeout(function(){
@@ -206,6 +211,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             var el = this.$el || $(this.el);
             if (disabled !== this.disabled) {
                 el.find('button').toggleClass('disabled', disabled);

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

@@ -52,6 +52,7 @@ define([
         var $scrollL;
         var optsFold = {timeout: 2000};
         var config = {};
+        var btnsMore = [];
 
         var onScrollTabs = function(opts, e) {
             var sv = $boxTabs.scrollLeft();
@@ -119,6 +120,7 @@ define([
                 Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
                     this.setVisible(action, visible);
                 }, this));
+                Common.NotificationCenter.on('tab:resize', _.bind(this.onResizeTabs, this));
             },
 
             afterRender: function() {
@@ -126,7 +128,9 @@ define([
 
                 $boxTabs = me.$('.tabs > ul');
                 me.$tabs = $boxTabs.find('> li');
-                me.$panels = me.$('.box-panels > .panel');
+                me.$boxpanels = me.$('.box-panels');
+                me.$panels = me.$boxpanels.find('> .panel');
+
                 optsFold.$bar = me.$('.toolbar');
                 var $scrollR = me.$('.tabs .scroll.right');
                 $scrollL = me.$('.tabs .scroll.left');
@@ -226,7 +230,7 @@ define([
                 // optsFold.timer = setTimeout(this.collapse, optsFold.timeout);
             },
 
-            onResize: function(e) {
+            onResizeTabs: function(e) {
                 if ( this.hasTabInvisible() ) {
                     if ( !$boxTabs.parent().hasClass('short') )
                         $boxTabs.parent().addClass('short');
@@ -234,7 +238,11 @@ define([
                 if ( $boxTabs.parent().hasClass('short') ) {
                     $boxTabs.parent().removeClass('short');
                 }
+            },
 
+            onResize: function(e) {
+                this.onResizeTabs();
+                this.hideMoreBtns();
                 this.processPanelVisible();
             },
 
@@ -261,7 +269,7 @@ define([
                             me._timerSetTab = false;
                         }, 500);
                         me.setTab(tab);
-                        me.processPanelVisible(null, true);
+                        // me.processPanelVisible(null, true);
                         if ( !me.isFolded ) {
                             if ( me.dblclick_timer ) clearTimeout(me.dblclick_timer);
                             me.dblclick_timer = setTimeout(function () {
@@ -286,11 +294,14 @@ define([
                 if ( tab ) {
                     me.$tabs.removeClass('active');
                     me.$panels.removeClass('active');
+                    me.hideMoreBtns();
 
                     var panel = this.$panels.filter('[data-tab=' + tab + ']');
                     if ( panel.length ) {
                         this.lastPanel = tab;
                         panel.addClass('active');
+                        me.setMoreButton(tab, panel);
+                        me.processPanelVisible(null, true, true);
                     }
 
                     if ( panel.length ) {
@@ -375,7 +386,7 @@ define([
              * hide button's caption to decrease panel width
              * ##adopt-panel-width
             **/
-            processPanelVisible: function(panel, now) {
+            processPanelVisible: function(panel, now, force) {
                 var me = this;
                 if ( me._timer_id ) clearTimeout(me._timer_id);
 
@@ -387,6 +398,7 @@ define([
                             _rightedge = data.rightedge,
                             _btns = data.buttons,
                             _flex = data.flex;
+                        var more_section = $active.find('.more-box');
 
                         if ( !_rightedge ) {
                             _rightedge = $active.get(0).getBoundingClientRect().right;
@@ -407,19 +419,22 @@ define([
                             data.flex = _flex;
                         }
 
-                        if ( _rightedge > _maxright) {
+                        if ( (_rightedge > _maxright)) {
+                            if (!more_section.is(':visible') ) {
                                 if (_flex.length>0) {
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i].el;
-                                    if (item.outerWidth() > parseInt(item.css('min-width')))
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        if (item.outerWidth() > parseInt(item.css('min-width'))) {
+                                            data.rightedge = _rightedge;
                                             return;
-                                    else
+                                        } else
                                             item.css('width', item.css('min-width'));
                                     }
                                 }
                                 for (var i=_btns.length-1; i>=0; i--) {
                                     var btn = _btns[i];
-                                if ( !btn.hasClass('compactwidth') ) {
+                                    if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
                                         btn.addClass('compactwidth');
                                         _rightedge = $active.get(0).getBoundingClientRect().right;
                                         if (_rightedge <= _maxright)
@@ -427,7 +442,11 @@ define([
                                     }
                                 }
                                 data.rightedge = _rightedge;
+                            }
+                            me.resizeToolbar(force);
                         } else {
+                            more_section.is(':visible') && me.resizeToolbar(force);
+                            if (!more_section.is(':visible')) {
                                 for (var i=0; i<_btns.length; i++) {
                                     var btn = _btns[i];
                                     if ( btn.hasClass('compactwidth') ) {
@@ -445,6 +464,8 @@ define([
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i];
                                         item.el.css('width', item.width);
+                                        data.rightedge = $active.get(0).getBoundingClientRect().right;
+                                    }
                                 }
                             }
                         }
@@ -477,6 +498,303 @@ define([
                     this.$tabs.find('> a[data-tab=' + tab + ']').parent().css('display', visible ? '' : 'none');
                     this.onResize();
                 }
+            },
+
+            setMoreButton: function(tab, panel) {
+                var me = this;
+                if (!btnsMore[tab]) {
+                    var top = panel.position().top;
+                    var box = $('<div class="more-box" style="position: absolute;right: 0; top:'+ top +'px; padding-left: 12px;padding-right: 6px;display: none;">' +
+                        '<div class="separator long" style="position: relative;display: table-cell;"></div>' +
+                        '<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
+                        '</div>');
+                    panel.append(box);
+                    btnsMore[tab] = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top dropdown-manual',
+                        caption: Common.Locale.get("textMoreButton",{name:"Common.Translation", default: "More"}),
+                        iconCls: 'toolbar__icon btn-more',
+                        enableToggle: true
+                    });
+                    btnsMore[tab].render(box.find('.slot-btn-more'));
+                    btnsMore[tab].on('toggle', function(btn, state, e) {
+                        (state) ? me.onMoreShow(btn, e) : me.onMoreHide(btn, e);
+                        Common.NotificationCenter.trigger('more:toggle', btn, state);
+                    });
+                    var moreContainer = $('<div class="dropdown-menu more-container" data-tab="' + tab + '"><div style="display: inline;"></div></div>');
+                    optsFold.$bar.append(moreContainer);
+                    btnsMore[tab].panel = moreContainer.find('div');
+                }
+                this.$moreBar = btnsMore[tab].panel;
+            },
+
+            resizeToolbar: function(reset) {
+                var $active = this.$panels.filter('.active'),
+                    more_section = $active.find('.more-box'),
+                    more_section_width = parseInt(more_section.css('width')) || 0,
+                    box_controls_width = $active.parents('.box-controls').width(),
+                    _maxright = box_controls_width,
+                    _rightedge = $active.get(0).getBoundingClientRect().right,
+                    delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
+                    hideAllMenus = false;
+                this._prevBoxWidth = _maxright;
+                more_section.is(':visible') && (_maxright -= more_section_width);
+
+                if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
+                    this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
+                }
+
+                if ( (reset || delta<0) && (_rightedge > _maxright)) { // from toolbar to more section
+                    if (!more_section.is(':visible') ) {
+                        more_section.css('display', "");
+                        _maxright -= parseInt(more_section.css('width'));
+                    }
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[0]);
+                        if (prevchild.hasClass('separator'))
+                            last_separator = prevchild;
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+                    var items = $active.find('> div:not(.more-box)');
+                    var need_break = false;
+                    for (var i=items.length-1; i>=0; i--) {
+                        var item = $(items[i]);
+                        if (!item.is(':visible') && !item.attr('hidden-on-resize')) { // move invisible items as is and set special attr
+                            item.attr('data-hidden-tb-item', true);
+                            this.$moreBar.prepend(item);
+                            hideAllMenus = true;
+                        } else if (item.hasClass('group')) {
+                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            if (_rightedge <= _maxright) // stop moving items
+                                break;
+
+                            var offset = item.offset(),
+                                item_width = item.outerWidth(),
+                                children = item.children();
+                            if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
+                                item.attr('inner-width', item_width);
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    child.attr('inner-width', child.outerWidth());
+                                }
+                            }
+                            if ((offset.left > _maxright || children.length==1) && item.attr('group-state') != 'open') {
+                                // move group
+                                this.$moreBar.prepend(item);
+                                if (last_separator) {
+                                    last_separator.css('display', '');
+                                    last_separator.removeAttr('hidden-on-resize');
+                                }
+                                hideAllMenus = true;
+                            } else if ( offset.left+item_width > _maxright ) {
+                                // move buttons from group
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    if (child.hasClass('elset')) {
+                                        this.$moreBar.prepend(item);
+                                        if (last_separator) {
+                                            last_separator.css('display', '');
+                                            last_separator.removeAttr('hidden-on-resize');
+                                        }
+                                        hideAllMenus = true;
+                                        break;
+                                    } else {
+                                        var child_offset = child.offset(),
+                                            child_width = child.outerWidth();
+                                        if (child_offset.left+child_width>_maxright) {
+                                            if (!last_group) {
+                                                last_group = $('<div></div>');
+                                                last_group.addClass(items[i].className);
+                                                var attrs = items[i].attributes;
+                                                for (var k = 0; k < attrs.length; k++) {
+                                                    last_group.attr(attrs[k].name, attrs[k].value);
+                                                }
+                                                this.$moreBar.prepend(last_group);
+                                                if (last_separator) {
+                                                    last_separator.css('display', '');
+                                                    last_separator.removeAttr('hidden-on-resize');
+                                                }
+                                            }
+                                            last_group.prepend(child);
+                                            hideAllMenus = true;
+                                        } else {
+                                            need_break = true;
+                                            break;
+                                        }
+                                    }
+                                }
+                                if (item.children().length<1) { // all buttons are moved
+                                    item.remove();
+                                    last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                    last_group = null;
+                                } else {
+                                    last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                }
+                                if (need_break)
+                                    break;
+                            } else {
+                                break;
+                            }
+                            last_separator = null;
+                        } else if (item.hasClass('separator')) {
+                            this.$moreBar.prepend(item);
+                            item.css('display', 'none');
+                            item.attr('hidden-on-resize', true);
+                            last_separator = item;
+                            hideAllMenus = true;
+                        }
+                    }
+                } else if ((reset || delta>0) && more_section.is(':visible')) {
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = $active.find('> div:not(.more-box)');
+                    var last_width = 0;
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[prevchild.length-1]);
+                        if (prevchild.hasClass('separator')) {
+                            last_separator = prevchild;
+                            last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                        }
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+
+                    var items = this.$moreBar.children();
+                    if (items.length>0) {
+                        // from more panel to toolbar
+                        for (var i=0; i<items.length; i++) {
+                            var item = $(items[i]);
+                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
+                                item.removeAttr('data-hidden-tb-item');
+                                more_section.before(item);
+                                if (this.$moreBar.children().filter('.group').length == 0) {
+                                    this.hideMoreBtns();
+                                    more_section.css('display', "none");
+                                }
+                            } else if (item.hasClass('group')) {
+                                var islast = false;
+                                if (this.$moreBar.children().filter('.group').length == 1) {
+                                    _maxright = box_controls_width; // try to move last group
+                                    islast = true;
+                                }
+
+                                var item_width = parseInt(item.attr('inner-width') || 0);
+                                if (_rightedge + last_width + item_width < _maxright && item.attr('group-state') != 'open') {
+                                    // move group
+                                    more_section.before(item);
+                                    if (last_separator) {
+                                        last_separator.css('display', '');
+                                        last_separator.removeAttr('hidden-on-resize');
+                                    }
+                                    if (this.$moreBar.children().filter('.group').length == 0) {
+                                        this.hideMoreBtns();
+                                        more_section.css('display', "none");
+                                    }
+                                    hideAllMenus = true;
+                                } else if ( _rightedge + last_width < _maxright) {
+                                    // move buttons from group
+                                    var children = item.children();
+                                    _maxright = box_controls_width - more_section_width;
+                                    for (var j=0; j<children.length; j++) {
+                                        if (islast && j==children.length-1)
+                                             _maxright = box_controls_width; // try to move last item from last group
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        var child = $(children[j]);
+                                        if (child.hasClass('elset')) { // don't add group - no enough space
+                                            need_break = true;
+                                            break;
+                                        } else {
+                                            var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? parseInt(item.css('padding-left')) : 0); // if new group is started add left-padding
+                                            if (_rightedge+last_width+child_width < _maxright) {
+                                                if (!last_group) {
+                                                    last_group = $('<div></div>');
+                                                    last_group.addClass(items[i].className);
+                                                    var attrs = items[i].attributes;
+                                                    for (var k = 0; k < attrs.length; k++) {
+                                                        last_group.attr(attrs[k].name, attrs[k].value);
+                                                    }
+                                                    if (last_group.hasClass('flex')) { // need to update flex groups list
+                                                        $active.data().flex = null;
+                                                    }
+                                                    more_section.before(last_group);
+                                                    if (last_separator) {
+                                                        last_separator.css('display', '');
+                                                        last_separator.removeAttr('hidden-on-resize');
+                                                    }
+                                                }
+                                                last_group.append(child);
+                                                hideAllMenus = true;
+                                            } else {
+                                                need_break = true;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    if (item.children().length<1) { // all buttons are moved
+                                        item.remove();
+                                        last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                        last_group = null;
+                                        if (this.$moreBar.children().filter('.group').length == 0) {
+                                            this.hideMoreBtns();
+                                            more_section.css('display', "none");
+                                        }
+                                    } else {
+                                        last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                    }
+                                    if (need_break)
+                                        break;
+                                } else {
+                                    break;
+                                }
+                                last_separator = null; last_width = 0;
+                            } else if (item.hasClass('separator')) {
+                                more_section.before(item);
+                                item.css('display', 'none');
+                                item.attr('hidden-on-resize', true);
+                                last_separator = item;
+                                last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                                hideAllMenus = true;
+                            }
+                        }
+                    } else {
+                        this.hideMoreBtns();
+                        more_section.css('display', "none");
+                    }
+                }
+                hideAllMenus && Common.UI.Menu.Manager.hideAll();
+            },
+
+            onMoreHide: function(btn, e) {
+                var moreContainer = btn.panel.parent();
+                if (btn.pressed) {
+                    btn.toggle(false, true);
+                }
+                if (moreContainer.is(':visible')) {
+                    moreContainer.hide();
+                    Common.NotificationCenter.trigger('edit:complete', this.toolbar, btn);
+                }
+            },
+
+            onMoreShow: function(btn, e) {
+                var moreContainer = btn.panel.parent(),
+                    parentxy = moreContainer.parent().offset(),
+                    target = btn.$el,
+                    showxy = target.offset(),
+                    right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
+                    top = showxy.top - parentxy.top + target.height() + 10;
+
+                moreContainer.css({right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'});
+                moreContainer.show();
+            },
+
+            hideMoreBtns: function() {
+                for (var btn in btnsMore) {
+                    btnsMore[btn] && btnsMore[btn].toggle(false);
+                }
             }
         };
     }()));

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

@@ -133,6 +133,7 @@ define([
             if (!this.rendered)
                 return;
 
+            disabled = !!disabled;
             if (disabled !== this.disabled) {
                 this.$label.toggleClass('disabled', disabled);
                 this.$radio.toggleClass('disabled', disabled);
@@ -156,7 +157,7 @@ define([
 
         setRawValue: function(value) {
             var value = (value === true || value === 'true' || value === '1' || value === 1 );
-            $('input[type=radio][name=' + this.name + ']').removeClass('checked');
+            value && $('input[type=radio][name=' + this.name + ']').removeClass('checked');
             this.$radio.toggleClass('checked', value);
             this.$radio.prop('checked', value);
         },

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

@@ -272,6 +272,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             if (disabled !== this.disabled)
                 this.cmpEl.toggleClass('disabled', disabled);
             this.disabled = disabled;
@@ -588,6 +589,7 @@ define([
         },
 
         setDisabled: function(disabled) {
+            disabled = !!disabled;
             if (disabled !== this.disabled)
                 this.cmpEl.toggleClass('disabled', disabled);
             this.disabled = disabled;

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

@@ -50,7 +50,7 @@ define([
             },
 
             template: _.template([
-                '<div class="synch-tip-root <% if (!!scope.options.extCls) {print(scope.options.extCls + \" \");} %><%= scope.placement %>">',
+                '<div class="synch-tip-root <% if (!!scope.options.extCls) {print(scope.options.extCls + \" \");} %><%= scope.placement %>" style="<%= scope.style %>">',
                     '<div class="asc-synchronizetip">',
                         '<div class="tip-arrow <%= scope.placement %>"></div>',
                         '<div>',
@@ -76,11 +76,13 @@ define([
                 this.target = this.options.target;
                 this.text = !_.isEmpty(this.options.text) ? this.options.text : this.textSynchronize;
                 this.textLink = !_.isEmpty(this.options.textLink) ? this.options.textLink : this.textDontShow;
-                this.placement = this.options.placement;
+                this.placement = this.options.placement; // if placement='target' and position is undefined  show in top,left position of target, also use for arrow position
                 this.showLink = this.options.showLink;
                 this.showButton = this.options.showButton;
                 this.closable = this.options.closable;
                 this.textButton = this.options.textButton || '';
+                this.position = this.options.position; // show in the position relative to target
+                this.style = this.options.style || '';
             },
 
             render: function() {
@@ -90,6 +92,8 @@ define([
                     this.cmpEl.find('.close').on('click', _.bind(function() { this.trigger('closeclick');}, this));
                     this.cmpEl.find('.show-link label').on('click', _.bind(function() { this.trigger('dontshowclick');}, this));
                     this.cmpEl.find('.btn-div').on('click', _.bind(function() { this.trigger('buttonclick');}, this));
+
+                    this.closable && this.cmpEl.addClass('closable');
                 }
 
                 this.applyPlacement();
@@ -115,12 +119,28 @@ define([
             },
 
             applyPlacement: function () {
-                var showxy = this.target.offset();
-                if (this.placement=='target') {
+                var target = this.target && this.target.length>0 ? this.target : $(document.body);
+                var showxy = target.offset();
+                if (this.placement=='target' && !this.position) {
                     this.cmpEl.css({top : showxy.top + 5 + 'px', left: showxy.left + 5 + 'px'});
                     return;
                 }
 
+                if (this.position && typeof this.position == 'object') {
+                    var top = this.position.top, left = this.position.left, bottom = this.position.bottom, right = this.position.right;
+                    if (bottom!==undefined || top!==undefined)
+                        left = showxy.left + (target.width() - this.cmpEl.width())/2;
+                    else
+                        top = showxy.top + (target.height() - this.cmpEl.height())/2;
+                    top = (top!==undefined) ? (top + 'px') : 'auto';
+                    bottom = (bottom!==undefined) ? (bottom + 'px') : 'auto';
+                    right = (right!==undefined) ? (right + 'px') : 'auto';
+                    left = (left!==undefined) ? (left + 'px') : 'auto';
+
+                    this.cmpEl.css({top : top, left: left, right: right, bottom: bottom});
+                    return;
+                }
+
                 var placement = this.placement.split('-');
                 if (placement.length>0) {
                     var top, left, bottom, right;
@@ -128,34 +148,40 @@ define([
                     if (pos=='top') {
                         bottom = Common.Utils.innerHeight() - showxy.top;
                     } else if (pos == 'bottom') {
-                        top = showxy.top + this.target.height();
+                        top = showxy.top + target.height();
                     } else if (pos == 'left') {
                         right = Common.Utils.innerWidth() - showxy.left;
                     } else if (pos == 'right') {
-                        left = showxy.left + this.target.width();
+                        left = showxy.left + target.width();
                     }
                     pos = placement[1];
                     if (pos=='top') {
-                        bottom = Common.Utils.innerHeight() - showxy.top - this.target.height()/2;
+                        bottom = Common.Utils.innerHeight() - showxy.top - target.height()/2;
                     } else if (pos == 'bottom') {
-                        top = showxy.top + this.target.height()/2;
+                        top = showxy.top + target.height()/2;
                         var height = this.cmpEl.height();
                         if (top+height>Common.Utils.innerHeight())
                             top = Common.Utils.innerHeight() - height - 10;
                     } else if (pos == 'left') {
-                        right = Common.Utils.innerWidth() - showxy.left - this.target.width()/2;
+                        right = Common.Utils.innerWidth() - showxy.left - target.width()/2;
                     } else if (pos == 'right') {
-                        left = showxy.left + this.target.width()/2;
+                        left = showxy.left + target.width()/2;
                     } else {
                         if (bottom!==undefined || top!==undefined)
-                            left = showxy.left + (this.target.width() - this.cmpEl.width())/2;
+                            left = showxy.left + (target.width() - this.cmpEl.width())/2;
                         else
-                            top = showxy.top + (this.target.height() - this.cmpEl.height())/2;
+                            top = showxy.top + (target.height() - this.cmpEl.height())/2;
                     }
                     top = (top!==undefined) ? (top + 'px') : 'auto';
                     bottom = (bottom!==undefined) ? (bottom + 'px') : 'auto';
-                    left = (left!==undefined) ? (left + 'px') : 'auto';
                     right = (right!==undefined) ? (right + 'px') : 'auto';
+                    if (left!==undefined) {
+                        var width = this.cmpEl.width();
+                        if (left+width>Common.Utils.innerWidth())
+                            left = Common.Utils.innerWidth() - width - 10;
+                        left = (left + 'px');
+                    } else
+                        left = 'auto';
                     this.cmpEl.css({top : top, left: left, right: right, bottom: bottom});
                 }
             },

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

@@ -177,11 +177,11 @@ define([
                             lockDrag = true;
                         }
                     });
-                    if (((this.bar.selectTabs.length === this.bar.tabs.length || this.bar.tabs.length === 1) && !(e.ctrlKey || e.metaKey)) || this.bar.isEditFormula) {
+                    if (((this.bar.selectTabs.length === this.bar.tabs.length || this.bar.tabs.length === 1) && !(e.ctrlKey || (Common.Utils.isMac && e.altKey))) || this.bar.isEditFormula) {
                         lockDrag = true;
                     }
                     // move last selected sheet if all sheets are selected
-                    if (this.bar.selectTabs.length === this.bar.tabs.length && this.bar.tabs.length > 1 && !e.ctrlKey && !e.metaKey) {
+                    if (this.bar.selectTabs.length === this.bar.tabs.length && this.bar.tabs.length > 1 && !e.ctrlKey && !(Common.Utils.isMac && e.altKey)) {
                         lockDrag = false;
                         this.bar.$el.find('ul > li.selected').removeClass('selected');
                     }
@@ -221,7 +221,7 @@ define([
                 if (!this.bar.isEditFormula) {
                     this.bar.$el.find('.mousemove').removeClass('mousemove right');
                     $(e.currentTarget).parent().addClass('mousemove');
-                    event.dataTransfer.dropEffect = event.metaKey || event.ctrlKey ? 'copy' : 'move';
+                    event.dataTransfer.dropEffect = (event.ctrlKey || Common.Utils.isMac && event.altKey) ? 'copy' : 'move';
                 } else {
                     event.dataTransfer.dropEffect = 'none';
                 }
@@ -234,7 +234,7 @@ define([
                 if (!this.bar.isEditFormula) {
                     this.bar.$el.find('.mousemove').removeClass('mousemove right');
                     $(e.currentTarget).parent().addClass('mousemove');
-                    event.dataTransfer.dropEffect = event.metaKey || event.ctrlKey ? 'copy' : 'move';
+                    event.dataTransfer.dropEffect = (event.ctrlKey || Common.Utils.isMac && event.altKey) ? 'copy' : 'move';
                 } else {
                     event.dataTransfer.dropEffect = 'none';
                 }
@@ -244,6 +244,9 @@ define([
                 $(e.currentTarget).parent().removeClass('mousemove right');
             }, this),
             dragend: $.proxy(function (e) {
+                if (Common.Utils.isMac && e.altKey) { // don't show alt hints after copy by drag and drop
+                    this.bar.isDragDrop = true;
+                }
                 var event = e.originalEvent;
                 if (event.dataTransfer.dropEffect === 'move' && !event.dataTransfer.mozUserCancelled) {
                     this.bar.trigger('tab:dragend', true);
@@ -253,10 +256,13 @@ define([
                 this.bar.$el.find('.mousemove').removeClass('mousemove right');
             }, this),
             drop: $.proxy(function (e) {
+                if (Common.Utils.isMac && e.altKey) { // don't show alt hints after copy by drag and drop
+                    this.bar.isDragDrop = true;
+                }
                 var event = e.originalEvent,
                     index = $(event.currentTarget).data('index');
                 this.bar.$el.find('.mousemove').removeClass('mousemove right');
-                this.bar.trigger('tab:drop', event.dataTransfer, index, event.ctrlKey || event.metaKey);
+                this.bar.trigger('tab:drop', event.dataTransfer, index, (event.ctrlKey || Common.Utils.isMac && event.altKey));
                 this.bar.isDrop = true;
             }, this)
         });
@@ -299,7 +305,7 @@ define([
             }, this));
             addEvent(this.$bar[0], 'dragenter', _.bind(function (event) {
                 if (!this.isEditFormula) {
-                    event.dataTransfer.dropEffect = event.metaKey || event.ctrlKey ? 'copy' : 'move';
+                    event.dataTransfer.dropEffect = (event.ctrlKey || Common.Utils.isMac && event.altKey) ? 'copy' : 'move';
                 } else {
                     event.dataTransfer.dropEffect = 'none';
                 }
@@ -308,7 +314,7 @@ define([
                 if (event.preventDefault) {
                     event.preventDefault(); // Necessary. Allows us to drop.
                 }
-                event.dataTransfer.dropEffect = !this.isEditFormula ? (event.metaKey || event.ctrlKey ? 'copy' : 'move') : 'none';
+                event.dataTransfer.dropEffect = !this.isEditFormula ? ((event.ctrlKey || Common.Utils.isMac && event.altKey) ? 'copy' : 'move') : 'none';
                 !this.isEditFormula && this.tabs[this.tabs.length - 1].$el.addClass('mousemove right');
                 return false;
             }, this));
@@ -319,7 +325,10 @@ define([
             addEvent(this.$bar[0], 'drop', _.bind(function (event) {
                 this.$el.find('.mousemove').removeClass('mousemove right');
                 if (this.isDrop === undefined) {
-                    this.trigger('tab:drop', event.dataTransfer, 'last', event.ctrlKey || event.metaKey);
+                    if (Common.Utils.isMac && event.altKey) { // don't show alt hints after copy by drag and drop
+                        this.isDragDrop = true;
+                    }
+                    this.trigger('tab:drop', event.dataTransfer, 'last', (event.ctrlKey || Common.Utils.isMac && event.altKey));
                 } else {
                     this.isDrop = undefined;
                 }
@@ -504,10 +513,10 @@ define([
         },
 
         setTabVisible: function(index, suppress) {
-            if (index <= 0 || index == 'first') {
+            if (index <= 0) {
                 this.$bar.scrollLeft(0);
                 this.checkInvisible(suppress);
-            } else if ( index >= (this.tabs.length - 1) || index == 'last') {
+            } else if ( index >= (this.tabs.length - 1)) {
                 var tab = this.tabs[this.tabs.length-1].$el;
                 if (this.$bar.find('.separator-item').length === 0) {
                     this.$bar.append('<li class="separator-item"><span></span></li>');
@@ -601,7 +610,7 @@ define([
             return false;
         },
 
-        addDataHint: function (index) { //Hint Manager
+        addDataHint: function (index, dataHint) { //Hint Manager
             var oldHintTab = this.$bar.find('[data-hint]');
             if (oldHintTab.length > 0) {
                 oldHintTab.removeAttr('data-hint');
@@ -610,7 +619,7 @@ define([
                 oldHintTab.removeAttr('data-hint-title');
             }
             var newHintTab = this.tabs[index].$el;
-            newHintTab.attr('data-hint', '0');
+            newHintTab.attr('data-hint', dataHint || '0');
             newHintTab.attr('data-hint-direction', 'top');
             newHintTab.attr('data-hint-offset', 'medium');
             newHintTab.attr('data-hint-title', 'M');

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

@@ -183,6 +183,7 @@ define([
             },
 
             setDisabled: function(disabled) {
+                disabled = !!disabled;
                 this.disabled = disabled;
                 $(this.el).toggleClass('disabled', disabled);
                 disabled

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

@@ -52,7 +52,9 @@ define([
             dynamiccolors: 10,
             standardcolors: 10,
             themecolors: 10,
+            columns: 10,
             effects: 5,
+            hideEmptyColors: true,
             allowReselect: true,
             transparent: false,
             value: '000000',
@@ -62,7 +64,7 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 8px 12px 12px;">' +
+                '<div style="padding: 4px 0 0 12px;">' +
                 '<% var me = this; var idx = 0; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
                     '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
@@ -76,6 +78,9 @@ define([
                         '<em><span unselectable="on">&#160;</span></em>' +
                         '</a>' +
                     '<% } else if (me.isEffect(item)) { %>' +
+                        '<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
+                        '<div style="width:100%;height:0;float:left;"></div>' +
+                        '<% } %>' +
                         '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
                         '</a>' +
@@ -85,9 +90,11 @@ define([
                 '<% }); %>' +
                 '</div>' +
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
-                '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' +
+                '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
+                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
+                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
-                        '<a class="color-dynamic-<%=i%> dynamic-empty-color" color="" idx="<%=idx++%>">' +
+                        '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
                         '<em><span unselectable="on">&#160;</span></em></a>' +
                     '<% } %>' +
                 '<% } %>' +
@@ -103,10 +110,12 @@ define([
                 el = me.$el || $(this.el);
 
             this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
+            this.columns = me.options.columns || 0;
             this.enableKeyEvents= me.options.enableKeyEvents;
             this.tabindex = me.options.tabindex || 0;
             this.outerMenu = me.options.outerMenu;
             this.lastSelectedIdx = -1;
+            this.emptyColorsClass = me.options.hideEmptyColors ? 'hidden' : '';
 
             me.colorItems = [];
             if (me.options.keyMoveDirection=='vertical')
@@ -123,6 +132,15 @@ define([
                 this.updateColors(this.options.updateColorsArr[0], this.options.updateColorsArr[1]);
             if (this.options.value)
                 this.select(this.options.value, true);
+            if (this.options.outerMenu && this.options.outerMenu.focusOnShow && this.options.outerMenu.menu) {
+                el.addClass('focused');
+                this.options.outerMenu.menu.on('show:after', function(menu) {
+                    _.delay(function() {
+                        me.showLastSelected();
+                        me.focus();
+                    }, 10);
+                });
+            }
             this.updateCustomColors();
             el.closest('.btn-group').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
             el.closest('.dropdown-submenu').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
@@ -171,15 +189,19 @@ define([
                 if (color) { // custom color was selected
                     color = color.toUpperCase();
                     selected.removeClass(this.selectedCls);
+                    this.lastSelectedIdx = -1;
                 }
 
                 var colors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
                 colors = colors ? colors.split(',') : [];
 
                 var i = -1, colorEl, c = colors.length < this.options.dynamiccolors ? colors.length : this.options.dynamiccolors;
+                if (this.options.hideEmptyColors && this._layoutParams && el.find('.dynamic-empty-color').length !== (this.options.dynamiccolors - c)) {// recalc indexed if change custom colors
+                    this._layoutParams = undefined;
+                }
                 while (++i < c) {
                     colorEl = el.find('.color-dynamic-'+ i);
-                    colorEl.removeClass('dynamic-empty-color').attr('color', colors[i]);
+                    colorEl.removeClass('dynamic-empty-color').removeClass(this.emptyColorsClass).attr('color', colors[i]);
                     colorEl.find('span').css({
                         'background-color': '#'+colors[i]
                     });
@@ -189,6 +211,16 @@ define([
                         color = undefined; //select only first found color
                     }
                 }
+                while (i < this.options.dynamiccolors) {
+                    colorEl = el.find('.color-dynamic-'+ i);
+                    colorEl.removeAttr('color');
+                    colorEl.addClass('dynamic-empty-color').addClass(this.emptyColorsClass);
+                    colorEl.find('span').css({
+                        'background-color': 'transparent'
+                    });
+                    i++;
+                }
+                el.find('.palette-color-dynamiccolors').toggleClass(this.emptyColorsClass, c===0);
             }
         },
 
@@ -197,7 +229,7 @@ define([
             var target = $(e.target).closest('a');
             var color, cmp;
 
-            if (target.length==0) return;
+            if (target.length==0) return false;
 
             if (target.hasClass('color-transparent') ) {
                 me.clearSelection(true);
@@ -265,12 +297,16 @@ define([
                 if (child.length==0) {
                     this.updateCustomColors();
                     child = el.find('.color-dynamic-' + (this.options.dynamiccolors - 1));
+                } else {
+                    if (this.options.hideEmptyColors && this._layoutParams) // recalc indexed
+                        this._layoutParams = undefined;
                 }
 
-                child.first().removeClass('dynamic-empty-color').addClass(this.selectedCls).attr('color', color[1]);
+                child.first().removeClass('dynamic-empty-color').removeClass(this.emptyColorsClass).addClass(this.selectedCls).attr('color', color[1]);
                 child.first().find('span').css({
                     'background-color': '#'+color[1]
                 });
+                el.find('.palette-color-dynamiccolors').removeClass(this.emptyColorsClass);
                 this.select(color[1], true);
             }
         },
@@ -483,7 +519,7 @@ define([
             var arr = [],
                 len = (themecolors>0 && effects>0) ? themecolors * effects : 0;
             if (themecolors>0) {
-                arr = [this.textThemeColors, '-'];
+                arr = [this.textThemeColors];
                 for (var i=0; i<themecolors; i++)
                     arr.push({color: 'FFFFFF', effectId: 1});
 
@@ -492,10 +528,10 @@ define([
                     arr.push({color: 'FFFFFF', effectId: 1});
 
                 if (standardcolors)
-                    arr.push('-', '--', '-');
+                    arr.push('-');
             }
             if (standardcolors) {
-                arr.push(this.textStandartColors, '-');
+                arr.push(this.textStandartColors);
                 if (transparent) {
                     arr.push('transparent');
                     standardcolors--;
@@ -503,8 +539,6 @@ define([
                 for (var i=0; i<standardcolors; i++)
                     arr.push('FFFFFF');
             }
-            if (this.options.dynamiccolors && (themecolors || standardcolors))
-                arr.push('-', '--');
             return arr;
         },
 
@@ -640,6 +674,7 @@ define([
         },
 
         textThemeColors         : 'Theme Colors',
-        textStandartColors      : 'Standart Colors'
+        textStandartColors      : 'Standard Colors',
+        textRecentColors        : 'Recent Colors'
     }, Common.UI.ThemeColorPalette || {}));
 });

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

@@ -104,12 +104,17 @@
                 offset      : opts.offset,
                 cls         : opts.cls,
                 html        : opts.html,
-                hideonclick : opts.hideonclick
+                hideonclick : opts.hideonclick,
+                keepvisible: opts.keepvisible
             });
 
             if (opts.hideonclick) {
+                var me = this;
                 var tip = this.$element.data('bs.tooltip');
-                if (tip) tip.tip().on('click', function() {tip.hide();});
+                if (tip) tip.tip().on('click', function() {
+                    tip.hide();
+                    me.trigger('tooltip:hideonclick', this);
+                });
             }
 
             this.$element.on('shown.bs.tooltip', _.bind(this.onTipShown, this));

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

@@ -212,19 +212,7 @@ define([
                             this.dataViewItems.push(view);
                         }
 
-                        var name = record.get('name');
-                        if (name.length > 37 - record.get('level')*2)
-                            record.set('tip', name);
-                        if (record.get('tip')) {
-                            var view_el = $(view.el);
-                            view_el.attr('data-toggle', 'tooltip');
-                            view_el.tooltip({
-                                title       : record.get('tip'),
-                                placement   : 'cursor',
-                                zIndex : this.tipZIndex
-                            });
-                        }
-
+                        this.updateTip(view);
                         this.listenTo(view, 'change',      this.onChangeItem);
                         this.listenTo(view, 'remove',      this.onRemoveItem);
                         this.listenTo(view, 'click',       this.onClickItem);
@@ -247,31 +235,31 @@ define([
                     var isExpanded = !record.get('isExpanded');
                     record.set('isExpanded', isExpanded);
                     this.store[(isExpanded) ? 'expandSubItems' : 'collapseSubItems'](record);
-                    this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                    this.scroller.update({minScrollbarLength: this.minScrollbarLength, alwaysVisibleY: this.scrollAlwaysVisible});
                 } else
                     Common.UI.DataView.prototype.onClickItem.call(this, view, record, e);
             },
 
             expandAll: function() {
                 this.store.expandAll();
-                this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                this.scroller.update({minScrollbarLength: this.minScrollbarLength, alwaysVisibleY: this.scrollAlwaysVisible});
             },
 
             collapseAll: function() {
                 this.store.collapseAll();
-                this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                this.scroller.update({minScrollbarLength: this.minScrollbarLength, alwaysVisibleY: this.scrollAlwaysVisible});
             },
 
             expandToLevel: function(expandLevel) {
                 this.store.expandToLevel(expandLevel);
-                this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                this.scroller.update({minScrollbarLength: this.minScrollbarLength, alwaysVisibleY: this.scrollAlwaysVisible});
             },
 
             expandRecord: function(record) {
                 if (record) {
                     record.set('isExpanded', true);
                     this.store.expandSubItems(record);
-                    this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                    this.scroller.update({minScrollbarLength: this.minScrollbarLength, alwaysVisibleY: this.scrollAlwaysVisible});
                 }
             },
 
@@ -279,7 +267,7 @@ define([
                 if (record) {
                     record.set('isExpanded', false);
                     this.store.collapseSubItems(record);
-                    this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                    this.scroller.update({minScrollbarLength: this.minScrollbarLength, alwaysVisibleY: this.scrollAlwaysVisible});
                 }
             },
 
@@ -361,6 +349,51 @@ define([
 
             focus: function() {
                 this.cmpEl && this.cmpEl.find('.treeview').focus();
+            },
+
+            updateTip: function(item) {
+                var record = item.model,
+                    name = record.get('name'),
+                    me = this;
+
+                if (name.length > 37 - record.get('level')*2)
+                    record.set('tip', name);
+                else
+                    record.set('tip', '');
+
+                var el = item.$el || $(item.el);
+                var tip = el.data('bs.tooltip');
+                if (tip) {
+                    if (tip.dontShow===undefined)
+                        tip.dontShow = true;
+                    el.removeData('bs.tooltip');
+                }
+                if (record.get('tip')) {
+                    el.attr('data-toggle', 'tooltip');
+                    el.tooltip({
+                        title       : record.get('tip'),
+                        placement   : 'cursor',
+                        zIndex : this.tipZIndex
+                    });
+                    if (this.delayRenderTips)
+                        el.one('mouseenter', function(){
+                            el.attr('data-toggle', 'tooltip');
+                            el.tooltip({
+                                title       : record.get('tip'),
+                                placement   : 'cursor',
+                                zIndex : me.tipZIndex
+                            });
+                            el.mouseenter();
+                        });
+                    else {
+                        el.attr('data-toggle', 'tooltip');
+                        el.tooltip({
+                            title       : record.get('tip'),
+                            placement   : 'cursor',
+                            zIndex : me.tipZIndex
+                        });
+                    }
+                }
             }
         }
     })());

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

@@ -241,7 +241,7 @@ define([
 
         function _autoSize() {
             if (this.initConfig.height == 'auto') {
-                var height = parseInt(this.$window.find('> .body').css('height'));
+                var height = Math.ceil(parseFloat(this.$window.find('> .body').css('height')));
                 this.initConfig.header && (height += parseInt(this.$window.find('> .header').css('height')));
                 this.$window.height(height);
             }
@@ -490,7 +490,8 @@ define([
                 if (options.width=='auto') {
                     text_cnt.height(Math.max(text.height(), icon_height) + ((check.length>0) ? (check.height() + parseInt(check.css('margin-top'))) : 0));
                     body.height(parseInt(text_cnt.css('height')) + parseInt(footer.css('height')));
-                    window.setSize(text.position().left + text.width() + parseInt(text_cnt.css('padding-right')),
+                    var span_el = check.find('span');
+                     window.setSize(Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right')),
                         parseInt(body.css('height')) + parseInt(header.css('height')));
                 } else {
                     text.css('white-space', 'normal');

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

@@ -85,6 +85,14 @@ define([
                 storeUsers: this.getApplication().getCollection('Common.Collections.Users'),
                 storeMessages: this.getApplication().getCollection('Common.Collections.ChatMessages')
             });
+            this.panelChat.on('render:after', _.bind(this.onAfterRender, this));
+        },
+
+        onAfterRender: function(panel) {
+            var viewport = this.getApplication().getController('Viewport').getView('Viewport');
+            viewport.hlayout.on('layout:resizedrag',  _.bind(function () {
+                panel && panel.updateScrolls();
+            }, this));
         },
 
         setMode: function(mode) {
@@ -95,7 +103,7 @@ define([
                 if (this.mode.canCoAuthoring && this.mode.canChat)
                     this.api.asc_registerCallback('asc_onCoAuthoringChatReceiveMessage', _.bind(this.onReceiveMessage, this));
 
-                if ( !this.mode.isEditDiagram && !this.mode.isEditMailMerge ) {
+                if ( !this.mode.isEditDiagram && !this.mode.isEditMailMerge && !this.mode.isEditOle ) {
                     this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onUsersChanged, this));
                     this.api.asc_registerCallback('asc_onConnectionStateChanged', _.bind(this.onUserConnection, this));
                     this.api.asc_coAuthoringGetUsers();

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

@@ -103,7 +103,8 @@ define([
                     // work handlers
 
                     'comment:closeEditing':     _.bind(this.closeEditing, this),
-                    'comment:sort':             _.bind(this.setComparator, this)
+                    'comment:sort':             _.bind(this.setComparator, this),
+                    'comment:filtergroups':     _.bind(this.setFilterGroups, this)
                 },
 
                 'Common.Views.ReviewPopover': {
@@ -157,6 +158,7 @@ define([
             }
 
             this.groupCollection = [];
+            this.userGroups = []; // for filtering comments
 
             this.view = this.createView('Common.Views.Comments', { store: this.collection });
             this.view.render();
@@ -695,14 +697,15 @@ define([
 
                     var end = true;
                     for (var i = this.collection.length - 1; i >= 0; --i) {
-                        if (end) {
-                            this.collection.at(i).set('last', true, {silent: true});
-                        } else {
-                            if (this.collection.at(i).get('last')) {
-                                this.collection.at(i).set('last', false, {silent: true});
-                            }
-                        }
+                        var item = this.collection.at(i);
+                        if (end && !item.get('hide') && !item.get('filtered')) {
+                            item.set('last', true, {silent: true});
                             end = false;
+                        } else {
+                            if (item.get('last')) {
+                                item.set('last', false, {silent: true});
+                            }
+                        }
                     }
                     this.view.render();
                     this.view.update();
@@ -820,6 +823,7 @@ define([
                 comment.set('userid',   data.asc_getUserId());
                 comment.set('username', data.asc_getUserName());
                 comment.set('parsedName', AscCommon.UserInfoParser.getParsedName(data.asc_getUserName()));
+                comment.set('parsedGroups', AscCommon.UserInfoParser.getParsedGroups(data.asc_getUserName()));
                 comment.set('usercolor', (user) ? user.get('color') : null);
                 comment.set('resolved', data.asc_getSolved());
                 comment.set('quote',    data.asc_getQuoteText());
@@ -830,6 +834,14 @@ define([
                 comment.set('removable', (t.mode.canDeleteComments || (data.asc_getUserId() == t.currentUserId)) && AscCommon.UserInfoParser.canDeleteComment(data.asc_getUserName()));
                 comment.set('hide', !AscCommon.UserInfoParser.canViewComment(data.asc_getUserName()));
 
+                if (!comment.get('hide')) {
+                    var usergroups = comment.get('parsedGroups');
+                    t.fillUserGroups(usergroups);
+                    var group = Common.Utils.InternalSettings.get(t.appPrefix + "comments-filtergroups");
+                    var filter = !!group && (group!==-1) && (!usergroups || usergroups.length<1 || usergroups.indexOf(group)<0);
+                    comment.set('filtered', filter);
+                }
+
                 replies = _.clone(comment.get('replys'));
 
                 replies.length = 0;
@@ -1148,14 +1160,15 @@ define([
                 this.onUpdateFilter(this.filter, true);
 
                 for (i = this.collection.length - 1; i >= 0; --i) {
-                    if (end) {
-                        this.collection.at(i).set('last', true, {silent: true});
-                    } else {
-                        if (this.collection.at(i).get('last')) {
-                            this.collection.at(i).set('last', false, {silent: true});
-                        }
-                    }
+                    var item = this.collection.at(i);
+                    if (end && !item.get('hide') && !item.get('filtered')) {
+                        item.set('last', true, {silent: true});
                         end = false;
+                    } else {
+                        if (item.get('last')) {
+                            item.set('last', false, {silent: true});
+                        }
+                    }
                 }
 
                 this.view.render();
@@ -1306,6 +1319,7 @@ define([
                 userid              : data.asc_getUserId(),
                 username            : data.asc_getUserName(),
                 parsedName          : AscCommon.UserInfoParser.getParsedName(data.asc_getUserName()),
+                parsedGroups        : AscCommon.UserInfoParser.getParsedGroups(data.asc_getUserName()),
                 usercolor           : (user) ? user.get('color') : null,
                 date                : this.dateToLocaleTimeString(date),
                 quote               : data.asc_getQuoteText(),
@@ -1329,6 +1343,13 @@ define([
                 groupName           : (groupname && groupname.length>1) ? groupname[1] : null
             });
             if (comment) {
+                if (!comment.get('hide')) {
+                    var usergroups = comment.get('parsedGroups');
+                    this.fillUserGroups(usergroups);
+                    var group = Common.Utils.InternalSettings.get(this.appPrefix + "comments-filtergroups");
+                    var filter = !!group && (group!==-1) && (!usergroups || usergroups.length<1 || usergroups.indexOf(group)<0);
+                    comment.set('filtered', filter);
+                }
                 var replies = this.readSDKReplies(data);
                 if (replies.length) {
                     comment.set('replys', replies);
@@ -1639,6 +1660,64 @@ define([
         clearCollections: function() {
             this.collection.reset();
             this.groupCollection = [];
+        },
+
+        fillUserGroups: function(usergroups) {
+            if (!this.mode.canUseCommentPermissions) return;
+
+            var viewgroups = AscCommon.UserInfoParser.getCommentPermissions('view');
+            if (usergroups && usergroups.length>0) {
+                if (viewgroups)
+                    usergroups = _.intersection(usergroups, viewgroups);
+                usergroups = _.uniq(this.userGroups.concat(usergroups));
+            }
+            if (this.view && this.view.buttonSort && _.difference(usergroups, this.userGroups).length>0) {
+                this.userGroups = usergroups;
+                var menu = this.view.buttonSort.menu;
+                menu.items[menu.items.length-1].setVisible(this.userGroups.length>0);
+                menu.items[menu.items.length-2].setVisible(this.userGroups.length>0);
+                menu = menu.items[menu.items.length-1].menu;
+                menu.removeAll();
+
+                var last = Common.Utils.InternalSettings.get(this.appPrefix + "comments-filtergroups");
+                menu.addItem(new Common.UI.MenuItem({
+                    checkable: true,
+                    checked: last===-1 || last===undefined,
+                    toggleGroup: 'filtercomments',
+                    caption: this.view.textAll,
+                    value: -1
+                }));
+                this.userGroups.forEach(function(item){
+                    menu.addItem(new Common.UI.MenuItem({
+                        checkable: true,
+                        checked: last === item,
+                        toggleGroup: 'filtercomments',
+                        caption: Common.Utils.String.htmlEncode(item),
+                        value: item
+                    }));
+                });
+            }
+        },
+
+        setFilterGroups: function (group) {
+            Common.Utils.InternalSettings.set(this.appPrefix + "comments-filtergroups", group);
+            var i, end = true;
+            for (i = this.collection.length - 1; i >= 0; --i) {
+                var item = this.collection.at(i);
+                if (!item.get('hide')) {
+                    var usergroups = item.get('parsedGroups');
+                    item.set('filtered', !!group && (group!==-1) && (!usergroups || usergroups.length<1 || usergroups.indexOf(group)<0), {silent: true});
+                }
+                if (end && !item.get('hide') && !item.get('filtered')) {
+                    item.set('last', true, {silent: true});
+                    end = false;
+                } else {
+                    if (item.get('last')) {
+                        item.set('last', false, {silent: true});
+                    }
+                }
+            }
+            this.updateComments(true);
         }
 
     }, Common.Controllers.Comments || {}));

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

@@ -45,7 +45,8 @@ define([
         version: '{{PRODUCT_VERSION}}',
         eventloading: true,
         titlebuttons: true,
-        uithemes: true
+        uithemes: true,
+        quickprint: true,
     };
 
     var native = window.desktop || window.AscDesktopEditor;
@@ -60,8 +61,12 @@ define([
             'btn-save-coauth': 'coauth',
             'btn-synch': 'synch' };
 
+        var nativevars;
 
         if ( !!native ) {
+            native.features = native.features || {};
+            nativevars = window.RendererProcessVariable;
+
             window.on_native_message = function (cmd, param) {
                 if (/^style:change/.test(cmd)) {
                     var obj = JSON.parse(param);
@@ -88,7 +93,12 @@ define([
                         Common.Utils.InternalSettings.set('window-inactive-area-top', obj.skiptoparea);
                     } else
                     if ( obj.lockthemes != undefined ) {
-                        Common.UI.Themes.setAvailable(!obj.lockthemes);
+                        // TODO: remove after 7.0.2. depricated. used is_win_xp variable instead
+                        // Common.UI.Themes.setAvailable(!obj.lockthemes);
+                    }
+                    if ( obj.singlewindow !== undefined ) {
+                        $('#box-document-title .hedset')[obj.singlewindow ? 'hide' : 'show']();
+                        native.features.singlewindow = obj.singlewindow;
                     }
                 } else
                 if (/editor:config/.test(cmd)) {
@@ -130,6 +140,10 @@ define([
                         if (!!_mr[1]) $('#app-title').show();
                         else if (!!_mr[2]) $('#app-title').hide();
                     }
+                } else
+                if (/althints:show/.test(cmd)) {
+                    if ( /false|hide/.test(param) )
+                        Common.NotificationCenter.trigger('hints:clear');
                 }
             };
 
@@ -153,7 +167,8 @@ define([
                 action: action,
                 icon: config.icon || undefined,
                 hint: config.btn.options.hint,
-                disabled: config.btn.isDisabled()
+                disabled: config.btn.isDisabled(),
+                visible: config.visible,
             };
         };
 
@@ -180,11 +195,56 @@ define([
             }
         };
 
+        var _onHintsShow = function (visible, level) {
+            let info = {
+                visible: visible && !(level > 0),
+            };
+
+            if ( !!titlebuttons ) {
+                info.hints = {};
+                !!titlebuttons['print'] && (info.hints['print'] = titlebuttons['print'].btn.btnEl.attr('data-hint-title'));
+                !!titlebuttons['quickprint'] && (info.hints['quickprint'] = titlebuttons['quickprint'].btn.btnEl.attr('data-hint-title'));
+                !!titlebuttons['undo'] && (info.hints['undo'] = titlebuttons['undo'].btn.btnEl.attr('data-hint-title'));
+                !!titlebuttons['redo'] && (info.hints['redo'] = titlebuttons['redo'].btn.btnEl.attr('data-hint-title'));
+                !!titlebuttons['save'] && (info.hints['save'] = titlebuttons['save'].btn.btnEl.attr('data-hint-title'));
+            }
+
+            native.execCommand('althints:show', JSON.stringify(info));
+        }
+
+        var _onKeyDown = function (e) {
+            if ( Common.UI.HintManager.isHintVisible() ) {
+                native.execCommand('althints:keydown', JSON.stringify({code:e.keyCode}));
+                console.log('hint keydown', e.keyCode);
+            }
+        }
+
+        const _onApplySettings = function (menu) {
+            if ( !!titlebuttons.quickprint ) {
+                const var_name = window.SSE ? 'sse-settings-quick-print-button' :
+                                    window.PE ? 'pe-settings-quick-print-button' : 'de-settings-quick-print-button';
+                const is_btn_visible = Common.localStorage.getBool(var_name, false);
+
+                if ( titlebuttons.quickprint.visible != is_btn_visible ) {
+                    titlebuttons.quickprint.visible = is_btn_visible;
+                    const obj = {
+                        visible: {
+                            quickprint: is_btn_visible,
+                        }
+                    };
+                    native.execCommand('title:button', JSON.stringify(obj));
+                }
+            }
+        }
+
         return {
             init: function (opts) {
                 _.extend(config, opts);
 
                 if ( config.isDesktopApp ) {
+                    let is_win_xp = nativevars && nativevars.os === 'winxp';
+
+                    Common.UI.Themes.setAvailable(!is_win_xp);
                     Common.NotificationCenter.on('app:ready', function (opts) {
                         _.extend(config, opts);
                         !!native && native.execCommand('doc:onready', '');
@@ -194,9 +254,45 @@ define([
 
                     Common.NotificationCenter.on('document:ready', function () {
                         if ( config.isEdit ) {
-                            var maincontroller = webapp.getController('Main');
-                            if (maincontroller.api.asc_isReadOnly && maincontroller.api.asc_isReadOnly()) {
-                                maincontroller.warningDocumentIsLocked();
+                            function get_locked_message (t) {
+                                switch (t) {
+                                // case Asc.c_oAscLocalRestrictionType.Nosafe:
+                                case Asc.c_oAscLocalRestrictionType.ReadOnly:
+                                    return Common.Locale.get("tipFileReadOnly",{name:"Common.Translation", default: "Document is read only. You can make changes and save its local copy later."});
+                                default: return Common.Locale.get("tipFileLocked",{name:"Common.Translation", default: "Document is locked for editing. You can make changes and save its local copy later."});
+                                }
+                            }
+
+                            const header = webapp.getController('Viewport').getView('Common.Views.Header');
+                            const api = webapp.getController('Main').api;
+                            const locktype = api.asc_getLocalRestrictions ? api.asc_getLocalRestrictions() : Asc.c_oAscLocalRestrictionType.None;
+                            if ( Asc.c_oAscLocalRestrictionType.None !== locktype ) {
+                                features.readonly = true;
+
+                                header.setDocumentReadOnly(true);
+                                api.asc_setLocalRestrictions(Asc.c_oAscLocalRestrictionType.None);
+
+                                (new Common.UI.SynchronizeTip({
+                                    extCls: 'no-arrow',
+                                    placement: 'bottom',
+                                    target: $('.toolbar'),
+                                    text: get_locked_message(locktype),
+                                    showLink: false,
+                                })).on('closeclick', function () {
+                                    this.close();
+                                }).show();
+
+                                native.execCommand('webapps:features', JSON.stringify(features));
+
+                                api.asc_registerCallback('asc_onDocumentName', function () {
+                                    if ( features.readonly ) {
+                                        if ( api.asc_getLocalRestrictions() == Asc.c_oAscLocalRestrictionType.None ) {
+                                            features.readonly = false;
+                                            header.setDocumentReadOnly(false);
+                                            native.execCommand('webapps:features', JSON.stringify(features));
+                                        }
+                                    }
+                                });
                             }
                         }
                     });
@@ -208,7 +304,7 @@ define([
 
                         titlebuttons = {};
                         if ( mode.isEdit ) {
-                            var header = webapp.getController('Viewport').getView('Common.Views.Header');
+                            const header = webapp.getController('Viewport').getView('Common.Views.Header');
                             if (!!header.btnSave) {
                                 titlebuttons['save'] = {btn: header.btnSave};
 
@@ -219,6 +315,13 @@ define([
                             if (!!header.btnPrint)
                                 titlebuttons['print'] = {btn: header.btnPrint};
 
+                            if (!!header.btnPrintQuick) {
+                                titlebuttons['quickprint'] = {
+                                    btn: header.btnPrintQuick,
+                                    visible: header.btnPrintQuick.isVisible(),
+                                };
+                            }
+
                             if (!!header.btnUndo)
                                 titlebuttons['undo'] = {btn: header.btnUndo};
 
@@ -240,28 +343,45 @@ define([
                             config.callback_editorconfig();
                             delete config.callback_editorconfig;
                         }
+
+                        if ( native.features.singlewindow !== undefined ) {
+                            $('#box-document-title .hedset')[native.features.singlewindow ? 'hide' : 'show']();
+                        }
                     });
 
                     Common.NotificationCenter.on({
                         'modal:show': _onModalDialog.bind(this, 'open'),
-                        'modal:close': _onModalDialog.bind(this, 'close')
-                        , 'uitheme:changed' : function (name) {
+                        'modal:close': _onModalDialog.bind(this, 'close'),
+                        'modal:hide': _onModalDialog.bind(this, 'hide'),
+                        'uitheme:changed' : function (name) {
+                            if (Common.localStorage.getBool('ui-theme-use-system', false)) {
+                                native.execCommand("uitheme:changed", JSON.stringify({name:'theme-system'}));
+                            } else {
                                 var theme = Common.UI.Themes.get(name);
                                 if ( theme )
                                     native.execCommand("uitheme:changed", JSON.stringify({name:name, type:theme.type}));
                             }
+                        },
+                        'hints:show': _onHintsShow.bind(this),
                     });
 
                     webapp.addListeners({
                         'FileMenu': {
                             'item:click': function (menu, action, isopts) {
-                                if ( action == 'app:exit' ) {
-                                    native.execCommand('editor:event', JSON.stringify({action: 'close'}));
+                                if ( action == 'file:exit' ) {
+                                    native.execCommand('editor:event', JSON.stringify({action: 'file:close'}));
+                                    menu.hide();
+                                } else
+                                if ( action == 'file:open' ) {
+                                    native.execCommand('editor:event', JSON.stringify({action: 'file:open'}));
                                     menu.hide();
                                 }
                             },
+                            'settings:apply': _onApplySettings.bind(this),
                         },
                     }, {id: 'desktop'});
+
+                    $(document).on('keydown', _onKeyDown.bind(this));
                 }
             },
             process: function (opts) {
@@ -287,7 +407,7 @@ define([
             },
             requestClose: function () {
                 if ( config.isDesktopApp && !!native ) {
-                    native.execCommand('editor:event', JSON.stringify({action:'close', url: config.customization.goback.url}));
+                    native.execCommand('editor:event', JSON.stringify({action:'file:close', url: config.customization.goback.url}));
                 }
             },
             isActive: function () {
@@ -297,6 +417,28 @@ define([
                 // return webapp.getController('Main').api.asc_isOffline();
                 return webapp.getController('Main').appOptions.isOffline;
             },
+            isFeatureAvailable: function (feature) {
+                return !!native && !!native[feature];
+            },
+            call: function (name) {
+                if ( native[name] ) {
+                    let args = [].slice.call(arguments, 1);
+                    // return native[name](...args);
+                    return native[name].apply(this, args);
+                }
+            },
+            helpUrl: function () {
+                if ( !!nativevars && nativevars.helpUrl ) {
+                    var webapp = window.SSE ? 'spreadsheeteditor' :
+                                    window.PE ? 'presentationeditor' : 'documenteditor';
+                    return nativevars.helpUrl + '/' + webapp + '/main/resources/help';
+                }
+
+                return undefined;
+            },
+            getDefaultPrinterName: function () {
+                return nativevars ? nativevars.defaultPrinterName : '';
+            },
         };
     };
 

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

@@ -142,6 +142,7 @@ define([
             setApi: function(api) {
                 this.api = api;
                 this.api.asc_registerCallback('asc_onCloseChartEditor', _.bind(this.onDiagrammEditingDisabled, this));
+                this.api.asc_registerCallback('asc_sendFromGeneralToFrameEditor', _.bind(this.onSendFromGeneralToFrameEditor, this));
                 return this;
             },
 
@@ -185,7 +186,7 @@ define([
                     iconCls: 'warn',
                     buttons: ['ok'],
                     callback: _.bind(function(btn){
-                        this.setControlsDisabled(false);
+                        this.diagramEditorView.setControlsDisabled(false);
                         this.diagramEditorView.hide();
                     }, this)
                 });
@@ -232,6 +233,9 @@ define([
                                 y = parseInt(this.diagramEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.diagramEditorView.binding.drag({pageX:x, pageY:y});
                         }
+                    } else
+                    if (eventData.type == "frameToGeneralData") {
+                        this.api && this.api.asc_getInformationBetweenFrameAndGeneralEditor(eventData.data);
                     } else
                         this.diagramEditorView.fireEvent('internalmessage', this.diagramEditorView, eventData);
                 }
@@ -243,13 +247,8 @@ define([
                 }
             },
 
-            showExternalEditor: function () {
-                if ( externalEditor ) {
-                    var value = Common.localStorage.getItem("ui-theme-id", "theme-light");
-                    externalEditor.serviceCommand('theme:change', value);
-                }
-
-                this.diagramEditorView.show();
+            onSendFromGeneralToFrameEditor: function(data) {
+                externalEditor && externalEditor.serviceCommand('generalToFrameData', data);
             },
 
             warningTitle: 'Warning',

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

@@ -134,6 +134,7 @@ define([
             setApi: function(api) {
                 this.api = api;
                 this.api.asc_registerCallback('asc_onCloseMergeEditor', _.bind(this.onMergeEditingDisabled, this));
+                this.api.asc_registerCallback('asc_sendFromGeneralToFrameEditor', _.bind(this.onSendFromGeneralToFrameEditor, this));
                 return this;
             },
 
@@ -170,7 +171,7 @@ define([
                     iconCls: 'warn',
                     buttons: ['ok'],
                     callback: _.bind(function(btn){
-                        this.setControlsDisabled(false);
+                        this.mergeEditorView.setControlsDisabled(false);
                         this.mergeEditorView.hide();
                     }, this)
                 });
@@ -216,6 +217,9 @@ define([
                                 y = parseInt(this.mergeEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.mergeEditorView.binding.drag({pageX:x, pageY:y});
                         }
+                    } else
+                    if (eventData.type == "frameToGeneralData") {
+                        this.api && this.api.asc_getInformationBetweenFrameAndGeneralEditor(eventData.data);
                     } else
                         this.mergeEditorView.fireEvent('internalmessage', this.mergeEditorView, eventData);
                 }
@@ -227,6 +231,10 @@ define([
                 }
             },
 
+            onSendFromGeneralToFrameEditor: function(data) {
+                externalEditor && externalEditor.serviceCommand('generalToFrameData', data);
+            },
+
             warningTitle: 'Warning',
             warningText: 'The object is disabled because of editing by another user.',
             textClose: 'Close',

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

@@ -0,0 +1,261 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * 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
+ *
+*/
+/**
+ *  ExternalOleEditor.js
+ *
+ *  Created by Julia Radzhabova on 3/10/22
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+Common.Controllers = Common.Controllers || {};
+
+define([
+    'core',
+    'common/main/lib/view/ExternalOleEditor'
+], function () { 'use strict';
+    Common.Controllers.ExternalOleEditor = Backbone.Controller.extend(_.extend((function() {
+        var appLang         = '{{DEFAULT_LANG}}',
+            customization   = undefined,
+            targetApp       = '',
+            externalEditor  = null,
+            isAppFirstOpened = true;
+
+
+        var createExternalEditor = function() {
+            !!customization && (customization.uiTheme = Common.localStorage.getItem("ui-theme-id", "theme-light"));
+            externalEditor = new DocsAPI.DocEditor('id-ole-editor-placeholder', {
+                width       : '100%',
+                height      : '100%',
+                documentType: 'cell',
+                document    : {
+                    url         : '_chart_',
+                    permissions : {
+                        edit    : true,
+                        download: false
+                    }
+                },
+                editorConfig: {
+                    mode            : 'editole',
+                    targetApp       : targetApp,
+                    lang            : appLang,
+                    canCoAuthoring  : false,
+                    canBackToFolder : false,
+                    canCreateNew    : false,
+                    customization   : customization,
+                    user            : {id: ('uid-'+Date.now())}
+                },
+                events: {
+                    'onAppReady'            : function() {},
+                    'onDocumentStateChange' : function() {},
+                    'onError'               : function() {},
+                    'onInternalMessage'     : _.bind(this.onInternalMessage, this)
+                }
+            });
+            Common.Gateway.on('processmouse', _.bind(this.onProcessMouse, this));
+        };
+
+        return {
+            views: ['Common.Views.ExternalOleEditor'],
+
+            initialize: function() {
+                this.addListeners({
+                    'Common.Views.ExternalOleEditor': {
+                        'setoledata': _.bind(this.setOleData, this),
+                        'drag': _.bind(function(o, state){
+                            externalEditor && externalEditor.serviceCommand('window:drag', state == 'start');
+                        },this),
+                        'show': _.bind(function(cmp){
+                            var h = this.oleEditorView.getHeight(),
+                                innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
+                            if (innerHeight>h && h<700 || innerHeight<h) {
+                                h = Math.min(innerHeight, 700);
+                                this.oleEditorView.setHeight(h);
+                            }
+
+                            if (externalEditor) {
+                                externalEditor.serviceCommand('setAppDisabled',false);
+                                if (isAppFirstOpened && this.oleEditorView._isExternalDocReady) {
+                                    isAppFirstOpened = false;
+                                    this.oleEditorView._oleData && this.setOleData();
+                                }
+
+                                if (this.needDisableEditing && this.oleEditorView._isExternalDocReady) {
+                                    this.onOleEditingDisabled();
+                                }
+                                externalEditor.attachMouseEvents();
+                            } else {
+                                createExternalEditor.apply(this);
+                            }
+                            this.isExternalEditorVisible = true;
+                            this.isHandlerCalled = false;
+                        }, this),
+                        'hide':  _.bind(function(cmp){
+                            if (externalEditor) {
+                                externalEditor.detachMouseEvents();
+                                this.isExternalEditorVisible = false;
+                            }
+                        }, this)
+                    }
+                });
+
+
+            },
+
+            onLaunch: function() {
+                this.oleEditorView = this.createView('Common.Views.ExternalOleEditor', {handler: _.bind(this.handler, this)});
+            },
+
+            setApi: function(api) {
+                this.api = api;
+                this.api.asc_registerCallback('asc_onCloseOleEditor', _.bind(this.onOleEditingDisabled, this));
+                this.api.asc_registerCallback('asc_sendFromGeneralToFrameEditor', _.bind(this.onSendFromGeneralToFrameEditor, this));
+                return this;
+            },
+
+            handler: function(result, value) {
+                if (this.isHandlerCalled) return;
+                this.isHandlerCalled = true;
+                if (this.oleEditorView._isExternalDocReady)
+                    externalEditor && externalEditor.serviceCommand('queryClose',{mr:result});
+                else {
+                    this.oleEditorView.hide();
+                    this.isHandlerCalled = false;
+                }
+            },
+
+            setOleData: function() {
+                if (!isAppFirstOpened) {
+                    externalEditor && externalEditor.serviceCommand('setOleData', this.oleEditorView._oleData);
+                    this.oleEditorView._oleData = null;
+                }
+            },
+
+            loadConfig: function(data) {
+                if (data && data.config) {
+                    if (data.config.lang) appLang = data.config.lang;
+                    if (data.config.customization) customization = data.config.customization;
+                    if (data.config.targetApp) targetApp = data.config.targetApp;
+                }
+            },
+
+            onOleEditingDisabled: function() {
+                if ( !this.oleEditorView.isVisible() || !this.oleEditorView._isExternalDocReady ) {
+                    this.needDisableEditing = true;
+                    return;
+                }
+
+                this.oleEditorView.setControlsDisabled(true);
+
+                Common.UI.alert({
+                    title: this.warningTitle,
+                    msg  : this.warningText,
+                    iconCls: 'warn',
+                    buttons: ['ok'],
+                    callback: _.bind(function(btn){
+                        this.oleEditorView.setControlsDisabled(false);
+                        this.oleEditorView.hide();
+                    }, this)
+                });
+
+                this.needDisableEditing = false;
+            },
+
+            onInternalMessage: function(data) {
+                var eventData  = data.data;
+
+                if (this.oleEditorView) {
+                    if (eventData.type == 'documentReady') {
+                        this.oleEditorView._isExternalDocReady = true;
+                        this.isExternalEditorVisible && (isAppFirstOpened = false);
+                        this.oleEditorView._oleData && this.setOleData();
+                        if (this.needDisableEditing) {
+                            this.onOleEditingDisabled();
+                        }
+                    } else
+                    if (eventData.type == 'oleEditorReady') {
+                        if (this.needDisableEditing===undefined)
+                            this.oleEditorView.setControlsDisabled(false);
+                    } else
+                    if (eventData.type == "shortcut") {
+                        if (eventData.data.key == 'escape')
+                            this.oleEditorView.hide();
+                    } else
+                    if (eventData.type == "canClose") {
+                        if (eventData.data.answer === true) {
+                            if (externalEditor) {
+                                externalEditor.serviceCommand('setAppDisabled',true);
+                                if (eventData.data.mr == 'ok')
+                                    externalEditor.serviceCommand('getOleData');
+                            }
+                            this.oleEditorView.hide();
+                        }
+                        this.isHandlerCalled = false;
+                    } else
+                    if (eventData.type == "processMouse") {
+                        if (eventData.data.event == 'mouse:up') {
+                            this.oleEditorView.binding.dragStop();
+                        } else
+                        if (eventData.data.event == 'mouse:move') {
+                            var x = parseInt(this.oleEditorView.$window.css('left')) + eventData.data.pagex,
+                                y = parseInt(this.oleEditorView.$window.css('top')) + eventData.data.pagey + 34;
+                            this.oleEditorView.binding.drag({pageX:x, pageY:y});
+                        }
+                    } else
+                    if (eventData.type == "frameToGeneralData") {
+                        this.api && this.api.asc_getInformationBetweenFrameAndGeneralEditor(eventData.data);
+                    } else
+                        this.oleEditorView.fireEvent('internalmessage', this.oleEditorView, eventData);
+                }
+            } ,
+
+            onProcessMouse: function(data) {
+                if (data.type == 'mouseup' && this.isExternalEditorVisible) {
+                    externalEditor && externalEditor.serviceCommand('processmouse', data);
+                }
+            },
+
+            onSendFromGeneralToFrameEditor: function(data) {
+                externalEditor && externalEditor.serviceCommand('generalToFrameData', data);
+            },
+
+            warningTitle: 'Warning',
+            warningText: 'The object is disabled because of editing by another user.',
+            textClose: 'Close',
+            textAnonymous: 'Anonymous'
+        }
+    })(), Common.Controllers.ExternalOleEditor || {}));
+});

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

@@ -44,6 +44,7 @@
  *      <button ... data-hint="1" data-hint-direction="right" data-hint-offset="big" data-hint-title="B">...</button>
  *      <label ... data-hint="1" data-hint-direction="bottom" data-hint-offset="medium" data-hint-title="L">...</label>
  *
+ *
  *  Example usage with components:
  *
  *      new Common.UI.Button({
@@ -115,18 +116,30 @@ Common.UI.HintManager = new(function() {
         _isComplete = false,
         _isLockedKeyEvents = false,
         _inputTimer,
-        _isDocReady = false;
+        _isDocReady = false,
+        _isEditDiagram = false,
+        _usedTitles = [],
+        _appPrefix,
+        _staticHints = { // for desktop buttons
+            "btnhome": 'K'
+        };
 
     var _api;
 
-    var _setCurrentSection = function (btn) {
+    var _setCurrentSection = function (btn, section) {
+        if (section) {
+            _currentSection = section;
+            return;
+        }
         if (btn === 'esc') {
             if (_currentLevel === 0) {
                 _currentSection = document;
             }
             return;
         }
-        if ($('#file-menu-panel').is(':visible')) {
+        if (_isEditDiagram) {
+            _currentSection = [$(window.parent.document).find('.advanced-settings-dlg:visible')[0], window.document];
+        } else if ($('#file-menu-panel').is(':visible')) {
             _currentSection = $('#file-menu-panel');
         } else {
             _currentSection = (btn && btn.closest('.hint-section')) || document;
@@ -142,7 +155,10 @@ Common.UI.HintManager = new(function() {
 
     var _showHints = function () {
         _inputLetters = '';
-        if (_currentHints.length === 0 || ($('#file-menu-panel').is(':visible') && _currentLevel === 1)) {
+        if (_currentLevel === 0) {
+            Common.NotificationCenter.trigger('toolbar:collapse');
+        }
+        if (_currentHints.length === 0 || ($('#file-menu-panel').is(':visible' || _isEditDiagram) && _currentLevel === 1)) {
             _getHints();
         }
         if (_currentHints.length > 0) {
@@ -159,21 +175,29 @@ Common.UI.HintManager = new(function() {
         } else {
             _hintVisible = false;
         }
+
+        Common.NotificationCenter.trigger('hints:show', _hintVisible, _currentLevel);
     };
 
     var _hideHints = function() {
         _hintVisible = false;
         _currentHints && _currentHints.forEach(function(item) {
-            item.hide()
+            item.remove()
         });
         clearInterval(_inputTimer);
+
+        Common.NotificationCenter.trigger('hints:show', false);
     };
 
-    var _nextLevel = function() {
+    var _nextLevel = function(level) {
         _removeHints();
         _currentHints.length = 0;
         _currentControls.length = 0;
+        if (level !== undefined) {
+            _currentLevel = level;
+        } else {
             _currentLevel++;
+        }
     };
 
     var _prevLevel = function() {
@@ -184,51 +208,108 @@ Common.UI.HintManager = new(function() {
     };
 
     var _getLetters = function(countButtons) {
-        var arr = _arrAlphabet.slice();
-        arr[0] = _arrAlphabet[0] + _arrAlphabet[0];
-        for (var i = 1; arr.length < countButtons; i++) {
-            arr.push(_arrAlphabet[0] + _arrAlphabet[i]);
+        var arr = _arrAlphabet.slice(),
+            firstFreeLetter,
+            ind;
+        for (var i = 0; i < _arrAlphabet.length, !firstFreeLetter; i++) {
+            if (_usedTitles.indexOf(_arrAlphabet[i]) === -1) {
+                firstFreeLetter = _arrAlphabet[i];
+                ind = i;
+            }
+        }
+        arr[ind] = firstFreeLetter + _arrAlphabet[0];
+        for (var i = 0; arr.length < countButtons; i++) {
+            var addTip = firstFreeLetter + _arrAlphabet[i];
+            if (addTip !== arr[ind]) {
+                arr.push(firstFreeLetter + _arrAlphabet[i]);
+            }
         }
         return arr;
     };
 
+    var _getLetterInUILanguage = function (letter) {
+        var l = letter;
+        if (_arrAlphabet.indexOf(l) === -1) {
+            var ind = _arrEnAlphabet.indexOf(l);
+            l = _arrAlphabet[ind];
+        }
+        return l;
+    };
+
     var _isItemDisabled = function (item) {
         return (item.hasClass('disabled') || item.parent().hasClass('disabled') || item.attr('disabled'));
     };
 
     var _getControls = function() {
         _currentControls = [];
-        var arr = $(_currentSection).find('[data-hint=' + (_currentLevel) + ']').toArray();
+        _usedTitles = [];
+        var arr = [],
+            arrItemsWithTitle = [];
+        if (_.isArray(_currentSection)) {
+            _currentSection.forEach(function (section) {
+                arr = arr.concat($(section).find('[data-hint=' + (_currentLevel) + ']').toArray());
+                arrItemsWithTitle = arrItemsWithTitle.concat($(section).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray());
+            });
+        } else {
+            arr = $(_currentSection).find('[data-hint=' + (_currentLevel) + ']').toArray();
+            arrItemsWithTitle = $(_currentSection).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray();
+        }
         var visibleItems = arr.filter(function (item) {
             return $(item).is(':visible');
         });
-        var visibleItemsWithTitle = $(_currentSection).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray().filter(function (item) {
+        var visibleItemsWithTitle = arrItemsWithTitle.filter(function (item) {
             return $(item).is(':visible');
         });
         if (visibleItems.length === visibleItemsWithTitle.length) { // all buttons have data-hint-title
             visibleItems.forEach(function (item) {
                 var el = $(item);
+                if (_lang !== 'en') {
+                    var title = el.attr('data-hint-title').toLowerCase(),
+                        firstLetter = title.substr(0, 1);
+                    if (_arrAlphabet.indexOf(firstLetter) === -1) { // tip is in English
+                        var newTip = '';
+                        for (var i = 0; i < title.length; i++) {
+                            var letter = title.substr(i, 1),
+                                ind = _arrEnAlphabet.indexOf(letter);
+                            newTip = newTip + _arrAlphabet[ind].toUpperCase();
+                        }
+                        el.attr('data-hint-title', newTip);
+                    }
+
+                }
                 _currentControls.push(el);
             });
             return;
         }
-        var _arrLetters = [];
+        var _arrLetters = [],
+            _usedLetters = [];
+        if (_currentLevel === 0) {
+            for (var key in _staticHints) {
+                var t = _staticHints[key].toLowerCase();
+                _usedTitles.push(t);
+                _usedLetters.push(_arrAlphabet.indexOf(t));
+            }
+        }
         if (visibleItems.length > _arrAlphabet.length) {
-            _arrLetters = _getLetters(visibleItems.length);
+            visibleItemsWithTitle.forEach(function (item) {
+                var t = $(item).data('hint-title').toLowerCase();
+                t = _getLetterInUILanguage(t);
+                _usedTitles.push(t);
+            });
+            _arrLetters = _getLetters(visibleItems.length + (_currentLevel === 0 ? _.size(_staticHints) : 0));
         } else {
             _arrLetters = _arrAlphabet.slice();
         }
-        var usedLetters = [];
-        if ($(_currentSection).find('[data-hint-title]').length > 0) {
+        if (arrItemsWithTitle.length > 0) {
             visibleItems.forEach(function (item) {
                 var el = $(item);
                 var title = el.attr('data-hint-title');
                 if (title) {
                     var ind = _arrEnAlphabet.indexOf(title.toLowerCase());
                     if (ind === -1) { // we have already changed
-                        usedLetters.push(_arrAlphabet.indexOf(title.toLowerCase()));
+                        _usedLetters.push(_arrAlphabet.indexOf(title.toLowerCase()));
                     } else {
-                        usedLetters.push(ind);
+                        _usedLetters.push(ind);
                         if (_lang !== 'en') {
                             el.attr('data-hint-title', _arrLetters[ind].toUpperCase());
                         }
@@ -239,7 +320,7 @@ Common.UI.HintManager = new(function() {
         var index = 0;
         visibleItems.forEach(function (item) {
             var el = $(item);
-            while (usedLetters.indexOf(index) !== -1) {
+            while (_usedLetters.indexOf(index) !== -1) {
                 index++;
             }
             var title = el.attr('data-hint-title');
@@ -252,10 +333,14 @@ Common.UI.HintManager = new(function() {
     };
 
     var _getHints = function() {
-        var docH = Common.Utils.innerHeight() - 20,
-            docW = Common.Utils.innerWidth(),
-            topSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? $(_currentSection).offset().top : 0,
-            bottomSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? topSection + $(_currentSection).height() : docH;
+        var docH = _isEditDiagram ? (window.parent.innerHeight * Common.Utils.zoom()) : (Common.Utils.innerHeight() - 20),
+            docW = _isEditDiagram ? (window.parent.innerWidth * Common.Utils.zoom()) : (Common.Utils.innerWidth()),
+            section = _isEditDiagram ? _currentSection[0] : _currentSection,
+            topSection = _currentLevel !== 0 && $(section).length > 0 && !_isEditDiagram ? $(section).offset().top : 0,
+            bottomSection = _currentLevel !== 0 && $(section).length > 0 && !_isEditDiagram ? topSection + $(section).height() : docH;
+        if ($(section).prop('id') === 'toolbar' && $(section).outerHeight() < $(section).find('.box-controls').outerHeight()) {
+            bottomSection += $(section).find('.box-controls').outerHeight();
+        }
 
         if (_currentControls.length === 0)
             _getControls();
@@ -263,7 +348,8 @@ Common.UI.HintManager = new(function() {
             if (!_isItemDisabled(item)) {
                 var leftBorder = 0,
                     rightBorder = docW;
-                if ($(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || item.closest('.group').find('.toolbar-group-mask').length > 0)) {
+                if (!_isEditDiagram && $(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0)
+                    || ($('#about-menu-panel').is(':visible') && item.closest('.hint-section').prop('id') === 'right-menu')) { // don't show right menu hints when about is visible
                     return;
                 }
                 if (window.SSE && item.parent().prop('id') === 'statusbar_bottom') {
@@ -284,7 +370,7 @@ Common.UI.HintManager = new(function() {
                 var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
                 var direction = item.attr('data-hint-direction');
                 // exceptions
-                if (window.SSE && _currentSection.nodeType !== 9 &&
+                if (window.SSE && !_isEditDiagram && _currentSection.nodeType !== 9 &&
                     _currentSection.prop('id') === 'toolbar' && item.closest('.panel').attr('data-tab') === 'data') {
                     if (item.parent().hasClass('slot-sortdesc') || item.parent().hasClass('slot-btn-setfilter')) {
                         direction = 'top';
@@ -344,8 +430,13 @@ Common.UI.HintManager = new(function() {
                         top: top,
                         left: left
                     });
+                    if (_isEditDiagram && index < 2) {
+                        hint.css('z-index', '1060');
+                        $(window.parent.document.body).append(hint);
+                    } else {
                         $(document.body).append(hint);
                     }
+                }
 
                 _currentHints.push(hint);
             }
@@ -359,7 +450,7 @@ Common.UI.HintManager = new(function() {
     };
 
     var _resetToDefault = function() {
-        _currentLevel = $('#file-menu-panel').is(':visible') ? 1 : 0;
+        _currentLevel = ($('#file-menu-panel').is(':visible') || _isEditDiagram) ? 1 : 0;
         _setCurrentSection();
         _currentHints.length = 0;
         _currentControls.length = 0;
@@ -367,6 +458,10 @@ Common.UI.HintManager = new(function() {
 
     var _init = function(api) {
         _api = api;
+
+        var filter = Common.localStorage.getKeysFilter();
+        _appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
+
         Common.NotificationCenter.on({
             'app:ready': function (mode) {
                 var lang = mode.lang ? mode.lang.toLowerCase() : 'en';
@@ -383,11 +478,11 @@ Common.UI.HintManager = new(function() {
             _clearHints();
         });
         $(document).on('keyup', function(e) {
-            if (e.keyCode == Common.UI.Keys.ALT && _needShow) {
+            if (e.keyCode == Common.UI.Keys.ALT && _needShow && !(window.SSE && window.SSE.getController('Statusbar').getIsDragDrop())) {
                 e.preventDefault();
                 if (!_hintVisible) {
                     $('input:focus').blur(); // to change value in inputField
-                    _currentLevel = $('#file-menu-panel').is(':visible') ? 1 : 0;
+                    _currentLevel = ($('#file-menu-panel').is(':visible') || _isEditDiagram) ? 1 : 0;
                     _setCurrentSection();
                     _showHints();
                 } else {
@@ -407,19 +502,25 @@ Common.UI.HintManager = new(function() {
             if (_hintVisible) {
                 e.preventDefault();
                 if (e.keyCode == Common.UI.Keys.ESC ) {
+                    setTimeout(function () {
                         if (_currentLevel === 0) {
                             _hideHints();
+                            _resetToDefault();
                             _lockedKeyEvents(false);
                         } else {
                             _prevLevel();
                             _setCurrentSection('esc');
                             _showHints();
                         }
+                    }, 10);
                 } else {
-                    var curLetter = null;
+                    var curLetter = null,
+                        match = false;
                     var keyCode = e.keyCode;
                     if (keyCode !== 16 && keyCode !== 17 && keyCode !== 18 && keyCode !== 91) {
-                        curLetter = _lang === 'en' ? ((keyCode > 47 && keyCode < 58 || keyCode > 64 && keyCode < 91) ? String.fromCharCode(e.keyCode) : null) : e.key;
+                        curLetter = _lang === 'en' ?
+                            ((keyCode > 47 && keyCode < 58 || keyCode > 64 && keyCode < 91) ? String.fromCharCode(e.keyCode) : null) :
+                            (/[.*+?^${}()|[\]\\]/g.test(e.key) ? null : e.key);
                     }
                     if (curLetter) {
                         var curr;
@@ -432,11 +533,18 @@ Common.UI.HintManager = new(function() {
                         _inputLetters = _inputLetters + curLetter.toUpperCase();
                         for (var i = 0; i < _currentControls.length; i++) {
                             var item = _currentControls[i];
-                            if (!_isItemDisabled(item) && item.attr('data-hint-title') === _inputLetters) {
+                            if (!_isItemDisabled(item)) {
+                                var title = item.attr('data-hint-title'),
+                                    regExp = new RegExp('^' + _inputLetters + '');
+                                if (regExp.test(title)) {
+                                    match = true;
+                                }
+                                if (title === _inputLetters) {
                                     curr = item;
                                     break;
                                 }
                             }
+                        }
                         if (curr) {
                             var tag = curr.prop("tagName").toLowerCase();
                             if (window.SSE && curr.parent().prop('id') === 'statusbar_bottom') {
@@ -448,15 +556,21 @@ Common.UI.HintManager = new(function() {
                                 curr.trigger(jQuery.Event('click', {which: 1}));
                                 curr.focus();
                                 _resetToDefault();
+                            } else if (curr.hasClass('listview')) {
+                                _hideHints();
+                                curr.focus();
+                                _resetToDefault();
                             } else {
                                 _isComplete = false;
                                 _hideHints();
-                                if ($(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || curr.closest('.group').find('.toolbar-group-mask').length > 0)) {
+                                if (!_isEditDiagram && $(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0)) {
                                     _resetToDefault();
                                     return;
                                 }
-                                var needOpenPanel = (curr.attr('content-target') && !$('#' + curr.attr('content-target')).is(':visible'));
-                                if (!curr.attr('content-target') || needOpenPanel) { // need to open panel
+                                var needOpenPanel = (curr.attr('content-target') && !$('#' + curr.attr('content-target')).is(':visible') ||
+                                    (curr.parent().prop('id') === 'slot-btn-chat' && !$('#left-panel-chat').is(':visible')) ||
+                                    (curr.parent().hasClass('ribtab') && !$('#toolbar').children('.toolbar').hasClass('expanded')));
+                                if ((!curr.attr('content-target') && curr.parent().prop('id') !== 'slot-btn-chat') || needOpenPanel) { // need to open panel
                                     if (!($('#file-menu-panel').is(':visible') && (curr.parent().prop('id') === 'fm-btn-info' && $('#panel-info').is(':visible') ||
                                         curr.parent().prop('id') === 'fm-btn-settings' && $('#panel-settings').is(':visible')))) {
                                         if (curr.attr('for')) { // to trigger event in checkbox
@@ -470,7 +584,8 @@ Common.UI.HintManager = new(function() {
                                 }
                                 if (curr.prop('id') === 'btn-goback' || curr.closest('.btn-slot').prop('id') === 'slot-btn-options' ||
                                     curr.closest('.btn-slot').prop('id') === 'slot-btn-mode' || curr.prop('id') === 'btn-favorite' || curr.parent().prop('id') === 'tlb-box-users' ||
-                                    curr.prop('id') === 'left-btn-thumbs' || curr.hasClass('scroll')) {
+                                    curr.prop('id') === 'left-btn-thumbs' || curr.hasClass('scroll') || curr.prop('id') === 'left-btn-about' ||
+                                    curr.prop('id') === 'left-btn-support' || curr.closest('.btn-slot').prop('id') === 'slot-btn-search') {
                                     _resetToDefault();
                                     return;
                                 }
@@ -482,20 +597,35 @@ Common.UI.HintManager = new(function() {
                                     return;
                                 }
                                 if (!_isComplete) {
+                                    if (curr.parent().prop('id') === 'slot-btn-chat') {
+                                        _nextLevel(1);
+                                        _setCurrentSection(undefined, $('#left-menu.hint-section'));
+                                    } else if (curr.prop('id') === 'id-right-menu-signature') {
+                                        _nextLevel(2);
+                                        _setCurrentSection(curr);
+                                    } else {
                                         _nextLevel();
                                         _setCurrentSection(curr);
+                                    }
                                     _showHints();
                                     if (_currentHints.length < 1) {
                                         _resetToDefault();
                                     }
                                 }
                             }
+                        } else if (!match) {
+                            _inputLetters = '';
                         }
                     }
                 }
             }
 
-            _needShow = (e.keyCode == Common.UI.Keys.ALT && !Common.Utils.ModalWindow.isVisible() && _isDocReady);
+            _needShow = (Common.Utils.InternalSettings.get(_appPrefix + "settings-show-alt-hints") && !e.shiftKey && e.keyCode == Common.UI.Keys.ALT &&
+                !Common.Utils.ModalWindow.isVisible() && _isDocReady && _arrAlphabet.length > 0 &&
+                !(window.PE && $('#pe-preview').is(':visible')));
+            if (Common.Utils.InternalSettings.get(_appPrefix + "settings-show-alt-hints") && e.altKey && e.keyCode !== 115) {
+                e.preventDefault();
+            }
         });
     };
 
@@ -507,7 +637,16 @@ Common.UI.HintManager = new(function() {
                 _arrAlphabet = langsJson[lang];
                 return _arrAlphabet;
             };
-            return !_setAlphabet(lng) ? (!_setAlphabet(lng.split(/[\-_]/)[0]) ? _setAlphabet('en') : true) : true;
+            var loaded = !_setAlphabet(lng) ? (!_setAlphabet(lng.split(/[\-_]/)[0]) ? _setAlphabet('en') : true) : true;
+            if (loaded && _lang !== 'en') {
+                for (var key in _staticHints) {
+                    var hint = _getLetterInUILanguage(_staticHints[key].toLowerCase());
+                    if (hint) {
+                        _staticHints[key] = hint.toUpperCase();
+                    }
+                }
+            }
+            return loaded;
         });
         Common.Utils.loadConfig('../../common/main/resources/alphabetletters/qwertyletters.json', function (langsJson) {
             _arrQwerty = langsJson[_lang];
@@ -531,16 +670,35 @@ Common.UI.HintManager = new(function() {
         if (isComplete) {
             _isComplete = true;
         }
+
+        if ($('.hint-div').length > 0) {
+            $('.hint-div').remove();
+        }
+        if ($('iframe').length > 0) {
+            try {
+                $('iframe').contents().find('.hint-div').remove();
+            } catch (e) {}
+        }
     };
 
     var _isHintVisible = function () {
         return _hintVisible;
     };
 
+    var _setMode = function (mode) {
+        _isEditDiagram = mode.isEditDiagram || mode.isEditMailMerge || mode.isEditOle;
+    };
+
+    var _getStaticHint = function (key) {
+        return _staticHints[key];
+    };
+
     return {
         init: _init,
+        setMode: _setMode,
         clearHints: _clearHints,
         needCloseFileMenu: _needCloseFileMenu,
-        isHintVisible: _isHintVisible
+        isHintVisible: _isHintVisible,
+        getStaticHint: _getStaticHint
     }
 })();

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

@@ -262,7 +262,7 @@ define([
             store.where({isRevision: false}).forEach(function(item){
                 item.set('isVisible', needExpand);
             });
-            this.panelHistory.viewHistoryList.scroller.update({minScrollbarLength: 40});
+            this.panelHistory.viewHistoryList.scroller.update({minScrollbarLength: this.panelHistory.viewHistoryList.minScrollbarLength});
             this.panelHistory.btnExpand.cmpEl.text(needExpand ? this.panelHistory.textHideAll : this.panelHistory.textShowAll);
         },
 

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

@@ -105,17 +105,19 @@ Common.UI.LayoutManager = new(function() {
  * }
  */
 Common.UI.FeaturesManager = new(function() {
-    var _config;
-    var _init = function(config) {
+    var _config,
+        _licensed;
+    var _init = function(config, licensed) {
         _config = config;
+        _licensed = licensed;
     };
 
-    var _canChange = function(name) {
-        return !(_config && typeof _config[name] === 'object' && _config[name] && _config[name].change===false);
+    var _canChange = function(name, force) {
+        return !((_licensed || force) && _config && typeof _config[name] === 'object' && _config[name] && _config[name].change===false);
     };
 
-    var _getInitValue2 = function(name, defValue) {
-        if (_config && _config[name] !== undefined ) {
+    var _getInitValue2 = function(name, defValue, force) {
+        if ((_licensed || force) && _config && _config[name] !== undefined ) {
             if (typeof _config[name] === 'object' && _config[name]) { // object and not null
                 if (_config[name].mode!==undefined)
                     return _config[name].mode;
@@ -126,8 +128,8 @@ Common.UI.FeaturesManager = new(function() {
         return defValue;
     };
 
-    var _getInitValue = function(name) {
-        if (_config && _config[name] !== undefined ) {
+    var _getInitValue = function(name, force) {
+        if ((_licensed || force) && _config && _config[name] !== undefined ) {
             if (typeof _config[name] === 'object' && _config[name]) { // object and not null
                 if (_config[name].mode!==undefined)
                     return _config[name].mode;

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

@@ -39,7 +39,8 @@
 define([
     'core',
     'common/main/lib/collection/Plugins',
-    'common/main/lib/view/Plugins'
+    'common/main/lib/view/Plugins',
+    'common/main/lib/view/PluginDlg'
 ], function () {
     'use strict';
 
@@ -62,7 +63,7 @@ define([
                     'render:before' : function (toolbar) {
                         var appOptions = me.getApplication().getController('Main').appOptions;
 
-                        if ( !appOptions.isEditMailMerge && !appOptions.isEditDiagram ) {
+                        if ( !appOptions.isEditMailMerge && !appOptions.isEditDiagram && !appOptions.isEditOle ) {
                             var tab = {action: 'plugins', caption: me.panelPlugins.groupCaption, dataHintTitle: 'E', layoutname: 'toolbar-plugins'};
                             me.$toolbarPanelPlugins = me.panelPlugins.getPanel();
 
@@ -161,6 +162,8 @@ define([
                 this.api.asc_registerCallback("asc_onPluginMouseMove", _.bind(this.onPluginMouseMove, this));
                 this.api.asc_registerCallback('asc_onPluginsReset', _.bind(this.resetPluginsList, this));
                 this.api.asc_registerCallback('asc_onPluginsInit', _.bind(this.onPluginsInit, this));
+                this.api.asc_registerCallback('asc_onPluginShowButton', _.bind(this.onPluginShowButton, this));
+                this.api.asc_registerCallback('asc_onPluginHideButton', _.bind(this.onPluginHideButton, this));
 
                 this.loadPlugins();
             }
@@ -203,17 +206,7 @@ define([
                 arr = [];
             storePlugins.each(function(item){
                 var plugin = new Asc.CPlugin();
-                plugin.deserialize(item.attributes);
-
-                var variations = item.get('variations'),
-                    variationsArr = [];
-                variations.forEach(function(itemVar){
-                    var variation = new Asc.CPluginVariation();
-                    variation.deserialize(itemVar.attributes);
-                    variationsArr.push(variation);
-                });
-
-                plugin.set_Variations(variationsArr);
+                plugin.deserialize(item.get('original'));
                 item.set('pluginObj', plugin);
                 arr.push(plugin);
             });
@@ -251,6 +244,10 @@ define([
                         $('<div class="separator long"></div>').appendTo(me.$toolbarPanelPlugins);
                         _group = $('<div class="group"></div>');
                         rank_plugins = 0;
+                    } else {
+                        _group.appendTo(me.$toolbarPanelPlugins);
+                        $('<div class="separator long invisible"></div>').appendTo(me.$toolbarPanelPlugins);
+                        _group = $('<div class="group" style="padding-left: 0;"></div>');
                     }
 
                     var btn = me.panelPlugins.createPluginButton(model);
@@ -386,6 +383,7 @@ define([
                         buttons: isCustomWindow ? undefined : newBtns,
                         toolcallback: _.bind(this.onToolClose, this),
                         help: !!help,
+                        loader: plugin.get_Loader(),
                         modal: isModal!==undefined ? isModal : true
                     });
                     me.pluginDlg.on({
@@ -404,6 +402,9 @@ define([
                         },
                         'help': function(){
                             help && window.open(help, '_blank');
+                        },
+                        'header:click': function(type){
+                            me.api.asc_pluginButtonClick(type);
                         }
                     });
 
@@ -463,6 +464,14 @@ define([
             this.parsePlugins(pluginsdata)
         },
 
+        onPluginShowButton: function(id) {
+            this.pluginDlg && this.pluginDlg.showButton(id);
+        },
+
+        onPluginHideButton: function(id) {
+            this.pluginDlg && this.pluginDlg.hideButton(id);
+        },
+
         runAutoStartPlugins: function() {
             if (this.autostart && this.autostart.length > 0) {
                 this.api.asc_pluginRun(this.autostart.shift(), 0, '');
@@ -561,7 +570,8 @@ define([
                             visible: pluginVisible,
                             groupName: (item.group) ? item.group.name : '',
                             groupRank: (item.group) ? item.group.rank : 0,
-                            minVersion: item.minVersion
+                            minVersion: item.minVersion,
+                            original: item
                         }));
                     }
                 });

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

@@ -100,6 +100,7 @@ define([
         onLaunch: function () {
             this.collection     =   this.getApplication().getCollection('Common.Collections.ReviewChanges');
             this.userCollection =   this.getApplication().getCollection('Common.Collections.Users');
+            this.viewmode = false;
 
             this._state = {posx: -1000, posy: -1000, popoverVisible: false, previewMode: false, compareSettings: null, wsLock: false, wsProps: []};
 
@@ -160,13 +161,23 @@ define([
             this.document = data.doc;
         },
 
-        SetDisabled: function(state) {
+        SetDisabled: function(state, reviewMode, fillFormMode) {
             if (this.dlgChanges)
                 this.dlgChanges.close();
-            this.view && this.view.SetDisabled(state, this.langs, {comments: !!this._state.wsProps['Objects']});
+            if (reviewMode)
+                this.lockToolbar(Common.enumLock.previewReviewMode, state);
+            else if (fillFormMode)
+                this.lockToolbar(Common.enumLock.viewFormMode, state);
+            else
+                this.lockToolbar(Common.enumLock.viewMode, state);
+
             this.setPreviewMode(state);
         },
 
+        lockToolbar: function (causes, lock, opts) {
+            Common.Utils.lockControls(causes, lock, opts, this.view.getButtons());
+        },
+
         setPreviewMode: function(mode) { //disable accept/reject in popover
             if (this.viewmode === mode) return;
             this.viewmode = mode;
@@ -179,20 +190,50 @@ define([
             });
         },
 
-        onApiShowChange: function (sdkchange) {
+        isSelectedChangesLocked: function(changes, isShow) {
+            if (!changes || changes.length<1) return true;
+
+            if (isShow)
+                return changes[0].get('lock') || !changes[0].get('editable');
+
+            for (var i=0; i<changes.length; i++) {
+                var change = changes[i];
+                if (change.get('lock') || !change.get('editable'))
+                    return true; // lock button if at least one change is locked
+            }
+            return false;
+        },
+
+        onApiShowChange: function (sdkchange, isShow) {
+            var btnlock = true,
+                changes;
+            if (this.appConfig.canReview && !this.appConfig.isReviewOnly) {
+                if (sdkchange && sdkchange.length>0) {
+                    changes = this.readSDKChange(sdkchange);
+                    btnlock = this.isSelectedChangesLocked(changes, isShow);
+                }
+                if (this._state.lock !== btnlock) {
+                    Common.Utils.lockControls(Common.enumLock.reviewChangelock, btnlock, {array: [this.view.btnAccept, this.view.btnReject]});
+                    if (this.dlgChanges) {
+                        this.dlgChanges.btnAccept.setDisabled(btnlock);
+                        this.dlgChanges.btnReject.setDisabled(btnlock);
+                    }
+                    this._state.lock = btnlock;
+                    Common.Utils.InternalSettings.set(this.view.appPrefix + "accept-reject-lock", btnlock);
+                }
+            }
+
             if (this.getPopover()) {
-                if (!this.appConfig.reviewHoverMode && sdkchange && sdkchange.length>0) {
+                if (!this.appConfig.reviewHoverMode && sdkchange && sdkchange.length>0 && isShow) { // show changes balloon only for current position, not selection
                     var i = 0,
-                        changes = this.readSDKChange(sdkchange),
                         posX = sdkchange[0].get_X(),
                         posY = sdkchange[0].get_Y(),
                         animate = ( Math.abs(this._state.posx-posX)>0.001 || Math.abs(this._state.posy-posY)>0.001) || (sdkchange.length !== this._state.changes_length),
                         lock = (sdkchange[0].get_LockUserId()!==null),
-                        lockUser = this.getUserName(sdkchange[0].get_LockUserId()),
-                        editable = changes[0].get('editable');
+                        lockUser = this.getUserName(sdkchange[0].get_LockUserId());
 
                     this.getPopover().hideTips();
-                    this.popoverChanges.reset(changes);
+                    this.popoverChanges.reset(changes || this.readSDKChange(sdkchange));
 
                     if (animate) {
                         if ( this.getPopover().isVisible() ) this.getPopover().hide();
@@ -200,17 +241,6 @@ define([
                     }
 
                     this.getPopover().showReview(animate, lock, lockUser);
-
-                    var btnlock = lock || !editable;
-                    if (this.appConfig.canReview && !this.appConfig.isReviewOnly && this._state.lock !== btnlock) {
-                        this.view.btnAccept.setDisabled(btnlock);
-                        this.view.btnReject.setDisabled(btnlock);
-                        if (this.dlgChanges) {
-                            this.dlgChanges.btnAccept.setDisabled(btnlock);
-                            this.dlgChanges.btnReject.setDisabled(btnlock);
-                        }
-                        this._state.lock = btnlock;
-                    }
                     this._state.posx = posX;
                     this._state.posy = posY;
                     this._state.changes_length = sdkchange.length;
@@ -257,6 +287,9 @@ define([
                 this.popover = Common.Views.ReviewPopover.prototype.getPopover({
                     reviewStore : this.popoverChanges,
                     renderTo : this.sdkViewName,
+                    canRequestUsers: (this.appConfig) ? this.appConfig.canRequestUsers : undefined,
+                    canRequestSendNotify: (this.appConfig) ? this.appConfig.canRequestSendNotify : undefined,
+                    mentionShare: (this.appConfig) ? this.appConfig.mentionShare : true,
                     api: this.api
                 });
                 this.popover.setReviewStore(this.popoverChanges);
@@ -517,7 +550,7 @@ define([
                     if (item.value === 'all') {
                         this.api.asc_AcceptAllChanges();
                     } else {
-                        this.api.asc_AcceptChanges();
+                        this.api.asc_AcceptChangesBySelection(true); // accept and move to the next change
                     }
                 } else {
                     this.api.asc_AcceptChanges(menu);
@@ -532,7 +565,7 @@ define([
                     if (item.value === 'all') {
                         this.api.asc_RejectAllChanges();
                     } else {
-                        this.api.asc_RejectChanges();
+                        this.api.asc_RejectChangesBySelection(true); // reject and move to the next change
                     }
                 } else {
                     this.api.asc_RejectChanges(menu);
@@ -580,7 +613,8 @@ define([
                 this.view.turnChanges(state, global);
                 if (userId && this.userCollection) {
                     var rec = this.userCollection.findOriginalUser(userId);
-                    rec && this.showTips(Common.Utils.String.format(globalFlag ? this.textOnGlobal : this.textOffGlobal, AscCommon.UserInfoParser.getParsedName(rec.get('username'))));
+                    rec && Common.NotificationCenter.trigger('showmessage', {msg: Common.Utils.String.format(globalFlag ? this.textOnGlobal : this.textOffGlobal, AscCommon.UserInfoParser.getParsedName(rec.get('username')))},
+                                                                            {timeout: 5000, hideCloseTip: true});
                 }
             }
         },
@@ -764,33 +798,24 @@ define([
             Common.NotificationCenter.trigger('editing:disable', disable, {
                 viewMode: false,
                 reviewMode: true,
-                fillFormwMode: false,
+                fillFormMode: false,
                 allowMerge: false,
                 allowSignature: false,
                 allowProtect: false,
-                rightMenu: {clear: true, disable: true},
+                rightMenu: {clear: disable, disable: true},
                 statusBar: true,
                 leftMenu: {disable: false, previewMode: true},
                 fileMenu: {protect: true},
                 navigation: {disable: false, previewMode: true},
                 comments: {disable: false, previewMode: true},
                 chat: false,
-                review: false,
+                review: true,
                 viewport: false,
                 documentHolder: true,
                 toolbar: true,
-                plugins: true
+                plugins: true,
+                protect: true
             }, 'review');
-
-            if (this.view) {
-                this.view.$el.find('.no-group-mask.review').css('opacity', 1);
-
-                this.view.btnsDocLang && this.view.btnsDocLang.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(disable || !this.langs || this.langs.length<1);
-                    }
-                }, this);
-            }
         },
 
         createToolbarPanel: function() {
@@ -866,8 +891,8 @@ define([
             }
             me.onChangeProtectSheet();
             if (me.view) {
-                me.view.btnCommentRemove && me.view.btnCommentRemove.setDisabled(!Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true) || !!this._state.wsProps['Objects']);
-                me.view.btnCommentResolve && me.view.btnCommentResolve.setDisabled(!Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true) || !!this._state.wsProps['Objects']);
+                me.lockToolbar(Common.enumLock.hideComments, !Common.localStorage.getBool(me.view.appPrefix + "settings-livecomment", true), {array: [me.view.btnCommentRemove, me.view.btnCommentResolve]});
+                me.lockToolbar(Common.enumLock['Objects'], !!this._state.wsProps['Objects'], {array: [me.view.btnCommentRemove, me.view.btnCommentResolve]});
             }
 
             var val = Common.localStorage.getItem(me.view.appPrefix + "settings-review-hover-mode");
@@ -879,44 +904,11 @@ define([
             me.appConfig.reviewHoverMode = val;
         },
 
-        showTips: function(strings) {
-            var me = this;
-            if (!strings.length) return;
-            if (typeof(strings)!='object') strings = [strings];
-
-            function showNextTip() {
-                var str_tip = strings.shift();
-                if (str_tip) {
-                    me.tooltip.setTitle(str_tip);
-                    me.tooltip.show();
-                    me.tipTimeout = setTimeout(function () {
-                        me.tooltip.hide();
-                    }, 5000);
-                }
-            }
-
-            if (!this.tooltip) {
-                this.tooltip = new Common.UI.Tooltip({
-                    owner: this.getApplication().getController('Toolbar').getView(),
-                    hideonclick: true,
-                    placement: 'bottom',
-                    cls: 'main-info',
-                    offset: 30
-                });
-                this.tooltip.on('tooltip:hide', function(cmp){
-                    if (cmp==me.tooltip) {
-                        clearTimeout(me.tipTimeout);
-                        setTimeout(showNextTip, 300);
-                    }
-                });
-            }
-
-            showNextTip();
-        },
-
         applySettings: function(menu) {
             this.view && this.view.turnSpelling( Common.localStorage.getBool(this.view.appPrefix + "settings-spellcheck", true) );
             this.view && this.view.turnCoAuthMode( Common.localStorage.getBool(this.view.appPrefix + "settings-coauthmode", true) );
+            if ((this.appConfig.canReview || this.appConfig.canViewReview) && this.appConfig.reviewHoverMode)
+                this.onApiShowChange();
         },
 
         synchronizeChanges: function() {
@@ -927,11 +919,7 @@ define([
 
         setLanguages: function (array) {
             this.langs = array;
-            this.view && this.view.btnsDocLang && this.view.btnsDocLang.forEach(function(button) {
-                if ( button ) {
-                    button.setDisabled(this.langs.length<1);
-                }
-            }, this);
+            this.lockToolbar(Common.enumLock.noSpellcheckLangs, this.langs.length<1, {array: this.view.btnsDocLang});
         },
 
         onDocLanguage: function() {
@@ -951,6 +939,7 @@ define([
         onLostEditRights: function() {
             this._readonlyRights = true;
             this.view && this.view.onLostEditRights();
+            this.view && this.lockToolbar(Common.enumLock.cantShare, true, {array: [this.view.btnSharing]});
         },
 
         changeAccessRights: function(btn,event,opts) {
@@ -982,7 +971,7 @@ define([
         },
 
         onCoAuthoringDisconnect: function() {
-            this.SetDisabled(true);
+            this.lockToolbar(Common.enumLock.lostConnect, true)
         },
 
         onUpdateUsers: function() {
@@ -1000,15 +989,14 @@ define([
                     if (!item.asc_getView())
                         length++;
                 });
-                this.view.btnCompare.setDisabled(length>1 || this.viewmode);
+                Common.Utils.lockControls(Common.enumLock.hasCoeditingUsers, length>1, {array: [this.view.btnCompare]});
             }
         },
 
         commentsShowHide: function(mode) {
             if (!this.view) return;
             var value = Common.Utils.InternalSettings.get(this.view.appPrefix + "settings-livecomment");
-            (value!==undefined) && this.view.btnCommentRemove && this.view.btnCommentRemove.setDisabled(mode != 'show' && !value || !!this._state.wsProps['Objects']);
-            (value!==undefined) && this.view.btnCommentResolve && this.view.btnCommentResolve.setDisabled(mode != 'show' && !value || !!this._state.wsProps['Objects']);
+            (value!==undefined) && this.lockToolbar(Common.enumLock.hideComments, mode != 'show' && !value, {array: [this.view.btnCommentRemove, this.view.btnCommentResolve]});
         },
 
         onChangeProtectSheet: function(props) {
@@ -1020,11 +1008,7 @@ define([
             this._state.wsLock = props ? props.wsLock : false;
 
             if (!this.view) return;
-            var leftmenu = this.getApplication().getController('LeftMenu'),
-                isCommentsVisible = leftmenu && leftmenu.isCommentsVisible();
-            var value = Common.Utils.InternalSettings.get(this.view.appPrefix + "settings-livecomment");
-            (value!==undefined) && this.view.btnCommentRemove && this.view.btnCommentRemove.setDisabled(!isCommentsVisible && !value || !!this._state.wsProps['Objects']);
-            (value!==undefined) && this.view.btnCommentResolve && this.view.btnCommentResolve.setDisabled(!isCommentsVisible && !value || !!this._state.wsProps['Objects']);
+            this.lockToolbar(Common.enumLock['Objects'], !!this._state.wsProps['Objects'], {array: [this.view.btnCommentRemove, this.view.btnCommentResolve]});
         },
 
         textInserted: '<b>Inserted:</b>',

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

@@ -11,7 +11,16 @@ define([
     
     Common.UI.Themes = new (function(locale) {
         !locale && (locale = {});
+
+        const THEME_TYPE_LIGHT = 'light';
+        const THEME_TYPE_DARK = 'dark';
+        const THEME_TYPE_SYSTEM = 'system';
         var themes_map = {
+            'theme-system': {
+                text: locale.txtThemeSystem || 'Same as system',
+                type: THEME_TYPE_SYSTEM,
+                source: 'static',
+            },
             'theme-light': {
                 text: locale.txtThemeLight || 'Light',
                 type: 'light',
@@ -27,13 +36,20 @@ define([
                 type: 'dark',
                 source: 'static',
             },
+            'theme-contrast-dark': {
+                text: locale.txtThemeContrastDark || 'Dark Contrast',
+                type: 'dark',
+                source: 'static',
+            },
         }
 
         if ( !!window.currentLoaderTheme ) {
-            themes_map[currentLoaderTheme.id] = {};
+            if ( !themes_map[currentLoaderTheme.id] )
+                themes_map[currentLoaderTheme.id] = currentLoaderTheme;
             window.currentLoaderTheme = undefined;
         }
 
+        var is_dark_mode_allowed = true;
         var id_default_light_theme = 'theme-classic-light',
             id_default_dark_theme = 'theme-dark';
 
@@ -42,6 +58,10 @@ define([
             "toolbar-header-spreadsheet",
             "toolbar-header-presentation",
 
+            "text-toolbar-header-on-background-document",
+            "text-toolbar-header-on-background-spreadsheet",
+            "text-toolbar-header-on-background-presentation",
+
             "background-normal",
             "background-toolbar",
             "background-toolbar-additional",
@@ -53,6 +73,7 @@ define([
             "background-loader",
             "background-accent-button",
             "background-contrast-popover",
+            "shadow-contrast-popover",
 
             "highlight-button-hover",
             "highlight-button-pressed",
@@ -102,6 +123,7 @@ define([
             "canvas-page-border",
 
             "canvas-ruler-background",
+            "canvas-ruler-border",
             "canvas-ruler-margins-background",
             "canvas-ruler-mark",
             "canvas-ruler-handle-border",
@@ -174,10 +196,13 @@ define([
         }
 
         var parse_themes_object = function (obj) {
+            var curr_lang = Common.Locale.getCurrentLanguage(),
+                theme_label;
             if ( !!obj.themes && obj.themes instanceof Array ) {
                 obj.themes.forEach(function (item) {
                     if ( !!item.id ) {
-                        themes_map[item.id] = {text: item.name, type: item.type};
+                        theme_label = !item.l10n || !item.l10n[curr_lang] ? item.name : item.l10n[curr_lang];
+                        themes_map[item.id] = {text: theme_label, type: item.type};
                         write_theme_css(create_colors_css(item.id, item.colors));
                     } else
                     if ( typeof item == 'string' ) {
@@ -186,9 +211,12 @@ define([
                 });
             } else
             if ( obj.id ) {
-                themes_map[obj.id] = {text: obj.name, type: obj.type};
+                theme_label = !obj.l10n || !obj.l10n[curr_lang] ? obj.name : obj.l10n[curr_lang];
+                themes_map[obj.id] = {text: theme_label, type: obj.type};
                 write_theme_css( create_colors_css(obj.id, obj.colors) );
             }
+
+            Common.NotificationCenter.trigger('uitheme:countchanged');
         }
 
         var get_themes_config = function (url) {
@@ -228,6 +256,7 @@ define([
 
         var on_document_ready = function (el) {
             // get_themes_config('../../common/main/resources/themes/themes.json');
+            if ( !Common.Controllers.Desktop.isActive() || !Common.Controllers.Desktop.isOffline() )
                 get_themes_config('../../../../themes.json');
         }
 
@@ -244,13 +273,43 @@ define([
             return objtheme;
         }
 
+        var on_document_open = function (data) {
+            if ( !!this.api.asc_setContentDarkMode && this.isDarkTheme() ) {
+                this.api.asc_setContentDarkMode(this.isContentThemeDark());
+            }
+        };
+
+        const is_theme_type_system = function (id) { return themes_map[id].type == THEME_TYPE_SYSTEM; }
+        const get_system_theme_type = function () { return window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME_TYPE_DARK : THEME_TYPE_LIGHT; }
+        const get_system_default_theme = function () {
+            const id = get_system_theme_type() == THEME_TYPE_DARK ?
+                id_default_dark_theme : id_default_light_theme;
+
+            return {id: id, info: themes_map[id]};
+        };
+
+        const on_system_theme_dark = function (mql) {
+            if (Common.localStorage.getBool('ui-theme-use-system', false)) {
+                this.setTheme('theme-system');
+            }
+        };
+
         return {
             init: function (api) {
                 var me = this;
 
+                Common.Gateway.on('opendocument', on_document_open.bind(this));
                 $(window).on('storage', function (e) {
                     if ( e.key == 'ui-theme' || e.key == 'ui-theme-id' ) {
-                        me.setTheme(e.originalEvent.newValue, true);
+                        if ( !!e.originalEvent.newValue ) {
+                            if (Common.localStorage.getBool('ui-theme-use-system', false)) {
+                                me.setTheme('theme-system');
+                            } else me.setTheme(e.originalEvent.newValue, true);
+                        }
+                    } else
+                    if ( e.key == 'content-theme' ) {
+                        me.setContentTheme(e.originalEvent.newValue, true);
+                        console.log('changed content', e.originalEvent.newValue);
                     }
                 })
 
@@ -289,10 +348,8 @@ define([
                 obj.name = theme_name;
                 api.asc_setSkin(obj);
 
-                if ( !!this.api.asc_setContentDarkMode && this.isDarkTheme() ) {
-                    this.api.asc_setContentDarkMode(this.isContentThemeDark());
-                }
-
+                if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) )
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', on_system_theme_dark.bind(this));
                 Common.NotificationCenter.on('document:ready', on_document_ready.bind(this));
             },
 
@@ -313,6 +370,9 @@ define([
             },
 
             currentThemeId: function () {
+                if ( Common.localStorage.getBool('ui-theme-use-system', false) )
+                    return 'theme-system';
+
                 var t = Common.localStorage.getItem('ui-theme') || Common.localStorage.getItem('ui-theme-id');
                 var id = get_ui_theme_name(t);
                 return !!themes_map[id] ? id : id_default_light_theme;
@@ -326,14 +386,31 @@ define([
                 return themes_map[this.defaultThemeId(type)]
             },
 
-            isDarkTheme: function () {
-                return themes_map[this.currentThemeId()].type == 'dark';
+            isDarkTheme: function (id) {
+                !id && (id = this.currentThemeId());
+                return (is_theme_type_system(id) ? get_system_default_theme().info.type : themes_map[id].type) == THEME_TYPE_DARK;
             },
 
             isContentThemeDark: function () {
                 return Common.localStorage.getItem("content-theme") == 'dark';
             },
 
+            setContentTheme: function (mode, force) {
+                var set_dark = mode == 'dark';
+                if ( set_dark && !this.isDarkTheme() )
+                    return;
+
+                if ( set_dark != this.isContentThemeDark() || force ) {
+                    if ( this.api.asc_setContentDarkMode )
+                        this.api.asc_setContentDarkMode(set_dark);
+
+                    if ( Common.localStorage.getItem('content-theme') != mode )
+                        Common.localStorage.setItem('content-theme', mode);
+
+                    Common.NotificationCenter.trigger('contenttheme:dark', set_dark);
+                }
+            },
+
             toggleContentTheme: function () {
                 var is_current_dark = this.isContentThemeDark();
                 is_current_dark ? Common.localStorage.setItem('content-theme', 'light') : Common.localStorage.setItem('content-theme', 'dark');
@@ -344,14 +421,44 @@ define([
                 Common.NotificationCenter.trigger('contenttheme:dark', !is_current_dark);
             },
 
-            setTheme: function (obj, force) {
-                var id = get_ui_theme_name(obj);
-                if ( (this.currentThemeId() != id || force) && !!themes_map[id] ) {
+            setTheme: function (obj) {
+                if ( !obj ) return;
+
+                var id = get_ui_theme_name(obj),
+                    refresh_only = arguments[1];
+
+                if ( !refresh_only && is_theme_type_system(this.currentThemeId()) ) {
+                    // TODO: need refactoring. for bug 58801
+                    if ( get_system_default_theme().id == id ) {
+                        Common.localStorage.setBool('ui-theme-use-system', false);
+                        Common.localStorage.setItem('ui-theme-id', '');
+                        Common.localStorage.setItem('ui-theme-id', id);
+                        Common.NotificationCenter.trigger('uitheme:changed', id);
+                        return;
+                    }
+                }
+
+                if ( is_theme_type_system(id) ) {
+                    if ( get_system_default_theme().id == this.currentThemeId() ) {
+                        Common.localStorage.setBool('ui-theme-use-system', true);
+                        Common.localStorage.setItem('ui-theme-id', '');
+                        Common.localStorage.setItem('ui-theme-id', id);
+                        Common.NotificationCenter.trigger('uitheme:changed', id);
+                        return;
+                    }
+
+                    Common.localStorage.setBool('ui-theme-use-system', true);
+                    id = get_system_default_theme().id;
+                } else {
+                    Common.localStorage.setBool('ui-theme-use-system', false);
+                }
+
+                if ( (this.currentThemeId() != id || refresh_only) && !!themes_map[id] ) {
                     document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
                     document.body.classList.add(id, 'theme-type-' + themes_map[id].type);
 
                     if ( this.api ) {
-                        if ( this.api.asc_setContentDarkMode )
+                        if ( this.api.asc_setContentDarkMode && is_dark_mode_allowed )
                             if ( themes_map[id].type == 'light' ) {
                                 this.api.asc_setContentDarkMode(false);
                             } else {
@@ -370,15 +477,18 @@ define([
                         var theme_obj = {
                             id: id,
                             type: obj.type,
+                            text: themes_map[id].text,
                         };
 
                         if ( themes_map[id].source != 'static' ) {
                             theme_obj.colors = obj;
                         }
 
+                        if ( !refresh_only )
                             Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
                     }
 
+                    if ( !refresh_only )
                         Common.localStorage.setItem('ui-theme-id', id);
                     Common.NotificationCenter.trigger('uitheme:changed', id);
                 }

apps/common/main/lib/core/keymaster.js

@@ -36,7 +36,8 @@
       return _MAP[x] || x.toUpperCase().charCodeAt(0);
     },
     _downKeys = [];
-    var locked;
+    var locked,
+        propagate;
 
   for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
 
@@ -116,6 +117,8 @@
         // call the handler and stop the event if neccessary
         if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
           if(locked===true || handler.locked || handler.method(event, handler)===false){
+            if (locked===true && propagate || handler.locked && handler.propagate)
+              continue;
             if(event.preventDefault) event.preventDefault();
               else event.returnValue = false;
             if(event.stopPropagation) event.stopPropagation();
@@ -188,8 +191,8 @@
 
       if (keys.length > 1) {
         mods = getMods(keys);
-        key = keys[keys.length - 1];
       }
+      (keys.length > 0) && (key = keys[keys.length - 1]);
 
       key = code(key);
 
@@ -301,8 +304,8 @@
 
         if (keys.length > 1) {
           mods = getMods(keys);
-          key = keys[keys.length - 1];
         }
+        (keys.length > 0) && (key = keys[keys.length - 1]);
 
         key = code(key);
 
@@ -320,12 +323,23 @@
       }
   }
 
-  function suspend(key, scope) { 
-    key ? setKeyOptions(key, scope, 'locked', true) : (locked = true); 
+  function suspend(key, scope, pass) {
+    if (key) {
+      setKeyOptions(key, scope, 'locked', true)
+      pass && setKeyOptions(key, scope, 'propagate', true)
+    } else {
+      locked = true;
+      pass && (propagate = true);
+    }
   }
 
   function resume(key, scope) {
-    key ? setKeyOptions(key, scope, 'locked', false) : (locked = false); 
+    if (key) {
+      setKeyOptions(key, scope, 'locked', false)
+      setKeyOptions(key, scope, 'propagate', false)
+    } else {
+      locked = propagate = false;
+    }
   }
 
   // set window.key and window.key.set/get/deleteScope, and the default filter

apps/common/main/lib/extend/Bootstrap.js

@@ -128,8 +128,9 @@ function patchDropDownKeyDown(e) {
                  var mnu = $('> [role=menu]', li),
                     $subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'),
                     $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'),
+                    $palette = mnu.find('> li:not(.divider):not(.disabled):visible .theme-colorpalette.focused'),
                     $internal_menu = mnu.find('> li:not(.divider):not(.disabled):visible ul.internal-menu');
-                if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1)
+                if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1 && $palette.length<1)
                     ($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus();
             }, 250);
         }

apps/common/main/lib/model/Comment.js

@@ -57,6 +57,7 @@ define([
             userid              : 0,
             username            : 'Guest',
             parsedName          : 'Guest',
+            parsedGroups        : undefined,
             usercolor           : null,
             date                : undefined,
             quote               : '',
@@ -79,6 +80,7 @@ define([
             hideAddReply        : false,
             scope               : null,
             hide                : false,
+            filtered            : false,
             hint                : false,
             dummy               : undefined,
             editable            : true,

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

@@ -210,6 +210,7 @@
             currentPageX;
 
         $scrollbarX.bind('mousedown' + eventClassName, function (e) {
+          Common.NotificationCenter.trigger('hints:clear');
           currentPageX = e.pageX;
           currentLeft = $scrollbarX.position().left;
           $scrollbarXRail.addClass('in-scrolling');
@@ -240,6 +241,7 @@
             currentPageY;
 
         $scrollbarY.bind('mousedown' + eventClassName, function (e) {
+          Common.NotificationCenter.trigger('hints:clear');
           currentPageY = e.pageY;
           currentTop = $scrollbarY.position().top;
           $scrollbarYRail.addClass('in-scrolling');

apps/common/main/lib/template/AutoCorrectDialog.template

@@ -66,17 +66,18 @@
         <div class="padding-small">
             <label class="header"><%= scope.textReplaceText %></label>
         </div>
-        <div class="padding-large">
+        <div class="padding-small">
             <div class="padding-small" id="id-autocorrect-dialog-chk-quotes"></div>
             <div class="padding-small" id="id-autocorrect-dialog-chk-hyphens"></div>
-            <div id="id-autocorrect-dialog-chk-hyperlink"></div>
+            <div class="padding-small"  id="id-autocorrect-dialog-chk-hyperlink"></div>
+            <div class="padding-small" id="id-autocorrect-dialog-chk-double-space"></div>
         </div>
         <div class="padding-small">
             <label class="header"><%= scope.textApplyText %></label>
         </div>
-        <div class="padding-large">
+        <div class="padding-small">
             <div class="padding-small" id="id-autocorrect-dialog-chk-bulleted"></div>
-            <div id="id-autocorrect-dialog-chk-numbered"></div>
+            <div class="padding-small" id="id-autocorrect-dialog-chk-numbered"></div>
         </div>
     </div>
 </div>
@@ -85,14 +86,14 @@
         <div class="padding-small">
             <label class="header"><%= scope.textReplaceText %></label>
         </div>
-        <div class="padding-large">
-            <div id="id-autocorrect-dialog-chk-hyperlink"></div>
+        <div class="padding-small">
+            <div class="padding-small" id="id-autocorrect-dialog-chk-hyperlink"></div>
         </div>
         <div class="padding-small">
             <label class="header"><%= scope.textApplyAsWork %></label>
         </div>
-        <div class="padding-large">
-            <div id="id-autocorrect-dialog-chk-new-rows"></div>
+        <div class="padding-small">
+            <div class="padding-small" id="id-autocorrect-dialog-chk-new-rows"></div>
         </div>
     </div>
 </div>
@@ -101,7 +102,7 @@
         <div class="padding-small">
             <div id="id-autocorrect-dialog-chk-fl-sentence"></div>
         </div>
-        <div class="padding-large">
+        <div class="padding-small">
             <div id="id-autocorrect-dialog-chk-fl-cells"></div>
         </div>
     </div>

apps/common/main/lib/template/Comments.template

@@ -1,4 +1,4 @@
-<% if (!hide) { %>
+<% if (!hide && !filtered) { %>
     <div id="<%= id %>" class="user-comment-item">
 
         <!-- comment block -->

apps/common/main/lib/template/CommentsPanel.template

@@ -7,8 +7,8 @@
         <div class="inner-ct">
             <textarea id="comment-msg-new" class="user-select textarea-control" placeholder="<%=textEnterCommentHint%>" maxlength="<%=maxCommLength%>" data-hint="1" data-hint-direction="left-top"></textarea>
         </div>
-        <button class="btn add normal dlg-btn primary" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%=textAddComment%></button>
-        <button class="btn cancel normal dlg-btn" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%=textCancel%></button>
+        <button class="btn add normal dlg-btn primary" data-hint="1" data-hint-direction="bottom" data-hint-offset="big" style="width: auto;min-width: 86px;"><%=textAddComment%></button>
+        <button class="btn cancel normal dlg-btn" data-hint="1" data-hint-direction="bottom" data-hint-offset="big" style="width: auto;min-width: 86px;"><%=textCancel%></button>
     </div>
     <div id="comments-header" class="">
         <label><%=textComments%></label>

apps/common/main/lib/template/SearchPanel.template

@@ -0,0 +1,63 @@
+<div id="search-box" class="layout-ct vbox search-panel">
+    <div id="search-header">
+        <label id="search-adv-title"></label>
+        <div id="search-btn-close"></div>
+    </div>
+    <div id="search-adv-settings">
+        <table cols="1">
+            <tbody>
+                <tr>
+                    <td class="padding-small"><div id="search-adv-text"></div></td>
+                </tr>
+                <tr class="edit-setting">
+                    <td class="padding-large"><div id="search-adv-replace-text"></div></td>
+                </tr>
+                <tr>
+                    <td class="padding-large">
+                        <label id="search-adv-results-number" style="display: inline-block;">
+                            <%= scope.textSearchResults %>
+                        </label>
+                        <div class="search-nav-btns">
+                            <div id="search-adv-back"></div>
+                            <div id="search-adv-next"></div>
+                        </div>
+                    </td>
+                </tr>
+                <tr class="edit-setting">
+                    <td class="padding-large">
+                       <button type="button" class="btn btn-text-default" id="search-adv-replace" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplace %></button>
+                       <button type="button" class="btn btn-text-default" id="search-adv-replace-all" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplaceAll %></button>
+                    </td>
+                </tr>
+                <tr class="search-options-block">
+                    <td class="padding-large">
+                        <div id="open-search-options" data-hint="1" data-hint-direction="left" data-hint-offset="0, -15">
+                            <div class="search-options-caret img-commonctrl"></div>
+                            <div class="search-options-txt"><%= scope.textSearchOptions %></div>
+                        </div>
+                        <div id="search-options">
+                            <label class="input-label"><%= scope.textWithin %></label>
+                            <div id="search-adv-cmb-within"></div>
+                            <div id="search-adv-select-range"></div>
+                            <label class="input-label"><%= scope.textSearch %></label>
+                            <div id="search-adv-cmb-search"></div>
+                            <label class="input-label"><%= scope.textLookIn %></label>
+                            <div id="search-adv-cmb-look-in"></div>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="padding-small"><div id="search-adv-case-sensitive"></div></td>
+                </tr>
+                <!---<tr>
+                    <td class="padding-small"><div id="search-adv-use-regexp"></div></td>
+                </tr>-->
+                <tr>
+                    <td class="padding-large"><div id="search-adv-match-word"></div></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div id="search-results" class="ps-container oo">
+    </div>
+</div>

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

@@ -52,13 +52,13 @@ define(['gateway'], function () {
         Common.Gateway.on('internalcommand', ongetstore);
 
         var _refresh = function() {
-            if (!_lsAllowed)
-                Common.Gateway.internalMessage('localstorage', {cmd:'get', keys:_filter});
+            // if (!_lsAllowed)
+            //     Common.Gateway.internalMessage('localstorage', {cmd:'get', keys:_filter});
         };
 
         var _save = function() {
-            if (!_lsAllowed)
-                Common.Gateway.internalMessage('localstorage', {cmd:'set', keys:_store});
+            // if (!_lsAllowed)
+            //     Common.Gateway.internalMessage('localstorage', {cmd:'set', keys:_store});
         };
 
         var _setItem = function(name, value, just) {
@@ -72,14 +72,15 @@ define(['gateway'], function () {
             } else {
                 _store[name] = value;
 
-                if (just===true) {
-                    Common.Gateway.internalMessage('localstorage', {
-                        cmd:'set',
-                        keys: {
-                            name: value
-                        }
-                    });
-                }
+                // if (just===true) {
+                    // TDDO: remove after ver 7.2. using external local storage is depricated
+                    // Common.Gateway.internalMessage('localstorage', {
+                    //     cmd:'set',
+                    //     keys: {
+                    //         name: value
+                    //     }
+                    // });
+                // }
             }
         };
 

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

@@ -148,8 +148,8 @@ Common.util = Common.util||{};
             }
         },
 
-        suspendEvents: function(key,scope) {
-            window.key.suspend(key,scope);
+        suspendEvents: function(key,scope,propagate) {
+            window.key.suspend(key,scope,propagate);
         },
 
         resumeEvents: function(key,scope) {

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

@@ -109,13 +109,16 @@
 
             var me = this;
             Common.NotificationCenter.on({'layout:changed': function(e){
-                if (!me.options.hideonclick && me.tip().is(':visible'))
+                if (!me.options.keepvisible && !me.options.hideonclick && me.tip().is(':visible'))
                     me.hide();
             }});
+            this.isDesktopApp = Common.Controllers.Desktop.isActive();
         },
 
         mousemove: function (e) {
-            this.targetXY = [e.clientX*Common.Utils.zoom(), e.clientY*Common.Utils.zoom()];
+            var x = e.clientX*Common.Utils.zoom(),
+                y = e.clientY*Common.Utils.zoom();
+            this.targetXY = [x, this.isDesktopApp ? Math.max(y, 14) : y];
         },
 
         leave: function(obj) {

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

@@ -597,4 +597,776 @@ define(function(){ 'use strict';
             textValue: 'Value is'
         }
     })(), Common.define.conditionalData || {});
+
+    Common.define.effectData = _.extend(new (function () {
+        return {
+            textEntrance: 'Entrance Effect',
+            textEmphasis: 'Emphasis Effect',
+            textExit: 'Exit Effect',
+            textPath: 'Motion Path',
+            textAppear: 'Appear',
+            textFade: 'Fade',
+            textFlyIn: 'Fly in',
+            textFloatIn: 'Float In',
+            textSplit: 'Split',
+            textWipe: 'Wipe',
+            textShape: 'Shape',
+            textWheel: 'Wheel',
+            textRandomBars: 'Random Bars ',
+            textGrowTurn: 'Grow & Turn',
+            textZoom: 'Zoom',
+            textSwivel: 'Swivel',
+            textBounce: 'Bounce',
+            textPulse: 'Pulse',
+            textColorPulse: 'Color Pulse',
+            textTeeter: 'Teeter',
+            textSpin: 'Spin',
+            textGrowShrink: 'Grow/Shrink',
+            textShrinkTurn: 'Shrink & Turn',
+            textDesaturate: 'Desaturate',
+            textDarken: 'Darken',
+            textLighten: 'Lighten',
+            textTransparency: 'Transparency',
+            textObjectColor: 'Object Color',
+            textComplementaryColor: 'Complementary Color',
+            textComplementaryColor2: 'Complementary Color 2',
+            textLineColor: 'Line Color',
+            textFillColor: 'Fill Color',
+            textBrushColor: 'Brush Color',
+            textFontColor: 'Font Color',
+            textUnderline: 'Underline',
+            textBoldFlash: 'Bold Flash',
+            textBoldReveal: 'Bold Reveal',
+            textWave: 'Wave',
+            textDisappear: 'Disappear',
+            textFlyOut: 'Fly Out',
+            textFloatOut: 'Float Out',
+            textBasic: 'Basic',
+            textSubtle: 'Subtle',
+            textModerate: 'Moderate',
+            textExciting: 'Exciting',
+            textLinesCurves: 'Lines Curves',
+            textSpecial: 'Special',
+            textBox: 'Box',
+            textCircle: 'Circle',
+            textPlus: 'Plus',
+            textDiamond: 'Diamond',
+            textDissolveIn: 'Dissolve In',
+            textBlinds: 'Blinds',
+            textCheckerboard: 'Checkerboard',
+            textPeekIn: 'Peek In',
+            textStrips: 'Strips',
+            textExpand: 'Expand',
+            textBasicZoom: 'Basic Zoom',
+            textCompress: 'Compress',
+            textFloatUp: 'Float Up',
+            textRiseUp: 'Rise Up',
+            textStretch: 'Stretch',
+            textCenterRevolve: 'Center Revolve',
+            textFloatDown: 'Float Down',
+            textSpinner: 'Spinner',
+            textBasicSwivel: 'Basic Swivel',
+            textBoomerang: 'Boomerang',
+            textCredits: 'Credits',
+            textCuverUp: 'Cuver Up',
+            textDrop: 'Drop',
+            textFloat: 'Float',
+            textPinwheel: 'Pinwheel',
+            textSpiralIn: 'Spiral In',
+            textWhip: 'Whip',
+            textGrowWithColor: 'Grow With Color',
+            textShimmer: 'Shimmer',
+            textBlink: 'Blink',
+            textDissolveOut: 'Dissolve Out',
+            textPeekOut: 'Peek Out',
+            textContrast: 'Contrast',
+            textCollapse: 'Collapse',
+            textSinkDown: 'Sink Down',
+            textCurveDown: 'CurveDown',
+            textSpiralOut: 'Spiral Out',
+            textContrastingColor: 'Contrasting Color',
+            textPointStar4: '4 Point Star',
+            textPointStar5: '5 Point Star',
+            textPointStar6: '6 Point Star',
+            textPointStar8: '8 Point Star',
+            textCrescentMoon: 'Crescent Moon',
+            textEqualTriangle: 'Equal Triangle',
+            textFootball: 'Football',
+            textHeart: 'Heart',
+            textHexagon: 'Hexagon',
+            textOctagon: 'Octagon',
+            textParallelogram: 'Parallelogram',
+            textPentagon: 'Pentagon',
+            textSquare: 'Square',
+            textTeardrop: 'Teardrop',
+            textTrapezoid: 'Trapezoid',
+            textArcDown: 'Arc Down',
+            textArcLeft: 'Arc Left',
+            textArcRight: 'Arc Right',
+            textArcUp: 'Arc Up',
+            textBounceLeft: 'Bounce Left',
+            textBounceRight: 'Bounce Right',
+            textCurvyLeft: 'Curvy Left',
+            textCurvyRight: 'Curvy Right',
+            textDecayingWave: 'Decaying Wave',
+            textDiagonalDownRight: 'Diagonal Down Right',
+            textDiagonalUpRight: 'Diagonal Up Right',
+            textDown: 'Down',
+            textFunnel: 'Funnel',
+            textHeartbeat: 'Heartbeat',
+            textLeft: 'Left',
+            textRight: 'Right',
+            textSCurve1: 'S Curve 1',
+            textSCurve2: 'S Curve 2',
+            textSineWave: 'Sine Wave',
+            textSpiralLeft: 'Spiral Left',
+            textSpiralRight: 'Spiral Right',
+            textSpring: 'Spring:',
+            textStairsDown: 'Stairs Down',
+            textTurnDown: 'Turn Down',
+            textTurnDownRight: 'Turn Down Right',
+            textTurnUp: 'Turn Up',
+            textTurnUpRight: 'Turn Up Right',
+            textUp: 'Up',
+            textZigzag: 'Zigzag',
+            textBean: 'Bean',
+            textCurvedSquare: 'CurvedSquare',
+            textCurvedX: 'Curved X',
+            textCurvyStar: 'Curvy Star',
+            textFigureFour: 'Figure 8 Four',
+            textHorizontalFigure: 'Horizontal Figure 8',
+            textInvertedSquare: 'Inverted Square',
+            textInvertedTriangle: 'Inverted Triangle',
+            textLoopDeLoop: 'Loop de Loop',
+            textNeutron: 'Neutron',
+            textPeanut: 'Peanut',
+            textPointStar: 'Point Star',
+            textSwoosh: 'Swoosh',
+            textVerticalFigure: 'Vertical Figure 8',
+            textRightTriangle: 'Right Triangle',
+            textAcross: 'Across',
+            textFromBottom: 'From Bottom',
+            textFromBottomLeft: 'From Bottom-Left',
+            textFromLeft: 'From Left',
+            textFromTopLeft: 'From Top-Left',
+            textFromTop: 'From Top',
+            textFromTopRight: 'From Top-Right',
+            textFromRight: 'From Right',
+            textFromBottomRight: 'From Bottom-Right',
+            textLeftDown: ' Left Down',
+            textLeftUp: ' Left Up',
+            textRightDown: ' Right Down',
+            textRightUp: ' Right Up',
+            textObjectCenter: 'Object Center',
+            textSlideCenter: 'Slide Center',
+            textInFromScreenCenter: 'In From Screen Center',
+            textOutFromScreenBottom: 'Out From Screen Bottom',
+            textInSlightly: 'In Slightly',
+            textInToScreenBottom: 'In To Screen Bottom',
+            textOutToScreenCenter: 'Out To Screen Center',
+            textOutSlightly: 'Out Slightly',
+            textToBottom: 'To Bottom',
+            textToBottomLeft: 'To Bottom-Left',
+            textToLeft: 'To Left',
+            textToTopLeft: 'To Top-Left',
+            textToTop: 'To Top',
+            textToTopRight: 'To Top-Right',
+            textToRight: 'To Right',
+            textToBottomRight: 'To Bottom-Right',
+            textSpoke1: '1 Spoke',
+            textSpoke2: '2 Spokes',
+            textSpoke3: '3 Spokes',
+            textSpoke4: '4 Spokes',
+            textSpoke8: '8 Spokes',
+            textCustomPath: 'Custom Path',
+            textHorizontalIn: 'Horizontal In',
+            textHorizontalOut: 'Horizontal Out',
+            textVerticalIn: 'Vertical In',
+            textVerticalOut: 'Vertical Out',
+            textVertical: 'Vertical',
+            textHorizontal: 'Horizontal',
+            textIn: 'In',
+            textOut: 'Out',
+            textWedge: 'Wedge',
+            textFlip: 'Flip',
+            textLines: 'Lines',
+            textArcs: 'Arcs',
+            textTurns: 'Turns',
+            textShapes: 'Shapes',
+            textLoops: 'Loops',
+            textPathCurve: 'Curve',
+            textPathLine: 'Line',
+            textPathScribble: 'Scribble',
+
+            getEffectGroupData: function () {
+                return [
+                    {id: 'menu-effect-group-entrance',  value: AscFormat.PRESET_CLASS_ENTR,     caption: this.textEntrance,     iconClsCustom: 'animation-entrance-custom'},
+                    {id: 'menu-effect-group-emphasis',  value: AscFormat.PRESET_CLASS_EMPH,     caption: this.textEmphasis,     iconClsCustom: 'animation-emphasis-custom'},
+                    {id: 'menu-effect-group-exit',      value: AscFormat.PRESET_CLASS_EXIT,     caption: this.textExit,         iconClsCustom: 'animation-exit-custom'},
+                    {id: 'menu-effect-group-path',      value: AscFormat.PRESET_CLASS_PATH,     caption: this.textPath,         iconClsCustom: 'animation-motion-paths-custom'}
+                ];
+            },
+
+            getEffectData: function () {
+                return [
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_APPEAR,                   iconCls: 'animation-entrance-appear',               displayValue: this.textAppear},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_FADE,                     iconCls: 'animation-entrance-fade',                 displayValue: this.textFade},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_FLY_IN_FROM,              iconCls: 'animation-entrance-fly-in',               displayValue: this.textFlyIn},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_FLOAT_UP,                 iconCls: 'animation-entrance-float-in',             displayValue: this.textFloatIn,     familyEffect: 'entrfloat'},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_SPLIT,                    iconCls: 'animation-entrance-split',                displayValue: this.textSplit},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_WIPE_FROM,                iconCls: 'animation-entrance-wipe',                 displayValue: this.textWipe},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_CIRCLE,                   iconCls: 'animation-entrance-shape',                displayValue: this.textShape,       familyEffect: 'entrshape'},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_WHEEL,                    iconCls: 'animation-entrance-wheel',                displayValue: this.textWheel},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_RANDOM_BARS,              iconCls: 'animation-entrance-random-bars',          displayValue: this.textRandomBars},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_GROW_AND_TURN,            iconCls: 'animation-entrance-grow-turn',            displayValue: this.textGrowTurn},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_ZOOM,                     iconCls: 'animation-entrance-zoom',                 displayValue: this.textZoom},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_SWIVEL,                   iconCls: 'animation-entrance-swivel',               displayValue: this.textSwivel},
+                    {group: 'menu-effect-group-entrance',   value: AscFormat.ENTRANCE_BOUNCE,                   iconCls: 'animation-entrance-bounce',               displayValue: this.textBounce},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_PULSE,                    iconCls: 'animation-emphasis-pulse',                displayValue: this.textPulse},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_COLOR_PULSE,              iconCls: 'animation-emphasis-color-pulse',          displayValue: this.textColorPulse},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_TEETER,                   iconCls: 'animation-emphasis-teeter',               displayValue: this.textTeeter},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_SPIN,                     iconCls: 'animation-emphasis-spin',                 displayValue: this.textSpin},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_GROW_SHRINK,              iconCls: 'animation-emphasis-grow-or-shrink',       displayValue: this.textGrowShrink},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_DESATURATE,               iconCls: 'animation-emphasis-desaturate',           displayValue: this.textDesaturate},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_CONTRASTING_DARKEN,       iconCls: 'animation-emphasis-darken',               displayValue: this.textDarken},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_LIGHTEN,                  iconCls: 'animation-emphasis-lighten',              displayValue: this.textLighten},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_TRANSPARENCY,             iconCls: 'animation-emphasis-transparency',         displayValue: this.textTransparency},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_OBJECT_COLOR,             iconCls: 'animation-emphasis-object-color',         displayValue: this.textObjectColor},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_COMPLEMENTARY_COLOR,      iconCls: 'animation-emphasis-complementary-color',  displayValue: this.textComplementaryColor},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_LINE_COLOR,               iconCls: 'animation-emphasis-line-color',           displayValue: this.textLineColor},
+                    {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_FILL_COLOR,               iconCls: 'animation-emphasis-fill-color',           displayValue: this.textFillColor},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_DISAPPEAR,                    iconCls: 'animation-exit-disappear',                displayValue: this.textDisappear},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_FADE,                         iconCls: 'animation-exit-fade',                     displayValue: this.textFade},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_FLY_OUT_TO,                   iconCls: 'animation-exit-fly-out',                  displayValue: this.textFlyOut},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_FLOAT_DOWN,                   iconCls: 'animation-exit-float-out',                displayValue: this.textFloatOut,    familyEffect: 'exitfloat'},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_SPLIT,                        iconCls: 'animation-exit-split',                    displayValue: this.textSplit},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_WIPE_FROM,                    iconCls: 'animation-exit-wipe',                     displayValue: this.textWipe},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_CIRCLE,                       iconCls: 'animation-exit-shape',                    displayValue: this.textShape,       familyEffect: 'shape'},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_WHEEL,                        iconCls: 'animation-exit-wheel',                    displayValue: this.textWheel},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_RANDOM_BARS,                  iconCls: 'animation-exit-random-bars',              displayValue: this.textRandomBars},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_SHRINK_AND_TURN,              iconCls: 'animation-exit-shrink-turn',              displayValue: this.textShrinkTurn},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_ZOOM,                         iconCls: 'animation-exit-zoom',                     displayValue: this.textZoom},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_SWIVEL,                       iconCls: 'animation-exit-swivel',                   displayValue: this.textSwivel},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_BOUNCE,                       iconCls: 'animation-exit-bounce',                   displayValue: this.textBounce},
+                    {group: 'menu-effect-group-path',       value: AscFormat.MOTION_DOWN,                       iconCls: 'animation-motion-paths-lines',            displayValue: this.textLines,       familyEffect: 'pathlines'},
+                    {group: 'menu-effect-group-path',       value: AscFormat.MOTION_ARC_DOWN,                   iconCls: 'animation-motion-paths-arcs',             displayValue: this.textArcs,        familyEffect: 'patharcs'},
+                    {group: 'menu-effect-group-path',       value: AscFormat.MOTION_TURN_DOWN,                  iconCls: 'animation-motion-paths-turns',            displayValue: this.textTurns,       familyEffect: 'pathturns'},
+                    {group: 'menu-effect-group-path',       value: AscFormat.MOTION_CIRCLE,                     iconCls: 'animation-motion-paths-shapes',           displayValue: this.textShapes,      familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR,   iconCls: 'animation-motion-paths-loops',            displayValue: this.textLoops,       familyEffect: 'pathloops'},
+                    {group: 'menu-effect-group-path',       value: AscFormat.MOTION_CUSTOM_PATH,                iconCls: 'animation-motion-paths-custom-path',      displayValue: this.textCustomPath}
+                ];
+            },
+
+            getLevelEffect: function (isPath) {
+
+                if (!isPath)
+                    return [
+                        {id: 'menu-effect-level-basic',         displayValue: this.textBasic},
+                        {id: 'menu-effect-level-subtle',        displayValue: this.textSubtle},
+                        {id: 'menu-effect-level-moderate',      displayValue: this.textModerate},
+                        {id: 'menu-effect-level-exciting',      displayValue: this.textExciting}
+                    ];
+                else
+                    return [
+                        {id: 'menu-effect-level-basic',         displayValue: this.textBasic},
+                        {id: 'menu-effect-level-lines_curves',  displayValue: this.textSubtle},
+                        {id: 'menu-effect-level-special',       displayValue: this.textModerate}
+                    ];
+            },
+
+            getEffectFullData: function () {
+                return [
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_APPEAR,                   displayValue: this.textAppear},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_BLINDS,                   displayValue: this.textBlinds},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_BOX,                      displayValue: this.textBox,                 familyEffect: 'entrshape'},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_CHECKERBOARD,             displayValue: this.textCheckerboard},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_CIRCLE,                   displayValue: this.textCircle,              familyEffect: 'entrshape'},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_DIAMOND,                  displayValue: this.textDiamond,             familyEffect: 'entrshape'},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_DISSOLVE_IN,              displayValue: this.textDissolveIn},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_FLY_IN_FROM,              displayValue: this.textFlyIn},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_PEEK_IN_FROM,             displayValue: this.textPeekIn},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_PLUS,                     displayValue: this.textPlus,                familyEffect: 'entrshape'},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_RANDOM_BARS,              displayValue: this.textRandomBars},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_SPLIT,                    displayValue: this.textSplit},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_STRIPS,                   displayValue: this.textStrips},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_WEDGE,                    displayValue: this.textWedge},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_WHEEL,                    displayValue: this.textWheel},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-basic',           value: AscFormat.ENTRANCE_WIPE_FROM,                displayValue: this.textWipe},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-subtle',          value: AscFormat.ENTRANCE_EXPAND,                   displayValue: this.textExpand},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-subtle',          value: AscFormat.ENTRANCE_FADE,                     displayValue: this.textFade},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-subtle',          value: AscFormat.ENTRANCE_SWIVEL,                   displayValue: this.textSwivel},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-subtle',          value: AscFormat.ENTRANCE_ZOOM,                     displayValue: this.textZoom},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_BASIC_ZOOM,               displayValue: this.textBasicZoom},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_CENTER_REVOLVE,           displayValue: this.textCenterRevolve},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_CENTER_COMPRESS,          displayValue: this.textCompress},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_FLOAT_DOWN,               displayValue: this.textFloatDown,           familyEffect: 'entrfloat'},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_FLOAT_UP,                 displayValue: this.textFloatUp,             familyEffect: 'entrfloat'},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_GROW_AND_TURN,            displayValue: this.textGrowTurn},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_RISE_UP,                  displayValue: this.textRiseUp},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_SPINNER,                  displayValue: this.textSpinner},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-moderate',        value: AscFormat.ENTRANCE_STRETCH,                  displayValue: this.textStretch},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_BASIC_SWIVEL,             displayValue: this.textBasicSwivel},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_BOOMERANG,                displayValue: this.textBoomerang},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_BOUNCE,                   displayValue: this.textBounce},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_CREDITS,                  displayValue: this.textCredits},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_CURVE_UP,                 displayValue: this.textCuverUp},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_DROP,                     displayValue: this.textDrop},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_FLIP,                     displayValue: this.textFlip},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_FLOAT,                    displayValue: this.textFloat},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_PINWHEEL,                 displayValue: this.textPinwheel},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_SPIRAL_IN,                displayValue: this.textSpiralIn},
+                    {group: 'menu-effect-group-entrance',   level: 'menu-effect-level-exciting',        value: AscFormat.ENTRANCE_WHIP,                     displayValue: this.textWhip},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-basic',           value: AscFormat.EMPHASIS_FILL_COLOR,               displayValue: this.textFillColor},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-basic',           value: AscFormat.EMPHASIS_GROW_SHRINK,              displayValue: this.textGrowShrink},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-basic',           value: AscFormat.EMPHASIS_FONT_COLOR,               displayValue: this.textFontColor, notsupported: true},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-basic',           value: AscFormat.EMPHASIS_LINE_COLOR,               displayValue: this.textLineColor},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-basic',           value: AscFormat.EMPHASIS_SPIN,                     displayValue: this.textSpin},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-basic',           value: AscFormat.EMPHASIS_TRANSPARENCY,             displayValue: this.textTransparency},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_BOLD_FLASH,               displayValue: this.textBoldFlash, notsupported: true},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_COMPLEMENTARY_COLOR,      displayValue: this.textComplementaryColor},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_COMPLEMENTARY_COLOR_2,    displayValue: this.textComplementaryColor2},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_CONTRASTING_COLOR,        displayValue: this.textContrastingColor},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_CONTRASTING_DARKEN,       displayValue: this.textDarken},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_DESATURATE,                displayValue: this.textDesaturate},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_LIGHTEN,                  displayValue: this.textLighten},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_OBJECT_COLOR,             displayValue: this.textObjectColor},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_PULSE,                    displayValue: this.textPulse},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_UNDERLINE,                displayValue: this.textUnderline, notsupported: true},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-subtle',          value: AscFormat.EMPHASIS_BRUSH_COLOR,              displayValue: this.textBrushColor, notsupported: true},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-moderate',        value: AscFormat.EMPHASIS_COLOR_PULSE,              displayValue: this.textColorPulse},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-moderate',        value: AscFormat.EMPHASIS_GROW_WITH_COLOR,          displayValue: this.textGrowWithColor},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-moderate',        value: AscFormat.EMPHASIS_SHIMMER,                  displayValue: this.textShimmer},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-moderate',        value: AscFormat.EMPHASIS_TEETER,                   displayValue: this.textTeeter},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-exciting',        value: AscFormat.EMPHASIS_BLINK,                    displayValue: this.textBlink},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-exciting',        value: AscFormat.EMPHASIS_BOLD_REVEAL,              displayValue: this.textBoldReveal, notsupported: true},
+                    {group: 'menu-effect-group-emphasis',   level: 'menu-effect-level-exciting',        value: AscFormat.EMPHASIS_WAVE,                     displayValue: this.textWave, notsupported: true},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_BLINDS,                       displayValue: this.textBlinds},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_BOX,                          displayValue: this.textBox,                 familyEffect: 'shape'},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_CHECKERBOARD,                 displayValue: this.textCheckerboard},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_CIRCLE,                       displayValue: this.textCircle,              familyEffect: 'shape'},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_DIAMOND,                      displayValue: this.textDiamond,             familyEffect: 'shape'},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_DISAPPEAR,                    displayValue: this.textDisappear},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_DISSOLVE_OUT,                 displayValue: this.textDissolveOut},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_FLY_OUT_TO,                   displayValue: this.textFlyOut},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_PEEK_OUT_TO,                  displayValue: this.textPeekOut},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_PLUS,                         displayValue: this.textPlus,                familyEffect: 'shape'},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_RANDOM_BARS,                  displayValue: this.textRandomBars},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_SPLIT,                        displayValue: this.textSplit},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_STRIPS,                       displayValue: this.textStrips},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_WEDGE,                        displayValue: this.textWedge},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_WHEEL,                        displayValue: this.textWheel},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-basic',           value: AscFormat.EXIT_WIPE_FROM,                    displayValue: this.textWipe},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-subtle',          value: AscFormat.EXIT_CONTRACT,                     displayValue: this.textContrast},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-subtle',          value: AscFormat.EXIT_FADE,                         displayValue: this.textFade},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-subtle',          value: AscFormat.EXIT_SWIVEL,                       displayValue: this.textSwivel},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-subtle',          value: AscFormat.EXIT_ZOOM,                         displayValue: this.textZoom},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_BASIC_ZOOM,                   displayValue: this.textBasicZoom},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_CENTER_REVOLVE,               displayValue: this.textCenterRevolve},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_COLLAPSE,                     displayValue: this.textCollapse},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_FLOAT_DOWN,                   displayValue: this.textFloatDown,    familyEffect: 'exitfloat'},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_FLOAT_UP,                     displayValue: this.textFloatUp,      familyEffect: 'exitfloat'},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_SHRINK_AND_TURN,              displayValue: this.textShrinkTurn},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_SINK_DOWN,                    displayValue: this.textSinkDown},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_SPINNER,                      displayValue: this.textSpinner},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-moderate',        value: AscFormat.EXIT_STRETCHY,                     displayValue: this.textStretch},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_BASIC_SWIVEL,                 displayValue: this.textBasicSwivel},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_BOOMERANG,                    displayValue: this.textBoomerang},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_BOUNCE,                       displayValue: this.textBounce},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_CREDITS,                      displayValue: this.textCredits},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_CURVE_DOWN,                   displayValue: this.textCurveDown},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_DROP,                         displayValue: this.textDrop},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_FLIP,                         displayValue: this.textFlip},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_FLOAT,                        displayValue: this.textFloat},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_PINWHEEL,                     displayValue: this.textPinwheel},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_SPIRAL_OUT,                   displayValue: this.textSpiralOut},
+                    {group: 'menu-effect-group-exit',       level: 'menu-effect-level-exciting',        value: AscFormat.EXIT_WHIP,                         displayValue: this.textWhip},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_PATH_4_POINT_STAR,          displayValue: this.textPointStar4},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_PATH_5_POINT_STAR,          displayValue: this.textPointStar5},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_PATH_6_POINT_STAR,          displayValue: this.textPointStar6},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_PATH_8_POINT_STAR,          displayValue: this.textPointStar8},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_CIRCLE,                     displayValue: this.textCircle,              familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_CRESCENT_MOON,              displayValue: this.textCrescentMoon},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_DIAMOND,                    displayValue: this.textDiamond,             familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_EQUAL_TRIANGLE,             displayValue: this.textEqualTriangle,       familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_FOOTBALL,                   displayValue: this.textFootball},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_HEART,                      displayValue: this.textHeart},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_HEXAGON,                    displayValue: this.textHexagon,             familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_OCTAGON,                    displayValue: this.textOctagon,             familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_PARALLELOGRAM,              displayValue: this.textParallelogram,       familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_PENTAGON,                   displayValue: this.textPentagon,            familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_RIGHT_TRIANGLE,             displayValue: this.textRightTriangle,       familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_SQUARE,                     displayValue: this.textSquare,              familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_TEARDROP,                   displayValue: this.textTeardrop},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-basic',           value: AscFormat.MOTION_TRAPEZOID,                  displayValue: this.textTrapezoid,           familyEffect: 'pathshapes'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_ARC_DOWN,                   displayValue: this.textArcDown,             familyEffect: 'patharcs'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_ARC_LEFT,                   displayValue: this.textArcLeft,             familyEffect: 'patharcs'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_ARC_RIGHT,                  displayValue: this.textArcRight,            familyEffect: 'patharcs'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_ARC_UP,                     displayValue: this.textArcUp,               familyEffect: 'patharcs'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_BOUNCE_LEFT,                displayValue: this.textBounceLeft},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_BOUNCE_RIGHT,               displayValue: this.textBounceRight},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_CURVY_LEFT,                 displayValue: this.textCurvyLeft},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_CURVY_RIGHT,                displayValue: this.textCurvyRight},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_DECAYING_WAVE,              displayValue: this.textDecayingWave},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_DIAGONAL_DOWN_RIGHT,        displayValue: this.textDiagonalDownRight},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_DIAGONAL_UP_RIGHT,          displayValue: this.textDiagonalUpRight},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_DOWN,                       displayValue: this.textDown,                familyEffect: 'pathlines'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_FUNNEL,                     displayValue: this.textFunnel},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_HEARTBEAT,                  displayValue: this.textHeartbeat},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_LEFT,                       displayValue: this.textLeft,                familyEffect: 'pathlines'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_RIGHT,                      displayValue: this.textRight,               familyEffect: 'pathlines'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_S_CURVE_1,                  displayValue: this.textSCurve1},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_S_CURVE_2,                  displayValue: this.textSCurve2},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_SINE_WAVE,                  displayValue: this.textSineWave},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_SINE_SPIRAL_LEFT,           displayValue: this.textSpiralLeft},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_SINE_SPIRAL_RIGHT,          displayValue: this.textSpiralRight},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_SPRING,                     displayValue: this.textSpring},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_STAIRS_DOWN,                displayValue: this.textStairsDown},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_TURN_DOWN,                  displayValue: this.textTurnDown,            familyEffect: 'pathturns'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_TURN_DOWN_RIGHT,            displayValue: this.textTurnDownRight,       familyEffect: 'pathturns'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_TURN_UP,                    displayValue: this.textTurnUp,              familyEffect: 'pathturns'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_TURN_UP_RIGHT,              displayValue: this.textTurnUpRight,         familyEffect: 'pathturns'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_UP,                         displayValue: this.textUp,                  familyEffect: 'pathlines'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_WAVE,                       displayValue: this.textWave},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-lines_curves',    value: AscFormat.MOTION_ZIGZAG,                     displayValue: this.textZigzag},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_BEAN,                       displayValue: this.textBean},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_CURVED_SQUARE,              displayValue: this.textCurvedSquare},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_CURVED_X,                   displayValue: this.textCurvedX},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_CURVY_STAR,                 displayValue: this.textCurvyStar},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_FIGURE_8_FOUR,              displayValue: this.textFigureFour},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR,   displayValue: this.textHorizontalFigure,    familyEffect: 'pathloops'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_INVERTED_SQUARE,            displayValue: this.textInvertedSquare},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_INVERTED_TRIANGLE,          displayValue: this.textInvertedTriangle},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_LOOP_DE_LOOP,               displayValue: this.textLoopDeLoop,          familyEffect: 'pathloops'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_NEUTRON,                    displayValue: this.textNeutron},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_PEANUT,                     displayValue: this.textPeanut},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_POINTY_STAR,                displayValue: this.textPointStar},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_SWOOSH,                     displayValue: this.textSwoosh},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_VERTICAL_FIGURE_8,          displayValue: this.textVerticalFigure,      familyEffect: 'pathloops'},
+                    {group: 'menu-effect-group-path',       level: 'menu-effect-level-special',         value: AscFormat.MOTION_CUSTOM_PATH,                displayValue: this.textCustomPath,  notsupported: true}
+
+                ];
+            },
+
+            getEffectOptionsData: function (group, type) {
+                switch (group) {
+                    case 'menu-effect-group-entrance':
+                        switch (type) {
+                            case AscFormat.ENTRANCE_BLINDS:
+                                return [
+                                    {value: AscFormat.ENTRANCE_BLINDS_HORIZONTAL,       caption: this.textHorizontal, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_BLINDS_VERTICAL,         caption: this.textVertical}
+                                ];
+                            case AscFormat.ENTRANCE_BOX:
+                                return [
+                                    {value: AscFormat.ENTRANCE_BOX_IN,                  caption: this.textIn, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_BOX_OUT,                 caption: this.textOut}
+                                ];
+                            case AscFormat.ENTRANCE_CHECKERBOARD:
+                                return [
+                                    {value: AscFormat.ENTRANCE_CHECKERBOARD_ACROSS,     caption: this.textAcross, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_CHECKERBOARD_DOWN,       caption: this.textDown}
+                                ];
+                            case AscFormat.ENTRANCE_CIRCLE:
+                                return [
+                                    {value: AscFormat.ENTRANCE_CIRCLE_IN,               caption: this.textIn, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_CIRCLE_OUT,              caption: this.textOut}
+                                ];
+                            case AscFormat.ENTRANCE_DIAMOND:
+                                return [
+                                    {value: AscFormat.ENTRANCE_DIAMOND_IN,              caption: this.textIn, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_DIAMOND_OUT,             caption: this.textOut}
+                                ];
+
+                            case AscFormat.ENTRANCE_FLY_IN_FROM:
+                                return [
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_BOTTOM,      caption: this.textFromBottom, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_BOTTOM_LEFT, caption: this.textFromBottomLeft},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_LEFT,        caption: this.textFromLeft},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_TOP_LEFT,    caption: this.textFromTopLeft},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_TOP,         caption: this.textFromTop},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_TOP_RIGHT,   caption: this.textFromTopRight},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_RIGHT,       caption: this.textFromRight},
+                                    {value: AscFormat.ENTRANCE_FLY_IN_FROM_BOTTOM_RIGHT, caption: this.textFromBottomRight}
+                                ];
+                            case AscFormat.ENTRANCE_PEEK_IN_FROM:
+                                return [
+                                    {value: AscFormat.ENTRANCE_PEEK_IN_FROM_BOTTOM,     caption: this.textFromBottom, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_PEEK_IN_FROM_LEFT,       caption: this.textFromLeft},
+                                    {value: AscFormat.ENTRANCE_PEEK_IN_FROM_RIGHT,      caption: this.textFromRight},
+                                    {value: AscFormat.ENTRANCE_PEEK_IN_FROM_TOP,        caption: this.textFromTop}
+                                ];
+                            case AscFormat.ENTRANCE_PLUS:
+                                return [
+                                    {value: AscFormat.ENTRANCE_PLUS_IN,                 caption: this.textIn, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_PLUS_OUT,                caption: this.textOut}
+                                ];
+                            case AscFormat.ENTRANCE_RANDOM_BARS:
+                                return [
+                                    {value: AscFormat.ENTRANCE_RANDOM_BARS_HORIZONTAL,  caption: this.textHorizontal, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_RANDOM_BARS_VERTICAL,    caption: this.textVertical}
+                                ];
+                            case AscFormat.ENTRANCE_SPLIT:
+                                return [
+                                    {value: AscFormat.ENTRANCE_SPLIT_HORIZONTAL_IN,     caption: this.textHorizontalIn},
+                                    {value: AscFormat.ENTRANCE_SPLIT_HORIZONTAL_OUT,    caption: this.textHorizontalOut},
+                                    {value: AscFormat.ENTRANCE_SPLIT_VERTICAL_IN,       caption: this.textVerticalIn, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_SPLIT_VERTICAL_OUT,      caption: this.textVerticalOut}
+                                ];
+                            case AscFormat.ENTRANCE_STRIPS:
+                                return [
+                                    {value: AscFormat.ENTRANCE_STRIPS_LEFT_DOWN,        caption: this.textLeftDown, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_STRIPS_LEFT_UP,          caption: this.textLeftUp},
+                                    {value: AscFormat.ENTRANCE_STRIPS_RIGHT_DOWN,       caption: this.textRightDown},
+                                    {value: AscFormat.ENTRANCE_STRIPS_RIGHT_UP,         caption: this.textRightUp}
+                                ];
+                            case AscFormat.ENTRANCE_WHEEL:
+                                return [
+                                    {value: AscFormat.ENTRANCE_WHEEL_1_SPOKE,           caption: this.textSpoke1, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_WHEEL_2_SPOKES,           caption: this.textSpoke2},
+                                    {value: AscFormat.ENTRANCE_WHEEL_3_SPOKES,           caption: this.textSpoke3},
+                                    {value: AscFormat.ENTRANCE_WHEEL_4_SPOKES,           caption: this.textSpoke4},
+                                    {value: AscFormat.ENTRANCE_WHEEL_8_SPOKES,           caption: this.textSpoke8}
+                                ];
+                            case AscFormat.ENTRANCE_WIPE_FROM:
+                                return [
+                                    {value: AscFormat.ENTRANCE_WIPE_FROM_BOTTOM,        caption: this.textFromBottom, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_WIPE_FROM_LEFT,          caption: this.textFromLeft},
+                                    {value: AscFormat.ENTRANCE_WIPE_FROM_RIGHT,         caption: this.textFromRight},
+                                    {value: AscFormat.ENTRANCE_WIPE_FROM_TOP,           caption: this.textFromTop}
+                                ];
+                            case AscFormat.ENTRANCE_ZOOM:
+                                return [
+                                    {value: AscFormat.ENTRANCE_ZOOM_OBJECT_CENTER,      caption: this.textObjectCenter, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_ZOOM_SLIDE_CENTER,       caption: this.textSlideCenter}
+                                ];
+                            case AscFormat.ENTRANCE_BASIC_ZOOM:
+                                return [
+                                    {value: AscFormat.ENTRANCE_BASIC_ZOOM_IN,           caption: this.textIn, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_BASIC_ZOOM_IN_FROM_SCREEN_CENTER, caption: this.textInFromScreenCenter},
+                                    {value: AscFormat.ENTRANCE_BASIC_ZOOM_IN_SLIGHTLY,  caption: this.textInSlightly},
+                                    {value: AscFormat.ENTRANCE_BASIC_ZOOM_OUT,          caption: this.textOut},
+                                    {value: AscFormat.ENTRANCE_BASIC_ZOOM_OUT_FROM_SCREEN_BOTTOM, caption: this.textOutFromScreenBottom},
+                                    {value: AscFormat.ENTRANCE_BASIC_ZOOM_OUT_SLIGHTLY, caption: this.textOutSlightly}
+                                ];
+                            case AscFormat.ENTRANCE_STRETCH:
+                                return [
+                                    {value: AscFormat.ENTRANCE_STRETCH_ACROSS,          caption: this.textAcross, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_STRETCH_FROM_BOTTOM,     caption: this.textFromBottom},
+                                    {value: AscFormat.ENTRANCE_STRETCH_FROM_LEFT,       caption: this.textFromLeft},
+                                    {value: AscFormat.ENTRANCE_STRETCH_FROM_RIGHT,      caption: this.textFromRight},
+                                    {value: AscFormat.ENTRANCE_STRETCH_FROM_TOP,        caption: this.textFromTop}
+                                ];
+                            case AscFormat.ENTRANCE_BASIC_SWIVEL:
+                                return [
+                                    {value: AscFormat.ENTRANCE_BASIC_SWIVEL_HORIZONTAL, caption: this.textHorizontal, defvalue: true},
+                                    {value: AscFormat.ENTRANCE_BASIC_SWIVEL_VERTICAL,   caption: this.textVertical}
+                                ];
+                            default:
+                                return undefined;
+                        }
+                        break;
+
+                    case 'menu-effect-group-exit':
+                        switch (type){
+                            case AscFormat.EXIT_BLINDS:
+                                return [
+                                    {value: AscFormat.EXIT_BLINDS_HORIZONTAL,       caption: this.textHorizontal, defvalue: true},
+                                    {value: AscFormat.EXIT_BLINDS_VERTICAL,         caption: this.textVertical}
+                                ];
+                            case AscFormat.EXIT_BOX:
+                                return [
+                                    {value: AscFormat.EXIT_BOX_IN,                  caption: this.textIn},
+                                    {value: AscFormat.EXIT_BOX_OUT,                 caption: this.textOut, defvalue: true}
+                                ];
+                            case AscFormat.EXIT_CHECKERBOARD:
+                                return [
+                                    {value: AscFormat.EXIT_CHECKERBOARD_ACROSS,     caption: this.textAcross, defvalue: true},
+                                    {value: AscFormat.EXIT_CIRCLE_OUT,              caption: this.textUp}
+                                ];
+                            case AscFormat.EXIT_CIRCLE:
+                                return [
+                                    {value: AscFormat.EXIT_CIRCLE_IN,               caption: this.textIn},
+                                    {value: AscFormat.EXIT_CIRCLE_OUT,              caption: this.textOut, defvalue: true}
+                                ];
+                            case AscFormat.EXIT_DIAMOND:
+                                return [
+                                    {value: AscFormat.EXIT_DIAMOND_IN,              caption: this.textIn},
+                                    {value: AscFormat.EXIT_DIAMOND_OUT,             caption: this.textOut, defvalue: true}
+                                ];
+                            case AscFormat.EXIT_FLY_OUT_TO:
+                                return [
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_BOTTOM,       caption: this.textToBottom, defvalue: true},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_BOTTOM_LEFT,  caption: this.textToBottomLeft},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_LEFT,         caption: this.textToLeft},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_TOP_LEFT,     caption: this.textToTopLeft},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_TOP,          caption: this.textToTop},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_TOP_RIGHT,    caption: this.textToTopRight},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_RIGHT,        caption: this.textToRight},
+                                    {value: AscFormat.EXIT_FLY_OUT_TO_BOTTOM_RIGHT, caption: this.textToBottomRight}
+                                ];
+                            case AscFormat.EXIT_PEEK_OUT_TO:
+                                return [
+                                    {value: AscFormat.EXIT_PEEK_OUT_TO_BOTTOM,      caption: this.textToBottom, defvalue: true},
+                                    {value: AscFormat.EXIT_PEEK_OUT_TO_LEFT,        caption: this.textToLeft},
+                                    {value: AscFormat.EXIT_PEEK_OUT_TO_RIGHT,       caption: this.textToRight},
+                                    {value: AscFormat.EXIT_PEEK_OUT_TO_TOP,         caption: this.textToTop}
+                                ];
+                            case AscFormat.EXIT_PLUS:
+                                return [
+                                    {value: AscFormat.EXIT_PLUS_IN,                 caption: this.textIn},
+                                    {value: AscFormat.EXIT_PLUS_OUT,                caption: this.textOut, defvalue: true}
+                                ];
+                            case AscFormat.EXIT_RANDOM_BARS:
+                                return [
+                                    {value: AscFormat.EXIT_RANDOM_BARS_HORIZONTAL,  caption: this.textHorizontal, defvalue: true},
+                                    {value: AscFormat.EXIT_RANDOM_BARS_VERTICAL,    caption: this.textVertical}
+                                ];
+                            case AscFormat.EXIT_SPLIT:
+                                return [
+                                    {value: AscFormat.EXIT_SPLIT_HORIZONTAL_IN,     caption: this.textHorizontalIn},
+                                    {value: AscFormat.EXIT_SPLIT_HORIZONTAL_OUT,    caption: this.textHorizontalOut},
+                                    {value: AscFormat.EXIT_SPLIT_VERTICAL_IN,       caption: this.textVerticalIn, defvalue: true},
+                                    {value: AscFormat.EXIT_SPLIT_VERTICAL_OUT,      caption: this.textVerticalOut}
+                                ];
+                            case AscFormat.EXIT_STRIPS:
+                                return [
+                                    {value: AscFormat.EXIT_STRIPS_LEFT_DOWN,        caption: this.textLeftDown, defvalue: true},
+                                    {value: AscFormat.EXIT_STRIPS_LEFT_UP,          caption: this.textLeftUp},
+                                    {value: AscFormat.EXIT_STRIPS_RIGHT_DOWN,       caption: this.textRightDown},
+                                    {value: AscFormat.EXIT_STRIPS_RIGHT_UP,         caption: this.textRightUp}
+                                ];
+                            case AscFormat.EXIT_WHEEL:
+                                return [
+                                    {value: AscFormat.EXIT_WHEEL_1_SPOKE,           caption: this.textSpoke1, defvalue: true},
+                                    {value: AscFormat.EXIT_WHEEL_2_SPOKES,           caption: this.textSpoke2},
+                                    {value: AscFormat.EXIT_WHEEL_3_SPOKES,           caption: this.textSpoke3},
+                                    {value: AscFormat.EXIT_WHEEL_4_SPOKES,           caption: this.textSpoke4},
+                                    {value: AscFormat.EXIT_WHEEL_8_SPOKES,           caption: this.textSpoke8}
+                                ];
+                            case AscFormat.EXIT_WIPE_FROM:
+                                return [
+                                    {value: AscFormat.EXIT_WIPE_FROM_BOTTOM,        caption: this.textFromBottom, defvalue: true},
+                                    {value: AscFormat.EXIT_WIPE_FROM_LEFT,          caption: this.textFromLeft},
+                                    {value: AscFormat.EXIT_WIPE_FROM_RIGHT,         caption: this.textFromRight},
+                                    {value: AscFormat.EXIT_WIPE_FROM_TOP,           caption: this.textFromTop}
+                                ];
+                            case AscFormat.EXIT_ZOOM:
+                                return [
+                                    {value: AscFormat.EXIT_ZOOM_OBJECT_CENTER,  caption: this.textObjectCenter, defvalue: true},
+                                    {value: AscFormat.EXIT_ZOOM_SLIDE_CENTER,   caption: this.textSlideCenter}
+                                ];
+                            case AscFormat.EXIT_BASIC_ZOOM:
+                                return [
+                                    {value: AscFormat.EXIT_BASIC_ZOOM_OUT,          caption: this.textOut, defvalue: true},
+                                    {value: AscFormat.EXIT_BASIC_ZOOM_OUT_TO_SCREEN_CENTER, caption: this.textOutToScreenCenter},
+                                    {value: AscFormat.EXIT_BASIC_ZOOM_OUT_SLIGHTLY, caption: this.textOutSlightly},
+                                    {value: AscFormat.EXIT_BASIC_ZOOM_IN,           caption: this.textIn},
+                                    {value: AscFormat.EXIT_BASIC_ZOOM_IN_TO_SCREEN_BOTTOM, caption: this.textInToScreenBottom},
+                                    {value: AscFormat.EXIT_BASIC_ZOOM_IN_SLIGHTLY,  caption: this.textInSlightly}
+                                ];
+                            case AscFormat.EXIT_COLLAPSE:
+                                return [
+                                    {value: AscFormat.EXIT_COLLAPSE_ACROSS,         caption: this.textAcross, defvalue: true},
+                                    {value: AscFormat.EXIT_COLLAPSE_TO_BOTTOM,      caption: this.textToBottom},
+                                    {value: AscFormat.EXIT_COLLAPSE_TO_LEFT,        caption: this.textToLeft},
+                                    {value: AscFormat.EXIT_COLLAPSE_TO_RIGHT,       caption: this.textToRight},
+                                    {value: AscFormat.EXIT_COLLAPSE_TO_TOP,         caption: this.textToTop}
+                                ];
+                            case AscFormat.EXIT_BASIC_SWIVEL:
+                                return [
+                                    {value: AscFormat.EXIT_BASIC_SWIVEL_HORIZONTAL, caption: this.textHorizontal, defvalue: true},
+                                    {value: AscFormat.EXIT_BASIC_SWIVEL_VERTICAL,   caption: this.textVertical}
+                                ];
+                           default:
+                               return undefined;
+                        }
+                        break;
+                    case  'menu-effect-group-path':
+                        switch (type) {
+                            case AscFormat.MOTION_CUSTOM_PATH:
+                                return [
+                                    {value: AscFormat.MOTION_CUSTOM_PATH_CURVE,        caption: this.textPathCurve, isCustom: true},
+                                    {value: AscFormat.MOTION_CUSTOM_PATH_LINE,         caption: this.textPathLine, isCustom: true},
+                                    {value: AscFormat.MOTION_CUSTOM_PATH_SCRIBBLE,     caption: this.textPathScribble, isCustom: true}
+                                ];
+                        }
+                        break;
+                    default:
+                        return undefined;
+                }
+            },
+            getSimilarEffectsArray: function (familyEffect) {
+                switch (familyEffect){
+                    case 'shape':
+                        return [
+                            {value: AscFormat.EXIT_CIRCLE,  caption: this.textCircle},
+                            {value: AscFormat.EXIT_BOX,     caption: this.textBox},
+                            {value: AscFormat.EXIT_DIAMOND, caption: this.textDiamond},
+                            {value: AscFormat.EXIT_PLUS,    caption: this.textPlus}
+                        ];
+                    case 'entrshape':
+                        return [
+                            {value: AscFormat.ENTRANCE_CIRCLE,  caption: this.textCircle},
+                            {value: AscFormat.ENTRANCE_BOX,     caption: this.textBox},
+                            {value: AscFormat.ENTRANCE_DIAMOND, caption: this.textDiamond},
+                            {value: AscFormat.ENTRANCE_PLUS,    caption: this.textPlus}
+                        ];
+                    case 'pathlines':
+                        return[
+                            {value: AscFormat.MOTION_DOWN,  caption: this.textDown},
+                            {value: AscFormat.MOTION_LEFT,  caption: this.textLeft},
+                            {value: AscFormat.MOTION_RIGHT, caption: this.textRight},
+                            {value: AscFormat.MOTION_UP,    caption: this.textUp}
+                        ];
+                    case 'patharcs':
+                        return [
+                            {value: AscFormat.MOTION_ARC_DOWN,  caption: this.textArcDown},
+                            {value: AscFormat.MOTION_ARC_LEFT,  caption: this.textArcLeft},
+                            {value: AscFormat.MOTION_ARC_RIGHT, caption: this.textArcRight},
+                            {value: AscFormat.MOTION_ARC_UP,    caption: this.textArcUp}
+                        ];
+                    case 'pathturns':
+                        return [
+                            {value: AscFormat.MOTION_TURN_DOWN,       caption: this.textTurnDown},
+                            {value: AscFormat.MOTION_TURN_DOWN_RIGHT, caption: this.textTurnDownRight},
+                            {value: AscFormat.MOTION_TURN_UP,         caption: this.textTurnUp},
+                            {value: AscFormat.MOTION_TURN_UP_RIGHT,   caption: this.textTurnUpRight}
+                        ];
+                    case 'pathshapes':
+                        return [
+                            {value: AscFormat.MOTION_CIRCLE,         caption: this.textCircle},
+                            {value: AscFormat.MOTION_DIAMOND,        caption: this.textDiamond},
+                            {value: AscFormat.MOTION_EQUAL_TRIANGLE, caption: this.textEqualTriangle},
+                            {value: AscFormat.MOTION_HEXAGON,        caption: this.textHexagon},
+                            {value: AscFormat.MOTION_OCTAGON,        caption: this.textOctagon},
+                            {value: AscFormat.MOTION_PARALLELOGRAM,  caption: this.textParallelogram},
+                            {value: AscFormat.MOTION_PENTAGON,       caption: this.textPentagon},
+                            {value: AscFormat.MOTION_RIGHT_TRIANGLE, caption: this.textRightTriangle},
+                            {value: AscFormat.MOTION_SQUARE,         caption: this.textSquare},
+                            {value: AscFormat.MOTION_TRAPEZOID,      caption: this.textTrapezoid}
+
+                        ];
+                    case 'pathloops':
+                        return [
+                            {value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR, caption: this.textHorizontalFigure},
+                            {value: AscFormat.MOTION_VERTICAL_FIGURE_8,        caption: this.textVerticalFigure},
+                            {value: AscFormat.MOTION_LOOP_DE_LOOP,             caption: this.textLoopDeLoop}
+                        ];
+                    case 'entrfloat':
+                        return [
+                            {value: AscFormat.ENTRANCE_FLOAT_UP,            caption: this.textFloatUp},
+                            {value: AscFormat.ENTRANCE_FLOAT_DOWN,          caption: this.textFloatDown}
+                        ];
+                    case 'exitfloat':
+                        return [
+                            {value: AscFormat.EXIT_FLOAT_UP,            caption: this.textFloatUp},
+                            {value: AscFormat.EXIT_FLOAT_DOWN,          caption: this.textFloatDown}
+                        ];
+                    default:
+                        return [];
+                }
+            }
+        }
+    })(), Common.define.effectData || {});
+
 });

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

@@ -0,0 +1,22 @@
+
+if ( window.AscDesktopEditor ) {
+    window.desktop = window.AscDesktopEditor;
+    desktop.features = {};
+    window.native_message_cmd = [];
+
+    window.on_native_message = function (cmd, param) {
+        if ( /window:features/.test(cmd) ) {
+            var obj = JSON.parse(param);
+            if ( obj.singlewindow !== undefined ) {
+                desktop.features.singlewindow = obj.singlewindow;
+            }
+        } else
+            window.native_message_cmd[cmd] = param;
+    }
+
+    if ( !!window.RendererProcessVariable ) {
+        desktop.theme = window.RendererProcessVariable.theme;
+    }
+
+    window.desktop.execCommand('webapps:entry', (window.features && JSON.stringify(window.features)) || '');
+}

apps/common/main/lib/util/fix-ie-compat.js

@@ -31,4 +31,10 @@ if ( !window.fetch ) {
             return target;
         };
     }
+
+    if (typeof Object.getOwnPropertySymbols != 'function') {
+        Object.getOwnPropertySymbols = function(target) {
+            return [];
+        };
+    }
 }

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

@@ -52,8 +52,8 @@ var checkLocalStorage = (function () {
     }
 })();
 
-if ( window.desktop && !!window.RendererProcessVariable ) {
-    var theme = window.RendererProcessVariable.theme
+if ( window.desktop ) {
+    var theme = desktop.theme
 
     if ( theme ) {
         if ( !theme.id && !!theme.type ) {
@@ -62,8 +62,14 @@ if ( window.desktop && !!window.RendererProcessVariable ) {
         }
 
         if ( theme.id ) {
-            // params.uitheme = undefined;
+            if ( theme.id == 'theme-system' ) {
+                localStorage.setItem("ui-theme-use-system", "1");
+                localStorage.removeItem("ui-theme-id");
+                delete params.uitheme;
+            } else {
                 localStorage.setItem("ui-theme-id", theme.id);
+            }
+
             localStorage.removeItem("ui-theme");
         }
     }
@@ -82,9 +88,11 @@ if ( !!params.uitheme && checkLocalStorage && !localStorage.getItem("ui-theme-id
 }
 
 var ui_theme_name = checkLocalStorage && localStorage.getItem("ui-theme-id") ? localStorage.getItem("ui-theme-id") : params.uitheme;
+var ui_theme_type;
 if ( !ui_theme_name ) {
     if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
         ui_theme_name = 'theme-dark';
+        ui_theme_type = 'dark';
         checkLocalStorage && localStorage.removeItem("ui-theme");
     }
 }
@@ -93,10 +101,12 @@ if ( !!ui_theme_name ) {
 }
 
 if ( checkLocalStorage ) {
-    var content_theme = localStorage.getItem("content-theme");
+    let current_theme = localStorage.getItem("ui-theme");
+    if ( !!current_theme && /type":\s*"dark/.test(current_theme) || ui_theme_type == 'dark' ) {
+        document.body.classList.add("theme-type-dark");
+
+        let content_theme = localStorage.getItem("content-theme");
         if ( content_theme == 'dark' ) {
-        var current_theme = localStorage.getItem("ui-theme");
-        if ( !!current_theme && /type":\s*"dark/.test(current_theme) ) {
             document.body.classList.add("content-theme-dark");
         }
     }

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

@@ -1,5 +1,9 @@
 
 +function init_themes() {
+    if ( localStorage.getItem("ui-theme-use-system") == '1' ) {
+        localStorage.removeItem("ui-theme-id");
+    }
+
     var objtheme = localStorage.getItem("ui-theme");
     if ( typeof(objtheme) == 'string' &&
             objtheme.startsWith("{") && objtheme.endsWith("}") )

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

@@ -193,13 +193,18 @@ var utils = new(function() {
             me.innerHeight = window.innerHeight * me.zoom;
             me.applicationPixelRatio = scale.applicationPixelRatio || scale.devicePixelRatio;
         };
+        checkSizeIE = function() {
+            me.innerWidth = window.innerWidth;
+            me.innerHeight = window.innerHeight;
+        };
         me.zoom = 1;
         me.applicationPixelRatio = 1;
         me.innerWidth = window.innerWidth;
         me.innerHeight = window.innerHeight;
-        if ( isIE )
+        if ( isIE ) {
             $(document.body).addClass('ie');
-        else {
+            $(window).on('resize', checkSizeIE);
+        } else {
             checkSize();
             $(window).on('resize', checkSize);
         }
@@ -436,7 +441,7 @@ var metrics = new(function() {
     }
 })();
 
-Common.Utils.Metric = _extend_object(Common.Utils.Metric, metrics);
+Common.Utils.Metric = _extend_object(metrics, Common.Utils.Metric);
 
 Common.Utils.RGBColor = function(colorString) {
     var r, g, b;
@@ -603,8 +608,12 @@ Common.Utils.RGBColor = function(colorString) {
     }
 };
 
-Common.Utils.String = new (function() {
+var utilsString = new (function() {
     return {
+        textCtrl: 'Ctrl',
+        textShift: 'Shift',
+        textAlt: 'Alt',
+
         format: function(format) {
             var args = _.toArray(arguments).slice(1);
             if (args.length && typeof args[0] == 'object')
@@ -648,7 +657,7 @@ Common.Utils.String = new (function() {
                 return Common.Utils.String.format(template, string.replace(/\+(?=\S)/g, '').replace(/Ctrl|ctrl/g, '⌘').replace(/Alt|alt/g, '⌥').replace(/Shift|shift/g, '⇧'));
             }
 
-            return Common.Utils.String.format(template, string);
+            return Common.Utils.String.format(template, string.replace(/Ctrl|ctrl/g, this.textCtrl).replace(/Alt|alt/g, this.textAlt).replace(/Shift|shift/g, this.textShift));
         },
 
         parseFloat: function(string) {
@@ -680,6 +689,8 @@ Common.Utils.String = new (function() {
     }
 })();
 
+Common.Utils.String = _extend_object(utilsString, Common.Utils.String);
+
 Common.Utils.isBrowserSupported = function() {
     return !((Common.Utils.ieVersion != 0 && Common.Utils.ieVersion < 10.0) ||
              (Common.Utils.safariVersion != 0 && Common.Utils.safariVersion < 5.0) ||
@@ -881,7 +892,7 @@ Common.Utils.lockControls = function(causes, lock, opts, defControls) {
     opts.merge && (controls = _.union(defControls,controls));
 
     function doLock(cmp, cause) {
-        if ( cmp && _.contains(cmp.options.lock, cause) ) {
+        if ( cmp && cmp.options && _.contains(cmp.options.lock, cause) ) {
             var index = cmp.keepState.indexOf(cause);
             if (lock) {
                 if (index < 0) {
@@ -968,7 +979,7 @@ Common.Utils.warningDocumentIsLocked = function (opts) {
         callback: function(btn){
             if (btn == 'edit') {
                 if ( opts.disablefunc ) opts.disablefunc(false);
-                app.getController('Main').api.asc_setIsReadOnly(false);
+                app.getController('Main').api.asc_setLocalRestrictions(Asc.c_oAscLocalRestrictionType.None);
             }
         }
     });
@@ -986,8 +997,9 @@ jQuery.fn.extend({
         var _el = document.getElementById(id.substring(1));
         if ( !_el ) {
             parent = parent || this;
-            if ( parent instanceof jQuery ) {
+            if ( parent && parent.length > 0 ) {
                 parent.each(function (i, node) {
+                    if (node.querySelectorAll) {
                         _el = node.querySelectorAll(id);
                         if ( _el.length == 0 ) {
                             if ( ('#' + node.id) == id ) {
@@ -999,12 +1011,15 @@ jQuery.fn.extend({
                             _el = _el[0];
                             return false;
                         }
+                    }
                 })
             } else {
+                if (parent && parent.querySelectorAll) {
                     _el = parent.querySelectorAll(id);
                     if ( _el && _el.length ) return _el[0];
                 }
             }
+        }
 
         return _el;
     },

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

@@ -126,6 +126,12 @@ define([
                             '<a href="mailto:" id="id-about-company-mail"></a>',
                         '</td>',
                     '</tr>',
+                    '<tr>',
+                        '<td align="center" class="padding-small">',
+                            '<label class="asc-about-desc-name">' + this.txtTel + '</label>',
+                            '<label class="asc-about-desc" id="id-about-company-tel"></label>',
+                        '</td>',
+                    '</tr>',
                     '<tr>',
                         '<td align="center" class="padding-small">',
                             '<a href="" target="_blank" id="id-about-company-url"></a>',
@@ -177,6 +183,7 @@ define([
                 this.lblCompanyMail = _$l.findById('#id-about-company-mail');
                 this.lblCompanyUrl = _$l.findById('#id-about-company-url');
                 this.lblCompanyLic = _$l.findById('#id-about-company-lic');
+                this.lblCompanyTel = _$l.findById('#id-about-company-tel');
 
                 this.$el.html(_$l);
                 this.$el.addClass('about-dlg');
@@ -224,6 +231,11 @@ define([
                         this.lblCompanyMail.attr('href', "mailto:"+value).text(value) :
                         this.lblCompanyMail.parents('tr').addClass('hidden');
 
+                    value = customer.phone;
+                    value && value.length ?
+                        this.lblCompanyTel.text(value) :
+                        this.lblCompanyTel.parents('tr').addClass('hidden');
+
                     if ((value = customer.www) && value.length) {
                         var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : '';
                         this.lblCompanyUrl.attr('href', http+value).text(value);
@@ -235,10 +247,10 @@ define([
                         this.lblCompanyLic.parents('tr').addClass('hidden');
 
                     value = Common.UI.Themes.isDarkTheme() ? (customer.logoDark || customer.logo) : (customer.logo || customer.logoDark);
-                    value.length ?
+                    value && value.length ?
                         this.divCompanyLogo.html('<img src="'+value+'" style="max-width:216px; max-height: 35px;" />') :
                         this.divCompanyLogo.parents('tr').addClass('hidden');
-                    value.length && Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
+                    value && value.length && Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
                 } else {
                     this.cntLicenseeInfo.addClass('hidden');
                     this.cntLicensorInfo.addClass('margin-bottom');

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

@@ -325,6 +325,16 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
                     Common.Utils.InternalSettings.set(me.appPrefix + "settings-autoformat-numbered", checked);
                     me.api.asc_SetAutomaticNumberedLists(checked);
                 });
+                this.chDoubleSpaces = new Common.UI.CheckBox({
+                    el: panelAutoFormat.find('#id-autocorrect-dialog-chk-double-space'),
+                    labelText: this.textDoubleSpaces,
+                    value: Common.Utils.InternalSettings.get(this.appPrefix + "settings-autoformat-double-space")
+                }).on('change', function(field, newValue, oldValue, eOpts){
+                    var checked = (field.getValue()==='checked');
+                    Common.localStorage.setBool(me.appPrefix + "settings-autoformat-double-space", checked);
+                    Common.Utils.InternalSettings.set(me.appPrefix + "settings-autoformat-double-space", checked);
+                    me.api.asc_SetAutoCorrectDoubleSpaceWithPeriod(checked);
+                });
                 // AutoCorrect
                 this.chFLSentence = new Common.UI.CheckBox({
                     el: $window.find('#id-autocorrect-dialog-chk-fl-sentence'),
@@ -841,7 +851,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
         textAutoCorrect: 'AutoCorrect',
         textFLSentence: 'Capitalize first letter of sentences',
         textHyperlink: 'Internet and network paths with hyperlinks',
-        textFLCells: 'Capitalize first letter of table cells'
+        textFLCells: 'Capitalize first letter of table cells',
+        textDoubleSpaces: 'Add period with double-space'
 
     }, Common.Views.AutoCorrectDialog || {}))
 });

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

@@ -136,7 +136,7 @@ define([
             this.txtMessage.on('keydown', _.bind(this._onKeyDown, this));
 
             this.setupLayout();
-
+            this.trigger('render:after', this);
             return this;
         },
 

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

@@ -377,7 +377,21 @@ define([
                                 visible: this.appPrefix==='de-',
                                 checked: Common.localStorage.getItem(this.appPrefix + "comments-sort") === 'position-desc',
                                 toggleGroup: 'sortcomments'
-                            }
+                            },
+                            {
+                                caption: '--',
+                                visible: false
+                            },
+                            this.menuFilterGroups = new Common.UI.MenuItem({
+                                caption: this.mniFilterGroups,
+                                checkable: false,
+                                visible: false,
+                                menu: new Common.UI.Menu({
+                                    menuAlign: 'tl-tr',
+                                    style: 'min-width: auto;',
+                                    items: []
+                                })
+                            })
                         ]
                     })
                 });
@@ -394,6 +408,7 @@ define([
                 this.buttonCancel.on('click', _.bind(this.onClickCancelDocumentComment, this));
                 this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
                 this.buttonSort.menu.on('item:toggle', _.bind(this.onSortClick, this));
+                this.menuFilterGroups.menu.on('item:toggle', _.bind(this.onFilterGroupsClick, this));
 
                 this.txtComment = $('#comment-msg-new', this.el);
                 this.txtComment.keydown(function (event) {
@@ -428,7 +443,8 @@ define([
                         textReply: me.textReply,
                         textClose: me.textClose,
                         maxCommLength: Asc.c_oAscMaxCellOrCommentLength
-                    }))
+                    })),
+                    emptyText: me.txtEmpty
                 });
 
                 var addtooltip = function (dataview, view, record) {
@@ -477,7 +493,7 @@ define([
         },
         updateScrolls: function () {
             if (this.commentsView && this.commentsView.scroller) {
-                this.commentsView.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
+                this.commentsView.scroller.update({minScrollbarLength: this.commentsView.minScrollbarLength, alwaysVisibleY: true});
             }
         },
 
@@ -791,7 +807,7 @@ define([
         },
 
         pickEMail: function (commentId, message) {
-            var arr = Common.Utils.String.htmlEncode(message).match(/\B[@+][A-Z0-9._%+-]+@[A-Z0-9._]+\.[A-Z]+\b/gi);
+            var arr = Common.Utils.String.htmlEncode(message).match(/\B[@+][A-Z0-9._%+-]+@[A-Z0-9._-]+\.[A-Z]+\b/gi);
             arr = _.map(arr, function(str){
                 return str.slice(1, str.length);
             });
@@ -812,6 +828,10 @@ define([
             state && this.fireEvent('comment:sort', [item.value]);
         },
 
+        onFilterGroupsClick: function(menu, item, state) {
+            state && this.fireEvent('comment:filtergroups', [item.value]);
+        },
+
         onClickClosePanel: function() {
             Common.NotificationCenter.trigger('leftmenu:change', 'hide');
         },
@@ -839,6 +859,9 @@ define([
         mniDateDesc: 'Newest',
         mniDateAsc: 'Oldest',
         textClosePanel: 'Close comments',
-        textViewResolved: 'You have not permission for reopen comment'
+        textViewResolved: 'You have not permission for reopen comment',
+        mniFilterGroups: 'Filter by Group',
+        textAll: 'All',
+        txtEmpty: 'There are no comments in the document.'
     }, Common.Views.Comments || {}))
 });

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

@@ -62,8 +62,8 @@ define([
                 '</div>',
                 '<div class="separator horizontal"></div>',
                 '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-diagram-editor-apply" class="btn normal dlg-btn primary custom" result="ok">' + this.textSave + '</button>',
-                    '<button id="id-btn-diagram-editor-cancel" class="btn normal dlg-btn" result="cancel">' + this.textClose + '</button>',
+                    '<button id="id-btn-diagram-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
+                    '<button id="id-btn-diagram-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
                 '</div>'
             ].join('');
 

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

@@ -61,8 +61,8 @@ define([
                 '</div>',
                 '<div class="separator horizontal"></div>',
                 '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-merge-editor-apply" class="btn normal dlg-btn primary custom" result="ok">' + this.textSave + '</button>',
-                    '<button id="id-btn-merge-editor-cancel" class="btn normal dlg-btn disabled" result="cancel">' + this.textClose + '</button>',
+                    '<button id="id-btn-merge-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
+                    '<button id="id-btn-merge-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
                 '</div>'
             ].join('');
 

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

@@ -0,0 +1,164 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * 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
+ *
+*/
+/**
+ *  ExternalOleEditor.js
+ *
+ *  Created by Julia Radzhabova on 3/10/22
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window'
+], function () { 'use strict';
+
+    Common.Views.ExternalOleEditor = Common.UI.Window.extend(_.extend({
+        initialize : function(options) {
+            var _options = {};
+            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
+            _.extend(_options,  {
+                title: this.textTitle,
+                width: 910,
+                height: (_inner_height - 700)<0 ? _inner_height : 700,
+                cls: 'advanced-settings-dlg',
+                header: true,
+                toolclose: 'hide',
+                toolcallback: _.bind(this.onToolClose, this)
+            }, options);
+
+            this.template = [
+                '<div id="id-ole-editor-container" class="box" style="height:' + (_options.height-85) + 'px;">',
+                    '<div id="id-ole-editor-placeholder" style="width: 100%;height: 100%;"></div>',
+                '</div>',
+                '<div class="separator horizontal"></div>',
+                '<div class="footer" style="text-align: center;">',
+                    '<button id="id-btn-ole-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
+                    '<button id="id-btn-ole-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
+                '</div>'
+            ].join('');
+
+            _options.tpl = _.template(this.template)(_options);
+
+            this.handler = _options.handler;
+            this._oleData = null;
+            this._isNewOle = true;
+            Common.UI.Window.prototype.initialize.call(this, _options);
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+
+            this.btnSave = new Common.UI.Button({
+                el: $('#id-btn-ole-editor-apply'),
+                disabled: true
+            });
+            this.btnCancel = new Common.UI.Button({
+                el: $('#id-btn-ole-editor-cancel')
+            });
+
+            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
+        },
+
+        show: function() {
+            this.setPlaceholder();
+            Common.UI.Window.prototype.show.apply(this, arguments);
+        },
+
+        setOleData: function(data) {
+            this._oleData = data;
+            if (this._isExternalDocReady)
+                this.fireEvent('setoledata', this);
+        },
+
+        setEditMode: function(mode) {
+            this._isNewOle = !mode;
+        },
+
+        isEditMode: function() {
+            return !this._isNewOle;
+        },
+
+        setControlsDisabled: function(disable) {
+            this.btnSave.setDisabled(disable);
+            this.btnCancel.setDisabled(disable);
+            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
+        },
+
+        onDlgBtnClick: function(event) {
+            if ( this.handler ) {
+                this.handler.call(this, event.currentTarget.attributes['result'].value);
+                return;
+            }
+            this.hide();
+        },
+
+        onToolClose: function() {
+            if ( this.handler ) {
+                this.handler.call(this, 'cancel');
+                return;
+            }
+            this.hide();
+        },
+
+        setHeight: function(height) {
+            if (height >= 0) {
+                var min = parseInt(this.$window.css('min-height'));
+                height < min && (height = min);
+                this.$window.height(height);
+
+                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
+
+                this.$window.find('> .body').css('height', height-header_height);
+                this.$window.find('> .body > .box').css('height', height-85);
+
+                var top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2;
+                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
+
+                this.$window.css('left',left);
+                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
+            }
+        },
+
+        setPlaceholder: function(placeholder) {
+            this._placeholder = placeholder;
+        },
+
+        getPlaceholder: function() {
+            return this._placeholder;
+        },
+
+        textSave: 'Save & Exit',
+        textClose: 'Close',
+        textTitle: 'Spreadsheet Editor'
+    }, Common.Views.ExternalOleEditor || {}));
+});

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

@@ -52,7 +52,7 @@ define([
 
     Common.Views.Header =  Backbone.View.extend(_.extend(function(){
         var storeUsers, appConfig;
-        var $userList, $panelUsers, $btnUsers;
+        var $userList, $panelUsers, $btnUsers, $btnUserName, $labelDocName;
         var _readonlyRights = false;
 
         var templateUserItem =
@@ -74,38 +74,47 @@ define([
         var templateRightBox = '<section>' +
                             '<section id="box-doc-name">' +
                                 // '<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;" disabled="disabled">' +
-                                '<label id="rib-doc-name" />' +
+                                //'<label id="rib-doc-name" />' +
+                                '<input id="rib-doc-name" autofill="off" autocomplete="off"/></input>' +
                             '</section>' +
                             '<section style="display: inherit;">' +
                                 '<div class="hedset">' +
                                     '<div class="btn-slot" id="slot-hbtn-edit"></div>' +
                                     '<div class="btn-slot" id="slot-hbtn-print"></div>' +
+                                    '<div class="btn-slot" id="slot-hbtn-print-quick"></div>' +
                                     '<div class="btn-slot" id="slot-hbtn-download"></div>' +
                                 '</div>' +
                                 '<div class="hedset" data-layout-name="header-users">' +
                                     // '<span class="btn-slot text" id="slot-btn-users"></span>' +
-                                    '<section id="tlb-box-users" class="box-cousers dropdown"">' +
-                                        '<div class="btn-users" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
-                                            '<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
-                                            '<label class="caption">&plus;</label>' +
+                                    '<section id="tlb-box-users" class="box-cousers dropdown">' +
+                                        '<div class="btn-users dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
+                                            '<div class="inner-box-icon">' +
+                                                '<svg class=""><use xlink:href="#svg-icon-users"></use></svg>' +
+                                            '</div>' +
+                                            '<label class="caption"></label>' +
                                         '</div>' +
                                         '<div class="cousers-menu dropdown-menu">' +
                                             '<label id="tlb-users-menu-descr"><%= tipUsers %></label>' +
                                             '<div class="cousers-list"></div>' +
-                                            '<label id="tlb-change-rights" class="link"><%= txtAccessRights %></label>' +
                                         '</div>' +
                                     '</section>'+
                                 '</div>' +
+                                '<div class="hedset">' +
+                                    '<div class="btn-slot" id="slot-btn-share"></div>' +
+                                '</div>' +
                                 '<div class="hedset">' +
                                     '<div class="btn-slot" id="slot-btn-mode"></div>' +
                                     '<div class="btn-slot" id="slot-btn-back"></div>' +
                                     '<div class="btn-slot" id="slot-btn-favorite"></div>' +
-                                    '<div class="btn-slot" id="slot-btn-options"></div>' +
+                                    '<div class="btn-slot" id="slot-btn-search"></div>' +
                                 '</div>' +
                                 '<div class="hedset">' +
-                                    '<div class="btn-slot" id="slot-btn-user-name"></div>' +
-                                    '<div class="btn-current-user btn-header hidden">' +
-                                        '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
+                                    // '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</button>' +
+                                    '<div class="btn-current-user hidden">' +
+                                        '<div class="color-user-name"></div>' +
                                     '</div>' +
                                 '</div>' +
                             '</section>' +
@@ -120,19 +129,29 @@ define([
                                 '<div class="hedset">' +
                                     '<div class="btn-slot" id="slot-btn-dt-save" data-layout-name="header-save"></div>' +
                                     '<div class="btn-slot" id="slot-btn-dt-print"></div>' +
+                                    '<div class="btn-slot" id="slot-btn-dt-print-quick"></div>' +
                                     '<div class="btn-slot" id="slot-btn-dt-undo"></div>' +
                                     '<div class="btn-slot" id="slot-btn-dt-redo"></div>' +
                                 '</div>' +
                                 '<div class="lr-separator" id="id-box-doc-name">' +
-                                    '<label id="title-doc-name" />' +
+                                    // '<label id="title-doc-name" /></label>' +
+                                    '<input id="title-doc-name" autofill="off" autocomplete="off"/></input>' +
+                                '</div>' +
+                                '<div class="hedset">' +
+                                    // '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</button>' +
+                                    '<div class="btn-current-user hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</div>' +
                                 '</div>' +
-                                '<label id="title-user-name"></label>' +
                             '</section>';
 
         function onResetUsers(collection, opts) {
             var usercount = collection.getVisibleEditingCount();
             if ( $userList ) {
-                if ( usercount > 1 || usercount > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit) {
+                if (usercount > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) {
                     $userList.html(templateUserList({
                         users: collection.chain().filter(function(item){return item.get('online') && !item.get('view') && !item.get('hidden')}).groupBy(function(item) {return item.get('idOriginal');}).value(),
                         usertpl: _.template(templateUserItem),
@@ -163,46 +182,23 @@ define([
         function applyUsers(count, originalCount) {
             if (!$btnUsers) return;
 
-            var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit; // has other user(s) who edit document
+            var has_edit_users = count > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit); // has other user(s) who edit document
             if ( has_edit_users ) {
-                $btnUsers
-                    .attr('data-toggle', 'dropdown')
-                    .addClass('dropdown-toggle')
-                    .menu = true;
-
                 $panelUsers['show']();
+                $btnUsers.find('.caption').html(originalCount);
             } else {
-                $btnUsers
-                    .removeAttr('data-toggle')
-                    .removeClass('dropdown-toggle')
-                    .menu = false;
-
-                $panelUsers[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide']();
-            }
-
-            $btnUsers.find('.caption')
-                .css({'font-size': ((has_edit_users) ? '12px' : '14px'),
-                    'margin-top': ((has_edit_users) ? '0' : '-1px')})
-                .html((has_edit_users) ? originalCount : '&plus;');
-
-            var usertip = $btnUsers.data('bs.tooltip');
-            if ( usertip ) {
-                usertip.options.title = (has_edit_users) ? usertip.options.titleExt : usertip.options.titleNorm;
-                usertip.setContent();
+                $panelUsers['hide']();
             }
+            updateDocNamePosition(appConfig);
         }
 
         function onLostEditRights() {
             _readonlyRights = true;
-            $panelUsers && $panelUsers.find('#tlb-change-rights').hide();
-            $btnUsers && !$btnUsers.menu && $panelUsers.hide();
+            this.btnShare && this.btnShare.setVisible(false);
+            updateDocNamePosition(appConfig);
         }
 
         function onUsersClick(e) {
-            if ( !$btnUsers.menu ) {
-                $panelUsers.removeClass('open');
-                Common.NotificationCenter.trigger('collaboration:sharing');
-            } else {
             var usertip = $btnUsers.data('bs.tooltip');
             if ( usertip ) {
                 if ( usertip.dontShow===undefined)
@@ -211,26 +207,59 @@ define([
                 usertip.hide();
             }
         }
+
+        function updateDocNamePosition(config) {
+            if ( $labelDocName && config) {
+                var $parent = $labelDocName.parent();
+                if (!config.isEdit) {
+                    var _left_width = $parent.position().left,
+                        _right_width = $parent.next().outerWidth();
+                    $parent.css('padding-left', _left_width < _right_width ? Math.max(2, _right_width - _left_width) : 2);
+                    $parent.css('padding-right', _left_width < _right_width ? 2 : Math.max(2, _left_width - _right_width));
+                } else if (!(config.customization && config.customization.compactHeader)) {
+                    var _left_width = $parent.position().left,
+                        _right_width = $parent.next().outerWidth(),
+                        outerWidth = $labelDocName.outerWidth(),
+                        cssWidth = $labelDocName[0].style.width;
+                    cssWidth = cssWidth ? parseFloat(cssWidth) : outerWidth;
+                    if (cssWidth - outerWidth > 0.1) {
+                        $parent.css('padding-left', _left_width < _right_width ? Math.max(2, $parent.outerWidth() - 2 - cssWidth) : 2);
+                        $parent.css('padding-right', _left_width < _right_width ? 2 : Math.max(2, $parent.outerWidth() - 2 - cssWidth));
+                    } else {
+                        $parent.css('padding-left', _left_width < _right_width ? Math.max(2, Math.min(_right_width - _left_width + 2, $parent.outerWidth() - 2 - cssWidth)) : 2);
+                        $parent.css('padding-right', _left_width < _right_width ? 2 : Math.max(2, Math.min(_left_width - _right_width + 2, $parent.outerWidth() - 2 - cssWidth)));
+                    }
+                }
+
+                if (!(config.customization && config.customization.toolbarHideFileName) && (!config.isEdit || config.customization && config.customization.compactHeader)) {
+                    var basis = parseFloat($parent.css('padding-left') || 0) + parseFloat($parent.css('padding-right') || 0) + parseInt($labelDocName.css('min-width') || 50); // 2px - box-shadow
+                    config.isCrypted && (basis += 20);
+                    $parent.css('flex-basis', Math.ceil(basis) + 'px');
+                    $parent.closest('.extra.right').css('flex-basis', Math.ceil(basis) + $parent.next().outerWidth() + 'px');
+                    Common.NotificationCenter.trigger('tab:resize');
+                }
+            }
+        }
+
+        function onResize() {
+            if (appConfig && appConfig.isEdit && !(appConfig.customization && appConfig.customization.compactHeader)) {
+                updateDocNamePosition(appConfig);
+            }
         }
 
         function onAppShowed(config) {
-            if ( this.labelDocName ) {
+            // config.isCrypted =true; //delete fore merge!
+            if ( $labelDocName ) {
                 if ( config.isCrypted ) {
-                    this.labelDocName.before(
-                        '<div class="inner-box-icon crypted">' +
+                    $labelDocName.before(
+                        '<div class="inner-box-icon crypted hidden">' +
                             '<svg class="icon"><use xlink:href="#svg-icon-crypted"></use></svg>' +
                         '</div>');
+                    this.imgCrypted = $labelDocName.parent().find('.crypted');
+                    this._showImgCrypted = true;
                 }
 
-                if (!config.isEdit || !config.customization || !config.customization.compactHeader) {
-                    var $parent = this.labelDocName.parent();
-                    var _left_width = $parent.position().left,
-                        _right_width = $parent.next().outerWidth();
-
-                    if ( _left_width < _right_width )
-                        this.labelDocName.parent().css('padding-left', _right_width - _left_width);
-                    else this.labelDocName.parent().css('padding-right', _left_width - _right_width);
-                }
+                updateDocNamePosition(config);
             }
         }
 
@@ -250,6 +279,15 @@ define([
                 Common.NotificationCenter.trigger('markfavorite', !me.options.favorite);
             });
 
+            if (me.btnShare) {
+                me.btnShare.on('click', function (e) {
+                    Common.NotificationCenter.trigger('collaboration:sharing');
+                });
+                me.btnShare.updateHint(me.tipAccessRights);
+                me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings));
+                updateDocNamePosition(appConfig);
+            }
+
             if ( me.logo )
                 me.logo.children(0).on('click', function (e) {
                     var _url = !!me.branding && !!me.branding.logo && (me.branding.logo.url!==undefined) ?
@@ -272,33 +310,17 @@ define([
 
                 var editingUsers = storeUsers.getVisibleEditingCount();
                 $btnUsers.tooltip({
-                    title: (editingUsers > 1 || editingUsers>0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? me.tipViewUsers : me.tipAccessRights,
-                    titleNorm: me.tipAccessRights,
-                    titleExt: me.tipViewUsers,
+                    title: me.tipUsers,
                     placement: 'bottom',
                     html: true
                 });
-
                 $btnUsers.on('click', onUsersClick.bind(me));
-
-                var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
-                $labelChangeRights.on('click', function(e) {
-                    $panelUsers.removeClass('open');
-                    Common.NotificationCenter.trigger('collaboration:sharing');
-                });
-
-                $labelChangeRights[(!mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings))?'show':'hide']();
-                $panelUsers[(editingUsers > 1  || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings)) ? 'show' : 'hide']();
+                $panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide']();
+                updateDocNamePosition(appConfig);
             }
 
-
             if (appConfig.user.guest && appConfig.canRenameAnonymous) {
-                if (me.labelUserName) {
-                    me.labelUserName.addClass('clickable');
-                    me.labelUserName.on('click', function (e) {
-                        Common.NotificationCenter.trigger('user:rename');
-                    });
-                } else if (me.btnUserName) {
+                if (me.btnUserName) {
                     me.btnUserName.on('click', function (e) {
                         Common.NotificationCenter.trigger('user:rename');
                     });
@@ -312,6 +334,13 @@ define([
                 });
             }
 
+            if ( me.btnPrintQuick ) {
+                me.btnPrintQuick.updateHint(me.tipPrintQuick);
+                me.btnPrintQuick.on('click', function (e) {
+                    me.fireEvent('print-quick', me);
+                });
+            }
+
             if ( me.btnSave ) {
                 me.btnSave.updateHint(me.tipSave + Common.Utils.String.platformKey('Ctrl+S'));
                 me.btnSave.on('click', function (e) {
@@ -349,47 +378,69 @@ define([
                 }
             }
 
-            if ( me.btnOptions )
-                me.btnOptions.updateHint(me.tipViewSettings);
+            if (me.btnSearch)
+                me.btnSearch.updateHint(me.tipSearch +  Common.Utils.String.platformKey('Ctrl+F'));
+
+            if (appConfig.isEdit && !(appConfig.customization && appConfig.customization.compactHeader))
+                Common.NotificationCenter.on('window:resize', onResize);
+        }
+
+        function onFocusDocName(e){
+            var me = this;
+            me.imgCrypted && me.imgCrypted.toggleClass('hidden', true);
+            me.isSaveDocName =false;
+            if(me.withoutExt) return;
+            var name = me.cutDocName($labelDocName.val());
+            me.withoutExt = true;
+            _.delay(function(){
+                me.setDocTitle(name);
+                $labelDocName.select();
+            },100);
         }
 
         function onDocNameKeyDown(e) {
             var me = this;
 
-            var name = me.labelDocName.val();
+            var name = $labelDocName.val();
             if ( e.keyCode == Common.UI.Keys.RETURN ) {
                 name = name.trim();
-                if ( !_.isEmpty(name) && me.documentCaption !== name ) {
+                if ( !_.isEmpty(name) && me.cutDocName(me.documentCaption) !== name ) {
+                    me.isSaveDocName =true;
                     if ( /[\t*\+:\"<>?|\\\\/]/gim.test(name) ) {
                         _.defer(function() {
                             Common.UI.error({
                                 msg: (new Common.Views.RenameDialog).txtInvalidName + "*+:\"<>?|\/"
                                 , callback: function() {
                                     _.delay(function() {
-                                        me.labelDocName.focus();
+                                        $labelDocName.focus();
+                                        me.isSaveDocName =true;
                                     }, 50);
                                 }
                             });
-
-                            me.labelDocName.blur();
                         })
-                    } else {
-                        Common.Gateway.requestRename(name);
+                    } else
+                    if(me.withoutExt) {
+                        name = me.cutDocName(name);
+                        me.options.wopi ? me.api.asc_wopi_renameFile(name) : Common.Gateway.requestRename(name);
+                        name += me.fileExtention;
+                        me.withoutExt = false;
+                        me.setDocTitle(name);
                         Common.NotificationCenter.trigger('edit:complete', me);
                     }
+
+                } else {
+                    Common.NotificationCenter.trigger('edit:complete', me);
                 }
             } else
             if ( e.keyCode == Common.UI.Keys.ESC ) {
-                me.labelDocName.val(me.documentCaption);
                 Common.NotificationCenter.trigger('edit:complete', this);
             } else {
-                me.labelDocName.attr('size', name.length > 10 ? name.length : 10);
+                _.delay(function(){
+                    me.setDocTitle();
+                },10);
             }
         }
 
-        function onContentThemeChangedToDark(isdark) {
-        }
-
         return {
             options: {
                 branding: {},
@@ -419,7 +470,6 @@ define([
                     id: 'btn-goback',
                     cls: 'btn-header',
                     iconCls: 'toolbar__icon icon--inverse btn-goback',
-                    split: true,
                     dataHint: '0',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'big'
@@ -432,17 +482,15 @@ define([
                     reset   : onResetUsers
                 });
 
-                me.btnOptions = new Common.UI.Button({
+                me.btnSearch = new Common.UI.Button({
                     cls: 'btn-header no-caret',
-                    iconCls: 'toolbar__icon icon--inverse btn-ic-options',
-                    menu: true,
+                    iconCls: 'toolbar__icon icon--inverse btn-menu-search',
+                    enableToggle: true,
                     dataHint: '0',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'big'
                 });
 
-                me.mnuZoom = {options: {value: 100}};
-
                 me.btnFavorite = new Common.UI.Button({
                     id: 'btn-favorite',
                     cls: 'btn-header',
@@ -454,10 +502,10 @@ define([
 
                 Common.NotificationCenter.on({
                     'app:ready': function(mode) {Common.Utils.asyncCall(onAppReady, me, mode);},
-                    'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}
+                    'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);},
+                    'tab:visible': function() {Common.Utils.asyncCall(updateDocNamePosition, me, appConfig);},
+                    'collaboration:sharingdeny': function(mode) {Common.Utils.asyncCall(onLostEditRights, me, mode);}
                 });
-                Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
-                Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this));
                 Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
             },
 
@@ -477,7 +525,7 @@ define([
                         disabled: disabled === true,
                         dataHint:'0',
                         dataHintDirection: hintDirection ? hintDirection : (config.isDesktopApp ? 'right' : 'left'),
-                        dataHintOffset: hintOffset ? hintOffset : (config.isDesktopApp ? '10, -10' : '10, 10'),
+                        dataHintOffset: hintOffset ? hintOffset : (config.isDesktopApp ? '10, -18' : '10, 10'),
                         dataHintTitle: hintTitle
                     })).render(slot);
                 }
@@ -498,21 +546,19 @@ define([
                 if ( role == 'right' ) {
                     var $html = $(_.template(templateRightBox)({
                         tipUsers: this.labelCoUsersDescr,
-                        txtAccessRights: this.txtAccessRights
+                        textShare: this.textShare
                     }));
 
-                    if ( !me.labelDocName ) {
-                        me.labelDocName = $html.find('#rib-doc-name');
+                    if ( !$labelDocName ) {
+                        $labelDocName = $html.find('#rib-doc-name');
                         if ( me.documentCaption ) {
-                            me.labelDocName.text(me.documentCaption);
+                            setTimeout(function() { me.setDocTitle(me.documentCaption); }, 50);
                         }
                     } else {
                         $html.find('#rib-doc-name').hide();
                     }
 
-                    if ( !_.isUndefined(this.options.canRename) ) {
-                        this.setCanRename(this.options.canRename);
-                    }
+                    this.setCanRename(!!this.options.canRename);
 
                     if ( this.options.canBack === true ) {
                         me.btnGoBack.render($html.find('#slot-btn-back'));
@@ -535,59 +581,90 @@ define([
                         if ( config.canPrint )
                             this.btnPrint = createTitleButton('toolbar__icon icon--inverse btn-print', $html.findById('#slot-hbtn-print'), undefined, 'bottom', 'big', 'P');
 
+                        if ( config.canQuickPrint )
+                            this.btnPrintQuick = createTitleButton('toolbar__icon icon--inverse btn-quick-print', $html.findById('#slot-hbtn-print-quick'), undefined, 'bottom', 'big', 'Q');
+
                         if ( config.canEdit && config.canRequestEditRights )
                             this.btnEdit = createTitleButton('toolbar__icon icon--inverse btn-edit', $html.findById('#slot-hbtn-edit'), undefined, 'bottom', 'big');
                     }
-                    me.btnOptions.render($html.find('#slot-btn-options'));
+                    me.btnSearch.render($html.find('#slot-btn-search'));
 
                     if (!config.isEdit || config.customization && !!config.customization.compactHeader) {
-                        if (config.user.guest && config.canRenameAnonymous)
-                            me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('#slot-btn-user-name'), undefined, 'bottom', 'big' );
-                        else {
+                        if (config.user.guest && config.canRenameAnonymous) {
+                            me.btnUserName = new Common.UI.Button({
+                                el: $html.findById('.slot-btn-user-name'),
+                                cls: 'btn-header',
+                                dataHint:'0',
+                                dataHintDirection: 'bottom',
+                                dataHintOffset: 'big',
+                                visible: true
+                            });
+                            me.btnUserName.cmpEl.removeClass('hidden');
+                        } else {
                             me.elUserName = $html.find('.btn-current-user');
                             me.elUserName.removeClass('hidden');
                         }
+                        $btnUserName = $html.find('.color-user-name');
                         me.setUserName(me.options.userName);
                     }
 
+                    if (!_readonlyRights && config && (config.sharingSettingsUrl && config.sharingSettingsUrl.length || config.canRequestSharingSettings)) {
+                        me.btnShare = new Common.UI.Button({
+                            cls: 'btn-header btn-header-share',
+                            iconCls: 'toolbar__icon icon--inverse btn-users-share',
+                            caption: me.textShare,
+                            dataHint: '0',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'big'
+                        });
+                        me.btnShare.render($html.find('#slot-btn-share'));
+                    } else {
+                        $html.find('#slot-btn-share').hide();
+                    }
+
                     $userList = $html.find('.cousers-list');
                     $panelUsers = $html.find('.box-cousers');
-                    $btnUsers = $html.find('.btn-users');
-
+                    $btnUsers = $panelUsers.find('> .btn-users');
                     $panelUsers.hide();
                     return $html;
                 } else
                 if ( role == 'title' ) {
                     var $html = $(_.template(templateTitleBox)());
 
-                    !!me.labelDocName && me.labelDocName.hide().off();                  // hide document title if it was created in right box
-                    me.labelDocName = $html.find('#title-doc-name');
-                    me.labelDocName.text( me.documentCaption );
+                    !!$labelDocName && $labelDocName.hide().off();                  // hide document title if it was created in right box
+                    $labelDocName = $html.find('#title-doc-name');
+                    setTimeout(function() { me.setDocTitle(me.documentCaption); }, 50);
 
-                    me.labelUserName = $('> #title-user-name', $html);
+                    me.options.wopi && $labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
+
+                    if (config.user.guest && config.canRenameAnonymous) {
+                        me.btnUserName = new Common.UI.Button({
+                            el: $html.findById('.slot-btn-user-name'),
+                            cls: 'btn-header',
+                            dataHint:'0',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'big',
+                            visible: true
+                        });
+                        me.btnUserName.cmpEl.removeClass('hidden');
+                    }
+                    else {
+                        me.elUserName = $html.find('.btn-current-user');
+                        me.elUserName.removeClass('hidden');
+                    }
+                    $btnUserName = $html.find('.color-user-name');
                     me.setUserName(me.options.userName);
 
                     if ( config.canPrint && config.isEdit ) {
                         me.btnPrint = createTitleButton('toolbar__icon icon--inverse btn-print', $html.findById('#slot-btn-dt-print'), true, undefined, undefined, 'P');
                     }
+                    if ( config.canQuickPrint && config.isEdit )
+                        me.btnPrintQuick = createTitleButton('toolbar__icon icon--inverse btn-quick-print', $html.findById('#slot-btn-dt-print-quick'), true, undefined, undefined, 'Q');
 
                     me.btnSave = createTitleButton('toolbar__icon icon--inverse btn-save', $html.findById('#slot-btn-dt-save'), true, undefined, undefined, 'S');
                     me.btnUndo = createTitleButton('toolbar__icon icon--inverse btn-undo', $html.findById('#slot-btn-dt-undo'), true, undefined, undefined, 'Z');
                     me.btnRedo = createTitleButton('toolbar__icon icon--inverse btn-redo', $html.findById('#slot-btn-dt-redo'), true, undefined, undefined, 'Y');
 
-                    if ( me.btnSave.$icon.is('svg') ) {
-                        me.btnSave.$icon.addClass('icon-save btn-save');
-                        var _create_use = function (extid, intid) {
-                            var _use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-                            _use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', extid);
-                            _use.setAttribute('id', intid);
-
-                            return $(_use);
-                        };
-
-                        _create_use('#svg-btn-save-coauth', 'coauth').appendTo(me.btnSave.$icon);
-                        _create_use('#svg-btn-save-sync', 'sync').appendTo(me.btnSave.$icon);
-                    }
                     return $html;
                 }
             },
@@ -628,14 +705,14 @@ define([
                 !value && (value = '');
 
                 this.documentCaption = value;
+                var idx = this.documentCaption.lastIndexOf('.');
+                if (idx>0)
+                    this.fileExtention = this.documentCaption.substring(idx);
                 this.isModified && (value += '*');
-                if ( this.labelDocName ) {
-                    this.labelDocName.text( value );
-                    // this.labelDocName.attr('size', value.length);
-
-                    this.setCanRename(true);
+                this.readOnly && (value += ' (' + this.textReadOnly + ')');
+                if ( $labelDocName ) {
+                    this.setDocTitle( value );
                 }
-
                 return value;
             },
 
@@ -649,7 +726,7 @@ define([
                 var _name = this.documentCaption;
                 changed && (_name += '*');
 
-                this.labelDocName.text(_name);
+                this.setDocTitle(_name);
             },
 
             setCanBack: function (value, text) {
@@ -657,7 +734,7 @@ define([
                 this.btnGoBack[value ? 'show' : 'hide']();
                 if (value)
                     this.btnGoBack.updateHint((text && typeof text == 'string') ? text : this.textBack);
-
+                updateDocNamePosition(appConfig);
                 return this;
             },
 
@@ -670,7 +747,7 @@ define([
                 this.btnFavorite[value!==undefined && value!==null ? 'show' : 'hide']();
                 this.btnFavorite.changeIcon(!!value ? {next: 'btn-in-favorite'} : {curr: 'btn-in-favorite'});
                 this.btnFavorite.updateHint(!value ? this.textAddFavorite : this.textRemoveFavorite);
-
+                updateDocNamePosition(appConfig);
                 return this;
             },
 
@@ -679,12 +756,10 @@ define([
             },
 
             setCanRename: function (rename) {
-                rename = false;
-
                 var me = this;
                 me.options.canRename = rename;
-                if ( me.labelDocName ) {
-                    var label = me.labelDocName;
+                if ( $labelDocName ) {
+                    var label = $labelDocName;
                     if ( rename ) {
                         label.removeAttr('disabled').tooltip({
                             title: me.txtRename,
@@ -693,8 +768,20 @@ define([
 
                         label.on({
                             'keydown': onDocNameKeyDown.bind(this),
+                            'focus': onFocusDocName.bind(this),
                             'blur': function (e) {
-
+                                me.imgCrypted && me.imgCrypted.toggleClass('hidden', false);
+                                Common.Utils.isGecko && (label[0].selectionStart = label[0].selectionEnd = 0);
+                                if(!me.isSaveDocName) {
+                                    me.withoutExt = false;
+                                    me.setDocTitle(me.documentCaption);
+                                }
+                            },
+                            'paste': function (e) {
+                                setTimeout(function() {
+                                    var name = me.cutDocName($labelDocName.val());
+                                    me.setDocTitle(name);
+                                });
                             }
                         });
 
@@ -711,12 +798,37 @@ define([
                 }
             },
 
+            cutDocName: function(name) {
+                if(name.length <= this.fileExtention.length) return name;
+                var idx =name.length - this.fileExtention.length;
+
+                return (name.substring(idx) == this.fileExtention) ? name.substring(0, idx) : name ;
+            },
+
+            setDocTitle: function(name){
+                var width = this.getTextWidth(name || $labelDocName.val());
+                (width>=0) && $labelDocName.width(width);
+                name && (width>=0) && $labelDocName.val(name);
+                if (this._showImgCrypted && width>=0) {
+                    this.imgCrypted.toggleClass('hidden', false);
+                    this._showImgCrypted = false;
+                }
+                (width>=0) && onResize();
+            },
+
+            getTextWidth: function(text) {
+                if (!this._testCanvas ) {
+                    var font = ($labelDocName.css('font-size') + ' ' + $labelDocName.css('font-family')).trim();
+                    if (font) {
+                        var canvas = document.createElement("canvas");
+                        this._testCanvas = canvas.getContext('2d');
+                        this._testCanvas.font = font;
+                    }
+                }
+                return this._testCanvas ? this._testCanvas.measureText(text).width : -1;
+            },
+
             setUserName: function(name) {
-                if ( !!this.labelUserName ) {
-                    if ( !!name ) {
-                        this.labelUserName.text(name).show();
-                    } else this.labelUserName.hide();
-                } else {
                 this.options.userName = name;
                 if ( this.btnUserName ) {
                     this.btnUserName.updateHint(name);
@@ -727,8 +839,7 @@ define([
                         html: true
                     });
                 }
-                }
-
+                $btnUserName && $btnUserName.text(this.getInitials(name));
                 return this;
             },
 
@@ -737,24 +848,23 @@ define([
                     return this.btnSave;
                 else if (type == 'users')
                     return $panelUsers;
+                else if (type == 'share')
+                    return this.btnShare;
             },
 
             lockHeaderBtns: function (alias, lock) {
                 var me = this;
                 if ( alias == 'users' ) {
-                    if ( lock )
-                        $btnUsers.addClass('disabled').attr('disabled', 'disabled'); else
-                        $btnUsers.removeClass('disabled').removeAttr('disabled');
-                } else if ( alias == 'rename-user' ) {
-                    if (me.labelUserName) {
                     if ( lock ) {
-                            me.labelUserName.removeClass('clickable');
-                            me.labelUserName.addClass('disabled');
+                        $btnUsers.addClass('disabled').attr('disabled', 'disabled');
                     } else {
-                            me.labelUserName.addClass('clickable');
-                            me.labelUserName.removeClass('disabled');
+                        $btnUsers.removeClass('disabled').removeAttr('disabled');
                     }
-                    } else if (me.btnUserName) {
+                    if (me.btnShare) {
+                        me.btnShare.setDisabled(lock);
+                    }
+                } else if ( alias == 'rename-user' ) {
+                    if (me.btnUserName) {
                         me.btnUserName.setDisabled(lock);
                     }
                 } else {
@@ -775,20 +885,26 @@ define([
                     switch ( alias ) {
                     case 'undo': _lockButton(me.btnUndo); break;
                     case 'redo': _lockButton(me.btnRedo); break;
-                    case 'opts': _lockButton(me.btnOptions); break;
                     default: break;
                     }
                 }
             },
 
-            fakeMenuItem: function() {
-                return {
-                    conf: {checked: false, disabled: false},
-                    setChecked: function (val) { this.conf.checked = val; },
-                    isChecked: function () { return this.conf.checked; },
-                    setDisabled: function (val) { this.conf.disabled = val; },
-                    isDisabled: function () { return this.conf.disabled; }
-                };
+            getInitials: function(name) {
+                var fio = name.split(' ');
+                var initials = fio[0].substring(0, 1).toUpperCase();
+                for (var i = fio.length-1; i>0; i--) {
+                    if (fio[i][0]!=='(' && fio[i][0]!==')') {
+                        initials += fio[i].substring(0, 1).toUpperCase();
+                        break;
+                    }
+                }
+                return initials;
+            },
+
+            setDocumentReadOnly: function (readonly) {
+                this.readOnly = readonly;
+                this.setDocumentCaption(this.documentCaption);
             },
 
             textBack: 'Go to Documents',
@@ -797,6 +913,7 @@ define([
             tipAccessRights: 'Manage document access rights',
             labelCoUsersDescr: 'Document is currently being edited by several users.',
             tipViewUsers: 'View users and manage document access rights',
+            tipUsers: 'View users',
             tipDownload: 'Download file',
             tipPrint: 'Print file',
             tipGoEdit: 'Edit current file',
@@ -811,7 +928,11 @@ define([
             tipViewSettings: 'View Settings',
             textRemoveFavorite: 'Remove from Favorites',
             textAddFavorite: 'Mark as favorite',
-            textHideNotes: 'Hide Notes'
+            textHideNotes: 'Hide Notes',
+            tipSearch: 'Search',
+            textShare: 'Share',
+            tipPrintQuick: 'Quick print',
+            textReadOnly: 'Read only'
         }
     }(), Common.Views.Header || {}))
 });

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

@@ -68,11 +68,14 @@ define([
         initialize: function(options) {
             _.extend(this, options);
             Common.UI.BaseView.prototype.initialize.call(this, arguments);
+
+            var filter = Common.localStorage.getKeysFilter();
+            this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
         },
 
         render: function(el) {
             el = el || this.el;
-            $(el).html(this.template({scope: this})).width( (parseInt(Common.localStorage.getItem('de-mainmenu-width')) || MENU_SCALE_PART) - SCALE_MIN);
+            $(el).html(this.template({scope: this})).width( (parseInt(Common.localStorage.getItem(this.appPrefix + 'mainmenu-width')) || MENU_SCALE_PART) - SCALE_MIN);
 
             this.viewHistoryList = new Common.UI.DataView({
                 el: $('#history-list'),
@@ -110,7 +113,7 @@ define([
                         for(var i=1; i<revisions.length; i++)
                             revisions[i].set('isVisible', isExpanded);
                     }
-                    this.scroller.update({minScrollbarLength: 40});
+                    this.scroller.update({minScrollbarLength: this.minScrollbarLength});
                 } else
                     Common.UI.DataView.prototype.onClickItem.call(this, view, record, e);
                 me.btnExpand.cmpEl.text(me.storeHistory.hasCollapsed() ? me.textShowAll : me.textHideAll);

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

@@ -48,7 +48,7 @@ define([
     Common.Views.InsertTableDialog = Common.UI.Window.extend(_.extend({
         options: {
             width: 230,
-            height: 156,
+            height: 157,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
             split: false,

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

@@ -50,11 +50,18 @@ define([
     'common/main/lib/view/SymbolTableDialog'
 ], function () { 'use strict';
 
+    var _BulletTypes = {};
+    _BulletTypes.none = -1;
+    _BulletTypes.symbol = 0;
+    _BulletTypes.image = 2;
+    _BulletTypes.newSymbol = 1;
+    _BulletTypes.newImage = -2;
+
     Common.Views.ListSettingsDialog = Common.UI.Window.extend(_.extend({
         options: {
             type: 0, // 0 - markers, 1 - numbers
-            width: 280,
-            height: 255,
+            width: 285,
+            height: 261,
             style: 'min-width: 240px;',
             cls: 'modal-dlg',
             split: false,
@@ -80,9 +87,18 @@ define([
                                 '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtType + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 100px;">',
-                                    '<div id="id-dlg-list-numbering-format" class="input-group-nr" style="width: 100px;"></div>',
-                                    '<div id="id-dlg-list-bullet-format" class="input-group-nr" style="width: 100px;"></div>',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                    '<div id="id-dlg-list-numbering-format" class="input-group-nr" style="width: 105px;"></div>',
+                                    '<div id="id-dlg-list-bullet-format" class="input-group-nr" style="width: 105px;"></div>',
+                                '</td>',
+                                '<td style="padding-bottom: 8px;"></td>',
+                            '</tr>',
+                            '<tr class="image">',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                    '<label class="text">' + this.txtImport + '</label>',
+                                '</td>',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                    '<div id="id-dlg-list-image" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
@@ -90,7 +106,7 @@ define([
                                 '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtSize + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 100px;">',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-size"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -101,16 +117,16 @@ define([
                                 '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text" style="white-space: nowrap;">' + this.txtStart + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 100px;">',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-start"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
-                            '<tr>',
+                            '<tr class="color">',
                                 '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtColor + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 100px;">',
+                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-color"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
@@ -123,6 +139,8 @@ define([
             this.props = options.props;
             this.options.tpl = _.template(this.template)(this.options);
             this.color = '000000';
+            this.storage = !!options.storage;
+            this.api = options.api;
 
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
@@ -179,7 +197,9 @@ define([
                 [
                     '<% _.each(items, function(item) { %>',
                     '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                    '<%= item.displayValue %><% if (item.value === 0) { %><span style="font-family:<%=item.font%>;"><%=item.symbol%></span><% } %>',
+                    '<%= item.displayValue %>',
+                    '<% if (item.value === 0) { %><span style="font-family:<%=item.font%>;"><%=item.symbol%></span>',
+                    '<% } else if (item.value === 2) { %><span id="id-dlg-list-bullet-image-preview" style="width:12px; height: 12px; margin-left: 4px; margin-bottom: 1px;display: inline-block; vertical-align: middle;"></span><% } %>',
                     '</a></li>',
                     '<% }); %>'
                 ];
@@ -195,28 +215,36 @@ define([
             this.cmbBulletFormat = new Common.UI.ComboBoxCustom({
                 el          : $('#id-dlg-list-bullet-format'),
                 menuStyle   : 'min-width: 100%;max-height: 183px;',
-                style       : "width: 100px;",
+                style       : "width: 105px;",
                 editable    : false,
                 takeFocusOnClose: true,
                 template    : _.template(template.join('')),
                 itemsTemplate: _.template(itemsTemplate.join('')),
                 data        : [
-                    { displayValue: this.txtNone,       value: -1 },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "•", font: 'Arial' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "o", font: 'Courier New' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "§", font: 'Wingdings' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "v", font: 'Wingdings' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "Ø", font: 'Wingdings' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "ü", font: 'Wingdings' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "w", font: 'Wingdings' },
-                    { displayValue: this.txtSymbol + ': ', value: 0, symbol: "–", font: 'Arial' },
-                    { displayValue: this.txtNewBullet, value: 1 }
+                    { displayValue: this.txtNone,          value: _BulletTypes.none },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "•", font: 'Arial' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "o", font: 'Courier New' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "§", font: 'Wingdings' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "v", font: 'Wingdings' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "Ø", font: 'Wingdings' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "ü", font: 'Wingdings' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "w", font: 'Wingdings' },
+                    { displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: "–", font: 'Arial' },
+                    { displayValue: this.txtNewBullet,     value: _BulletTypes.newSymbol },
+                    { displayValue: this.txtNewImage,      value: _BulletTypes.newImage }
                 ],
                 updateFormControl: function(record) {
                     var formcontrol = $(this.el).find('.form-control');
                     if (record) {
-                        if (record.get('value')==0)
+                        if (record.get('value')===_BulletTypes.symbol)
                             formcontrol[0].innerHTML = record.get('displayValue') + '<span style="font-family:' + (record.get('font') || 'Arial') + '">' + record.get('symbol') + '</span>';
+                        else if (record.get('value')===_BulletTypes.image) {
+                            formcontrol[0].innerHTML = record.get('displayValue') + '<span id="id-dlg-list-bullet-combo-preview" style="width:12px; height: 12px; margin-left: 2px; margin-bottom: 1px;display: inline-block; vertical-align: middle;"></span>';
+                            var bullet = new Asc.asc_CBullet();
+                            bullet.asc_fillBulletImage(me.imageProps.id);
+                            bullet.drawSquareImage('id-dlg-list-bullet-combo-preview');
+                        } else if (record.get('value')===_BulletTypes.newImage)
+                            formcontrol[0].innerHTML = me.txtImage;
                         else
                             formcontrol[0].innerHTML = record.get('displayValue');
                     } else
@@ -227,7 +255,9 @@ define([
             this.cmbBulletFormat.selectRecord(rec);
             this.bulletProps = {symbol: rec.get('symbol'), font: rec.get('font')};
             this.cmbBulletFormat.on('selected', _.bind(function (combo, record) {
-                if (record.value === 1) {
+                this.imageControls.toggleClass('hidden', !(record.value === _BulletTypes.image || record.value === _BulletTypes.newImage));
+                this.colorControls.toggleClass('hidden', record.value === _BulletTypes.image || record.value === _BulletTypes.newImage);
+                if (record.value === _BulletTypes.newSymbol) {
                     var me = this,
                         props = me.bulletProps,
                         handler = function(dlg, result, settings) {
@@ -242,10 +272,17 @@ define([
                                 }
                             }
                             var store = combo.store;
-                            if (!store.findWhere({value: 0, symbol: props.symbol, font: props.font}))
-                                store.add({ displayValue: me.txtSymbol + ': ', value: 0, symbol: props.symbol, font: props.font }, {at: store.length-1});
+                            if (!store.findWhere({value: _BulletTypes.symbol, symbol: props.symbol, font: props.font})) {
+                                var idx = store.indexOf(store.findWhere({value: _BulletTypes.image}));
+                                if (idx<0)
+                                    idx = store.indexOf(store.findWhere({value: _BulletTypes.newSymbol}));
+                                store.add({ displayValue: me.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: props.symbol, font: props.font }, {at: idx});
+                            }
+                            if (me.imageProps)
+                                me.imageProps.redraw = true;
+
                             combo.setData(store.models);
-                            combo.selectRecord(combo.store.findWhere({value: 0, symbol: props.symbol, font: props.font}));
+                            combo.selectRecord(combo.store.findWhere({value: _BulletTypes.symbol, symbol: props.symbol, font: props.font}));
                         },
                         win = new Common.Views.SymbolTableDialog({
                             api: me.options.api,
@@ -258,7 +295,11 @@ define([
                         });
                     win.show();
                     win.on('symbol:dblclick', handler);
-                } else if (record.value == -1) {
+                } else if (record.value == _BulletTypes.newImage) { // new image
+                } else if (record.value == _BulletTypes.image) { // image
+                    if (this._changedProps)
+                        this._changedProps.asc_fillBulletImage(this.imageProps.id);
+                } else if (record.value == _BulletTypes.none) {
                     if (this._changedProps)
                         this._changedProps.asc_putListType(0, record.value);
                 } else {
@@ -271,12 +312,14 @@ define([
                         this._changedProps.asc_putSymbol(this.bulletProps.symbol);
                     }
                 }
+                this.btnOk.setDisabled(record.value === _BulletTypes.newImage);
             }, this));
+            this.cmbBulletFormat.on('show:after', _.bind(this.onBulletFormatOpen, this));
 
             this.spnSize = new Common.UI.MetricSpinner({
                 el          : $window.find('#id-dlg-list-size'),
                 step        : 1,
-                width       : 100,
+                width       : 105,
                 value       : 100,
                 defaultUnit : '',
                 maxValue    : 400,
@@ -302,7 +345,7 @@ define([
             this.spnStart = new Common.UI.MetricSpinner({
                 el          : $window.find('#id-dlg-list-start'),
                 step        : 1,
-                width       : 100,
+                width       : 105,
                 value       : 1,
                 defaultUnit : '',
                 maxValue    : 32767,
@@ -314,7 +357,32 @@ define([
                 }
             });
 
-            me.numberingControls = $window.find('.numbering');
+            this.btnSelectImage = new Common.UI.Button({
+                parentEl: $('#id-dlg-list-image'),
+                cls: 'btn-text-menu-default',
+                caption: this.textSelect,
+                style: 'width: 100%;',
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 105px;',
+                    maxHeight: 200,
+                    additionalAlign: this.menuAddAlign,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
+            });
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
+            this.btnSelectImage.menu.items[2].setVisible(this.storage);
+
+            this.btnOk = new Common.UI.Button({
+                el: $window.find('.primary')
+            });
+
+            me.numberingControls = $window.find('tr.numbering');
+            me.imageControls = $window.find('tr.image');
+            me.colorControls = $window.find('tr.color');
 
             var el = $window.find('table tr:first() td:first()');
             el.width(Math.max($window.find('.numbering .text').width(), el.width()));
@@ -323,12 +391,52 @@ define([
         },
 
         getFocusedComponents: function() {
-            return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart, this.btnColor];
+            return [this.cmbNumFormat, this.cmbBulletFormat, this.btnSelectImage, this.spnSize, this.spnStart, this.btnColor];
         },
 
         afterRender: function() {
             this.updateThemeColors();
             this._setDefaults(this.props);
+
+            var me = this;
+            var onApiImageLoaded = function(bullet) {
+                me.imageProps = {id: bullet.asc_getImageId(), redraw: true};
+                if (me._changedProps)
+                    me._changedProps.asc_fillBulletImage(me.imageProps.id);
+                // add or update record for image to btnBulletFormat and select it
+                var store = me.cmbBulletFormat.store;
+                if (!store.findWhere({value: _BulletTypes.image})) {
+                    var idx = store.indexOf(store.findWhere({value: _BulletTypes.newSymbol}));
+                    store.add({ displayValue: me.txtImage + ':', value: _BulletTypes.image }, {at: idx});
+                }
+                me.cmbBulletFormat.setData(store.models);
+                me.cmbBulletFormat.selectRecord(me.cmbBulletFormat.store.findWhere({value: _BulletTypes.image}));
+                me.btnOk.setDisabled(false);
+            };
+            this.api.asc_registerCallback('asc_onBulletImageLoaded', onApiImageLoaded);
+
+            var insertImageFromStorage = function(data) {
+                if (data && data._urls && data.c=='bullet') {
+                    (new Asc.asc_CBullet()).asc_putImageUrl(data._urls[0], data.token);
+                }
+            };
+            Common.NotificationCenter.on('storage:image-insert', insertImageFromStorage);
+
+            this.on('close', function(obj){
+                me.api.asc_unregisterCallback('asc_onBulletImageLoaded', onApiImageLoaded);
+                Common.NotificationCenter.off('storage:image-insert', insertImageFromStorage);
+            });
+        },
+
+        onBulletFormatOpen: function(combo) {
+            var store = combo.store,
+                rec = store.findWhere({value: _BulletTypes.image});
+            if (rec && this.imageProps.redraw) {
+                var bullet = new Asc.asc_CBullet();
+                bullet.asc_fillBulletImage(this.imageProps.id);
+                bullet.drawSquareImage('id-dlg-list-bullet-image-preview');
+                this.imageProps.redraw = false;
+            }
         },
 
         updateThemeColors: function() {
@@ -347,9 +455,14 @@ define([
         },
 
         ShowHideElem: function(value) {
+            var isImage = value==0 && (this.cmbBulletFormat.getValue()===_BulletTypes.image || this.cmbBulletFormat.getValue()===_BulletTypes.newImage ||
+                                      (this.cmbBulletFormat.getValue()===undefined || this.cmbBulletFormat.getValue()==='') && this.originalType === AscFormat.BULLET_TYPE_BULLET_BLIP);
             this.numberingControls.toggleClass('hidden', value==0);
+            this.imageControls.toggleClass('hidden', !isImage);
+            this.colorControls.toggleClass('hidden', isImage);
             this.cmbNumFormat.setVisible(value==1);
             this.cmbBulletFormat.setVisible(value==0);
+            this.btnOk.setDisabled(isImage && (this.cmbBulletFormat.getValue()===_BulletTypes.newImage));
             var me = this;
             _.delay(function(){
                 if (value)
@@ -362,18 +475,28 @@ define([
         _handleInput: function(state) {
             if (this.options.handler)
             {
+                if (state == 'ok' && this.btnOk.isDisabled()) {
+                    return;
+                }
                 var type = this.btnBullet.pressed ? 0 : 1;
                 if (this.originalType == AscFormat.BULLET_TYPE_BULLET_NONE) {
                     this._changedProps = new Asc.asc_CBullet();
-                    this._changedProps.asc_putColor(Common.Utils.ThemeColor.getRgbColor(this.color));
                     this._changedProps.asc_putSize(this.spnSize.getNumberValue());
+                    if (type==0 && this.cmbBulletFormat.getValue()===_BulletTypes.image && this.imageProps) {//image
+                        this._changedProps.asc_fillBulletImage(this.imageProps.id);
+                    } else {
+                        this._changedProps.asc_putColor(Common.Utils.ThemeColor.getRgbColor(this.color));
+                    }
                 }
 
                 if (this.originalType == AscFormat.BULLET_TYPE_BULLET_NONE ||
-                    this.originalType == AscFormat.BULLET_TYPE_BULLET_CHAR && type==1 || this.originalType == AscFormat.BULLET_TYPE_BULLET_AUTONUM && type==0) { // changed list type
+                    (this.originalType == AscFormat.BULLET_TYPE_BULLET_CHAR || this.originalType == AscFormat.BULLET_TYPE_BULLET_BLIP) && type==1 ||
+                    this.originalType == AscFormat.BULLET_TYPE_BULLET_AUTONUM && type==0) { // changed list type
                     if (type==0) {//markers
-                        if (this.cmbBulletFormat.getValue()==-1) {
+                        if (this.cmbBulletFormat.getValue()==_BulletTypes.none) {
                             this._changedProps.asc_putListType(0, -1);
+                        } else if (this.cmbBulletFormat.getValue()==_BulletTypes.image) {
+
                         } else {
                             this._changedProps.asc_putFont(this.bulletProps.font);
                             this._changedProps.asc_putSymbol(this.bulletProps.symbol);
@@ -432,16 +555,28 @@ define([
 
                     if (this.originalType == AscFormat.BULLET_TYPE_BULLET_NONE) {
                         this.cmbNumFormat.setValue(-1);
-                        this.cmbBulletFormat.setValue(-1);
+                        this.cmbBulletFormat.setValue(_BulletTypes.none);
                         type = this.type;
                     } else if (this.originalType == AscFormat.BULLET_TYPE_BULLET_CHAR) {
                         var symbol = bullet.asc_getSymbol();
                         if (symbol) {
                             this.bulletProps = {symbol: symbol, font: bullet.asc_getFont()};
-                            if (!this.cmbBulletFormat.store.findWhere({value: 0, symbol: this.bulletProps.symbol, font: this.bulletProps.font}))
-                                this.cmbBulletFormat.store.add({ displayValue: this.txtSymbol + ': ', value: 0, symbol: this.bulletProps.symbol, font: this.bulletProps.font }, {at: this.cmbBulletFormat.store.length-1});
+                            if (!this.cmbBulletFormat.store.findWhere({value: _BulletTypes.symbol, symbol: this.bulletProps.symbol, font: this.bulletProps.font}))
+                                this.cmbBulletFormat.store.add({ displayValue: this.txtSymbol + ': ', value: _BulletTypes.symbol, symbol: this.bulletProps.symbol, font: this.bulletProps.font }, {at: this.cmbBulletFormat.store.length-2});
                             this.cmbBulletFormat.setData(this.cmbBulletFormat.store.models);
-                            this.cmbBulletFormat.selectRecord(this.cmbBulletFormat.store.findWhere({value: 0, symbol: this.bulletProps.symbol, font: this.bulletProps.font}));
+                            this.cmbBulletFormat.selectRecord(this.cmbBulletFormat.store.findWhere({value: _BulletTypes.symbol, symbol: this.bulletProps.symbol, font: this.bulletProps.font}));
+                        } else
+                            this.cmbBulletFormat.setValue('');
+                        this._changedProps = bullet;
+                        type = 0;
+                    } else if (this.originalType == AscFormat.BULLET_TYPE_BULLET_BLIP) {
+                        var id = bullet.asc_getImageId();
+                        if (id) {
+                            this.imageProps = {id: id, redraw: true};
+                            if (!this.cmbBulletFormat.store.findWhere({value: _BulletTypes.image}))
+                                this.cmbBulletFormat.store.add({ displayValue: this.txtImage + ':', value: _BulletTypes.image}, {at: this.cmbBulletFormat.store.length-2});
+                            this.cmbBulletFormat.setData(this.cmbBulletFormat.store.models);
+                            this.cmbBulletFormat.selectRecord(this.cmbBulletFormat.store.findWhere({value: _BulletTypes.image}));
                         } else
                             this.cmbBulletFormat.setValue('');
                         this._changedProps = bullet;
@@ -458,7 +593,7 @@ define([
                     }
                 } else {// different bullet types
                     this.cmbNumFormat.setValue(-1);
-                    this.cmbBulletFormat.setValue(-1);
+                    this.cmbBulletFormat.setValue(_BulletTypes.none);
                     this._changedProps = new Asc.asc_CBullet();
                     type = this.type;
                 }
@@ -468,6 +603,26 @@ define([
             this.ShowHideElem(type);
         },
 
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
+                var me = this;
+                (new Common.Views.ImageFromUrlDialog({
+                    handler: function(result, value) {
+                        if (result == 'ok') {
+                            var checkUrl = value.replace(/ /g, '');
+                            if (!_.isEmpty(checkUrl)) {
+                                (new Asc.asc_CBullet()).asc_putImageUrl(checkUrl);
+                            }
+                        }
+                    }
+                })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'bullet');
+            } else {
+                (new Asc.asc_CBullet()).asc_showFileDialog();
+            }
+        },
+
         txtTitle: 'List Settings',
         txtSize: 'Size',
         txtColor: 'Color',
@@ -478,6 +633,13 @@ define([
         txtType: 'Type',
         txtNone: 'None',
         txtNewBullet: 'New bullet',
-        txtSymbol: 'Symbol'
+        txtSymbol: 'Symbol',
+        txtNewImage: 'New image',
+        txtImage: 'Image',
+        txtImport: 'Import',
+        textSelect: 'Select From',
+        textFromUrl: 'From URL',
+        textFromFile: 'From File',
+        textFromStorage: 'From Storage'
     }, Common.Views.ListSettingsDialog || {}))
 });

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

@@ -183,6 +183,8 @@ define([
 
             _options.tpl        =   _.template(this.template)(_options);
 
+            this._previewTdWidth = [];
+            this._previewTdMaxLength = 0;
             Common.UI.Window.prototype.initialize.call(this, _options);
         },
         render: function () {
@@ -203,6 +205,8 @@ define([
                     this.inputPwd = new Common.UI.InputFieldBtnPassword({
                         el: $('#id-password-txt'),
                         type: 'password',
+                        showCls: (this.options.iconType==='svg' ? 'svg-icon' : 'toolbar__icon') + ' btn-sheet-view',
+                        hideCls: (this.options.iconType==='svg' ? 'svg-icon' : 'toolbar__icon') + ' hide-password',
                         validateOnBlur: false,
                         showPwdOnClick: true,
                         validation  : function(value) {
@@ -417,6 +421,9 @@ define([
         },
 
         updatePreview: function() {
+            this._previewTdWidth = [];
+            this._previewTdMaxLength = 0;
+
             var encoding = (this.cmbEncoding && !this.cmbEncoding.isDisabled()) ? this.cmbEncoding.getValue() :
                 ((this.settings && this.settings.asc_getCodePage()) ? this.settings.asc_getCodePage() : 0);
             var delimiter = this.cmbDelimiter ? this.cmbDelimiter.getValue() : null,
@@ -484,17 +491,28 @@ define([
             if (this.type == Common.Utils.importTextType.CSV || this.type == Common.Utils.importTextType.Paste || this.type == Common.Utils.importTextType.Columns || this.type == Common.Utils.importTextType.Data) {
                 var maxlength = 0;
                 for (var i=0; i<data.length; i++) {
-                    if (data[i].length>maxlength)
-                        maxlength = data[i].length;
+                    var str = data[i] || '';
+                    if (str.length>maxlength)
+                        maxlength = str.length;
                 }
+                this._previewTdMaxLength = Math.max(this._previewTdMaxLength, maxlength);
                 var tpl = '<table>';
                 for (var i=0; i<data.length; i++) {
+                    var str = data[i] || '';
                     tpl += '<tr style="vertical-align: top;">';
-                    for (var j=0; j<data[i].length; j++) {
-                        tpl += '<td>' + Common.Utils.String.htmlEncode(data[i][j]) + '</td>';
+                    for (var j=0; j<str.length; j++) {
+                        var style = '';
+                        if (i==0 && this._previewTdWidth[j]) { // set td style only for first tr
+                            style = 'style="min-width:' + this._previewTdWidth[j] + 'px;"';
                         }
-                    for (j=data[i].length; j<maxlength; j++) {
-                        tpl += '<td></td>';
+                        tpl += '<td '+ style +'>' + Common.Utils.String.htmlEncode(str[j]) + '</td>';
+                    }
+                    for (j=str.length; j<this._previewTdMaxLength; j++) {
+                        var style = '';
+                        if (i==0 && this._previewTdWidth[j]) { // set td style only for first tr
+                            style = 'style="min-width:' + this._previewTdWidth[j] + 'px;"';
+                        }
+                        tpl += '<td '+ style +'></td>';
                     }
                     tpl += '</tr>';
                 }
@@ -502,12 +520,21 @@ define([
             } else {
                 var tpl = '<table>';
                 for (var i=0; i<data.length; i++) {
-                    tpl += '<tr style="vertical-align: top;"><td>' + Common.Utils.String.htmlEncode(data[i]) + '</td></tr>';
+                    var str = data[i] || '';
+                    tpl += '<tr style="vertical-align: top;"><td>' + Common.Utils.String.htmlEncode(str) + '</td></tr>';
                 }
                 tpl += '</table>';
             }
             this.previewPanel.html(tpl);
 
+            if (data.length>0) {
+                var me = this;
+                (this._previewTdWidth.length===0) && this.previewScrolled.scrollLeft(0);
+                this.previewPanel.find('tr:first td').each(function(index, el){
+                    me._previewTdWidth[index] = Math.max(Math.max(Math.ceil($(el).outerWidth()), 30), me._previewTdWidth[index] || 0);
+                });
+            }
+
             this.scrollerX = new Common.UI.Scroller({
                 el: this.previewPanel,
                 suppressScrollY: true,
@@ -518,7 +545,9 @@ define([
 
         onCmbDelimiterSelect: function(combo, record){
             this.inputDelimiter.setVisible(record.value == -1);
-            (record.value == -1) && this.inputDelimiter.cmpEl.find('input').focus();
+            var me = this;
+            if (record.value == -1)
+                setTimeout(function(){me.inputDelimiter.focus();}, 10);
             if (this.preview)
                 this.updatePreview();
         },

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

@@ -0,0 +1,216 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * 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
+ *
+*/
+/**
+ * User: Julia.Radzhabova
+ * Date: 17.05.16
+ * Time: 15:38
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+Common.Views = Common.Views || {};
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout',
+    'common/main/lib/component/Window'
+], function (template) {
+    'use strict';
+
+    Common.Views.PluginDlg = Common.UI.Window.extend(_.extend({
+        initialize : function(options) {
+            var _options = {};
+            _.extend(_options,  {
+                header: true,
+                enableKeyEvents: false
+            }, options);
+
+            var header_footer = (_options.buttons && _.size(_options.buttons)>0) ? 85 : 34;
+            if (!_options.header) header_footer -= 34;
+            this.bordersOffset = 40;
+            _options.width = (Common.Utils.innerWidth()-this.bordersOffset*2-_options.width)<0 ? Common.Utils.innerWidth()-this.bordersOffset*2: _options.width;
+            _options.height += header_footer;
+            _options.height = (Common.Utils.innerHeight()-this.bordersOffset*2-_options.height)<0 ? Common.Utils.innerHeight()-this.bordersOffset*2: _options.height;
+            _options.cls += ' advanced-settings-dlg';
+
+            this.template = [
+                '<div id="id-plugin-container" class="box" style="height:' + (_options.height-header_footer) + 'px;">',
+                '<div id="id-plugin-placeholder" style="width: 100%;height: 100%;"></div>',
+                '</div>',
+                '<% if ((typeof buttons !== "undefined") && _.size(buttons) > 0) { %>',
+                '<div class="separator horizontal"></div>',
+                '<% } %>'
+            ].join('');
+
+            _options.tpl = _.template(this.template)(_options);
+
+            this.url = options.url || '';
+            this.loader = (options.loader!==undefined) ? options.loader : true;
+            this.frameId = options.frameId || 'plugin_iframe';
+            Common.UI.Window.prototype.initialize.call(this, _options);
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+            this.$window.find('> .body').css({height: 'auto', overflow: 'hidden'});
+
+            this.boxEl = this.$window.find('.body > .box');
+            this._headerFooterHeight = (this.options.buttons && _.size(this.options.buttons)>0) ? 85 : 34;
+            if (!this.options.header) this._headerFooterHeight -= 34;
+            this._headerFooterHeight += ((parseInt(this.$window.css('border-top-width')) + parseInt(this.$window.css('border-bottom-width'))));
+
+            this.$window.find('.header').prepend($('<div class="tools left hidden"></div>'));
+
+            var iframe = document.createElement("iframe");
+            iframe.id           = this.frameId;
+            iframe.name         = 'pluginFrameEditor';
+            iframe.width        = '100%';
+            iframe.height       = '100%';
+            iframe.align        = "top";
+            iframe.frameBorder  = 0;
+            iframe.scrolling    = "no";
+            iframe.allow = "camera; microphone; display-capture";
+            iframe.onload       = _.bind(this._onLoad,this);
+
+            var me = this;
+            if (this.loader) {
+                setTimeout(function(){
+                    if (me.isLoaded) return;
+                    me.loadMask = new Common.UI.LoadMask({owner: $('#id-plugin-placeholder')});
+                    me.loadMask.setTitle(me.textLoading);
+                    me.loadMask.show();
+                    if (me.isLoaded) me.loadMask.hide();
+                }, 500);
+            }
+
+            iframe.src = this.url;
+            $('#id-plugin-placeholder').append(iframe);
+
+            this.on('resizing', function(args){
+                me.boxEl.css('height', parseInt(me.$window.css('height')) - me._headerFooterHeight);
+            });
+
+            var onMainWindowResize = function(){
+                me.onWindowResize();
+            };
+            $(window).on('resize', onMainWindowResize);
+            this.on('close', function() {
+                $(window).off('resize', onMainWindowResize);
+            });
+        },
+
+        _onLoad: function() {
+            this.isLoaded = true;
+            if (this.loadMask)
+                this.loadMask.hide();
+        },
+
+        setInnerSize: function(width, height) {
+            var maxHeight = Common.Utils.innerHeight(),
+                maxWidth = Common.Utils.innerWidth(),
+                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width'))),
+                bordersOffset = this.bordersOffset*2;
+            if (maxHeight - bordersOffset<height + this._headerFooterHeight)
+                height = maxHeight - bordersOffset - this._headerFooterHeight;
+            if (maxWidth - bordersOffset<width + borders_width)
+                width = maxWidth - bordersOffset - borders_width;
+
+            this.boxEl.css('height', height);
+
+            Common.UI.Window.prototype.setHeight.call(this, height + this._headerFooterHeight);
+            Common.UI.Window.prototype.setWidth.call(this, width + borders_width);
+
+            this.$window.css('left',(maxWidth - width - borders_width) / 2);
+            this.$window.css('top',(maxHeight - height - this._headerFooterHeight) / 2);
+        },
+
+        onWindowResize: function() {
+            var main_width  = Common.Utils.innerWidth(),
+                main_height = Common.Utils.innerHeight(),
+                win_width = this.getWidth(),
+                win_height = this.getHeight(),
+                bordersOffset = (this.resizable) ? 0 : this.bordersOffset;
+            if (win_height<main_height-bordersOffset*2+0.1 && win_width<main_width-bordersOffset*2+0.1) {
+                var left = this.getLeft(),
+                    top = this.getTop();
+
+                if (top<bordersOffset) this.$window.css('top', bordersOffset);
+                else if (top+win_height>main_height-bordersOffset)
+                    this.$window.css('top', main_height-bordersOffset - win_height);
+                if (left<bordersOffset) this.$window.css('left', bordersOffset);
+                else if (left+win_width>main_width-bordersOffset)
+                    this.$window.css('left', main_width-bordersOffset-win_width);
+            } else {
+                if (win_height>main_height-bordersOffset*2) {
+                    this.setHeight(Math.max(main_height-bordersOffset*2, this.initConfig.minheight));
+                    this.boxEl.css('height', Math.max(main_height-bordersOffset*2, this.initConfig.minheight) - this._headerFooterHeight);
+                    this.$window.css('top', bordersOffset);
+                }
+                if (win_width>main_width-bordersOffset*2) {
+                    this.setWidth(Math.max(main_width-bordersOffset*2, this.initConfig.minwidth));
+                    this.$window.css('left', bordersOffset);
+                }
+            }
+        },
+
+        showButton: function(id) {
+            var header = this.$window.find('.header .tools.left');
+            if (id=='back') {
+                var btn = header.find('#id-plugindlg-' + id);
+                if (btn.length<1) {
+                    btn = $('<div id="id-plugindlg-' + id + '" class="tool help" style="font-size:20px;">←</div>');
+                    btn.on('click', _.bind(function() {
+                        this.fireEvent('header:click',id);
+                    }, this));
+                    header.prepend(btn);
+                }
+                btn.show();
+                header.removeClass('hidden');
+            }
+        },
+
+        hideButton: function(id) {
+            var header = this.$window.find('.header .tools.left');
+            if (id=='back') {
+                var btn = header.find('#id-plugindlg-' + id);
+                if (btn.length>0) {
+                    btn.hide();
+                }
+            }
+        },
+
+        textLoading : 'Loading'
+    }, Common.Views.PluginDlg || {}));
+});

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

@@ -60,11 +60,11 @@ define([
                 '</div>',
             '</div>',
             '<div id="current-plugin-box" class="layout-ct vbox hidden">',
+                '<div id="current-plugin-frame" class="">',
+                '</div>',
                 '<div id="current-plugin-header">',
                     '<label></label>',
-                    '<div id="id-plugin-close" class="tool close"></div>',
-                '</div>',
-                '<div id="current-plugin-frame" class="">',
+                    '<div id="id-plugin-close" class="close"></div>',
                 '</div>',
             '</div>',
             '<div id="plugins-mask" style="display: none;">'
@@ -111,6 +111,13 @@ define([
             this.currentPluginPanel = $('#current-plugin-box');
             this.currentPluginFrame = $('#current-plugin-frame');
 
+            this.pluginClose = new Common.UI.Button({
+                parentEl: $('#id-plugin-close'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon btn-close',
+                hint: this.textClosePanel
+            });
+
             this.pluginMenu = new Common.UI.Menu({
                 menuAlign   : 'tr-br',
                 items: []
@@ -426,141 +433,8 @@ define([
         textLoading: 'Loading',
         textStart: 'Start',
         textStop: 'Stop',
-        groupCaption: 'Plugins'
+        groupCaption: 'Plugins',
+        textClosePanel: 'Close plugin'
 
     }, Common.Views.Plugins || {}));
-
-    Common.Views.PluginDlg = Common.UI.Window.extend(_.extend({
-        initialize : function(options) {
-            var _options = {};
-            _.extend(_options,  {
-                header: true,
-                enableKeyEvents: false
-            }, options);
-
-            var header_footer = (_options.buttons && _.size(_options.buttons)>0) ? 85 : 34;
-            if (!_options.header) header_footer -= 34;
-            this.bordersOffset = 40;
-            _options.width = (Common.Utils.innerWidth()-this.bordersOffset*2-_options.width)<0 ? Common.Utils.innerWidth()-this.bordersOffset*2: _options.width;
-            _options.height += header_footer;
-            _options.height = (Common.Utils.innerHeight()-this.bordersOffset*2-_options.height)<0 ? Common.Utils.innerHeight()-this.bordersOffset*2: _options.height;
-            _options.cls += ' advanced-settings-dlg';
-
-            this.template = [
-                '<div id="id-plugin-container" class="box" style="height:' + (_options.height-header_footer) + 'px;">',
-                    '<div id="id-plugin-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<% if ((typeof buttons !== "undefined") && _.size(buttons) > 0) { %>',
-                    '<div class="separator horizontal"></div>',
-                '<% } %>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.url = options.url || '';
-            this.frameId = options.frameId || 'plugin_iframe';
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-            this.$window.find('> .body').css({height: 'auto', overflow: 'hidden'});
-
-            this.boxEl = this.$window.find('.body > .box');
-            this._headerFooterHeight = (this.options.buttons && _.size(this.options.buttons)>0) ? 85 : 34;
-            if (!this.options.header) this._headerFooterHeight -= 34;
-            this._headerFooterHeight += ((parseInt(this.$window.css('border-top-width')) + parseInt(this.$window.css('border-bottom-width'))));
-
-            var iframe = document.createElement("iframe");
-            iframe.id           = this.frameId;
-            iframe.name         = 'pluginFrameEditor';
-            iframe.width        = '100%';
-            iframe.height       = '100%';
-            iframe.align        = "top";
-            iframe.frameBorder  = 0;
-            iframe.scrolling    = "no";
-            iframe.allow = "camera; microphone; display-capture";
-            iframe.onload       = _.bind(this._onLoad,this);
-
-            var me = this;
-            setTimeout(function(){
-                if (me.isLoaded) return;
-                me.loadMask = new Common.UI.LoadMask({owner: $('#id-plugin-placeholder')});
-                me.loadMask.setTitle(me.textLoading);
-                me.loadMask.show();
-                if (me.isLoaded) me.loadMask.hide();
-            }, 500);
-
-            iframe.src = this.url;
-            $('#id-plugin-placeholder').append(iframe);
-
-            this.on('resizing', function(args){
-                me.boxEl.css('height', parseInt(me.$window.css('height')) - me._headerFooterHeight);
-            });
-
-            var onMainWindowResize = function(){
-                me.onWindowResize();
-            };
-            $(window).on('resize', onMainWindowResize);
-            this.on('close', function() {
-                $(window).off('resize', onMainWindowResize);
-            });
-        },
-
-        _onLoad: function() {
-            this.isLoaded = true;
-            if (this.loadMask)
-                this.loadMask.hide();
-        },
-
-        setInnerSize: function(width, height) {
-            var maxHeight = Common.Utils.innerHeight(),
-                maxWidth = Common.Utils.innerWidth(),
-                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width'))),
-                bordersOffset = this.bordersOffset*2;
-            if (maxHeight - bordersOffset<height + this._headerFooterHeight)
-                height = maxHeight - bordersOffset - this._headerFooterHeight;
-            if (maxWidth - bordersOffset<width + borders_width)
-                width = maxWidth - bordersOffset - borders_width;
-
-            this.boxEl.css('height', height);
-
-            Common.UI.Window.prototype.setHeight.call(this, height + this._headerFooterHeight);
-            Common.UI.Window.prototype.setWidth.call(this, width + borders_width);
-
-            this.$window.css('left',(maxWidth - width - borders_width) / 2);
-            this.$window.css('top',(maxHeight - height - this._headerFooterHeight) / 2);
-        },
-
-        onWindowResize: function() {
-            var main_width  = Common.Utils.innerWidth(),
-                main_height = Common.Utils.innerHeight(),
-                win_width = this.getWidth(),
-                win_height = this.getHeight(),
-                bordersOffset = (this.resizable) ? 0 : this.bordersOffset;
-            if (win_height<main_height-bordersOffset*2+0.1 && win_width<main_width-bordersOffset*2+0.1) {
-                var left = this.getLeft(),
-                    top = this.getTop();
-
-                if (top<bordersOffset) this.$window.css('top', bordersOffset);
-                else if (top+win_height>main_height-bordersOffset)
-                    this.$window.css('top', main_height-bordersOffset - win_height);
-                if (left<bordersOffset) this.$window.css('left', bordersOffset);
-                else if (left+win_width>main_width-bordersOffset)
-                    this.$window.css('left', main_width-bordersOffset-win_width);
-            } else {
-                if (win_height>main_height-bordersOffset*2) {
-                    this.setHeight(Math.max(main_height-bordersOffset*2, this.initConfig.minheight));
-                    this.boxEl.css('height', Math.max(main_height-bordersOffset*2, this.initConfig.minheight) - this._headerFooterHeight);
-                    this.$window.css('top', bordersOffset);
-                }
-                if (win_width>main_width-bordersOffset*2) {
-                    this.setWidth(Math.max(main_width-bordersOffset*2, this.initConfig.minwidth));
-                    this.$window.css('left', bordersOffset);
-                }
-            }
-        },
-
-        textLoading : 'Loading'
-    }, Common.Views.PluginDlg || {}));
 });

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

@@ -54,6 +54,26 @@ define([
 ], function () {
     'use strict';
 
+    if (!Common.enumLock)
+        Common.enumLock = {};
+
+    var enumLock = {
+        noSpellcheckLangs: 'no-spellcheck-langs',
+        isReviewOnly:   'review-only',
+        reviewChangelock: 'review-change-lock',
+        hasCoeditingUsers: 'has-coediting-users',
+        previewReviewMode: 'preview-review-mode', // display mode on Collaboration tab
+        viewFormMode:   'view-form-mode', // view form mode on Forms tab
+        viewMode:       'view-mode', // view mode on disconnect, version history etc (used for locking buttons not in toolbar)
+        hideComments:   'hide-comments', // no live comments and left panel is closed
+        cantShare: 'cant-share'
+    };
+    for (var key in enumLock) {
+        if (enumLock.hasOwnProperty(key)) {
+            Common.enumLock[key] = enumLock[key];
+        }
+    }
+
     Common.Views.ReviewChanges = Common.UI.BaseView.extend(_.extend((function(){
         var template =
             '<section id="review-changes-panel" class="panel" data-tab="review">' +
@@ -229,44 +249,52 @@ define([
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
                 this.appConfig = options.mode;
+                this.lockedControls = [];
                 var filter = Common.localStorage.getKeysFilter();
                 this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
-
+                var _set = Common.enumLock;
                 if ( this.appConfig.canReview ) {
                     this.btnAccept = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtAccept,
                         split: !this.appConfig.canUseReviewPermissions,
                         iconCls: 'toolbar__icon btn-review-save',
+                        lock: [_set.reviewChangelock, _set.isReviewOnly, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect],
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnAccept);
 
                     this.btnReject = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtReject,
                         split: !this.appConfig.canUseReviewPermissions,
                         iconCls: 'toolbar__icon btn-review-deny',
+                        lock: [_set.reviewChangelock, _set.isReviewOnly, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect],
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnReject);
 
-                    if (this.appConfig.canFeatureComparison)
+                    if (this.appConfig.canFeatureComparison) {
                         this.btnCompare = new Common.UI.Button({
-                            cls         : 'btn-toolbar  x-huge icon-top',
-                            caption     : this.txtCompare,
-                            split       : true,
+                            cls: 'btn-toolbar  x-huge icon-top',
+                            caption: this.txtCompare,
+                            split: true,
                             iconCls: 'toolbar__icon btn-compare',
+                            lock: [_set.hasCoeditingUsers, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect],
                             dataHint: '1',
                             dataHintDirection: 'bottom',
                             dataHintOffset: 'small'
                         });
-
+                        this.lockedControls.push(this.btnCompare);
+                    }
                     this.btnTurnOn = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-review',
+                        lock: [_set.previewReviewMode, _set.viewFormMode, _set.lostConnect],
                         caption: this.txtTurnon,
                         split: !this.appConfig.isReviewOnly,
                         enableToggle: true,
@@ -275,25 +303,30 @@ define([
                         dataHintOffset: 'small'
                     });
                     this.btnsTurnReview = [this.btnTurnOn];
+                    this.lockedControls.push(this.btnTurnOn);
                 }
                 if (this.appConfig.canViewReview) {
                     this.btnPrev = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-review-prev',
+                        lock: [_set.previewReviewMode, _set.viewFormMode, _set.lostConnect],
                         caption: this.txtPrev,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnPrev);
 
                     this.btnNext = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-review-next',
+                        lock: [_set.previewReviewMode, _set.viewFormMode, _set.lostConnect],
                         caption: this.txtNext,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnNext);
 
                     if (!this.appConfig.isRestrictedEdit && !(this.appConfig.customization && this.appConfig.customization.review && this.appConfig.customization.review.hideReviewDisplay)) {// hide Display mode option for fillForms and commenting mode
                         var menuTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><%= caption %></div>' +
@@ -303,6 +336,7 @@ define([
                         this.btnReviewView = new Common.UI.Button({
                             cls: 'btn-toolbar x-huge icon-top',
                             iconCls: 'toolbar__icon btn-ic-reviewview',
+                            lock: [_set.viewFormMode, _set.lostConnect],
                             caption: this.txtView,
                             menu: new Common.UI.Menu({
                                 cls: 'ppm-toolbar',
@@ -349,6 +383,7 @@ define([
                             dataHintDirection: 'bottom',
                             dataHintOffset: 'small'
                         });
+                        this.lockedControls.push(this.btnReviewView);
                     }
                 }
 
@@ -356,23 +391,27 @@ define([
                     this.btnSharing = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-sharing',
+                        lock: [_set.viewFormMode, _set.cantShare, _set.lostConnect],
                         caption: this.txtSharing,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnSharing);
                 }
 
                 if (this.appConfig.isEdit && !this.appConfig.isOffline && this.appConfig.canCoAuthoring && this.appConfig.canChangeCoAuthoring) {
                     this.btnCoAuthMode = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-coedit',
+                        lock: [_set.viewFormMode, _set.lostConnect],
                         caption: this.txtCoAuthMode,
                         menu: true,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnCoAuthMode);
                 }
 
                 this.btnsSpelling = [];
@@ -382,23 +421,27 @@ define([
                     this.btnHistory = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-history',
+                        lock: [_set.lostConnect],
                         caption: this.txtHistory,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnHistory);
                 }
 
                 if (this.appConfig.canCoAuthoring && this.appConfig.canChat) {
                     this.btnChat = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-chat',
+                        lock: [_set.lostConnect],
                         caption: this.txtChat,
                         enableToggle: true,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnChat);
                 }
 
                 if ( this.appConfig.canCoAuthoring && this.appConfig.canComments ) {
@@ -407,19 +450,23 @@ define([
                         caption: this.txtCommentRemove,
                         split: true,
                         iconCls: 'toolbar__icon btn-rem-comment',
+                        lock: [_set.previewReviewMode, _set.viewFormMode, _set.hideComments, _set['Objects'], _set.lostConnect],
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnCommentRemove);
                     this.btnCommentResolve = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtCommentResolve,
                         split: true,
                         iconCls: 'toolbar__icon btn-resolve-all',
+                        lock: [_set.previewReviewMode, _set.viewFormMode, _set.hideComments, _set['Objects'], _set.lostConnect],
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: 'small'
                     });
+                    this.lockedControls.push(this.btnCommentResolve);
                 }
 
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
@@ -524,8 +571,7 @@ define([
                             me.btnCompare.updateHint(me.tipCompare);
                         }
 
-                        me.btnAccept.setDisabled(config.isReviewOnly);
-                        me.btnReject.setDisabled(config.isReviewOnly);
+                        Common.Utils.lockControls(Common.enumLock.isReviewOnly, config.isReviewOnly, {array: [me.btnAccept, me.btnReject]});
                     }
                     if (me.appConfig.canViewReview) {
                         me.btnPrev.updateHint(me.hintPrev);
@@ -685,6 +731,7 @@ define([
                     var button = new Common.UI.Button({
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-ic-review',
+                        lock: [Common.enumLock.viewMode, Common.enumLock.previewReviewMode, Common.enumLock.viewFormMode, Common.enumLock.lostConnect],
                         hintAnchor  : 'top',
                         hint        : this.tipReview,
                         split       : !this.appConfig.isReviewOnly,
@@ -724,13 +771,14 @@ define([
                     });
 
                     this.btnsTurnReview.push(button);
-
+                    this.lockedControls.push(button);
                     return button;
                 } else
                 if ( type == 'spelling' ) {
                     button = new Common.UI.Button({
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-ic-docspell',
+                        lock: [Common.enumLock.viewMode,  Common.enumLock.viewFormMode, Common.enumLock.previewReviewMode],
                         hintAnchor  : 'top',
                         hint: this.tipSetSpelling,
                         enableToggle: true,
@@ -740,25 +788,30 @@ define([
                         visible:  Common.UI.FeaturesManager.canChange('spellcheck')
                     });
                     this.btnsSpelling.push(button);
-
+                    this.lockedControls.push(button);
                     return button;
                 } else if (type == 'doclang' && parent == 'statusbar' ) {
                     button = new Common.UI.Button({
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-ic-doclang',
+                        lock: [Common.enumLock.viewMode, Common.enumLock.previewReviewMode, Common.enumLock.viewFormMode, Common.enumLock.noSpellcheckLangs, Common.enumLock.lostConnect],
                         hintAnchor  : 'top',
                         hint: this.tipSetDocLang,
-                        disabled: true,
                         dataHint: '0',
                         dataHintDirection: 'top',
                         dataHintOffset: 'small'
                     });
                     this.btnsDocLang.push(button);
-
+                    this.lockedControls.push(button);
+                    Common.Utils.lockControls(Common.enumLock.noSpellcheckLangs, true, {array: [button]});
                     return button;
                 }
             },
 
+            getButtons: function() {
+                return this.lockedControls;
+            },
+
             getUserName: function (username) {
                 return Common.Utils.String.htmlEncode(AscCommon.UserInfoParser.getParsedName(username));
             },
@@ -814,34 +867,8 @@ define([
                 }
             },
 
-            SetDisabled: function (state, langs, protectProps) {
-                this.btnsSpelling && this.btnsSpelling.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(state);
-                    }
-                }, this);
-                this.btnsDocLang && this.btnsDocLang.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(state || langs && langs.length<1);
-                    }
-                }, this);
-                this.btnsTurnReview && this.btnsTurnReview.forEach(function(button) {
-                    if ( button ) {
-                        button.setDisabled(state);
-                    }
-                }, this);
-                // this.btnChat && this.btnChat.setDisabled(state);
-
-                this.btnCommentRemove && this.btnCommentRemove.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment") || protectProps && protectProps.comments);
-                this.btnCommentResolve && this.btnCommentResolve.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment") || protectProps && protectProps.comments);
-            },
-
             onLostEditRights: function() {
                 this._readonlyRights = true;
-                if (!this.rendered)
-                    return;
-
-                 this.btnSharing && this.btnSharing.setDisabled(true);
             },
 
             txtAccept: 'Accept',
@@ -947,6 +974,9 @@ define([
             this.popoverChanges = this.options.popoverChanges;
             this.mode = this.options.mode;
 
+            var filter = Common.localStorage.getKeysFilter();
+            this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
+
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
 
@@ -973,7 +1003,7 @@ define([
                 cls         : 'btn-toolbar',
                 caption     : this.txtAccept,
                 split       : true,
-                disabled    : this.mode.isReviewOnly,
+                disabled    : this.mode.isReviewOnly || !!Common.Utils.InternalSettings.get(this.appPrefix + "accept-reject-lock"),
                 menu        : this.mode.canUseReviewPermissions ? false : new Common.UI.Menu({
                     items: [
                         this.mnuAcceptCurrent = new Common.UI.MenuItem({
@@ -993,7 +1023,7 @@ define([
                 cls         : 'btn-toolbar',
                 caption     : this.txtReject,
                 split       : true,
-                disabled    : this.mode.isReviewOnly,
+                disabled    : this.mode.isReviewOnly || !!Common.Utils.InternalSettings.get(this.appPrefix + "accept-reject-lock"),
                 menu        : this.mode.canUseReviewPermissions ? false : new Common.UI.Menu({
                     items: [
                         this.mnuRejectCurrent = new Common.UI.MenuItem({

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

@@ -0,0 +1,201 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * 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
+ *
+*/
+/**
+ *    SearchBar.js
+ *
+ *    Created by Julia Svinareva on 03.02.2022
+ *    Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window',
+    'common/main/lib/component/Button'
+], function () {
+    'use strict';
+
+    Common.UI.SearchBar = Common.UI.Window.extend(_.extend({
+        options: {
+            modal: false,
+            width: 328,
+            height: 54,
+            header: false,
+            cls: 'search-bar',
+            alias: 'SearchBar',
+            showOpenPanel: true,
+            toolclose: 'hide'
+        },
+
+        initialize : function(options) {
+            _.extend(this.options, options || {});
+
+            this.template = [
+                '<div class="box">',
+                    '<input type="text" id="search-bar-text" class="input-field form-control" maxlength="255" placeholder="'+this.textFind+'" autocomplete="off">',
+                    '<div class="tools">',
+                        '<div id="search-bar-back"></div>',
+                        '<div id="search-bar-next"></div>',
+                        this.options.showOpenPanel ? '<div id="search-bar-open-panel"></div>' : '',
+                        '<div id="search-bar-close"></div>',
+                    '</div>',
+                '</div>'
+            ].join('');
+
+            this.options.tpl = _.template(this.template)(this.options);
+            this.iconType = this.options.iconType;
+
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+
+            Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
+            $(window).on('resize', _.bind(this.onLayoutChanged, this));
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+
+            this.inputSearch = this.$window.find('#search-bar-text');
+            this.inputSearch.on('input', _.bind(function () {
+                this.disableNavButtons();
+                this.fireEvent('search:input', [this.inputSearch.val()]);
+            }, this)).on('keydown', _.bind(function (e) {
+                this.fireEvent('search:keydown', [this.inputSearch.val(), e]);
+            }, this));
+
+            this.btnBack = new Common.UI.Button({
+                parentEl: $('#search-bar-back'),
+                cls: 'btn-toolbar',
+                iconCls: this.iconType === 'svg' ? 'svg-icon search-arrow-up' : 'toolbar__icon btn-arrow-up',
+                hint: this.tipPreviousResult
+            });
+            this.btnBack.on('click', _.bind(this.onBtnNextClick, this, 'back'));
+
+            this.btnNext = new Common.UI.Button({
+                parentEl: $('#search-bar-next'),
+                cls: 'btn-toolbar',
+                iconCls: this.iconType === 'svg' ? 'svg-icon search-arrow-down' : 'toolbar__icon btn-arrow-down',
+                hint: this.tipNextResult
+            });
+            this.btnNext.on('click', _.bind(this.onBtnNextClick, this, 'next'));
+
+            if (this.options.showOpenPanel) {
+                this.btnOpenPanel = new Common.UI.Button({
+                    parentEl: $('#search-bar-open-panel'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon more-vertical',
+                    hint: this.tipOpenAdvancedSettings
+                });
+                this.btnOpenPanel.on('click', _.bind(this.onOpenPanel, this));
+            }
+
+            this.btnClose = new Common.UI.Button({
+                parentEl: $('#search-bar-close'),
+                cls: 'btn-toolbar',
+                iconCls: this.iconType === 'svg' ? 'svg-icon search-close' : 'toolbar__icon btn-close',
+                hint: this.tipCloseSearch
+            });
+            this.btnClose.on('click', _.bind(function () {
+                this.hide();
+            }, this))
+
+            this.on('animate:before', _.bind(this.focus, this));
+
+            Common.NotificationCenter.on('search:updateresults', _.bind(this.disableNavButtons, this));
+
+            return this;
+        },
+
+        show: function(text) {
+            var top = ($('#app-title').length > 0 ? $('#app-title').height() : 0) + $('#toolbar').height() + 2,
+                left = Common.Utils.innerWidth() - ($('#right-menu').is(':visible') ? $('#right-menu').width() : 0) - this.options.width - 32;
+            Common.UI.Window.prototype.show.call(this, left, top);
+
+            this.disableNavButtons();
+            if (text) {
+                this.inputSearch.val(text);
+                this.fireEvent('search:input', [text]);
+            } else {
+                this.inputSearch.val('');
+                window.SSE && this.fireEvent('search:input', ['', true]);
+            }
+
+            this.focus();
+        },
+
+        focus: function() {
+            var me  = this;
+            setTimeout(function(){
+                me.inputSearch.focus();
+                me.inputSearch.select();
+            }, 10);
+        },
+
+        setText: function (text) {
+            this.inputSearch.val(text);
+            this.fireEvent('search:input', [text]);
+        },
+
+        getSettings: function() {
+            return {
+
+            };
+        },
+
+        onLayoutChanged: function () {
+            var top = $('#app-title').height() + $('#toolbar').height() + 2,
+                left = Common.Utils.innerWidth() - ($('#right-menu').is(':visible') ? $('#right-menu').width() : 0) - this.options.width - 32;
+            this.$window.css({left: left, top: top});
+        },
+
+        onBtnNextClick: function(action) {
+            this.fireEvent('search:'+action, [this.inputSearch.val(), false]);
+        },
+
+        onOpenPanel: function () {
+            this.hide();
+            this.fireEvent('search:show', [true, this.inputSearch.val()]);
+        },
+
+        disableNavButtons: function (resultNumber, allResults) {
+            var disable = (this.inputSearch.val() === '' && !window.SSE) || !allResults;
+            this.btnBack.setDisabled(disable);
+            this.btnNext.setDisabled(disable);
+        },
+
+        textFind: 'Find',
+        tipPreviousResult: 'Previous result',
+        tipNextResult: 'Next result',
+        tipOpenAdvancedSettings: 'Open advanced settings',
+        tipCloseSearch: 'Close search'
+
+    }, Common.UI.SearchBar || {}));
+});

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

@@ -171,7 +171,7 @@
             this.txtSearch.on('keydown', null, 'search', _.bind(this.onKeyPress, this));
             this.txtReplace.on('keydown', null, 'replace', _.bind(this.onKeyPress, this));
 
-            this.on('animate:before', _.bind(this.focus, this));
+            this.on('animate:before', _.bind(this.onAnimateBefore, this));
 
             return this;
         },
@@ -191,14 +191,18 @@
             this.focus();
         },
 
-        focus: function() {
-            var me  = this;
+        focus: function(type) {
+            var field = (type==='replace') ? this.txtReplace : this.txtSearch;
             setTimeout(function(){
-                me.txtSearch.focus();
-                me.txtSearch.select();
+                field.focus();
+                field.select();
             }, 10);
         },
 
+        onAnimateBefore: function() {
+            this.focus();
+        },
+
         onKeyPress: function(event) {
             if (!this.isLocked()) {
                 if (event.keyCode == Common.UI.Keys.RETURN) {

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

@@ -0,0 +1,445 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * 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
+ *
+*/
+/**
+ * User: Julia.Svinareva
+ * Date: 11.02.2022
+ */
+
+define([
+    'text!common/main/lib/template/SearchPanel.template',
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout'
+], function (template) {
+    'use strict';
+
+    Common.Views.SearchPanel = Common.UI.BaseView.extend(_.extend({
+        el: '#left-panel-search',
+        template: _.template(template),
+
+        initialize: function(options) {
+            _.extend(this, options);
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+
+            this.mode = false;
+
+            window.SSE && (this.extendedOptions = Common.localStorage.getBool('sse-search-options-extended', true));
+        },
+
+        render: function(el) {
+            var me = this;
+            if (!this.rendered) {
+                el = el || this.el;
+                $(el).html(this.template({
+                    scope: this
+                }));
+                this.$el = $(el);
+
+                this.inputText = new Common.UI.InputField({
+                    el: $('#search-adv-text'),
+                    placeHolder: this.textFind,
+                    allowBlank: true,
+                    validateOnBlur: false,
+                    style: 'width: 100%;',
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.inputText._input.on('input', _.bind(function () {
+                    this.fireEvent('search:input', [this.inputText._input.val()]);
+                }, this)).on('keydown', _.bind(function (e) {
+                    this.fireEvent('search:keydown', [this.inputText._input.val(), e]);
+                }, this));
+
+                this.inputReplace = new Common.UI.InputField({
+                    el: $('#search-adv-replace-text'),
+                    placeHolder: this.textReplaceWith,
+                    allowBlank: true,
+                    validateOnBlur: false,
+                    style: 'width: 100%;',
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.inputReplace._input.on('keydown', _.bind(function (e) {
+                    if (e.keyCode === Common.UI.Keys.RETURN && !this.btnReplace.isDisabled()) {
+                        this.onReplaceClick('replace');
+                    }
+                }, this));
+
+                this.btnBack = new Common.UI.Button({
+                    parentEl: $('#search-adv-back'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-arrow-up',
+                    hint: this.tipPreviousResult,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
+                });
+                this.btnBack.on('click', _.bind(this.onBtnNextClick, this, 'back'));
+
+                this.btnNext = new Common.UI.Button({
+                    parentEl: $('#search-adv-next'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-arrow-down',
+                    hint: this.tipNextResult,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
+                });
+                this.btnNext.on('click', _.bind(this.onBtnNextClick, this, 'next'));
+
+                this.btnReplace = new Common.UI.Button({
+                    el: $('#search-adv-replace')
+                });
+                this.btnReplace.on('click', _.bind(this.onReplaceClick, this, 'replace'));
+
+                this.btnReplaceAll = new Common.UI.Button({
+                    el: $('#search-adv-replace-all')
+                });
+                this.btnReplaceAll.on('click', _.bind(this.onReplaceClick, this, 'replaceall'));
+
+                this.$reaultsNumber = $('#search-adv-results-number');
+                this.updateResultsNumber('no-results');
+
+                this.chCaseSensitive = new Common.UI.CheckBox({
+                    el: $('#search-adv-case-sensitive'),
+                    labelText: this.textCaseSensitive,
+                    value: false,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                }).on('change', function(field) {
+                    me.fireEvent('search:options', ['case-sensitive', field.getValue() === 'checked']);
+                });
+
+                /*this.chUseRegExp = new Common.UI.CheckBox({
+                    el: $('#search-adv-use-regexp'),
+                    labelText: this.textMatchUsingRegExp,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                }).on('change', function(field) {
+                    me.fireEvent('search:options', ['regexp', field.getValue() === 'checked']);
+                });*/
+
+                this.chMatchWord = new Common.UI.CheckBox({
+                    el: $('#search-adv-match-word'),
+                    labelText: window.SSE ? this.textItemEntireCell : this.textWholeWords,
+                    value: false,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                }).on('change', function(field) {
+                    me.fireEvent('search:options', ['match-word', field.getValue() === 'checked']);
+                });
+
+                this.buttonClose = new Common.UI.Button({
+                    parentEl: $('#search-btn-close', this.$el),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-close',
+                    hint: this.textCloseSearch,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'medium'
+                });
+                this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
+
+                this.$resultsContainer = $('#search-results');
+                this.$resultsContainer.hide();
+
+                Common.NotificationCenter.on('search:updateresults', _.bind(this.disableNavButtons, this));
+                if (window.SSE) {
+                    this.cmbWithin = new Common.UI.ComboBox({
+                        el: $('#search-adv-cmb-within'),
+                        menuStyle: 'min-width: 100%;',
+                        style: "width: 219px;",
+                        editable: false,
+                        cls: 'input-group-nr',
+                        data: [
+                            { value: 0, displayValue: this.textSheet },
+                            { value: 1, displayValue: this.textWorkbook },
+                            { value: 2, displayValue: this.textSpecificRange}
+                        ],
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'big'
+                    }).on('selected', function(combo, record) {
+                        me.fireEvent('search:options', ['within', record.value]);
+                    });
+
+                    this.inputSelectRange = new Common.UI.InputFieldBtn({
+                        el: $('#search-adv-select-range'),
+                        placeHolder: this.textSelectDataRange,
+                        allowBlank: true,
+                        validateOnChange: true,
+                        validateOnBlur: true,
+                        style: "width: 219px; margin-top: 8px",
+                        disabled: true,
+                        dataHint: '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    }).on('keyup:after', function(input, e) {
+                        me.fireEvent('search:options', ['range', input.getValue(), e.keyCode !== Common.UI.Keys.RETURN]);
+                    });
+                    this.inputSelectRange.$el.hide();
+
+                    this.cmbSearch = new Common.UI.ComboBox({
+                        el: $('#search-adv-cmb-search'),
+                        menuStyle: 'min-width: 100%;',
+                        style: "width: 219px;",
+                        editable: false,
+                        cls: 'input-group-nr',
+                        data: [
+                            { value: 0, displayValue: this.textByRows },
+                            { value: 1, displayValue: this.textByColumns }
+                        ],
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'big'
+                    }).on('selected', function(combo, record) {
+                        me.fireEvent('search:options', ['search', !record.value]);
+                    });
+
+                    this.cmbLookIn = new Common.UI.ComboBox({
+                        el: $('#search-adv-cmb-look-in'),
+                        menuStyle: 'min-width: 100%;',
+                        style: "width: 219px;",
+                        editable: false,
+                        cls: 'input-group-nr',
+                        data: [
+                            { value: 0, displayValue: this.textFormulas },
+                            { value: 1, displayValue: this.textValues }
+                        ],
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'big'
+                    }).on('selected', function(combo, record) {
+                        me.fireEvent('search:options', ['lookIn', !record.value]);
+                    });
+
+                    this.$searchOptionsBlock = $('.search-options-block');
+                    this.$searchOptionsBlock.show();
+                    $('#open-search-options').on('click', _.bind(this.expandSearchOptions, this));
+
+                    if (!this.extendedOptions) {
+                        this.$searchOptionsBlock.addClass('no-expand');
+                    }
+
+                    this.cmbWithin.setValue(0);
+                    this.cmbSearch.setValue(0);
+                    this.cmbLookIn.setValue(0);
+
+                    var tableTemplate = '<div class="search-table">' +
+                        '<div class="header-items">' +
+                        '<div class="header-item">' + this.textSheet + '</div>' +
+                        '<div class="header-item">' + this.textName + '</div>' +
+                        '<div class="header-item">' + this.textCell + '</div>' +
+                        '<div class="header-item">' + this.textValue + '</div>' +
+                        '<div class="header-item">' + this.textFormula + '</div>' +
+                        '</div>' +
+                        '<div class="ps-container oo search-items"></div>' +
+                        '</div>',
+                        $resultTable = $(tableTemplate).appendTo(this.$resultsContainer);
+                    this.$resultsContainer.scroller = new Common.UI.Scroller({
+                        el: $resultTable.find('.search-items'),
+                        includePadding: true,
+                        useKeyboard: true,
+                        minScrollbarLength: 40,
+                        alwaysVisibleY: true
+                    });
+                } else {
+                    this.$resultsContainer.scroller = new Common.UI.Scroller({
+                        el: this.$resultsContainer,
+                        includePadding: true,
+                        useKeyboard: true,
+                        minScrollbarLength: 40,
+                        alwaysVisibleY: true
+                    });
+                }
+                Common.NotificationCenter.on('window:resize', function() {
+                    me.updateResultsContainerHeight();
+                });
+            }
+
+            this.rendered = true;
+            this.trigger('render:after', this);
+            return this;
+        },
+
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+            this.fireEvent('show', this );
+
+            this.updateResultsContainerHeight();
+        },
+
+        hide: function () {
+            Common.UI.BaseView.prototype.hide.call(this,arguments);
+            this.fireEvent('hide', this );
+        },
+
+        focus: function(type) {
+            var me  = this,
+                el = type === 'replace' ? me.inputReplace.$el : (type === 'range' ? me.inputSelectRange.$el : me.inputText.$el);
+            setTimeout(function(){
+                el.find('input').focus();
+                el.find('input').select();
+            }, 10);
+        },
+
+        setSearchMode: function (mode) {
+            if (this.mode !== mode) {
+                this.$el.find('.edit-setting')[mode !== 'no-replace' ? 'show' : 'hide']();
+                this.$el.find('#search-adv-title').text(mode !== 'no-replace' ? this.textFindAndReplace : this.textFind);
+                this.mode = mode;
+            }
+        },
+
+        ChangeSettings: function(props) {
+        },
+
+        updateResultsContainerHeight: function () {
+            if (this.$resultsContainer) {
+                this.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
+                this.$resultsContainer.scroller.update({alwaysVisibleY: true});
+            }
+        },
+
+        updateResultsNumber: function (current, count) {
+            var text;
+            if (count > 300) {
+                text = this.textTooManyResults;
+            } else {
+                text = current === 'no-results' ? this.textNoSearchResults :
+                    (current === 'stop' ? this.textSearchHasStopped :
+                    (current === 'content-changed' ? (this.textContentChanged + ' ' + Common.Utils.String.format(this.textSearchAgain, '<a class="search-again">','</a>')) :
+                    (!count ? this.textNoMatches : Common.Utils.String.format(this.textSearchResults, current + 1, count))));
+            }
+            if (current === 'content-changed') {
+                var me = this;
+                this.$reaultsNumber.html(text);
+                this.$reaultsNumber.find('.search-again').on('click', function () {
+                    me.fireEvent('search:next', [me.inputText.getValue(), true]);
+                });
+            } else {
+                this.$reaultsNumber.text(text);
+            }
+            this.updateResultsContainerHeight();
+            !window.SSE && this.disableReplaceButtons(!count);
+        },
+
+        onClickClosePanel: function() {
+            Common.NotificationCenter.trigger('leftmenu:change', 'hide');
+            this.fireEvent('hide', this );
+        },
+
+        onBtnNextClick: function (action) {
+            this.fireEvent('search:'+action, [this.inputText.getValue(), true]);
+        },
+
+        onReplaceClick: function (action) {
+            this.fireEvent('search:'+action, [this.inputText.getValue(), this.inputReplace.getValue()]);
+        },
+
+        getSettings: function() {
+            return {
+                textsearch: this.inputText.getValue(),
+                matchcase: this.chCaseSensitive.checked,
+                matchword: this.chMatchWord.checked
+            };
+        },
+
+        expandSearchOptions: function () {
+            this.extendedOptions = !this.extendedOptions;
+            this.$searchOptionsBlock[this.extendedOptions ? 'removeClass' : 'addClass']('no-expand');
+            Common.localStorage.setBool('sse-search-options-extended', this.extendedOptions);
+
+            this.updateResultsContainerHeight();
+        },
+
+        setFindText: function (val) {
+            this.inputText.setValue(val);
+        },
+
+        clearResultsNumber: function () {
+            this.updateResultsNumber('no-results');
+        },
+
+        disableNavButtons: function (resultNumber, allResults) {
+            var disable = (this.inputText._input.val() === '' && !window.SSE) || !allResults;
+            this.btnBack.setDisabled(disable);
+            this.btnNext.setDisabled(disable);
+        },
+
+        disableReplaceButtons: function (disable) {
+            this.btnReplace.setDisabled(disable);
+            this.btnReplaceAll.setDisabled(disable);
+        },
+
+        textFind: 'Find',
+        textFindAndReplace: 'Find and replace',
+        textCloseSearch: 'Close search',
+        textReplace: 'Replace',
+        textReplaceAll: 'Replace All',
+        textSearchResults: 'Search results: {0}/{1}',
+        textReplaceWith: 'Replace with',
+        textCaseSensitive: 'Case sensitive',
+        textMatchUsingRegExp: 'Match using regular expressions',
+        textWholeWords: 'Whole words only',
+        textWithin: 'Within',
+        textSelectDataRange: 'Select Data range',
+        textSearch: 'Search',
+        textLookIn: 'Look in',
+        textSheet: 'Sheet',
+        textWorkbook: 'Workbook',
+        textSpecificRange: 'Specific range',
+        textByRows: 'By rows',
+        textByColumns: 'By columns',
+        textFormulas: 'Formulas',
+        textValues: 'Values',
+        textSearchOptions: 'Search options',
+        textNoMatches: 'No matches',
+        textNoSearchResults: 'No search results',
+        textItemEntireCell: 'Entire cell contents',
+        textTooManyResults: 'There are too many results to show here',
+        tipPreviousResult: 'Previous result',
+        tipNextResult: 'Next result',
+        textName: 'Name',
+        textCell: 'Cell',
+        textValue: 'Value',
+        textFormula: 'Formula',
+        textSearchHasStopped: 'Search has stopped',
+        textContentChanged: 'Document changed.',
+        textSearchAgain: '{0}Perform new search{1} for accurate results.'
+
+    }, Common.Views.SearchPanel || {}));
+});

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

@@ -430,7 +430,7 @@ define([
                         '<table cols="1" style="width: 100%;">',
                             '<tr>',
                                 '<td style="padding-bottom: 16px;">',
-                                    '<div id="symbol-table-scrollable-div" style="position: relative;height:'+ (this.options.height-302 + 38*(this.special ? 0 : 1)) + 'px;">',
+                                    '<div id="symbol-table-scrollable-div" style="position: relative;height:'+ (this.options.height-304 + 38*(this.special ? 0 : 1)) + 'px;">',
                                         '<div style="width: 100%;">',
                                             '<div id="id-preview">',
                                                 '<div>',
@@ -476,7 +476,7 @@ define([
                             '</tr>',
                             '<tr>',
                                 '<td>',
-                                    '<div id="symbol-table-special-list" class="no-borders" style="width:100%; height: '+ (this.options.height-156 + 38*(this.special ? 0 : 1)) + 'px;"></div>',
+                                    '<div id="symbol-table-special-list" class="no-borders" style="width:100%; height: '+ (this.options.height-157 + 38*(this.special ? 0 : 1)) + 'px;"></div>',
                                 '</td>',
                             '</tr>',
                         '</table>',
@@ -1104,7 +1104,7 @@ define([
         },
 
         getMaxHeight: function(){
-            return this.symbolTablePanel.innerHeight();
+            return this.symbolTablePanel.innerHeight()-2;
         },
 
         getRowsCount: function() {
@@ -1436,8 +1436,8 @@ define([
                 this.curSize = {resize: false, width: size[0], height: size[1]};
             } else if (this.curSize.resize) {
                 this._preventUpdateScroll = false;
-                this.curSize.height = size[1] - 302 + 38*(this.special ? 0 : 1);
-                var rows = Math.max(1, ((this.curSize.height/CELL_HEIGHT) >> 0)),
+                this.curSize.height = size[1] - 304 + 38*(this.special ? 0 : 1);
+                var rows = Math.max(1, (((this.curSize.height-2)/CELL_HEIGHT) >> 0)),
                     height = rows*CELL_HEIGHT;
 
                 this.symbolTablePanel.css({'height': this.curSize.height + 'px'});
@@ -1447,7 +1447,7 @@ define([
 
                 this.updateView(undefined, undefined, undefined, true);
 
-                this.specialList.cmpEl.height(size[1] - 156 + 38*(this.special ? 0 : 1));
+                this.specialList.cmpEl.height(size[1] - 157 + 38*(this.special ? 0 : 1));
 
                 !this.special && (size[1] += 38);
                 var valJson = JSON.stringify(size);
@@ -1465,16 +1465,16 @@ define([
                     this.curSize.resize = true;
 
                 this.curSize.width = size[0];
-                this.curSize.height = size[1] - 302 + 38*(this.special ? 0 : 1);
+                this.curSize.height = size[1] - 304 + 38*(this.special ? 0 : 1);
 
-                var rows = Math.max(1, ((this.curSize.height/CELL_HEIGHT) >> 0)),
+                var rows = Math.max(1, (((this.curSize.height-2)/CELL_HEIGHT) >> 0)),
                     height = rows*CELL_HEIGHT;
 
                 this.symbolTablePanel.css({'height': this.curSize.height + 'px'});
                 this.previewPanel.css({'height': height  + 'px'});
                 this.previewScrolled.css({'height': height + 'px'});
 
-                this.specialList.cmpEl.height(size[1] - 156 + 38*(this.special ? 0 : 1));
+                this.specialList.cmpEl.height(size[1] - 157 + 38*(this.special ? 0 : 1));
 
                 this.updateView(undefined, undefined, undefined, true);
             }

apps/common/main/resources/alphabetletters/alphabetletters.json

@@ -1,4 +1,4 @@
 {
   "en": ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
-  "ru": ["а", "б", "в", "г", "д", "е", "ё", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "э", "ю", "я"]
+  "ru": ["а", "б", "в", "г", "д", "е", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "э", "ю", "я"]
 }

apps/common/main/resources/alphabetletters/qwertyletters.json

@@ -1,5 +1,5 @@
 {
-  "en": ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "z", "x", "c", "v",	"b", "n", "m"],
+  "en": ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "z", "x", "c", "v",	"b", "n", "m", ",", "."],
   "ru": ["й", "ц", "у", "к", "е", "н", "г",	"ш", "щ", "з", "х",	"ъ", "ф", "ы", "в",	"а", "п", "р", "о",	"л", "д", "ж", "э",	"я", "ч", "с", "м",	"и", "т", "ь", "б",	"ю"],
   "de": ["q", "w", "e",	"r", "t", "z", "u",	"i", "o", "p", "ü",	"a", "s", "d", "f",	"g", "h", "j", "k",	"l", "ö", "ä", "z", "x", "c", "v", "b",	"n", "m"],
   "fr": ["a", "z", "e",	"r", "t", "y", "u",	"i", "o", "p", "q",	"s", "d", "f", "g",	"h", "j", "k", "l",	"m", "w", "x", "c",	"v", "b", "n"]