Merge branch 'feature/mobile-apps-on-reactjs' into feature/mobile-apps-on-reactjs-statusbar

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

@@ -60,12 +60,12 @@ class CommentsController extends Component {
             api.asc_registerCallback('asc_onChangeCommentData', this.changeCommentData.bind(this));
             api.asc_registerCallback('asc_onShowComment', this.changeShowComments.bind(this));
             api.asc_registerCallback('asc_onHideComment', this.hideComments.bind(this));
-        });
 
-        Common.Notifications.on('comments:filterchange', this.onFilterChange.bind(this)); // for sse
+            if (window.editorType === 'sse') {
-
+                api.asc_registerCallback('asc_onActiveSheetChanged', this.onApiActiveSheetChanged.bind(this));
-        Common.Notifications.on('configOptionsFill', () => {
+                Common.Notifications.on('comments:filterchange', this.onFilterChange.bind(this));
-            this.curUserId = this.appOptions.user.id;
+                Common.Notifications.on('sheet:active', this.onApiActiveSheetChanged.bind(this));
+            }
         });
 
         Common.Notifications.on('document:ready', () => {
@@ -77,8 +77,13 @@ class CommentsController extends Component {
                 isLiveCommenting ? api.asc_showComments(resolved) : api.asc_hideComments();
                 /** coauthoring end **/
             }
+
+            this.curUserId = this.props.users.currentUser.asc_getIdOriginal();
         });
     }
+    onApiActiveSheetChanged (index) {
+        this.onFilterChange(['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)]);
+    }
     addComment (id, data) {
         const comment = this.readSDKComment(id, data);
         if (comment) {
@@ -267,10 +272,7 @@ class AddCommentController extends Component {
             !!comment.asc_putDocumentFlag && comment.asc_putDocumentFlag(documentFlag);
 
             api.asc_addComment(comment);
-
-            return true;
         }
-        return false;
     }
     render() {
         return(
@@ -311,10 +313,10 @@ class EditCommentController extends Component {
                 ascComment.asc_putDocumentFlag(comment.unattached);
             }
 
-            var reply = comment.replies;
+            const reply = comment.replies;
             if (reply && reply.length > 0) {
                 reply.forEach((reply) => {
-                    var addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+                    const addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
                     if (addReply) {
                         addReply.asc_putText(reply.reply);
                         addReply.asc_putTime(utcDateToString(new Date(reply.time)));

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

@@ -7,7 +7,6 @@ export class storeComments {
             collectionComments: observable,
             groupCollectionComments: observable,
             filter: observable,
-            groupCollectionFilter: observable,
 
             showComments: observable,
             changeShowComment: action,
@@ -17,7 +16,7 @@ export class storeComments {
             changeComment: action,
             changeFilter: action,
 
-            sortComments: computed,
+            groupCollectionFilter: computed,
 
             isOpenEditComment: observable,
             openEditComment: action,
@@ -31,7 +30,6 @@ export class storeComments {
     groupCollectionComments = [];
 
     filter = undefined;
-    groupCollectionFilter = []; // for sse
 
     showComments = [];
     changeShowComment (uid) {
@@ -42,54 +40,16 @@ export class storeComments {
     }
 
     addComment (comment) {
-        comment.groupName ? this.addCommentToGroupCollection(comment) : this.addCommentToCollection(comment);
+        comment.groupName ? this.groupCollectionComments.push(comment) : this.collectionComments.push(comment);
-    }
-
-    addCommentToCollection (comment) {
-        this.collectionComments.push(comment);
-    }
-
-    addCommentToGroupCollection (comment) {
-        const groupName = comment.groupName;
-        if (!this.groupCollectionComments[groupName]) {
-            this.groupCollectionComments[groupName] = [];
-        }
-        this.groupCollectionComments[groupname].push(comment);
-        if (this.filter.indexOf(groupname) !== -1) {
-            this.groupCollectionFilter.push(comment);
-        }
     }
 
     removeComment (id) {
-        if (this.collectionComments.length > 0) {
+        const collection = this.collectionComments.length > 0 ? this.collectionComments : this.groupCollectionComments;
-            this.removeCommentFromCollection(id);
+        const index = collection.findIndex((comment) => {
-        } else {
-            this.removeCommentFromGroups(id);
-        }
-    }
-
-    removeCommentFromCollection (id) {
-        const index = this.collectionComments.findIndex((comment) => {
             return comment.uid === id;
         });
         if (index !== -1) {
-            this.collectionComments.splice(index, 1);
+            collection.splice(index, 1);
-        }
-    }
-
-    removeCommentFromGroups (id) {
-        for (let name in this.groupCollectionComments) {
-            const store = this.groupCollectionComments[name];
-            const comment = store.find((item) => {
-                return item.uid === id;
-            });
-            const index = store.indexOf(comment);
-            if (index !== -1) {
-                this.groupCollectionComments[name].splice(index, 1);
-                if (this.filter.indexOf(name) !== -1) {
-                    this.groupCollectionFilter.splice(this.groupCollectionFilter.indexOf(comment), 1);
-                }
-            }
         }
     }
 
@@ -111,43 +71,28 @@ export class storeComments {
     }
 
     changeFilter (filter) {
-        let comments = [];
         this.filter = filter;
-        filter.forEach((item) => {
-            if (!this.groupCollectionComments[item])
-                this.groupCollectionComments[item] = [];
-            comments = comments.concat(this.groupCollectionComments[item]);
-        });
-        this.groupCollectionFilter = comments;
     }
 
     findComment (id) {
-        let comment = this.collectionComments.find((item) => {
+        const collection = this.collectionComments.length > 0 ? this.collectionComments : this.groupCollectionComments;
+        let comment = collection.find((item) => {
             return item.uid === id;
         });
-        if (!comment) {
-            comment = this.findCommentInGroup(id);
-        }
         return comment;
     }
 
-    findCommentInGroup (id) {
+    get groupCollectionFilter () {
-        let model;
+        if (this.filter && this.groupCollectionComments.length > 0) {
-        for (let name in this.groupCollectionComments) {
+            const arr = [];
-            const store = this.groupCollectionComments[name];
+            this.filter.forEach((groupName) => {
-            const id = id.isArray() ? id[0] : id;
+                this.groupCollectionComments.forEach((comment) => {
-            model = store.find((item) => {
+                    if (comment.groupName === groupName) {
-                return item.uid === id;
+                        arr.push(comment);
+                    }
+                });
             });
-            if (model) return model;
+            return arr;
-        }
-        return model;
-    }
-
-    get sortComments () {
-        const comments = (this.groupCollectionFilter.length !== 0) ? this.groupCollectionFilter : (this.collectionComments.length !== 0 ? this.collectionComments : false);
-        if (comments.length > 0) {
-            return  [...comments].sort((a, b) => a.time > b.time ? 1 : -1);
         }
         return false;
     }

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

@@ -3,12 +3,12 @@ import { observer, inject } from "mobx-react";
 import { Page, Navbar, Link } from "framework7-react";
 import { useTranslation } from "react-i18next";
 
-const PageSpreadsheetAbout = props => {
+const PageAbout = props => {
     const { t } = useTranslation();
-    const _t = t("View.Settings", { returnObjects: true });
+    const _t = t("About", { returnObjects: true });
-    const storeAppOptions = props.storeAppOptions;
+    const store = props.storeAppOptions;
-    const isCanBranding = storeAppOptions.canBranding;
+    const isCanBranding = store.canBranding;
-    const licInfo = isCanBranding ? storeAppOptions.customization : null;
+    const licInfo = isCanBranding ? store.customization : null;
     const customer = licInfo ? licInfo.customer : null;
     const nameCustomer = customer ? customer.name : null;
     const mailCustomer = customer ? customer.mail : null;
@@ -17,27 +17,32 @@ const PageSpreadsheetAbout = props => {
     const infoCustomer = customer ? customer.info : null;
     const logoCustomer = customer ? customer.logo : null;
 
-    // console.log(storeAppOptions);
+    const publisherUrl = __PUBLISHER_URL__,
-    // console.log(isCanBranding);
+        publisherPrintUrl = publisherUrl.replace(/https?:\/{2}|\/$/,"");
+    
+    const editors = {
+        de: 'DOCUMENT EDITOR',
+        pe: 'PRESENTATION EDITOR',
+        sse: 'SPREADSHEET EDITOR'
+    };
+
+    const nameEditor = editors[editorType];
 
     return (
         <Page className="about">
             <Navbar title={_t.textAbout} backLink={_t.textBack} />
-            {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? 
+            {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? (
                 <Fragment>
                     <div className="content-block">
-                        {/* {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? null : (
-                            <i className="logo"></i>
-                        )} */}
                         {logoCustomer && logoCustomer.length ? (
                             <div id="settings-about-logo" className="settings-about-logo">
-                                <img src={logoCustomer} />
+                                <img src={logoCustomer} alt="" />
                             </div>
                         ) : null}
                     </div>
                     <div className="content-block">
-                        <h3>SPREADSHEET EDITOR</h3>
+                        <h3>{nameEditor}</h3>
-                        <h3>{_t.textVersion} 6.1.1</h3>
+                        <h3>{_t.textVersion} {__PRODUCT_VERSION__}</h3>
                     </div>
                     <div className="content-block">
                         {nameCustomer && nameCustomer.length ? (
@@ -45,20 +50,16 @@ const PageSpreadsheetAbout = props => {
                         ) : null}
                         {addressCustomer && addressCustomer.length ? (
                             <p>
-                                <label>{_t.textAddress}</label>
+                                <label>{_t.textAddress}:</label>
                                 <Link id="settings-about-address" className="external">{addressCustomer}</Link>
                             </p>
                         ) : null}
                         {mailCustomer && mailCustomer.length ? (
                             <p>
-                                <label>{_t.textEmail}</label>
+                                <label>{_t.textEmail}:</label>
                                 <Link id="settings-about-email" className="external" target="_blank" href={"mailto:"+mailCustomer}>{mailCustomer}</Link>
                             </p>
                         ) : null}
-                        <p>
-                            <label>{_t.textTel}</label>
-                            <Link id="settings-about-tel" className="external" target="_blank" href="tel:+37163399867">+371 633-99867</Link>
-                        </p>
                         {urlCustomer && urlCustomer.length ? (
                             <p>
                                 <Link id="settings-about-url" className="external" target="_blank" 
@@ -78,21 +79,45 @@ const PageSpreadsheetAbout = props => {
                         <p>
                             <label>{_t.textPoweredBy}</label>
                         </p>
-                        <h3 className="vendor">Ascensio System SIA</h3>
+                        <h3 className="vendor">{__PUBLISHER_NAME__}</h3>
                         <p>
-                            <Link className="external" target="_blank" href="www.onlyoffice.com">www.onlyoffice.com</Link>
+                            <Link className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</Link>
                         </p>
                     </div>
-                </Fragment> :
+                </Fragment>
+            ) : (
                 <Fragment>
                     <div className="content-block">
-                        <i className="logo"></i>
+                        <div className="logo"></div>
                     </div>
-                </Fragment>}
+                    <div className="content-block">
+                        <h3>{nameEditor}</h3>
+                        <h3>{_t.textVersion} {__PRODUCT_VERSION__}</h3>
+                    </div>
+                    <div className="content-block">
+                        <h3 id="settings-about-name" className="vendor">{__PUBLISHER_NAME__}</h3>
+                        <p>
+                            <label>{_t.textAddress}:</label>
+                            <a id="settings-about-address" className="external">{__PUBLISHER_ADDRESS__}</a>
+                        </p>
+                        <p>
+                            <label>{_t.textEmail}:</label>
+                            <a id="settings-about-email" className="external" href={`mailto:${__SUPPORT_EMAIL__}`}>{__SUPPORT_EMAIL__}</a>
+                        </p>
+                        <p>
+                            <label>{_t.textTel}:</label>
+                            <a id="settings-about-tel" className="external" href={`tel:${__PUBLISHER_PHONE__}`}>{__PUBLISHER_PHONE__}</a>
+                        </p>
+                        <p>
+                            <a id="settings-about-url" className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</a>
+                        </p>
+                    </div>
+                </Fragment>
+            )}
         </Page>
     );
 };
 
-const SpreadsheetAbout = inject("storeAppOptions")(observer(PageSpreadsheetAbout));
+const About = inject("storeAppOptions")(observer(PageAbout));
 
-export default SpreadsheetAbout;
+export default About;

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

@@ -31,18 +31,21 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
             <Navbar>
                 <NavLeft>
                     <Link onClick={() => {
-                        props.closeAddComment();
                         f7.popup.close('.add-comment-popup');
+                        setTimeout(() => {
+                            props.closeAddComment();
+                        }, 500)
                     }}>{_t.textCancel}</Link>
                 </NavLeft>
                 <NavTitle>{_t.textAddComment}</NavTitle>
                 <NavRight>
                     <Link className={stateText.length === 0 && 'disabled'}
                           onClick={() => {
-                              if (props.onAddNewComment(stateText, false)) {
+                              f7.popup.close('.add-comment-popup');
+                              setTimeout(() => {
                                   props.closeAddComment();
-                                  f7.popup.close('.add-comment-popup');
+                                  props.onAddNewComment(stateText, false)
-                              }
+                              }, 500);
                     }}>
                         {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
                     </Link>
@@ -104,9 +107,10 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
                     const done = document.getElementById('comment-done');
                     done.addEventListener('click', () => {
                         const value = document.getElementById('comment-text').value;
-                        if (value.length > 0 && props.onAddNewComment(value, false)) {
+                        if (value.length > 0) {
                             f7.dialog.close();
                             props.closeAddComment();
+                            props.onAddNewComment(value, false);
                         }
                     });
                     const area = document.getElementById('comment-text');
@@ -193,16 +197,20 @@ const EditCommentPopup = inject("storeComments")(observer(({storeComments, comme
                 <NavLeft>
                     <Link onClick={() => {
                         f7.popup.close('.edit-comment-popup');
-                        storeComments.openEditComment(false);
+                        setTimeout(() => {
+                            storeComments.openEditComment(false);
+                        }, 500);
                     }}>{_t.textCancel}</Link>
                 </NavLeft>
                 <NavTitle>{_t.textEditComment}</NavTitle>
                 <NavRight>
                     <Link className={stateText.length === 0 && 'disabled'}
                           onClick={() => {
-                              onEditComment(comment, stateText);
                               f7.popup.close('.edit-comment-popup');
-                              storeComments.openEditComment(false);
+                              setTimeout(() => {
+                                  storeComments.openEditComment(false);
+                                  onEditComment(comment, stateText);
+                              }, 500);
                           }}
                     >
                         {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
@@ -313,17 +321,21 @@ const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo
             <Navbar>
                 <NavLeft>
                     <Link onClick={() => {
-                        storeComments.openAddReply(false);
                         f7.popup.close('.add-reply-popup');
+                        setTimeout(() => {
+                            storeComments.openAddReply(false);
+                        }, 500);
                     }}>{_t.textCancel}</Link>
                 </NavLeft>
                 <NavTitle>{_t.textAddReply}</NavTitle>
                 <NavRight>
                     <Link className={stateText.length === 0 && 'disabled'}
                           onClick={() => {
-                              onAddReply(comment, stateText);
-                              storeComments.openAddReply(false);
                               f7.popup.close('.add-reply-popup');
+                              setTimeout(() => {
+                                  storeComments.openAddReply(false);
+                                  onAddReply(comment, stateText);
+                              }, 500);
                           }}>
                         {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
                     </Link>
@@ -429,16 +441,20 @@ const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment
                 <NavLeft>
                     <Link onClick={() => {
                         f7.popup.close('.edit-reply-popup');
-                        storeComments.openEditReply(false);
+                        setTimeout(() => {
+                            storeComments.openEditReply(false);
+                        }, 500);
                     }}>{_t.textCancel}</Link>
                 </NavLeft>
                 <NavTitle>{_t.textEditReply}</NavTitle>
                 <NavRight>
                     <Link className={stateText.length === 0 && 'disabled'}
                           onClick={() => {
-                              onEditReply(comment, reply, stateText);
                               f7.popup.close('.edit-reply-popup');
-                              storeComments.openEditReply(false);
+                              setTimeout(() => {
+                                  storeComments.openEditReply(false);
+                                  onEditReply(comment, reply, stateText);
+                              }, 500);
                           }}
                     >
                         {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
@@ -544,7 +560,8 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
     const isAndroid = Device.android;
 
     const viewMode = !storeAppOptions.canComments;
-    const comments = storeComments.sortComments;
+    const comments = storeComments.groupCollectionFilter || storeComments.collectionComments;
+    const sortComments = comments.length > 0 ? [...comments].sort((a, b) => a.time > b.time ? 1 : -1) : null;
 
     const [clickComment, setComment] = useState();
     const [commentActionsOpened, openActionComment] = useState(false);
@@ -555,10 +572,10 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
     return (
         <Page>
             <Navbar title={_t.textComments} backLink={_t.textBack}/>
-            {!comments ?
+            {!sortComments ?
                 <div className='no-comments'>{_t.textNoComments}</div> :
                 <List className='comment-list'>
-                    {comments.map((comment, indexComment) => {
+                    {sortComments.map((comment, indexComment) => {
                         return (
                             <ListItem key={`comment-${indexComment}`}>
                                 <div slot='header' className='comment-header'>

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

@@ -391,6 +391,10 @@
         }
     }
 
+    .content-block {
+        color: @blockTitleColor;
+    }
+
     .dataview, #add-table, #add-shape, #add-slide, #add-chart {
         &.page-content, .page-content {
             background-color: @white;

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

@@ -84,6 +84,15 @@
     }
 }
 
+.about {
+    .content-block {
+        margin: 0 auto 15px;
+        a {
+            color: @black;
+        }
+    }
+}
+
 .content-block {
     margin: 32px 0;
     padding: 0 16px;

apps/documenteditor/mobile/locale/en.json

@@ -386,5 +386,14 @@
     "textStartAt": "Start At",
     "textLocation": "Location",
     "textFormat": "Format"
+  },
+  "About": {
+    "textAbout": "About",
+    "textVersion": "Version",
+    "textEmail": "Email",
+    "textAddress": "Address",
+    "textTel": "Tel",
+    "textPoweredBy": "Powered By",
+    "textBack": "Back"
   }
 }

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

@@ -13,6 +13,8 @@ import {
     ViewCommentsController
 } from "../../../../common/mobile/lib/controller/collaboration/Comments";
 
+import patch from '../lib/patch'
+
 @inject(
     "storeAppOptions",
     "storeDocumentSettings",
@@ -56,6 +58,7 @@ class MainController extends Component {
             };
 
             const loadConfig = data => {
+                patch.isSupportEditFeature();
                 console.log('load config');
 
                 this.editorConfig = Object.assign({}, this.editorConfig, data.config);

apps/documenteditor/mobile/src/lib/patch.jsx

@@ -0,0 +1,10 @@
+
+const patch = () => {
+    return null
+};
+
+patch.isSupportEditFeature = () => {
+    return false
+};
+
+export default patch;

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

@@ -11,6 +11,7 @@ import { DownloadController } from "../../controller/settings/Download";
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
 import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
 import { MacrosSettings } from "./ApplicationSettings";
+import About from '../../../../../common/mobile/lib/view/About';
 
 const routes = [
     {
@@ -48,6 +49,10 @@ const routes = [
     {
         path: '/color-schemes/',
         component: DocumentColorSchemes
+    },
+    {
+        path: '/about/',
+        component: About
     }
 ];
 
@@ -151,7 +156,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
                         </ListItem>
                     }
                     {_canAbout &&
-                        <ListItem title={_t.textAbout} link="#">
+                        <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
                             <Icon slot="media" icon="icon-about"></Icon>
                         </ListItem>
                     }

apps/presentationeditor/mobile/locale/en.json

@@ -303,5 +303,14 @@
       "textEditComment": "Edit Comment",
       "textEditReply": "Edit Reply"
     }
+  },
+  "About": {
+    "textAbout": "About",
+    "textVersion": "Version",
+    "textEmail": "Email",
+    "textAddress": "Address",
+    "textTel": "Tel",
+    "textPoweredBy": "Powered By",
+    "textBack": "Back"
   }
 }

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

@@ -157,7 +157,7 @@ class ContextMenu extends ContextMenuController {
         const { t } = this.props;
         const _t = t("ContextMenu", { returnObjects: true });
 
-        const { isEdit, canViewComments, canReview, isDisconnected } = this.props;
+        const { isEdit, canViewComments, isDisconnected } = this.props;
 
         const api = Common.EditorApi.get();
         const stack = api.getSelectedElements();
@@ -264,7 +264,7 @@ class ContextMenu extends ContextMenuController {
                     });
                 }
 
-                var hideAddComment = (isText && isChart) || api.can_AddQuotedComment() === false || !canViewComments;
+                const hideAddComment = (isText && isChart) || api.can_AddQuotedComment() === false || !canViewComments;
                 if (!hideAddComment) {
                     itemsText.push({
                         caption: _t.menuAddComment,

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

@@ -15,6 +15,7 @@ import {
 class MainController extends Component {
     constructor(props) {
         super(props)
+        window.editorType = 'pe';
     }
 
     initSdk() {

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

@@ -1,17 +0,0 @@
-import React, { Component } from "react";
-import PresentationAbout from "../../view/settings/PresentationAbout";
-
-class PresentationAboutController extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <PresentationAbout />
-        );
-    }
-}
-
-
-export default PresentationAboutController;

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

@@ -4,12 +4,14 @@ export class storeAppOptions {
     constructor() {
         makeObservable(this, {
             isEdit: observable,
+            canViewComments: observable,
             setConfigOptions: action,
             setPermissionOptions: action
         });
     }
 
     isEdit = false;
+    canViewComments = false;
     config = {};
 
     setConfigOptions (config) {

apps/presentationeditor/mobile/src/view/settings/PresentationAbout.jsx

@@ -1,111 +0,0 @@
-import React, { Fragment } from 'react';
-import { observer, inject } from "mobx-react";
-import { Page, Navbar, Link } from "framework7-react";
-import { useTranslation } from "react-i18next";
-
-const PagePresentationAbout = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Settings", { returnObjects: true });
-    const store = props.storeAppOptions;
-    const isCanBranding = store.canBranding;
-    const licInfo = isCanBranding ? store.customization : null;
-    const customer = licInfo ? licInfo.customer : null;
-    const nameCustomer = customer ? customer.name : null;
-    const mailCustomer = customer ? customer.mail : null;
-    const addressCustomer = customer ? customer.address : null;
-    const urlCustomer = customer ? customer.www : null;
-    const infoCustomer = customer ? customer.info : null;
-    const logoCustomer = customer ? customer.logo : null;
-
-    const publisherUrl = __PUBLISHER_URL__,
-        publisherPrintUrl = publisherUrl.replace(/https?:\/{2}|\/$/,"");
-    return (
-        <Page className="about">
-            <Navbar title={_t.textAbout} backLink={_t.textBack} />
-            <div className="content-block">
-                {licInfo && typeof licInfo == 'object' && typeof(customer)=='object' ? null : (
-                    <i className="logo"></i>
-                )}
-                {logoCustomer && logoCustomer.length ? (
-                    <div id="settings-about-logo" className="settings-about-logo">
-                        <img src={logoCustomer} />
-                    </div>
-                ) : null}
-            </div>
-            <div className="content-block">
-                <h3>PRESENTATION EDITOR</h3>
-                <h3>{_t.textVersion} {__PRODUCT_VERSION__}</h3>
-            </div>
-            <div className="content-block">
-                <p>
-                    <label>{_t.textAddress}</label>
-                    <a id="settings-about-address" className="external">{__PUBLISHER_ADDRESS__}</a>
-                </p>
-                <p>
-                    <label>{_t.textEmail}</label>
-                    <a id="settings-about-email" className="external" href={`mailto:${__SUPPORT_EMAIL__}`}>{__SUPPORT_EMAIL__}</a>
-                </p>
-                <p>
-                    <label>{_t.textTel}</label>
-                    <a id="settings-about-tel" className="external" href={`tel:${__PUBLISHER_PHONE__}`}>{__PUBLISHER_PHONE__}</a>
-                </p>
-                <p>
-                    <a id="settings-about-url" className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</a>
-                </p>
-                {/*<p><label id="settings-about-info" style="display: none;"></label></p>*/}
-            </div>
-            <div className="content-block">
-                {nameCustomer && nameCustomer.length ? (
-                    <h3 id="settings-about-name" className="vendor">{nameCustomer}</h3>
-                ) : null}
-                {addressCustomer && addressCustomer.length ? (
-                    <p>
-                        <label>{_t.textAddress}</label>
-                        <Link id="settings-about-address" className="external">{addressCustomer}</Link>
-                    </p>
-                ) : null}
-                {mailCustomer && mailCustomer.length ? (
-                    <p>
-                        <label>{_t.textEmail}</label>
-                        <Link id="settings-about-email" className="external" target="_blank" href={"mailto:"+mailCustomer}>{mailCustomer}</Link>
-                    </p>
-                ) : null}
-                {licInfo && typeof licInfo == 'object' && typeof(customer)=='object' ? null : (
-                    <p>
-                        <label>{_t.textTel}</label>
-                        <Link id="settings-about-tel" className="external" target="_blank" href="tel:+37163399867">+371 633-99867</Link>
-                    </p>
-                )}
-                {urlCustomer && urlCustomer.length ? (
-                    <p>
-                        <Link id="settings-about-url" className="external" target="_blank" 
-                            href={!/^https?:\/{2}/i.test(urlCustomer) ? "http:\/\/" : '' + urlCustomer}>
-                            {urlCustomer}
-                        </Link>
-                    </p>
-                ) : null} 
-                {infoCustomer && infoCustomer.length ? (
-                    <p>
-                        <label id="settings-about-info">{infoCustomer}</label>
-                    </p>
-                ) : null}
-            </div>
-            {licInfo && typeof licInfo == 'object' && typeof(customer)=='object' ? (
-                <div className="content-block" id="settings-about-licensor">
-                    <div className="content-block-inner"></div>
-                    <p>
-                        <label>{_t.textPoweredBy}</label>
-                    </p>
-                    <h3 className="vendor">Ascensio System SIA</h3>
-                    <p>
-                        <Link className="external" target="_blank" href="www.onlyoffice.com">www.onlyoffice.com</Link>
-                    </p>
-                </div>
-            ) : null}
-        </Page>
-    );
-};
-
-const PresentationAbout = inject("storeAppOptions")(observer(PagePresentationAbout));
-
-export default PresentationAbout;

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -9,7 +9,8 @@ import DownloadController from "../../controller/settings/Download";
 import PresentationInfoController from "../../controller/settings/PresentationInfo";
 import PresentationSettingsController from "../../controller/settings/PresentationSettings";
 import { PresentationColorSchemes } from "./PresentationSettings";
-import PresentationAboutController from '../../controller/settings/PresentationAbout';
+// import PresentationAboutController from '../../controller/settings/PresentationAbout';
+import About from '../../../../../common/mobile/lib/view/About';
 
 const routes = [
     {
@@ -42,7 +43,7 @@ const routes = [
     },
     {
         path: '/about/',
-        component: PresentationAboutController
+        component: About
     }
     /*{
         path: '/presentation-settings/',

apps/spreadsheeteditor/mobile/locale/en.json

@@ -6,6 +6,29 @@
             "textAnonymous": "Anonymous"
         }
     },
+    "ContextMenu": {
+        "menuViewComment": "View Comment",
+        "menuAddComment": "Add Comment",
+        "menuMore": "More",
+        "menuCancel": "Cancel",
+        "textCopyCutPasteActions": "Copy, Cut and Paste Actions",
+        "errorCopyCutPaste": "Copy, cut and paste actions using the context menu will be performed within the current file only.",
+        "textDoNotShowAgain": "Don't show again",
+        "warnMergeLostData": "Operation can destroy data in the selected cells. Continue?",
+        "notcriticalErrorTitle": "Warning",
+        "menuAddLink": "Add Link",
+        "menuOpenLink": "Open Link",
+        "menuUnfreezePanes": "Unfreeze Panes",
+        "menuFreezePanes": "Freeze Panes",
+        "menuUnwrap": "Unwrap",
+        "menuWrap": "Wrap",
+        "menuUnmerge": "Unmerge",
+        "menuCell": "Cell",
+        "menuShow": "Show",
+        "menuHide": "Hide",
+        "menuEdit": "Edit",
+        "menuDelete": "Delete"
+    },
     "View" : {
         "Add" : {
             "textChart": "Chart",
@@ -46,7 +69,8 @@
             "textInsert": "Insert",
             "textInvalidRange": "ERROR! Invalid cells range",
             "textSortAndFilter": "Sort and Filter",
-            "textFilter": "Filter"
+            "textFilter": "Filter",
+            "textComment": "Comment"
         },
         "Edit" : {
             "textSelectObjectToEdit": "Select object to edit",
@@ -340,7 +364,30 @@
             "textBack": "Back",
             "textUsers": "Users",
             "textEditUser": "Users who are editing the file:",
-            "textComments": "Comments"
+            "textComments": "Comments",
+            "textAddComment": "Add Comment",
+            "textCancel": "Cancel",
+            "textDone": "Done",
+            "textNoComments": "This document doesn't contain comments",
+            "textEdit": "Edit",
+            "textResolve": "Resolve",
+            "textReopen": "Reopen",
+            "textAddReply": "Add Reply",
+            "textDeleteComment": "Delete Comment",
+            "textMessageDeleteComment": "Do you really want to delete this comment?",
+            "textMessageDeleteReply": "Do you really want to delete this reply?",
+            "textDeleteReply": "Delete Reply",
+            "textEditComment": "Edit Comment",
+            "textEditReply": "Edit Reply"
         }
+    },
+    "About": {
+        "textAbout": "About",
+        "textVersion": "Version",
+        "textEmail": "Email",
+        "textAddress": "Address",
+        "textTel": "Tel",
+        "textPoweredBy": "Powered By",
+        "textBack": "Back"
     }
 }

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

@@ -0,0 +1,385 @@
+import React, { useContext } from 'react';
+import { f7 } from 'framework7-react';
+import { inject, observer } from "mobx-react";
+import { withTranslation} from 'react-i18next';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
+
+import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
+import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
+import { Device } from '../../../../common/mobile/utils/device';
+
+@inject ( stores => ({
+    isEdit: stores.storeAppOptions.isEdit,
+    canViewComments: stores.storeAppOptions.canViewComments,
+    users: stores.users,
+    isDisconnected: stores.users.isDisconnected,
+    storeSheets: stores.sheets
+}))
+class ContextMenu extends ContextMenuController {
+    constructor(props) {
+        super(props);
+
+        // console.log('context menu controller created');
+        this.onApiShowComment = this.onApiShowComment.bind(this);
+        this.onApiHideComment = this.onApiHideComment.bind(this);
+        this.getUserName = this.getUserName.bind(this);
+    }
+
+    static closeContextMenu() {
+        f7.popover.close(idContextMenuElement, false);
+    }
+
+    getUserName(id) {
+        const user = this.props.users.searchUserByCurrentId(id);
+        return Common.Utils.UserInfoParser.getParsedName(user.asc_getUserName());
+    }
+
+    componentWillUnmount() {
+        super.componentWillUnmount();
+
+        const api = Common.EditorApi.get();
+        api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
+        api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+    }
+
+
+    onApiShowComment(comments) {
+        this.isComments = comments && comments.length > 0;
+    }
+
+    onApiHideComment() {
+        this.isComments = false;
+    }
+
+    // onMenuClosed() {
+    //     super.onMenuClosed();
+    // }
+
+    onMenuItemClick(action) {
+        const { t } = this.props;
+        const _t = t("ContextMenu", { returnObjects: true });
+
+        super.onMenuItemClick(action);
+
+        const api = Common.EditorApi.get();
+        const info = api.asc_getCellInfo();
+        switch (action) {
+            case 'cut':
+                if (!api.asc_Cut() && !LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
+                    this.showCopyCutPasteModal();
+                }
+                break;
+            case 'copy':
+                if (!api.asc_Copy() && !LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
+                    this.showCopyCutPasteModal();
+                }
+                break;
+            case 'paste':
+                if (!api.asc_Paste() && !LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
+                    this.showCopyCutPasteModal();
+                }
+                break;
+            case 'addcomment':
+                Common.Notifications.trigger('addcomment');
+                break;
+            case 'viewcomment':
+                Common.Notifications.trigger('viewcomment');
+                break;
+            case 'del':
+                api.asc_emptyCells(Asc.c_oAscCleanOptions.All);
+                break;
+            case 'wrap':
+                api.asc_setCellTextWrap(true);
+                break;
+            case 'unwrap':
+                api.asc_setCellTextWrap(false);
+                break;
+            case 'edit':
+                setTimeout(() => {
+                    this.props.openOptions('edit');
+                }, 0);
+                break;
+            case 'merge':
+                if (api.asc_mergeCellsDataLost(Asc.c_oAscMergeOptions.Merge)) {
+                    setTimeout(() => {
+                        f7.dialog.confirm(_t.warnMergeLostData, _t.notcriticalErrorTitle, () => {
+                            api.asc_mergeCells(Asc.c_oAscMergeOptions.Merge);
+                        });
+                    }, 0);
+                } else {
+                    api.asc_mergeCells(Asc.c_oAscMergeOptions.Merge);
+                }
+                break;
+            case 'unmerge':
+                api.asc_mergeCells(Asc.c_oAscMergeOptions.None);
+                break;
+            case 'hide':
+                api[info.asc_getSelectionType() == Asc.c_oAscSelectionType.RangeRow ? 'asc_hideRows' : 'asc_hideColumns']();
+                break;
+            case 'show':
+                api[info.asc_getSelectionType() == Asc.c_oAscSelectionType.RangeRow ? 'asc_showRows' : 'asc_showColumns']();
+                break;
+            case 'addlink':
+                setTimeout(() => {
+                    this.props.openOptions('add', 'link');
+                }, 400)
+                break;
+            case 'openlink':
+                const linkinfo = info.asc_getHyperlink();
+                if ( linkinfo.asc_getType() == Asc.c_oAscHyperlinkType.RangeLink ) {
+                    const nameSheet = linkinfo.asc_getSheet();
+                    const curActiveSheet = api.asc_getActiveWorksheetIndex();
+                    api.asc_setWorksheetRange(linkinfo);
+                    const {storeSheets} = this.props;
+                    const tab = storeSheets.sheets.find((sheet) => sheet.name === nameSheet);
+                    if (tab) {
+                        const sdkIndex = tab.index;
+                        if (sdkIndex !== curActiveSheet) {
+                            const index = storeSheets.sheets.indexOf(tab);
+                            storeSheets.setActiveWorksheet(index);
+                            Common.Notifications.trigger('sheet:active', sdkIndex);
+                        }
+                    }
+                } else {
+                    const url = linkinfo.asc_getHyperlinkUrl().replace(/\s/g, "%20");
+                    api.asc_getUrlType(url) > 0 && this.openLink(url);
+                }
+                break;
+            case 'freezePanes':
+                api.asc_freezePane();
+                break;
+        }
+
+        console.log("click context menu item: " + action);
+    }
+
+    showCopyCutPasteModal() {
+        const { t } = this.props;
+        const _t = t("ContextMenu", { returnObjects: true });
+        f7.dialog.create({
+            title: _t.textCopyCutPasteActions,
+            text: _t.errorCopyCutPaste,
+            content: `<div class="checkbox-in-modal">
+                      <label class="checkbox">
+                        <input type="checkbox" name="checkbox-show" />
+                        <i class="icon-checkbox"></i>
+                      </label>
+                      <span class="right-text">${_t.textDoNotShowAgain}</span>
+                      </div>`,
+            buttons: [{
+                text: 'OK',
+                onClick: () => {
+                    const dontShow = $$('input[name="checkbox-show"]').prop('checked');
+                    if (dontShow) LocalStorage.setItem("de-hide-copy-cut-paste-warning", 1);
+                }
+            }]
+        }).open();
+    }
+
+    openLink(url) {
+        const newDocumentPage = window.open(url, '_blank');
+
+        if (newDocumentPage) {
+            newDocumentPage.focus();
+        }
+    }
+
+    onDocumentReady() {
+        super.onDocumentReady();
+
+        const api = Common.EditorApi.get();
+        api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
+        api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
+    }
+
+    initMenuItems() {
+        if ( !Common.EditorApi ) return [];
+
+        const { t } = this.props;
+        const _t = t("ContextMenu", { returnObjects: true });
+
+        const { isEdit, canViewComments, isDisconnected } = this.props;
+
+        const api = Common.EditorApi.get();
+        const cellinfo = api.asc_getCellInfo();
+
+        const itemsIcon = [];
+        const itemsText = [];
+
+        let iscellmenu, isrowmenu, iscolmenu, isallmenu, ischartmenu, isimagemenu, istextshapemenu, isshapemenu, istextchartmenu;
+        let iscelllocked = cellinfo.asc_getLocked();
+        const seltype = cellinfo.asc_getSelectionType();
+        const xfs = cellinfo.asc_getXfs();
+        const isComments = cellinfo.asc_getComments().length > 0; //prohibit adding multiple comments in one cell;
+
+        switch (seltype) {
+            case Asc.c_oAscSelectionType.RangeCells:     iscellmenu  = true;     break;
+            case Asc.c_oAscSelectionType.RangeRow:       isrowmenu   = true;     break;
+            case Asc.c_oAscSelectionType.RangeCol:       iscolmenu   = true;     break;
+            case Asc.c_oAscSelectionType.RangeMax:       isallmenu   = true;     break;
+            case Asc.c_oAscSelectionType.RangeImage:     isimagemenu = true;     break;
+            case Asc.c_oAscSelectionType.RangeShape:     isshapemenu = true;     break;
+            case Asc.c_oAscSelectionType.RangeChart:     ischartmenu = true;     break;
+            case Asc.c_oAscSelectionType.RangeChartText: istextchartmenu = true; break;
+            case Asc.c_oAscSelectionType.RangeShapeText: istextshapemenu = true; break;
+        }
+
+        if (!isEdit) {
+            if (iscellmenu || istextchartmenu || istextshapemenu) {
+                itemsIcon.push({
+                    event: 'copy',
+                    icon: 'icon-copy'
+                });
+            }
+            if (iscellmenu && cellinfo.asc_getHyperlink()) {
+                itemsText.push({
+                    caption: _t.menuOpenLink,
+                    event: 'openlink'
+                });
+            }
+            if (canViewComments && isComments) {
+                itemsText.push({
+                    caption: _t.menuViewComment,
+                    event: 'viewcomment'
+                });
+            }
+        } else {
+
+            if (!iscelllocked && (isimagemenu || isshapemenu || ischartmenu || istextshapemenu || istextchartmenu)) {
+                api.asc_getGraphicObjectProps().every((object) => {
+                    if (object.asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
+                        iscelllocked = object.asc_getObjectValue().asc_getLocked();
+                    }
+                    return !iscelllocked;
+                });
+            }
+
+            if (iscelllocked || api.isCellEdited) {
+                itemsIcon.push({
+                    event: 'copy',
+                    icon: 'icon-copy'
+                });
+
+            } else {
+                itemsIcon.push({
+                    event: 'cut',
+                    icon: 'icon-cut'
+                });
+                itemsIcon.push({
+                    event: 'copy',
+                    icon: 'icon-copy'
+                });
+                itemsIcon.push({
+                    event: 'paste',
+                    icon: 'icon-paste'
+                });
+                itemsText.push({
+                    caption: _t.menuDelete,
+                    event: 'del'
+                });
+
+                if (isimagemenu || isshapemenu || ischartmenu ||
+                    istextshapemenu || istextchartmenu) {
+                    itemsText.push({
+                        caption: _t.menuEdit,
+                        event: 'edit'
+                    });
+                } else {
+                    if (iscolmenu || isrowmenu) {
+                        itemsText.push({
+                            caption: _t.menuHide,
+                            event: 'hide'
+                        });
+                        itemsText.push({
+                            caption: _t.menuShow,
+                            event: 'show'
+                        });
+                    } else if (iscellmenu) {
+                        if (!iscelllocked) {
+                            itemsText.push({
+                                caption: _t.menuCell,
+                                event: 'edit'
+                            });
+                        }
+
+                        if (cellinfo.asc_getMerge() == Asc.c_oAscMergeOptions.None) {
+                            itemsText.push({
+                                caption: _t.menuMerge,
+                                event: 'merge'
+                            });
+                        }
+
+                        if (cellinfo.asc_getMerge() == Asc.c_oAscMergeOptions.Merge) {
+                            itemsText.push({
+                                caption: _t.menuUnmerge,
+                                event: 'unmerge'
+                            });
+                        }
+
+                        itemsText.push(
+                            xfs.asc_getWrapText() ?
+                                {
+                                    caption: _t.menuUnwrap,
+                                    event: 'unwrap'
+                                } :
+                                {
+                                    caption: _t.menuWrap,
+                                    event: 'wrap'
+                                });
+
+                        if (cellinfo.asc_getHyperlink() && !cellinfo.asc_getMultiselect()) {
+                            itemsText.push({
+                                caption: _t.menuOpenLink,
+                                event: 'openlink'
+                            });
+                        } else if (!cellinfo.asc_getHyperlink() && !cellinfo.asc_getMultiselect() &&
+                            !cellinfo.asc_getLockText() && !!cellinfo.asc_getText()) {
+                            itemsText.push({
+                                caption: _t.menuAddLink,
+                                event: 'addlink'
+                            });
+                        }
+                    }
+
+                    itemsText.push({
+                        caption: api.asc_getSheetViewSettings().asc_getIsFreezePane() ? _t.menuUnfreezePanes : _t.menuFreezePanes,
+                        event: 'freezePanes'
+                    });
+
+                }
+
+                if (canViewComments) {
+                    if (isComments) {
+                        itemsText.push({
+                            caption: _t.menuViewComment,
+                            event: 'viewcomment'
+                        });
+                    } else if (iscellmenu) {
+                        itemsText.push({
+                            caption: _t.menuAddComment,
+                            event: 'addcomment'
+                        });
+                    }
+                }
+            }
+        }
+
+
+        if ( Device.phone && itemsText.length > 2 ) {
+            this.extraItems = itemsText.splice(2,itemsText.length, {
+                caption: _t.menuMore,
+                event: 'showActionSheet'
+            });
+        }
+
+        return itemsIcon.concat(itemsText);
+    }
+
+    initExtraItems () {
+        return (this.extraItems && this.extraItems.length > 0 ? this.extraItems : []);
+    }
+}
+
+const _ContextMenu = withTranslation()(ContextMenu);
+_ContextMenu.closeContextMenu = ContextMenu.closeContextMenu;
+export { _ContextMenu as default };

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

@@ -1,15 +1,22 @@
 
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import { inject } from "mobx-react";
 import { f7 } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx'
 import { onAdvancedOptions } from './settings/Download.jsx';
+import {
+    AddCommentController,
+    CommentsController,
+    EditCommentController,
+    ViewCommentsController
+} from "../../../../common/mobile/lib/controller/collaboration/Comments";
 
 @inject("storeAppOptions", "storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings", "storeSpreadsheetInfo")
 class MainController extends Component {
     constructor(props) {
-        super(props)
+        super(props);
+        window.editorType = 'sse';
     }
 
     initSdk() {
@@ -318,7 +325,15 @@ class MainController extends Component {
     }
 
     render() {
-        return <CollaborationController />
+        return (
+            <Fragment>
+                <CollaborationController />
+                <CommentsController />
+                <AddCommentController />
+                <EditCommentController />
+                <ViewCommentsController />
+            </Fragment>
+        )
     }
 
     componentDidMount() {

apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx

@@ -16,13 +16,20 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
     let isDisconnected = users.isDisconnected;
 
     useEffect(() => {
-        const on_api_created = api => {
+        const onDocumentReady = () => {
+            const api = Common.EditorApi.get();
             api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
             api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
             api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
             api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
             api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
         };
+        if ( !Common.EditorApi ) {
+            Common.Notifications.on('document:ready', onDocumentReady);
+            Common.Notifications.on('document:ready', onApiSheetsChanged);
+        } else {
+            onDocumentReady();
+        }
 
         const on_main_view_click = e => {
             if(!e.target.closest('.tab.active')) {
@@ -30,15 +37,13 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
             }
         };
 
-        Common.Notifications.on('document:ready', onApiSheetsChanged);
-        Common.Notifications.on('engineCreated', on_api_created);
-
         $$('.view-main').on('click', on_main_view_click);
 
         return () => {
+            Common.Notifications.off('document:ready', onDocumentReady);
             Common.Notifications.off('document:ready', onApiSheetsChanged);
-            Common.Notifications.off('engineCreated', on_api_created);
 
+            const api = Common.EditorApi.get();
             api.asc_unregisterCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
             api.asc_unregisterCallback('asc_onWorkbookLocked', onWorkbookLocked);
             api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked);
@@ -141,6 +146,8 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
 
         api.asc_showWorksheet(model.index);
         sheets.setActiveWorksheet(i);
+
+        Common.Notifications.trigger('sheet:active', model.index);
     };
 
     const createSheetName = () => {

apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx

@@ -18,9 +18,18 @@ class AddOtherController extends Component {
         }
     }
 
+    hideAddComment () {
+        const cellinfo = Common.EditorApi.get().asc_getCellInfo();
+        const iscelllocked = cellinfo.asc_getLocked();
+        const seltype = cellinfo.asc_getSelectionType();
+        const isComments = cellinfo.asc_getComments().length > 0;
+        return (!(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked) || isComments);
+    }
+
     render () {
         return (
-            <AddOther
+            <AddOther closeModal={this.closeModal}
+                      hideAddComment={this.hideAddComment}
             />
         )
     }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -13,6 +13,7 @@
 @import '../../../../common/mobile/resources/less/dataview.less';
 @import '../../../../common/mobile/resources/less/search.less';
 @import '../../../../common/mobile/resources/less/contextmenu.less';
+@import '../../../../common/mobile/resources/less/comments.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';

apps/spreadsheeteditor/mobile/src/page/app.jsx

@@ -34,9 +34,8 @@ export default class extends React.Component {
         return (
             <App { ...f7params } >
                 {/* Your main view, should have "view-main" class */}
-                <View main className="safe-areas" url="/">
+                <View main className="safe-areas" url="/" />
-                    <MainController />
+                <MainController />
-                </View>
             </App>
         )
     }

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

@@ -13,6 +13,7 @@ import { Search, SearchSettings } from '../controller/Search';
 import { f7 } from 'framework7-react';
 
 import {FunctionGroups} from "../controller/add/AddFunction";
+import ContextMenu from '../controller/ContextMenu';
 
 export default class MainPage extends Component {
     constructor(props) {
@@ -73,7 +74,7 @@ export default class MainPage extends Component {
                         <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
                         <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
                         { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                        <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
+                        <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                         <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                     </NavRight>
                     <Search useSuspense={false} />
@@ -101,6 +102,7 @@ export default class MainPage extends Component {
                 <Statusbar />
 
                 <FunctionGroups /> {/* hidden component*/}
+                <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
             </Page>
       )
   }

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

@@ -4,6 +4,7 @@ export class storeAppOptions {
     constructor() {
         makeObservable(this, {
             isEdit: observable,
+            canViewComments: observable,
             setConfigOptions: action,
             setPermissionOptions: action
         });
@@ -12,6 +13,9 @@ export class storeAppOptions {
     isEdit = false;
     config = {};
 
+    isEdit = false;
+    canViewComments = false;
+
     setConfigOptions (config) {
         this.config = config;
         this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);

apps/spreadsheeteditor/mobile/src/store/mainStore.js

@@ -15,6 +15,7 @@ import {storeAppOptions} from "./appOptions";
 // import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
 import {storeSpreadsheetSettings} from "./spreadsheetSettings";
+import {storeComments} from "../../../../common/mobile/lib/store/comments";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
@@ -30,8 +31,9 @@ export const stores = {
     storeShapeSettings: new storeShapeSettings(),
     storeChartSettings: new storeChartSettings(),
     storePalette: new storePalette(),
-    storeCellSettings: new storeCellSettings()
+    storeCellSettings: new storeCellSettings(),
     // storeImageSettings: new storeImageSettings(),
     // storeTableSettings: new storeTableSettings()
+    storeComments: new storeComments()
 };
 

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

@@ -5,11 +5,18 @@ import { useTranslation } from 'react-i18next';
 const AddOther = props => {
     const { t } = useTranslation();
     const _t = t('View.Add', {returnObjects: true});
+    const hideAddComment = props.hideAddComment();
     return (
         <List>
             <ListItem title={_t.textImage} link={'/add-image/'}>
                 <Icon slot="media" icon="icon-insimage"></Icon>
             </ListItem>
+            {!hideAddComment && <ListItem title={_t.textComment} onClick={() => {
+                props.closeModal();
+                Common.Notifications.trigger('addcomment');
+            }}>
+                <Icon slot="media" icon="icon-insert-comment"></Icon>
+            </ListItem>}
             <ListItem title={_t.textLink} link={'/add-link/'}>
                 <Icon slot="media" icon="icon-link"></Icon>
             </ListItem>

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -9,7 +9,8 @@ import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo
 import {DownloadWithTranslation} from '../../controller/settings/Download.jsx';
 import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
 import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
-import SpreadsheetAbout from './SpreadsheetAbout.jsx';
+// import SpreadsheetAbout from './SpreadsheetAbout.jsx';
+import About from '../../../../../common/mobile/lib/view/About';
 
 const routes = [
     {
@@ -57,8 +58,8 @@ const routes = [
         component: SpreadsheetInfoController
     },
     {
-        path: '/spreadsheet-about/',
+        path: '/about/',
-        component: SpreadsheetAbout
+        component: About
     }
 ];
 
@@ -137,7 +138,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textHelp} link="#" onClick={showHelp}>
                         <Icon slot="media" icon="icon-help"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-about/")}>
+                    <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
                         <Icon slot="media" icon="icon-about"></Icon>
                     </ListItem>
                 </List>

vendor/framework7-react/build/webpack.config.js

@@ -7,6 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
+const fs = require('fs')
 
 const path = require('path');
 
@@ -18,6 +19,7 @@ const env = process.env.NODE_ENV || 'development';
 const target = process.env.TARGET || 'web';
 const editor = process.env.TARGET_EDITOR == 'cell' ? 'spreadsheeteditor' :
                     process.env.TARGET_EDITOR == 'slide' ? 'presentationeditor' : 'documenteditor';
+const targetPatch = process.env.TARGET_EDITOR || 'word';
 
 module.exports = {
   mode: env,
@@ -206,5 +208,10 @@ module.exports = {
         },
       ],
     }),
+    new webpack.NormalModuleReplacementPlugin(
+        /\.{2}\/lib\/patch/,
+        resource => fs.existsSync(`../../../web-apps-mobile/${targetPatch}/patch.jsx`) ?
+                        resource.request = `../../../../../../web-apps-mobile/${targetPatch}/patch.jsx` : resource
+    ),
   ],
 };

vendor/framework7-react/package.json

@@ -25,14 +25,14 @@
   ],
   "dependencies": {
     "dom7": "^3.0.0",
-    "framework7": "^6.0.14",
+    "framework7": "^6.0.4",
     "framework7-icons": "^3.0.1",
-    "framework7-react": "^6.0.14",
+    "framework7-react": "^6.0.4",
     "i18next": "^19.8.4",
     "i18next-fetch-backend": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
+    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^17.0.1",
     "react-i18next": "^11.8.5",
     "swiper": "^6.4.8",
     "template7": "^1.4.2"
@@ -43,7 +43,7 @@
     "@babel/plugin-proposal-decorators": "^7.12.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",
     "babel-loader": "^8.2.2",