init repo

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"
+});