init repo

OfficeWeb/apps/api/documents/api.js

@@ -0,0 +1,421 @@
+/**
+* Copyright (c) Ascensio System SIA 2013. All rights reserved
+*
+* http://www.onlyoffice.com
+*/
+
+;(function(DocsAPI, window, document, undefined) {
+
+    /*
+
+        # Full #
+
+        config = {
+            type: 'desktop or mobile',
+            width: '100% by default',
+            height: '100% by default',
+            documentType: 'text' | 'spreadsheet' | 'presentation',
+            document: {
+                title: 'document title',
+                url: 'document url'
+                fileType: 'document file type',
+                options: <advanced options>,
+                key: 'key',
+                vkey: 'vkey',
+                info: {
+                    author: 'author name',
+                    folder: 'path to document',
+                    created: <creation date>,
+                    sharingSettings: [
+                        {
+                            user: 'user name',
+                            permissions: <permissions>
+                        },
+                        ...
+                    ]
+                },
+                permissions: {
+                    edit: <can edit>,
+                    download: <can download>,
+                    reader: <can view in readable mode>
+                }
+            },
+            editorConfig: {
+                mode: 'view or edit',
+                lang: <language code>,
+                canCoAuthoring: <can coauthoring documents>,
+                canAutosave: <can autosave documents>,
+                canBackToFolder: <can return to folder>,
+                createUrl: 'create document url', // editor will add '?title={document title}&template={template name}&action=create', prevent to create a new document if empty
+                sharingSettingsUrl: 'document sharing settings url',
+                user: {
+                    id: 'user id',
+                    name: 'full user name'
+                },
+                recent: [
+                    {
+                        title: 'document title',
+                        url: 'document url',
+                        folder: 'path to document'
+                    },
+                    ...
+                ],
+                templates: [
+                    {
+                        name: 'template name',
+                        icon: 'template icon url'
+                    },
+                    ...
+                ],
+                branding: {
+                    logoUrl: 'header logo url', // default size 88 x 30
+                    backgroundColor: 'header background color',
+                    textColor: 'header text color'
+                }
+            },
+            events: {
+                'onReady': <document ready callback>,
+                'onBack': <back to folder callback>,
+                'onDocumentStateChange': <document state changed callback>,
+                'onSave': <save request callback>
+            }
+        }
+
+        # Embedded #
+
+        config = {
+            type: 'embedded',
+            width: '100% by default',
+            height: '100% by default',
+            documentType: 'text' | 'spreadsheet' | 'presentation',
+            document: {
+                title: 'document title',
+                url: 'document url',
+                fileType: 'document file type',
+                key: 'key',
+                vkey: 'vkey'
+            },
+            editorConfig: {
+                embedded: {
+                     embedUrl: 'url',
+                     fullscreenUrl: 'url',
+                     saveUrl: 'url',
+                     shareUrl: 'url',
+                     toolbarDocked: 'top or bottom'
+                }
+            },
+            events: {
+                'onReady': <document ready callback>,
+                'onBack': <back to folder callback>,
+                'onError': <error callback>,
+            }
+        }
+    */
+
+    // TODO: allow several instances on one page simultaneously
+
+    DocsAPI.DocEditor = function(placeholderId, config) {
+        var _self = this,
+            _config = config || {};
+
+        extend(_config, DocsAPI.DocEditor.defaultConfig);
+
+        var _onReady = function() {
+            if (_config.type === 'mobile') {
+                document.body.onfocus = function(e) {
+                    setTimeout(function(){
+                        iframe.contentWindow.focus();
+
+                        _sendCommand({
+                            command: 'resetFocus',
+                            data: {}
+                        })
+                    }, 10);
+                };
+            }
+
+            window.onmouseup = function(evt) {
+                _processMouse(evt);
+            };
+
+            if (_config.editorConfig) {
+                _init(_config.editorConfig);
+            }
+
+            if (_config.document) {
+                _openDocument(_config.document);
+            }
+        };
+
+        var _onMessage = function(msg) {
+            if (msg) {
+                var events = _config.events || {},
+                    handler = events[msg.event],
+                    res;
+
+                if (msg.event === 'onRequestEditRights' && !handler) {
+                    _applyEditRights(true, 'handler is\'n defined');
+                } else {
+                    if (msg.event === 'onReady') {
+                        _onReady();
+                    }
+
+                    if (handler) {
+                        res = handler.call(_self, { target: _self, data: msg.data });
+                        if (msg.event === 'onSave' && res !== false) {
+                            _processSaveResult(true);
+                        }
+                    }
+                }
+            }
+        };
+
+
+        var target = document.getElementById(placeholderId),
+            iframe;
+
+        if (target) {
+            iframe = createIframe(_config);
+            target.parentNode && target.parentNode.replaceChild(iframe, target);
+            this._msgDispatcher = new MessageDispatcher(_onMessage, this);
+        }
+
+
+        /*
+         cmd = {
+         command: 'commandName',
+         data: <command specific data>
+         }
+         */
+        var _sendCommand = function(cmd) {
+            if (iframe && iframe.contentWindow)
+                postMessage(iframe.contentWindow, cmd);
+        };
+
+        var _init = function(editorConfig) {
+            _sendCommand({
+                command: 'init',
+                data: {
+                    config: editorConfig
+                }
+            });
+        };
+
+        var _openDocument = function(doc) {
+            _sendCommand({
+                command: 'openDocument',
+                data: {
+                    doc: doc
+                }
+            });
+        };
+
+        var _showError = function(title, msg) {
+            _showMessage(title, msg, "error");
+        };
+
+        // severity could be one of: "error", "info" or "warning"
+        var _showMessage = function(title, msg, severity) {
+            if (typeof severity !== 'string') {
+                severity = "info";
+            }
+            _sendCommand({
+                command: 'showMessage',
+                data: {
+                    title: title,
+                    msg: msg,
+                    severity: severity
+                }
+            });
+        };
+
+        var _applyEditRights = function(allowed, message) {
+            _sendCommand({
+                command: 'applyEditRights',
+                data: {
+                    allowed: allowed,
+                    message: message
+                }
+            });
+        };
+
+        var _processSaveResult = function(result, message) {
+            _sendCommand({
+                command: 'processSaveResult',
+                data: {
+                    result: result,
+                    message: message
+                }
+            });
+        };
+
+        var _processRightsChange = function(enabled, message) {
+            _sendCommand({
+                command: 'processRightsChange',
+                data: {
+                    enabled: enabled,
+                    message: message
+                }
+            });
+        };
+
+        var _processMouse = function(evt) {
+            var r = iframe.getBoundingClientRect();
+            var data = {
+                type: evt.type,
+                x: evt.x - r.left,
+                y: evt.y - r.top
+            };
+
+            _sendCommand({
+                command: 'processMouse',
+                data: data
+            });
+        };
+
+        var _serviceCommand = function(command, data) {
+            _sendCommand({
+                command: 'internalCommand',
+                data: {
+                    command: command,
+                    data: data
+                }
+            });
+        };
+
+        return {
+            showError           : _showError,
+            showMessage         : _showMessage,
+            applyEditRights     : _applyEditRights,
+            processSaveResult   : _processSaveResult,
+            processRightsChange : _processRightsChange,
+            serviceCommand      : _serviceCommand
+        }
+    };
+
+
+    DocsAPI.DocEditor.defaultConfig = {
+        type: 'desktop',
+        width: '640px',
+        height: '480px'
+    };
+
+
+    MessageDispatcher = function(fn, scope) {
+        var _fn     = fn,
+            _scope  = scope || window;
+
+        var _bindEvents = function() {
+            if (window.addEventListener) {
+                window.addEventListener("message", function(msg) {
+                    _onMessage(msg);
+                }, false)
+            }
+            else if (window.attachEvent) {
+                window.attachEvent("onmessage", function(msg) {
+                    _onMessage(msg);
+                });
+            }
+        };
+
+        var _onMessage = function(msg) {
+            // TODO: check message origin
+            if (msg && window.JSON) {
+
+                try {
+                    var msg = window.JSON.parse(msg.data);
+                    if (_fn) {
+                        _fn.call(_scope, msg);
+                    }
+                } catch(e) {}
+            }
+        };
+
+        _bindEvents.call(this);
+    };
+
+    function getBasePath() {
+        var scripts = document.getElementsByTagName('script'),
+            match;
+
+        for (var i = scripts.length - 1; i >= 0; i--) {
+            match = scripts[i].src.match(/(.*)api\/documents\/api.js/i);
+            if (match) {
+                return match[1];
+            }
+        }
+
+        return "";
+    }
+
+    function getExtensionPath() {
+        if ("undefined" == typeof(extensionParams) || null == extensionParams["url"])
+            return null;
+        return extensionParams["url"] + "apps/";
+    }
+
+    function getAppPath(config) {
+        var extensionPath = getExtensionPath(),
+            path = extensionPath ? extensionPath : getBasePath(),
+            appMap = {
+                'text': 'documenteditor',
+                'text-pdf': 'documenteditor',
+                'spreadsheet': 'spreadsheeteditor',
+                'presentation': 'presentationeditor'
+            },
+            app;
+
+        if (typeof config.documentType === 'string') {
+            app = appMap[config.documentType.toLowerCase()];
+        }
+
+        path += (app || appMap['text']) + "/";
+        path += config.type === "mobile"
+            ? "mobile"
+            : config.type === "embedded"
+                ? "embed"
+                : "main";
+        path += "/index.html";
+
+        return path;
+    }
+
+    function getAppParameters(config) {
+        var params = "?_dc=0";
+
+        if (config.editorConfig && config.editorConfig.lang)
+            params += "&lang=" + config.editorConfig.lang;
+
+        return params;
+    }
+
+    function createIframe(config) {
+        var iframe = document.createElement("iframe");
+
+        iframe.src = getAppPath(config) + getAppParameters(config);
+        iframe.width = config.width;
+        iframe.height = config.height;
+        iframe.align = "top";
+        iframe.frameBorder = 0;
+
+        return iframe;
+    }
+
+    function postMessage(wnd, msg) {
+        if (wnd && wnd.postMessage && window.JSON) {
+            // TODO: specify explicit origin
+            wnd.postMessage(window.JSON.stringify(msg), "*");
+        }
+
+    }
+
+    function extend(dest, src) {
+        for (var prop in src) {
+            if (src.hasOwnProperty(prop) && typeof dest[prop] === 'undefined') {
+                dest[prop] = src[prop];
+            }
+        }
+        return dest;
+    }
+
+})(window.DocsAPI = window.DocsAPI || {}, window, document);

OfficeWeb/apps/api/documents/cache-scripts.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ONLYOFFICE Documents</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <style type="text/css"></style>
+</head>
+<body>
+    <script type="text/javascript" src="../../../3rdparty/extjs/ext-all.js"></script>
+    <script type="text/javascript" src="../../../3rdparty/jquery/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../3rdparty/jquery/mousewheel/jquery.mousewheel.js"></script>
+    <script type="text/javascript" src="../../../3rdparty/jquery/jscrollpane/jquery.jscrollpane.min.js"></script>
+    <script type="text/javascript" src="../../../3rdparty/sockjs/sockjs-0.3.min.js"></script>
+    <script type="text/javascript" src="../../../3rdparty/underscore/underscore-min.js"></script>
+    <script type="text/javascript" src="../../../3rdparty/xregexp/xregexp-all-min.js"></script>
+	<script type="text/javascript" src="../../../sdk/Common/AllFonts.js"></script>
+    <script type="text/javascript" src="../../../sdk/Word/sdk-all.js"></script>
+    <div id="editor_sdk">
+    <script type="text/javascript">
+        var editor = new asc_docs_api("editor_sdk");
+        editor.SetFontsPath("../../../sdk/Fonts/");
+        editor.LoadFontsFromServer();
+    </script>
+</body>
+</html>

OfficeWeb/apps/api/documents/index.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ONLYOFFICE Documents</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-touch-fullscreen" content="yes">
+
+    <style type="text/css">
+        html {
+            height: 100%;
+        }
+
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #wrap {
+            position:absolute;
+            left:0;
+            top:0;
+            right:0;
+            bottom:0;
+        }
+    </style>
+</head>
+<body>
+    <div id="wrap">
+        <div id="placeholder"></div>
+    </div>
+
+    <script type="text/javascript" src="api.js"></script>
+    <script>
+        (function() {
+
+            // Url parameters
+
+            var urlParams = getUrlParams(),
+                cfg = getEditorConfig(urlParams),
+                doc = getDocumentData(urlParams);
+
+
+            // Document Editor         
+
+            var docEditor = new DocsAPI.DocEditor('placeholder', {
+                type: urlParams['type'],
+                width: '100%',
+                height: '100%',
+                documentType: urlParams['doctype'],
+                document: doc,
+                editorConfig: cfg,
+                events: {
+                    'onReady': onDocEditorReady,
+                    'onBack': onBack,
+                    'onDocumentStateChange': onDocumentStateChange,
+                    'onRequestEditRights': onRequestEditRights,
+                    'onSave': onDocumentSave,
+                    'onError': onError
+                }
+            });
+
+            // Document Editor event handlers
+
+            function onDocEditorReady(event) {
+                if (event.target) {
+                    //console.log('Ready! Editor: ', event.target);
+                }
+            }
+
+            function onBack(event) {
+                //console.log('Go back!');
+            }
+
+            function onDocumentStateChange(event) {
+                var isModified = event.data;
+                //console.log(isModified);
+            }
+
+            function onRequestEditRights(event) {
+                // occurs whenever the user tryes to enter edit mode
+                docEditor.applyEditRights(true, "Someone is editing this document right now. Please try again later.");
+            }
+
+            function onDocumentSave(event) {
+                var url = event.data;                
+                // if you want to async save process return false
+                // and call api.processSaveResult when ready
+            }
+
+            function onError(event) {
+                // critical error happened
+                // examine event.data.errorCode and event.data.errorDescription for details
+            }
+
+
+            // helpers
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function getDocumentData(urlParams) {
+                return {
+                    key: urlParams["key"],
+                    url: urlParams["url"],
+                    title: urlParams["title"],
+                    fileType: urlParams["filetype"],
+                    vkey: urlParams["vkey"],
+                    permissions: {
+                        edit: true,
+                        download: true,
+                        reader: true
+                    }
+                };
+            }
+
+            function getEditorConfig(urlParams) {
+                return {
+                    mode            : urlParams["mode"] || 'edit',
+                    lang            : urlParams["lang"] || 'en',
+                    canCoAuthoring  : true,
+                    canBackToFolder : true,
+                    canCreateNew    : true,
+                    createUrl       : 'http://www.example.com/create',
+
+                    user: {
+                        id: urlParams["userid"] || 'uid-901', name: urlParams["username"] || 'Hamish Mitchell'
+                    },
+                    recent          : [
+                        {title: 'Memory.docx',          url: 'http://onlyoffice.com',  folder: 'Document Editor'},
+                        {title: 'Description.doc',      url: 'http://onlyoffice.com',  folder: 'Document Editor'},
+                        {title: 'DocEditor_right.xsl',  url: 'http://onlyoffice.com',  folder: 'Spreadsheet Editor'},
+                        {title: 'api.rtf',              url: 'http://onlyoffice.com',  folder: 'Unnamed folder'}
+                    ],
+                    templates       : [
+                        {name: 'Contracts', icon: '../../api/documents/resources/templates/contracts.png'},
+                        {name: 'Letter',    icon: '../../api/documents/resources/templates/letter.png'},
+                        {name: 'List',      icon: '../../api/documents/resources/templates/list.png'},
+                        {name: 'Plan',      icon: '../../api/documents/resources/templates/plan.png'}
+                    ],
+                    embedded        : {
+                        embedUrl        : 'http://onlyoffice.com/embed',
+                        fullscreenUrl   : 'http://onlyoffice.com/fullscreen',
+                        saveUrl         : 'http://onlyoffice.com/download',
+                        shareUrl        : 'http://tl.com/72b4la97',
+                        toolbarDocked   : 'top'
+                    }
+                };
+            }
+
+            // Mobile version
+
+            function isMobile(){
+                var prefixes = {
+                        ios: 'i(?:Pad|Phone|Pod)(?:.*)CPU(?: iPhone)? OS ',
+                        android: '(Android |HTC_|Silk/)',
+                        blackberry: 'BlackBerry(?:.*)Version\/',
+                        rimTablet: 'RIM Tablet OS ',
+                        webos: '(?:webOS|hpwOS)\/',
+                        bada: 'Bada\/'
+                    },
+                    i, prefix, match;
+
+                for (i in prefixes){
+                    if (prefixes.hasOwnProperty(i)) {
+                        prefix = prefixes[i];
+
+                        if (navigator.userAgent.match(new RegExp('(?:'+prefix+')([^\\s;]+)')))
+                            return true;
+                    }
+                }
+
+                return false;
+            }
+
+            var fixSize = function() {
+                var wrapEl = document.getElementById('wrap');
+                if (wrapEl){
+                    wrapEl.style.height = screen.availHeight + 'px';
+                    window.scrollTo(0, -1);
+                    wrapEl.style.height = window.innerHeight + 'px';
+                }
+            };
+
+            var fixIpadLandscapeIos7 = function() {
+                if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
+                    var wrapEl = document.getElementById('wrap');
+                    if (wrapEl){
+                        wrapEl.style.position = "fixed";
+                        wrapEl.style.bottom = 0;
+                        wrapEl.style.width = "100%";
+                    }
+                }
+            };
+
+            if (isMobile()){
+                window.addEventListener('load', fixSize);
+                window.addEventListener('resize', fixSize);
+
+                fixIpadLandscapeIos7();
+            }
+
+        })();
+    </script>
+</body>
+</html>

OfficeWeb/apps/common/Analytics.js

@@ -0,0 +1,68 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+Common.component = Common.component || {};
+Common.Analytics = Common.component.Analytics = new(function () {
+    var _category;
+    return {
+        initialize: function (id, category) {
+            if (typeof id === "undefined") {
+                throw "Analytics: invalid id.";
+            }
+            if (typeof category === "undefined" || Object.prototype.toString.apply(category) !== "[object String]") {
+                throw "Analytics: invalid category type.";
+            }
+            _category = category;
+            $("head").append('<script type="text/javascript">' + "var _gaq = _gaq || [];" + '_gaq.push(["_setAccount", "' + id + '"]);' + '_gaq.push(["_trackPageview"]);' + "(function() {" + 'var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;' + 'ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";' + 'var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);' + "})();" + "</script>");
+        },
+        trackEvent: function (action, label, value) {
+            if (typeof action !== "undefined" && Object.prototype.toString.apply(action) !== "[object String]") {
+                throw "Analytics: invalid action type.";
+            }
+            if (typeof label !== "undefined" && Object.prototype.toString.apply(label) !== "[object String]") {
+                throw "Analytics: invalid label type.";
+            }
+            if (typeof value !== "undefined" && !(Object.prototype.toString.apply(value) === "[object Number]" && isFinite(value))) {
+                throw "Analytics: invalid value type.";
+            }
+            if (typeof _gaq === "undefined") {
+                return;
+            }
+            if (_category === "undefined") {
+                throw "Analytics is not initialized.";
+            }
+            _gaq.push(["_trackEvent", _category, action, label, value]);
+        }
+    };
+})();

OfficeWeb/apps/common/Gateway.js

@@ -0,0 +1,151 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+Common.Gateway = new(function () {
+    var me = this,
+    $me = $(me);
+    var commandMap = {
+        "init": function (data) {
+            $me.trigger("init", data);
+        },
+        "openDocument": function (data) {
+            $me.trigger("opendocument", data);
+        },
+        "showMessage": function (data) {
+            $me.trigger("showmessage", data);
+        },
+        "applyEditRights": function (data) {
+            $me.trigger("applyeditrights", data);
+        },
+        "processSaveResult": function (data) {
+            $me.trigger("processsaveresult", data);
+        },
+        "processRightsChange": function (data) {
+            $me.trigger("processrightschange", data);
+        },
+        "processMouse": function (data) {
+            $me.trigger("processmouse", data);
+        },
+        "internalCommand": function (data) {
+            $me.trigger("internalcommand", data);
+        },
+        "resetFocus": function (data) {
+            $me.trigger("resetfocus", data);
+        }
+    };
+    var _postMessage = function (msg) {
+        if (window.parent && window.JSON) {
+            window.parent.postMessage(window.JSON.stringify(msg), "*");
+        }
+    };
+    var _onMessage = function (msg) {
+        var data = msg.data;
+        if (Object.prototype.toString.apply(data) !== "[object String]" || !window.JSON) {
+            return;
+        }
+        var cmd, handler;
+        try {
+            cmd = window.JSON.parse(data);
+        } catch(e) {
+            cmd = "";
+        }
+        if (cmd) {
+            handler = commandMap[cmd.command];
+            if (handler) {
+                handler.call(this, cmd.data);
+            }
+        }
+    };
+    var fn = function (e) {
+        _onMessage(e);
+    };
+    if (window.attachEvent) {
+        window.attachEvent("onmessage", fn);
+    } else {
+        window.addEventListener("message", fn, false);
+    }
+    return {
+        ready: function () {
+            _postMessage({
+                event: "onReady"
+            });
+        },
+        goBack: function () {
+            _postMessage({
+                event: "onBack"
+            });
+        },
+        save: function (url) {
+            _postMessage({
+                event: "onSave",
+                data: url
+            });
+        },
+        requestEditRights: function () {
+            _postMessage({
+                event: "onRequestEditRights"
+            });
+        },
+        reportError: function (code, description) {
+            _postMessage({
+                event: "onError",
+                data: {
+                    errorCode: code,
+                    errorDescription: description
+                }
+            });
+        },
+        setDocumentModified: function (modified) {
+            _postMessage({
+                event: "onDocumentStateChange",
+                data: modified
+            });
+        },
+        internalMessage: function (type, data) {
+            _postMessage({
+                event: "onInternalMessage",
+                data: {
+                    type: type,
+                    data: data
+                }
+            });
+        },
+        on: function (event, handler) {
+            var localHandler = function (event, data) {
+                handler.call(me, data);
+            };
+            $me.on(event, localHandler);
+        }
+    };
+})();

OfficeWeb/apps/common/IrregularStack.js

@@ -0,0 +1,81 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+Common.IrregularStack = function (config) {
+    var _stack = [];
+    var _compare = function (obj1, obj2) {
+        if (typeof obj1 === "object" && typeof obj2 === "object" && window.JSON) {
+            return window.JSON.stringify(obj1) === window.JSON.stringify(obj2);
+        }
+        return obj1 === obj2;
+    };
+    config = config || {};
+    var _strongCompare = config.strongCompare || _compare;
+    var _weakCompare = config.weakCompare || _compare;
+    var _indexOf = function (obj, compare) {
+        for (var i = _stack.length - 1; i >= 0; i--) {
+            if (compare(_stack[i], obj)) {
+                return i;
+            }
+        }
+        return -1;
+    };
+    var _push = function (obj) {
+        _stack.push(obj);
+    };
+    var _pop = function (obj) {
+        var index = _indexOf(obj, _strongCompare);
+        if (index != -1) {
+            var removed = _stack.splice(index, 1);
+            return removed[0];
+        }
+        return undefined;
+    };
+    var _get = function (obj) {
+        var index = _indexOf(obj, _weakCompare);
+        if (index != -1) {
+            return _stack[index];
+        }
+        return undefined;
+    };
+    var _exist = function (obj) {
+        return ! (_indexOf(obj, _strongCompare) < 0);
+    };
+    return {
+        push: _push,
+        pop: _pop,
+        get: _get,
+        exist: _exist
+    };
+};

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

@@ -0,0 +1,494 @@
+// Bootstrap core variables and mixins
+@import "../../../../../3rdparty/bootstrap/src/less/variables.less";
+@import "../../../../../3rdparty/bootstrap/src/less/mixins.less";
+
+@toolbarBorderColor:            #929292;
+@toolbarBorderShadowColor:      #FAFAFA;
+@toolbarTopColor:               #EBEBEB;
+@toolbarBottomColor:            #CCCCCC;
+@toolbarHoverColor:             #7698DE;
+@toolbarFontSize:               12px;
+@controlBtnHoverTopColor:       #6180C4;
+@controlBtnHoverBottomColor:    #8AACF1;
+@iconSpriteCommonPath:          "../img/glyphicons.png";
+
+// Global overwrite
+// -------------------------
+
+.btn-mini {
+    font-weight: bold;
+}
+
+.btn-primary {
+    .buttonBackground(@controlBtnHoverBottomColor, @controlBtnHoverTopColor);
+}
+
+.embed-body {
+        -moz-user-select: -moz-none;
+      -khtml-user-select: none;
+     -webkit-user-select: none;
+         -ms-user-select: none;
+             user-select: none;
+
+    font-size: 12px;
+    overflow: hidden;
+}
+
+// Fix popover
+// -------------------------
+.popover.top {
+    margin-top: -10px;
+}
+
+// Document Viewer
+// -------------------------
+.viewer {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    left: 0;
+    right: 0;
+
+    &.top {
+        top: 32px;
+        bottom: 0;
+    }
+
+    &.bottom {
+        top: 0;
+        bottom: 30px;
+    }
+}
+
+// Toolbar
+// -------------------------
+.toolbar {
+    position: fixed;
+    font-size: @toolbarFontSize;
+    min-width: 340px;
+    #gradient > .vertical(@toolbarTopColor, @toolbarBottomColor);
+
+    &.top {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 32px;
+
+     -webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
+        -moz-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
+             box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
+    }
+
+    &.bottom {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 30px;
+
+     -webkit-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
+        -moz-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
+             box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
+    }
+
+    ul {
+        position: absolute;
+        list-style-type: none;
+        margin: 0;
+
+        li {
+            input {
+                height: 14px;
+                font-size: @toolbarFontSize;
+                margin: 4px 3px 5px;
+                padding: 4px 0;
+                text-align: center;
+            }
+
+            .text {
+                cursor: default;
+            }
+        }
+
+        &.left {
+            left: 0;
+
+            li {
+                float: left;
+            }
+        }
+
+        &.right {
+            right: 0;
+
+            li {
+                float: left;
+            }
+        }
+
+        .separator {
+            height: 24px;
+            margin: 4px 9px;
+            border-right: 1px solid @toolbarBorderShadowColor;
+            border-left: 1px solid @toolbarBorderColor;
+        }
+    }
+}
+
+// Logo
+// -------------------------
+a.brand-logo {
+    display: block;
+    background-image: url("@{iconSpriteCommonPath}");
+    width: 127px;
+    height: 20px;
+    margin: 5px 0 0 10px;
+    background-position: 0 -100px;
+}
+
+// Sprite icons path
+// -------------------------
+[class^="control-icon-"],
+[class*=" control-icon-"] {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: text-top;
+  background-image: url("@{iconSpriteCommonPath}");
+  background-repeat: no-repeat;
+  margin-top: -2px;
+}
+
+[class^="overlay-icon-"],
+[class*=" overlay-icon-"] {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    vertical-align: text-top;
+    background-image: url("@{iconSpriteCommonPath}");
+    background-repeat: no-repeat;
+    opacity: .3;
+}
+
+.control-icon-share         { background-position: 0             0; }
+.control-icon-embed         { background-position: 0         -20px; }
+.control-icon-fullscreen    { background-position: 0         -40px; }
+.control-icon-close         { background-position: 0         -60px; }
+.control-icon-save          { background-position: 0         -80px; }
+
+.overlay-icon-zoom-in       { background-position: 0        -120px; }
+.overlay-icon-zoom-out      { background-position: -32px    -120px; }
+
+
+// Control buttons
+// -------------------------
+.control-btn {
+    display: inline-block;
+    padding: 1px 5px;
+    font-size: @toolbarFontSize;
+    line-height: 20px;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+    .border-radius(2px);
+    margin: 4px 5px 0 0;
+
+    i {
+        margin-right: 5px;
+    }
+
+    &.no-caption {
+        padding: 1px 2px;
+
+        i {
+            margin-right: 0;
+        }
+    }
+
+// Hover state
+    &:hover {
+        color: @toolbarHoverColor;
+        text-decoration: none;
+        text-shadow: 0 1px 0 @toolbarBorderShadowColor;
+
+        .control-icon-share         { background-position: -20px         0; }
+        .control-icon-embed         { background-position: -20px     -20px; }
+        .control-icon-fullscreen    { background-position: -20px     -40px; }
+        .control-icon-close         { background-position: -20px     -60px; }
+        .control-icon-save          { background-position: -20px     -80px; }
+    }
+
+// Focus state for keyboard and accessibility
+    &:focus {
+        .tab-focus();
+    }
+
+// Active state
+    &.active,
+    &:active {
+        color: #ffffff;
+        outline: 0;
+        border: 1px solid darken(@controlBtnHoverTopColor, 5%);
+        #gradient > .vertical(@controlBtnHoverTopColor, @controlBtnHoverBottomColor);
+        text-shadow: 0 1px 0 darken(@toolbarBorderColor, 20%);
+
+        .control-icon-share         { background-position: -40px         0; }
+        .control-icon-embed         { background-position: -40px     -20px; }
+        .control-icon-fullscreen    { background-position: -40px     -40px; }
+        .control-icon-close         { background-position: -40px     -60px; }
+        .control-icon-save          { background-position: -40px     -80px; }
+    }
+}
+
+// Overlay control
+// -------------------------
+.overlay-controls {
+    position: absolute;
+    bottom: 55px;
+    z-index: 10;
+    left: 50%;
+
+    ul {
+        list-style-type: none;
+        margin: 0 auto;
+
+        li {
+            display: inline-block;
+        }
+    }
+
+    .overlay {
+        width: 32px;
+        height: 32px;
+
+        display: inline-block;
+        text-align: center;
+        vertical-align: middle;
+        cursor: pointer;
+        background-color: transparent;
+        background-image: none;
+        border: none;
+        padding: 0;
+        line-height: 0;
+
+        &:hover {
+            [class^="overlay-icon-"],
+            [class*=" overlay-icon-"] {
+                opacity: .6;
+            }
+        }
+
+        &.active,
+        &:active {
+            [class^="overlay-icon-"],
+            [class*=" overlay-icon-"] {
+                opacity: .8;
+            }
+        }
+    }
+}
+
+// Error mask
+// -------------------------
+.errormask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    border: none;
+    background-color: #f4f4f4;
+    z-index: 30002;
+
+    .error-body {
+        position: relative;
+        top: 40%;
+        width: 400px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #FFFFFF;
+        border: 1px solid #C0C0C0;
+
+        .title {
+            font-weight: bold;
+            font-size: 1.6em;
+            padding-bottom: 10px;
+        }
+    }
+}
+
+// Share popover
+// -------------------------
+.popover{
+    .popover-content {
+        padding: 14px;
+    }
+
+    .btn {
+        .border-radius(2px);
+    }
+
+    &.hyperlink {
+        .popover-content {
+            padding: 5px 10px;
+
+            p {
+                display: block;
+                word-wrap: break-word;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    &.share {
+        width: 280px;
+
+        .share-link {
+            .caption {
+                margin-right: 8px;
+                float: left;
+            }
+
+            .uneditable-input {
+                font-size: 1em;
+                padding: 0 4px;
+                margin-right: 5px;
+                .border-radius(0);
+                cursor: auto;
+                    -moz-user-select: text;
+                  -khtml-user-select: text;
+                 -webkit-user-select: text;
+                     -ms-user-select: text;
+                         user-select: text;
+            }
+
+            .input-medium {
+                width: 130px;
+            }
+
+            .btn {
+                float: right;
+            }
+        }
+
+        .share-buttons {
+            ul {
+                height: 25px;
+                list-style-type: none;
+                margin: 5px 0 0;
+                overflow: hidden;
+
+                li {
+                    display: inline-block;
+                    float: left;
+                    margin: 1px 5px 0 0;
+                    vertical-align: middle;
+
+                    &.share-mail {
+                        float: right;
+                        margin: 0;
+                        a {
+                            padding: 2px 8px;
+                        }
+                        i {
+                            margin-right: 5px;
+                        }
+                    }
+
+                    &.share-twitter {
+                        max-width: 100px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.embed {
+        width: 270px;
+
+        .size-manual {
+            margin-bottom: 10px;
+        }
+
+        .right {
+            float: right;
+        }
+
+        .caption {
+            margin-right: 8px;
+        }
+
+        input {
+            font-size: 1em;
+            padding: 0 4px;
+            .border-radius(0);
+            margin: 0;
+            margin-top: -1px;
+
+            &.input-mini {
+                width: 40px;
+            }
+        }
+
+        textarea {
+            width: 228px;
+            resize: none;
+            cursor: auto;
+            font-size: 1em;
+            .border-radius(0);
+        }
+
+        button {
+            float: right;
+            margin: 5px 0 15px;
+            width: 86px;
+        }
+    }
+}
+
+
+// Modal dialog
+// -------------------------
+.modal.error {
+    .modal-footer {
+        text-align: center;
+    }
+}
+
+
+// Loader
+// -------------------------
+.cmd-loader-body {
+    z-index: 20001;
+    width: 300px;
+    padding: 16px;
+    margin: -71px 0 0 -166px;
+    border: none;
+    background-image: none;
+    background-color: #787C80;
+    opacity: 0.8;
+    -webkit-border-radius: 10px;
+       -moz-border-radius: 10px;
+            border-radius: 10px;
+
+    .cmd-loader-image {
+        background-image: url("../img/loading.gif");
+        background-repeat: no-repeat;
+        background-position: top center;
+        height: 74px;
+        width: 100%;
+    }
+
+    .cmd-loader-title {
+        font-size: 18px;
+        font-weight: lighter;
+        color: #FFF;
+        text-align: center;
+        margin: 16px 24px 0 24px;
+    }
+}

OfficeWeb/apps/common/locale.js

@@ -0,0 +1,86 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+Common.Locale = new(function () {
+    var l10n = {};
+    var _createXMLHTTPObject = function () {
+        var xmlhttp;
+        try {
+            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
+        } catch(e) {
+            try {
+                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
+            } catch(E) {
+                xmlhttp = false;
+            }
+        }
+        if (!xmlhttp && typeof XMLHttpRequest != "undefined") {
+            xmlhttp = new XMLHttpRequest();
+        }
+        return xmlhttp;
+    };
+    var _applyLocalization = function () {
+        try {
+            for (var prop in l10n) {
+                var p = prop.split(".");
+                if (p && p.length > 2) {
+                    var obj = window;
+                    for (var i = 0; i < p.length - 1; ++i) {
+                        obj = obj[p[i]];
+                        if (obj == undefined) {
+                            break;
+                        }
+                    }
+                    if (obj) {
+                        obj.prototype[p[p.length - 1]] = l10n[prop];
+                    }
+                }
+            }
+        } catch(e) {}
+    };
+    try {
+        var urlParams = Ext.urlDecode(location.search.substring(1));
+        var xhrObj = _createXMLHTTPObject();
+        if (xhrObj && urlParams && urlParams.lang) {
+            var lang = urlParams.lang.split("-")[0];
+            xhrObj.open("GET", "locale/" + lang + ".json", false);
+            xhrObj.send("");
+            l10n = eval("(" + xhrObj.responseText + ")");
+            _applyLocalization();
+        }
+    } catch(e) {}
+    return {
+        apply: _applyLocalization
+    };
+})();

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

@@ -0,0 +1,322 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.ComboDataView", {
+    extend: "Ext.container.Container",
+    requires: (["Ext.data.Model", "Ext.data.Store", "Ext.view.View", "Ext.XTemplate"]),
+    alias: "widget.commoncombodataview",
+    padding: 4,
+    itemWidth: 80,
+    itemHeight: 40,
+    menuHeight: 100,
+    menuMaxHeight: 500,
+    minWidth: 150,
+    emptyComboText: "No styles",
+    handleGlobalResize: false,
+    constructor: function (config) {
+        if (!config || !config.viewData || !config.itemWidth || !config.itemHeight) {
+            throw Error("ComboDataView creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        var borderSize = 0;
+        var paddingLeftDV = 0;
+        var paddingRightDV = 0;
+        var paddingLeftItem = 0;
+        var paddingRightItem = 0;
+        var marginRightItem = 0;
+        var initCSSRules = true;
+        var borderRule = Ext.util.CSS.getRule(".storage-combodataview");
+        if (borderRule) {
+            borderSize = parseInt(borderRule.style.borderWidth);
+            if (isNaN(borderSize)) {
+                borderSize = 0;
+            }
+        }
+        Ext.define("DataModel", {
+            extend: "Ext.data.Model",
+            fields: [{
+                name: "imageUrl"
+            },
+            {
+                name: "title"
+            },
+            {
+                name: "data"
+            },
+            {
+                name: "uid"
+            }]
+        });
+        var fieldStore = Ext.create("Ext.data.Store", {
+            storeId: Ext.id(),
+            model: (Ext.isDefined(cfg.store)) ? cfg.store.model : "DataModel",
+            data: cfg.viewData
+        });
+        var dataTpl = (Ext.isDefined(cfg.dataTpl)) ? cfg.dataTpl : Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', '<img src="{imageUrl}" width="' + me.itemWidth + '" height="' + me.itemHeight + '"/>', '<tpl if="title">', '<span class="title">{title}</span>', "</tpl>", "</div>", "</tpl>");
+        this.dataMenu = Ext.widget("cmdmenudataviewpicker", {
+            width: me.width,
+            height: me.menuHeight,
+            cls: "x-dataview-combo-menu",
+            viewData: cfg.viewData,
+            dataTpl: cfg.dataTpl,
+            store: cfg.store,
+            itemWidth: me.itemWidth,
+            itemHeight: me.itemHeight,
+            constrain: false,
+            pickerpadding: (me.padding - 1),
+            listeners: {
+                hide: function (ct, eOpts) {
+                    me.fireEvent("menuhide", me, ct);
+                }
+            }
+        });
+        var fieldDataView = Ext.widget("dataview", {
+            store: fieldStore,
+            tpl: dataTpl,
+            singleSelect: true,
+            trackOver: true,
+            style: "overflow:auto",
+            overItemCls: "x-item-over",
+            itemSelector: "div.thumb-wrap",
+            emptyText: '<div class="emptyText">' + me.emptyComboText + "</div>",
+            deferEmptyText: false,
+            cls: "x-view-context",
+            listeners: {
+                itemclick: function (view, record, item, index, event, eOpts) {
+                    if (cfg.repeatedselect && view.getSelectionModel().getLastSelected() !== null && view.getSelectionModel().getLastSelected().id == record.id) {
+                        me.fireEvent("select", me, record);
+                    }
+                },
+                afterrender: Ext.bind(function (ct, eOpts) {
+                    if (fieldStore.getCount() > 0) {
+                        ct.select(fieldStore.getAt(0));
+                        this.dataMenu.picker.selectByIndex(0);
+                    }
+                },
+                this),
+                beforecontainerclick: function (view, event, eOpts) {
+                    return false;
+                },
+                itemdblclick: function (view, record, item, index, event, eOpts) {
+                    me.fireEvent("releasecapture", me);
+                }
+            }
+        });
+        var fieldContainer = Ext.widget("container", {
+            flex: 1,
+            height: me.height - 2 * (me.padding + borderSize),
+            items: [fieldDataView]
+        });
+        var btnMenu = Ext.widget("button", {
+            cls: "x-btn-combodataview",
+            height: me.height - 2 * (me.padding + borderSize),
+            handler: Ext.bind(function (btn, e) {
+                if (initCSSRules) {
+                    me.getDataViewCSSRules();
+                }
+                var maxViewCount = Math.floor((me.getEl().getWidth()) / (me.itemWidth + paddingLeftItem + paddingRightItem));
+                var countRec = me.dataMenu.picker.store.getCount();
+                var menuRowsCount = Math.ceil(countRec / maxViewCount);
+                if (menuRowsCount > 1) {
+                    var height = menuRowsCount * (me.itemHeight + 2 * marginRightItem + paddingLeftItem + paddingRightItem) + 6,
+                    maxHeight = Math.min(me.menuMaxHeight, Ext.Element.getViewportHeight() - this.getPosition()[1] - 6);
+                    if (height > maxHeight) {
+                        height = maxHeight;
+                    }
+                    me.dataMenu.show();
+                    me.dataMenu.setSize(me.getEl().getWidth(), height);
+                    me.dataMenu.showBy(fieldContainer, "tl-tl", [-me.padding + borderSize, -me.padding + borderSize]);
+                }
+            },
+            this)
+        });
+        this.fillComboView = function (record, forceSelect, forceFill) {
+            if (Ext.isDefined(record)) {
+                var store = me.dataMenu.picker.store;
+                if (store) {
+                    if (forceFill || fieldStore.find("uid", record.data.uid) < 0) {
+                        if (initCSSRules) {
+                            me.getDataViewCSSRules();
+                        }
+                        fieldStore.removeAll();
+                        var indexRec = store.indexOf(record),
+                        countRec = store.getCount(),
+                        maxViewCount = Math.floor((fieldContainer.getWidth()) / (me.itemWidth + paddingLeftItem + paddingRightItem)),
+                        newStyles = [];
+                        if (fieldContainer.getHeight() / me.itemHeight > 2) {
+                            maxViewCount *= Math.floor(fieldContainer.getHeight() / me.itemHeight);
+                        }
+                        if (indexRec < 0) {
+                            return;
+                        }
+                        indexRec = Math.floor(indexRec / maxViewCount) * maxViewCount;
+                        for (var index = indexRec, viewCount = 0; index < countRec && viewCount < maxViewCount; index++, viewCount++) {
+                            var rec = store.getAt(index);
+                            var obj = {};
+                            for (var i = 0; i < rec.fields.length; i++) {
+                                obj[rec.fields.items[i].name] = rec.data[rec.fields.items[i].name];
+                            }
+                            newStyles.push(obj);
+                        }
+                        fieldStore.add(newStyles);
+                    }
+                    if (forceSelect) {
+                        var selectIndex = fieldStore.find("uid", record.data.uid);
+                        if (selectIndex > -1) {
+                            fieldDataView.select(fieldStore.getAt(selectIndex), false, true);
+                        }
+                    }
+                }
+            }
+        };
+        this.selectByIndex = function (index) {
+            if (index < 0) {
+                fieldDataView.getSelectionModel().deselectAll(false);
+            }
+            me.dataMenu.picker.selectByIndex(index, false);
+        };
+        var onMenuSelect = function (picker, record) {
+            me.fillComboView(record, true);
+            if (record) {
+                me.fireEvent("select", me, record);
+            }
+        };
+        var onSelectionChange = function (view, selections, eOpts) {
+            var record = selections[0];
+            if (record) {
+                me.dataMenu.picker.selectByIndex(me.dataMenu.picker.store.findExact("uid", record.get("uid")), false);
+                me.fireEvent("select", me, record);
+            }
+        };
+        var onPickerSelectionChange = function (picker, view, selections) {
+            me.fillComboView(selections[0], true);
+        };
+        var doResizeCmp = function (width, height) {
+            if (me.dataMenu) {
+                me.dataMenu.setWidth(width);
+                me.dataMenu.hide();
+                var picker = me.dataMenu.picker;
+                if (picker) {
+                    var record = picker.getSelectedRec();
+                    me.fillComboView(record || picker.store.getAt(0), !!record, true);
+                }
+            }
+        };
+        if (me.handleGlobalResize) {
+            me.on("afterrender", function (cmp) {
+                var innerBoxEl = cmp.getEl().down(".x-box-inner");
+                if (innerBoxEl) {
+                    innerBoxEl.addCls("combodataview-auto-width");
+                }
+            },
+            this);
+            Ext.EventManager.onWindowResize(function () {
+                var cmpEl = me.getEl();
+                if (cmpEl) {
+                    me.doLayout();
+                    doResizeCmp(cmpEl.getWidth());
+                }
+            },
+            this);
+        } else {
+            me.on("resize", function (o, adjw, adjh) {
+                doResizeCmp(adjw, adjh);
+            },
+            this);
+        }
+        this.dataMenu.addListener("select", onMenuSelect, me);
+        this.dataMenu.picker.addListener("selectionchange", onPickerSelectionChange, me);
+        fieldDataView.addListener("selectionchange", onSelectionChange, me);
+        me.addEvents("select", "menuhide", "releasecapture");
+        me.addListener("afterrender", function () {
+            Ext.util.CSS.refreshCache();
+            var menuDataViewItemRule = Ext.util.CSS.getRule(".x-dataview-combo-menu .storage-data-view .thumb-wrap");
+            if (menuDataViewItemRule) {
+                paddingLeftItem = parseInt(menuDataViewItemRule.style.paddingLeft);
+                if (isNaN(paddingLeftItem)) {
+                    paddingLeftItem = 0;
+                }
+                paddingRightItem = parseInt(menuDataViewItemRule.style.paddingRight);
+                if (isNaN(paddingRightItem)) {
+                    paddingRightItem = 0;
+                }
+                marginRightItem = parseInt(menuDataViewItemRule.style.marginRight);
+                if (isNaN(marginRightItem)) {
+                    marginRightItem = 0;
+                }
+                initCSSRules = false;
+            }
+            Ext.defer(function () {
+                me.dataMenu.showAt([-10000, -10000]);
+                me.fireEvent("releasecapture", me);
+            },
+            100);
+        },
+        this);
+        me.getDataViewCSSRules = function () {
+            if (me.dataMenu.picker.getEl()) {
+                var thumb = me.dataMenu.picker.getEl().down(".thumb-wrap");
+                if (thumb) {
+                    paddingLeftItem = parseInt(thumb.getStyle("paddingLeft"));
+                    if (isNaN(paddingLeftItem)) {
+                        paddingLeftItem = 0;
+                    }
+                    paddingRightItem = parseInt(thumb.getStyle("paddingRight"));
+                    if (isNaN(paddingRightItem)) {
+                        paddingRightItem = 0;
+                    }
+                    marginRightItem = parseInt(thumb.getStyle("marginRight"));
+                    if (isNaN(marginRightItem)) {
+                        marginRightItem = 0;
+                    }
+                    initCSSRules = false;
+                }
+            }
+        };
+        Ext.apply(me, {
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            cls: "storage-combodataview",
+            items: [fieldContainer, btnMenu]
+        },
+        cfg);
+        this.callParent(arguments);
+    }
+});

OfficeWeb/apps/common/main/lib/component/DataViewPicker.js

@@ -0,0 +1,245 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.DataViewPicker", {
+    extend: "Ext.container.Container",
+    requires: (["Ext.data.Store", "Ext.data.Model", "Ext.view.View", "Ext.XTemplate", "Ext.container.Container", "Common.plugin.DataViewScrollPane"]),
+    uses: ["Common.component.GroupedDataView"],
+    alias: "widget.cmddataviewpicker",
+    layout: {
+        type: "fit"
+    },
+    constructor: function (config) {
+        if (!config || !config.viewData) {
+            throw Error("Common.component.DataViewPicker creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        me.selectedRec = null;
+        Ext.define("DataModel", {
+            extend: "Ext.data.Model",
+            fields: [{
+                name: "imageUrl"
+            },
+            {
+                name: "title"
+            },
+            {
+                name: "data"
+            },
+            {
+                name: "uid"
+            }]
+        });
+        me.store = (Ext.isDefined(cfg.store)) ? cfg.store : Ext.create("Ext.data.Store", {
+            storeId: Ext.id(),
+            model: "DataModel",
+            data: cfg.viewData
+        });
+        var dataTpl = (Ext.isDefined(cfg.dataTpl)) ? cfg.dataTpl : Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', (me.itemWidth !== undefined && me.itemHeight !== undefined) ? '<img src="{imageUrl}" width="' + me.itemWidth + '" height="' + me.itemHeight + '"/>' : '<img src="{imageUrl}" />', '<tpl if="title">', '<span class="title">{title}</span>', "</tpl>", "</div>", "</tpl>");
+        if (me.isGroupedDataView) {
+            var dataListView = Ext.create("Common.component.GroupedDataView", {
+                store: me.store,
+                listeners: {
+                    itemclick: function (view, record, htmlItem, index, event, eOpts) {
+                        me.selectedRec = record;
+                        me.fireEvent("select", me, record, htmlItem, index);
+                    },
+                    beforecontainerclick: function (view, event, eOpts) {
+                        return false;
+                    },
+                    selectionchange: function (view, selections, eOpts) {
+                        var plugin = dataListView.getPlugin("scrollpane"),
+                        node = dataListView.getNode(selections[0]);
+                        if (plugin && node) {
+                            plugin.scrollToElement(node);
+                        }
+                        me.fireEvent("selectionchange", me, view, selections);
+                    },
+                    itemkeydown: function (picker, record, item, index, e, opts) {
+                        if (e.getKey() == e.ENTER) {
+                            picker.fireEvent("itemclick", picker, record, item, index, e, opts);
+                        }
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".grouped-data-view",
+                    pluginId: "scrollpane",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001,
+                        contentWidth: me.contentWidth
+                    }
+                }]
+            });
+        } else {
+            var dataListView = Ext.create("Ext.view.View", {
+                store: me.store,
+                tpl: dataTpl,
+                singleSelect: true,
+                trackOver: true,
+                autoScroll: true,
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                emptyText: "",
+                cls: "storage-data-view",
+                listeners: {
+                    itemclick: function (view, record, htmlItem, index, event, eOpts) {
+                        me.selectedRec = record;
+                        me.fireEvent("select", me, record, htmlItem, index);
+                    },
+                    beforecontainerclick: function (view, event, eOpts) {
+                        return false;
+                    },
+                    selectionchange: function (view, selections, eOpts) {
+                        me.fireEvent("selectionchange", me, view, selections);
+                    },
+                    itemkeydown: function (picker, record, item, index, e, opts) {
+                        if (e.getKey() == e.ENTER) {
+                            picker.fireEvent("itemclick", picker, record, item, index, e, opts);
+                        }
+                    },
+                    itemmouseenter: function (obj, record, item, index, e, eOpts) {
+                        me.fireEvent("itemmouseenter", me, record, item, index, e, eOpts);
+                    },
+                    itemmouseleave: function (obj, record, item, index, e, eOpts) {
+                        me.fireEvent("itemmouseleave", me, record, item, index, e, eOpts);
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".storage-data-view",
+                    pluginId: "scrollpane",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001,
+                        contentWidth: me.contentWidth
+                    }
+                }]
+            });
+        }
+        me.addEvents("select", "itemmouseenter", "itemmouseleave");
+        if (me.handler) {
+            me.on("select", me.handler, me.scope, me);
+        }
+        me.getSelectedRec = function () {
+            return (me.isGroupedDataView) ? dataListView.getSelected() : dataListView.getSelectionModel().getSelection()[0];
+        };
+        me.selectByIndex = function (index, fireevent) {
+            if (dataListView.rendered) {
+                if (index < 0) {
+                    dataListView.getSelectionModel().deselectAll(false);
+                    me.selectedRec = null;
+                } else {
+                    var fire = Ext.isDefined(fireevent) ? fireevent : true;
+                    me.selectedRec = me.store.getAt(index);
+                    dataListView.getSelectionModel().select(me.store.getAt(index), false, fire);
+                }
+            } else {
+                dataListView.on("afterrender", Ext.bind(function (idx) {
+                    me.selectByIndex(idx);
+                },
+                this, [index]), {
+                    single: true
+                });
+            }
+        };
+        me.selectGroupItem = function (group, item) {
+            if (!me.isGroupedDataView || !dataListView) {
+                return null;
+            }
+            me.selectedRec = dataListView.selectGroupItem(group, item);
+            return me.selectedRec;
+        };
+        me.updateScrollPane = function () {
+            var plugin = dataListView.getPlugin("scrollpane");
+            if (plugin && dataListView.getEl() && dataListView.getEl().getWidth() > 0) {
+                if (plugin.settings) {
+                    plugin.settings.contentWidth = me.contentWidth;
+                }
+                plugin.updateScrollPane(dataListView.getEl().dom);
+                me.checkScrolls();
+                if (me.arrangeItems) {
+                    me.arrangeItems.call(me);
+                }
+            }
+        };
+        me.checkScrolls = function () {
+            var plugin = dataListView.getPlugin("scrollpane");
+            if (plugin && dataListView.getEl()) {
+                var jspElem = me.getEl().down(".jspPane");
+                if (jspElem.getHeight() > 0 && me.getEl().getHeight() > 0) {
+                    var i = 0;
+                    var updatescroll = setInterval(function () {
+                        if (jspElem.getHeight() > me.getEl().getHeight()) {
+                            if (me.getEl().down(".jspVerticalBar")) {
+                                clearInterval(updatescroll);
+                            } else {
+                                plugin.updateScrollPane(dataListView.getEl().dom);
+                                clearInterval(updatescroll);
+                            }
+                        }
+                        if (i++>3) {
+                            clearInterval(updatescroll);
+                        }
+                    },
+                    100);
+                }
+            }
+        };
+        me.showUpdated = function () {
+            me.updateScrollPane();
+            if (dataListView && dataListView.getEl()) {
+                dataListView.getEl().focus(50);
+                if (me.selectedRec) {
+                    dataListView.getSelectionModel().select(me.selectedRec, false, false);
+                } else {
+                    dataListView.getSelectionModel().deselectAll(false);
+                }
+            }
+        };
+        dataListView.getStore().on("datachanged", me.updateScrollPane, me, {
+            buffer: 10
+        });
+        dataListView.on("viewready", me.updateScrollPane, me);
+        me.on("resize", me.updateScrollPane, me);
+        me.on("afterlayout", me.updateScrollPane, me);
+        me.items = [dataListView];
+        this.callParent(arguments);
+    }
+});

OfficeWeb/apps/common/main/lib/component/DoubleColorPalette.js

@@ -0,0 +1,235 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.DoubleColorPalette", {
+    extend: "Ext.ColorPalette",
+    alias: "widget.cmddoublecolorpalette",
+    allowReselect: true,
+    dyncolorscount: 12,
+    width: 180,
+    maxWidth: 180,
+    baseCls: "cmp-double-colorpalette",
+    requires: ["Common.view.ExtendedColorDialog"],
+    renderTpl: ['<tpl for="colors">', '<tpl if="this.isSeparator(values)"><div class="palette-color-spacer" style="width:100%;height:10px;float:left;"></div></tpl>', '<tpl if="this.isColor(values)">', '<a href="#" class="color-{.}" style="background:#{.} "hidefocus="on">', '<em><span style="background:#{.}" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isCustom(values)">', '<a href="#" id="{id}" class="palette-color-custom {cls}" hidefocus="on">', '<em><span style="background:#FFFFFF;background-image:url({image});" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", "</tpl>", {
+        isSeparator: function (v) {
+            return typeof(v) == "string" && v == "-";
+        },
+        isColor: function (v) {
+            return typeof(v) == "string" && (/[0-9A-F]{6}|transparent/).test(v);
+        },
+        isCustom: function (v) {
+            return typeof(v) == "object";
+        }
+    }],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    },
+    onRender: function (o) {
+        this.callParent(arguments);
+        if (this.dynamiccolors) {
+            var picker = o.down(".x-color-picker");
+            if (picker) {
+                var i = -1,
+                colors = '<div class="palette-color-spacer" style="width:100%;height:10px;float:left;"></div>';
+                while (++i < this.dyncolorscount) {
+                    colors += Ext.String.format('<a href="#" class="color-dynamic-{0} dynamic-empty-color" style="background:#ffffff" color="ffffff" hidefocus="on">' + '<em><span unselectable="on">&#160;</span></em></a>', i);
+                }
+                Ext.DomHelper.insertHtml("beforeEnd", picker.dom, colors);
+            }
+            var menu = this.el.up(".x-menu");
+            if (menu) {
+                Ext.menu.Manager.menus[menu.id].addListener("beforeshow", this.updateCustomColors, this);
+            }
+            this.updateCustomColors();
+        }
+    },
+    afterRender: function (o) {
+        this.callParent(arguments);
+        if (this.lastvalue) {
+            this.select(this.lastvalue);
+        }
+    },
+    setCustomColor: function (color) {
+        color = /#?([a-fA-F0-9]{6})/.exec(color);
+        if (color) {
+            var el = this.getEl();
+            if (el) {
+                this._saveCustomColor(color[1]);
+                $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+                var child = el.down(".dynamic-empty-color");
+                if (!child) {
+                    this.updateCustomColors();
+                    child = el.down(".color-dynamic-" + (this.dyncolorscount - 1));
+                }
+                child.removeCls("dynamic-empty-color").addCls(this.selectedCls).dom.setAttribute("color", color[1]);
+                child.down("span").setStyle("background-color", "#" + color[1]).setStyle("border", "none");
+            }
+        }
+    },
+    select: function (color, suppressEvent) {
+        var el = this.getEl();
+        if (el) {
+            $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+        }
+        if (/#?[a-fA-F0-9]{6}/.test(color)) {
+            color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+        }
+        if (/^[a-fA-F0-9]{6}|transparent$/.test(color) && Ext.Array.contains(this.colors, color)) {
+            if (!Ext.Array.contains(this.colors, this.value)) {
+                this.value = false;
+            }
+            this.callParent(arguments);
+        } else {
+            if (el) {
+                var co = el.down("#" + color) || el.down('a[color="' + color + '"]');
+                if (co) {
+                    co.addCls(this.selectedCls);
+                    this.value = color.toUpperCase();
+                } else {
+                    if (el.down("a." + this.selectedCls)) {
+                        this.value = false;
+                    } else {
+                        if (this.dynamiccolors) {
+                            this.setCustomColor(color);
+                        }
+                    }
+                }
+            } else {
+                this.lastvalue = color;
+            }
+        }
+    },
+    handleClick: function (event, target) {
+        var me = this;
+        if (! (target.className.search("palette-color-custom") < 0)) {
+            event.stopEvent();
+            cmp = Ext.get(target.parentNode.id).down("a." + me.selectedCls);
+            if (!cmp || cmp.id != target.id) {
+                if (cmp) {
+                    cmp.removeCls(me.selectedCls);
+                }
+                Ext.get(target.id).addCls(me.selectedCls);
+                me.value = false;
+                me.fireEvent("select", me, target.id);
+            } else {
+                me.fireEvent("select", me, cmp.id);
+            }
+        } else {
+            if (! (target.className.search("color-transparent") < 0)) {
+                event.stopEvent();
+                cmp = Ext.get(target.parentNode.id).down("a." + me.selectedCls);
+                if (!cmp || cmp.id != target.id) {
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    Ext.get(target.id).addCls(me.selectedCls);
+                    me.value = "transparent";
+                }
+                me.fireEvent("select", me, "transparent");
+            } else {
+                if (! (target.className.search("color-dynamic") < 0)) {
+                    if (!/dynamic-empty-color/.test(target.className)) {
+                        var color = target.getAttribute("color");
+                        if (color) {
+                            me.fireEvent("select", me, color);
+                        }
+                        this.value = color.toUpperCase();
+                        $("#" + this.getEl().id + " a." + me.selectedCls).removeClass(me.selectedCls);
+                        Ext.get(target.id).addCls(me.selectedCls);
+                    } else {
+                        setTimeout(function () {
+                            me.addNewColor();
+                            Ext.menu.Manager.hideAll();
+                        },
+                        10);
+                    }
+                } else {
+                    var cmp = Ext.get(target.parentNode.id).down("a.palette-color-custom");
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    if (!/^[a-fA-F0-9]{6}$/.test(this.value) || !Ext.Array.contains(this.colors, this.value)) {
+                        this.value = false;
+                    }
+                    this.callParent(arguments);
+                }
+            }
+        }
+    },
+    addNewColor: function () {
+        var me = this;
+        var win = Ext.widget("commonextendedcolordialog", {});
+        win.addListener("onmodalresult", function (mr) {
+            me._isdlgopen = false;
+            if (mr == 1) {
+                me.setCustomColor(win.getColor());
+                me.fireEvent("select", me, win.getColor());
+            }
+        },
+        false);
+        me._isdlgopen = true;
+        win.setColor(me.value);
+        win.show();
+    },
+    isDialogOpen: function () {
+        return this._isdlgopen == true;
+    },
+    updateCustomColors: function () {
+        var picker = this.getEl();
+        if (picker) {
+            var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+            colors = colors ? colors.split(",") : [];
+            var i = -1,
+            colorEl, c = colors.length < this.dyncolorscount ? colors.length : this.dyncolorscount;
+            while (++i < c) {
+                colorEl = picker.down(".color-dynamic-" + i);
+                colorEl.removeCls("dynamic-empty-color").dom.setAttribute("color", colors[i]);
+                colorEl.down("span").setStyle("background-color", "#" + colors[i]).setStyle("border", "none");
+            }
+        }
+    },
+    _saveCustomColor: function (color) {
+        var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+        colors = colors ? colors.split(",") : [];
+        if (colors.push(color) > this.dyncolorscount) {
+            colors.shift();
+        }
+        localStorage["asc." + window.storagename + ".colors.custom"] = colors.join().toUpperCase();
+    },
+    _menuBeforeShow: function () {
+        this.updateCustomColors();
+    }
+});

OfficeWeb/apps/common/main/lib/component/GroupedDataView.js

@@ -0,0 +1,190 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.GroupedDataView", {
+    extend: "Ext.DataView",
+    alias: "widget.cmdgroupeddataview",
+    requires: (["Common.model.GroupItem", "Common.model.Group", "Ext.XTemplate"]),
+    selModel: {
+        enableKeyNav: false
+    },
+    tpl: new Ext.XTemplate('<tpl for=".">', '<div class="asc-grouped-data">', '<div class="group-description">', '<span class="description-text">{[values[this.fieldGroupName]]}</span>', "</div>", '<div class="group-items-container">', '<tpl for="getGroupItems">', '<div class="group-item">', '<span class="{iconcls}"></span>', "</div>", "</tpl>", "</div>", "</div>", '<div class="asc-grouped-data-selector"></div>', "</tpl>", {
+        compiled: true,
+        fieldGroupName: "groupname"
+    }),
+    itemSelector: "div.group-item",
+    trackOver: true,
+    overItemCls: "group-item-over",
+    cls: "grouped-data-view",
+    listeners: {
+        beforecontainerclick: function (o, e, eOpts) {
+            return false;
+        },
+        viewready: function () {
+            if (this.delayedSelection) {
+                this.getSelectionModel().doSingleSelect(this.delayedSelection);
+                this.delayedSelection = undefined;
+            }
+        }
+    },
+    constructor: function (config) {
+        if (config.selModel) {
+            config.selModel.enableKeyNav = false;
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    },
+    updateIndexes: function (startIndex, endIndex) {
+        var ns = this.all.elements,
+        records = [],
+        i;
+        this.store.each(function (item, index, count) {
+            Ext.Array.insert(records, records.length, item.getGroupItems().getRange());
+        });
+        startIndex = startIndex || 0;
+        endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
+        for (i = startIndex; i <= endIndex; i++) {
+            ns[i].viewIndex = i;
+            ns[i].viewRecordId = records[i].internalId;
+            if (!ns[i].boundView) {
+                ns[i].boundView = this.id;
+            }
+        }
+    },
+    getRecord: function (node) {
+        var record_out, record, i = -1,
+        c = this.store.getCount();
+        while (!record_out && ++i < c) {
+            record = this.store.getAt(i);
+            if (record) {
+                record_out = record.getGroupItems().data.getByKey(Ext.getDom(node).viewRecordId);
+            }
+        }
+        return record_out;
+    },
+    onRender: function (cmp) {
+        this.callParent(arguments);
+        var me = this;
+        me.el.set({
+            tabIndex: -1
+        });
+        me.keyNav = Ext.create("Ext.util.KeyNav", me.el, {
+            down: Ext.pass(me.onNavKey, [1, 1], me),
+            right: Ext.pass(me.onNavKey, [1, null], me),
+            left: Ext.pass(me.onNavKey, [-1, null], me),
+            up: Ext.pass(me.onNavKey, [-1, -1], me),
+            scope: me
+        });
+    },
+    onNavKey: function (step, shift) {
+        step = step || 1;
+        var selected = this.getSelectionModel().getSelection()[0],
+        numRecords = this.all.elements.length,
+        idx;
+        if (selected) {
+            if (shift) {
+                var info = this.getIndexInStore(selected);
+                step = this.getShiftedStep(info, shift);
+            }
+            idx = this.indexOf(this.getNode(selected)) + step;
+        } else {
+            idx = 0;
+        }
+        if (idx < 0) {
+            idx = numRecords - 1;
+        } else {
+            if (idx >= numRecords) {
+                idx = 0;
+            }
+        }
+        var record = this.getRecord(this.all.elements[idx]);
+        this.getSelectionModel().doSingleSelect(record);
+    },
+    getIndexInStore: function (record) {
+        var out = [],
+        group,
+        localindex,
+        groupindex = -1,
+        c = this.store.getCount();
+        while (++groupindex < c) {
+            group = this.store.getAt(groupindex);
+            localindex = group.getGroupItems().indexOf(record);
+            if (! (localindex < 0)) {
+                out = [groupindex, localindex, group.getGroupItems().getCount()];
+                break;
+            }
+        }
+        return out;
+    },
+    getShiftedStep: function (info, direct) {
+        var groupindex = info[0] + direct;
+        if (groupindex < 0) {
+            groupindex = this.store.getCount() - 1;
+        } else {
+            if (! (groupindex < this.store.getCount())) {
+                groupindex = 0;
+            }
+        }
+        var group = this.store.getAt(groupindex);
+        if (direct > 0) {
+            var newindex = info[1] < group.getGroupItems().getCount() ? info[1] : group.getGroupItems().getCount() - 1;
+            newindex += info[2] - info[1];
+        } else {
+            newindex = info[1] < group.getGroupItems().getCount() ? info[1] - group.getGroupItems().getCount() : -1;
+            newindex -= info[1];
+        }
+        return newindex;
+    },
+    refresh: function () {
+        this.callParent(arguments);
+    },
+    selectGroupItem: function (group, item) {
+        var record = this.store.findRecord("group", group);
+        if (record) {
+            record = record.getGroupItems().findRecord("groupitem", item);
+            if (!this.rendered) {
+                this.delayedSelection = record;
+            } else {
+                if (record) {
+                    this.getSelectionModel().doSingleSelect(record);
+                }
+            }
+        }
+        return record;
+    },
+    getSelected: function () {
+        return this.delayedSelection || this.getSelectionModel().getSelection()[0];
+    }
+});

OfficeWeb/apps/common/main/lib/component/HSBColorPicker.js

@@ -0,0 +1,216 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.HSBColorPicker", {
+    extend: "Ext.Component",
+    alias: "widget.hsbcolorpicker",
+    requires: ["Common.component.util.RGBColor", "Ext.XTemplate"],
+    baseCls: "cmp-hsb-colorpicker",
+    allowEmptyColor: false,
+    changeSaturation: true,
+    showCurrentColor: true,
+    config: {
+        color: "#ff0000"
+    },
+    renderTpl: ['<div class="{baseCls}-root">', '<tpl if="showCurrentColor">', '<div class="{baseCls}-top-panel">', '<span class="{baseCls}-color-value">', '<span class="transparent-color"></span>', "</span>", '<div class="{baseCls}-color-text"></div>', "</div>", "</tpl>", "<div>", '<div class="{baseCls}-cnt-hb">', '<div class="{baseCls}-cnt-hb-arrow"></div>', "</div>", '<tpl if="changeSaturation">', '<div class="{baseCls}-cnt-root">', '<div class="{baseCls}-cnt-sat">', '<div class="{baseCls}-cnt-sat-arrow"></div>', "</div>", "</div>", "</tpl>", "</div>", '<tpl if="allowEmptyColor">', '<div class="{baseCls}-empty-color">{textNoColor}</div>', "</tpl>", "</div>"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        arrowSatBrightness, arrowHue, areaSatBrightness, areaHue, previewColor, previewTransparentColor, previewColorText, btnNoColor, hueVal = 0,
+        saturationVal = 100,
+        brightnessVal = 100;
+        var onUpdateColor = function (hsb, transparent) {
+            var rgbColor = new Common.util.RGBColor(Ext.String.format("hsb({0}, {1}, {2})", hsb.h, hsb.s, hsb.b)),
+            hexColor = rgbColor.toHex();
+            me.color = transparent ? "transparent" : hexColor;
+            refreshUI();
+            me.fireEvent("changecolor", me, me.color);
+        };
+        var refreshUI = function () {
+            if (previewColor && previewTransparentColor) {
+                if (me.color == "transparent") {
+                    previewTransparentColor.show();
+                } else {
+                    previewColor.setStyle("background-color", me.color);
+                    previewTransparentColor.hide();
+                }
+            }
+            if (areaSatBrightness) {
+                areaSatBrightness.setStyle("background-color", new Common.util.RGBColor(Ext.String.format("hsb({0}, 100, 100)", hueVal)).toHex());
+            }
+            if (previewColorText) {
+                previewColorText.dom.innerHTML = (me.color == "transparent") ? me.textNoColor : me.color.toUpperCase();
+            }
+            if (arrowSatBrightness && arrowHue) {
+                arrowSatBrightness.setLeft(saturationVal + "%");
+                arrowSatBrightness.setTop(100 - brightnessVal + "%");
+                arrowHue.setTop(parseInt(hueVal * 100 / 360) + "%");
+            }
+        };
+        var onSBAreaMouseMove = function (event, element, eOpts) {
+            if (arrowSatBrightness && areaSatBrightness) {
+                var pos = [Math.max(0, Math.min(100, (parseInt((event.getX() - areaSatBrightness.getX()) / areaSatBrightness.getWidth() * 100)))), Math.max(0, Math.min(100, (parseInt((event.getY() - areaSatBrightness.getY()) / areaSatBrightness.getHeight() * 100))))];
+                arrowSatBrightness.setLeft(pos[0] + "%");
+                arrowSatBrightness.setTop(pos[1] + "%");
+                saturationVal = pos[0];
+                brightnessVal = 100 - pos[1];
+                onUpdateColor({
+                    h: hueVal,
+                    s: saturationVal,
+                    b: brightnessVal
+                });
+            }
+        };
+        var onHueAreaMouseMove = function (event, element, eOpts) {
+            if (arrowHue && areaHue) {
+                var pos = Math.max(0, Math.min(100, (parseInt((event.getY() - areaHue.getY()) / areaHue.getHeight() * 100))));
+                arrowHue.setTop(pos + "%");
+                hueVal = parseInt(360 * pos / 100);
+                onUpdateColor({
+                    h: hueVal,
+                    s: saturationVal,
+                    b: brightnessVal
+                });
+            }
+        };
+        var onSBAreaMouseDown = function (event, element, eOpts) {
+            Ext.getDoc().on("mouseup", onSBAreaMouseUp);
+            Ext.getDoc().on("mousemove", onSBAreaMouseMove);
+        };
+        var onSBAreaMouseUp = function (event, element, eOpts) {
+            Ext.getDoc().un("mouseup", onSBAreaMouseUp);
+            Ext.getDoc().un("mousemove", onSBAreaMouseMove);
+            onSBAreaMouseMove(event, element, eOpts);
+        };
+        var onHueAreaMouseDown = function (event, element, eOpts) {
+            Ext.getDoc().on("mouseup", onHueAreaMouseUp);
+            Ext.getDoc().on("mousemove", onHueAreaMouseMove);
+            onHueAreaMouseMove(event, element, eOpts);
+        };
+        var onHueAreaMouseUp = function (event, element, eOpts) {
+            Ext.getDoc().un("mouseup", onHueAreaMouseUp);
+            Ext.getDoc().un("mousemove", onHueAreaMouseMove);
+        };
+        var onNoColorClick = function (cnt) {
+            var hsbColor = new Common.util.RGBColor(me.color).toHSB();
+            onUpdateColor(hsbColor, true);
+        };
+        var onAfterRender = function (ct) {
+            var rootEl = me.getEl(),
+            hsbColor;
+            if (rootEl) {
+                arrowSatBrightness = rootEl.down("." + me.baseCls + "-cnt-hb-arrow");
+                arrowHue = rootEl.down("." + me.baseCls + "-cnt-sat-arrow");
+                areaSatBrightness = rootEl.down("." + me.baseCls + "-cnt-hb");
+                areaHue = rootEl.down("." + me.baseCls + "-cnt-sat");
+                previewColor = rootEl.down("." + me.baseCls + "-color-value");
+                previewColorText = rootEl.down("." + me.baseCls + "-color-text");
+                btnNoColor = rootEl.down("." + me.baseCls + "-empty-color");
+                if (previewColor) {
+                    previewTransparentColor = previewColor.child(".transparent-color");
+                }
+                if (areaSatBrightness) {
+                    areaSatBrightness.un("mousedown");
+                    areaSatBrightness.on("mousedown", onSBAreaMouseDown, me);
+                }
+                if (areaHue) {
+                    areaHue.un("mousedown");
+                    areaHue.on("mousedown", onHueAreaMouseDown, me);
+                }
+                if (btnNoColor) {
+                    btnNoColor.un("click");
+                    btnNoColor.on("click", onNoColorClick, me);
+                }
+                if (me.color == "transparent") {
+                    hsbColor = {
+                        h: 0,
+                        s: 100,
+                        b: 100
+                    };
+                } else {
+                    hsbColor = new Common.util.RGBColor(me.color).toHSB();
+                }
+                hueVal = hsbColor.h;
+                saturationVal = hsbColor.s;
+                brightnessVal = hsbColor.b;
+                if (hueVal == saturationVal && hueVal == brightnessVal && hueVal == 0) {
+                    saturationVal = 100;
+                }
+                refreshUI();
+            }
+        };
+        me.setColor = function (value) {
+            if (me.color == value) {
+                return;
+            }
+            var hsbColor;
+            if (value == "transparent") {
+                hsbColor = {
+                    h: 0,
+                    s: 100,
+                    b: 100
+                };
+            } else {
+                hsbColor = new Common.util.RGBColor(value).toHSB();
+            }
+            hueVal = hsbColor.h;
+            saturationVal = hsbColor.s;
+            brightnessVal = hsbColor.b;
+            if (hueVal == saturationVal && hueVal == brightnessVal && hueVal == 0) {
+                saturationVal = 100;
+            }
+            me.color = value;
+            refreshUI();
+        };
+        me.on("afterrender", onAfterRender, this);
+        me.callParent(arguments);
+        this.addEvents("changecolor");
+    },
+    onRender: function (ct, position) {
+        var me = this;
+        Ext.applyIf(me.renderData, me.getTemplateArgs());
+        me.callParent(arguments);
+    },
+    getTemplateArgs: function () {
+        var me = this;
+        return {
+            allowEmptyColor: me.allowEmptyColor,
+            changeSaturation: me.changeSaturation,
+            textNoColor: me.textNoColor,
+            showCurrentColor: me.showCurrentColor
+        };
+    },
+    textNoColor: "No Color"
+});

OfficeWeb/apps/common/main/lib/component/IndeterminateCheckBox.js

@@ -0,0 +1,95 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.IndeterminateCheckBox", {
+    extend: "Ext.form.field.Checkbox",
+    alias: "widget.cmdindeterminatecheckbox",
+    value: "unchecked",
+    indeterminate: false,
+    indeterminateCls: Ext.baseCSSPrefix + "form-cb-indeterminate",
+    onBoxClick: function (e) {
+        var me = this;
+        if (!me.disabled && !me.readOnly) {
+            if (this.indeterminate) {
+                this.indeterminate = false;
+                this.setValue(false);
+            } else {
+                this.setValue(!this.checked);
+            }
+        }
+    },
+    getRawValue: function () {
+        return this.value;
+    },
+    getValue: function () {
+        return this.value;
+    },
+    setRawValue: function (value) {
+        var me = this,
+        inputEl = me.inputEl,
+        inputValue = me.inputValue,
+        checked = (value === true || value === "true" || value === "1" || value === 1 || (((Ext.isString(value) || Ext.isNumber(value)) && inputValue) ? value == inputValue : me.onRe.test(value))),
+        indeterminate = (value === "indeterminate");
+        if (inputEl) {
+            inputEl.dom.setAttribute("aria-checked", checked);
+            inputEl.dom.setAttribute("aria-indeterminate", indeterminate);
+            me[indeterminate ? "addCls" : "removeCls"](me.indeterminateCls);
+            me[checked ? "addCls" : "removeCls"](me.checkedCls);
+        }
+        me.checked = me.rawValue = checked;
+        me.indeterminate = indeterminate;
+        me.value = indeterminate ? "indeterminate" : (checked ? "checked" : "unchecked");
+        return checked;
+    },
+    setValue: function (checked) {
+        var me = this;
+        var setFn = function (value, suspendEvent) {
+            if (Ext.isArray(value)) {
+                me.getManager().getByName(me.name).each(function (cb) {
+                    cb.setValue(Ext.Array.contains(value, cb.inputValue));
+                });
+            } else {
+                me.setRawValue(value);
+                if (! (Ext.isDefined(suspendEvent) && suspendEvent)) {
+                    me.checkChange();
+                }
+            }
+            return me;
+        };
+        if (this.rendered) {
+            setFn.call(this, checked);
+        } else {
+            this.on("afterrender", Ext.bind(setFn, this, [checked, true]), {
+                single: true
+            });
+        }
+    }
+});

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

@@ -0,0 +1,143 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.LoadMask", {
+    extend: "Ext.Component",
+    alias: "widget.cmdloadmask",
+    mixins: {
+        floating: "Ext.util.Floating"
+    },
+    useMsg: true,
+    disabled: false,
+    baseCls: "cmd-loadmask",
+    config: {
+        title: ""
+    },
+    renderTpl: ['<div style="position:relative" class="{baseCls}-body">', "<div>", '<div class="{baseCls}-image"></div>', '<div class="{baseCls}-title"></div>', "</div>", '<div class="{baseCls}-pwd-ct">', '<div class="{baseCls}-pwd-by">POWERED BY</div>', '<div class="{baseCls}-pwd-tm">ONLYOFFICE</div>', "</div>", "</div>"],
+    modal: true,
+    width: "auto",
+    floating: {
+        shadow: false
+    },
+    focusOnToFront: false,
+    constructor: function (el, config) {
+        var me = this;
+        if (el.isComponent) {
+            me.ownerCt = el;
+            me.bindComponent(el);
+        } else {
+            me.ownerCt = new Ext.Component({
+                el: Ext.get(el),
+                rendered: true,
+                componentLayoutCounter: 1
+            });
+            me.container = el;
+        }
+        me.callParent([config]);
+        me.renderSelectors = {
+            titleEl: "." + me.baseCls + "-title"
+        };
+    },
+    bindComponent: function (comp) {
+        this.mon(comp, {
+            resize: this.onComponentResize,
+            scope: this
+        });
+    },
+    applyTitle: function (title) {
+        var me = this;
+        me.title = title;
+        if (me.rendered) {
+            me.titleEl.update(me.title);
+            var parent = me.floatParent ? me.floatParent.getTargetEl() : me.container;
+            var xy = me.getEl().getAlignToXY(parent, "c-c");
+            var pos = parent.translatePoints(xy[0], xy[1]);
+            if (Ext.isDefined(pos.left) || Ext.isDefined(pos.top)) {
+                me.setPosition(pos.left, pos.top);
+            }
+        }
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this.container = this.floatParent.getContentTarget();
+    },
+    onComponentResize: function () {
+        var me = this;
+        if (me.rendered && me.isVisible()) {
+            me.toFront();
+            me.center();
+        }
+    },
+    onDisable: function () {
+        this.callParent(arguments);
+        if (this.loading) {
+            this.onLoad();
+        }
+    },
+    onBeforeLoad: function () {
+        var me = this,
+        owner = me.ownerCt || me.floatParent,
+        origin;
+        if (!this.disabled) {
+            if (owner.componentLayoutCounter) {
+                Ext.Component.prototype.show.call(me);
+            } else {
+                origin = owner.afterComponentLayout;
+                owner.afterComponentLayout = function () {
+                    owner.afterComponentLayout = origin;
+                    origin.apply(owner, arguments);
+                    if (me.loading) {
+                        Ext.Component.prototype.show.call(me);
+                    }
+                };
+            }
+        }
+    },
+    onHide: function () {
+        var me = this;
+        me.callParent(arguments);
+        me.showOnParentShow = true;
+    },
+    onShow: function () {
+        var me = this;
+        me.callParent(arguments);
+        me.loading = true;
+        me.setTitle(me.title);
+    },
+    afterShow: function () {
+        this.callParent(arguments);
+        this.center();
+    },
+    onLoad: function () {
+        this.loading = false;
+        Ext.Component.prototype.hide.call(this);
+    }
+});

OfficeWeb/apps/common/main/lib/component/MenuDataViewPicker.js

@@ -0,0 +1,82 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.MenuDataViewPicker", {
+    extend: "Ext.menu.Menu",
+    alias: "widget.cmdmenudataviewpicker",
+    requires: ["Common.component.DataViewPicker"],
+    hideOnClick: true,
+    hideMode: "display",
+    constructor: function (config) {
+        if (!config || !config.viewData) {
+            throw Error("Common.component.MenuDataViewPicker creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        delete cfg.listeners;
+        Ext.apply(me, {
+            plain: true,
+            showSeparator: false,
+            items: Ext.applyIf({
+                xtype: "cmddataviewpicker",
+                padding: (Ext.isDefined(cfg.pickerpadding)) ? cfg.pickerpadding : "2px 4px 1px 2px",
+                store: cfg.store
+            },
+            cfg)
+        });
+        me.callParent(arguments);
+        me.picker = me.down("cmddataviewpicker");
+        me.relayEvents(me.picker, ["select", "itemmouseenter", "itemmouseleave"]);
+        if (me.hideOnClick) {
+            me.on("select", me.hidePickerOnSelect, me);
+        }
+        me.on("resize", function (cnt, adjWidth, adjHeight, eOpts) {
+            if (me.applyContentWidth && adjWidth >= 20) {
+                me.picker.contentWidth = adjWidth - 20;
+            }
+            me.picker.setSize(adjWidth, adjHeight);
+        },
+        this);
+        me.on("show", function (cnt) {
+            me.picker.showUpdated();
+        },
+        this);
+    },
+    hidePickerOnSelect: function (picker, columns, rows) {
+        Ext.menu.Manager.hideAll();
+    }
+});

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

@@ -0,0 +1,254 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.MetricSpinner", {
+    extend: "Ext.form.field.Spinner",
+    alias: "widget.commonmetricspinner",
+    defaultUnit: "px",
+    minValue: 0,
+    maxValue: 100,
+    step: 1,
+    textAlign: "right",
+    allowAuto: false,
+    autoText: "Auto",
+    mouseWheelEnabled: false,
+    constructor: function (config) {
+        var add = function (a, b, precision) {
+            var x = Math.pow(10, precision || 2);
+            return (Math.round(a * x) + Math.round(b * x)) / x;
+        };
+        var oldValue = this.minValue;
+        this.setValue = function (value, suspendchange) {
+            if (!Ext.isDefined(value) || value === "") {
+                this.value = "";
+            } else {
+                if (this.allowAuto && (Math.abs(parseFloat(value) + 1) < 0.0001 || value == this.autoText)) {
+                    this.value = this.autoText;
+                } else {
+                    var number = add(parseFloat(value), 0, 3);
+                    if (!Ext.isDefined(number) || isNaN(number)) {
+                        number = oldValue;
+                    }
+                    var units = this.defaultUnit;
+                    if (Ext.isDefined(value.match)) {
+                        var searchUnits = value.match(/(px|em|%|en|ex|pt|in|cm|mm|pc|s|ms)$/i);
+                        if (null !== searchUnits && Ext.isDefined(searchUnits[0])) {
+                            units = searchUnits[0].toLowerCase();
+                        }
+                    }
+                    if (this.defaultUnit !== units) {
+                        number = this._recalcUnits(number, units);
+                    }
+                    if (number > this.maxValue) {
+                        number = this.maxValue;
+                    }
+                    if (number < this.minValue) {
+                        number = this.minValue;
+                    }
+                    this.value = (number + " " + this.defaultUnit).trim();
+                    oldValue = number;
+                }
+            }
+            if (suspendchange !== true) {
+                this.checkChange();
+            }
+            var setFn = function (value) {
+                this.setRawValue(value);
+            };
+            if (this.rendered) {
+                setFn.call(this, this.value);
+            } else {
+                this.on("afterrender", Ext.bind(setFn, this, [this.value]), {
+                    single: true
+                });
+            }
+        };
+        this.onSpinUp = function () {
+            var me = this;
+            if (!me.readOnly) {
+                var val = me.step;
+                if (me.getValue() !== "") {
+                    if (me.allowAuto && me.getValue() == me.autoText) {
+                        val = me.minValue - me.step;
+                    } else {
+                        val = parseFloat(me.getValue());
+                    }
+                    if (isNaN(val)) {
+                        val = oldValue;
+                    }
+                } else {
+                    val = me.minValue - me.step;
+                }
+                me.setValue((add(val, me.step, 3) + " " + this.defaultUnit).trim(), true);
+            }
+        };
+        this.onSpinDown = function () {
+            var me = this;
+            if (!me.readOnly) {
+                var val = me.step;
+                if (me.getValue() !== "") {
+                    if (me.allowAuto && me.getValue() == me.autoText) {
+                        val = me.minValue;
+                    } else {
+                        val = parseFloat(me.getValue());
+                    }
+                    if (isNaN(val)) {
+                        val = oldValue;
+                    }
+                    if (me.allowAuto && add(val, -me.step, 3) < me.minValue) {
+                        me.setValue(me.autoText, true);
+                        return;
+                    }
+                } else {
+                    val = me.minValue;
+                }
+                me.setValue((add(val, -me.step, 3) + " " + this.defaultUnit).trim(), true);
+            }
+        };
+        this.callParent(arguments);
+    },
+    initComponent: function () {
+        if (!Ext.isDefined(this.value)) {
+            this.value = (this.minValue + " " + this.defaultUnit).trim();
+        }
+        this.on("specialkey", function (f, e) {
+            if (e.getKey() == e.ENTER) {
+                this.onEnterValue();
+                e.stopEvent();
+            }
+        },
+        this);
+        this.callParent(arguments);
+    },
+    setDefaultUnit: function (unit) {
+        if (this.defaultUnit != unit) {
+            var oldUnit = this.defaultUnit;
+            this.defaultUnit = unit;
+            this.setMinValue(this._recalcUnits(this.minValue, oldUnit));
+            this.setMaxValue(this._recalcUnits(this.maxValue, oldUnit));
+            this.setValue(this._recalcUnits(this.getNumberValue(), oldUnit), true);
+        }
+    },
+    setMinValue: function (unit) {
+        this.minValue = unit;
+    },
+    setMaxValue: function (unit) {
+        this.maxValue = unit;
+    },
+    setStep: function (step) {
+        this.step = step;
+    },
+    getNumberValue: function () {
+        if (this.allowAuto && this.value == this.autoText) {
+            return -1;
+        } else {
+            return parseFloat(this.value);
+        }
+    },
+    getUnitValue: function () {
+        return this.defaultUnit;
+    },
+    getValue: function () {
+        return this.value;
+    },
+    onEnterValue: function () {
+        if (Ext.isDefined(this.inputEl)) {
+            var val = this.inputEl.getValue();
+            this.setValue((val === "") ? this.value : val);
+        }
+    },
+    afterRender: function () {
+        var me = this;
+        this.callParent(arguments);
+        if (this.inputEl) {
+            Ext.DomHelper.applyStyles(this.inputEl, Ext.String.format("text-align:{0}", this.textAlign));
+        }
+        if (this.triggerRepeater) {
+            this.triggerRepeater.on("mouseup", function () {
+                me.checkChange();
+            },
+            this);
+        }
+    },
+    onBlur: function (field, eOpt) {
+        if (Ext.isDefined(this.inputEl)) {
+            var val = this.inputEl.getValue();
+            this.setValue((val === "") ? this.value : val);
+        }
+    },
+    _recalcUnits: function (value, fromUnit) {
+        if (fromUnit.match(/(s|ms)$/i) && this.defaultUnit.match(/(s|ms)$/i)) {
+            var v_out = value;
+            if (fromUnit == "ms") {
+                v_out = v_out / 1000;
+            }
+            if (this.defaultUnit == "ms") {
+                v_out = v_out * 1000;
+            }
+            return v_out;
+        }
+        if (fromUnit.match(/(pt|in|cm|mm|pc)$/i) === null || this.defaultUnit.match(/(pt|in|cm|mm|pc)$/i) === null) {
+            return value;
+        }
+        var v_out = value;
+        if (fromUnit == "cm") {
+            v_out = v_out * 10;
+        } else {
+            if (fromUnit == "pt") {
+                v_out = v_out * 25.4 / 72;
+            } else {
+                if (fromUnit == "in") {
+                    v_out = v_out * 25.4;
+                } else {
+                    if (fromUnit == "pc") {
+                        v_out = v_out * 25.4 / 6;
+                    }
+                }
+            }
+        }
+        if (this.defaultUnit == "cm") {
+            v_out = v_out / 10;
+        } else {
+            if (this.defaultUnit == "pt") {
+                v_out = parseFloat(Ext.Number.toFixed(v_out * 72 / 25.4, 3));
+            } else {
+                if (this.defaultUnit == "in") {
+                    v_out = v_out / 25.4;
+                } else {
+                    if (this.defaultUnit == "pc") {
+                        v_out = v_out * 6 / 25.4;
+                    }
+                }
+            }
+        }
+        return v_out;
+    }
+});

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

@@ -0,0 +1,182 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.MultiSliderGradient", {
+    extend: "Ext.slider.Multi",
+    requires: ([]),
+    uses: [],
+    alias: "widget.cmdmultislidergradient",
+    cls: "asc-multi-slider-gradient",
+    values: [0, 100],
+    increment: 1,
+    minValue: 0,
+    maxValue: 100,
+    clickRange: [1, 20],
+    colorValues: ["#000000", "#ffffff"],
+    currentThumb: 0,
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        if (me.initialConfig.listeners && me.initialConfig.listeners.change) {
+            var f = me.initialConfig.listeners.change;
+            me.initialConfig.listeners.change = function (slider, newvalue, thumb) {
+                me.changeGradientStyle();
+                f.call(me, slider, newvalue, thumb);
+            };
+        }
+        this.styleStr = "";
+        if (Ext.isChrome && Ext.chromeVersion < 10 || Ext.isSafari && Ext.safariVersion < 5.1) {
+            this.styleStr = "-webkit-gradient(linear, left top, right top, color-stop({1}%,{0}), color-stop({3}%,{2})); /* Chrome,Safari4+ */";
+        } else {
+            if (Ext.isChrome || Ext.isSafari) {
+                this.styleStr = "-webkit-linear-gradient(left, {0} {1}%, {2} {3}%)";
+            } else {
+                if (Ext.isGecko) {
+                    this.styleStr = "-moz-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                } else {
+                    if (Ext.isOpera && Ext.operaVersion > 11) {
+                        this.styleStr = "-o-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                    } else {
+                        if (Ext.isIE) {
+                            this.styleStr = "-ms-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                        }
+                    }
+                }
+            }
+        }
+        this.callParent(arguments);
+        this.addEvents("thumbclick");
+        this.addEvents("thumbdblclick");
+    },
+    listeners: {
+        afterrender: function (cmp) {
+            var me = this,
+            style = "";
+            if (me.thumbs) {
+                for (var i = 0; i < me.thumbs.length; i++) {
+                    if (me.thumbs[i] && me.thumbs[i].tracker) {
+                        me.thumbs[i].tracker.addListener("mousedown", Ext.bind(me.setActiveThumb, me, [i, true]), me);
+                        me.thumbs[i].tracker.el.addListener("dblclick", function () {
+                            me.fireEvent("thumbdblclick", me);
+                        },
+                        me);
+                    }
+                }
+                me.setActiveThumb(0);
+                if (me.innerEl) {
+                    if (!Ext.isEmpty(me.styleStr)) {
+                        style = Ext.String.format(me.styleStr, me.colorValues[0], 0, me.colorValues[1], 100);
+                        me.innerEl.setStyle("background", style);
+                    }
+                    if (Ext.isIE) {
+                        style = Ext.String.format("progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )", me.colorValues[0], me.colorValues[1]);
+                        me.innerEl.setStyle("filter", style);
+                    }
+                    style = Ext.String.format("linear-gradient(to right, {0} {1}%, {2} {3}%)", me.colorValues[0], 0, me.colorValues[1], 100);
+                    me.innerEl.setStyle("background", style);
+                }
+            }
+        }
+    },
+    setActiveThumb: function (index, fireevent) {
+        this.currentThumb = index;
+        this.thumbs[index].el.addCls("active-thumb");
+        for (var j = 0; j < this.thumbs.length; j++) {
+            if (index == j) {
+                continue;
+            }
+            this.thumbs[j].el.removeCls("active-thumb");
+        }
+        if (fireevent) {
+            this.fireEvent("thumbclick", this, index);
+        }
+    },
+    setColorValue: function (color, index) {
+        var ind = (index !== undefined) ? index : this.currentThumb;
+        this.colorValues[ind] = color;
+        this.changeGradientStyle();
+    },
+    getColorValue: function (index) {
+        var ind = (index !== undefined) ? index : this.currentThumb;
+        return this.colorValues[ind];
+    },
+    changeGradientStyle: function () {
+        if (this.innerEl) {
+            var style;
+            if (!Ext.isEmpty(this.styleStr)) {
+                style = Ext.String.format(this.styleStr, this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+                this.innerEl.setStyle("background", style);
+            }
+            if (Ext.isIE) {
+                style = Ext.String.format("progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )", this.colorValues[0], this.colorValues[1]);
+                this.innerEl.setStyle("filter", style);
+            }
+            style = Ext.String.format("linear-gradient(to right, {0} {1}%, {2} {3}%)", this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+            this.innerEl.setStyle("background", style);
+        }
+    },
+    getNearest: function (local, prop) {
+        var me = this,
+        localValue = prop == "top" ? me.innerEl.getHeight() - local[prop] : local[prop],
+        clickValue = me.reverseValue(localValue),
+        nearestDistance = (me.maxValue - me.minValue) + 5,
+        index = 0,
+        nearest = null,
+        thumbs = me.thumbs,
+        i = 0,
+        len = thumbs.length,
+        thumb,
+        value,
+        dist;
+        for (; i < len; i++) {
+            thumb = me.thumbs[i];
+            value = thumb.value;
+            dist = Math.abs(value - clickValue);
+            if (Math.abs(dist <= nearestDistance)) {
+                if (me.constrainThumbs) {
+                    var above = me.thumbs[i + 1];
+                    var below = me.thumbs[i - 1];
+                    if (below !== undefined && clickValue < below.value) {
+                        continue;
+                    }
+                    if (above !== undefined && clickValue > above.value) {
+                        continue;
+                    }
+                }
+                nearest = thumb;
+                index = i;
+                nearestDistance = dist;
+            }
+        }
+        return nearest;
+    }
+});

OfficeWeb/apps/common/main/lib/component/SearchField.js

@@ -0,0 +1,137 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.SearchField", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonsearchfield",
+    height: 22,
+    layout: {
+        type: "hbox",
+        align: "stretch"
+    },
+    cls: "common-searchfield",
+    require: ["Ext.data.Store", "Ext.button.Button", "Ext.container.Container"],
+    initComponent: function () {
+        var me = this;
+        me.searching = false;
+        me.txtSearchQuery = Ext.create("Ext.form.field.Text", {
+            flex: 1,
+            emptyText: this.emptyText,
+            tabIndex: this.tabIndex || -1,
+            listeners: {
+                specialkey: function (o, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.stopSearch();
+                        me.startSearch();
+                    } else {
+                        if (e.getKey() == e.TAB) {
+                            me.stopSearch();
+                            me.focus();
+                            me.blur();
+                        }
+                    }
+                },
+                change: function (o, e) {
+                    me.btnClear.setVisible(!me.isValueEmpty());
+                },
+                blur: function (o, e) {
+                    if (!me.isValueValid()) {
+                        me.clear();
+                    }
+                }
+            }
+        });
+        me.btnClear = Ext.create("Ext.button.Button", {
+            iconCls: "search-btn-clear-icon",
+            hidden: true,
+            listeners: {
+                click: function () {
+                    me.searching ? me.stopSearch() : me.clear();
+                }
+            }
+        });
+        me.items = [me.txtSearchQuery, me.btnClear];
+        me.relayEvents(me.txtSearchQuery, ["change"]);
+        me.addEvents("searchstart", "searchstop", "searchclear");
+        me.callParent(arguments);
+    },
+    startSearch: function (suppressEvent) {
+        var me = this;
+        if (!me.searching && me.isValueValid()) {
+            me.searching = true;
+            me.btnClear.setIconCls("search-btn-start-icon").toggle(true).disable();
+            if (!suppressEvent) {
+                me.fireEvent("searchstart", me, me.getText());
+            }
+        }
+    },
+    stopSearch: function (suppressEvent) {
+        var me = this;
+        if (me.searching) {
+            me.searching = false;
+            me.btnClear.setIconCls("search-btn-clear-icon").toggle(false).enable();
+            if (!suppressEvent) {
+                me.fireEvent("searchstop", me);
+            }
+        }
+    },
+    clear: function (suppressEvent) {
+        var me = this;
+        if (!me.searching) {
+            me.txtSearchQuery.reset();
+            if (!suppressEvent) {
+                me.fireEvent("searchclear", me);
+            }
+        }
+    },
+    isValueValid: function () {
+        var value = this.txtSearchQuery.getValue();
+        return !Ext.isEmpty(value);
+    },
+    isValueEmpty: function () {
+        return this.txtSearchQuery.getValue().length == 0;
+    },
+    setText: function (text) {
+        this.txtSearchQuery.setValue(text);
+    },
+    getText: function () {
+        return this.txtSearchQuery.getValue();
+    },
+    setValue: function (text) {
+        this.txtSearchQuery.setValue(text);
+    },
+    getValue: function () {
+        return this.txtSearchQuery.getValue();
+    },
+    focus: function (selectText, delay) {
+        this.txtSearchQuery.focus(selectText, delay);
+    }
+});

OfficeWeb/apps/common/main/lib/component/SplitColorButton.js

@@ -0,0 +1,106 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.SplitColorButton", {
+    extend: "Ext.button.Split",
+    alias: "widget.cmdsplitcolorbutton",
+    color: "FF0000",
+    colorHeight: 4,
+    verticalOffset: 0,
+    horizontalOffset: 0,
+    initComponent: function () {
+        this.addEvents("changecolor");
+        this.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this.on({
+            disable: function (cnt, eOpts) {
+                if (this.getEl()) {
+                    var colorRect = this.getEl().down(".x-btn-color");
+                    colorRect && colorRect.applyStyles({
+                        "background-color": "#9c9c9c"
+                    });
+                }
+            },
+            enable: function (cnt, eOpts) {
+                var colorRect = this.getEl().down(".x-btn-color");
+                if (colorRect) {
+                    colorRect.applyStyles({
+                        "background-color": this.color == "transparent" ? this.color : "#" + this.color
+                    });
+                }
+            }
+        },
+        this);
+        var btn = this.getEl().down("button");
+        if (btn) {
+            Ext.DomHelper.append(btn, {
+                tag: "span",
+                cls: "x-btn-color"
+            });
+            var colorRect = btn.child(".x-btn-color");
+            colorRect.applyStyles({
+                position: "absolute",
+                left: this.verticalOffset + "px",
+                top: btn.getHeight() - this.colorHeight - this.horizontalOffset + "px",
+                "background-color": "#" + this.color
+            });
+            if (this.isDisabled()) {
+                colorRect.applyStyles({
+                    "background-color": "#9c9c9c"
+                });
+            }
+            colorRect.setSize(btn.getWidth() - 2 * this.verticalOffset, this.colorHeight);
+        }
+    },
+    setColor: function (color, fire) {
+        this.color = color;
+        var colorRect = this.getEl().down(".x-btn-color");
+        if (colorRect) {
+            if (this.isDisabled()) {
+                colorRect.applyStyles({
+                    "background-color": "#9c9c9c"
+                });
+            } else {
+                colorRect.applyStyles({
+                    "background-color": this.color == "transparent" ? this.color : "#" + this.color
+                });
+            }
+        }
+        if (fire !== false) {
+            this.fireEvent("changecolor", this, color);
+        }
+    },
+    getColor: function () {
+        return this.color || null;
+    }
+});

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

@@ -0,0 +1,102 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.SynchronizeTip", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonsynchronizetip",
+    cls: "asc-synchronizetip",
+    requires: ["Ext.button.Button", "Ext.form.Label"],
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    width: 240,
+    height: 95,
+    hideMode: "visibility",
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.addEvents("dontshowclick");
+        me.addEvents("closeclick");
+        var btnClose = Ext.widget("button", {
+            cls: "btn-close-tip",
+            iconCls: "icon-close-tip",
+            listeners: {
+                click: function () {
+                    me.fireEvent("closeclick", me);
+                }
+            }
+        });
+        me.items = [{
+            xtype: "container",
+            html: '<div class="tip-arrow"></div>'
+        },
+        {
+            xtype: "container",
+            flex: 1,
+            style: "padding-left: 15px;",
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                flex: 1,
+                style: "margin-top: 15px;line-height: 1.2;",
+                html: "<div>" + me.textSynchronize + "</div>"
+            },
+            btnClose]
+        },
+        {
+            xtype: "container",
+            cls: "show-link",
+            items: [{
+                xtype: "label",
+                text: me.textDontShow,
+                listeners: {
+                    afterrender: function (cmp) {
+                        cmp.getEl().on("click", function (event, node) {
+                            me.fireEvent("dontshowclick", me);
+                        });
+                    },
+                    scope: this
+                }
+            }]
+        }];
+        me.callParent(arguments);
+    },
+    textDontShow: "Don't show this message again",
+    textSynchronize: "The document has changed. <br/>Refresh the document to see the updates."
+});

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

@@ -0,0 +1,366 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.ThemeColorPalette", {
+    extend: "Ext.ColorPalette",
+    alias: "widget.cmpthemecolorpalette",
+    allowReselect: true,
+    dyncolorscount: 12,
+    width: 193,
+    maxWidth: 200,
+    baseCls: "cmp-theme-colorpalette",
+    requires: ["Common.view.ExtendedColorDialog"],
+    renderTpl: ['<div style="padding: 12px;">', '<tpl for="colors">', '<tpl if="this.isBlankSeparator(values)"><div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div></tpl>', '<tpl if="this.isSeparator(values)"></div><div class="palette-color-separator" style="width:100%;height:1px;float:left;border-bottom: 1px solid #E0E0E0"></div><div style="padding: 12px;"></tpl>', '<tpl if="this.isColor(values)">', '<a href="#" class="palette-color color-{.}" style="background:#{.} "hidefocus="on">', '<em><span style="background:#{.}; border: 1px solid rgba(0, 0, 0, 0.2);" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isTransparent(values)">', '<a href="#" class="color-{.}" hidefocus="on">', '<em><span unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isCustom(values)">', '<a href="#" id="{id}" class="palette-color-custom {cls}" hidefocus="on">', '<em><span style="background:#FFFFFF;background-image:url({image});" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isEffect(values)">', '<a href="#" effectid="{effectId}" effectvalue="{effectValue}" class="palette-color-effect color-{color}" style="background:#{color}" hidefocus="on">', '<em><span style="background:#{color}; border: 1px solid rgba(0, 0, 0, 0.2);" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isCaption(values)"><div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;">{.}</div></tpl>', "</tpl>", "</div>", {
+        isBlankSeparator: function (v) {
+            return typeof(v) == "string" && v == "-";
+        },
+        isSeparator: function (v) {
+            return typeof(v) == "string" && v == "--";
+        },
+        isColor: function (v) {
+            return typeof(v) == "string" && (/[0-9A-F]{6}/).test(v);
+        },
+        isTransparent: function (v) {
+            return typeof(v) == "string" && (v == "transparent");
+        },
+        isCaption: function (v) {
+            return (typeof(v) == "string" && v != "-" && v != "--" && !(/[0-9A-F]{6}|transparent/).test(v));
+        },
+        isEffect: function (v) {
+            return (typeof(v) == "object" && v.effectId !== undefined);
+        },
+        isCustom: function (v) {
+            return (typeof(v) == "object" && v.effectId === undefined);
+        }
+    }],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    },
+    onRender: function (o) {
+        this.callParent(arguments);
+        if (this.dynamiccolors) {
+            var picker = o.down(".x-color-picker");
+            if (picker) {
+                var i = -1,
+                colors = '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">';
+                while (++i < this.dyncolorscount) {
+                    colors += Ext.String.format('<a href="#" class="color-dynamic-{0} dynamic-empty-color" style="background:#ffffff" color="" hidefocus="on">' + '<em><span unselectable="on">&#160;</span></em></a>', i);
+                }
+                colors += "</div>";
+                Ext.DomHelper.insertHtml("beforeEnd", picker.dom, colors);
+            }
+        }
+        var menu = this.el.up(".x-menu");
+        if (menu) {
+            Ext.menu.Manager.menus[menu.id].addListener("beforeshow", this.updateCustomColors, this);
+        }
+        this.updateCustomColors();
+    },
+    afterRender: function (o) {
+        this.callParent(arguments);
+        if (this.updateColorsArr) {
+            this.updateColors(this.updateColorsArr[0], this.updateColorsArr[1]);
+        }
+        if (this.lastvalue) {
+            this.select(this.lastvalue, true);
+        }
+    },
+    setCustomColor: function (color) {
+        color = /#?([a-fA-F0-9]{6})/.exec(color);
+        if (color) {
+            var el = this.getEl();
+            if (el) {
+                this._saveCustomColor(color[1]);
+                $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+                var child = el.down(".dynamic-empty-color");
+                if (!child) {
+                    this.updateCustomColors();
+                    child = el.down(".color-dynamic-" + (this.dyncolorscount - 1));
+                }
+                child.removeCls("dynamic-empty-color").addCls(this.selectedCls).dom.setAttribute("color", color[1]);
+                child.down("span").setStyle("background-color", "#" + color[1]).setStyle("border", "none");
+            }
+        }
+    },
+    select: function (color, suppressEvent) {
+        if (!this.rendered) {
+            this.lastvalue = color;
+            return;
+        }
+        var el = this.getEl();
+        if (el) {
+            $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+        }
+        if (typeof(color) == "object") {
+            var effectEl;
+            if (color.effectId !== undefined) {
+                effectEl = el.down('a[effectid="' + color.effectId + '"]');
+                if (effectEl) {
+                    effectEl.addCls(this.selectedCls);
+                    this.value = effectEl.dom.className.match(this.colorRe)[1].toUpperCase();
+                } else {
+                    this.value = false;
+                }
+            } else {
+                if (color.effectValue !== undefined) {
+                    effectEl = el.down('a[effectvalue="' + color.effectValue + '"].color-' + color.color.toUpperCase());
+                    if (effectEl) {
+                        effectEl.addCls(this.selectedCls);
+                        this.value = effectEl.dom.className.match(this.colorRe)[1].toUpperCase();
+                    } else {
+                        this.value = false;
+                    }
+                }
+            }
+        } else {
+            if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+                this.value = color;
+            }
+            if (/^[a-fA-F0-9]{6}|transparent$/.test(color) && Ext.Array.contains(this.colors, color)) {
+                if (!Ext.Array.contains(this.colors, this.value)) {
+                    this.value = false;
+                }
+                if (color != this.value || this.allowReselect) {
+                    if (this.value) {
+                        (this.value == "transparent") ? el.down("a.color-transparent").removeCls(this.selectedCls) : el.down("a.palette-color.color-" + this.value).removeCls(this.selectedCls);
+                    } (color == "transparent") ? el.down("a.color-transparent").addCls(this.selectedCls) : el.down("a.palette-color.color-" + color).addCls(this.selectedCls);
+                    this.value = color;
+                    if (suppressEvent !== true) {
+                        this.fireEvent("select", this, color);
+                    }
+                }
+            } else {
+                if (el) {
+                    var co = el.down("#" + color) || el.down('a[color="' + color + '"]');
+                    if (co) {
+                        co.addCls(this.selectedCls);
+                        this.value = color.toUpperCase();
+                    } else {
+                        if (el.down("a." + this.selectedCls)) {
+                            this.value = false;
+                        } else {
+                            if (this.dynamiccolors) {}
+                        }
+                    }
+                } else {
+                    this.lastvalue = color;
+                }
+            }
+        }
+    },
+    handleClick: function (event, target) {
+        var me = this;
+        var color, cmp;
+        if (! (target.className.search("palette-color-custom") < 0)) {
+            event.stopEvent();
+            cmp = Ext.get(target.parentNode).down("a." + me.selectedCls);
+            if (!cmp || cmp.id != target.id) {
+                if (cmp) {
+                    cmp.removeCls(me.selectedCls);
+                }
+                Ext.get(target.id).addCls(me.selectedCls);
+                me.value = false;
+                me.fireEvent("select", me, target.id);
+            } else {
+                me.fireEvent("select", me, cmp.id);
+            }
+        } else {
+            if (! (target.className.search("color-transparent") < 0)) {
+                event.stopEvent();
+                cmp = Ext.get(target.parentNode).down("a." + me.selectedCls);
+                if (!cmp || cmp.id != target.id) {
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    Ext.get(target).addCls(me.selectedCls);
+                    me.value = "transparent";
+                }
+                me.fireEvent("select", me, "transparent");
+            } else {
+                if (! (target.className.search("color-dynamic") < 0)) {
+                    if (!/dynamic-empty-color/.test(target.className)) {
+                        color = target.getAttribute("color");
+                        if (color) {
+                            me.fireEvent("select", me, color);
+                        }
+                        this.value = color.toUpperCase();
+                        $("#" + this.getEl().id + " a." + me.selectedCls).removeClass(me.selectedCls);
+                        Ext.get(target).addCls(me.selectedCls);
+                    } else {
+                        setTimeout(function () {
+                            me.addNewColor();
+                            Ext.menu.Manager.hideAll();
+                        },
+                        10);
+                    }
+                } else {
+                    cmp = Ext.get(target.parentNode).down("a.palette-color-custom");
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    if (!/^[a-fA-F0-9]{6}$/.test(this.value) || !Ext.Array.contains(this.colors, this.value)) {
+                        this.value = false;
+                    }
+                    if (! (target.className.search("palette-color-effect") < 0)) {
+                        color = target.className.match(me.colorRe)[1];
+                        var effectId = target.getAttribute("effectid");
+                        if (color) {
+                            me.fireEvent("select", me, {
+                                color: color,
+                                effectId: effectId
+                            });
+                            this.value = color.toUpperCase();
+                        }
+                        $("#" + this.getEl().id + " a." + me.selectedCls).removeClass(me.selectedCls);
+                        Ext.get(target).addCls(me.selectedCls);
+                    } else {
+                        this.callParent(arguments);
+                    }
+                }
+            }
+        }
+    },
+    addNewColor: function () {
+        var me = this;
+        var win = Ext.create("Common.view.ExtendedColorDialog", {});
+        win.addListener("onmodalresult", function (mr) {
+            me._isdlgopen = false;
+            if (mr == 1) {
+                me.setCustomColor(win.getColor());
+                me.fireEvent("select", me, win.getColor());
+            }
+        },
+        false);
+        me._isdlgopen = true;
+        win.setColor(me.value);
+        win.show();
+    },
+    isDialogOpen: function () {
+        return this._isdlgopen == true;
+    },
+    updateColors: function (effectcolors, standartcolors) {
+        if (!this.rendered) {
+            this.updateColorsArr = [effectcolors, (standartcolors.length == 0 && this.updateColorsArr) ? this.updateColorsArr[1] : standartcolors];
+            return;
+        }
+        var me = this,
+        el = this.getEl();
+        if (me.aColorElements === undefined) {
+            me.aColorElements = el.query("a.palette-color");
+        }
+        if (me.aEffectElements === undefined) {
+            me.aEffectElements = el.query("a.palette-color-effect");
+        }
+        var aEl;
+        var aColorIdx = 0,
+        aEffectIdx = 0;
+        for (var i = 0; i < me.colors.length; i++) {
+            if (typeof(me.colors[i]) == "string" && (/[0-9A-F]{6}/).test(me.colors[i])) {
+                if (aColorIdx >= standartcolors.length) {
+                    continue;
+                }
+                aEl = Ext.get(me.aColorElements[aColorIdx]);
+                aEl.removeCls("color-" + me.colors[i]);
+                me.colors[i] = standartcolors[aColorIdx].toUpperCase();
+                aEl.addCls("color-" + me.colors[i]);
+                aEl.applyStyles({
+                    background: "#" + me.colors[i]
+                });
+                aEl.down("span").applyStyles({
+                    background: "#" + me.colors[i]
+                });
+                aColorIdx++;
+            } else {
+                if (typeof(me.colors[i]) == "object" && me.colors[i].effectId !== undefined) {
+                    if (aEffectIdx >= effectcolors.length) {
+                        continue;
+                    }
+                    aEl = Ext.get(me.aEffectElements[aEffectIdx]);
+                    effectcolors[aEffectIdx].color = effectcolors[aEffectIdx].color.toUpperCase();
+                    if (me.colors[i].color !== effectcolors[aEffectIdx].color) {
+                        aEl.removeCls("color-" + me.colors[i].color);
+                        aEl.addCls("color-" + effectcolors[aEffectIdx].color);
+                        aEl.applyStyles({
+                            background: "#" + effectcolors[aEffectIdx].color
+                        });
+                        aEl.down("span").applyStyles({
+                            background: "#" + effectcolors[aEffectIdx].color
+                        });
+                    }
+                    if (me.colors[i].effectId !== effectcolors[aEffectIdx].effectId) {
+                        aEl.set({
+                            effectid: effectcolors[aEffectIdx].effectId
+                        });
+                    }
+                    if (me.colors[i].effectValue !== effectcolors[aEffectIdx].effectValue) {
+                        aEl.set({
+                            effectvalue: effectcolors[aEffectIdx].effectValue
+                        });
+                    }
+                    me.colors[i] = effectcolors[aEffectIdx];
+                    aEffectIdx++;
+                }
+            }
+        }
+        this.updateColorsArr = undefined;
+    },
+    updateCustomColors: function () {
+        var picker = this.getEl();
+        if (picker) {
+            var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+            colors = colors ? colors.split(",") : [];
+            var i = -1,
+            colorEl, c = colors.length < this.dyncolorscount ? colors.length : this.dyncolorscount;
+            while (++i < c) {
+                colorEl = picker.down(".color-dynamic-" + i);
+                colorEl.removeCls("dynamic-empty-color").dom.setAttribute("color", colors[i]);
+                colorEl.down("span").setStyle("background-color", "#" + colors[i]).setStyle("border", "none");
+            }
+        }
+    },
+    _saveCustomColor: function (color) {
+        var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+        colors = colors ? colors.split(",") : [];
+        if (colors.push(color) > this.dyncolorscount) {
+            colors.shift();
+        }
+        localStorage["asc." + window.storagename + ".colors.custom"] = colors.join().toUpperCase();
+    },
+    _menuBeforeShow: function () {
+        this.updateCustomColors();
+    }
+});

OfficeWeb/apps/common/main/lib/component/util/LanguageName.js

@@ -0,0 +1,433 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.util.LanguageName", (function () {
+    var localLanguageName = {
+        54: ["af", "Afrikaans"],
+        1078: ["af-ZA", "Afrikaans (Suid Afrika)"],
+        28: ["sq", "Shqipe"],
+        1052: ["sq-AL", "Shqipe (Shqipëria)"],
+        132: ["gsw", "Elsässisch"],
+        1156: ["gsw-FR", "Elsässisch (Frànkrisch)"],
+        94: ["am", "አማርኛ"],
+        1118: ["am-ET", "አማርኛ (ኢትዮጵያ)"],
+        1: ["ar", "العربية"],
+        5121: ["ar-DZ", "العربية (الجزائر)"],
+        15361: ["ar-BH", "العربية (البحرين)"],
+        3073: ["ar-EG", "العربية (مصر)"],
+        2049: ["ar-IQ", "العربية (العراق)"],
+        11265: ["ar-JO", "العربية (الأردن)"],
+        13313: ["ar-KW", "العربية (الكويت)"],
+        12289: ["ar-LB", "العربية (لبنان)"],
+        4097: ["ar-LY", "العربية (ليبيا)"],
+        6145: ["ar-MA", "العربية (المملكة المغربية)"],
+        8193: ["ar-OM", "العربية (عمان)"],
+        16385: ["ar-QA", "العربية (قطر)"],
+        1025: ["ar-SA", "العربية (المملكة العربية السعودية)"],
+        10241: ["ar-SY", "العربية (سوريا)"],
+        7169: ["ar-TN", "العربية (تونس)"],
+        14337: ["ar-AE", "العربية (الإمارات العربية المتحدة)"],
+        9217: ["ar-YE", "العربية (اليمن)"],
+        43: ["hy", "Հայերեն"],
+        1067: ["hy-AM", "Հայերեն (Հայաստան)"],
+        77: ["as", "অসমীয়া"],
+        1101: ["as-IN", "অসমীয়া (ভাৰত)"],
+        44: ["az", "Azərbaycan­ılı"],
+        29740: ["az-Cyrl", "Азәрбајҹан дили"],
+        2092: ["az-Cyrl-AZ", "Азәрбајҹан (Азәрбајҹан)"],
+        30764: ["az-Latn", "Azərbaycan­ılı"],
+        1068: ["az-Latn-AZ", "Azərbaycan­ılı (Azərbaycan)"],
+        109: ["ba", "Башҡорт"],
+        1133: ["ba-RU", "Башҡорт (Россия)"],
+        45: ["eu", "Euskara"],
+        1069: ["eu-ES", "Euskara (Euskara)"],
+        35: ["be", "Беларускі"],
+        1059: ["be-BY", "Беларускі (Беларусь)"],
+        69: ["bn", "বাংলা"],
+        2117: ["bn-BD", "বাংলা (বাংলাদেশ)"],
+        1093: ["bn-IN", "বাংলা (ভারত)"],
+        30746: ["bs", "bosanski"],
+        25626: ["bs-Cyrl", "Босански (Ћирилица)"],
+        8218: ["bs-Cyrl-BA", "Босански (Босна и Херцеговина)"],
+        26650: ["bs-Latn", "Bosanski (Latinica)"],
+        5146: ["bs-Latn-BA", "Bosanski (Bosna i Hercegovina)"],
+        126: ["br", "Brezhoneg"],
+        1150: ["br-FR", "Brezhoneg (Frañs)"],
+        2: ["bg", "Български"],
+        1026: ["bg-BG", "Български (България)"],
+        3: ["ca", "Català"],
+        1027: ["ca-ES", "Català (Català)"],
+        30724: ["zh", "中文"],
+        4: ["zh-Hans", "中文(简体)"],
+        2052: ["zh-CN", "中文(中华人民共和国)"],
+        4100: ["zh-SG", "中文(新加坡)"],
+        31748: ["zh-Hant", "中文(繁體)"],
+        3076: ["zh-HK", "中文(香港特別行政區)"],
+        5124: ["zh-MO", "中文(澳門特別行政區)"],
+        1028: ["zh-TW", "中文(台灣)"],
+        131: ["co", "Corsu"],
+        1155: ["co-FR", "Corsu (France)"],
+        26: ["hr", "Hrvatski"],
+        1050: ["hr-HR", "Hrvatski (Hrvatska)"],
+        4122: ["hr-BA", "Hrvatski (Bosna i Hercegovina)"],
+        5: ["cs", "Čeština"],
+        1029: ["cs-CZ", "Čeština (Česká republika)"],
+        6: ["da", "Dansk"],
+        1030: ["da-DK", "Dansk (Danmark)"],
+        140: ["prs", "درى"],
+        1164: ["prs-AF", "درى (افغانستان)"],
+        101: ["dv", "ދިވެހިބަސް"],
+        1125: ["dv-MV", "ދިވެހިބަސް (ދިވެހި ރާއްޖެ)"],
+        19: ["nl", "Nederlands"],
+        2067: ["nl-BE", "Nederlands (België)"],
+        1043: ["nl-NL", "Nederlands (Nederland)"],
+        9: ["en", "English"],
+        3081: ["en-AU", "English (Australia)"],
+        10249: ["en-BZ", "English (Belize)"],
+        4105: ["en-CA", "English (Canada)"],
+        9225: ["en-029", "English (Caribbean)"],
+        16393: ["en-IN", "English (India)"],
+        6153: ["en-IE", "English (Ireland)"],
+        8201: ["en-JM", "English (Jamaica)"],
+        17417: ["en-MY", "English (Malaysia)"],
+        5129: ["en-NZ", "English (New Zealand)"],
+        13321: ["en-PH", "English (Philippines)"],
+        18441: ["en-SG", "English (Singapore)"],
+        7177: ["en-ZA", "English (South Africa)"],
+        11273: ["en-TT", "English (Trinidad y Tobago)"],
+        2057: ["en-GB", "English (United Kingdom)"],
+        1033: ["en-US", "English (United States)"],
+        12297: ["en-ZW", "English (Zimbabwe)"],
+        37: ["et", "Eesti"],
+        1061: ["et-EE", "Eesti (Eesti)"],
+        56: ["fo", "Føroyskt"],
+        1080: ["fo-FO", "Føroyskt (Føroyar)"],
+        100: ["fil", "Filipino"],
+        1124: ["fil-PH", "Filipino (Pilipinas)"],
+        11: ["fi", "Suomi"],
+        1035: ["fi-FI", "Suomi (Suomi)"],
+        12: ["fr", "Français"],
+        2060: ["fr-BE", "Français (Belgique)"],
+        3084: ["fr-CA", "Français (Canada)"],
+        1036: ["fr-FR", "Français (France)"],
+        5132: ["fr-LU", "Français (Luxembourg)"],
+        6156: ["fr-MC", "Français (Principauté de Monaco)"],
+        4108: ["fr-CH", "Français (Suisse)"],
+        98: ["fy", "Frysk"],
+        1122: ["fy-NL", "Frysk (Nederlân)"],
+        86: ["gl", "Galego"],
+        1110: ["gl-ES", "Galego (Galego)"],
+        55: ["ka", "ქართული"],
+        1079: ["ka-GE", "ქართული (საქართველო)"],
+        7: ["de", "Deutsch"],
+        3079: ["de-AT", "Deutsch (Österreich)"],
+        1031: ["de-DE", "Deutsch (Deutschland)"],
+        5127: ["de-LI", "Deutsch (Liechtenstein)"],
+        4103: ["de-LU", "Deutsch (Luxemburg)"],
+        2055: ["de-CH", "Deutsch (Schweiz)"],
+        8: ["el", "Ελληνικά"],
+        1032: ["el-GR", "Ελληνικά (Ελλάδα)"],
+        111: ["kl", "Kalaallisut"],
+        1135: ["kl-GL", "Kalaallisut (Kalaallit Nunaat)"],
+        71: ["gu", "ગુજરાતી"],
+        1095: ["gu-IN", "ગુજરાતી (ભારત)"],
+        104: ["ha", "Hausa"],
+        31848: ["ha-Latn", "Hausa (Latin)"],
+        1128: ["ha-Latn-NG", "Hausa (Nigeria)"],
+        13: ["he", "עברית"],
+        1037: ["he-IL", "עברית (ישראל)"],
+        57: ["hi", "हिंदी"],
+        1081: ["hi-IN", "हिंदी (भारत)"],
+        14: ["hu", "Magyar"],
+        1038: ["hu-HU", "Magyar (Magyarország)"],
+        15: ["is", "Íslenska"],
+        1039: ["is-IS", "Íslenska (Ísland)"],
+        112: ["ig", "Igbo"],
+        1136: ["ig-NG", "Igbo (Nigeria)"],
+        33: ["id", "Bahasa Indonesia"],
+        1057: ["id-ID", "Bahasa Indonesia (Indonesia)"],
+        93: ["iu", "Inuktitut"],
+        31837: ["iu-Latn", "Inuktitut (Qaliujaaqpait)"],
+        2141: ["iu-Latn-CA", "Inuktitut"],
+        30813: ["iu-Cans", "ᐃᓄᒃᑎᑐᑦ (ᖃᓂᐅᔮᖅᐸᐃᑦ)"],
+        1117: ["iu-Cans-CA", "ᐃᓄᒃᑎᑐᑦ (ᑲᓇᑕᒥ)"],
+        60: ["ga", "Gaeilge"],
+        2108: ["ga-IE", "Gaeilge (Éire)"],
+        52: ["xh", "isiXhosa"],
+        1076: ["xh-ZA", "isiXhosa (uMzantsi Afrika)"],
+        53: ["zu", "isiZulu"],
+        1077: ["zu-ZA", "isiZulu (iNingizimu Afrika)"],
+        16: ["it", "Italiano"],
+        1040: ["it-IT", "Italiano (Italia)"],
+        2064: ["it-CH", "Italiano (Svizzera)"],
+        17: ["ja", "日本語"],
+        1041: ["ja-JP", "日本語 (日本)"],
+        75: ["kn", "ಕನ್ನಡ"],
+        1099: ["kn-IN", "ಕನ್ನಡ (ಭಾರತ)"],
+        63: ["kk", "Қазақ"],
+        1087: ["kk-KZ", "Қазақ (Қазақстан)"],
+        83: ["km", "ខ្មែរ"],
+        1107: ["km-KH", "ខ្មែរ (កម្ពុជា)"],
+        134: ["qut", "K'iche"],
+        1158: ["qut-GT", "K'iche (Guatemala)"],
+        135: ["rw", "Kinyarwanda"],
+        1159: ["rw-RW", "Kinyarwanda (Rwanda)"],
+        65: ["sw", "Kiswahili"],
+        1089: ["sw-KE", "Kiswahili (Kenya)"],
+        87: ["kok", "कोंकणी"],
+        1111: ["kok-IN", "कोंकणी (भारत)"],
+        18: ["ko", "한국어"],
+        1042: ["ko-KR", "한국어 (대한민국)"],
+        64: ["ky", "Кыргыз"],
+        1088: ["ky-KG", "Кыргыз (Кыргызстан)"],
+        84: ["lo", "ລາວ"],
+        1108: ["lo-LA", "ລາວ (ສ.ປ.ປ. ລາວ)"],
+        38: ["lv", "Latviešu"],
+        1062: ["lv-LV", "Latviešu (Latvija)"],
+        39: ["lt", "Lietuvių"],
+        1063: ["lt-LT", "Lietuvių (Lietuva)"],
+        31790: ["dsb", "Dolnoserbšćina"],
+        2094: ["dsb-DE", "Dolnoserbšćina (Nimska)"],
+        110: ["lb", "Lëtzebuergesch"],
+        1134: ["lb-LU", "Lëtzebuergesch (Luxembourg)"],
+        1071: ["mk-MK", "Македонски јазик (Македонија)"],
+        47: ["mk", "Македонски јазик"],
+        62: ["ms", "Bahasa Melayu"],
+        2110: ["ms-BN", "Bahasa Melayu (Brunei Darussalam)"],
+        1086: ["ms-MY", "Bahasa Melayu (Malaysia)"],
+        76: ["ml", "മലയാളം"],
+        1100: ["ml-IN", "മലയാളം (ഭാരതം)"],
+        58: ["mt", "Malti"],
+        1082: ["mt-MT", "Malti (Malta)"],
+        129: ["mi", "Reo Māori"],
+        1153: ["mi-NZ", "Reo Māori (Aotearoa)"],
+        122: ["arn", "Mapudungun"],
+        1146: ["arn-CL", "Mapudungun (Chile)"],
+        78: ["mr", "मराठी"],
+        1102: ["mr-IN", "मराठी (भारत)"],
+        124: ["moh", "Kanien'kéha"],
+        1148: ["moh-CA", "Kanien'kéha"],
+        80: ["mn", "Монгол хэл"],
+        30800: ["mn-Cyrl", "Монгол хэл"],
+        1104: ["mn-MN", "Монгол хэл (Монгол улс)"],
+        31824: ["mn-Mong", "ᠮᠤᠨᠭᠭᠤᠯ ᠬᠡᠯᠡ"],
+        2128: ["mn-Mong-CN", "ᠮᠤᠨᠭᠭᠤᠯ ᠬᠡᠯᠡ (ᠪᠦᠭᠦᠳᠡ ᠨᠠᠢᠷᠠᠮᠳᠠᠬᠤ ᠳᠤᠮᠳᠠᠳᠤ ᠠᠷᠠᠳ ᠣᠯᠣᠰ)"],
+        97: ["ne", "नेपाली"],
+        1121: ["ne-NP", "नेपाली (नेपाल)"],
+        20: ["no", "Norsk"],
+        31764: ["nb", "Norsk (bokmål)"],
+        30740: ["nn", "Norsk (Nynorsk)"],
+        1044: ["nb-NO", "Norsk, bokmål (Norge)"],
+        2068: ["nn-NO", "Norsk, nynorsk (Noreg)"],
+        130: ["oc", "Occitan"],
+        1154: ["oc-FR", "Occitan (França)"],
+        72: ["or", "ଓଡ଼ିଆ"],
+        1096: ["or-IN", "ଓଡ଼ିଆ (ଭାରତ)"],
+        99: ["ps", "پښتو"],
+        1123: ["ps-AF", "پښتو (افغانستان)"],
+        41: ["fa", "فارسى"],
+        1065: ["fa-IR", "فارسى (ایران)"],
+        21: ["pl", "Polski"],
+        1045: ["pl-PL", "Polski (Polska)"],
+        22: ["pt", "Português"],
+        1046: ["pt-BR", "Português (Brasil)"],
+        2070: ["pt-PT", "Português (Portugal)"],
+        70: ["pa", "ਪੰਜਾਬੀ"],
+        1094: ["pa-IN", "ਪੰਜਾਬੀ (ਭਾਰਤ)"],
+        107: ["quz", "Runasimi"],
+        1131: ["quz-BO", "Runasimi (Qullasuyu)"],
+        2155: ["quz-EC", "Runasimi (Ecuador)"],
+        3179: ["quz-PE", "Runasimi (Piruw)"],
+        24: ["ro", "Română"],
+        1048: ["ro-RO", "Română (România)"],
+        23: ["rm", "Rumantsch"],
+        1047: ["rm-CH", "Rumantsch (Svizra)"],
+        25: ["ru", "Русский"],
+        1049: ["ru-RU", "Русский (Россия)"],
+        28731: ["smn", "Sämikielâ"],
+        31803: ["smj", "Julevusámegiella"],
+        59: ["se", "Davvisámegiella"],
+        29755: ["sms", "Sääm´ǩiõll"],
+        30779: ["sma", "åarjelsaemiengiele"],
+        9275: ["smn-FI", "Sämikielâ (Suomâ)"],
+        4155: ["smj-NO", "Julevusámegiella (Vuodna)"],
+        5179: ["smj-SE", "Julevusámegiella (Svierik)"],
+        3131: ["se-FI", "Davvisámegiella (Suopma)"],
+        1083: ["se-NO", "Davvisámegiella (Norga)"],
+        2107: ["se-SE", "Davvisámegiella (Ruoŧŧa)"],
+        8251: ["sms-FI", "Sääm´ǩiõll (Lää´ddjânnam)"],
+        6203: ["sma-NO", "åarjelsaemiengiele (Nöörje)"],
+        7227: ["sma-SE", "åarjelsaemiengiele (Sveerje)"],
+        79: ["sa", "संस्कृत"],
+        1103: ["sa-IN", "संस्कृत (भारतम्)"],
+        145: ["gd", "Gàidhlig"],
+        1169: ["gd-GB", "Gàidhlig (An Rìoghachd Aonaichte)"],
+        31770: ["sr", "Srpski"],
+        27674: ["sr-Cyrl", "Српски (Ћирилица)"],
+        7194: ["sr-Cyrl-BA", "Српски (Босна и Херцеговина)"],
+        12314: ["sr-Cyrl-ME", "Српски (Црна Гора)"],
+        3098: ["sr-Cyrl-CS", "Српски (Србија и Црна Гора (Претходно))"],
+        10266: ["sr-Cyrl-RS", "Српски (Србија)"],
+        28698: ["sr-Latn", "Srpski (Latinica)"],
+        6170: ["sr-Latn-BA", "Srpski (Bosna i Hercegovina)"],
+        11290: ["sr-Latn-ME", "Srpski (Crna Gora)"],
+        2074: ["sr-Latn-CS", "Srpski (Srbija i Crna Gora (Prethodno))"],
+        9242: ["sr-Latn-RS", "Srpski (Srbija)"],
+        108: ["nso", "Sesotho sa Leboa"],
+        1132: ["nso-ZA", "Sesotho sa Leboa (Afrika Borwa)"],
+        50: ["tn", "Setswana"],
+        1074: ["tn-ZA", "Setswana (Aforika Borwa)"],
+        91: ["si", "සිංහ"],
+        1115: ["si-LK", "සිංහ (ශ්රී ලංකා)"],
+        27: ["sk", "Slovenčina"],
+        1051: ["sk-SK", "Slovenčina (Slovenská republika)"],
+        36: ["sl", "Slovenski"],
+        1060: ["sl-SI", "Slovenski (Slovenija)"],
+        10: ["es", "Español"],
+        11274: ["es-AR", "Español (Argentina)"],
+        16394: ["es-BO", "Español (Bolivia)"],
+        13322: ["es-CL", "Español (Chile)"],
+        9226: ["es-CO", "Español (Colombia)"],
+        5130: ["es-CR", "Español (Costa Rica)"],
+        7178: ["es-DO", "Español (República Dominicana)"],
+        12298: ["es-EC", "Español (Ecuador)"],
+        17418: ["es-SV", "Español (El Salvador)"],
+        4106: ["es-GT", "Español (Guatemala)"],
+        18442: ["es-HN", "Español (Honduras)"],
+        2058: ["es-MX", "Español (México)"],
+        19466: ["es-NI", "Español (Nicaragua)"],
+        6154: ["es-PA", "Español (Panamá)"],
+        15370: ["es-PY", "Español (Paraguay)"],
+        10250: ["es-PE", "Español (Perú)"],
+        20490: ["es-PR", "Español (Puerto Rico)"],
+        3082: ["es-ES", "Español (España, alfabetización internacional)"],
+        21514: ["es-US", "Español (Estados Unidos)"],
+        14346: ["es-UY", "Español (Uruguay)"],
+        8202: ["es-VE", "Español (Republica Bolivariana de Venezuela)"],
+        29: ["sv", "Svenska"],
+        2077: ["sv-FI", "Svenska (Finland)"],
+        1053: ["sv-SE", "Svenska (Sverige)"],
+        90: ["syr", "ܣܘܪܝܝܐ"],
+        1114: ["syr-SY", "ܣܘܪܝܝܐ (سوريا)"],
+        40: ["tg", "Тоҷикӣ"],
+        31784: ["tg-Cyrl", "Тоҷикӣ"],
+        1064: ["tg-Cyrl-TJ", "Тоҷикӣ (Тоҷикистон)"],
+        95: ["tzm", "Tamazight"],
+        31839: ["tzm-Latn", "Tamazight (Latin)"],
+        2143: ["tzm-Latn-DZ", "Tamazight (Djazaïr)"],
+        73: ["ta", "தமிழ்"],
+        1097: ["ta-IN", "தமிழ் (இந்தியா)"],
+        68: ["tt", "Татар"],
+        1092: ["tt-RU", "Татар (Россия)"],
+        74: ["te", "తెలుగు"],
+        1098: ["te-IN", "తెలుగు (భారత దేశం)"],
+        30: ["th", "ไทย"],
+        1054: ["th-TH", "ไทย (ไทย)"],
+        81: ["bo", "བོད་ཡིག"],
+        1105: ["bo-CN", "བོད་ཡིག (ཀྲུང་ཧྭ་མི་དམངས་སྤྱི་མཐུན་རྒྱལ་ཁབ།)"],
+        31: ["tr", "Türkçe"],
+        1055: ["tr-TR", "Türkçe (Türkiye)"],
+        66: ["tk", "Türkmençe"],
+        1090: ["tk-TM", "Türkmençe (Türkmenistan)"],
+        34: ["uk", "Українська"],
+        1058: ["uk-UA", "Українська (Україна)"],
+        46: ["hsb", "Hornjoserbšćina"],
+        1070: ["hsb-DE", "Hornjoserbšćina (Němska)"],
+        32: ["ur", "اُردو"],
+        1056: ["ur-PK", "اُردو (پاکستان)"],
+        128: ["ug", "ئۇيغۇر يېزىقى"],
+        1152: ["ug-CN", "(ئۇيغۇر يېزىقى (جۇڭخۇا خەلق جۇمھۇرىيىتى"],
+        30787: ["uz-Cyrl", "Ўзбек"],
+        2115: ["uz-Cyrl-UZ", "Ўзбек (Ўзбекистон)"],
+        67: ["uz", "U'zbek"],
+        31811: ["uz-Latn", "U'zbek"],
+        1091: ["uz-Latn-UZ", "U'zbek (U'zbekiston Respublikasi)"],
+        42: ["vi", "Tiếng Việt"],
+        1066: ["vi-VN", "Tiếng Việt (Việt Nam)"],
+        82: ["cy", "Cymraeg"],
+        1106: ["cy-GB", "Cymraeg (y Deyrnas Unedig)"],
+        136: ["wo", "Wolof"],
+        1160: ["wo-SN", "Wolof (Sénégal)"],
+        133: ["sah", "Саха"],
+        1157: ["sah-RU", "Саха (Россия)"],
+        120: ["ii", "ꆈꌠꁱꂷ"],
+        1144: ["ii-CN", "ꆈꌠꁱꂷ (ꍏꉸꏓꂱꇭꉼꇩ)"],
+        106: ["yo", "Yoruba"],
+        1130: ["yo-NG", "Yoruba (Nigeria)"],
+        2129: ["bo-BT", "Tibetan, Bhutan"],
+        1126: ["bin-NG", "Bini, Nigeria"],
+        1116: ["chr-US", "Cherokee, United States"],
+        15369: ["en-HK", "English, Hong Kong"],
+        14345: ["en-ID", "English, Indonesia"],
+        1034: ["es-ES_tradnl", "Spanish"],
+        15372: ["fr-HT", "French, Haiti"],
+        9228: ["fr-CG", "French, Congo"],
+        12300: ["fr-CI", "French, Cote d'Ivoire"],
+        11276: ["fr-CM", "French, Cameroon"],
+        14348: ["fr-MA", "French, Morocco"],
+        13324: ["fr-ML", "French, Mali"],
+        8204: ["fr-RE", "French, Reunion"],
+        10252: ["fr-SN", "French, Senegal"],
+        7180: ["fr-West", "French"],
+        1127: ["fuv-NG", "Nigerian Fulfulde, Nigeria"],
+        1138: ["gaz-ET", "West Central Oromo, Ethiopia"],
+        1140: ["gn-PY", "Guarani, Paraguay"],
+        1141: ["haw-US", "Hawaiian, UnitedStates"],
+        1129: ["ibb-NG", "Ibibio, Nigeria"],
+        1137: ["kr-NG", "Kanuri, Nigeria"],
+        1112: ["mni", "Manipuri"],
+        1109: ["my-MM", "Burmese, Myanmar"],
+        2145: ["ne-IN", "Nepali, India"],
+        1145: ["pap-AN", "Papiamento, Netherlands Antilles"],
+        2118: ["pa-PK", "Panjabi, Pakistan"],
+        1165: ["plt-MG", "Plateau Malagasy, Madagascar"],
+        2072: ["ro-MO", "Romanian, Macao"],
+        2073: ["ru-MO", "Russian, Macao"],
+        1113: ["sd-IN", "Sindhi, India"],
+        2137: ["sd-PK", "Sindhi, Pakistan"],
+        1143: ["so-SO", "Somali, Somalia"],
+        1072: ["st-ZA", "Southern Sotho, South Africa"],
+        1139: ["ti-ER", "Tigrinya, Eritrea"],
+        2163: ["ti-ET", "Tigrinya, Ethiopia"],
+        1119: ["tmz", "Tamanaku"],
+        3167: ["tmz-MA", "Tamanaku, Morocco"],
+        1073: ["ts-ZA", "Tsonga, South Africa"],
+        2080: ["ur-IN", "Urdu, India"],
+        1075: ["ven-ZA", "South Africa"]
+    };
+    return {
+        alternateClassName: "Common.util.LanguageName",
+        singleton: true,
+        getLocalLanguageName: function (code) {
+            return localLanguageName[code] || ["", code];
+        }
+    };
+} ()));

OfficeWeb/apps/common/main/lib/component/util/MetricSettings.js

@@ -0,0 +1,73 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+Common.MetricSettings = new(function () {
+    var me = this;
+    me.c_MetricUnits = {
+        cm: 0,
+        pt: 1
+    };
+    me.currentMetric = me.c_MetricUnits.pt;
+    me.metricName = ["cm", "pt"];
+    return {
+        c_MetricUnits: me.c_MetricUnits,
+        metricName: me.metricName,
+        setCurrentMetric: function (value) {
+            me.currentMetric = value;
+        },
+        getCurrentMetric: function () {
+            return me.currentMetric;
+        },
+        fnRecalcToMM: function (value) {
+            if (value !== null && value !== undefined) {
+                switch (me.currentMetric) {
+                case me.c_MetricUnits.cm:
+                    return value * 10;
+                case me.c_MetricUnits.pt:
+                    return value * 25.4 / 72;
+                }
+            }
+            return value;
+        },
+        fnRecalcFromMM: function (value) {
+            switch (me.currentMetric) {
+            case me.c_MetricUnits.cm:
+                return parseFloat(Ext.Number.toFixed(value / 10, 4));
+            case me.c_MetricUnits.pt:
+                return parseFloat(Ext.Number.toFixed(value * 72 / 25.4, 3));
+            }
+            return value;
+        }
+    };
+})();

OfficeWeb/apps/common/main/lib/component/util/RGBColor.js

@@ -0,0 +1,196 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.component.util.RGBColor", {
+    alternateClassName: "Common.util.RGBColor",
+    constructor: function (colorString) {
+        this.ok = false;
+        if (colorString.charAt(0) == "#") {
+            colorString = colorString.substr(1, 6);
+        }
+        colorString = colorString.replace(/ /g, "");
+        colorString = colorString.toLowerCase();
+        var colorDefinitions = [{
+            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+            process: function (bits) {
+                return [parseInt(bits[1]), parseInt(bits[2]), parseInt(bits[3])];
+            }
+        },
+        {
+            re: /^hsb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+            process: function (bits) {
+                var rgb = {};
+                var h = Math.round(bits[1]);
+                var s = Math.round(bits[2] * 255 / 100);
+                var v = Math.round(bits[3] * 255 / 100);
+                if (s == 0) {
+                    rgb.r = rgb.g = rgb.b = v;
+                } else {
+                    var t1 = v;
+                    var t2 = (255 - s) * v / 255;
+                    var t3 = (t1 - t2) * (h % 60) / 60;
+                    if (h == 360) {
+                        h = 0;
+                    }
+                    if (h < 60) {
+                        rgb.r = t1;
+                        rgb.b = t2;
+                        rgb.g = t2 + t3;
+                    } else {
+                        if (h < 120) {
+                            rgb.g = t1;
+                            rgb.b = t2;
+                            rgb.r = t1 - t3;
+                        } else {
+                            if (h < 180) {
+                                rgb.g = t1;
+                                rgb.r = t2;
+                                rgb.b = t2 + t3;
+                            } else {
+                                if (h < 240) {
+                                    rgb.b = t1;
+                                    rgb.r = t2;
+                                    rgb.g = t1 - t3;
+                                } else {
+                                    if (h < 300) {
+                                        rgb.b = t1;
+                                        rgb.g = t2;
+                                        rgb.r = t2 + t3;
+                                    } else {
+                                        if (h < 360) {
+                                            rgb.r = t1;
+                                            rgb.g = t2;
+                                            rgb.b = t1 - t3;
+                                        } else {
+                                            rgb.r = 0;
+                                            rgb.g = 0;
+                                            rgb.b = 0;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                return [Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b)];
+            }
+        },
+        {
+            re: /^(\w{2})(\w{2})(\w{2})$/,
+            process: function (bits) {
+                return [parseInt(bits[1], 16), parseInt(bits[2], 16), parseInt(bits[3], 16)];
+            }
+        },
+        {
+            re: /^(\w{1})(\w{1})(\w{1})$/,
+            process: function (bits) {
+                return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)];
+            }
+        }];
+        for (var i = 0; i < colorDefinitions.length; i++) {
+            var re = colorDefinitions[i].re;
+            var processor = colorDefinitions[i].process;
+            var bits = re.exec(colorString);
+            if (bits) {
+                var channels = processor(bits);
+                this.r = channels[0];
+                this.g = channels[1];
+                this.b = channels[2];
+                this.ok = true;
+            }
+        }
+        this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
+        this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
+        this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);
+        this.isEqual = function (color) {
+            return ((this.r == color.r) && (this.g == color.g) && (this.b == color.b));
+        };
+        this.toRGB = function () {
+            return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
+        };
+        this.toRGBA = function (alfa) {
+            if (alfa === undefined) {
+                alfa = 1;
+            }
+            return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + alfa + ")";
+        };
+        this.toHex = function () {
+            var r = this.r.toString(16);
+            var g = this.g.toString(16);
+            var b = this.b.toString(16);
+            if (r.length == 1) {
+                r = "0" + r;
+            }
+            if (g.length == 1) {
+                g = "0" + g;
+            }
+            if (b.length == 1) {
+                b = "0" + b;
+            }
+            return "#" + r + g + b;
+        };
+        this.toHSB = function () {
+            var hsb = {
+                h: 0,
+                s: 0,
+                b: 0
+            };
+            var min = Math.min(this.r, this.g, this.b);
+            var max = Math.max(this.r, this.g, this.b);
+            var delta = max - min;
+            hsb.b = max;
+            hsb.s = max != 0 ? 255 * delta / max : 0;
+            if (hsb.s != 0) {
+                if (this.r == max) {
+                    hsb.h = 0 + (this.g - this.b) / delta;
+                } else {
+                    if (this.g == max) {
+                        hsb.h = 2 + (this.b - this.r) / delta;
+                    } else {
+                        hsb.h = 4 + (this.r - this.g) / delta;
+                    }
+                }
+            } else {
+                hsb.h = 0;
+            }
+            hsb.h *= 60;
+            if (hsb.h < 0) {
+                hsb.h += 360;
+            }
+            hsb.s *= 100 / 255;
+            hsb.b *= 100 / 255;
+            hsb.h = parseInt(hsb.h);
+            hsb.s = parseInt(hsb.s);
+            hsb.b = parseInt(hsb.b);
+            return hsb;
+        };
+    }
+});

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

@@ -0,0 +1,278 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.controller.Chat", {
+    extend: "Ext.app.Controller",
+    views: ["ChatPanel"],
+    refs: [{
+        ref: "chatPanel",
+        selector: "commonchatpanel"
+    },
+    {
+        ref: "messageList",
+        selector: "#id-chat-msg"
+    },
+    {
+        ref: "userList",
+        selector: "#id-chat-users"
+    },
+    {
+        ref: "messageTextArea",
+        selector: "#id-chat-textarea"
+    },
+    {
+        ref: "btnSend",
+        selector: "#id-btn-send-msg"
+    }],
+    stores: ["Common.store.ChatMessages", "Common.store.Users"],
+    init: function () {
+        this.control({
+            "#id-btn-send-msg": {
+                afterrender: this.onBtnSendAfterRender,
+                click: this.onBtnSendClick
+            },
+            "#id-chat-msg": {
+                itemadd: this.onAddMessage
+            },
+            "#id-chat-textarea": {
+                keydown: this.onTextAreaKeyDown,
+                keyup: this.onTextAreaKeyUp
+            },
+            "#id-chat-users": {
+                viewready: function () {
+                    this.onUpdateUser();
+                },
+                itemclick: this.onUserListItemClick,
+                itemupdate: this.onUpdateUser
+            },
+            "#view-main-menu": {
+                panelshow: this.onShowPanel
+            }
+        });
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onParticipantsChanged", Ext.bind(this.onParticipantsChanged, this));
+        this.api.asc_registerCallback("asc_onCoAuthoringChatReceiveMessage", Ext.bind(this.onCoAuthoringChatReceiveMessage, this));
+        this.api.asc_registerCallback("asc_onAuthParticipantsChanged", Ext.bind(this.onAuthParticipantsChanged, this));
+        this.api.asc_registerCallback("asc_onConnectionStateChanged", Ext.bind(this.onConnectionStateChanged, this));
+        this.api.asc_coAuthoringGetUsers();
+        this.api.asc_coAuthoringChatGetMessages();
+        return this;
+    },
+    onLaunch: function () {
+        Common.Gateway.on("init", Ext.bind(this.loadConfig, this));
+    },
+    loadConfig: function (data) {},
+    _sendMessage: function () {
+        var messageTextArea = this.getMessageTextArea(),
+        me = this;
+        if (messageTextArea) {
+            var message = Ext.String.trim(messageTextArea.getValue());
+            if (message.length > 0 && this.api) {
+                var splitString = function (string, chunkSize) {
+                    var chunks = [];
+                    while (string) {
+                        if (string.length < chunkSize) {
+                            chunks.push(string);
+                            break;
+                        } else {
+                            chunks.push(string.substr(0, chunkSize));
+                            string = string.substr(chunkSize);
+                        }
+                    }
+                    return chunks;
+                };
+                var messageList = splitString(message, 2048);
+                Ext.each(messageList, function (message) {
+                    me.api.asc_coAuthoringChatSendMessage(message);
+                });
+                messageTextArea.setValue("");
+            }
+        }
+    },
+    _updateUserOnline: function (user, online) {
+        if (user) {
+            user.beginEdit();
+            user.set("online", online);
+            if (user.get("color").length < 1) {
+                user.set("color", "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).substr(-6));
+            }
+            user.endEdit();
+            user.commit();
+        }
+    },
+    onBtnSendClick: function (btn, e) {
+        this._sendMessage();
+        var textarea = Ext.getCmp("id-chat-textarea");
+        if (textarea) {
+            var doSetFocus = new Ext.util.DelayedTask(function () {
+                this.api.asc_enableKeyEvents(false);
+                textarea.focus();
+            },
+            this);
+            doSetFocus.delay(100);
+        }
+    },
+    onBtnSendAfterRender: function (cmp) {
+        var btnEl = cmp.getEl(),
+        messageTextArea = this.getMessageTextArea();
+        if (Ext.supports.Placeholder) {
+            btnEl.on("mousedown", function () {
+                messageTextArea.emptyText = this.textEnterMessage;
+                messageTextArea.applyEmptyText();
+            },
+            this);
+            btnEl.on("mouseup", function () {
+                messageTextArea.emptyText = " ";
+                messageTextArea.applyEmptyText();
+            },
+            this);
+        }
+    },
+    onAddMessage: function (records, index, node) {
+        var messageList = this.getMessageList();
+        if (messageList) {
+            var plugin = messageList.getPlugin("scrollpane");
+            if (plugin && plugin.jspApi) {
+                var needScroll = plugin.jspApi.getPercentScrolledY() > 0.999;
+                if (messageList.getWidth() > 0) {
+                    plugin.updateScrollPane();
+                }
+                if (needScroll) {
+                    Ext.defer(function () {
+                        var node = messageList.getNode(index);
+                        node && plugin.scrollToElement(node, false, true);
+                    },
+                    100, this);
+                }
+            }
+        }
+    },
+    onUpdateUser: function (records, index, node) {
+        var userList = this.getUserList();
+        if (userList) {
+            var onlinecount = userList.getStore().getOnlineUserCount();
+            if (onlinecount > 10) {
+                onlinecount = 10;
+            }
+            userList.setHeight((onlinecount < 4) ? 70 : onlinecount * 18 + 12);
+            var plugin = userList.getPlugin("scrollpane");
+            if (plugin && userList.getEl().dom.clientWidth > 0) {
+                plugin.updateScrollPane();
+            }
+        }
+    },
+    onTextAreaKeyUp: function (field, event) {
+        if (event.getKey() == event.ENTER) {
+            field.emptyText = " ";
+            field.applyEmptyText();
+        }
+    },
+    onTextAreaKeyDown: function (field, event) {
+        if (event.getKey() == event.ENTER) {
+            if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
+                if (field.getValue().length < 1) {
+                    field.emptyText = this.textEnterMessage;
+                    field.applyEmptyText();
+                } else {
+                    this._sendMessage();
+                }
+                event.stopEvent();
+            }
+        }
+    },
+    onUserListItemClick: function (view, record, item, index, e) {},
+    onParticipantsChanged: function (e) {},
+    onCoAuthoringChatReceiveMessage: function (messages) {
+        var messagesStore = this.getCommonStoreChatMessagesStore();
+        if (messagesStore) {
+            Ext.each(messages, function (item) {
+                messagesStore.add({
+                    type: 0,
+                    userid: item.user,
+                    message: item.message,
+                    username: item.username
+                });
+            });
+        }
+    },
+    onAuthParticipantsChanged: function (users) {
+        var userStore = this.getCommonStoreUsersStore();
+        if (userStore) {
+            var record, me = this;
+            Ext.each(users, function (user) {
+                record = userStore.add({
+                    id: user.asc_getId(),
+                    username: user.asc_getUserName()
+                })[0];
+                this._updateUserOnline(record, true);
+            },
+            this);
+        }
+    },
+    onConnectionStateChanged: function (change) {
+        var userStore = this.getCommonStoreUsersStore();
+        if (userStore) {
+            var record = userStore.findRecord("id", change.asc_getId());
+            if (!record) {
+                record = userStore.add({
+                    id: change.asc_getId(),
+                    username: change.asc_getUserName()
+                })[0];
+            }
+            this._updateUserOnline(userStore.findRecord("id", change.asc_getId()), change.asc_getState());
+        }
+    },
+    onShowPanel: function (panel, fulscreen) {
+        var activeStep = panel.down("container");
+        if (activeStep && activeStep.isXType("commonchatpanel")) {
+            var messageList = this.getMessageList(),
+            userList = this.getUserList(),
+            plugin;
+            if (messageList) {
+                plugin = messageList.getPlugin("scrollpane");
+                if (plugin) {
+                    plugin.updateScrollPane();
+                    plugin.jspApi.scrollToPercentY(100, true);
+                }
+            }
+            if (userList) {
+                plugin = userList.getPlugin("scrollpane");
+                if (plugin) {
+                    plugin.updateScrollPane();
+                }
+            }
+        }
+    },
+    textEnterMessage: "Enter your message here",
+    capGuest: "Guest"
+});

OfficeWeb/apps/common/main/lib/controller/CommentsBase.js

@@ -0,0 +1,341 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.controller.CommentsBase", {
+    extend: "Ext.app.Controller",
+    models: ["Common.model.Reply", "Common.model.Comment"],
+    stores: ["Common.store.Comments", "Common.store.Users"],
+    config: {
+        currentUserId: undefined,
+        currentUserName: undefined
+    },
+    timeZoneOffsetInMs: (new Date()).getTimezoneOffset() * 60000,
+    init: function () {},
+    loadConfig: function (data) {
+        this.setCurrentUserId(data.config.user.id);
+        this.setCurrentUserName(data.config.user.name);
+    },
+    setApi: function (o) {
+        this.api = o;
+    },
+    utcDateToString: function (date) {
+        if (Object.prototype.toString.call(date) === "[object Date]") {
+            return (date.getTime() - this.timeZoneOffsetInMs).toString();
+        }
+        return "";
+    },
+    addComment: function (comment) {
+        if (this.api) {
+            var commentVal = Ext.String.trim(comment);
+            if (commentVal.length > 0) {
+                var ascCommentData = new asc_CCommentData();
+                if (ascCommentData) {
+                    ascCommentData.asc_putText(commentVal);
+                    ascCommentData.asc_putTime(this.utcDateToString(new Date()));
+                    ascCommentData.asc_putUserId(this.getCurrentUserId());
+                    ascCommentData.asc_putUserName(this.getCurrentUserName());
+                    ascCommentData.asc_putSolved(false);
+                    this.api.asc_addComment(ascCommentData);
+                }
+            }
+        }
+    },
+    resolveComment: function (commentId, resolve) {
+        if (this.api) {
+            var commentsStore = this.getCommonStoreCommentsStore(),
+            ascCommentData = new asc_CCommentData(),
+            me = this;
+            if (commentsStore && ascCommentData) {
+                var currentCommentData = commentsStore.findRecord("id", commentId);
+                if (currentCommentData) {
+                    ascCommentData.asc_putText(currentCommentData.get("comment"));
+                    ascCommentData.asc_putQuoteText(currentCommentData.get("quote"));
+                    ascCommentData.asc_putTime(this.utcDateToString(new Date(currentCommentData.get("date"))));
+                    ascCommentData.asc_putUserId(currentCommentData.get("userid"));
+                    ascCommentData.asc_putUserName(currentCommentData.get("username"));
+                    ascCommentData.asc_putSolved(resolve);
+                    currentCommentData.replys().each(function (reply) {
+                        var addReply = new asc_CCommentData();
+                        addReply.asc_putText(reply.get("reply"));
+                        addReply.asc_putTime(me.utcDateToString(new Date(reply.get("date"))));
+                        addReply.asc_putUserId(reply.get("userid"));
+                        addReply.asc_putUserName(reply.get("username"));
+                        ascCommentData.asc_addReply(addReply);
+                    });
+                    this.api.asc_changeComment(commentId, ascCommentData);
+                }
+            }
+        }
+    },
+    editComment: function (commentId, newComment) {
+        if (this.api) {
+            var commentVal = Ext.String.trim(newComment),
+            commentsStore = this.getCommonStoreCommentsStore(),
+            me = this;
+            if (commentVal.length > 0) {
+                var ascCommentData = new asc_CCommentData(),
+                currentCommentData = commentsStore.findRecord("id", commentId);
+                if (ascCommentData) {
+                    ascCommentData.asc_putText(commentVal);
+                    ascCommentData.asc_putQuoteText(currentCommentData.get("quote"));
+                    ascCommentData.asc_putTime(this.utcDateToString(new Date(currentCommentData.get("date"))));
+                    ascCommentData.asc_putUserId(this.getCurrentUserId());
+                    ascCommentData.asc_putUserName(this.getCurrentUserName());
+                    ascCommentData.asc_putSolved(currentCommentData.get("resolved"));
+                    currentCommentData.replys().each(function (reply) {
+                        var addReply = new asc_CCommentData();
+                        addReply.asc_putText(reply.get("reply"));
+                        addReply.asc_putTime(me.utcDateToString(new Date(reply.get("date"))));
+                        addReply.asc_putUserId(reply.get("userid"));
+                        addReply.asc_putUserName(reply.get("username"));
+                        ascCommentData.asc_addReply(addReply);
+                    });
+                    this.api.asc_changeComment(commentId, ascCommentData);
+                }
+            }
+        }
+    },
+    deleteComment: function (commentId) {
+        if (this.api) {
+            this.api.asc_removeComment(commentId);
+        }
+    },
+    selectComment: function (commentId) {
+        if (this.api) {
+            this.api.asc_selectComment(commentId);
+            this.api.asc_showComment(commentId);
+        }
+    },
+    addReply: function (commentId, reply) {
+        if (this.api) {
+            var replyVal = Ext.String.trim(reply),
+            commentsStore = this.getCommonStoreCommentsStore(),
+            me = this;
+            if (commentsStore && reply.length > 0) {
+                var ascCommentData = new asc_CCommentData(),
+                currentCommentData = commentsStore.findRecord("id", commentId);
+                if (ascCommentData && currentCommentData) {
+                    ascCommentData.asc_putText(currentCommentData.get("comment"));
+                    ascCommentData.asc_putQuoteText(currentCommentData.get("quote"));
+                    ascCommentData.asc_putTime(this.utcDateToString(new Date(currentCommentData.get("date"))));
+                    ascCommentData.asc_putUserId(currentCommentData.get("userid"));
+                    ascCommentData.asc_putUserName(currentCommentData.get("username"));
+                    ascCommentData.asc_putSolved(currentCommentData.get("resolved"));
+                    var appendComment = function (data) {
+                        var addReply = new asc_CCommentData();
+                        addReply.asc_putText(data.reply);
+                        addReply.asc_putTime(data.date);
+                        addReply.asc_putUserId(data.userid);
+                        addReply.asc_putUserName(data.username);
+                        ascCommentData.asc_addReply(addReply);
+                    };
+                    appendComment({
+                        reply: replyVal,
+                        date: this.utcDateToString(new Date()),
+                        userid: this.getCurrentUserId(),
+                        username: this.getCurrentUserName()
+                    });
+                    currentCommentData.replys().each(function (reply) {
+                        appendComment({
+                            reply: reply.get("reply"),
+                            date: me.utcDateToString(new Date(reply.get("date"))),
+                            userid: reply.get("userid"),
+                            username: reply.get("username")
+                        });
+                    });
+                    this.api.asc_changeComment(commentId, ascCommentData);
+                    return true;
+                }
+            }
+        }
+        return false;
+    },
+    editReply: function (commentId, replyId, newReply) {
+        if (this.api) {
+            var replyVal = Ext.String.trim(newReply),
+            me = this,
+            commentsStore = this.getCommonStoreCommentsStore();
+            if (commentsStore && replyVal.length > 0) {
+                var ascCommentData = new asc_CCommentData(),
+                currentCommentData = commentsStore.findRecord("id", commentId);
+                if (ascCommentData) {
+                    ascCommentData.asc_putText(currentCommentData.get("comment"));
+                    ascCommentData.asc_putQuoteText(currentCommentData.get("quote"));
+                    ascCommentData.asc_putTime(this.utcDateToString(new Date(currentCommentData.get("date"))));
+                    ascCommentData.asc_putUserId(currentCommentData.get("userid"));
+                    ascCommentData.asc_putUserName(currentCommentData.get("username"));
+                    ascCommentData.asc_putSolved(currentCommentData.get("resolved"));
+                    var appendComment = function (data) {
+                        var addReply = new asc_CCommentData();
+                        addReply.asc_putText(data.reply);
+                        addReply.asc_putTime(data.date);
+                        addReply.asc_putUserId(data.userid);
+                        addReply.asc_putUserName(data.username);
+                        ascCommentData.asc_addReply(addReply);
+                    };
+                    currentCommentData.replys().each(function (reply) {
+                        var id = reply.get("id");
+                        appendComment({
+                            reply: (id == replyId) ? replyVal : reply.get("reply"),
+                            date: me.utcDateToString(new Date(reply.get("date"))),
+                            userid: (id == replyId) ? me.getCurrentUserId() : reply.get("userid"),
+                            username: (id == replyId) ? me.getCurrentUserName() : reply.get("username")
+                        });
+                    });
+                    this.api.asc_changeComment(commentId, ascCommentData);
+                }
+            }
+        }
+    },
+    deleteReply: function (commentId, replyId) {
+        if (this.api) {
+            var commentsStore = this.getCommonStoreCommentsStore(),
+            userStore = this.getCommonStoreCommentsStore(),
+            ascCommentData = new asc_CCommentData(),
+            me = this;
+            if (commentsStore && userStore && ascCommentData) {
+                var currentCommentData = commentsStore.findRecord("id", commentId),
+                user = userStore.findRecord("id", currentCommentData.get("userid"));
+                ascCommentData.asc_putText(currentCommentData.get("comment"));
+                ascCommentData.asc_putQuoteText(currentCommentData.get("quote"));
+                ascCommentData.asc_putTime(this.utcDateToString(new Date(currentCommentData.get("date"))));
+                ascCommentData.asc_putUserId(currentCommentData.get("userid"));
+                ascCommentData.asc_putUserName(user ? user.get("username") : "");
+                ascCommentData.asc_putSolved(currentCommentData.get("resolved"));
+                var appendComment = function (data) {
+                    var addReply = new asc_CCommentData();
+                    addReply.asc_putText(data.reply);
+                    addReply.asc_putTime(data.date);
+                    addReply.asc_putUserId(data.userid);
+                    addReply.asc_putUserName(data.username);
+                    ascCommentData.asc_addReply(addReply);
+                };
+                currentCommentData.replys().each(function (reply) {
+                    if (replyId != reply.get("id")) {
+                        var addReply = new asc_CCommentData();
+                        addReply.asc_putText(reply.get("reply"));
+                        addReply.asc_putTime(me.utcDateToString(new Date(reply.get("date"))));
+                        addReply.asc_putUserId(reply.get("userid"));
+                        addReply.asc_putUserName(reply.get("username"));
+                        ascCommentData.asc_addReply(addReply);
+                    }
+                });
+                this.api.asc_changeComment(commentId, ascCommentData);
+            }
+        }
+    },
+    updateHandlers: function (record, commentNode, handlers) {
+        var me = this,
+        commentId = record.get("id"),
+        rootNodeEl = Ext.get(commentNode);
+        if (Ext.isDefined(rootNodeEl)) {
+            var updateCommentHandler = function (clsEl, handler) {
+                var controlEl = rootNodeEl.down(clsEl);
+                if (controlEl) {
+                    var func = Ext.bind(function (event, el) {
+                        handler.call(el, commentId);
+                    },
+                    me);
+                    controlEl.un("click");
+                    controlEl.on("click", func);
+                }
+            };
+            var updateReplyHandler = function (clsEl, handler) {
+                var replys = rootNodeEl.down(".replys");
+                if (replys) {
+                    var editElements = replys.query(clsEl);
+                    Ext.each(editElements, function (element) {
+                        var el = Ext.get(element),
+                        rootReply = el.up(".reply");
+                        if (rootReply) {
+                            var replyId = rootReply.id.match(/\d+/g);
+                            if (replyId != null && replyId.length > 0) {
+                                var func = Ext.bind(function (event, el) {
+                                    handler.call(el, commentId, replyId);
+                                },
+                                me);
+                                el.un("click");
+                                el.on("click", func);
+                            }
+                        }
+                    });
+                }
+            };
+            var updateReplyTextHandler = function (clsEl, handler) {
+                var replys = rootNodeEl.down(".replys");
+                if (replys) {
+                    var msgElements = replys.query(clsEl);
+                    Ext.each(msgElements, function (element) {
+                        var controlEl = Ext.get(element);
+                        if (controlEl) {
+                            var func = Ext.bind(function (event, el) {
+                                handler.call(el, commentId);
+                            },
+                            me);
+                            controlEl.un("click");
+                            controlEl.on("click", func);
+                        }
+                    });
+                }
+            };
+            updateCommentHandler(".resolve", function (commentId) {
+                if (handlers && handlers.onResolveComment) {
+                    handlers.onResolveComment.call(me, commentId);
+                }
+            });
+            updateCommentHandler(".comment.edit", function (commentId) {
+                if (handlers && handlers.showEditCommentControls) {
+                    handlers.showEditCommentControls.call(me, commentId);
+                }
+            });
+            updateCommentHandler(".comment.delete", function (commentId) {
+                me.deleteComment(commentId);
+            });
+            updateCommentHandler(".quote", function (commentId) {
+                me.selectComment(commentId);
+            });
+            updateCommentHandler(".comment-message", function (commentId) {
+                me.selectComment(commentId);
+            });
+            updateReplyTextHandler(".reply-message", function (commentId) {
+                me.selectComment(commentId);
+            });
+            updateReplyHandler(".edit", function (commentId, replyId) {
+                if (handlers && handlers.showEditReplyControls) {
+                    handlers.showEditReplyControls.call(me, commentId, replyId);
+                }
+            });
+            updateReplyHandler(".delete", function (commentId, replyId) {
+                me.deleteReply(commentId, replyId[0]);
+            });
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/controller/CommentsPopover.js

@@ -0,0 +1,952 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.controller.CommentsPopover", {
+    extend: "Common.controller.CommentsBase",
+    requires: ["Common.view.CommentsEditForm"],
+    views: ["Common.view.CommentsPopover"],
+    init: function () {
+        this.visiblePopovers = new Ext.util.MixedCollection();
+        this.isDocumentContentReady = false;
+        this.control({
+            "commoncommentspopover": {
+                afterrender: this.onAfterRenderPopover,
+                transformToAdd: this.onTransformToAdd
+            },
+            "commoncommentspopover > dataview": {
+                afterrender: this.onAfterRenderComment,
+                itemupdate: this.onUpdateComment,
+                viewready: this.onViewReadyComments
+            },
+            "commoncommentspopover textarea[action=add-reply-textarea]": {
+                elastic: this.onElasticAddReply,
+                keydown: this.onKeyDownTextArea
+            },
+            "commoncommentspopover label[action=link]": {
+                afterrender: this.onAfterRenderAddReply
+            },
+            "commoncommentspopover button[action=reply]": {
+                click: this.onBtnAddReply
+            },
+            "commoncommentspopover button[action=close]": {
+                click: this.onBtnCloseReply
+            }
+        });
+    },
+    config: {
+        movingTopLimit: -32,
+        movingBottomLimit: -6,
+        autoPopup: true,
+        lastPosition: {
+            x: 0,
+            y: 0
+        }
+    },
+    sdkViewName: "#id_main",
+    setConfig: function (data, api) {
+        this.superclass.loadConfig.call(this, data);
+        this.setApi(api);
+        this.sdkViewName = data["sdkviewname"] || this.sdkViewName;
+        this.setMovingTopLimit(data.movingtoplimit || -32);
+        this.setMovingBottomLimit(data.movingbottomlimit || -6);
+        this.setAutoPopup(data.autopopup || true);
+    },
+    setApi: function (o) {
+        this.callParent(arguments);
+    },
+    registerCallbacks: function () {
+        this.api.asc_registerCallback("asc_onAddComment", Ext.bind(this.onApiAddComment, this));
+        this.api.asc_registerCallback("asc_onShowComment", Ext.bind(this.onApiShowComment, this));
+        this.api.asc_registerCallback("asc_onHideComment", Ext.bind(this.onApiHideComment, this));
+        this.api.asc_registerCallback("asc_onUpdateCommentPosition", Ext.bind(this.onApiUpdateCommentPosition, this));
+        this.api.asc_registerCallback("asc_onRemoveComment", Ext.bind(this.onApiRemoveComment, this));
+    },
+    onApiAddComment: function (commentId, data) {
+        if (this.isDocumentContentReady && this.getAutoPopup()) {
+            this.api.asc_selectComment(commentId);
+            this.api.asc_showComment(commentId, true);
+        }
+    },
+    onApiShowComment: function (commentId, posX, posY, leftX, canedit) {
+        commentId = commentId[commentId.length - 1];
+        if (!Ext.isEmpty(Ext.get("id-doc-comment-" + commentId))) {
+            return;
+        }
+        this.setLastPosition({
+            x: posX,
+            y: posY,
+            lx: leftX
+        });
+        this.onApiHideComment();
+        var docArea = Ext.getCmp("editor_sdk");
+        if (docArea) {
+            var sdkMainView = docArea.getEl().down(this.sdkViewName);
+            if (sdkMainView) {
+                var ownerCommentEl = sdkMainView.createChild({
+                    tag: "div",
+                    id: "id-doc-comment-" + commentId,
+                    cls: "comment-popover-root",
+                    style: "top: " + posY + "px; left: " + posX + "px;"
+                });
+                if (ownerCommentEl) {
+                    var newPopover = Ext.widget("commoncommentspopover", {
+                        commentId: commentId,
+                        userId: this.getCurrentUserId(),
+                        editable: !(canedit === false),
+                        renderTo: ownerCommentEl,
+                        maxHeight: sdkMainView.getHeight() + this.getMovingTopLimit() + this.getMovingBottomLimit()
+                    });
+                    if (newPopover) {
+                        if (posX + newPopover.getWidth() > sdkMainView.getWidth()) {
+                            if (leftX) {
+                                ownerCommentEl.addCls("left-sided").setLeft(leftX - newPopover.getWidth() - parseInt(ownerCommentEl.getStyle("margin-right")));
+                            } else {
+                                var marginLeft = parseInt(ownerCommentEl.getStyle("margin-left"));
+                                if (marginLeft) {
+                                    ownerCommentEl.setLeft(sdkMainView.getWidth() - newPopover.getWidth() - marginLeft * 2);
+                                }
+                            }
+                        }
+                        if (posY + newPopover.getHeight() > sdkMainView.getHeight()) {
+                            ownerCommentEl.setTop(sdkMainView.getHeight() - newPopover.getHeight());
+                        }
+                        newPopover.getEl().alignTo(ownerCommentEl, "tl");
+                        newPopover.show();
+                        this.visiblePopovers.add(commentId, newPopover);
+                    }
+                }
+            }
+        }
+    },
+    onApiHideComment: function () {
+        if (this.visiblePopovers.length) {
+            this.keepIncompleteComments();
+            this.visiblePopovers.eachKey(function (key, widget) {
+                var ownerCommentEl = Ext.get("id-doc-comment-" + key);
+                if (ownerCommentEl) {
+                    widget.destroy();
+                    ownerCommentEl.remove();
+                }
+            });
+            this.visiblePopovers.clear();
+            this.editControls = undefined;
+        }
+    },
+    onApiRemoveComment: function (commentId) {
+        this.clearIncompleteComments(commentId);
+        var ownerCommentEl = Ext.get("id-doc-comment-" + commentId);
+        if (ownerCommentEl) {
+            var widget = this.visiblePopovers.get(commentId);
+            if (widget) {
+                widget.destroy();
+                ownerCommentEl.remove();
+                this.visiblePopovers.removeAtKey(commentId); ! this.visiblePopovers.length && (this.editControls = undefined);
+            }
+        }
+    },
+    onApiUpdateCommentPosition: function (commentId, newPosX, newPosY, leftX) {
+        var ownerCommentEl = Ext.get("id-doc-comment-" + commentId),
+        popoverCmp = this.getViewByCommentId(commentId),
+        docArea = Ext.getCmp("editor_sdk"),
+        me = this;
+        if (docArea && ownerCommentEl && popoverCmp) {
+            var sdkMainView = docArea.getEl().down(this.sdkViewName);
+            if (sdkMainView) {
+                var ownerMarginLeft = parseInt(ownerCommentEl.getStyle("margin-left")),
+                ownerMarginTop = parseInt(ownerCommentEl.getStyle("margin-top"));
+                this.setLastPosition({
+                    x: newPosX,
+                    y: newPosY,
+                    lx: leftX
+                });
+                if (newPosY > 0 && newPosY < sdkMainView.getHeight()) {
+                    if (!popoverCmp.isVisible()) {
+                        popoverCmp.show();
+                        var commentsList = this.getDataViewInView(popoverCmp);
+                        if (commentsList) {
+                            commentsList.doComponentLayout();
+                            me.updateCommentsScrollView(commentsList, true);
+                        }
+                        this.fixViewSize(popoverCmp);
+                    }
+                } else {
+                    popoverCmp.hide();
+                }
+                if (popoverCmp.isVisible()) {
+                    if (newPosX + popoverCmp.getWidth() > sdkMainView.getWidth()) {
+                        if (leftX) {
+                            ownerCommentEl.addCls("left-sided").setLeft(leftX - popoverCmp.getWidth() - parseInt(ownerCommentEl.getStyle("margin-right")));
+                        } else {
+                            ownerCommentEl.setLeft(sdkMainView.getWidth() - popoverCmp.getWidth() - ownerMarginLeft * 2);
+                        }
+                    } else {
+                        ownerCommentEl.removeCls("left-sided").setLeft(newPosX);
+                    }
+                    var arrow = popoverCmp.getEl().down(".popover-arrow");
+                    var arrowCt = arrow.up(".x-container");
+                    if (newPosY + popoverCmp.getHeight() + ownerMarginTop - this.getMovingBottomLimit() > sdkMainView.getHeight() && newPosY < sdkMainView.getHeight()) {
+                        var top = sdkMainView.getHeight() - popoverCmp.getHeight() - ownerMarginTop + this.getMovingBottomLimit();
+                        if (newPosY - top + arrow.getHeight() + 5 + (arrow.getTop() - arrowCt.getTop()) < popoverCmp.getHeight()) {
+                            arrowCt.setStyle("margin-top", (newPosY - top) + "px");
+                        }
+                        ownerCommentEl.setTop(sdkMainView.getHeight() - popoverCmp.getHeight() - ownerMarginTop + this.getMovingBottomLimit());
+                    } else {
+                        if (newPosY < Math.abs(ownerMarginTop + this.getMovingTopLimit())) {
+                            ownerCommentEl.setTop(Math.abs(ownerMarginTop + this.getMovingTopLimit()));
+                        } else {
+                            if (!/^0/.test(arrowCt.getStyle("margin-top"))) {
+                                arrowCt.setStyle("margin-top", 0);
+                            }
+                            ownerCommentEl.setTop(newPosY);
+                        }
+                    }
+                }
+                var popover = this.visiblePopovers.get(commentId);
+                if (popover) {
+                    popover.getEl().alignTo(ownerCommentEl, "tl-tl");
+                }
+            }
+        }
+    },
+    onDocumentContentReady: function () {
+        this.isDocumentContentReady = true;
+    },
+    getViewByCommentId: function (commentId) {
+        return Ext.getCmp("id-popover-comments-" + commentId);
+    },
+    getViewByCmp: function (cmp) {
+        if (cmp) {
+            return cmp.findParentBy(function (obj) {
+                if (obj.getEl() && obj.getEl().hasCls("common-commentspopover")) {
+                    return true;
+                }
+            });
+        }
+        return null;
+    },
+    getDataViewInView: function (view) {
+        if (view) {
+            return view.down("dataview");
+        }
+        return null;
+    },
+    fixViewSize: function (view) {
+        var dataview = view.down("dataview"),
+        link = view.down("container[action=add-reply-link-container]"),
+        form = view.down("container[action=add-reply-form-container]");
+        if (dataview) {
+            var dataviewEl = dataview.getEl(),
+            height = dataviewEl.getHeight(),
+            plugin = dataview.getPlugin("scrollpane");
+            if (plugin) {
+                var pane = dataviewEl.down(".jspPane");
+                if (pane) {
+                    height = pane.getHeight();
+                }
+            }
+            if (height < view.minHeight) {
+                height = view.minHeight;
+            }
+            if (form && !form.isHidden()) {
+                height += form.getHeight();
+            } else {
+                if (link) {
+                    height += link.getHeight();
+                }
+            }
+            if (height > view.maxHeight) {
+                height = view.maxHeight;
+            }
+            view.setHeight(height);
+            this.onApiUpdateCommentPosition(view.getCommentId(), this.getLastPosition().x, this.getLastPosition().y, this.getLastPosition().lx);
+        }
+    },
+    onAfterRenderPopover: function (cmp) {
+        this.fixViewSize(cmp);
+    },
+    onTransformToAdd: function (cmp) {
+        var me = this;
+        this.showEditCommentControls(cmp.commentId);
+        var addReplyLink = cmp.down("#id-popover-add-reply-link-" + cmp.commentId),
+        editForm = Ext.getCmp("controls-edit-msg-popover-" + cmp.commentId);
+        if (addReplyLink) {
+            addReplyLink.hide();
+        }
+        if (editForm) {
+            var buttons = editForm.query("button"),
+            textarea = editForm.query("textarea");
+            textarea && textarea[0].focus(false, 100);
+            Ext.each(buttons, function (button) {
+                if (button.action == "edit") {
+                    button.setText(me.textAdd);
+                }
+                button.on("click", function (cmp) {
+                    Ext.each(buttons, function (button) {
+                        button.un("click");
+                    });
+                    addReplyLink && addReplyLink.show();
+                    me.hideEditCommentControls(cmp);
+                    if (button.action != "edit") {
+                        me.onApiHideComment();
+                    }
+                },
+                {
+                    single: true
+                });
+            });
+        }
+        cmp.doLayout();
+        cmp.doComponentLayout();
+        me.fixViewSize(cmp);
+    },
+    onAfterRenderAddReply: function (cmp) {
+        var me = this;
+        cmp.getEl().on("click", function (event, node) {
+            me.showAddReplyControls(cmp);
+        });
+    },
+    onAfterRenderComment: function (cmp) {
+        cmp.getSelectionModel().keyNav.disable();
+    },
+    onUpdateComment: function (record, index, node) {
+        var me = this,
+        commentId = record.get("id"),
+        popoverView = this.getViewByCommentId(commentId);
+        if (popoverView) {
+            var commentsList = this.getDataViewInView(popoverView);
+            if (commentsList) {
+                commentsList.doComponentLayout();
+                me.updateHandlers(record, "id-popover-comment-" + commentId, {
+                    onResolveComment: me.onResolveComment,
+                    showEditCommentControls: me.showEditCommentControls,
+                    showEditReplyControls: me.showEditReplyControls
+                });
+                var replys = record.get("replays");
+                if (replys) {
+                    replys.each(function (reply) {
+                        me.hideEditReplyControls(commentId, reply.get("id"));
+                    });
+                }
+                if (commentsList) {
+                    this.updateCommentsScrollView(commentsList, true);
+                }
+            }
+            this.fixViewSize(popoverView);
+            var popoverViewEl = popoverView.getEl();
+            if (record.get("lock")) {
+                popoverViewEl.addCls("lock");
+                var userStore = this.getCommonStoreUsersStore(),
+                lockUserName = me.textAnonym;
+                if (userStore) {
+                    var userRec = userStore.findRecord("id", record.get("lockuserid"));
+                    if (userRec) {
+                        lockUserName = userRec.get("username");
+                    }
+                }
+                var authEl = popoverViewEl.down(".lock-author");
+                if (authEl) {
+                    authEl.dom.innerHTML = lockUserName;
+                }
+            } else {
+                popoverViewEl.removeCls("lock");
+            }
+        }
+    },
+    onViewReadyComments: function (cmp) {
+        var me = this,
+        popoverView = this.getViewByCmp(cmp),
+        commentsList = this.getDataViewInView(popoverView),
+        commentsStore = cmp.getStore();
+        var record = commentsStore.findRecord("id", popoverView.getCommentId());
+        if (record) {
+            me.updateHandlers(record, "id-popover-comment-" + popoverView.getCommentId(), {
+                onResolveComment: me.onResolveComment,
+                showEditCommentControls: me.showEditCommentControls,
+                showEditReplyControls: me.showEditReplyControls
+            });
+        }
+        if (commentsList) {
+            if (popoverView.editable) {
+                this.showIncompleteCommentEditControls(popoverView.getCommentId());
+            }
+            this.updateCommentsScrollView(commentsList);
+            this.fixViewSize(popoverView);
+            var popoverViewEl = popoverView.getEl();
+            if (record && record.get("lock")) {
+                popoverViewEl.addCls("lock");
+                var userStore = this.getCommonStoreUsersStore(),
+                lockUserName = me.textAnonym;
+                if (userStore) {
+                    var userRec = userStore.findRecord("id", record.get("lockuserid"));
+                    if (userRec) {
+                        lockUserName = userRec.get("username");
+                    }
+                }
+                var authEl = popoverViewEl.down(".lock-author");
+                if (authEl) {
+                    authEl.dom.innerHTML = lockUserName;
+                }
+            } else {
+                popoverViewEl.removeCls("lock");
+            }
+        }
+    },
+    updateCommentsScrollView: function (dataview, scrollBegin) {
+        if (dataview) {
+            var plugin = dataview.getPlugin("scrollpane");
+            if (plugin) {
+                var popover = this.getViewByCmp(dataview);
+                if (popover) {
+                    popover.doLayout();
+                }
+                plugin.updateScrollPane();
+                dataview.fireEvent("resize");
+                if (scrollBegin) {
+                    this.scrollViewToBegin(dataview);
+                }
+            }
+        }
+    },
+    scrollViewToBegin: function (dataview) {
+        if (dataview) {
+            var plugin = dataview.getPlugin("scrollpane");
+            if (plugin) {
+                var doScroll = new Ext.util.DelayedTask(function () {
+                    plugin.jspApi.scrollToPercentY(0, true);
+                });
+                doScroll.delay(100);
+            }
+        }
+    },
+    scrollViewToNode: function (dataview, node) {
+        if (dataview && node) {
+            var plugin = dataview.getPlugin("scrollpane");
+            if (plugin) {
+                var doScroll = new Ext.util.DelayedTask(function () {
+                    plugin.scrollToElement(node, false, true);
+                });
+                doScroll.delay(100);
+            }
+        }
+    },
+    showAddReplyControls: function (cmp, msg) {
+        var popoverView = this.getViewByCmp(cmp),
+        parentCmp = cmp.up("#id-popover-comments-" + popoverView.getCommentId()),
+        containerEditReply = parentCmp.down("#id-popover-controls-reply-" + popoverView.getCommentId()),
+        linkEditReply = parentCmp.down("#id-popover-add-reply-link-" + popoverView.getCommentId()),
+        textarea = parentCmp.down("textarea");
+        if (containerEditReply && linkEditReply) {
+            this.hideEditControls();
+            this.editControls = {
+                action: "add-reply",
+                component: cmp
+            };
+            containerEditReply.show();
+            linkEditReply.hide();
+            if (textarea) {
+                if (msg) {
+                    textarea.setValue(msg);
+                } (new Ext.util.DelayedTask(function () {
+                    textarea.focus();
+                },
+                this)).delay(100);
+            }
+        }
+        this.fixViewSize(popoverView);
+    },
+    hideAddReplyControls: function (cmp) {
+        var popoverView = this.getViewByCmp(cmp),
+        parentCmp = cmp.up("#id-popover-comments-" + popoverView.getCommentId()),
+        containerEditReply = parentCmp.down("#id-popover-controls-reply-" + popoverView.getCommentId()),
+        linkEditReply = parentCmp.down("#id-popover-add-reply-link-" + popoverView.getCommentId());
+        if (containerEditReply && linkEditReply) {
+            linkEditReply.show();
+            containerEditReply.hide();
+        }
+        popoverView.doLayout();
+        popoverView.doComponentLayout();
+        this.fixViewSize(popoverView);
+        this.editControls = undefined;
+    },
+    onResolveComment: function (commentId) {
+        var me = this,
+        popoverView = this.getViewByCommentId(commentId),
+        menuResolve = Ext.getCmp("comments-popover-menu-resolve-" + commentId);
+        if (popoverView) {
+            var commentResolveEl = popoverView.getEl().down(".resolve");
+            if (commentResolveEl) {
+                var commentsStore = this.getCommonStoreCommentsStore();
+                if (commentsStore) {
+                    var comment = commentsStore.findRecord("id", commentId);
+                    if (comment) {
+                        var resolved = comment.get("resolved");
+                        if (!resolved) {
+                            this.resolveComment(commentId, !resolved);
+                        } else {
+                            if (!menuResolve) {
+                                menuResolve = Ext.widget("menu", {
+                                    id: "comments-popover-menu-resolve-" + commentId,
+                                    renderTo: Ext.getBody(),
+                                    plain: true,
+                                    minWidth: 50,
+                                    bodyCls: "menu-resolve-comment",
+                                    items: [{
+                                        text: me.textOpenAgain,
+                                        listeners: {
+                                            click: function (item, event) {
+                                                item.ownerCt.hide();
+                                                me.resolveComment(commentId, false);
+                                            }
+                                        }
+                                    }]
+                                });
+                            }
+                            menuResolve.show();
+                            menuResolve.showBy(commentResolveEl, "tr-br", [0, 5]);
+                        }
+                    }
+                }
+            }
+        }
+    },
+    showEditCommentControls: function (commentId, msg) {
+        var me = this,
+        popoverView = this.getViewByCommentId(commentId);
+        if (popoverView) {
+            var commentsList = this.getDataViewInView(popoverView);
+            if (commentsList) {
+                var commentEl = commentsList.getEl().down("#id-popover-comment-" + commentId);
+                if (commentEl) {
+                    var commentMsgEl = commentEl.down(".comment-message");
+                    if (commentMsgEl) {
+                        var message = commentMsgEl.down(".comment"),
+                        editControlsEl = commentEl.down(".edit-info"),
+                        editCommentControls = Ext.getCmp("controls-edit-msg-popover-" + commentId),
+                        commentsStore = commentsList.getStore();
+                        if (commentsStore) {
+                            var comment = commentsStore.findRecord("id", commentId);
+                            if (comment) {
+                                if (editCommentControls) {
+                                    editCommentControls.destroy();
+                                }
+                                if (editControlsEl) {
+                                    editControlsEl.hide();
+                                }
+                                if (message) {
+                                    message.setVisibilityMode(Ext.Element.DISPLAY);
+                                    message.hide();
+                                }
+                                this.hideEditControls();
+                                this.editControls = {
+                                    action: "comment",
+                                    comment: commentId
+                                };
+                                var editForm = Ext.widget("commoncommentseditform", {
+                                    scope: this,
+                                    editId: "popover-" + commentId,
+                                    renderTo: commentMsgEl,
+                                    msgValue: msg || comment.get("comment"),
+                                    onEditHandler: this.onBtnEditComment,
+                                    onCancelHandler: this.onBtnCancelEditComment
+                                });
+                                commentsList.on("resize", function () {
+                                    editForm.doLayout();
+                                },
+                                this, {
+                                    delay: 100
+                                });
+                                var onElastic = function () {
+                                    me.fixViewSize(popoverView);
+                                    me.updateCommentsScrollView(commentsList);
+                                };
+                                if (editForm) {
+                                    var textarea = editForm.down("textarea");
+                                    if (textarea) {
+                                        textarea.on("elastic", onElastic);
+                                        (new Ext.util.DelayedTask(function () {
+                                            textarea.focus();
+                                            if (textarea.getValue()) {
+                                                textarea.selectText(textarea.getValue().length);
+                                            }
+                                        },
+                                        this)).delay(100);
+                                    }
+                                }
+                                onElastic();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    hideEditCommentControls: function (commentId) {
+        var popoverView = this.getViewByCommentId(commentId);
+        if (popoverView) {
+            var commentsList = this.getDataViewInView(popoverView);
+            if (commentsList) {
+                var commentEl = commentsList.getEl().down("#id-popover-comment-" + commentId),
+                commentMsgEl = commentEl.down(".comment-message");
+                if (commentMsgEl) {
+                    var message = commentMsgEl.down(".comment"),
+                    editControlsEl = commentEl.down(".edit-info"),
+                    editCommentControls = Ext.getCmp("controls-edit-msg-popover-" + commentId);
+                    if (editControlsEl) {
+                        editControlsEl.show();
+                    }
+                    if (editCommentControls) {
+                        editCommentControls.hide();
+                    }
+                    if (message) {
+                        message.setVisibilityMode(Ext.Element.DISPLAY);
+                        message.show();
+                    }
+                    this.fixViewSize(popoverView);
+                    this.updateCommentsScrollView(commentsList);
+                    this.editControls = undefined;
+                }
+            }
+        }
+    },
+    showEditReplyControls: function (commentId, replyId, msg) {
+        var me = this,
+        popoverView = this.getViewByCommentId(commentId);
+        if (popoverView) {
+            var commentsList = this.getDataViewInView(popoverView);
+            if (commentsList) {
+                var replyEl = commentsList.getEl().down("#reply-" + replyId),
+                replyMsgEl = replyEl.down(".reply-message");
+                if (replyMsgEl) {
+                    var message = replyMsgEl.down(".message"),
+                    editControlsEl = replyEl.down(".edit-info"),
+                    editReplyControls = Ext.getCmp("controls-edit-msg-popover-" + replyId);
+                    var commentsStore = Ext.getStore("Common.store.Comments");
+                    if (commentsStore) {
+                        var comment = commentsStore.findRecord("id", commentId);
+                        if (comment) {
+                            var reply = comment.replys().findRecord("id", replyId);
+                            if (reply) {
+                                if (editReplyControls) {
+                                    editReplyControls.destroy();
+                                }
+                                if (editControlsEl) {
+                                    editControlsEl.hide();
+                                }
+                                if (message) {
+                                    message.setVisibilityMode(Ext.Element.DISPLAY);
+                                    message.hide();
+                                }
+                                this.hideEditControls();
+                                this.editControls = {
+                                    action: "edit-reply",
+                                    comment: commentId,
+                                    reply: replyId
+                                };
+                                var editForm = Ext.widget("commoncommentseditform", {
+                                    scope: this,
+                                    editId: "popover-" + replyId,
+                                    renderTo: replyMsgEl,
+                                    msgValue: msg || reply.get("reply"),
+                                    onEditHandler: this.onBtnEditReply,
+                                    onCancelHandler: this.onBtnCancelEditReply
+                                });
+                                commentsList.on("resize", function () {
+                                    editForm.doLayout();
+                                },
+                                this, {
+                                    delay: 100
+                                });
+                                var onElastic = function () {
+                                    me.fixViewSize(popoverView);
+                                    me.updateCommentsScrollView(commentsList);
+                                    var scrollToNode = Ext.get("controls-edit-msg-popover-" + replyId);
+                                    if (scrollToNode) {
+                                        me.scrollViewToNode(commentsList, scrollToNode.dom);
+                                    }
+                                };
+                                if (editForm) {
+                                    var textarea = editForm.down("textarea");
+                                    if (textarea) {
+                                        textarea.on("elastic", onElastic);
+                                        (new Ext.util.DelayedTask(function () {
+                                            textarea.focus();
+                                            if (textarea.getValue()) {
+                                                textarea.selectText(textarea.getValue().length);
+                                            }
+                                        },
+                                        this)).delay(100);
+                                    }
+                                }
+                                onElastic();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    hideEditReplyControls: function (commentId, replyId) {
+        var popoverView = this.getViewByCommentId(commentId);
+        if (popoverView) {
+            var commentsList = this.getDataViewInView(popoverView);
+            if (commentsList) {
+                var replyEl = commentsList.getEl().down("#reply-" + replyId),
+                replyMsgEl = replyEl.down(".reply-message");
+                if (replyMsgEl) {
+                    var message = replyMsgEl.down(".message"),
+                    editControlsEl = replyEl.down(".edit-info"),
+                    editReplyControls = Ext.getCmp("controls-edit-msg-popover-" + replyId);
+                    if (editControlsEl) {
+                        editControlsEl.show();
+                    }
+                    if (editReplyControls) {
+                        editReplyControls.hide();
+                    }
+                    if (message) {
+                        message.setVisibilityMode(Ext.Element.DISPLAY);
+                        message.show();
+                    }
+                    this.fixViewSize(popoverView);
+                    this.updateCommentsScrollView(commentsList);
+                    this.editControls = undefined;
+                }
+            }
+        }
+    },
+    makeCommentEditable: function (commentId) {
+        var commentPopover = Ext.ComponentQuery.query("commoncommentspopover")[0];
+        $("#" + commentPopover.id).find(".edit-info").show();
+        var addReplyLink = commentPopover.down("#id-popover-add-reply-link-" + commentId);
+        addReplyLink && addReplyLink.show();
+        commentPopover.editable = true;
+        commentPopover.doLayout();
+        commentPopover.doComponentLayout();
+        this.fixViewSize(commentPopover);
+    },
+    onBtnEditComment: function (cmp) {
+        var commentRoot = cmp.getEl().up(".comment-wrap");
+        if (commentRoot) {
+            var commentId = commentRoot.id.match(/id-popover-comment-(.+)/)[1];
+            var editRoot = cmp.findParentBy(function (obj) {
+                if (obj.getEl() && obj.getEl().hasCls("controls-edit-msg-container")) {
+                    return true;
+                }
+            });
+            if (editRoot) {
+                var textarea = editRoot.down("textarea");
+                if (textarea) {
+                    this.editComment(commentId, textarea.getValue());
+                }
+            }
+            var addReplyLink = Ext.getCmp("id-popover-add-reply-link-" + commentId);
+            addReplyLink && addReplyLink.show();
+            this.hideEditCommentControls(commentId);
+        }
+    },
+    onBtnCancelEditComment: function (cmp) {
+        var commentRoot = cmp.getEl().up(".comment-wrap");
+        if (commentRoot) {
+            this.hideEditCommentControls(commentRoot.id.match(/id-popover-comment-(.+)/)[1]);
+        }
+    },
+    onBtnEditReply: function (cmp) {
+        var replyRoot = cmp.getEl().up(".reply"),
+        commentRoot = cmp.getEl().up(".comment-wrap");
+        if (replyRoot && commentRoot) {
+            var commentId = commentRoot.id.match(/id-popover-comment-(.+)/)[1],
+            replyId = replyRoot.id.match(/\d+/g);
+            var editRoot = cmp.findParentBy(function (obj) {
+                if (obj.getEl() && obj.getEl().hasCls("controls-edit-msg-container")) {
+                    return true;
+                }
+            });
+            if (editRoot) {
+                var textarea = editRoot.down("textarea");
+                if (textarea) {
+                    this.editReply(commentId, replyId, textarea.getValue());
+                }
+            }
+            this.editControls = undefined;
+        }
+    },
+    onBtnCancelEditReply: function (cmp) {
+        var replyRoot = cmp.getEl().up(".reply"),
+        commentRoot = cmp.getEl().up(".comment-wrap");
+        if (replyRoot && commentRoot) {
+            this.hideEditReplyControls(commentRoot.id.match(/id-popover-comment-(.+)/)[1], replyRoot.id.match(/\d+/g));
+        }
+    },
+    onBtnAddReply: function (cmp) {
+        var popoverView = this.getViewByCmp(cmp),
+        commentsList = this.getDataViewInView(popoverView),
+        parentCmp = cmp.up("#id-popover-comments-" + popoverView.getCommentId());
+        if (parentCmp) {
+            var textarea = parentCmp.down("textarea");
+            if (textarea) {
+                if (textarea.getValue().length < 1) {
+                    return;
+                }
+                var replyVal = Ext.String.trim(textarea.getValue());
+                if (this.addReply(popoverView.getCommentId(), replyVal)) {
+                    textarea.setValue("");
+                    this.hideAddReplyControls(cmp);
+                    this.updateCommentsScrollView(commentsList, true);
+                }
+            }
+        }
+    },
+    onBtnCloseReply: function (cmp) {
+        var popoverView = this.getViewByCmp(cmp),
+        parentCmp = cmp.up("#id-popover-comments-" + popoverView.getCommentId());
+        if (parentCmp) {
+            var textarea = parentCmp.down("textarea");
+            if (textarea) {
+                textarea.setValue("");
+                this.hideAddReplyControls(cmp);
+            }
+        }
+    },
+    onElasticAddReply: function (cmp, width, height) {
+        var parent = cmp.ownerCt;
+        if (parent) {
+            var editContainer = parent.down("container");
+            if (editContainer && editContainer.rendered) {
+                var paddingTop = parseInt(parent.getEl().getStyle("padding-top")),
+                paddingBottom = parseInt(parent.getEl().getStyle("padding-bottom"));
+                parent.setHeight(height + editContainer.getHeight() + paddingTop + paddingBottom + 5);
+                var rootParent = parent.ownerCt;
+                if (rootParent) {
+                    this.fixViewSize(rootParent);
+                }
+            }
+        }
+    },
+    onKeyDownTextArea: function (cmp, event) {
+        if (event.getKey() == event.ENTER) {
+            if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
+                var popoverView = this.getViewByCmp(cmp),
+                commentsList = this.getDataViewInView(popoverView),
+                parentCmp = cmp.up("#id-popover-comments-" + popoverView.getCommentId());
+                if (parentCmp) {
+                    if (cmp.getValue().length < 1) {
+                        return;
+                    }
+                    var replyVal = Ext.String.trim(cmp.getValue());
+                    if (this.addReply(popoverView.getCommentId(), replyVal)) {
+                        cmp.setValue("");
+                        this.hideAddReplyControls(cmp);
+                        this.updateCommentsScrollView(commentsList, true);
+                    }
+                }
+            }
+        }
+    },
+    keepIncompleteComments: function () {
+        var comment_keys, text, me = this,
+        comment_key;
+        me.visiblePopovers.eachKey(function (key, widget) {
+            if (widget.editable) {
+                me.clearIncompleteComments(key);
+                comment_keys = [];
+                if (me.editControls) {
+                    if (me.editControls.action == "comment") {
+                        comment_key = "self";
+                        text = $("#controls-edit-msg-popover-" + key + " textarea").filter(":visible");
+                    } else {
+                        if (me.editControls.action == "add-reply") {
+                            comment_key = "reply";
+                            text = $("#id-popover-controls-reply-" + key + " textarea").filter(":visible");
+                        } else {
+                            comment_key = me.editControls.reply;
+                            text = $("#controls-edit-msg-popover-" + comment_key + " textarea").filter(":visible");
+                        }
+                    }
+                    if (text && text[0] && text[0].value.length) {
+                        comment_keys.push(comment_key);
+                        window.sessionStorage.setItem(comment_key, text[0].value);
+                    }
+                }
+                if (comment_keys.length) {
+                    window.sessionStorage.setItem(key, comment_keys);
+                }
+            }
+        });
+    },
+    clearIncompleteComments: function (commentId) {
+        var comment_keys = window.sessionStorage.getItem(commentId);
+        if (comment_keys) {
+            comment_keys = comment_keys.match(/[a-zA-Z0-9-_]+/);
+            comment_keys.forEach(function (item) {
+                window.sessionStorage.removeItem(item);
+            });
+            window.sessionStorage.removeItem(commentId);
+        }
+    },
+    showIncompleteCommentEditControls: function (commentId) {
+        var me = this;
+        var comment_keys = window.sessionStorage.getItem(commentId),
+        text;
+        if (comment_keys) {
+            comment_keys = comment_keys.match(/[a-zA-Z0-9-_]+/ig);
+            comment_keys.forEach(function (item) {
+                text = window.sessionStorage.getItem(item);
+                if (item == "self") {
+                    me.showEditCommentControls(commentId, text);
+                } else {
+                    if (item == "reply") {
+                        var addReplyLink = Ext.getCmp("id-popover-add-reply-link-" + commentId);
+                        me.showAddReplyControls(addReplyLink, text);
+                    } else {
+                        me.showEditReplyControls(commentId, item, text);
+                    }
+                }
+            });
+        }
+    },
+    hideEditControls: function () {
+        if (this.editControls) {
+            switch (this.editControls.action) {
+            case "comment":
+                this.hideEditCommentControls(this.editControls.comment);
+                break;
+            case "add-reply":
+                this.hideAddReplyControls(this.editControls.component);
+                break;
+            case "edit-reply":
+                this.hideEditReplyControls(this.editControls.comment, this.editControls.reply);
+                break;
+            }
+        }
+    },
+    textAnonym: "Guest",
+    textOpenAgain: "Open Again",
+    textAdd: "Add"
+});

OfficeWeb/apps/common/main/lib/controller/Fonts.js

@@ -0,0 +1,156 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ var FONT_TYPE_USERUSED = 4;
+Ext.define("Common.controller.Fonts", {
+    extend: "Ext.app.Controller",
+    views: ["ComboFonts"],
+    refs: [{
+        ref: "combo",
+        selector: "commoncombofonts"
+    }],
+    stores: ["Common.store.Fonts"],
+    init: function () {
+        this.control({
+            "commoncombofonts": {
+                expand: function (picker) {
+                    var combo = this.getCombo();
+                    var plugin = combo.getPlugin("scrollpane");
+                    if (plugin) {
+                        var doScroll = new Ext.util.DelayedTask(function () {
+                            var node = combo.picker.getNode(combo.lastSelection[0]);
+                            if (node) {
+                                plugin.scrollToElement(node, false, false);
+                            }
+                        });
+                    }
+                    doScroll.delay(10);
+                },
+                select: this._selectitem
+            }
+        });
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onInitEditorFonts", Ext.bind(this._onloadfonts, this));
+        this.api.asc_registerCallback("asc_onFontFamily", Ext.bind(this._onfontchange, this));
+    },
+    _isfontsaved: function (s, r) {
+        var out = r.get("type") == FONT_TYPE_USERUSED,
+        i = -1,
+        c = s.getCount(),
+        su,
+        n = r.get("name");
+        while (!out && ++i < c) {
+            su = s.getAt(i);
+            if (su.get("type") != FONT_TYPE_USERUSED) {
+                break;
+            }
+            out = su.get("name") == n;
+        }
+        return out;
+    },
+    _selectitem: function (combo, records, eOpts) {
+        if (combo.showlastused && !this._isfontsaved(combo.getStore(), records[0])) {
+            var node = combo.picker.getNode(records[0]);
+            var data = records[0].data;
+            var font = {
+                id: data.id,
+                name: data.name,
+                imgidx: data.imgidx,
+                cloneid: node.querySelector("img").id,
+                type: FONT_TYPE_USERUSED
+            };
+            combo.getStore().insert(0, [font]);
+            var separator = combo.picker.getEl().down(".used-fonts-separator");
+            if (!separator) {
+                separator = document.createElement("div");
+                separator.setAttribute("class", "x-menu-item-separator used-fonts-separator");
+                separator.setAttribute("style", "padding:0 10px;margin-left: 10px;");
+                node = combo.picker.getNode(combo.getStore().getAt(1));
+                node.parentNode.insertBefore(separator, node);
+            }
+            font = combo.getStore().getAt(5);
+            if (font.data.type == FONT_TYPE_USERUSED) {
+                combo.getStore().remove(font);
+            } else {
+                var plugin = combo.getPlugin("scrollpane");
+                if (plugin) {
+                    plugin.updateScrollPane();
+                }
+            }
+        }
+    },
+    _onfontchange: function (fontobj) {
+        var combo = this.getCombo();
+        var name = fontobj.get_Name();
+        var rec = combo.store.findRecord("name", name, 0, false, false, true);
+        combo.clearValue();
+        if (rec) {
+            combo.select(rec);
+        } else {
+            combo.setRawValue(name);
+        }
+    },
+    _onloadfonts: function (fl, select) {
+        var farr = [];
+        Ext.each(fl, function (item) {
+            farr.push({
+                id: item.asc_getFontId(),
+                name: item.asc_getFontName(),
+                imgidx: item.asc_getFontThumbnail(),
+                type: item.asc_getFontType()
+            });
+        });
+        var combo = this.getCombo();
+        if (combo) {
+            combo.fillFonts(farr, select);
+        } else {
+            this.fontscash = farr;
+        }
+        window.required_downloads--;
+    },
+    loadFonts: function (select) {
+        if (this.api) {
+            var fl = this.api.get_PropertyEditorFonts();
+            if (fl) {
+                this._onloadfonts(fl, select);
+            }
+        }
+    },
+    fillFonts: function (select) {
+        var combo = this.getCombo();
+        if (combo && combo.rendered && this.fontscash) {
+            combo.fillFonts(this.fontscash, select);
+            delete this.fontscash;
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/model/ChatMessage.js

@@ -0,0 +1,46 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.ChatMessage", {
+    extend: "Ext.data.Model",
+    fields: [{
+        type: "int",
+        name: "type"
+    },
+    {
+        type: "string",
+        name: "userid"
+    },
+    {
+        type: "string",
+        name: "message"
+    }]
+});

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

@@ -0,0 +1,80 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.Comment", {
+    extend: "Ext.data.Model",
+    fields: [{
+        type: "string",
+        name: "id"
+    },
+    {
+        type: "string",
+        name: "userid"
+    },
+    {
+        type: "string",
+        name: "username",
+        defaultValue: "Guest"
+    },
+    {
+        type: "int",
+        name: "date"
+    },
+    {
+        type: "string",
+        name: "quote"
+    },
+    {
+        type: "string",
+        name: "comment"
+    },
+    {
+        type: "boolean",
+        name: "resolved",
+        defaultValue: false
+    },
+    {
+        type: "boolean",
+        name: "lock",
+        defaultValue: false
+    },
+    {
+        type: "string",
+        name: "lockuserid"
+    }],
+    proxy: {
+        type: "memory"
+    },
+    hasMany: {
+        model: "Common.model.Reply",
+        name: "replys"
+    }
+});

OfficeWeb/apps/common/main/lib/model/Font.js

@@ -0,0 +1,42 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.Font", {
+    extend: "Ext.data.Model",
+    fields: ["id", "name", "cloneid", {
+        type: "int",
+        name: "imgidx"
+    },
+    {
+        type: "int",
+        name: "type"
+    }]
+});

OfficeWeb/apps/common/main/lib/model/Group.js

@@ -0,0 +1,42 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.Group", {
+    extend: "Ext.data.Model",
+    fields: ["group", "groupname"],
+    proxy: {
+        type: "memory"
+    },
+    hasMany: {
+        model: "Common.model.GroupItem",
+        name: "getGroupItems"
+    }
+});

OfficeWeb/apps/common/main/lib/model/GroupItem.js

@@ -0,0 +1,42 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.GroupItem", {
+    extend: "Ext.data.Model",
+    fields: ["group", "groupitem", "iconcls"],
+    proxy: {
+        type: "memory"
+    },
+    belongsTo: {
+        model: "Common.model.Group",
+        name: "group"
+    }
+});

OfficeWeb/apps/common/main/lib/model/Reply.js

@@ -0,0 +1,62 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.Reply", {
+    extend: "Ext.data.Model",
+    fields: [{
+        type: "int",
+        name: "id"
+    },
+    {
+        type: "string",
+        name: "userid"
+    },
+    {
+        type: "string",
+        name: "username",
+        defaultValue: ""
+    },
+    {
+        type: "int",
+        name: "date"
+    },
+    {
+        type: "string",
+        name: "reply"
+    }],
+    proxy: {
+        type: "memory"
+    },
+    belongsTo: {
+        model: "Common.model.Comment",
+        name: "comment"
+    }
+});

OfficeWeb/apps/common/main/lib/model/User.js

@@ -0,0 +1,53 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.model.User", {
+    extend: "Ext.data.Model",
+    fields: [{
+        type: "string",
+        name: "id",
+        defaultValue: ""
+    },
+    {
+        type: "string",
+        name: "username",
+        defaultValue: "Guest"
+    },
+    {
+        type: "string",
+        name: "color"
+    },
+    {
+        type: "boolean",
+        name: "online",
+        defaultValue: false
+    }]
+});

OfficeWeb/apps/common/main/lib/plugin/ComboBoxScrollPane.js

@@ -0,0 +1,133 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.plugin.ComboBoxScrollPane", {
+    extend: "Common.plugin.ScrollPane",
+    alias: "plugin.comboboxscrollpane",
+    areaSelector: ".list-ct",
+    init: function (comboBox) {
+        comboBox.on("expand", this.onExpand, this);
+    },
+    onExpand: function (comboBox) {
+        var me = this;
+        if (!me.picker) {
+            me.picker = comboBox.getPicker();
+            me.picker.on({
+                viewready: me.onViewReady,
+                resize: function () {
+                    me.updateScrollPane();
+                },
+                beforecontainerclick: function () {
+                    return false;
+                },
+                beforeitemmouseenter: function (picker, record, item, index, event, opts) {
+                    if (comboBox.scrolllocked) {
+                        return false;
+                    }
+                },
+                scope: me
+            });
+            me.cmp.on("afterlayout", me.onViewReady, me, {
+                single: true
+            });
+            comboBox.on("keydown", me.onKeyDown, me);
+            var store = comboBox.getStore();
+            store.on("datachanged", me.onDataChanged, me, {
+                buffer: 10
+            });
+        }
+    },
+    onKeyDown: function (cmp, e, eOpts) {
+        var me = this;
+        var highlightAt = function (index) {
+            var boundList = me.picker,
+            item = boundList.all.item(index);
+            if (item) {
+                var container = Ext.getDom(boundList.getTargetEl()) || Ext.getBody().dom;
+                var el = item.dom,
+                offsets = item.getOffsetsTo(container),
+                top = offsets[1] + container.scrollTop,
+                bottom = top + el.offsetHeight,
+                ctClientHeight = container.clientHeight,
+                ctScrollTop = parseInt(container.scrollTop, 10),
+                ctBottom = ctScrollTop + ctClientHeight;
+                if (el.offsetHeight > ctClientHeight || top < ctScrollTop) {
+                    if (me.jspApi) {
+                        me.jspApi.scrollByY(top, false);
+                    }
+                } else {
+                    if (bottom > ctBottom) {
+                        if (me.jspApi) {
+                            me.jspApi.scrollByY(bottom - ctClientHeight, false);
+                        }
+                    }
+                }
+            }
+        };
+        switch (e.getKey()) {
+        case e.UP:
+            var boundList = me.picker,
+            allItems = boundList.all,
+            oldItem = boundList.highlightedItem,
+            oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
+            newItemIdx = oldItemIdx > 0 ? oldItemIdx - 1 : allItems.getCount() - 1;
+            highlightAt(newItemIdx);
+            break;
+        case e.DOWN:
+            var boundList = me.picker,
+            allItems = boundList.all,
+            oldItem = boundList.highlightedItem,
+            oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
+            newItemIdx = oldItemIdx < allItems.getCount() - 1 ? oldItemIdx + 1 : 0;
+            highlightAt(newItemIdx);
+            break;
+        case e.PAGE_UP:
+            case e.PAGE_DOWN:
+            break;
+        case e.HOME:
+            highlightAt(0);
+            break;
+        case e.END:
+            highlightAt(me.picker.all.getCount() - 1);
+            break;
+        }
+    },
+    onViewReady: function () {
+        var me = this;
+        me.initScrollPane(me.picker.getEl().dom);
+    },
+    onDataChanged: function () {
+        var me = this;
+        if (me.picker.getWidth() && me.picker.getHeight()) {
+            me.initScrollPane(me.picker.getEl().dom);
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/plugin/DataViewScrollPane.js

@@ -0,0 +1,104 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.plugin.DataViewScrollPane", {
+    extend: "Common.plugin.ScrollPane",
+    alias: "plugin.dataviewscrollpane",
+    areaSelector: ".x-component",
+    init: function (cmp) {
+        var me = this,
+        store;
+        me.callParent(arguments);
+        store = me.cmp.getStore();
+        if (store) {
+            store.on("datachanged", function () {
+                me.cmp && me.cmp.rendered && me.cmp.getWidth() > 0 && me.cmp.getHeight() > 0 && me.updateScrollPane();
+            },
+            me, {
+                buffer: 10
+            });
+        }
+        me.cmp.on("viewready", me.onViewReady, me, {
+            single: true
+        });
+    },
+    onKeyDown: function (e, eOpts) {
+        var me = this;
+        var store = me.cmp.getStore();
+        var highlightAt = function (index) {
+            var item = me.cmp.getNode(store.getAt(index)),
+            itemEl = Ext.create("Ext.Element", item);
+            if (item) {
+                var container = Ext.getDom(me.cmp.getTargetEl()) || Ext.getBody().dom;
+                var offsets = itemEl.getOffsetsTo(container),
+                top = offsets[1] + container.scrollTop,
+                bottom = top + item.offsetHeight,
+                ctClientHeight = container.clientHeight,
+                ctScrollTop = parseInt(container.scrollTop, 10),
+                ctBottom = ctScrollTop + ctClientHeight;
+                if (item.offsetHeight > ctClientHeight || top < ctScrollTop) {
+                    if (me.jspApi) {
+                        me.jspApi.scrollByY(top, false);
+                    }
+                } else {
+                    if (bottom > ctBottom) {
+                        if (me.jspApi) {
+                            me.jspApi.scrollByY(bottom - ctClientHeight, false);
+                        }
+                    }
+                }
+            }
+        };
+        switch (e.getKey()) {
+        case e.UP:
+            case e.DOWN:
+            var currItem = me.cmp.getSelectionModel().getLastSelected(),
+            currItemIdx = currItem ? store.indexOf(currItem) : -1;
+            highlightAt(currItemIdx);
+            break;
+        case e.PAGE_UP:
+            case e.PAGE_DOWN:
+            break;
+        case e.HOME:
+            me.cmp.select(0);
+            highlightAt(0);
+            break;
+        case e.END:
+            me.cmp.select(store.count() - 1);
+            highlightAt(store.count() - 1);
+            break;
+        }
+    },
+    onViewReady: function () {
+        var me = this;
+        me.cmp.getEl().on("keydown", me.onKeyDown, me);
+    }
+});

OfficeWeb/apps/common/main/lib/plugin/GridScrollPane.js

@@ -0,0 +1,105 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.plugin.GridScrollPane", {
+    extend: "Common.plugin.ScrollPane",
+    alias: "plugin.gridscrollpane",
+    areaSelector: ".x-grid-view",
+    settings: {
+        enableKeyboardNavigation: true,
+        keyboardSpeed: 0.001
+    },
+    init: function (cmp) {
+        var me = this,
+        store;
+        me.callParent(arguments);
+        store = me.cmp.getStore();
+        if (store) {
+            store.on("datachanged", me.updateScrollPane, me, {
+                buffer: 10
+            });
+        }
+        me.cmp.on("viewready", me.onViewReady, me, {
+            single: true
+        });
+    },
+    onKeyDown: function (e, eOpts) {
+        var me = this;
+        var store = me.cmp.getStore();
+        var highlightAt = function (index) {
+            var item = me.cmp.getView().getNode(store.getAt(index)),
+            itemEl = Ext.create("Ext.Element", item);
+            if (item) {
+                var container = Ext.getDom(me.cmp.getTargetEl()) || Ext.getBody().dom;
+                var offsets = itemEl.getOffsetsTo(container),
+                top = offsets[1] + container.scrollTop,
+                bottom = top + item.offsetHeight,
+                ctClientHeight = container.clientHeight,
+                ctScrollTop = parseInt(container.scrollTop, 10),
+                ctBottom = ctScrollTop + ctClientHeight;
+                if (item.offsetHeight > ctClientHeight || top < ctScrollTop) {
+                    if (me.jspApi) {
+                        me.jspApi.scrollByY(top, false);
+                    }
+                } else {
+                    if (bottom > ctBottom) {
+                        if (me.jspApi) {
+                            me.jspApi.scrollByY(bottom - ctClientHeight, false);
+                        }
+                    }
+                }
+            }
+        };
+        switch (e.getKey()) {
+        case e.UP:
+            case e.DOWN:
+            var currItem = me.cmp.getSelectionModel().getLastSelected(),
+            currItemIdx = currItem ? store.indexOf(currItem) : -1;
+            highlightAt(currItemIdx);
+            break;
+        case e.PAGE_UP:
+            case e.PAGE_DOWN:
+            break;
+        case e.HOME:
+            highlightAt(0);
+            break;
+        case e.END:
+            highlightAt(store.count() - 1);
+            break;
+        }
+    },
+    onViewReady: function () {
+        var me = this;
+        me.cmp.getView().getEl().on("keydown", me.onKeyDown, me, {
+            stopEvent: true
+        });
+    }
+});

OfficeWeb/apps/common/main/lib/plugin/MenuExpand.js

@@ -0,0 +1,113 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.plugin.MenuExpand", {
+    extend: "Ext.AbstractPlugin",
+    alias: "plugin.menuexpand",
+    init: function (cmp) {
+        var me = this,
+        originLeave = cmp.onMouseLeave;
+        cmp.onMouseLeave = function (e) {
+            originLeave.apply(cmp, arguments);
+            if (cmp.parentItem) {
+                cmp.parentItem.menuEntered = false;
+            }
+        };
+        cmp.onMouseOver = me.onMouseOver;
+        cmp.checkItemMenuEntered = me.checkItemMenuEntered;
+        me.callParent(arguments);
+    },
+    checkItemMenuEntered: function () {
+        var me = this;
+        if (me.activeItem && me.activeItem.menuEntered && me.MouseOverInterval) {
+            clearInterval(me.MouseOverInterval);
+            me.MouseOverInterval = undefined;
+            me.activeItem.menuEntered = false;
+            if (me.checkeditem) {
+                me.checkeditem.el.removeCls(me.checkeditem.activeCls);
+            }
+            me.activeItem.el.addCls(me.activeItem.activeCls);
+        }
+    },
+    onMouseOver: function (e) {
+        var me = this,
+        fromEl = e.getRelatedTarget(),
+        mouseEnter = !me.el.contains(fromEl),
+        item = me.getItemFromEvent(e);
+        if (mouseEnter && me.parentMenu) {
+            me.parentMenu.setActiveItem(me.parentItem);
+            me.parentMenu.mouseMonitor.mouseenter();
+        }
+        if (me.disabled) {
+            return;
+        }
+        if (me.checkeditem && item != me.checkeditem) {
+            me.checkeditem.el.removeCls(me.checkeditem.activeCls);
+        }
+        if (me.checkeditem = item) {
+            me.checkeditem.el.addCls(me.checkeditem.activeCls);
+        }
+        if (me.activeItem && me.activeItem.menu) {
+            if (item && (item != me.activeItem && item != me.focusedItem) && me.MouseOverInterval === undefined) {
+                var counter = 0;
+                me.activeItem.menuEntered = false;
+                me.MouseOverInterval = setInterval(function () {
+                    me.checkItemMenuEntered();
+                    if (counter++>8) {
+                        clearInterval(me.MouseOverInterval);
+                        me.MouseOverInterval = undefined;
+                        if (me.checkeditem) {
+                            me.setActiveItem(me.checkeditem);
+                            if (me.checkeditem.activated && me.checkeditem.expandMenu) {
+                                me.checkeditem.expandMenu();
+                            }
+                        }
+                    }
+                },
+                20);
+            }
+        } else {
+            if (item) {
+                me.setActiveItem(item);
+                if (item.activated && item.expandMenu) {
+                    item.expandMenu();
+                }
+            }
+        }
+        if (mouseEnter) {
+            if (me.parentItem) {
+                me.parentItem.menuEntered = true;
+            }
+            me.fireEvent("mouseenter", me, e);
+        }
+        me.fireEvent("mouseover", me, item, e);
+    }
+});

OfficeWeb/apps/common/main/lib/plugin/ScrollPane.js

@@ -0,0 +1,158 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.plugin.ScrollPane", {
+    extend: "Ext.AbstractPlugin",
+    alias: "plugin.scrollpane",
+    areaSelector: ".x-panel-body",
+    settings: {},
+    init: function (cmp) {
+        var me = this,
+        origin;
+        me.settings = $.extend({
+            enableKeyboardNavigation: true,
+            verticalDragMinHeight: 16,
+            horizontalDragMinWidth: 16
+        },
+        me.settings);
+        origin = cmp.afterComponentLayout;
+        cmp.afterComponentLayout = function (width, height) {
+            origin.apply(cmp, arguments);
+            if (width > 0 && height > 0) {
+                me.initScrollPane();
+            }
+        };
+        me.callParent(arguments);
+    },
+    initScrollPane: function (domEl) {
+        var me = this,
+        children, jspCt, elem;
+        if (me.initializing) {
+            return;
+        }
+        me.initializing = true;
+        if (!me.area || !me.area.length) {
+            elem = domEl || me.cmp.getEl().dom;
+            me.area = $(elem).find("*").andSelf().filter(me.areaSelector).first();
+        }
+        children = me.area.children();
+        jspCt = children.filter("div.jspContainer");
+        if (children.length > 1 && jspCt.length > 0) {
+            jspCt.replaceWith($(".jspPane", jspCt).children());
+            jspCt = $();
+        }
+        if (me.jspApi && jspCt.length === 0) {
+            me.area.removeData("jsp");
+        }
+        me.area.jScrollPane(me.settings);
+        me.jspApi = me.area.data("jsp");
+        me.doLayout();
+        delete me.initializing;
+        elem = domEl || me.cmp.getEl().dom;
+        this._initSelectingScroll(elem);
+        if (jspCt.length) {
+            var thumb = jspCt.find(">.jspVerticalBar").find(">.jspTrack").find(">.jspDrag");
+            thumb.on("mousedown.asc", function (event) {
+                if (thumb[0].setCapture) {
+                    thumb[0].setCapture();
+                }
+                me.cmp.scrolllocked = true;
+                $("html").bind("mouseup.asc", function (e) {
+                    if (thumb[0].releaseCapture) {
+                        thumb[0].releaseCapture();
+                    }
+                    me.cmp.scrolllocked = false;
+                    $("html").unbind("mouseup.asc");
+                });
+                return false;
+            });
+        }
+    },
+    _initSelectingScroll: function (elem) {
+        var me = this;
+        $(elem).off("mousedown.jsp");
+        $(elem).on("mousedown.jsp", function (event) {
+            $(document).on("mousemove.jsp", _onTextSelectionScrollMouseMove);
+            $(document).on("mouseup.jsp", function (event) {
+                $(document).off("mousemove.jsp").off("mouseup.jsp");
+                _clearTextSelectionInterval();
+            });
+        });
+        var getPos = function (event, c) {
+            var p = c == "X" ? "Left" : "Top";
+            return event["page" + c] || (event["client" + c] + (document.documentElement["scroll" + p] || document.body["scroll" + p])) || 0;
+        };
+        var textSelectionInterval;
+        var _onTextSelectionScrollMouseMove = function (event) {
+            var offset = $(elem).offset().top;
+            var maxOffset = offset + $(elem).innerHeight();
+            var mouseOffset = getPos(event, "Y");
+            var textDragDistanceAway = mouseOffset < offset ? mouseOffset - offset : (mouseOffset > maxOffset ? mouseOffset - maxOffset : 0);
+            if (textDragDistanceAway == 0) {
+                _clearTextSelectionInterval();
+            } else {
+                if (!textSelectionInterval) {
+                    textSelectionInterval = setInterval(function () {
+                        me.jspApi.scrollByY(textDragDistanceAway);
+                    },
+                    10);
+                }
+            }
+        };
+        var _clearTextSelectionInterval = function () {
+            if (textSelectionInterval) {
+                clearInterval(textSelectionInterval);
+                textSelectionInterval = undefined;
+            }
+        };
+    },
+    updateScrollPane: function (domEl) {
+        this.initScrollPane(domEl);
+        if (this.area) {
+            this.area.attr("tabindex", "-1");
+        }
+    },
+    scrollToElement: function (elem, stickToTop, animate) {
+        var me = this;
+        if (me.jspApi) {
+            me.jspApi.scrollToElement(elem, stickToTop, animate);
+        }
+    },
+    doLayout: function () {
+        var me = this,
+        items = me.cmp.items;
+        if (items && typeof items.each === "function") {
+            items.each(function (item) {
+                item.doComponentLayout();
+            });
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/plugin/TextAreaAutoHeight.js

@@ -0,0 +1,121 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.plugin.TextAreaAutoHeight", {
+    extend: "Ext.AbstractPlugin",
+    alias: "plugin.textareaautoheight",
+    settings: {
+        minHeight: 32,
+        maxHeight: 120,
+        growStep: 17
+    },
+    init: function (cmp) {
+        this.callParent(arguments);
+        cmp.addEvents("elastic");
+        cmp.on("afterrender", this.onAfterRender, this);
+        cmp.on("change", this.onChange, this);
+    },
+    onAfterRender: function (cmp) {
+        var textareaEl = cmp.getEl().down("textarea");
+        if (textareaEl) {
+            this.initHelper(textareaEl.id);
+            this.elasticTextArea(textareaEl.id);
+        }
+    },
+    onChange: function (cmp) {
+        if (!this.textareaElId) {
+            this.textareaElId = cmp.getEl().down("textarea").id;
+        }
+        this.elasticTextArea(this.textareaElId);
+    },
+    initHelper: function (elementId) {
+        var getStyles = function (el, args) {
+            var ret = {},
+            total = args.length;
+            for (var n = 0; n < total; n++) {
+                ret[args[n]] = el.getStyle(args[n]);
+            }
+            return ret;
+        };
+        var applyStyles = function (el, styles) {
+            if (styles) {
+                var i = 0,
+                len;
+                el = Ext.fly(el);
+                if (Ext.isFunction(styles)) {
+                    styles = styles.call();
+                }
+                if (typeof styles == "string") {
+                    styles = styles.split(/:|;/g);
+                    for (len = styles.length; i < len;) {
+                        el.setStyle(styles[i++], styles[i++]);
+                    }
+                } else {
+                    if (Ext.isObject(styles)) {
+                        el.setStyle(styles);
+                    }
+                }
+            }
+        };
+        this.domEl = Ext.get(elementId);
+        this.textareaElId = elementId;
+        var styles = getStyles(this.domEl, ["font-size", "font-family", "font-weight", "font-style", "line-height", "letter-spacing", "padding-left", "padding-top", "padding-right", "padding-bottom"]);
+        this.domEl.setStyle("overflow", "hidden");
+        if (!this.helperEl) {
+            this.helperEl = Ext.DomHelper.append(this.domEl.parent(), {
+                id: elementId + "-textarea-elastic-helper",
+                tag: "div",
+                style: "position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre-wrap; word-wrap: break-word;"
+            },
+            true);
+            applyStyles(this.helperEl, styles);
+        }
+    },
+    elasticTextArea: function (elementId) {
+        var me = this,
+        value = this.domEl.dom.value || "&nbsp;";
+        this.helperEl.setWidth(this.domEl.getWidth());
+        this.helperEl.update(value.replace(/<br \/>&nbsp;/, "<br />").replace(/<|>/g, " ").replace(/&/g, "&amp;").replace(/\n/g, "<br />"));
+        var textHeight = this.helperEl.getHeight();
+        if ((textHeight > me.settings.maxHeight) && (me.settings.maxHeight > 0)) {
+            textHeight = me.settings.maxHeight;
+            this.domEl.setStyle("overflow", "auto");
+        }
+        if ((textHeight < me.settings.minHeight) && (me.settings.minHeight > 0)) {
+            textHeight = me.settings.minHeight;
+        }
+        var newHeight = textHeight + me.settings.growStep;
+        if (me.cmp.getHeight() != newHeight) {
+            me.cmp.setHeight(newHeight);
+            me.cmp.fireEvent("elastic", me.cmp, this.domEl.getWidth(), newHeight);
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/store/ChatMessages.js

@@ -0,0 +1,35 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.store.ChatMessages", {
+    extend: "Ext.data.Store",
+    model: "Common.model.ChatMessage"
+});

OfficeWeb/apps/common/main/lib/store/Comments.js

@@ -0,0 +1,39 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.store.Comments", {
+    extend: "Ext.data.Store",
+    model: "Common.model.Comment",
+    sorters: [{
+        property: "date",
+        direction: "DESC"
+    }]
+});

OfficeWeb/apps/common/main/lib/store/Fonts.js

@@ -0,0 +1,35 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.store.Fonts", {
+    extend: "Ext.data.Store",
+    model: "Common.model.Font"
+});

OfficeWeb/apps/common/main/lib/store/Users.js

@@ -0,0 +1,47 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.store.Users", {
+    extend: "Ext.data.Store",
+    model: "Common.model.User",
+    getOnlineUserCount: function () {
+        var i = this.getCount(),
+        item,
+        count = 0;
+        while (i > 0) {
+            item = this.getAt(--i);
+            if (item.data.online) {
+                count++;
+            }
+        }
+        return count;
+    }
+});

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

@@ -0,0 +1,345 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.About", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonabout",
+    cls: "common-about-body",
+    requires: ["Ext.container.Container", "Ext.form.Label"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var txtVersionNum = "2.5";
+        var txtAscMail = "support@onlyoffice.com";
+        var txtAscTelNum = "+371 660-16425";
+        var txtAscUrl = "www.onlyoffice.com";
+        var txtAscName = "Ascensio System SIA";
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 1,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    align: "center"
+                }
+            },
+            items: [{
+                xtype: "container",
+                cls: "asc-about-office"
+            },
+            {
+                xtype: "tbspacer",
+                height: 5
+            },
+            {
+                xtype: "label",
+                cls: "asc-about-version",
+                text: this.txtVersion + txtVersionNum
+            },
+            {
+                xtype: "tbspacer",
+                height: 40
+            }]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 3,
+                tableAttrs: {
+                    style: "width: 100%;"
+                }
+            },
+            items: [{
+                cellCls: "about-separator-cell",
+                xtype: "tbspacer",
+                width: "100%",
+                html: '<div style="width: 100%; height: 3px !important; background-color: #e1e1e1"></div>'
+            },
+            {
+                xtype: "label",
+                cls: "asc-about-header",
+                text: this.txtLicensor
+            },
+            {
+                cellCls: "about-separator-cell",
+                xtype: "tbspacer",
+                width: "100%",
+                html: '<div style="width: 100%; height: 3px !important; background-color: #e1e1e1"></div>'
+            }]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 1,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    align: "center"
+                }
+            },
+            items: [{
+                xtype: "tbspacer",
+                height: 20
+            },
+            {
+                xtype: "label",
+                cls: "asc-about-companyname",
+                text: txtAscName
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                items: [{
+                    xtype: "label",
+                    cls: "asc-about-desc-name",
+                    text: this.txtAddress
+                },
+                {
+                    xtype: "label",
+                    cls: "asc-about-desc",
+                    text: this.txtAscAddress
+                }]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                items: [{
+                    xtype: "label",
+                    cls: "asc-about-desc-name",
+                    text: this.txtMail
+                },
+                {
+                    xtype: "label",
+                    cls: "asc-about-desc",
+                    html: Ext.String.format('<a href="mailto:{0}">{0}</a>', txtAscMail)
+                }]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                items: [{
+                    xtype: "label",
+                    cls: "asc-about-desc-name",
+                    text: this.txtTel
+                },
+                {
+                    xtype: "label",
+                    cls: "asc-about-desc",
+                    text: txtAscTelNum
+                }]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "label",
+                cls: "asc-about-desc",
+                html: Ext.String.format('<a href="http://{0}" target="_blank">{0}</a>', txtAscUrl)
+            },
+            {
+                xtype: "tbspacer",
+                height: 40
+            }]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 3,
+                tableAttrs: {
+                    style: "width: 100%;"
+                }
+            },
+            items: [{
+                cellCls: "about-separator-cell",
+                xtype: "tbspacer",
+                width: "100%",
+                html: '<div style="width: 100%; height: 3px !important; background-color: #e1e1e1"></div>'
+            },
+            {
+                xtype: "label",
+                cls: "asc-about-header",
+                text: this.txtLicensee
+            },
+            {
+                cellCls: "about-separator-cell",
+                xtype: "tbspacer",
+                width: "100%",
+                html: '<div style="width: 100%; height: 3px !important; background-color: #e1e1e1"></div>'
+            }]
+        },
+        this.cntLicenseeInfo = Ext.create("Ext.Container", {
+            layout: {
+                type: "table",
+                columns: 1,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    align: "center"
+                }
+            },
+            items: [{
+                xtype: "tbspacer",
+                height: 20
+            },
+            this.imgCompanyLogo = Ext.create("Ext.Container", {
+                html: '<img src="" />'
+            }), {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.lblCompanyName = Ext.create("Ext.form.Label", {
+                cls: "asc-about-companyname",
+                text: ""
+            }), {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                items: [{
+                    xtype: "label",
+                    cls: "asc-about-desc-name",
+                    text: this.txtAddress
+                },
+                this.lblCompanyAddress = Ext.create("Ext.form.Label", {
+                    cls: "asc-about-desc",
+                    text: ""
+                })]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                items: [{
+                    xtype: "label",
+                    cls: "asc-about-desc-name",
+                    text: this.txtMail
+                },
+                this.lblCompanyMail = Ext.create("Ext.form.Label", {
+                    cls: "asc-about-desc",
+                    text: ""
+                })]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.lblCompanyUrl = Ext.create("Ext.form.Label", {
+                cls: "asc-about-desc",
+                text: ""
+            }), {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.lblCompanyLic = Ext.create("Ext.form.Label", {
+                cls: "asc-about-lic",
+                text: ""
+            })]
+        })];
+        this.callParent(arguments);
+        this.items.items[3].hide();
+        this.cntLicenseeInfo.hide();
+    },
+    setLicInfo: function (data) {
+        if (data && typeof(data) == "object") {
+            this.items.items[3].show();
+            this.cntLicenseeInfo.show();
+            this.lblCompanyName.setText(data.asc_getCustomer());
+            var value = data.asc_getCustomerAddr();
+            if (value && value.length) {
+                this.lblCompanyAddress.setText(value);
+            } else {
+                this.cntLicenseeInfo.items.getAt(5).hide();
+                this.cntLicenseeInfo.items.getAt(6).hide();
+            }
+            value = data.asc_getCustomerMail();
+            if (value && value.length) {
+                this.lblCompanyMail.update(Ext.String.format('<a href="mailto:{0}">{0}</a>', value));
+            } else {
+                this.cntLicenseeInfo.items.getAt(7).hide();
+                this.cntLicenseeInfo.items.getAt(8).hide();
+            }
+            value = data.asc_getCustomerWww();
+            if (value && value.length) {
+                var islicense = /^label:(.+);url:(.+)/.exec(value);
+                if (islicense) {
+                    href = islicense[2];
+                    value = islicense[1];
+                } else {
+                    var href = /^https?:\/\//.test(value) ? value : "http://" + value;
+                }
+                this.lblCompanyUrl.update(Ext.String.format('<a href="{0}" target="_blank">{1}</a>', href, value));
+            } else {
+                this.cntLicenseeInfo.items.getAt(9).hide();
+                this.cntLicenseeInfo.items.getAt(10).hide();
+            } (value = data.asc_getCustomerInfo()) && value.length ? this.lblCompanyLic.setText(value) : this.cntLicenseeInfo.items.getAt(11).hide();
+            if ((value = data.asc_getCustomerLogo()) && value.length) {
+                this.imgCompanyLogo.html = '<img src="' + value + '" />';
+            } else {
+                this.imgCompanyLogo.hide();
+                this.cntLicenseeInfo.items.getAt(2).hide();
+            }
+        } else {
+            this.items.items[3].hide();
+            this.cntLicenseeInfo.hide();
+        }
+    },
+    txtVersion: "Version ",
+    txtLicensor: "LICENSOR",
+    txtLicensee: "LICENSEE",
+    txtAddress: "address: ",
+    txtAscAddress: "Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021",
+    txtMail: "email: ",
+    txtTel: "tel.: "
+});

OfficeWeb/apps/common/main/lib/view/AbstractSettingsPanel.js

@@ -0,0 +1,58 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.AbstractSettingsPanel", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.commonabstractsettingspanel",
+    bodyPadding: "0 0 0 15px",
+    preventHeader: true,
+    constructor: function (config) {
+        this.controls = [];
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        this.initialHeight = this.height;
+        me.callParent(arguments);
+    },
+    SuspendEvents: function () {
+        for (var i = 0; i < this.controls.length; i++) {
+            this.controls[i].suspendEvents(false);
+        }
+    },
+    ResumeEvents: function () {
+        for (var i = 0; i < this.controls.length; i++) {
+            this.controls[i].resumeEvents();
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/view/ChatPanel.js

@@ -0,0 +1,193 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.ChatPanel", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonchatpanel",
+    cls: "common-chatpanel",
+    requires: ["Common.plugin.DataViewScrollPane", "Ext.XTemplate", "Ext.view.View", "Ext.form.Label", "Ext.util.TextMetrics"],
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    createDelayedElements: function () {
+        var me = this,
+        usersStore = Ext.getStore("Common.store.Users");
+        me.add([{
+            xtype: "label",
+            cls: "chat-header",
+            text: this.textChat,
+            width: "100%"
+        },
+        {
+            xtype: "dataview",
+            height: 65,
+            width: "100%",
+            id: "id-chat-users",
+            cls: "chat-users-view",
+            group: "scrollable",
+            store: "Common.store.Users",
+            blockRefresh: true,
+            disableSelection: true,
+            tpl: new Ext.XTemplate('<tpl for=".">', '<tpl if="online">', '<div class="chat-user-wrap">', '<div class="color" style="background-color: {[this.getUserColor(values.id)]};"></div>', '<label class="name">{[this.getUserName(values.id)]}</label>', "</div>", "</tpl>", '<tpl if="!online">', '<div class="chat-user-wrap hidden"></div>', "</tpl>", "</tpl>", {
+                compiled: true,
+                getUserColor: function (id) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return rec.data.color;
+                        }
+                    }
+                    return "#000";
+                },
+                getUserName: function (id) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return Ext.String.ellipsis(Ext.String.htmlEncode(rec.get("username")), 23, true);
+                        }
+                    }
+                    return this.textAnonymous;
+                }
+            }),
+            itemSelector: "div.chat-user-wrap",
+            overItemCls: "x-item-over",
+            emptyText: "There is no authorized users",
+            autoScroll: true,
+            plugins: [{
+                ptype: "dataviewscrollpane",
+                pluginId: "scrollpane",
+                areaSelector: ".chat-users-view",
+                settings: {
+                    enableKeyboardNavigation: true,
+                    verticalGutter: 1
+                }
+            }]
+        },
+        {
+            xtype: "dataview",
+            flex: 1,
+            id: "id-chat-msg",
+            cls: "chat-msg-view",
+            group: "scrollable",
+            store: "Common.store.ChatMessages",
+            blockRefresh: true,
+            disableSelection: true,
+            tpl: new Ext.XTemplate('<tpl for=".">', '<div class="chat-msg-wrap">', '<tpl if="type == 1">', '<div class="message service">{[this.fixMessage(values.message)]}</div>', "</tpl>", '<tpl if="type != 1">', '<label class="user" data-can-copy="true" style="color: {[this.getUserColor(values.userid)]};">{username}:&nbsp</label>', '<label class="message" data-can-copy="true">{[this.fixMessage(values.message)]}</label>', "</tpl>", "</div>", "</tpl>", {
+                compiled: true,
+                getUserColor: function (id) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return rec.data.color;
+                        }
+                    }
+                    return "#000";
+                },
+                getUserName: function (id) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return Ext.String.ellipsis(Ext.String.htmlEncode(rec.get("username")), 23, true);
+                        }
+                    }
+                    return me.textAnonymous;
+                },
+                fixMessage: function (msg) {
+                    var pickLink = function (message) {
+                        var reg = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}/i.exec(message);
+                        if (reg) {
+                            message = message.replace(reg[0], '<a href="mailto:' + reg[0] + ">" + reg[0] + "</a>");
+                        } else {
+                            reg = message.match(/((https?|ftps?):\/\/)(www.)?([a-z0-9-]+)(\.[a-z]{2,6})?(\/\S*)?/ig); ! reg && (reg = message.match(/((https?|ftps?):\/\/)?(www.)?([a-z0-9-]+)(\.[a-z]{2,6})(\/\S*)?/ig));
+                            for (var key in reg) {
+                                message = message.replace(reg[key], '<a href="' + (reg[key].search(/((https?|ftps?):\/\/)/g) < 0 ? "http://": "") + reg[key] + '" target="_blank">' + reg[key] + "</a>");
+                            }
+                        }
+                        return (message);
+                    };
+                    var htmlEncode = function (message) {
+                        return Ext.String.htmlEncode(message);
+                    };
+                    return pickLink(htmlEncode(msg)).replace(/\n/g, "<br/>");
+                }
+            }),
+            itemSelector: "div.chat-msg-wrap",
+            emptyText: "",
+            autoScroll: true,
+            plugins: [{
+                ptype: "scrollpane",
+                pluginId: "scrollpane",
+                areaSelector: ".chat-msg-view",
+                settings: {
+                    enableKeyboardNavigation: true,
+                    verticalGutter: 1
+                }
+            }]
+        },
+        {
+            xtype: "tbspacer",
+            height: 10
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            cls: "add-msg-container",
+            height: 100,
+            items: [{
+                xtype: "textarea",
+                id: "id-chat-textarea",
+                height: 62,
+                enableKeyEvents: true
+            },
+            {
+                xtype: "container",
+                layout: "hbox",
+                items: [{
+                    xtype: "tbspacer",
+                    flex: 1
+                },
+                {
+                    xtype: "button",
+                    id: "id-btn-send-msg",
+                    cls: "btn-send-msg asc-blue-button",
+                    text: this.textSend
+                }]
+            }]
+        }]);
+    },
+    textChat: "Chat",
+    textSend: "Send",
+    textAnonymous: "Guest"
+});

OfficeWeb/apps/common/main/lib/view/CollapsedContainer.js

@@ -0,0 +1,108 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.CollapsedContainer", {
+    extend: "Ext.container.Container",
+    alias: "widget.commoncollapsedcontainer",
+    layout: "vbox",
+    layoutConfig: {
+        align: "stretch"
+    },
+    requires: ["Ext.button.Button", "Ext.container.Container", "Ext.form.Label"],
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        this.collapseButton = Ext.create("Ext.Button", {
+            id: this.headerBtnId,
+            cls: "asc-right-panel-btn-collapse",
+            iconCls: (this.contentCollapsed) ? "asc-right-panel-img-collapsed" : "asc-right-panel-img-expanded",
+            text: "",
+            listeners: {
+                click: Ext.bind(this._ShowHidePanel, this, [this.contentPanel], true)
+            }
+        });
+        this.contentPanel.setVisible(!this.contentCollapsed);
+        var headeritems = [];
+        headeritems.push({
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.headerText,
+            listeners: {
+                afterrender: Ext.bind(function (ct) {
+                    if (this.disableCollapse === undefined || !this.disableCollapse) {
+                        ct.getEl().on("dblclick", Ext.bind(this._ShowHidePanel, this, [this.collapseButton, {},
+                        {},
+                        this.contentPanel]), this);
+                    }
+                },
+                this)
+            }
+        });
+        if (this.disableCollapse === undefined || !this.disableCollapse) {
+            headeritems.push(this.collapseButton);
+        }
+        this.items = [];
+        if (this.disableHeader === undefined || !this.disableHeader) {
+            this.items.push({
+                xtype: "container",
+                height: 15,
+                width: this.width,
+                layout: "hbox",
+                align: "middle",
+                items: headeritems
+            });
+        }
+        this.items.push(this.contentPanel);
+        this.height = (this.disableHeader === undefined || !this.disableHeader) ? 15 : 0;
+        this.height += (this.contentCollapsed) ? 0 : (this.contentPanel.height);
+        this.addEvents("aftercollapsed");
+        this.callParent(arguments);
+    },
+    _ShowHidePanel: function (btn, e, eOpts, panel) {
+        var diff_height = 0;
+        if (btn.iconCls == "asc-right-panel-img-expanded") {
+            btn.setIconCls("asc-right-panel-img-collapsed");
+            this.setHeight(this.getHeight() - panel.getHeight());
+            diff_height = -panel.getHeight();
+            panel.hide();
+        } else {
+            btn.setIconCls("asc-right-panel-img-expanded");
+            panel.show();
+            this.setHeight(this.getHeight() + panel.getHeight());
+            diff_height = panel.getHeight();
+        }
+        this.contentCollapsed = !panel.isVisible();
+        this.fireEvent("aftercollapsed", this, diff_height);
+    }
+});

OfficeWeb/apps/common/main/lib/view/ComboFonts.js

@@ -0,0 +1,147 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.ComboFonts", {
+    extend: "Ext.form.field.ComboBox",
+    alias: "widget.commoncombofonts",
+    queryMode: "local",
+    matchFieldWidth: false,
+    displayField: "name",
+    showlastused: false,
+    constructor: function (config) {
+        var me = this;
+        var iconWidth = 302,
+        iconHeight = FONT_THUMBNAIL_HEIGHT;
+        this.addEvents("createpicker");
+        var thumbCanvas = document.createElement("canvas");
+        thumbCanvas.height = iconHeight;
+        thumbCanvas.width = iconWidth;
+        var thumbContext = thumbCanvas.getContext("2d");
+        var item_tpl = Ext.create("Ext.XTemplate", '<tpl for=".">', '<a class="font-item" style="display: block;">', '<img id="{[Ext.id()]}" src="{[this.getImageUri(values)]}" width="{[this.getImageWidth()]}" height="{[this.getImageHeight()]}" style="vertical-align: middle;margin: 0 0 0 -10px;">', "</a>", "</tpl>", {
+            getImageUri: function (opts) {
+                if (opts.cloneid) {
+                    return me.picker.listEl.down("#" + opts.cloneid).dom.src;
+                }
+                thumbContext.clearRect(0, 0, iconWidth, iconHeight);
+                thumbContext.drawImage(me.spriteThumbs, 0, -FONT_THUMBNAIL_HEIGHT * opts.imgidx);
+                return thumbCanvas.toDataURL();
+            },
+            getImageWidth: function () {
+                return iconWidth;
+            },
+            getImageHeight: function () {
+                return iconHeight;
+            }
+        });
+        Ext.apply(config, {
+            listConfig: {
+                id: "combo-fonts-list",
+                emptyText: "no fonts found",
+                mode: "local",
+                width: 326,
+                maxHeight: 468,
+                height: 468,
+                minHeight: 150,
+                itemTpl: item_tpl,
+                blockRefresh: true,
+                listeners: {
+                    viewready: function (cmp) {
+                        me.spriteThumbs = undefined;
+                    }
+                }
+            }
+        });
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.addListener("beforequery", this._beforeQuery, this);
+        this.callParent(arguments);
+    },
+    onRender: function (cmp) {
+        this.callParent(arguments);
+        this.el.set({
+            "data-qtip": this.tooltip
+        });
+        this.validate();
+    },
+    createPicker: function () {
+        this.callParent(arguments);
+        if (this.showlastused) {
+            this.fireEvent("createpicker", this, this.picker);
+        }
+        return this.picker;
+    },
+    fillFonts: function (arr, select) {
+        this._loadSprite();
+        this.getStore().loadData(arr);
+        if (select && this.getStore().getCount()) {
+            var rec = this.getStore().findRecord("name", "Arial");
+            if (rec) {
+                this.select(rec);
+            } else {
+                this.select(this.getStore().getAt(0));
+            }
+        }
+    },
+    _loadSprite: function () {
+        var me = this;
+        me.spriteThumbs = new Image();
+        me.spriteThumbs.src = window.g_standart_fonts_thumbnail;
+    },
+    _beforeQuery: function (qe) {
+        qe.forceAll = true;
+        qe.cancel = true;
+        if (qe.combo) {
+            qe.combo.expand();
+            var picker = qe.combo.getPicker();
+            var index = qe.combo.store.find("name", qe.query);
+            if (! (index < 0)) {
+                var node = picker.getNode(qe.combo.store.getAt(index));
+                if (node) {
+                    picker.highlightItem(node);
+                    var pos_h = picker.listEl.getHeight() / 2 - 30;
+                    var list_t = picker.listEl.getTop();
+                    var offset_y = Ext.get(node).getY() - list_t - pos_h;
+                    if (Math.abs(offset_y) > pos_h) {
+                        var jsp = $("#" + picker.listEl.id).data("jsp");
+                        if (jsp) {
+                            jsp.scrollByY(offset_y, true);
+                        }
+                    }
+                }
+            } else {
+                $("#" + picker.id + " ." + picker.overItemCls).removeClass(picker.overItemCls);
+            }
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/view/CommentsEditForm.js

@@ -0,0 +1,130 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.CommentsEditForm", {
+    extend: "Ext.container.Container",
+    alias: "widget.commoncommentseditform",
+    cls: "common-commentseditform",
+    requires: ["Common.plugin.TextAreaAutoHeight", "Ext.form.TextArea", "Ext.Button"],
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        if (!config || !config.scope || !config.editId || !config.renderTo || !config.onEditHandler || !config.onCancelHandler) {
+            throw Error("Common.view.CommentsEditForm creation failed: required parameters are missing.");
+        }
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.id = "controls-edit-msg-" + me.editId;
+        me.cls = "controls-edit-msg-container";
+        me.height = 80;
+        me.items = [{
+            xtype: "textarea",
+            height: 20,
+            value: me.msgValue,
+            enableKeyEvents: true,
+            listeners: {
+                elastic: Ext.bind(this.elasticTextArea, this),
+                keydown: Ext.bind(this.keyDownTextArea, this)
+            },
+            plugins: [{
+                ptype: "textareaautoheight",
+                pluginId: "elastic-helper"
+            }]
+        },
+        {
+            xtype: "container",
+            layout: "hbox",
+            height: 26,
+            id: "controls-edit-msg-" + me.editId + "-buttons",
+            items: [{
+                xtype: "button",
+                text: me.textEdit,
+                cls: "asc-blue-button",
+                action: "edit",
+                handler: Ext.bind(function (btn, event) {
+                    me.onEditHandler.call(me.scope, btn);
+                },
+                me.scope)
+            },
+            {
+                xtype: "tbspacer",
+                width: 10
+            },
+            {
+                xtype: "button",
+                text: me.textCancel,
+                handler: Ext.bind(function (btn, event) {
+                    me.onCancelHandler.call(me.scope, btn);
+                },
+                me.scope)
+            }]
+        }];
+        me.on("afterrender", Ext.bind(this.onAfterRender, this));
+        me.callParent(arguments);
+    },
+    onAfterRender: function (cmp) {
+        var textarea = cmp.down("textarea");
+        if (textarea) {
+            textarea.fireEvent("change");
+        }
+    },
+    elasticTextArea: function (cmp, width, height) {
+        var parent = cmp.ownerCt;
+        if (parent) {
+            var editContainer = parent.down("container");
+            if (editContainer) {
+                var paddingTop = parseInt(parent.getEl().getStyle("padding-top")),
+                paddingBottom = parseInt(parent.getEl().getStyle("padding-bottom"));
+                var editContainerHeight = editContainer.rendered ? editContainer.getHeight() : editContainer.height || 0;
+                parent.setHeight(height + editContainerHeight + paddingTop + paddingBottom + 5);
+            }
+        }
+    },
+    keyDownTextArea: function (field, event) {
+        if (event.getKey() == event.ENTER) {
+            if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
+                var me = this;
+                if (field.getValue().length > 0) {
+                    event.stopEvent();
+                    me.onEditHandler.call(me.scope, me.down("button[action=edit]"));
+                }
+            }
+        }
+    },
+    textEdit: "Edit",
+    textCancel: "Cancel"
+});

OfficeWeb/apps/common/main/lib/view/CommentsPanel.js

@@ -0,0 +1,256 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.CommentsPanel", {
+    extend: "Ext.container.Container",
+    alias: "widget.commoncommentspanel",
+    cls: "common-commentspanel",
+    requires: ["Common.plugin.DataViewScrollPane", "Ext.Date", "Ext.XTemplate", "Ext.form.Label"],
+    uses: ["Common.plugin.TextAreaAutoHeight", "Ext.util.TextMetrics"],
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    config: {
+        currentUserId: -1
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        usersStore = Ext.getStore("Common.store.Users");
+        me.items = [{
+            xtype: "label",
+            cls: "comments-header",
+            text: me.textComments,
+            width: "100%"
+        },
+        {
+            xtype: "dataview",
+            flex: 1,
+            id: "id-comments",
+            cls: "comments-view",
+            group: "scrollable",
+            store: Ext.getStore("Common.store.Comments") || Ext.create("Common.store.Comments", {
+                storeId: "Common.store.Comments"
+            }),
+            blockRefresh: true,
+            disableSelection: true,
+            tpl: new Ext.XTemplate('<tpl for=".">', '<tpl if="lock">', '<div class="comment-wrap lock" id="comment-{id}">', "</tpl>", '<tpl if="!lock">', '<div class="comment-wrap" id="comment-{id}">', "</tpl>", '<div class="header">', '<div class="user-info" >', '<div class="user">{[this.getUserName(values.userid, values.username)]}</div>', '<div class="date">{[this.getLocaleDate(values.date)]}</div>', "</div>", '<div class="edit-info">', '<tpl if="this.canEditReply(userid)">', '<div class="btn-header comment edit"></div>', '<div class="btn-header comment delete"></div>', "</tpl>", '<tpl if="resolved">', '<label class="resolve resolved">', me.textResolved, "</label>", "</tpl>", '<tpl if="!resolved">', '<label class="resolve">', me.textResolve, "</label>", "</tpl>", "</div>", "</div>", (me.noQuotes) ? "" : '<div class="quote">{[this.getFixedQuote(values.quote)]}</div>', '<div class="comment-message">', '<div class="comment" data-can-copy="true">{[this.fixMessage(values.comment)]}</div>', "</div>", '<div class="replys">', '<tpl for="replys">', '<div class="reply" id="reply-{id}">', '<div class="header">', '<div class="user-info" >', '<div class="user">{[this.getUserName(values.userid, values.username)]}</div>', '<div class="date">{[this.getLocaleDate(values.date)]}</div>', "</div>", '<div class="edit-info">', '<tpl if="this.canEditReply(userid)">', '<div class="btn-header reply edit"></div>', '<div class="btn-header reply delete"></div>', "</tpl>", "</div>", "</div>", '<div class="reply-message">', '<div class="message" data-can-copy="true">{[this.fixMessage(values.reply)]}</div>', "</div>", "</div>", "</tpl>", "</div>", '<div id="comment-{id}-add-reply-container" class="add-reply-container"></div>', '<div class="separator"></div>', '<div class="lock-area"></div>', '<div class="lock-author">{[this.getLockUserName(values.lockuserid)]}</div>', "</div>", "</tpl>", '<div class="last-clear"></div>', '<div class="x-clear"></div>', {
+                compiled: true,
+                canEditReply: function (id) {
+                    return true;
+                },
+                getFixedQuote: function (quote) {
+                    return Ext.String.ellipsis(Ext.String.htmlEncode(quote), 120, true);
+                },
+                getLocaleDate: function (date) {
+                    if (!date) {
+                        return Ext.String.format("{0} {1}", "--/--/--", "--:-- AM");
+                    } else {
+                        var dateVal = new Date(date);
+                        return Ext.String.format("{0} {1}", Ext.Date.format(dateVal, "n/j/Y"), Ext.Date.format(dateVal, "g:i A"));
+                    }
+                },
+                getUserName: function (id, username) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return Ext.String.ellipsis(Ext.String.htmlEncode(rec.get("username")), 15, true);
+                        } else {
+                            if (Ext.isString(username) && username.length > 0) {
+                                return username;
+                            }
+                        }
+                    }
+                    return me.textAnonym;
+                },
+                getLockUserName: function (id) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return Ext.String.ellipsis(Ext.String.htmlEncode(rec.get("username")), 15, true);
+                        }
+                    }
+                    return me.textAnonym;
+                },
+                fixMessage: function (msg) {
+                    var pickLink = function (message) {
+                        var reg = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}/i.exec(message);
+                        if (reg) {
+                            message = message.replace(reg[0], '<a href="mailto:' + reg[0] + ">" + reg[0] + "</a>");
+                        } else {
+                            reg = message.match(/((https?|ftps?):\/\/)(www.)?([a-z0-9-]+)(\.[a-z]{2,6})?(\/\S*)?/ig); ! reg && (reg = message.match(/((https?|ftps?):\/\/)?(www.)?([a-z0-9-]+)(\.[a-z]{2,6})(\/\S*)?/ig));
+                            for (var key in reg) {
+                                message = message.replace(reg[key], '<a href="' + (reg[key].search(/((https?|ftps?):\/\/)/g) < 0 ? "http://": "") + reg[key] + '" target="_blank">' + reg[key] + "</a>");
+                            }
+                        }
+                        return (message);
+                    };
+                    var htmlEncode = function (message) {
+                        return Ext.String.htmlEncode(message);
+                    };
+                    return pickLink(htmlEncode(msg)).replace(/\n/g, "<br/>");
+                }
+            }),
+            itemSelector: "div.comment-wrap",
+            emptyText: "",
+            autoScroll: true,
+            plugins: [{
+                ptype: "dataviewscrollpane",
+                pluginId: "scrollpane",
+                areaSelector: ".comments-view",
+                settings: {
+                    enableKeyboardNavigation: true,
+                    verticalGutter: 1
+                }
+            }]
+        },
+        {
+            xtype: "container",
+            id: "id-add-comment-link",
+            cls: "add-comment-container add-link",
+            html: "<label>" + me.textAddCommentToDoc + "</label>",
+            height: 45
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            id: "id-add-comment-container",
+            cls: "add-comment-container",
+            height: 115,
+            hidden: true,
+            items: [{
+                xtype: "textarea",
+                id: "id-comment-textarea",
+                height: 62,
+                enableKeyEvents: true
+            },
+            {
+                xtype: "container",
+                layout: "hbox",
+                items: [{
+                    xtype: "button",
+                    id: "id-btn-send-comment",
+                    cls: "btn-send-comment asc-blue-button",
+                    text: me.textAddComment
+                },
+                {
+                    xtype: "tbspacer",
+                    flex: 1
+                },
+                {
+                    xtype: "button",
+                    id: "id-btn-cancel-comment",
+                    text: me.textCancel
+                }]
+            }]
+        }];
+        this.getAddReplyForm = function (config) {
+            var scope = config.scope,
+            commentId = config.commentId,
+            textAreaHandlers = config.textAreaHandlers,
+            onReply = config.onReplyHandler,
+            onClose = config.onCloseHandler;
+            return Ext.widget("container", {
+                id: "controls-reply-" + commentId,
+                cls: "controls-reply-container",
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                hidden: true,
+                height: 80,
+                items: [{
+                    xtype: "textarea",
+                    flex: 1,
+                    emptyText: me.textAddReply,
+                    enableKeyEvents: true,
+                    listeners: {
+                        focus: Ext.bind(textAreaHandlers.onFocus, scope),
+                        blur: Ext.bind(textAreaHandlers.onBlur, scope),
+                        keydown: Ext.bind(textAreaHandlers.onKeyDown, scope),
+                        elastic: Ext.bind(textAreaHandlers.onElastic, scope)
+                    },
+                    plugins: [{
+                        ptype: "textareaautoheight",
+                        pluginId: "elastic-helper"
+                    }]
+                },
+                {
+                    xtype: "container",
+                    layout: "hbox",
+                    height: 26,
+                    id: "controls-reply-" + commentId + "-buttons",
+                    items: [{
+                        xtype: "button",
+                        text: me.textReply,
+                        cls: "asc-blue-button",
+                        action: "reply",
+                        handler: Ext.bind(function (btn, event) {
+                            onReply.call(scope, btn);
+                        },
+                        scope)
+                    },
+                    {
+                        xtype: "tbspacer",
+                        width: 10
+                    },
+                    {
+                        xtype: "button",
+                        text: me.textClose,
+                        handler: Ext.bind(function (btn, event) {
+                            onClose.call(scope, btn);
+                        },
+                        scope)
+                    }]
+                }]
+            });
+        };
+        me.callParent(arguments);
+    },
+    textComments: "Comments",
+    textAnonym: "Guest",
+    textAddCommentToDoc: "Add Comment to Document",
+    textAddComment: "Add Comment",
+    textCancel: "Cancel",
+    textAddReply: "Add Reply",
+    textReply: "Reply",
+    textClose: "Close",
+    textResolved: "Resolved",
+    textResolve: "Resolve"
+});

OfficeWeb/apps/common/main/lib/view/CommentsPopover.js

@@ -0,0 +1,223 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.CommentsPopover", {
+    extend: "Ext.container.Container",
+    alias: "widget.commoncommentspopover",
+    cls: "common-commentspopover",
+    requires: ["Common.plugin.DataViewScrollPane", "Common.plugin.TextAreaAutoHeight", "Ext.XTemplate", "Ext.view.View"],
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    width: 250,
+    height: 300,
+    minHeight: 50,
+    maxHeight: 300,
+    hideMode: "display",
+    config: {
+        commentId: 0,
+        userId: 0
+    },
+    constructor: function (config) {
+        if (!config || !config.commentId || !config.userId) {
+            throw Error("Common.view.CommentsPopover creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        usersStore = Ext.getStore("Common.store.Users");
+        me.id = "id-popover-comments-" + me.commentId;
+        me.items = [{
+            xtype: "container",
+            html: '<div class="popover-arrow"></div>'
+        },
+        {
+            xtype: "dataview",
+            flex: 1,
+            id: "id-popover-comments-view-" + me.commentId,
+            cls: "comments-view popover",
+            store: "Common.store.Comments",
+            blockRefresh: true,
+            disableSelection: true,
+            tpl: new Ext.XTemplate('<tpl for=".">', '<tpl if="this.canDisplay(values.id)">', '<div class="comment-wrap" id="id-popover-comment-{id}">', '<div class="header">', '<div class="user-info" >', '<div class="user">{[this.getUserName(values.userid, values.username)]}</div>', '<div class="date">{[this.getLocaleDate(values.date)]}</div>', "</div>", '<div class="edit-info" <tpl if="!this.hideControls()">style="display:none;"</tpl> >', '<tpl if="this.canEditReply(userid)">', '<div class="btn-header comment edit"></div>', '<div class="btn-header comment delete"></div>', "</tpl>", '<tpl if="resolved">', '<label class="resolve resolved">', me.textResolved, "</label>", "</tpl>", '<tpl if="!resolved">', '<label class="resolve">', me.textResolve, "</label>", "</tpl>", "</div>", "</div>", '<div class="comment-message">', '<div class="comment" data-can-copy="true">{[this.fixMessage(values.comment)]}</div>', "</div>", '<div class="replys">', '<tpl for="replys">', '<div class="reply" id="reply-{id}">', '<div class="header">', '<div class="user-info" >', '<div class="user">{[this.getUserName(values.userid, values.username)]}</div>', '<div class="date">{[this.getLocaleDate(values.date)]}</div>', "</div>", '<div class="edit-info" <tpl if="!this.hideControls()">style="display:none;"</tpl> >', '<tpl if="this.canEditReply(userid)">', '<div class="btn-header reply edit"></div>', '<div class="btn-header reply delete"></div>', "</tpl>", "</div>", "</div>", '<div class="reply-message">', '<div class="message" data-can-copy="true">{[this.fixMessage(values.reply)]}</div>', "</div>", "</div>", "</tpl>", "</div>", "</div>", "</tpl>", '<tpl if="!this.canDisplay(values.id)">', '<div class="comment-wrap hidden"></div>', "</tpl>", "</tpl>", '<div class="x-clear"></div>', {
+                compiled: true,
+                canDisplay: function (commentId) {
+                    return (commentId == me.commentId);
+                },
+                canEditReply: function (id) {
+                    return true;
+                },
+                getFixedQuote: function (quote) {
+                    return Ext.String.ellipsis(Ext.String.htmlEncode(quote), 120, true);
+                },
+                getLocaleDate: function (date) {
+                    if (!date) {
+                        return Ext.String.format("{0} {1}", "--/--/--", "--:-- AM");
+                    } else {
+                        var dateVal = new Date(date);
+                        return Ext.String.format("{0} {1}", Ext.Date.format(dateVal, "n/j/Y"), Ext.Date.format(dateVal, "g:i A"));
+                    }
+                },
+                getUserColor: function (id) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return rec.data.color;
+                        }
+                    }
+                    return "#000";
+                },
+                getUserName: function (id, username) {
+                    if (usersStore) {
+                        var rec = usersStore.findRecord("id", id);
+                        if (rec) {
+                            return Ext.String.ellipsis(Ext.String.htmlEncode(rec.get("username")), 15, true);
+                        } else {
+                            if (Ext.isString(username) && username.length > 0) {
+                                return username;
+                            }
+                        }
+                    }
+                    return me.textAnonym;
+                },
+                fixMessage: function (msg) {
+                    var pickLink = function (message) {
+                        var reg = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}/i.exec(message);
+                        if (reg) {
+                            message = message.replace(reg[0], '<a href="mailto:' + reg[0] + ">" + reg[0] + "</a>");
+                        } else {
+                            reg = message.match(/((https?|ftps?):\/\/)(www.)?([a-z0-9-]+)(\.[a-z]{2,6})?(\/\S*)?/ig); ! reg && (reg = message.match(/((https?|ftps?):\/\/)?(www.)?([a-z0-9-]+)(\.[a-z]{2,6})(\/\S*)?/ig));
+                            for (var key in reg) {
+                                message = message.replace(reg[key], '<a href="' + (reg[key].search(/((https?|ftps?):\/\/)/g) < 0 ? "http://": "") + reg[key] + '" target="_blank">' + reg[key] + "</a>");
+                            }
+                        }
+                        return (message);
+                    };
+                    var htmlEncode = function (message) {
+                        return Ext.String.htmlEncode(message);
+                    };
+                    return pickLink(htmlEncode(msg)).replace(/\n/g, "<br/>");
+                },
+                hideControls: function () {
+                    return ! (me.editable === false);
+                }
+            }),
+            itemSelector: "div.comment-wrap",
+            emptyText: "",
+            autoScroll: true,
+            plugins: [{
+                ptype: "dataviewscrollpane",
+                pluginId: "scrollpane",
+                areaSelector: ".comments-view",
+                settings: {
+                    enableKeyboardNavigation: true,
+                    verticalGutter: 1
+                }
+            }]
+        },
+        {
+            xtype: "container",
+            id: "id-popover-add-reply-link-" + me.commentId,
+            cls: "reply-link-container add-link",
+            action: "add-reply-link-container",
+            hidden: me.editable === false,
+            items: [{
+                xtype: "label",
+                text: me.textAddReply,
+                action: "link"
+            }]
+        },
+        {
+            xtype: "container",
+            id: "id-popover-controls-reply-" + me.commentId,
+            cls: "controls-reply-container",
+            action: "add-reply-form-container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            height: 100,
+            hidden: true,
+            items: [{
+                xtype: "textarea",
+                emptyText: me.textAddReply,
+                action: "add-reply-textarea",
+                enableKeyEvents: true,
+                plugins: [{
+                    ptype: "textareaautoheight",
+                    pluginId: "elastic-helper"
+                }]
+            },
+            {
+                xtype: "container",
+                layout: "hbox",
+                height: 26,
+                id: "id-popover-controls-reply-" + me.commentId + "-buttons",
+                items: [{
+                    xtype: "button",
+                    text: me.textReply,
+                    cls: "asc-blue-button",
+                    action: "reply"
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 10
+                },
+                {
+                    xtype: "button",
+                    text: me.textClose,
+                    action: "close"
+                }]
+            }]
+        }];
+        me.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        var selfEl = this.getEl();
+        if (selfEl) {
+            Ext.DomHelper.append(selfEl, '<div class="lock-area"></div><div class="lock-author"></div>');
+        }
+    },
+    fireTransformToAdd: function () {
+        this.fireEvent("transformToAdd", this);
+    },
+    textAnonym: "Guest",
+    textResolved: "Resolved",
+    textResolve: "Resolve",
+    textAddReply: "Add Reply",
+    textReply: "Reply",
+    textClose: "Close"
+});

OfficeWeb/apps/common/main/lib/view/CopyWarning.js

@@ -0,0 +1,125 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.CopyWarning", {
+    extend: "Ext.window.Window",
+    alias: "widget.commoncopywarning",
+    requires: ["Ext.window.Window"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    constrain: true,
+    plain: true,
+    width: 410,
+    height: 270,
+    layout: {
+        type: "border"
+    },
+    onEsc: function () {
+        this.close();
+    },
+    initComponent: function () {
+        this.items = [{
+            xtype: "container",
+            region: "center",
+            layout: {
+                type: "vbox",
+                align: "center"
+            },
+            items: [{
+                xtype: "box",
+                padding: "15px 0 0 0",
+                html: '<p style="font-size: 14pt; text-align: center;font-family: Arial;">' + this.textTitle + "</p><br>" + '<p style="height:52px; text-align: center; font-size: 8pt; font-family: Arial; color: #636363;padding: 10px 30px 0 30px;">' + this.textMsg + "</p>"
+            },
+            {
+                xtype: "container",
+                width: 300,
+                height: 70,
+                padding: "15px 0 0 0",
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                defaults: {
+                    xtype: "container",
+                    width: "50%"
+                },
+                items: [{
+                    layout: {
+                        type: "vbox",
+                        align: "center"
+                    },
+                    items: [{
+                        xtype: "box",
+                        html: '<p style="text-align: center; font-size: 18pt;font-family: Arial;">Ctrl+C</p><p style="text-align: center;font-family: Arial;">' + this.textToCopy + "</p>"
+                    }]
+                },
+                {
+                    style: "left: 50%;",
+                    layout: {
+                        type: "vbox",
+                        align: "center"
+                    },
+                    items: [{
+                        xtype: "box",
+                        html: '<p style="text-align: center; font-size: 18pt;font-family: Arial;">Ctrl+V</p><p style="text-align: center;font-family: Arial;">' + this.textToPaste + "</p>"
+                    }]
+                }]
+            }]
+        },
+        {
+            xtype: "container",
+            region: "south",
+            height: 58,
+            style: "border-top: 1px solid #E5E5E5",
+            padding: "16px 0 0 0",
+            layout: {
+                type: "vbox",
+                align: "center"
+            },
+            items: [{
+                xtype: "button",
+                cls: "asc-blue-button",
+                width: 85,
+                text: Ext.Msg.buttonText["ok"],
+                handler: Ext.bind(function (btn) {
+                    this.close();
+                },
+                this)
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    textTitle: "ONLYOFFICE Docs Copy & Paste Functions",
+    textMsg: "For the security reasons the right-click menu copy and paste functions are disabled. You can still do the same using your keyboard:",
+    textToCopy: "to copy",
+    textToPaste: "to paste"
+});

OfficeWeb/apps/common/main/lib/view/DocumentAccessDialog.js

@@ -0,0 +1,105 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.DocumentAccessDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.commondocumentaccessdialog",
+    uses: ["Common.component.LoadMask"],
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 534,
+    width: 850,
+    layout: "fit",
+    closable: true,
+    style: "background-color:white;",
+    initComponent: function () {
+        this.items = [{
+            xtype: "container",
+            flex: 1,
+            html: '<div id="id-sharing-placeholder"></div>'
+        }];
+        this.title = this.textTitle;
+        this.addEvents("accessrights");
+        this.callParent(arguments);
+    },
+    afterRender: function (cmp) {
+        this.callParent(arguments);
+        var iframe = document.createElement("iframe");
+        iframe.src = this.settingsurl;
+        iframe.width = 850;
+        iframe.height = 500;
+        iframe.align = "top";
+        iframe.frameBorder = 0;
+        iframe.scrolling = "no";
+        iframe.onload = Ext.bind(this._onLoad, this);
+        var target = cmp.down("#id-sharing-placeholder", true);
+        target.parentNode.replaceChild(iframe, target);
+        this.loadMask = Ext.widget("cmdloadmask", this);
+        this.loadMask.setTitle(this.textLoading);
+        this.loadMask.show();
+        this._bindWindowEvents.call(this);
+    },
+    _bindWindowEvents: function () {
+        var me = this;
+        if (window.addEventListener) {
+            window.addEventListener("message", function (msg) {
+                me._onWindowMessage(msg);
+            },
+            false);
+        } else {
+            if (window.attachEvent) {
+                window.attachEvent("onmessage", function (msg) {
+                    me._onWindowMessage(msg);
+                });
+            }
+        }
+    },
+    _onWindowMessage: function (msg) {
+        if (msg && window.JSON) {
+            try {
+                this._onMessage.call(this, window.JSON.parse(msg.data));
+            } catch(e) {}
+        }
+    },
+    _onMessage: function (msg) {
+        if (msg && msg.needUpdate) {
+            this.fireEvent("accessrights", this, msg.sharingSettings);
+        }
+        this.close();
+    },
+    _onLoad: function () {
+        this.loadMask.hide();
+    },
+    textTitle: "Sharing Settings",
+    textLoading: "Loading"
+});

OfficeWeb/apps/common/main/lib/view/ExtendedColorDialog.js

@@ -0,0 +1,286 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.ExtendedColorDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.commonextendedcolordialog",
+    cls: "common-extendedcolordialog",
+    requires: ["Ext.window.Window", "Common.component.HSBColorPicker"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    preventHeader: true,
+    closeAction: "destroy",
+    plain: true,
+    height: 276,
+    width: 326,
+    minWidth: 188,
+    padding: "16px",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        beforehide: function () {
+            if (this._modalresult === undefined) {
+                this.fireEvent("onmodalresult", 0);
+            }
+        },
+        show: function () {
+            this.textColor.focus(false, 500);
+        }
+    },
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        var _btnOk = Ext.create("Ext.Button", {
+            text: this.addButtonText,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    this._modalresult = 1;
+                    this.fireEvent("onmodalresult", this._modalresult);
+                    this.close();
+                },
+                scope: this
+            }
+        });
+        var _btnCancel = Ext.create("Ext.Button", {
+            text: this.cancelButtonText,
+            width: 80,
+            cls: "asc-darkgray-button",
+            listeners: {
+                click: function () {
+                    this._modalresult = 0;
+                    this.fireEvent("onmodalresult", this._modalresult);
+                    this.close();
+                },
+                scope: this
+            }
+        });
+        var me = this;
+        me.hexRe = /\s*#?([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/;
+        this.colorsPicker = Ext.widget("hsbcolorpicker", {
+            height: 198,
+            color: "#000000",
+            width: 220,
+            changeSaturation: true,
+            showCurrentColor: false,
+            style: "margin-top:2px;margin-right:6px;",
+            listeners: {
+                render: function (o) {
+                    $("." + this.baseCls + "-cnt-root").css("margin-right", "0");
+                },
+                changecolor: function (o, color) {
+                    me.colorNew.getEl().setStyle("background-color", color);
+                    me.stopevents = true;
+                    var values = color.match(me.hexRe);
+                    me.spinR.setValue(parseInt(values[1], 16));
+                    me.spinG.setValue(parseInt(values[2], 16));
+                    me.spinB.setValue(parseInt(values[3], 16));
+                    me.textColor.setValue((values[1] + values[2] + values[3]).toUpperCase());
+                    me.stopevents = false;
+                }
+            }
+        });
+        function showColor(exlude) {
+            if (!me.stopevents) {
+                var r = (me.spinR.getValue() == null ? 0 : me.spinR.getValue()).toString(16);
+                var g = (me.spinG.getValue() == null ? 0 : me.spinG.getValue()).toString(16);
+                var b = (me.spinB.getValue() == null ? 0 : me.spinB.getValue()).toString(16);
+                var color = (r.length == 1 ? "0" + r : r) + (g.length == 1 ? "0" + g : g) + (b.length == 1 ? "0" + b : b);
+                me.colorsPicker.setColor("#" + color);
+                if (exlude != "hex") {
+                    me.textColor.setValue(color.toUpperCase());
+                }
+                me.colorNew.getEl().setStyle("background-color", "#" + color);
+            }
+        }
+        this.spinR = Ext.widget("numberfield", {
+            fieldLabel: "R",
+            labelWidth: 10,
+            width: 80,
+            minValue: 0,
+            maxValue: 255,
+            value: 0,
+            style: "margin-bottom:4px;",
+            listeners: {
+                change: showColor
+            }
+        });
+        this.spinG = Ext.widget("numberfield", {
+            fieldLabel: "G",
+            labelWidth: 10,
+            width: 80,
+            minValue: 0,
+            maxValue: 255,
+            value: 0,
+            style: "margin-bottom:4px;",
+            listeners: {
+                change: showColor
+            }
+        });
+        this.spinB = Ext.widget("numberfield", {
+            fieldLabel: "B",
+            labelWidth: 10,
+            width: 80,
+            minValue: 0,
+            maxValue: 255,
+            value: 0,
+            style: "margin-bottom:16px;",
+            listeners: {
+                change: showColor
+            }
+        });
+        this.colorSaved = Ext.widget("box", {
+            id: "field-start-color",
+            height: 20
+        });
+        this.colorNew = Ext.widget("box", {
+            height: 20
+        });
+        this.textColor = Ext.widget("textfield", {
+            fieldLabel: "#",
+            labelWidth: 10,
+            maskRe: /[a-fA-F0-9]/,
+            maxLength: 6,
+            enforceMaxLength: true,
+            validator: function (value) {
+                if (!/^[a-fA-F0-9]{0,6}$/.test(value)) {
+                    return "Incorrect color value";
+                } else {
+                    value = "000000" + value;
+                    var colors = value.match(/([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/i);
+                    me.stopevents = true;
+                    me.spinR.setValue(parseInt(colors[1], 16));
+                    me.spinG.setValue(parseInt(colors[2], 16));
+                    me.spinB.setValue(parseInt(colors[3], 16));
+                    me.stopevents = false;
+                    if (this.rendered) {
+                        showColor("hex");
+                    }
+                }
+                return true;
+            },
+            listeners: {
+                afterrender: function (cmp) {
+                    cmp.inputEl.setStyle("text-align", "right");
+                }
+            }
+        });
+        this.addEvents("onmodalresult");
+        this.items = [{
+            xtype: "container",
+            height: 202,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [this.colorsPicker, {
+                xtype: "container",
+                width: 68,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "label",
+                    text: this.textNew,
+                    style: "text-align:center;width:100%;margin-bottom:2px;"
+                },
+                this.colorNew, this.colorSaved, {
+                    xtype: "label",
+                    text: this.textCurrent,
+                    style: "text-align:center;width:100%;margin-top:2px;margin-bottom:14px;"
+                },
+                this.spinR, this.spinG, this.spinB, this.textColor]
+            }]
+        },
+        {
+            xtype: "tbspacer",
+            height: 14
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "hbox",
+                align: "middle",
+                pack: "center"
+            },
+            items: [_btnOk, {
+                xtype: "tbspacer",
+                width: 10
+            },
+            _btnCancel]
+        }];
+        this.callParent(arguments);
+    },
+    getColor: function () {
+        var color = /#?([a-fA-F0-9]{6})/.exec(this.colorsPicker.getColor());
+        return color ? color[1] : null;
+    },
+    setColor: function (cl) {
+        var me = this;
+        var color = /#?([a-fA-F0-9]{6})/.test(cl) ? cl : "ff0000";
+        me.colorsPicker.setColor("#" + color);
+        function keepcolor() {
+            if (cl == "transparent") {
+                me.colorSaved.addCls("color-transparent");
+            } else {
+                me.colorSaved.removeCls("color-transparent");
+                me.colorSaved.getEl().setStyle("background-color", "#" + cl);
+            }
+            me.colorNew.getEl().setStyle("background-color", "#" + color);
+        }
+        if (!me.colorSaved.rendered) {
+            me.colorSaved.on("afterrender", keepcolor, {
+                single: true
+            });
+        } else {
+            keepcolor();
+        }
+        me.stopevents = true;
+        var values = me.hexRe.exec(color);
+        me.spinR.setValue(parseInt(values[1], 16));
+        me.spinG.setValue(parseInt(values[2], 16));
+        me.spinB.setValue(parseInt(values[3], 16));
+        me.textColor.setValue((values[1] + values[2] + values[3]).toUpperCase());
+        me.stopevents = false;
+    },
+    cancelButtonText: "Cancel",
+    addButtonText: "Add",
+    textNew: "New",
+    textCurrent: "Current"
+});

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

@@ -0,0 +1,93 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.Header", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonheader",
+    cls: "common-header",
+    config: {
+        headerCaption: "Default Caption",
+        documentCaption: "",
+        canBack: false
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.html = '<div id="header-logo"></div>' + '<span id="header-caption"></span>' + '<span id="header-delimiter">-</span>' + '<span id="header-documentcaption"></span>' + '<span id="header-back">' + this.textBack + "</span>";
+        this.callParent(arguments);
+    },
+    afterRender: function (obj) {
+        this.callParent(arguments);
+        $("#header-logo").on("click", function (e) {
+            var newDocumentPage = window.open("http://www.onlyoffice.com");
+            newDocumentPage && newDocumentPage.focus();
+        });
+    },
+    applyHeaderCaption: function (value) {
+        var hc = Ext.fly("header-caption");
+        if (hc) {
+            Ext.DomHelper.overwrite(hc, value);
+        }
+        return value;
+    },
+    applyDocumentCaption: function (value) {
+        if (!value) {
+            value = "";
+        }
+        var hd = Ext.fly("header-delimiter");
+        if (hd) {
+            hd.setVisible(value.length > 0);
+        }
+        var dc = Ext.fly("header-documentcaption");
+        if (dc) {
+            Ext.DomHelper.overwrite(dc, value);
+        }
+        return value;
+    },
+    applyCanBack: function (value) {
+        var back = Ext.fly("header-back");
+        if (back) {
+            back.un("click");
+            back.setVisible(value);
+            if (value) {
+                back.on("click", Ext.bind(this.onBackClick, this));
+            }
+        }
+    },
+    onBackClick: function (e) {
+        Common.Gateway.goBack();
+        Common.component.Analytics.trackEvent("Back to Folder");
+    },
+    textBack: "Go to Documents"
+});

OfficeWeb/apps/common/main/lib/view/ImageFromUrlDialog.js

@@ -0,0 +1,151 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.ImageFromUrlDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.commonimagefromurldialog",
+    requires: ["Ext.window.Window"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    preventHeader: true,
+    plain: true,
+    height: 114,
+    width: 350,
+    padding: "20px",
+    layout: "vbox",
+    layoutConfig: {
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.txtUrl.focus(false, 500);
+        }
+    },
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        var _btnOk = Ext.create("Ext.Button", {
+            id: "imgdialog-button-ok",
+            text: this.okButtonText,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    if (!this.txtUrl.isValid()) {
+                        return;
+                    }
+                    this._modalresult = 1;
+                    this.fireEvent("onmodalresult", this._modalresult);
+                    this.close();
+                },
+                scope: this
+            }
+        });
+        var _btnCancel = Ext.create("Ext.Button", {
+            id: "imgdialog-button-cancel",
+            text: this.cancelButtonText,
+            width: 80,
+            cls: "asc-darkgray-button",
+            listeners: {
+                click: function () {
+                    this._modalresult = 0;
+                    this.fireEvent("onmodalresult", this._modalresult);
+                    this.close();
+                },
+                scope: this
+            }
+        });
+        this.txtUrl = Ext.create("Ext.form.Text", {
+            id: "imgdialog-text-url",
+            width: 310,
+            msgTarget: "side",
+            validateOnBlur: false,
+            allowBlank: false,
+            value: "",
+            blankText: this.txtEmpty,
+            regex: /(((^https?)|(^ftp)):\/\/([\-\wа-яё]+\.)+[\wа-яё]{2,3}(\/[%\-\wа-яё]+(\.[\wа-яё]{2,})?)*(([\wа-яё\-\.\?\\\/+@&#;`~=%!]*)(\.[\wа-яё]{2,})?)*\/?)/i,
+            regexText: this.txtNotUrl,
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        _btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            _btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.addEvents("onmodalresult");
+        this.items = [{
+            xtype: "label",
+            text: this.textUrl,
+            width: "100%",
+            style: "text-align:left"
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        this.txtUrl, {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "container",
+            width: 310,
+            layout: "hbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            items: [{
+                xtype: "tbspacer",
+                flex: 1
+            },
+            _btnOk, {
+                xtype: "tbspacer",
+                width: 5
+            },
+            _btnCancel]
+        }];
+        this.callParent(arguments);
+    },
+    textUrl: "Paste an image URL:",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtEmpty: "This field is required",
+    txtNotUrl: 'This field should be a URL in the format "http://www.example.com"'
+});

OfficeWeb/apps/common/main/lib/view/Participants.js

@@ -0,0 +1,139 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.Participants", {
+    extend: "Ext.container.Container",
+    alias: "widget.statusinfoparticipants",
+    requires: ["Ext.form.Label", "Ext.toolbar.Spacer", "Ext.Img"],
+    layout: {
+        type: "hbox",
+        align: "middle"
+    },
+    height: 27,
+    width: 80,
+    hidden: true,
+    config: {
+        pack: "start"
+    },
+    constructor: function (config) {
+        if (this.layout && config) {
+            this.layout.pack = config.pack;
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        this.btnUsers = Ext.widget("button", {
+            text: "1",
+            cls: "asc-statusinfo-text-btn",
+            iconCls: Ext.isDefined(this.userIconCls) ? this.userIconCls : "icon-statusinfo-users",
+            listeners: {
+                click: function () {
+                    var cmp = Ext.getCmp("view-main-menu");
+                    var btn = Ext.getCmp("id-menu-chat");
+                    if (cmp && btn) {
+                        if (btn.pressed) {
+                            btn.toggle(false);
+                        } else {
+                            cmp.selectMenu("menuChat");
+                        }
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.tipUsers,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        this.items = [{
+            xtype: "tbseparator",
+            width: 2,
+            height: 27,
+            style: "padding-top:2px;",
+            html: '<div style="width: 100%; height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.5);"></div>'
+        },
+        {
+            xtype: "tbspacer",
+            width: 12
+        },
+        this.btnUsers, {
+            xtype: "tbspacer",
+            width: 10
+        },
+        {
+            xtype: "tbseparator",
+            width: 2,
+            height: 27,
+            style: "padding-top:2px;",
+            html: '<div style="width: 100%; height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.5);"></div>'
+        }];
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onParticipantsChanged", Ext.bind(this._onParticipantsChanged, this));
+        this.api.asc_registerCallback("asc_onAuthParticipantsChanged", Ext.bind(this._onParticipantsChanged, this));
+        return this;
+    },
+    _onParticipantsChanged: function (users) {
+        if (users.length > 1) {
+            this.setVisible(true);
+        }
+        this.btnUsers.setText(users.length);
+        if (this.btnUsers.getEl()) {
+            var tip = this.tipUsers + "<br/><br/>";
+            for (var i = 0; i < users.length && i < 4; i++) {
+                tip += "<br/>" + users[i].asc_getUserName();
+            }
+            if (users.length > 4) {
+                tip += "<br/>" + this.tipMoreUsers.replace("%1", users.length - 4);
+                tip += "<br/><br/>" + this.tipShowUsers;
+            }
+            this.btnUsers.getEl().set({
+                "data-qtip": tip,
+                "data-qalign": "bl-tl?",
+                "data-qwidth" : "250"
+            });
+        }
+    },
+    setMode: function (m) {
+        this.editorConfig = {
+            user: m.user
+        };
+    },
+    tipUsers: "Document is in the collaborative editing mode.",
+    tipMoreUsers: "and %1 users.",
+    tipShowUsers: "To see all users click the icon below."
+});

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

@@ -0,0 +1,225 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.define("Common.view.SearchDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.commonsearchdialog",
+    requires: ["Ext.window.Window", "Ext.form.field.Checkbox"],
+    closable: true,
+    resizable: false,
+    height: 120,
+    width: 550,
+    padding: "12px 20px 0 20px",
+    constrain: true,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.txtSearchQuery.focus(false, 100);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        this.isSearchMode = true;
+        this.isViewMode = Ext.isDefined(this.initialConfig.isViewMode) ? this.initialConfig.isViewMode : false;
+        this.btnSearchPrev = Ext.create("Ext.Button", {
+            cls: "dlg-search",
+            width: 45,
+            iconCls: "asc-btn-search previous",
+            style: "margin: 0 6px 0 8px",
+            group: "search-text",
+            direction: "prev"
+        });
+        this.btnSearchNext = Ext.create("Ext.Button", {
+            cls: "dlg-search",
+            width: 45,
+            iconCls: "asc-btn-search next",
+            group: "search-text",
+            direction: "next"
+        });
+        this.btnReplace = Ext.create("Ext.Button", {
+            text: this.txtBtnReplace,
+            height: 22,
+            width: 96,
+            group: "replace-text",
+            style: "margin: 0 0 0 8px",
+            type: "single"
+        });
+        this.btnReplaceAll = Ext.create("Ext.Button", {
+            text: this.txtBtnReplaceAll,
+            height: 22,
+            width: 96,
+            group: "replace-text",
+            hidden: true,
+            type: "all"
+        });
+        this.btnOpenReplace = Ext.create("Ext.Button", {
+            text: this.txtBtnReplace,
+            height: 22,
+            width: 96,
+            hidden: this.isViewMode,
+            handler: function () {
+                me.replaceMode();
+            }
+        });
+        this.chCaseSensitive = Ext.widget("checkbox", {
+            boxLabel: this.textMatchCase,
+            style: "margin: 0 20px 0 0",
+            checked: this.matchcase && this.matchcase.checked === true,
+            hidden: this.matchcase === false || (typeof(this.matchcase) == "object" && this.matchcase.visible === false)
+        });
+        this.chWholeWords = Ext.widget("checkbox", {
+            boxLabel: this.textWholeWords,
+            style: "margin: 0 20px 0 0",
+            checked: this.wholewords && this.wholewords.checked === true,
+            hidden: this.wholewords === false || (typeof(this.wholewords) == "object" && this.wholewords.visible === false)
+        });
+        this.chHighlight = Ext.widget("checkbox", {
+            boxLabel: this.textHighlight,
+            style: "margin: 0 20px 0 0",
+            action: "highlight",
+            checked: this.highlight && this.highlight.checked === true,
+            hidden: this.highlight === false || (typeof(this.highlight) == "object" && this.highlight.visible === false)
+        });
+        this.txtSearchQuery = Ext.create("Common.component.SearchField", {
+            id: "search-dialog-text-search",
+            flex: 1,
+            emptyText: this.textSearchStart,
+            tabIndex: 1,
+            style: "border-radius: 2px;"
+        });
+        this.txtReplaceQuery = Ext.create("Common.component.SearchField", {
+            id: "search-dialog-text-replace",
+            flex: 1,
+            style: "border-radius: 2px;",
+            emptyText: this.textSearchStart,
+            tabIndex: 2,
+            listeners: {
+                searchstart: function (obj, text) {
+                    obj.stopSearch(true);
+                }
+            }
+        });
+        this.items = [{
+            xtype: "container",
+            width: 310,
+            height: 22,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [this.txtSearchQuery, this.btnSearchPrev, this.btnSearchNext]
+        },
+        {
+            xtype: "container",
+            width: 310,
+            height: 22,
+            style: "margin: 10px 0 0 0",
+            hidden: true,
+            layout: {
+                type: "hbox"
+            },
+            items: [this.txtReplaceQuery, this.btnReplace]
+        },
+        {
+            xtype: "container",
+            width: 310,
+            height: 22,
+            style: "margin: 10px 0 0 0",
+            layout: {
+                type: "hbox"
+            },
+            items: [this.chCaseSensitive, this.chWholeWords, this.chHighlight, {
+                xtype: "box",
+                flex: 1
+            },
+            this.btnReplaceAll, this.btnOpenReplace]
+        }];
+        if (this.simplesearch) {
+            this.items[2].hidden = true;
+            this.minHeight = 86;
+            this.height = 86;
+        }
+        this.callParent(arguments);
+        this.setTitle(this.isViewMode ? this.textTitle2 : this.textTitle);
+    },
+    replaceMode: function () {
+        this.isSearchMode = false;
+        this.setSize({
+            height: 150
+        });
+        this.items.getAt(1).show();
+        this.btnReplaceAll.show();
+        this.btnOpenReplace.hide();
+    },
+    searchMode: function () {
+        this.isSearchMode = true;
+        this.setSize({
+            height: 120
+        });
+        this.items.getAt(1).hide();
+        this.btnReplaceAll.hide();
+        if (!this.isViewMode) {
+            this.btnOpenReplace.show();
+        }
+    },
+    getSettings: function () {
+        var out = {
+            textsearch: this.txtSearchQuery.getText(),
+            casesensitive: this.chCaseSensitive.getValue(),
+            wholewords: this.chWholeWords.getValue(),
+            highlight: this.chHighlight.getValue()
+        }; ! this.isSearchMode && (out.textreplace = this.txtReplaceQuery.getText());
+        return out;
+    },
+    selectSearch: function () {
+        if (this.txtSearchQuery.getText().length > 0) {
+            this.txtSearchQuery.focus(100, true);
+        }
+    },
+    setViewMode: function (mode) {
+        if (this.isViewMode !== mode) {
+            this.isViewMode = mode;
+            this.setTitle(this.isViewMode ? this.textTitle2 : this.textTitle);
+            this.btnOpenReplace.setVisible(!mode);
+        }
+    },
+    textTitle: "Search & Replace",
+    textTitle2: "Search",
+    txtBtnReplace: "Replace",
+    txtBtnReplaceAll: "Replace All",
+    textMatchCase: "Case sensitive",
+    textWholeWords: "Whole words only",
+    textHighlight: "Highlight results",
+    textSearchStart: "Enter text here"
+});

OfficeWeb/apps/common/main/loader.js

@@ -0,0 +1,38 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+ Ext.Loader.setConfig({
+    enabled: true,
+    disableCaching: false,
+    paths: {
+        "Common": "../../common/main/lib"
+    }
+});

OfficeWeb/apps/common/main/resources/css/about.css

@@ -0,0 +1,50 @@
+.common-about-body {
+    padding: 30px 100px;
+    background: #ffffff;
+    border-color: #ffffff;
+}
+
+.asc-about-office {
+    background-image: url("../img/about/TLOffice.png");
+    background-image: -webkit-image-set(url("../img/about/TLOffice.png") 1x, url("../img/about/TLOffice@2x.png") 2x);
+    width: 420px;
+    height: 70px;
+    background-repeat: no-repeat;
+}
+
+.common-about-body .about-separator-cell {
+    width: 50%
+}
+
+.common-about-body .asc-about-header {
+    margin: 0 30px;
+    font: 13px Tahoma;
+    letter-spacing: 1px;
+    color: #666666;
+}
+
+.common-about-body .asc-about-version {
+    font: 15px Tahoma;
+    color: #b6b6b6;
+}
+
+.common-about-body .asc-about-companyname {
+    font: bold 15px Tahoma;
+    color: #000000;
+}
+
+.common-about-body .asc-about-desc,
+.common-about-body .asc-about-desc-name,
+.common-about-body .asc-about-lic {
+    font: 12px Tahoma;
+    color: #000000;
+}
+
+.common-about-body .asc-about-desc-name {
+    color: #666666;
+}
+
+.common-about-body .asc-about-lic {
+    font-weight: bold;
+    white-space: pre-wrap;
+}

OfficeWeb/apps/common/main/resources/css/asc.css

@@ -0,0 +1,981 @@
+.x-btn-default-small-icon button,
+.x-btn-default-small-icon
+.x-btn-inner,
+.x-btn-default-small-noicon button,
+.x-btn-default-small-noicon .x-btn-inner{
+    height: 20px;
+    line-height: 20px;
+}
+
+.x-ie .x-btn button{
+    overflow-x: hidden;
+}
+
+
+/*Window*/
+.x-body{
+   -moz-user-select: -moz-none;
+   -khtml-user-select: none;
+   -webkit-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+}
+
+.x-window-body{
+    -moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.x-mask{
+    background-color: transparent;
+    opacity: 0.2;
+
+}
+
+.x-window-default{
+    background-color: #f4f4f4;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 0;
+    padding: 0px;
+	box-shadow: none;
+}
+.x-window-body-default {
+    background: none repeat scroll 0 0 #f4f4f4;
+    border-width: 0;
+    color: black;
+	box-shadow: none;
+}
+.x-window-body-default-closable{
+background: none;
+
+}
+.x-window-header-default-top{
+
+    background: #ededed; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ededed 0%, #dddddd 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ededed 0%,#dddddd 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
+
+
+    border-radius: 5px 5px 0 0;
+    border-style: solid;
+    border-width: 0px;
+    padding: 4px;
+height:34px;
+	box-shadow: none;
+}
+.x-window-header-text{
+color:#898989;
+text-align:center;
+font-size: 12px;
+font-weight:bold;    
+padding-top: 5px;
+text-shadow: 1px 1px #f8f8f8;
+	vertical-align:bottom;
+}
+
+
+
+.x-window-header-text-container{
+width: 100% !important;
+}
+
+
+
+
+.x-message-box .x-window-body {
+    background-color: #f4f4f4;
+    border: none;
+}
+
+.x-message-box .x-toolbar-footer {
+
+    margin-bottom: 10px;
+
+}
+
+.x-message-box .ext-mb-error{
+background-image: url("../img/controls/icon-error.png");
+background-image: -webkit-image-set(url("../img/controls/icon-error.png") 1x, url("../img/controls/icon-error@2x.png") 2x);
+height: 37px !important;
+}
+
+.x-message-box .ext-mb-warning{
+background-image: url("../img/controls/icon-warning.png");
+background-image: -webkit-image-set(url("../img/controls/icon-warning.png") 1x, url("../img/controls/icon-warning@2x.png") 2x);
+height: 37px !important;
+}
+
+.x-message-box .ext-mb-info{
+background-image: url("../img/controls/icon-info.png");
+background-image: -webkit-image-set(url("../img/controls/icon-info.png") 1x, url("../img/controls/icon-info@2x.png") 2x);
+height: 37px !important;
+}
+
+.x-docked-bottom{
+border: 0 !important;
+}
+
+.image-advanced-container.x-item-disabled .x-mask{
+    opacity: 0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
+}
+
+.x-tool img.x-tool-close{
+background-image: url("../img/controls/but-close.png");
+background-image: -webkit-image-set(url("../img/controls/but-close.png") 1x, url("../img/controls/but-close@2x.png") 2x);
+background-repeat:no-repeat;
+margin-top:2px;
+width: 20px;
+height: 16px;
+}
+.x-tool-over .x-tool-close{
+background-position: 0 -16px;
+}
+.x-tool-disabled .x-tool-close{
+    background-position: 0 -32px;
+}
+.x-tool-disabled .x-mask{
+    opacity: 0;
+}
+/*window end*/
+
+/*Toolbar start*/
+
+.x-toolbar{
+    border: 1px solid;
+    font-size: 11px;
+    padding: 2px 0 2px 2px;
+}
+
+.x-toolbar-default {
+    background: #ededed; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ededed 0%, #cbcbcb 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#cbcbcb)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ededed 0%,#cbcbcb 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ededed 0%,#cbcbcb 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ededed 0%,#cbcbcb 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ededed 0%,#cbcbcb 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#cbcbcb',GradientType=0 ); /* IE6-9 */
+
+    border:0;
+    border-top: 1px solid #ffffff;
+    border-bottom: 1px solid #929292;
+}
+
+.x-nlg .x-toolbar-default{
+background-image: none !important; /* IE */
+    background: -ms-linear-gradient(top,  #ededed 0%,#cbcbcb 100%) !important; /* IE10+ */
+    background: -o-linear-gradient(top,  #ededed 0%,#cbcbcb 100%) !important; /* Opera 11.10+ */
+}
+
+.x-toolbar .x-toolbar-separator-horizontal {
+
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgba(255, 255, 255, 0.5);
+    height: 22px;
+    margin: 0 3px 0 2px;
+    width: 0;
+}
+
+ .x-toolbar-spacer div{
+ background-color:#d3d3d3;
+ border-bottom: 1px solid #ffffff !important;
+ height: 2px !important;
+ 
+ }
+
+.x-btn-default-toolbar-small-icon button{
+    width: 20px !important;
+    height: 20px;
+    padding: 0;
+    margin:0;
+}
+
+.x-btn-default-toolbar-small-icon .x-btn-icon{
+    height: 20px;
+    padding: 0;
+    margin:0;
+    width: 20px !important;
+    line-height: 20px;
+}
+
+.x-btn-default-toolbar-small-icon button, .x-btn-default-toolbar-small-icon .x-btn-inner, .x-btn-default-toolbar-small-noicon button, .x-btn-default-toolbar-small-noicon .x-btn-inner{
+    height: 20px;
+    line-height: 20px;
+}
+
+.x-btn-default-toolbar-small{padding: 0;}
+
+.x-btn-default-toolbar-small-over, .x-btn-default-toolbar-large-over{
+    background: none !important;
+}
+
+
+.x-btn-default-toolbar-small-focus, .x-btn-default-toolbar-large-focus,
+.toolbar-btn-placeholder .x-btn-default-small-focus, .toolbar-btn-large-placeholder .x-btn-default-large-focus {
+    background: none !important;
+    border: 1px solid transparent;
+}
+
+.x-btn-default-toolbar-small-pressed, .x-btn-default-toolbar-large-pressed{
+
+    background-clip: border-box;
+    background-attachment:fixed;
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+    background-attachment: inherit;
+
+
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, 0.2)!important;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    -moz-box-shadow:  0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.asc-filemenu-btn.x-btn-default-toolbar-small-pressed:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 6px;
+    border-color: transparent #fff transparent transparent;
+    border-style: dashed solid dashed dashed;
+    border-width: 7px;
+    margin-right: -1px;
+}
+
+.x-btn-default-toolbar-small-over, .x-btn-default-toolbar-large-over{
+    background: none;
+    border: 1px solid transparent;
+}
+
+.x-btn-default-toolbar-small-pressed span {
+    color:#FFFFFF !important;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.x-btn-default-toolbar-small-menu-active, .x-btn-default-toolbar-large-menu-active {
+    background-clip: border-box;
+    background-attachment:fixed;
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+    background-attachment: inherit;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, 0.2)!important;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    -moz-box-shadow:  0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.x-btn-default-toolbar-small-menu-active span{
+    color:#FFFFFF !important;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.x-toolbar .x-btn-split-right{
+    background-image: url("../img/controls/s-arrow-noline.gif");
+    background-image: -webkit-image-set(url("../img/controls/s-arrow-noline.gif") 1x, url("../img/controls/s-arrow-noline@2x.gif") 2x);
+}
+
+
+
+.x-btn-disabled .x-btn-split-right,
+.x-btn-disabled.x-btn-split-right {
+background-image:url("../img/controls/s-arrow-noline-disable.png");
+background-image: -webkit-image-set(url("../img/controls/s-arrow-noline-disable.png") 1x, url("../img/controls/s-arrow-noline-disable@2x.png") 2x);
+
+padding-right: 12px !important;
+}
+
+.x-btn-disabled .x-btn-arrow-right{
+background-image:url("../img/controls/s-arrow-noline-disable.png");
+background-image: -webkit-image-set(url("../img/controls/s-arrow-noline-disable.png") 1x, url("../img/controls/s-arrow-noline-disable@2x.png") 2x);
+}
+
+
+.x-btn-arrow {
+    background-image: url("../img/controls/s-arrow-noline.gif");
+    background-image: -webkit-image-set(url("../img/controls/s-arrow-noline.gif") 1x, url("../img/controls/s-arrow-noline@2x.gif") 2x);
+}
+
+
+/*Toolbar end*/
+/*Left toolbar*/
+.asc-filemenu-btn.x-btn-default-toolbar-small {
+    border-left: 0!important;
+    border-radius: 0;
+    -moz-border-radius: 0;
+}
+
+.asc-filemenu-btn.x-btn-default-toolbar-small span {
+    font-size: 13px;
+}
+
+.asc-main-menu-buttons .x-btn-icon{
+
+}
+
+.asc-main-menu-buttons {
+    width: 40px;
+    padding-top:3px;
+    padding-left:7px;
+    height: 31px;
+    line-height: 5px;
+}
+
+.asc-main-menu-buttons button{
+    width: 24px !important;
+    height: 24px;
+}
+
+.asc-main-menu-buttons .x-btn-icon{
+    height: 24px;
+    width: 24px !important;
+    line-height: 24px;
+}
+
+.asc-main-menu-buttons button, .asc-main-menu-buttons .x-btn-inner {
+    height: 24px;
+    line-height: 24px;
+}
+
+.asc-main-menu-buttons.x-item-disabled button span {
+    opacity: 1;
+}
+
+.lm-style .asc-main-menu-buttons.x-btn-default-toolbar-small-pressed.asc-main-menu-btn-selected:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 7px;
+    border-color: transparent #f4f4f4 transparent transparent;
+    border-style: dashed solid dashed dashed;
+    border-width: 7px;
+    margin-right: -1px;
+}
+
+.lm-style .lm-default-toolbar.x-toolbar-default,
+.rm-style .rm-default-toolbar.x-toolbar-default {
+    border: none !important;
+}
+
+.lm-default-toolbar{
+    background-image:none;
+    background-color:#e9e9e9;
+    -moz-box-shadow: inset -1px 0 0 #c8c8c8;
+    -webkit-box-shadow: inset -1px 0 0 #c8c8c8;
+    box-shadow: inset -1px 0 0 #c8c8c8;
+}
+
+.lm-default-toolbar button{
+}
+
+.rm-style .asc-main-menu-buttons.x-btn-default-toolbar-small-pressed.asc-main-menu-btn-selected:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 7px;
+    border-color: transparent transparent transparent #f4f4f4;
+    border-style: dashed dashed dashed solid;
+    border-width: 7px;
+    margin-left: -1px;
+}
+
+.rm-default-toolbar{
+    background-image:none;
+    background-color:#e9e9e9;
+    -moz-box-shadow: inset 1px 0 0 #c8c8c8;
+    -webkit-box-shadow: inset 1px 0 0 #c8c8c8;
+    box-shadow: inset 1px 0 0 #c8c8c8;
+}
+
+/*Left toolbar end*/
+/*Combobox start*/
+
+.x-form-text, textarea.x-form-field{
+    /*background: url(../img/controls/text-bg.gif) repeat-x 0 0 white;*/
+
+    background: #FFFFFF; /* Old browsers */
+    background: -moz-linear-gradient(top,  #e2e2e2 0%, #e2e2e2 5%, #f1f1f1 6%, #ffffff 45%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(5%,#e2e2e2), color-stop(6%,#f1f1f1), color-stop(45%,#ffffff)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #e2e2e2 0%,#e2e2e2 5%,#f1f1f1 6%,#ffffff 45%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #e2e2e2 0%,#e2e2e2 5%,#f1f1f1 6%,#ffffff 45%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #e2e2e2 0%,#e2e2e2 5%,#f1f1f1 6%,#ffffff 45%); /* IE10+ */
+    background: linear-gradient(to bottom,  #e2e2e2 0%,#e2e2e2 5%,#f1f1f1 6%,#ffffff 45%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+
+    background-size: auto 22px;
+    background-color: #ffffff;
+    background-repeat: repeat-x;
+
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    -moz-box-shadow:  0 1px 0 rgba(255, 255, 255, 1);
+    border: 1px solid #afafaf;
+
+    margin-right: -1px;
+}
+
+
+.x-form-field .x-form-text{
+    border: 1px solid #afafaf;
+}
+
+.x-form-trigger-wrap{
+    border-radius:0 2px 2px 0;
+    -moz-border-radius: 0 2px 2px 0;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    -moz-box-shadow:  0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.x-form-trigger-wrap:parent input{
+    border-radius:5px;
+
+}
+.x-form-trigger{
+    border-bottom:1px solid #afafaf;
+    background:url(../img/controls/trigger-square-wot.png) no-repeat scroll right top transparent;
+    background-image: -webkit-image-set(url("../img/controls/trigger-square-wot.png") 1x, url("../img/controls/trigger-square-wot@2x.png") 2x);
+}
+
+.x-form-trigger.x-form-arrow-trigger{
+    border-radius:0 2px 2px 0;
+    -moz-border-radius: 0 2px 2px 0;
+    border-bottom:1px solid #afafaf;
+}
+
+.x-pickerfield-open .x-form-field{
+    border-radius: 2px 0 0 2px;
+    -moz-border-radius: 2px 0 0 2px;
+}
+
+
+.x-form-trigger-wrap .x-form-spinner-up{
+    background: url(../img/controls/spinner-wot.png) left top;
+    background-image: -webkit-image-set(url("../img/controls/spinner-wot.png") 1x, url("../img/controls/spinner-wot@2x.png") 2x);
+}
+.x-form-trigger-wrap .x-form-spinner-up-over{background-position: -17px 0;}
+.x-form-trigger-wrap .x-form-spinner-up-click{background-position: -34px 0;}
+
+.x-form-trigger-wrap .x-form-spinner-down{
+    background: url(../img/controls/spinner-wot.png) left bottom;
+    background-image: -webkit-image-set(url("../img/controls/spinner-wot.png") 1x, url("../img/controls/spinner-wot@2x.png") 2x);
+}
+.x-form-trigger-wrap .x-form-spinner-down-over{background-position: -17px bottom;}
+.x-form-trigger-wrap .x-form-spinner-down-click{background-position: -34px bottom;}
+/*Combobox end*/
+
+/*popup start*/
+.x-boundlist{
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    border:0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    /*  box-shadow: 0 5px 5px rgba(0, 0, 0, 1);*/
+}
+.x-css-shadow{
+    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.5) !important;
+    -moz-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.5);
+
+}
+.x-boundlist-item{
+    padding-left: 15px;
+
+}
+
+
+
+.x-menu-body{
+    background: none repeat scroll 0 0 #FFFFFF !important;
+
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    border:0;
+    padding: 0;
+    overflow:hidden;
+}
+
+.x-menu-body .x-box-inner .x-menu-item:first-child{
+    border-radius: 5px 5px 0 0;
+
+}
+.x-menu-body .x-box-inner .x-menu-item:last-child{
+    border-radius:  0 0 5px 5px;
+}
+
+.x-menu-body .x-box-inner .x-menu-item:only-child{
+    border-radius:  5px 5px 5px 5px;
+}
+
+.x-menu-item-active .x-menu-item-link span{
+
+    color: #FFFFFF;
+}
+
+.x-box-scroller-bottom .x-menu-scroll-bottom {
+
+    background: url(../img/controls/scroller-arrow-bottom.png) no-repeat scroll center center transparent;
+background-image: -webkit-image-set(url("../img/controls/scroller-arrow-bottom.png") 1x, url("../img/controls/scroller-arrow-bottom@2x.png") 2x);
+    height: 20px;
+}
+.x-box-scroller-top .x-menu-scroll-top {
+
+    background: url(../img/controls/scroller-arrow-top.png) no-repeat scroll center center transparent;
+background-image: -webkit-image-set(url("../img/controls/scroller-arrow-top.png") 1x, url("../img/controls/scroller-arrow-top@2x.png") 2x);
+    height: 20px;
+}
+
+.x-menu-item-arrow{
+    background:url(../img/controls/parent-arrow.png) no-repeat scroll center center transparent;
+background-image: -webkit-image-set(url("../img/controls/parent-arrow.png") 1x, url("../img/controls/parent-arrow@2x.png") 2x);
+
+}
+
+.x-menu-item-checked .x-menu-item-icon{
+    background-image: url(../img/controls/menu-check.png);
+    background-image: -webkit-image-set(url("../img/controls/menu-check.png") 1x, url("../img/controls/menu-check@2x.png") 2x);
+}
+.x-menu-item-unchecked .x-menu-item-icon{
+    background-image: none;
+}
+
+.x-menu-item-checked .x-menu-group-icon{
+background-image: url(../img/controls/menu-check.png);
+background-image: -webkit-image-set(url("../img/controls/menu-check.png") 1x, url("../img/controls/menu-check@2x.png") 2x);
+
+
+}
+/*popup end*/
+
+/*x-tip start*/
+.x-tip{
+    background-color: #e9e9e9;
+    border: 1px solid #999999;
+
+}
+.x-tip-closable .x-tip-header .x-tip-header-body .x-box-inner{
+    height: 22px !important;
+
+}
+/*x-tip end*/
+
+/*text field */
+
+
+
+/*text field  end*/
+
+/*Checkbox start*/
+.x-form-checkbox{
+    background:url(../img/controls/checkbox.png) no-repeat scroll 0 0 transparent;
+    background-image: -webkit-image-set(url("../img/controls/checkbox.png") 1x, url("../img/controls/checkbox@2x.png") 2x);
+    height: 16px;
+    width: 16px;
+    vertical-align: bottom;
+}
+.x-form-cb-checked .x-form-cb-focus{background-position: 0 -16px;}
+.x-form-cb-checked .x-form-checkbox{background-position: 0 -16px;}
+.x-form-cb-focus {background-position: -16px 0 ;}
+.x-form-cb-label .x-form-cb-label-after{padding-top:2px;}
+.x-form-cb-indeterminate .x-form-checkbox{background-position: 0 -48px}
+
+
+.x-grid-row-checker{
+    background:url(../img/controls/checkbox.png) no-repeat scroll 0 0 transparent;
+    background-image: -webkit-image-set(url("../img/controls/checkbox.png") 1x, url("../img/controls/checkbox@2x.png") 2x);
+    height: 16px;
+    width: 16px;
+
+}
+
+.x-grid-row-selected .x-grid-row-checker, .x-grid-row-checked .x-grid-row-checker{
+
+    background:url(../img/controls/checkbox.png) no-repeat scroll 0 0 transparent;
+    background-image: -webkit-image-set(url("../img/controls/checkbox.png") 1x, url("../img/controls/checkbox@2x.png") 2x);
+    background-position: 0 -16px;
+}
+/*Checkbox end*/
+
+/*Radiobox start*/
+.x-form-radio{
+    background:url(../img/controls/radio.png) no-repeat scroll 0 0 transparent;
+background-image: -webkit-image-set(url("../img/controls/radio.png") 1x, url("../img/controls/radio@2x.png") 2x);
+    height: 16px;
+    width: 16px;
+    vertical-align: bottom;
+}
+.x-form-cb-checked .x-form-radio{background-position: 0 -16px;}
+/*Radiobox end*/
+
+/*Panel start*/
+.x-panel-body-default{
+    background-color:#f4f4f4;
+    border-width: 0;
+
+}
+
+.asc-right-panel-undocked .asc-right-panel .x-panel-body-default{
+    border: 1px solid #dbdbdb;
+    border-top: none;
+}
+
+.asc-right-panel .x-panel-body-default{
+    background-color:#f4f4f4;
+}
+
+.x-panel-header-default, .x-nlg .x-panel-header-default{
+    background: #ededed; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ededed 0%, #dddddd 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ededed 0%,#dddddd 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
+    border:1px solid #d1d1d1;
+    border-top: 1px solid #fbfbfb;
+}
+
+.x-panel-header-default-top {
+    box-shadow:none;
+}
+
+.x-panel-header-text-container{
+    text-align:center;
+
+
+}
+.x-panel-collapsed .x-window-header-default, .x-panel-collapsed .x-panel-header-default{
+    border:1px solid #d1d1d1;
+    border-top: 1px solid #fbfbfb;
+}
+
+.x-panel-header-text-default{
+
+    color:#898989;
+    text-shadow: 1px 1px #efefef;
+
+}
+
+
+.x-tool img{
+    background-image:url(../img/controls/tool-sprites.png);
+background-image: -webkit-image-set(url("../img/controls/tool-sprites.png") 1x, url("../img/controls/tool-sprites@2x.png") 2x);
+
+}
+/*Panel end*/
+/*coloor picker*/
+.x-color-picker{
+    margin: 5px;
+}
+/*color picker end*/
+
+
+
+/*normal button*/
+.x-btn-default-small, .x-nlg .x-btn-default-small{
+    border: 1px solid #aaaaaa;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+
+    background: #f8f8f8; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ffffff 0%, #f5f5f5 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ffffff 0%,#f5f5f5 100%); /* W3C */
+    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );  IE6-9 */
+
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+    -moz-box-shadow:  0 1px 0 rgba(255, 255, 255, 0.9);
+
+}
+.x-btn-default-small-pressed{
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    background-clip: border-box;
+    background-attachment:fixed;
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+    background-attachment: inherit;
+
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+    -moz-box-shadow:  0 1px 0 rgba(255, 255, 255, 0.9);
+
+}
+
+.x-nlg .x-btn-default-small-pressed{
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.x-btn-default-small-pressed span{
+
+    color:#FFFFFF !important;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.asc-acor-btn-left.x-btn-default-small, .asc-acor-btn-left.x-btn-default-small-pressed{
+border-radius: 2px 0 0 2px;
+}
+
+.asc-acor-btn-right.x-btn-default-small, .asc-acor-btn-right.x-btn-default-small-pressed{
+border-radius:  0 2px 2px 0;
+border-left: 0;
+
+}
+
+.asc-dialogmenu-btn.x-btn-default-small{
+    border: 1px solid transparent;
+	background: none;
+
+    box-shadow: none;
+	
+    border-radius: 0;
+    -moz-border-radius: 0;
+
+    padding-right: 10px;
+}
+
+.asc-dialogmenu-btn.x-btn-default-small-pressed{
+box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+border: 1px solid rgba(0, 0, 0, 0.2);
+border-left: 0;
+border-right: 0;
+
+}
+
+.asc-dialogmenu-btn .x-btn-inner{
+    font-weight: bold;
+}
+
+/*normal button end*/
+/*blue and gray button*/
+.asc-darkgray-button.x-btn-default-small, .asc-blue-button.x-btn-default-small{
+
+    border: 1px solid rgba(0, 0, 0, 0.05);
+	
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    background-clip: border-box;
+    background-attachment:fixed;
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+    background-attachment: inherit;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow:  0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+
+.asc-blue-button.x-btn-default-small span{
+    color:#FFFFFF !important;
+    font-weight:bold;
+    text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2);
+}
+
+.asc-darkgray-button.x-btn-default-small{
+
+    border-top: 1px solid #dddddd;
+    background:url(../img/controls/button/normal-darkgray-button-bg.gif) repeat-x top !important;
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+
+    border-bottom: 1px solid #b8b8b8;
+
+}
+.asc-darkgray-button.x-btn-default-small span{
+    color:#666666 !important;
+    font-weight:bold;
+    text-shadow: 0 1px 0px rgba(255, 255, 255, 0.6);
+}
+
+.asc-darkgray-button.x-btn-default-small-over, .asc-blue-button.x-btn-default-small-over{
+
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+    background-position: 0 -150px;
+}
+
+.asc-darkgray-button.x-btn-default-small-over{
+    border-bottom: 1px solid #cfcfcf;
+    background-position: 0 -150px !important;;
+}
+
+
+.asc-darkgray-button.x-btn-default-small-pressed{
+
+    border: 1px solid rgba(0, 0, 0, 0.2);
+
+    background:url(../img/controls/button/normal-darkgray-button-bg.gif) repeat-x 0 -300px !important;
+
+    background-origin:  border-box !important;
+    -moz-background-origin: border !important;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+
+/*blue and gray button end*/
+
+.asc-right-container {
+    background-color: #EEEEEE;
+}
+
+.asc-right-panel,
+.asc-right-panel .x-panel-body,
+.asc-right-panel .x-form-item{
+    font-size: 11px !important;
+}
+/* application error panel */
+
+.asc-right-panel .x-form-field{
+    font-size: 11px !important;
+}
+
+.application-error-panel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: table-cell;
+    vertical-align: middle;
+    background-color: #f4f4f4;
+    z-index: 90000;
+}
+
+.application-error-message-block {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+}
+
+.application-error-message-auxiliary {
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 100%;
+}
+
+.application-error-message-inner {
+    width: 550px;
+    margin: auto;
+    padding: 30px;
+    background-color: #e3e3e3;
+}
+
+.application-error-message-title {
+    font-size: 24px;
+    margin: 0 0 14px;
+    text-align: center;
+}
+
+.application-error-message-text {
+    font-size: 14px;
+    text-align: center;
+}
+
+/* body menu without icons for item */
+
+.no-icons .x-menu-item-link{
+    padding: 6px 20px 3px 20px;
+}
+
+.x-menu-item-link img {
+    margin-top: 3px;
+}
+
+.asc-menu-item-unchecked .x-menu-item-icon {
+    background:url(../img/controls/menu-item-unchecked.PNG);
+background-image: -webkit-image-set(url("../img/controls/menu-item-unchecked.png") 1x, url("../img/controls/menu-item-unchecked@2x.png") 2x);
+}
+
+.asc-menu-item-checked .x-menu-item-icon {
+    background:url(../img/controls/menu-item-checked.PNG);
+background-image: -webkit-image-set(url("../img/controls/menu-item-checked.png") 1x, url("../img/controls/menu-item-checked@2x.png") 2x);
+}
+
+.x-vertical-scroller-present{
+	border: 1px solid #AFAFAF;
+    border-radius: 2px;
+    box-shadow: 0 1px 0 #FFFFFF;
+	padding:1px;
+}
+.x-vertical-scroller-present .x-grid-body, .x-vertical-scroller-present .x-scroller-vertical { 
+	border:0;
+	margin-right: -1px;;
+}
+
+.x-grid-header-hidden .x-grid-body {
+	border: 1px solid #AFAFAF !important;
+
+}
+
+.x-slider-horz .x-slider-thumb {
+    background-image:  url("../img/controls/slider-thumb.png");
+    background-image: -webkit-image-set(url("../img/controls/slider-thumb.png") 1x, url("../img/controls/slider-thumb@2x.png") 2x);
+}
+
+.x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner {
+    background-image: url("../img/controls/slider-bg.png");
+    background-image: -webkit-image-set(url("../img/controls/slider-bg.png") 1x, url("../img/controls/slider-bg@2x.png") 2x);
+}
+
+.x-btn-over .x-btn-split-right, .x-btn-pressed .x-btn-split-right {
+    background: url(../img/controls/button/s-arrow-d.png) no-repeat scroll right center transparent;
+    background-image: -webkit-image-set(url("../img/controls/button/s-arrow-d.png") 1x, url("../img/controls/button/s-arrow-d@2x.png") 2x);
+}
+
+.jspDrag{
+    background-color: rgba(0,0,0,0.20) !important;
+}
+
+/* safari 7.0 */
+.safari-7.x-viewport {
+    overflow: hidden;
+}
+.safari-7.x-viewport body {
+    overflow: auto;
+}
+.safari-7 .x-box-layout-ct {
+    overflow: initial;
+}
+.safari-7 .x-box-inner {
+    overflow: inherit;
+}
+
+.safari-7 .x-toolbar.x-box-item.x-box-layout-ct {
+    overflow: hidden;
+}
+
+.safari-7 .storage-combodataview .combodataview-auto-width .x-container,
+.safari-7 .storage-combodataview .combodataview-auto-width .x-container .x-component {
+    overflow: hidden !important;
+}
+
+.safari-7.x-viewport body::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+.safari-7.x-viewport .x-panel-body.x-menu-body.x-panel-body-default {
+    overflow: hidden !important;
+}
+
+/* IE 10+ */
+input[type=text]::-ms-clear {
+    display:none;
+}

OfficeWeb/apps/common/main/resources/css/chat-panel.css

@@ -0,0 +1,109 @@
+.common-chatpanel {
+    -webkit-box-shadow: inset -1px 0 0 #C8C8C8;
+       -moz-box-shadow: inset -1px 0 0 #C8C8C8;
+            box-shadow: inset -1px 0 0 #C8C8C8;
+}
+
+.chat-header {
+    color       : #636363;
+    font-size   : 14px;
+    font-family : Arial,serif;
+    padding     : 18px 20px;
+    border-bottom: 1px solid #C3C3C3;
+}
+
+/*
+ * User List
+ */
+
+.chat-users-view {
+    padding: 5px 0;
+}
+
+.chat-users-view .chat-user-wrap {
+    padding: 2px 0 2px 20px;
+}
+
+.chat-users-view .chat-user-wrap.hidden {
+    padding: 0;
+    visibility: hidden;
+}
+
+.chat-users-view .chat-user-wrap .color {
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+}
+
+.chat-users-view .chat-user-wrap .name {
+    padding-left: 4px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: bold;
+}
+
+
+/*
+ * Message List
+ */
+
+.chat-msg-view {
+    border-top: 1px solid #C3C3C3;
+    border-bottom: 1px solid #C3C3C3;
+}
+
+.chat-msg-view .chat-msg-wrap {
+    padding: 5px 0 8px 20px;
+    width: 260px;
+    /*width: 100%;*/
+    padding-right: 10px;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+      word-wrap: break-word;
+}
+
+.chat-msg-view .chat-msg-wrap .user {
+    font-weight: bold;
+    white-space: nowrap;
+    display: block;
+    -webkit-user-select: text;
+     -khtml-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+         -o-user-select: text;
+            user-select: text;
+}
+
+.chat-msg-view .chat-msg-wrap .message {
+    word-wrap: break-word;
+    -webkit-user-select: text;
+     -khtml-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+         -o-user-select: text;
+            user-select: text;
+}
+
+.chat-msg-view .chat-msg-wrap .message.service {
+    text-align: center;
+    color: #CECECE;
+    text-shadow: 0 1px 0 #ffffff;
+    padding-right: 20px;
+}
+
+/*
+ * Send form
+ */
+
+.add-msg-container {
+    padding: 0 20px;
+}
+
+.btn-send-msg.x-btn-default-small {
+    min-width: 90px;
+    text-align: center;
+    max-width: 150px;
+    overflow: hidden;
+}

OfficeWeb/apps/common/main/resources/css/comments-panel.css

@@ -0,0 +1,276 @@
+.common-commentspanel {
+    -webkit-box-shadow: inset -1px 0 0 #C8C8C8;
+       -moz-box-shadow: inset -1px 0 0 #C8C8C8;
+            box-shadow: inset -1px 0 0 #C8C8C8;
+}
+
+.comments-header {
+    color       : #636363;
+    font-size   : 14px;
+    font-family : Arial,serif;
+    padding     : 18px 20px;
+    border-bottom: 1px solid #C3C3C3;
+}
+
+.add-link label {
+    border-bottom: 1px dotted #7698DE;
+    color: #7698DE;
+    cursor: pointer;
+}
+
+.menu-resolve-comment .x-menu-item-link {
+    padding: 6px 12px;
+}
+
+.menu-resolve-comment.x-menu-body .x-box-inner .x-menu-item:first-child {
+    border-radius: 5px;
+}
+
+/*
+ * Comment list
+ */
+
+.comments-view {
+}
+
+.comments-view .comment-wrap {
+    padding: 15px 10px 0 20px;
+    cursor: default;
+    width: 260px;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+    position: relative;
+}
+
+.comments-view .x-clear {
+    position: absolute;
+    height: 80px;
+}
+
+.comments-view .last-clear {
+    position: absolute;
+    /*width: 255px;*/
+    width: 99%;
+    height: 10px;
+    margin-top: -5px;
+    background-color: #F4F4F4;
+}
+
+.comments-view .header {
+    height: 30px;
+}
+.comments-view .user-info {
+    display: inline;
+    float: left;
+}
+
+.comments-view .edit-info {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: #F4F4F4;
+    margin: 15px 10px;
+    height: 30px;
+    -webkit-box-shadow: -10px 0 6px -4px #F4F4F4;
+       -moz-box-shadow: -10px 0 6px -4px #F4F4F4;
+            box-shadow: -10px 0 6px -4px #F4F4F4;
+}
+
+.comments-view .replys .edit-info {
+    margin: 0;
+}
+
+.comments-view .comment-wrap .lock-area {
+    display: none;
+}
+
+.comments-view .comment-wrap .lock-author {
+    display: none;
+}
+
+.comments-view .comment-wrap.lock .lock-area {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #F4F4F4;
+    margin-top: -1px;
+    opacity: 0.5;
+}
+
+.comments-view .comment-wrap.lock .lock-author {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    max-width: 150px;
+    line-height: 20px;
+    background-color: #EE3525;
+    margin: 18px 25px;
+    padding: 2px 10px;
+    color: white;
+    font-family: arial, tahoma, helvetica, sans-serif;
+    font-size: 11px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 100px;
+    text-align: center;
+}
+
+.comments-view .comment-wrap a {
+    color: #666;
+}
+
+.comments-view .comment-wrap a:hover {
+    color: #7698DE;
+}
+
+.comments-view .edit-info a {
+}
+
+.comments-view .comment-wrap .user {
+    font-weight: bold;
+    font-size: 12px;
+    font-family : Arial,serif;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.comments-view .comment-wrap .date {
+    font-size: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.comments-view .comment-wrap .resolve {
+    display: block;
+    float: left;
+    padding-top: 5px;
+    margin-right: 15px;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.comments-view .comment-wrap .resolve.resolved {
+    padding-left: 20px;
+    padding-right: 8px;
+    text-decoration: none;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYBJREFUeNqkk1lLAmEUho9LuU0YrrnnMqGIFAQZlZFDUeGPEYTuuu5CMPo3XXURpKBgNNGVguI2KigpmigFdsZMcrTQ/OCF4ZzzPJzZeP1+HxY5fFjwzC0grwklhvqXAEGdbFlUIxWqO7w+m0uAgFEuljCU1Qn+dSdbup1ZgLBtVSwtHJpJOLW5oNPrjnrCGWBSKZGl9o128Js3IJpNQayUYVu+sQ1w8BJj5sBuFcJ7eiscYGK5NESLGci1Gr50qP3AzvDY7wAHb7xaczBezZewdo55wXg0UoL2ai2wu2aBZCUPiWoBip3mCB5sgHDATiiClN4OAYvLgLUY5korIegdtQm2lXpIlLIQRwEX/rlBeFOuvTgxkYNiss4MQJFACHSNgcd6GZhuawIeCYb3G/asaC6ODQ5Y4n89mud6BehGBcq99lR4TDCURNwydYjSWSHdrMFTowqV97df4QnBt0QhFIdeP7qAnSOE7/98z6yAG0dEtoURTOtxw1v0d/4UYAB7AMMdfaAEDQAAAABJRU5ErkJggg==') no-repeat 0 4px,
+                url('data:image/png;base64,Qk1mAAAAAAAAADYAAAAoAAAABQAAAAMAAAABABgAAAAAAAAAAADDDgAAww4AAAAAAAAAAAAA////////AAAA/////////////wAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAD/') no-repeat right 11px;
+}
+
+.comments-view .comment-wrap .quote {
+    border-left: 1px solid #939393;
+    color: #939393;
+    font-style: italic;
+    padding: 5px 9px;
+    cursor: pointer;
+}
+
+.comments-view .comment-wrap .comment-message {
+    padding-right: 9px;
+    padding-top: 10px;
+    cursor: pointer;
+}
+
+.comments-view .comment-wrap .comment {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    -webkit-user-select: text;
+     -khtml-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+         -o-user-select: text;
+            user-select: text;
+}
+
+.comments-view .comment-wrap .replys {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAAp6enAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE8Ia8AAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My4zNTDus58AAAAtSURBVBhXY/jP+B8KGNCZYBmIKCOIgDGBbCATCoBMEADyQKIQJlgtmAkxAQ4A9M9Kz+5qNBQAAAAASUVORK5CYII=') no-repeat left 12px transparent;
+    padding: 8px 9px 0 18px;
+}
+
+.comments-view .comment-wrap .separator {
+    border-bottom: 1px solid #D3D3D3;
+    box-shadow: 0 1px 0 0 #FFF;
+    margin-right: 15px;
+}
+
+.comments-view .btn-header {
+    width: 16px;
+    height: 16px;
+    float: left;
+    cursor: pointer;
+    margin: 5px 5px 0 0;
+}
+
+.comments-view .btn-header.edit {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAatJREFUeNpi/P//PwMlgIlYhVpaWmxkG6Cjo2PAxMR0A0ibkWyAnp6eAQsLywZPT8+lrKysi0B8og0wNDQ0AGrakJ6e3v3hw4ezQLYoEK8FimsRNMDExASsOTk5uXf//v13L168ODM+Pr7VwsJiM1B8M1CeGacB5ubmIM2bY2Nj+48cOXLn8ePHCxMSEjpPnjx59dy5c1Hh4eHTzpw58w+klgVds5WVlS5IM1BRP1DR7UePHi0A2tx56tSpS/fu3VsaGhraV1RUtBCo9D+GAXZ2drpsbGzbgoKCJl66dOnmw4cP58fFxXUCbT0P1LwiJCSkv6CgYC5Q6RuYHkZYQnJ0dNRlZGTc5u/vP+XatWtXbt++PS8qKgqs+caNG0sDAgIm5eXlgTS/RrYU7gJgVF0C0cAAk//27VtRTExM55UrV87euXNneWBg4MTc3Nx56JpRApGZmRmMf/z4kQlMMNuAtp66fv36Ej8/vym4NKN4wcvLC54pgF75AfInMPFMy8nJATn7Fa7ohnsBmFSRxTnc3d1nENKM4gIg8EWTOwXELwkldUZKszNAgAEAY2m2Fvx4qY8AAAAASUVORK5CYII=');
+}
+
+.comments-view .btn-header.delete {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARBJREFUeNpi/P//PwMlgAWboJaWljSQmgbE3lChrUCcde3atadEGcDKyrqQm5tbMCkpqQzEnzdvXvTXr1+XA5l26GoZkb1gaGi4F0g5EXD1vvPnzztjdQELC4tTXFxcTW5u7iVsOidPnqy3aNGiFpxeADqd4cSJE7eBBmzGZgBQjhOkBqcBUlJS554+fbrSwcFhJS73g9SgCIDCAAmbu7q6Aqn/viB69uzZ1SCMLAZSg6wH3QAGb2/v/0i0CAijiaGoZ8EShcj0GyxiKIAJXYCNjQ2FxiWG0wBstuFzAV4vJCYmepBsgIiIyLmUlJT/zMzMIO52mDhIDCSHNylDgTkQi+FIBq+A+CQhA0gCAAEGAEdfmUIa3Y2yAAAAAElFTkSuQmCC');
+}
+
+.comments-view .comment-wrap .reply {
+    position: relative;
+}
+
+.comments-view .comment-wrap .reply .message {
+    padding: 0 0 15px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    -webkit-user-select: text;
+     -khtml-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+         -o-user-select: text;
+            user-select: text;
+}
+
+.comments-view .comment-wrap .reply-message {
+    cursor: pointer;
+}
+
+.reply-link-container {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAAioqKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/Ie0wAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My4zNTDus58AAAAaSURBVBhXY/j//z8jI5BgwGQwQgEDnIFbMQAPcyP5VHlHvwAAAABJRU5ErkJggg==') no-repeat 0 center transparent;
+}
+
+.reply-link-container label {
+    margin-left: 18px;
+}
+
+.add-reply-container {
+    padding: 0 10px 15px 0;
+}
+
+.controls-edit-msg-container {
+    margin-bottom: 10px;
+}
+
+/*
+ * Send form
+ */
+
+.add-comment-container {
+    padding: 15px 20px 0;
+    border-top: 1px solid #C3C3C3;
+    text-align: center;
+}
+
+.add-comment-container .add-link {
+    margin-left: 20px;
+}
+
+.btn-send-comment.x-btn-default-small {
+    min-width: 110px;
+    text-align: center;
+    max-width: 150px;
+    overflow: hidden;
+}

OfficeWeb/apps/common/main/resources/css/comments-popover.css

@@ -0,0 +1,150 @@
+.comment-popover-root {
+    position: absolute;
+    z-index: 10;
+    margin: -32px 0 0 15px;
+}
+
+.comment-popover-root.left-sided {
+    margin: -32px 15px 0 0;
+}
+
+.common-commentspopover {
+    border-radius: 5px;
+    background-color: #F4F4F4;
+    overflow: visible;
+
+        -moz-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+     -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+             box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+}
+
+.common-commentspopover .x-box-inner {
+    overflow: visible;
+}
+
+.common-commentspopover .popover-arrow {
+    position: absolute;
+    overflow: hidden;
+    left: -20px;
+    top: 20px;
+    width: 20px;
+    height: 30px;
+}
+
+.left-sided .common-commentspopover .popover-arrow {
+    left: 100%;
+}
+
+.common-commentspopover .popover-arrow:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 13px;
+    background-color: #F4F4F4;
+    width: 15px;
+    height: 15px;
+
+        -moz-transform: rotate(45deg);
+         -ms-transform: rotate(45deg);
+     -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+             transform: rotate(45deg);
+
+       -moz-box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
+}
+
+.left-sided .common-commentspopover .popover-arrow:after {
+    left: -7px;
+    -moz-box-shadow: 4px 4px 8px -1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 4px 4px 8px -1px rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 4px 8px -1px rgba(0, 0, 0, 0.2);
+}
+
+.common-commentspopover.lock .popover-arrow:after {
+    background-color: #F4F4F4;
+}
+
+.common-commentspopover .comments-view {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+}
+
+.common-commentspopover .comments-view .comment-wrap.hidden {
+    display: none;
+}
+
+.common-commentspopover .comments-view .comment-wrap {
+    padding: 0 0 0 15px;
+    width: 245px;
+}
+
+.common-commentspopover .comments-view .comment-wrap .comment {
+    margin-top: 5px;
+    -webkit-user-select: none;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.common-commentspopover .comments-view .edit-info {
+    margin: 0 0 10px;
+}
+
+.common-commentspopover .comments-view .replys .edit-info {
+    margin: 0;
+}
+
+.common-commentspopover .lock-area {
+    display: none;
+}
+
+.common-commentspopover .lock-author {
+    display: none;
+}
+
+.common-commentspopover.lock .lock-area {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #F4F4F4;
+    opacity: 0.5;
+    border-radius: 5px;
+}
+
+.common-commentspopover.lock .lock-author {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    max-width: 150px;
+    line-height: 20px;
+    background-color: #EE3525;
+    margin: 12px;
+    padding: 3px 8px;
+    color: white;
+    font-family: arial, tahoma, helvetica, sans-serif;
+    font-size: 11px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 100px;
+    text-align: center;
+}
+
+.common-commentspopover .comments-view .x-clear{
+    height: 0;
+}
+
+.common-commentspopover .controls-reply-container {
+    padding: 5px 15px 10px;
+}
+
+.common-commentspopover .reply-link-container {
+    margin-left: 15px;
+    padding: 5px 0 10px 0;
+}

OfficeWeb/apps/common/main/resources/css/dataview-combo.css

@@ -0,0 +1,136 @@
+.storage-combodataview{
+    background: #ffffff;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #c3c3c3;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+}
+
+.storage-combodataview .x-view-context{
+}
+
+.storage-combodataview .thumb{
+    background: #333;
+    padding: 0;
+    position: relative;
+}
+
+.storage-combodataview .thumb-wrap{
+    display: inline-block;
+    float: left;
+    padding: 2px 2px 0;
+    margin-right: 2px;
+    text-align: center;
+    width: auto;
+    position: relative;
+}
+
+.storage-combodataview .thumb-wrap .title{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    font-size: 10px;
+    color: #737474;
+    padding: 0 5px;
+    margin-bottom: 5px;
+    cursor: default;
+    text-overflow: ellipsis;
+    height: 1.2em;
+    overflow: hidden;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.storage-combodataview .x-item-over{
+    background: #E7E8E8;
+    padding: 2px 2px 0;
+}
+
+.storage-combodataview .x-item-selected{
+    background: #7698DE;
+    padding: 2px 2px 0;
+}
+
+.storage-combodataview .emptyText{
+    text-align: center;
+    padding-top: 15px;
+    color: #999;
+}
+
+/* menu */
+
+.x-dataview-combo-menu .storage-data-view{
+    background: white;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 1px 20px 1px 1px;
+}
+
+.x-dataview-combo-menu .storage-data-view .x-view-context{
+}
+
+.x-dataview-combo-menu .storage-data-view .thumb{
+    background: #333;
+    padding: 0;
+    position: relative;
+}
+
+.x-dataview-combo-menu .storage-data-view .thumb img{
+}
+
+.x-dataview-combo-menu .storage-data-view .thumb-wrap{
+    display: inline-block;
+    float: left;
+    padding: 2px 2px 0;
+    margin: 0 2px 4px 0;
+    text-align: center;
+    width: auto;
+    position: relative;
+    border: none;
+}
+
+.x-dataview-combo-menu .storage-data-view .x-item-over{
+    border: none !important;
+    background: #efefef;
+    padding: 2px 2px 0;
+}
+
+.x-dataview-combo-menu .storage-data-view .x-item-selected{
+    border: none !important;
+    background: #7698DE;
+    padding: 2px 2px 0;
+}
+
+/* button */
+
+.x-btn-combodataview {
+    background: url(../img/controls/button/s-arrow-d.png) no-repeat scroll right center transparent;
+    background-image: -webkit-image-set(url("../img/controls/button/s-arrow-d.png") 1x, url("../img/controls/button/s-arrow-d@2x.png") 2x);
+}
+
+.x-btn-combodataview.x-btn-default-small {
+    background: url(../img/controls/button/s-arrow-d.png) no-repeat scroll right center transparent;
+    background-image: -webkit-image-set(url("../img/controls/button/s-arrow-d.png") 1x, url("../img/controls/button/s-arrow-d@2x.png") 2x);
+    border: none;
+}
+.x-btn-combodataview.x-btn-default-small-pressed{
+    background: url(../img/controls/button/s-arrow-d-over.png) no-repeat scroll right center transparent !important;
+    background-image: -webkit-image-set(url("../img/controls/button/s-arrow-d-over.png") 1x, url("../img/controls/button/s-arrow-d-over@2x.png") 2x) !important;
+}
+
+.storage-combodataview.x-item-disabled .x-mask{
+    opacity: 0;
+}
+
+.storage-combodataview.x-item-disabled{
+    opacity: 0.6;
+}
+
+.combodataview-auto-width {
+    width: auto !important;
+}

OfficeWeb/apps/common/main/resources/css/dataview-picker.css

@@ -0,0 +1,56 @@
+.storage-data-view{
+    background: white;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.storage-data-view .x-view-context{
+}
+
+.storage-data-view .thumb{
+    background: #333;
+    padding: 0;
+    position: relative;
+}
+
+.storage-data-view .thumb img{
+}
+
+.storage-data-view .thumb-wrap .title{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    font-size: 10px;
+    color: #737474;
+    padding: 0 5px;
+    margin-bottom: 5px;
+    cursor: default;
+    text-overflow: ellipsis;
+    height: 1.2em;
+    overflow: hidden;
+    text-align: center;
+}
+
+.storage-data-view .thumb-wrap{
+    display: inline-block;
+    float: left;
+    margin: 4px;
+    margin-right: 0;
+    text-align: center;
+    width: auto;
+    position: relative;
+    border:1px solid rgba(172, 172, 172, 0.5);
+    padding: 1px;
+    overflow: hidden;
+}
+
+.storage-data-view .x-item-over{
+    border:2px solid #9a9a9a;
+    padding: 0;
+}
+
+.storage-data-view .x-item-selected{
+    border:2px solid #9a9a9a;
+    padding: 0;
+}

OfficeWeb/apps/common/main/resources/css/doublecolorpalette.css

@@ -0,0 +1,52 @@
+
+.cmp-double-colorpalette.x-color-picker em span{
+    height: 12px;
+    width: 12px;
+}
+
+.cmp-double-colorpalette.x-color-picker em {
+    border: none;
+}
+
+.cmp-double-colorpalette.x-color-picker a{
+    padding: 0;
+}
+
+.cmp-double-colorpalette.x-color-picker a:hover{
+    border-color: #000;
+    background-color: #000;
+}
+
+.x-color-picker {
+    cursor: default;
+}
+
+.cmp-double-colorpalette.x-color-picker a.x-color-picker-selected {
+    border-color: #000;
+    background-color: #000;
+}
+
+.dynamic-empty-color em span {
+    border:solid 1px #C0C0C0;
+    background:#ffffff
+}
+
+.cmp-double-colorpalette.x-color-picker a:hover em span,
+    .cmp-double-colorpalette.x-color-picker .color-transparent.x-color-picker-selected em span {
+    border:none;
+}
+
+.cmp-double-colorpalette .color-transparent {
+    background-image: url(../img/doublecolorpalette/nocolor.png);
+background-image: -webkit-image-set(url("../img/doublecolorpalette/nocolor.png") 1x, url("../img/doublecolorpalette/nocolor@2x.png") 2x);
+}
+
+.cmp-double-colorpalette .color-transparent em span {
+    border:solid 1px #C0C0C0;
+}
+
+.common-extendedcolordialog #field-start-color.color-transparent {
+    background-image: url(../img/hsbcolorpicker/transparent-color.png);
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/transparent-color.png") 1x, url("../img/hsbcolorpicker/transparent-color@2x.png") 2x);
+    background-size: cover;
+}

OfficeWeb/apps/common/main/resources/css/grouped-data-view.css

@@ -0,0 +1,64 @@
+
+.grouped-data-view {
+    padding: 10px 10px 14px 12px;
+    background-color: white;
+    border-radius: 5px;
+}
+
+.asc-grouped-data {
+    clear:left;
+    overflow: hidden;
+    margin: 2px;
+    padding: 2px;
+}
+
+.asc-grouped-data .group-description {
+    float:left;
+    height: 55px;
+    line-height: 55px;
+}
+
+.group-description .description-text {
+    font-weight: bold;
+    font-size: 11px;
+}
+
+.asc-grouped-data .group-items-container{
+    height: 55px;
+    width: 216px;
+    right: 0;
+    position: absolute;
+    overflow: hidden;
+    margin: 2px 2px 2px 2px;
+}
+
+.group-items-container .group-item{
+    float:left;
+    width: 52px;
+    height: 52px;
+    margin: 0 0 0 14px;
+}
+
+.group-item span {
+    position: absolute;
+}
+
+.group-item {
+    padding: 1px;
+    border: 1px solid rgba(172, 172, 172, 0.5);
+}
+.group-item.x-item-selected {
+    padding: 0;
+    border:2px solid #b8b8b8;
+}
+
+.group-item.group-item-over {
+    /*outline: 2px solid #b8b8b8;*/
+    padding: 0;
+    border:2px solid #b8b8b8;
+    cursor: pointer;
+}
+
+.asc-grouped-data-selector:not(:last-child) {
+    height: 2px;
+}

OfficeWeb/apps/common/main/resources/css/header.css

@@ -0,0 +1,47 @@
+.common-header {
+    color: #e8e8e8;
+    padding: 0 5px;
+    background: #434343;
+    font-size: 14px;
+    font-family: arial, tahoma, verdana, sans-serif;
+}
+
+.common-header #header-logo {
+    display: inline-block;
+    background-image: url('../img/header/header-logo.png');
+    background-image: -webkit-image-set(url("../img/header/header-logo.png") 1x, url("../img/header/header-logo@2x.png") 2x);
+    background-repeat: no-repeat;
+    width: 125px;
+    height: 30px;
+    cursor: pointer;
+}
+
+.common-header div {
+    vertical-align: middle;
+}
+
+.common-header span {
+    vertical-align: middle;
+    padding: 0 4px;
+    cursor: default;
+}
+
+.common-header #header-caption {
+    font-size: 14px;
+}
+
+.common-header #header-documentcaption {
+    font-weight: bold;
+    color: #ffffff;
+}
+
+.common-header #header-back {
+    float: right;
+    padding-top: 7px;
+    text-decoration: underline;
+    display: none;
+}
+
+.common-header #header-back:hover {
+    cursor: pointer;
+}

OfficeWeb/apps/common/main/resources/css/hsb-colorpicker.css

@@ -0,0 +1,102 @@
+.cmp-hsb-colorpicker-top-panel {
+    height: 22px;
+    margin: 0 0 10px;
+}
+
+.cmp-hsb-colorpicker-color-value {
+    width: 22px;
+    height: 22px;
+    float: left;
+    border: 1px solid #C4C4C4;
+    background-image: none;
+    background-position: 0 -206px;
+    background-repeat: no-repeat;
+}
+
+.cmp-hsb-colorpicker-color-value .transparent-color {
+    width: 22px;
+    height: 22px;
+    float: left;
+    background: url("../img/hsbcolorpicker/hsb-colorpicker.png") 0 -206px no-repeat;
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/hsb-colorpicker.png") 1x, url("../img/hsbcolorpicker/hsb-colorpicker@2x.png") 2x);
+    /*visibility: hidden;*/
+}
+
+.cmp-hsb-colorpicker-color-text {
+    color: #464646;
+    height: 22px;
+    padding: 4px 32px;
+    cursor: default;
+}
+
+.cmp-hsb-colorpicker-cnt-hb {
+    display: inline-block;
+    overflow: hidden;
+    width: 195px;
+    height: 196px;
+    position: relative;
+    border: 1px solid #C4C4C4;
+    background: url("../img/hsbcolorpicker/hsb-colorpicker.png") 0 0 no-repeat;
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/hsb-colorpicker.png") 1x, url("../img/hsbcolorpicker/hsb-colorpicker@2x.png") 2x);
+}
+
+.cmp-hsb-colorpicker-cnt-root {
+    display: inline-block;
+    width: 10px;
+    height: 196px;
+    margin: 0 8px;
+}
+
+.cmp-hsb-colorpicker-cnt-sat {
+    width: 10px;
+    height: 100%;
+    position: relative;
+    border: 1px solid #C4C4C4;
+    background: url("../img/hsbcolorpicker/hsb-colorpicker.png") -195px 0 no-repeat;
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/hsb-colorpicker.png") 1x, url("../img/hsbcolorpicker/hsb-colorpicker@2x.png") 2x);
+}
+
+.cmp-hsb-colorpicker-cnt-hb-arrow {
+    width: 9px;
+    height: 9px;
+    margin: -4px;
+    position: absolute;
+    background: url("../img/hsbcolorpicker/hsb-colorpicker.png") 0 -196px no-repeat;
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/hsb-colorpicker.png") 1x, url("../img/hsbcolorpicker/hsb-colorpicker@2x.png") 2x);
+}
+
+.cmp-hsb-colorpicker-cnt-sat-arrow {
+    width: 14px;
+    height: 9px;
+    margin: -4px -3px;
+    position: absolute;
+    background: url("../img/hsbcolorpicker/hsb-colorpicker.png") -11px -196px no-repeat;
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/hsb-colorpicker.png") 1x, url("../img/hsbcolorpicker/hsb-colorpicker@2x.png") 2x);
+}
+
+.cmp-hsb-colorpicker-empty-color {
+    color: #464646;
+    height: 16px;
+    margin: 5px 0;
+}
+
+.cmp-hsb-colorpicker-empty-color:hover {
+    cursor: pointer;
+    background-color: #efefef;
+}
+
+.cmp-hsb-colorpicker-empty-color:active {
+    background-color: #cecece;
+}
+
+.cmp-hsb-colorpicker-empty-color:before {
+    content: "";
+    background: url("../img/hsbcolorpicker/hsb-colorpicker.png") -26px -196px no-repeat;
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/hsb-colorpicker.png") 1x, url("../img/hsbcolorpicker/hsb-colorpicker@2x.png") 2x);
+    float: left;
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+    margin-top: 1px;
+    border: 1px solid #C4C4C4;
+}

OfficeWeb/apps/common/main/resources/css/jquery.jscrollpane.css

@@ -0,0 +1,144 @@
+.jspArrowUp{
+    background: url("../img/jscrollpane/up.png") no-repeat 0 0;
+background-image: -webkit-image-set(url("../img/jscrollpane/up.png") 1x, url("../img/jscrollpane/up@2x.png") 2x);
+}
+.jspArrowDown{
+    background: url("../img/jscrollpane/down.png") no-repeat 0 -38px;
+background-image: -webkit-image-set(url("../img/jscrollpane/down.png") 1x, url("../img/jscrollpane/down@2x.png") 2x);
+}
+.jspArrowLeft{
+    background: url("../img/jscrollpane/left.png") no-repeat 0 0;
+background-image: -webkit-image-set(url("../img/jscrollpane/left.png") 1x, url("../img/jscrollpane/left@2x.png") 2x);
+}
+.jspArrowRight{
+    background: url("../img/jscrollpane/right.png") no-repeat -38px 0;
+background-image: -webkit-image-set(url("../img/jscrollpane/right.png") 1x, url("../img/jscrollpane/right@2x.png") 2x);
+}
+
+.jspContainer{
+    overflow: hidden;
+    position: relative;
+}
+
+.jspPane{
+    position: absolute;
+}
+
+.jspVerticalBar{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    padding-right: 0;
+    height: 100%;
+    background: transparent;
+}
+
+.jspUndocking .jspVerticalBar{
+    width: 13px;
+    padding-right: 2px;
+}
+
+.jspHorizontalBar{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    background: #DDE2E8;
+}
+
+.jspVerticalBar *,
+.jspHorizontalBar *{
+    margin: 0;
+    padding: 0;
+}
+
+.jspCap{
+    display: none;
+}
+
+.jspHorizontalBar .jspCap
+{
+    float: left;
+}
+
+.jspTrack {
+    background: transparent;
+    position: relative;
+}
+
+.jspDrag {
+    background: #D3D3D3;
+    border-style: solid;
+    border-width: 0px;
+    border-color: #929292;
+    position: relative;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+}
+
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag{
+    float: left;
+    height: 100%;
+}
+
+.jspArrow{
+    text-indent: -20000px;
+    display: block;
+    cursor: pointer;
+}
+
+.jspArrow.jspDisabled{
+    cursor: default;
+}
+
+.jspVerticalBar .jspArrow{
+    height: 10px;
+}
+
+.jspHorizontalBar .jspArrow{
+    width: 10px;
+    float: left;
+    height: 100%;
+}
+
+.jspVerticalBar .jspArrow:focus{
+    outline: none;
+}
+
+.jspCorner{
+    background: #eeeef4;
+    float: left;
+    height: 100%;
+}
+
+/* Yuk! CSS Hack for IE6 3 pixel bug :( */
+* html .jspCorner{
+    margin: 0 -3px 0 0;
+}
+
+.scroll-pane{
+    position:absolute;
+    padding:0;
+    margin:0;
+    width:100%;
+    height:100%;
+    overflow:auto;
+}
+
+.jspCap{
+    display: block;
+    background: #eeeef4;
+}
+
+.jspVerticalBar .jspCap{
+    height: 0;
+}
+
+.jspHorizontalBar .jspCap{
+    width: 0;
+    height: 100%;
+}

OfficeWeb/apps/common/main/resources/css/load-mask.css

@@ -0,0 +1,50 @@
+.cmd-loadmask {
+    z-index: 20001;
+    position: absolute;
+    top: 0; left: 0;
+    width: 300px;
+    padding: 20px;
+    border: none;
+    background-image: none;
+    background-color: rgba(30,30,30,0.7);
+    color: #e3e3e3;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    line-height: 33px;
+}
+
+.cmd-loadmask-image {
+    background-image: url("../img/load-mask/loading.gif");
+    height: 33px;
+    width: 33px;
+    float: left;
+    margin-left: 20px;
+}
+
+.cmd-loadmask-title {
+    font: 13px arial;
+    margin: 0 20px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.cmd-loadmask .cmd-loadmask-pwd-ct {
+    text-align: center;
+    margin-top: 19px;
+    margin-bottom: -7px;
+    padding-top: 11px;
+    border-top: 1px solid rgba(255, 255, 255, 0.4);
+    color: #d4d4d4
+}
+
+.cmd-loadmask .cmd-loadmask-pwd-ct .cmd-loadmask-pwd-by {
+    line-height: 14px;
+    font-size: 10px;
+}
+
+.cmd-loadmask .cmd-loadmask-pwd-ct .cmd-loadmask-pwd-tm {
+    font-size: 18px;
+    line-height: 20px;
+    font-weight: bold;
+}

OfficeWeb/apps/common/main/resources/css/multislider-gradient.css

@@ -0,0 +1,35 @@
+.asc-multi-slider-gradient {
+    height: 35px;
+}
+
+.asc-multi-slider-gradient .x-slider-horz, .asc-multi-slider-gradient .x-slider-horz .x-slider-end {
+    background: transparent no-repeat;
+}
+
+.asc-multi-slider-gradient .x-slider-horz .x-slider-inner {
+    background: #ededed; /* Old browsers */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
+    background: -moz-linear-gradient(left, #000000 0%,#ffffff 100%); /* FF3.6+ */
+    background: -o-linear-gradient(left,  #000000 0%,#ffffff 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left,  #000000 0%,#ffffff 100%); /* IE10+ */
+    background: linear-gradient(to right,  #000000 0%,#ffffff 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
+
+    background-position: 0 0;
+    border: 1px solid rgba(162, 162, 162, 1);
+    height: 21px;
+}
+
+.asc-multi-slider-gradient .x-slider-thumb {
+    top: 18px;
+}
+
+.asc-multi-slider-gradient .x-slider-horz .x-slider-thumb {
+    background-image:  url("../img/controls/slider-thumb-multi.png");
+    background-image: -webkit-image-set(url("../img/controls/slider-thumb-multi.png") 1x, url("../img/controls/slider-thumb-multi@2x.png") 2x);
+}
+
+.asc-multi-slider-gradient .x-slider-thumb.active-thumb {
+    background-position: -28px -30px;
+}

OfficeWeb/apps/common/main/resources/css/participantspanel.css

@@ -0,0 +1,23 @@
+.asc-statusinfo-text-btn button {
+    width: auto !important;
+}
+
+.asc-statusinfo-text-btn span.x-btn-inner {
+    font-weight: bold;
+    font-size: 11px;
+    font-family: Helvetica, Arial, Verdana, sans-serif;
+    color: #666666 !important;
+    text-shadow: #d3d3d3 0 1px 0;
+}
+
+.asc-statusinfo-text-btn.x-btn-default-small-pressed{
+    padding: 0;
+    border: 1px solid rgba(0, 0, 0, 0) !important;
+    background: transparent !important;
+    box-shadow: none;
+    -moz-box-shadow: none;
+}
+
+.icon-statusinfo-users {
+    background-image: url(../img/participantspanel/users.png);
+}

OfficeWeb/apps/common/main/resources/css/searchdialog.css

@@ -0,0 +1,21 @@
+.x-btn.dlg-search {
+    text-align: center;
+}
+
+.asc-btn-search {
+    background-image: url('../img/searchdialog/btns-search.png');
+    background-image: -webkit-image-set(url("../img/searchdialog/btns-search.png") 1x, url("../img/searchdialog/btns-search@2x.png") 2x);
+}
+
+.asc-btn-search.previous                        {background-position: 0 0;}
+.x-btn-over .asc-btn-search.previous            {background-position: -16px  0;}
+.x-btn-pressed .asc-btn-search.previous         {background-position: -32px  0;}
+.x-btn-menu-active .asc-btn-search.previous     {background-position: -32px  0;}
+.x-btn-disabled .asc-btn-search.previous        {background-position: -48px  0;}
+
+.asc-btn-search.next                            {background-position: 0 -16px;}
+.x-btn-over .asc-btn-search.next                {background-position: -16px  -16px;}
+.x-btn-pressed .asc-btn-search.next             {background-position: -32px  -16px;}
+.x-btn-menu-active .asc-btn-search.next         {background-position: -32px  -16px;}
+.x-btn-disabled .asc-btn-search.next            {background-position: -48px  -16px;}
+

OfficeWeb/apps/common/main/resources/css/searchfield.css

@@ -0,0 +1,48 @@
+/* search field */
+.common-searchfield {
+    border: 1px solid #AFAFAF;
+    background: url(../img/controls/text-bg.gif);
+}
+
+.common-searchfield .x-form-text {
+    /*height: 18px;*/
+    border-radius: 0px;
+    border: none;
+    /*background-image: none;*/
+}
+
+.common-searchfield .x-btn-default-small button {
+    width: 16px !important;
+    height: 16px !important;
+    line-height: 16px !important;
+}
+
+.common-searchfield .x-btn-default-small,
+        .common-searchfield .x-btn-default-small-pressed {
+    border: none;
+    background: none !important;
+}
+
+.search-btn-start-icon, .search-btn-clear-icon, .search-btn-stop-icon {
+    background-image: url(../img/searchfield/search.png);
+    background-image: -webkit-image-set(url(../img/searchfield/search.png) 1x, url(../img/searchfield/search@2x.png) 2x);
+}
+
+.search-btn-start-icon      {    background-position: 0 -64px;}
+.search-btn-clear-icon      {    background-position: 0 0;}
+.x-btn-pressed .search-btn-clear-icon {    background-position: 0 -16px;}
+.search-btn-stop-icon                 {    background-position: 0 -32px;}
+.x-btn-pressed .search-btn-stop-icon  {    background-position: 0 -48px;}
+
+.x-btn-pressed .search-btn-start-icon {
+    background-image: url(../img/searchfield/search-progress.gif);
+    background-position: center;
+}
+
+.common-searchfield .x-form-text::-ms-clear {
+    display: none;
+}
+
+.common-searchfield .x-field {
+    margin: 0;
+}

OfficeWeb/apps/common/main/resources/css/synchronize-tip.css

@@ -0,0 +1,101 @@
+.synch-tip-root {
+    position: absolute;
+    z-index: 110;
+    margin: -32px 0 0 15px;
+}
+
+.asc-synchronizetip {
+    border-radius: 5px;
+    background-color: #fcfed7;
+    overflow: visible;
+
+        -moz-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+     -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+             box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+
+    font-size: 11px !important;
+}
+
+.asc-synchronizetip .x-box-inner {
+    overflow: visible;
+}
+
+.asc-synchronizetip .tip-arrow {
+    position: absolute;
+    overflow: hidden;
+    left: -20px;
+    top: 20px;
+    width: 20px;
+    height: 30px;
+}
+
+.asc-synchronizetip .tip-arrow:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 13px;
+    background-color: #fcfed7;
+    width: 15px;
+    height: 15px;
+
+        -moz-transform: rotate(45deg);
+         -ms-transform: rotate(45deg);
+     -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+             transform: rotate(45deg);
+
+       -moz-box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
+}
+
+.asc-synchronizetip .show-link {
+    margin-left: 15px;
+    padding: 10px 0 15px 0;
+}
+
+.show-link label {
+    border-bottom: 1px dotted #445799;
+    color: #445799;
+    cursor: pointer;
+}
+
+.asc-synchronizetip .x-btn-default-small{
+    padding: 0;
+    border: 1px solid rgba(0, 0, 0, 0);
+    background: transparent;
+    box-shadow: none;
+    -moz-box-shadow: none;
+}
+
+.asc-synchronizetip .x-btn-default-small button {
+    width: 16px !important;
+    height: 16px !important;
+    line-height: 16px !important;
+}
+
+.asc-synchronizetip .x-btn-default-small-pressed {
+    border: 1px solid rgba(0, 0, 0, 0)!important;
+    background: none !important;
+    box-shadow: none !important;
+}
+
+.btn-close-tip {
+    margin: 8px;
+    height: 18px !important;
+}
+
+.asc-synchronizetip .x-btn-default-small-icon .icon-close-tip{
+    width: 16px !important;
+    height: 16px !important;
+}
+
+.icon-close-tip {
+    background-image: url(../img/synchronizetip/but-close.png);
+    background-image: -webkit-image-set(url(../img/synchronizetip/but-close.png) 1x, url(../img/synchronizetip/but-close@2x.png) 2x);
+    background-position: 0 0;
+}
+
+.x-btn-over .icon-close-tip,
+.x-btn-pressed .icon-close-tip      {background-position: 0 -16px;}
+

OfficeWeb/apps/common/main/resources/css/themecolorpalette.css

@@ -0,0 +1,51 @@
+.cmp-theme-colorpalette.x-color-picker {
+    margin: 0 !important;
+}
+
+.cmp-theme-colorpalette.x-color-picker em span{
+    height: 12px;
+    width: 12px;
+}
+
+.cmp-theme-colorpalette.x-color-picker em {
+    border: none;
+}
+
+.cmp-theme-colorpalette.x-color-picker a {
+    padding: 0;
+}
+
+.cmp-theme-colorpalette.x-color-picker a:hover{
+    border-color: #000;
+    background-color: #000;
+}
+
+.cmp-theme-colorpalette.x-color-picker a.x-color-picker-selected {
+    border-color: #000;
+    background-color: #000;
+}
+
+.cmp-theme-colorpalette .dynamic-empty-color em span {
+    border:solid 1px #C0C0C0;
+    background:#ffffff
+}
+
+.cmp-theme-colorpalette.x-color-picker a:hover em span,
+.cmp-theme-colorpalette.x-color-picker .color-transparent.x-color-picker-selected em span {
+    border:none;
+}
+
+.cmp-theme-colorpalette .color-transparent {
+    background-image: url(../img/themecolorpalette/nocolor.png);
+background-image: -webkit-image-set(url("../img/themecolorpalette/nocolor.png") 1x, url("../img/themecolorpalette/nocolor@2x.png") 2x);
+}
+
+.cmp-theme-colorpalette .color-transparent em span {
+    border:solid 1px #C0C0C0;
+}
+
+.common-extendedcolordialog #field-start-color.color-transparent {
+    background-image: url(../img/hsbcolorpicker/transparent-color.png);
+background-image: -webkit-image-set(url("../img/hsbcolorpicker/transparent-color.png") 1x, url("../img/hsbcolorpicker/transparent-color@2x.png") 2x);
+    background-size: cover;
+}