Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

2021-03-10 16:37:10 +03:00 · 2021-03-10 16:37:10 +03:00 · 38ebce8e5a
parent 42d8461f1c c9e5a41954
commit 38ebce8e5a
29 changed files with 1172 additions and 231 deletions
--- a/apps/common/mobile/lib/controller/ContextMenu.jsx
+++ b/apps/common/mobile/lib/controller/ContextMenu.jsx
@ -12,8 +12,10 @@ class ContextMenuController extends Component {

        this.state = {
            opened: false
+            , items: []
        };

+        this.onMenuItemClick = this.onMenuItemClick.bind(this);
        this.onMenuClosed = this.onMenuClosed.bind(this);
        this.onDocumentReady = this.onDocumentReady.bind(this);
        this.onApiOpenContextMenu = this.onApiOpenContextMenu.bind(this);
@ -94,6 +96,8 @@ class ContextMenuController extends Component {

    onApiOpenContextMenu(x, y) {
        if ( !this.state.opened ) {
+            this.setState({items: this.initMenuItems()});
+
            this.$targetEl.css({left: `${x}px`, top: `${y}px`});
            const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement);

@ -108,7 +112,8 @@ class ContextMenuController extends Component {

    onApiHideContextMenu() {
        if ( this.state.opened ) {
-            f7.popover.close(idContextMenuElement);
+            $$(idContextMenuElement).hide();
+            f7.popover.close(idContextMenuElement, false);

            this.$targetEl.css({left: '-10000px', top: '-10000px'});
            this.setState({opened: false});
@ -116,6 +121,9 @@ class ContextMenuController extends Component {
    }

    onMenuClosed() {
+        this.$targetEl.css({left: '-10000px', top: '-10000px'});
+        this.setState({opened: false});
+
        // (async () => {
        //     await 1 && this.setState(state => {
        //         this.$targetEl.css({left: '-10000px', top: '-10000px'});
@ -125,6 +133,7 @@ class ContextMenuController extends Component {
    }

    onMenuItemClick(action) {
+        this.onApiHideContextMenu();
    }

    componentWillUnmount() {
@ -151,7 +160,7 @@ class ContextMenuController extends Component {

    render() {
        return (
-            <ContextMenuView items={this.initMenuItems()} onMenuClosed={this.onMenuClosed} onMenuItemClick={this.onMenuItemClick} />
+            <ContextMenuView items={this.state.items} onMenuClosed={this.onMenuClosed} onMenuItemClick={this.onMenuItemClick} />
        )
    }
 }
--- a/apps/common/mobile/lib/controller/collaboration/Comments.jsx
+++ b/apps/common/mobile/lib/controller/collaboration/Comments.jsx
@ -5,7 +5,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import { withTranslation} from 'react-i18next';
 import { LocalStorage } from '../../../utils/LocalStorage';

-import {AddComment, EditComment, ViewComments} from '../../view/collaboration/Comments';
+import {AddComment, EditComment, AddReply, EditReply, ViewComments, ViewCurrentComments} from '../../view/collaboration/Comments';

 // utils
 const timeZoneOffsetInMs = (new Date()).getTimezoneOffset() * 60000;
@ -113,9 +113,9 @@ class CommentsController extends Component {
            let user = this.usersStore.searchUserById(data.asc_getUserId());

            comment.comment = data.asc_getText();
-            comment.userid = data.asc_getUserId();
+            comment.userId = data.asc_getUserId();
            comment.userName = data.asc_getUserName();
-            comment.usercolor = (user) ? user.asc_getColor() : null;
+            comment.userColor = (user) ? user.asc_getColor() : null;
            comment.resolved = data.asc_getSolved();
            comment.quote = data.asc_getQuoteText();
            comment.time = date.getTime();
@ -218,8 +218,20 @@ class CommentsController extends Component {
 class AddCommentController extends Component {
    constructor(props) {
        super(props);
+        this.closeAddComment = this.closeAddComment.bind(this);
        this.getUserInfo = this.getUserInfo.bind(this);
        this.onAddNewComment = this.onAddNewComment.bind(this);
+
+        this.state = {
+            isOpen: false
+        };
+
+        Common.Notifications.on('addcomment', () => {
+            this.setState({isOpen: true});
+        });
+    }
+    closeAddComment () {
+        this.setState({isOpen: false});
    }
    getUserInfo () {
        this.currentUser = this.props.users.currentUser;
@ -255,34 +267,30 @@ class AddCommentController extends Component {
        return false;
    }
    render() {
-        const isOpen = this.props.storeComments.isOpenAddComment;
-        let userInfo;
-        if (isOpen) {
-            userInfo = this.getUserInfo();
-        }
        return(
-            isOpen ? <AddComment userInfo={userInfo} onAddNewComment={this.onAddNewComment} /> : null
+            this.state.isOpen ? <AddComment userInfo={this.getUserInfo()} onAddNewComment={this.onAddNewComment} closeAddComment={this.closeAddComment}/> : null
        )
    }
 }

-class ViewCommentsController extends Component {
+class EditCommentController extends Component {
    constructor (props) {
        super(props);
-        this.onCommentMenuClick = this.onCommentMenuClick.bind(this);
-        this.onResolveComment = this.onResolveComment.bind(this);
        this.onEditComment = this.onEditComment.bind(this);
-        this.closeEditComment = this.closeEditComment.bind(this);
-
+        this.onAddReply = this.onAddReply.bind(this);
+        this.onEditReply = this.onEditReply.bind(this);
+    }
+    getUserInfo () {
        this.currentUser = this.props.users.currentUser;
-
-        this.state = {
-            showEditComment: false,
-            showEditReply: false
+        const name = this.currentUser.asc_getUserName();
+        return {
+            name: name,
+            initials: this.props.users.getInitials(name),
+            color: this.currentUser.asc_getColor()
        };
    }
    onChangeComment (comment) {
-        const ascComment = !!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null);
+        const ascComment = typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null);
        if (ascComment && comment) {
            ascComment.asc_putText(comment.comment);
            ascComment.asc_putQuoteText(comment.quote);
@ -316,6 +324,104 @@ class ViewCommentsController extends Component {
            api.asc_changeComment(comment.uid, ascComment);
        }
    }
+    onEditComment (comment, text) {
+        comment.comment = text.trim();
+        const user = this.props.users.currentUser;
+        comment.userid = user.asc_getIdOriginal();
+        comment.username = user.asc_getUserName();
+        this.onChangeComment(comment);
+    }
+    onAddReply (comment, replyVal) {
+        let reply = null;
+        let addReply = null;
+        const ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+
+        if (ascComment) {
+            ascComment.asc_putText(comment.comment);
+            ascComment.asc_putQuoteText(comment.quote);
+            ascComment.asc_putTime(utcDateToString(new Date(comment.time)));
+            ascComment.asc_putOnlyOfficeTime(ooDateToString(new Date(comment.time)));
+            ascComment.asc_putUserId(comment.userId);
+            ascComment.asc_putUserName(comment.userName);
+            ascComment.asc_putSolved(comment.resolved);
+            ascComment.asc_putGuid(comment.guid);
+
+            if (!!ascComment.asc_putDocumentFlag) {
+                ascComment.asc_putDocumentFlag(comment.unattached);
+            }
+
+            reply = comment.replies;
+            if (reply && reply.length) {
+                reply.forEach(function (reply) {
+
+                    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)));
+                        addReply.asc_putOnlyOfficeTime(ooDateToString(new Date(reply.time)));
+                        addReply.asc_putUserId(reply.userId);
+                        addReply.asc_putUserName(reply.userName);
+
+                        ascComment.asc_addReply(addReply);
+                    }
+                });
+            }
+
+            addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+            if (addReply) {
+                addReply.asc_putText(replyVal);
+                addReply.asc_putTime(utcDateToString(new Date()));
+                addReply.asc_putOnlyOfficeTime(ooDateToString(new Date()));
+                const currentUser = this.props.users.currentUser;
+                addReply.asc_putUserId(currentUser.asc_getIdOriginal());
+                addReply.asc_putUserName(currentUser.asc_getUserName());
+
+                ascComment.asc_addReply(addReply);
+
+                const api = Common.EditorApi.get();
+                api.asc_changeComment(comment.uid, ascComment);
+            }
+        }
+    }
+    onEditReply (comment, reply, textReply) {
+        const currentUser = this.props.users.currentUser;
+        const indReply = reply.ind;
+        comment.replies[indReply].reply = textReply;
+        comment.replies[indReply].userid = currentUser.asc_getIdOriginal();
+        comment.replies[indReply].username = currentUser.asc_getUserName();
+        this.onChangeComment(comment);
+    }
+    render() {
+        const storeComments = this.props.storeComments;
+        const comment = storeComments.currentComment;
+        return (
+            <Fragment>
+                {storeComments.isOpenEditComment && <EditComment comment={comment} onEditComment={this.onEditComment}/>}
+                {storeComments.isOpenAddReply && <AddReply userInfo={this.getUserInfo()} comment={comment} onAddReply={this.onAddReply}/>}
+                {storeComments.isOpenEditReply && <EditReply comment={comment} reply={storeComments.currentReply} onEditReply={this.onEditReply}/>}
+            </Fragment>
+        )
+    }
+}
+
+class ViewCommentsController extends Component {
+    constructor (props) {
+        super(props);
+        this.onCommentMenuClick = this.onCommentMenuClick.bind(this);
+        this.onResolveComment = this.onResolveComment.bind(this);
+        this.closeViewCurComments = this.closeViewCurComments.bind(this);
+
+        this.state = {
+            isOpenViewCurComments: false
+        };
+
+        Common.Notifications.on('viewcomment', () => {
+            this.setState({isOpenViewCurComments: true});
+        });
+    }
+    closeViewCurComments () {
+        this.setState({isOpenViewCurComments: false});
+    }
    onResolveComment (comment) {
        let reply = null,
            addReply = null,
@ -358,17 +464,13 @@ class ViewCommentsController extends Component {
        const api = Common.EditorApi.get();
        comment && api.asc_removeComment(comment.uid);
    }
-    onEditComment (comment, text) {
-        comment.comment = text.trim();
-        comment.userid = this.currentUser.asc_getIdOriginal();
-        comment.username = this.currentUser.asc_getUserName();
-        this.onChangeComment(comment);
-    }
-    deleteReply (comment, indReply) {
+    deleteReply (comment, reply) {
        let replies = null,
            addReply = null,
            ascComment = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));

+        const indReply = reply.ind;
+
        if (ascComment && comment) {
            ascComment.asc_putText(comment.comment);
            ascComment.asc_putQuoteText(comment.quote);
@ -404,19 +506,12 @@ class ViewCommentsController extends Component {
            api.asc_changeComment(comment.uid, ascComment);
        }
    }
-    onCommentMenuClick (action, comment) {
+    onCommentMenuClick (action, comment, reply) {
        const { t } = this.props;
        const _t = t("Common.Collaboration", { returnObjects: true });
        switch (action) {
            case 'editComment':
-                this.setState({
-                    showEditComment: true,
-                    editProps: {
-                        comment: comment,
-                        onEditComment: this.onEditComment
-                    }
-                });
-                console.log('editComment');
+                this.props.storeComments.openEditComment(true, comment);
                break;
            case 'resolve':
                this.onResolveComment(comment);
@ -431,35 +526,27 @@ class ViewCommentsController extends Component {
                );
                break;
            case 'editReply':
-                this.setState({showEditReply: true});
-                console.log('editReply');
+                this.props.storeComments.openEditReply(true, comment, reply);
                break;
            case 'deleteReply':
                f7.dialog.confirm(
                    _t.textMessageDeleteReply,
                    _t.textDeleteReply,
                    () => {
-                        this.deleteReply(comment, indReply);
+                        this.deleteReply(comment, reply);
                    }
                );
                break;
            case 'addReply':
-                console.log('addReply');
+                this.props.storeComments.openAddReply(true, comment);
                break;
        }
    }
-
-    closeEditComment () {
-        this.setState({showEditComment: false});
-    }
    render() {
        return(
            <Fragment>
-                <ViewComments showEditComment={this.showEditComment}
-                              onCommentMenuClick={this.onCommentMenuClick}
-                              onResolveComment={this.onResolveComment}
-                />
-                {this.state.showEditComment && <EditComment editProps={this.state.editProps} opened={this.state.showEditComment} close={this.closeEditComment}/>}
+                {this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} />}
+                {this.state.isOpenViewCurComments && <ViewCurrentComments opened={this.state.isOpenViewCurComments} closeCurComments={this.closeViewCurComments} />}
            </Fragment>
        )
    }
@ -467,10 +554,12 @@ class ViewCommentsController extends Component {

 const _CommentsController = inject('storeAppOptions', 'storeComments', 'users')(observer(CommentsController));
 const _AddCommentController = inject('storeAppOptions', 'storeComments', 'users')(observer(AddCommentController));
+const _EditCommentController = inject('storeComments', 'users')(observer(EditCommentController));
 const _ViewCommentsController = inject('storeComments', 'users')(observer(withTranslation()(ViewCommentsController)));

 export {
    _CommentsController as CommentsController,
    _AddCommentController as AddCommentController,
+    _EditCommentController as EditCommentController,
    _ViewCommentsController as ViewCommentsController
 };
--- a/apps/common/mobile/lib/store/comments.js
+++ b/apps/common/mobile/lib/store/comments.js
@ -1,11 +1,35 @@

-import {observable, action, computed} from 'mobx';
+import {makeObservable, observable, action, computed} from 'mobx';

 export class storeComments {
-    @observable collectionComments = [];
-    @observable groupCollectionComments = [];
+    constructor() {
+        makeObservable(this, {
+            collectionComments: observable,
+            groupCollectionComments: observable,
+            filter: observable,
+            groupCollectionFilter: observable,

-    @action addComment (comment) {
+            addComment: action,
+            removeComment: action,
+            changeFilter: action,
+
+            sortComments: computed,
+
+            isOpenEditComment: observable,
+            openEditComment: action,
+            isOpenAddReply: observable,
+            openAddReply: action,
+            isOpenEditReply: observable,
+            openEditReply: action
+        })
+    }
+    collectionComments = [];
+    groupCollectionComments = [];
+
+    filter = undefined;
+    groupCollectionFilter = []; // for sse
+
+    addComment (comment) {
        comment.groupName ? this.addCommentToGroupCollection(comment) : this.addCommentToCollection(comment);
    }

@ -24,7 +48,7 @@ export class storeComments {
        }
    }

-    @action removeComment (id) {
+    removeComment (id) {
        if (this.collectionComments.length > 0) {
            this.removeCommentFromCollection(id);
        } else {
@ -57,10 +81,7 @@ export class storeComments {
        }
    }

-    @observable filter; // for sse
-    @observable groupCollectionFilter = []; // for sse
-
-    @action changeFilter (filter) {
+    changeFilter (filter) {
        let comments = [];
        this.filter = filter;
        filter.forEach((item) => {
@ -94,7 +115,7 @@ export class storeComments {
        return model;
    }

-    @computed get sortComments () {
+    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);
@ -102,12 +123,31 @@ export class storeComments {
        return false;
    }

-    // Add comment modal window
-    @observable isOpenAddComment = false;
+    // Edit comment
+    currentComment = null;
+    isOpenEditComment = false;
+    openEditComment (open, comment) {
+        if (open !== this.isOpenEditComment) {
+            this.currentComment = open ? comment : null;
+            this.isOpenEditComment = open;
+        }
+    }

-    @action openAddComment (open) {
-        if (open !== this.isOpenAddComment) {
-            this.isOpenAddComment = open;
+    currentReply = null;
+    isOpenAddReply = false;
+    openAddReply (open, comment) {
+        if (open !== this.isOpenAddReply) {
+            this.currentComment = open ? comment : null;
+            this.isOpenAddReply = open;
+        }
+    }
+
+    isOpenEditReply = false;
+    openEditReply (open, comment, reply) {
+        if (open !== this.isOpenEditReply) {
+            this.currentComment = open ? comment : null;
+            this.currentReply = open ? reply : null;
+            this.isOpenEditReply = open;
        }
    }
 }
--- a/apps/common/mobile/lib/store/users.js
+++ b/apps/common/mobile/lib/store/users.js
@ -1,16 +1,25 @@

-import {observable, action, computed} from 'mobx';
+import {makeObservable, observable, action} from 'mobx';

 export class storeUsers {
-    @observable users = [];
+    constructor() {
+        makeObservable(this, {
+            users: observable,
+            reset: action,
+            currentUser: observable,
+            setCurrentUser: action,
+            connection: action
+        })
+    }

-    @action reset(users) {
+    users = [];
+    currentUser;
+
+    reset (users) {
        this.users = Object.values(users)
    }

-    @observable currentUser;
-
-    @action setCurrentUser(id) {
+    setCurrentUser (id) {
        this.users.forEach((item) => {
            if (item.asc_getIdOriginal() === id) {
                this.currentUser = item;
@ -18,7 +27,7 @@ export class storeUsers {
        });
    }

-    @action connection (change) {
+    connection (change) {
        let changed = false;
        for (let uid in this.users) {
            if (undefined !== uid) {
@ -45,10 +54,12 @@ export class storeUsers {
    }

    searchUserById (id) {
+        let user = null;
        this.users.forEach((item) => {
            if (item.asc_getIdOriginal() === id) {
-                return  item;
+                user = item;
            }
        });
+        return user;
    }
 }
--- a/apps/common/mobile/lib/view/ContextMenu.jsx
+++ b/apps/common/mobile/lib/view/ContextMenu.jsx
@ -26,9 +26,9 @@ class ContextMenuView extends Component {
            >
                <List className="list-block">
                    {buttons.map((b, index) =>
-                        !!b.text ?
-                            <ListButton className="asd" title={b.text} key={index} onClick={e => this.props.onMenuItemClick(b.action)} /> :
-                            <ListButton className="asd" title={b.text} key={index}>
+                        !b.icon ?
+                            <ListButton title={b.caption} key={index} onClick={e => this.props.onMenuItemClick(b.event)} /> :
+                            <ListButton key={index}>
                                <Icon slot="media" icon={`icon_mask ${b.icon}`} />
                            </ListButton>
                    )}
--- a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx
+++ b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx
@ -49,7 +49,12 @@ const routes = [
    },
    {
        path: '/comments/',
-        component: ViewCommentsController
+        component: ViewCommentsController,
+        options: {
+            props: {
+                allComments: true
+            }
+        }
    }
 ];

--- a/apps/common/mobile/lib/view/collaboration/Comments.jsx
+++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx
@ -1,6 +1,6 @@
 import React, {useState, useEffect, Fragment} from 'react';
 import {observer, inject} from "mobx-react";
-import { f7, Popup, Page, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
+import { f7, Popup, Sheet, Popover, Page, Toolbar, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../utils/device';

@ -19,7 +19,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
            <Navbar>
                <NavLeft>
                    <Link onClick={() => {
-                        props.storeComments.openAddComment(false);
+                        props.closeAddComment();
                        f7.popup.close('.add-comment-popup');
                    }}>{_t.textCancel}</Link>
                </NavLeft>
@ -28,7 +28,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
                    <Link className={stateText.length === 0 && 'disabled'}
                          onClick={() => {
                              if (props.onAddNewComment(stateText, false)) {
-                                  props.storeComments.openAddComment(false);
+                                  props.closeAddComment();
                                  f7.popup.close('.add-comment-popup');
                              }
                    }}>
@ -37,7 +37,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
                </NavRight>
            </Navbar>
            <div className='wrap-comment'>
-                <div className="header-comment">
+                <div className="comment-header">
                    {Device.android &&
                    <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
                    }
@ -74,7 +74,7 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
                    </div>
                </div>
                <div class='wrap-comment'>
-                    <div class="header-comment">
+                    <div class="comment-header">
                        ${Device.android ? templateInitials : ''}
                        <div class='name'>${userInfo.name}</div>
                    </div>
@ -87,14 +87,14 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
                    const cancel = document.getElementById('comment-cancel');
                    cancel.addEventListener('click', () => {
                        f7.dialog.close();
-                        props.storeComments.openAddComment(false);
+                        props.closeAddComment();
                    });
                    const done = document.getElementById('comment-done');
                    done.addEventListener('click', () => {
                        const value = document.getElementById('comment-text').value;
                        if (value.length > 0 && props.onAddNewComment(value, false)) {
                            f7.dialog.close();
-                            props.storeComments.openAddComment(false);
+                            props.closeAddComment();
                        }
                    });
                    const area = document.getElementById('comment-text');
@ -118,8 +118,8 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
 const AddComment = props => {
    return (
        Device.phone ?
-            <AddCommentPopup userInfo={props.userInfo} onAddNewComment={props.onAddNewComment} /> :
-            <AddCommentDialog userInfo={props.userInfo} onAddNewComment={props.onAddNewComment} />
+            <AddCommentPopup {...props} /> :
+            <AddCommentDialog {...props} />
    )
 };

@ -148,19 +148,40 @@ const CommentActions = ({comment, onCommentMenuClick, opened, openActionComment}
    )
 };

-// Edit comment
-const EditCommentPopup = ({comment, onEditComment, opened, close}) => {
+const ReplyActions = ({comment, reply, onCommentMenuClick, opened, openActionReply}) => {
    const { t } = useTranslation();
    const _t = t('Common.Collaboration', {returnObjects: true});
-    const [stateText, setText] = useState(comment.comment);
-    console.log(comment);
    return (
-        <Popup className="edit-comment-popup" opened={opened} animate={true}>
+        <Actions id='reply-menu' opened={opened} onActionsClosed={() => openActionReply(false)}>
+            <ActionsGroup>
+                {reply && <Fragment>
+                    {reply.editable && <ActionsButton onClick={() => {onCommentMenuClick('editReply', comment, reply);}}>{_t.textEdit}</ActionsButton>}
+                    {reply.removable && <ActionsButton color='red' onClick={() => {onCommentMenuClick('deleteReply', comment, reply);}}>{_t.textDeleteReply}</ActionsButton>}
+                </Fragment>
+                }
+            </ActionsGroup>
+            <ActionsGroup>
+                <ActionsButton>{_t.textCancel}</ActionsButton>
+            </ActionsGroup>
+        </Actions>
+    )
+};
+
+// Edit comment
+const EditCommentPopup = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.edit-comment-popup');
+    });
+    const [stateText, setText] = useState(comment.comment);
+    return (
+        <Popup className="edit-comment-popup">
            <Navbar>
                <NavLeft>
                    <Link onClick={() => {
-                        close();
-                        //f7.popup.close('.edit-comment-popup');
+                        f7.popup.close('.edit-comment-popup');
+                        storeComments.openEditComment(false);
                    }}>{_t.textCancel}</Link>
                </NavLeft>
                <NavTitle>{_t.textEditComment}</NavTitle>
@ -168,8 +189,8 @@ const EditCommentPopup = ({comment, onEditComment, opened, close}) => {
                    <Link className={stateText.length === 0 && 'disabled'}
                          onClick={() => {
                              onEditComment(comment, stateText);
-                              close();
-                              //f7.popup.close('.edit-comment-popup');
+                              f7.popup.close('.edit-comment-popup');
+                              storeComments.openEditComment(false);
                          }}
                    >
                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
@ -192,13 +213,315 @@ const EditCommentPopup = ({comment, onEditComment, opened, close}) => {
            </div>
        </Popup>
    )
-};
+}));

-const EditComment = ({editProps, opened, close}) => {
+const EditCommentDialog = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${comment.userColor};">${comment.userInitials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('edit-comment-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="comment-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textEditComment}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="comment-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div>
+                            <div class='name'>${comment.userName}</div>
+                            <div class='comment-date'>${comment.date}</div>
+                        </div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='comment-text' placeholder='${_t.textEditComment}' autofocus>${comment.comment}</textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('comment-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openEditComment(false);
+                    });
+                    const done = document.getElementById('comment-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('comment-text').value;
+                        if (value.length > 0) {
+                            onEditComment(comment, value);
+                            f7.dialog.close();
+                            storeComments.openEditComment(false);
+                        }
+                    });
+                    const area = document.getElementById('comment-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='edit-comment-dialog'></div>
+    );
+}));
+
+const EditComment = ({comment, onEditComment}) => {
    return (
        Device.phone ?
-            <EditCommentPopup {...editProps} opened={opened} close={close}/> :
-            <EditCommentDialog />
+            <EditCommentPopup comment={comment} onEditComment={onEditComment}/> :
+            <EditCommentDialog comment={comment} onEditComment={onEditComment}/>
+    )
+};
+
+const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.add-reply-popup');
+    });
+    const [stateText, setText] = useState('');
+    return (
+        <Popup className="add-reply-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        storeComments.openAddReply(false);
+                        f7.popup.close('.add-reply-popup');
+                    }}>{_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');
+                          }}>
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="comment-header">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
+                    }
+                    <div className='name'>{userInfo.name}</div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textAddReply} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${userInfo.color};">${userInfo.initials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('add-reply-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="reply-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textAddReply}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="reply-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div class='name'>${userInfo.name}</div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='reply-text' placeholder='${_t.textAddReply}' autofocus></textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('reply-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openAddReply(false);
+                    });
+                    const done = document.getElementById('reply-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('reply-text').value;
+                        if (value.length > 0) {
+                            onAddReply(comment, value);
+                            f7.dialog.close();
+                            storeComments.openAddReply(false);
+                        }
+                    });
+                    const area = document.getElementById('reply-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                    done.classList.add('disabled');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='add-reply-dialog'></div>
+    );
+}));
+
+const AddReply = ({userInfo, comment, onAddReply}) => {
+    return (
+        Device.phone ?
+            <AddReplyPopup userInfo={userInfo} comment={comment} onAddReply={onAddReply}/> :
+            <AddReplyDialog userInfo={userInfo} comment={comment} onAddReply={onAddReply}/>
+    )
+};
+
+const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment, reply, onEditReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.edit-reply-popup');
+    });
+    const [stateText, setText] = useState(reply.reply);
+    return (
+        <Popup className="edit-reply-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        f7.popup.close('.edit-reply-popup');
+                        storeComments.openEditReply(false);
+                    }}>{_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);
+                          }}
+                    >
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="comment-header">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${reply.userColor}`}}>{reply.userInitials}</div>
+                    }
+                    <div>
+                        <div className='name'>{reply.userName}</div>
+                        <div className='reply-date'>{reply.date}</div>
+                    </div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textEditReply} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const EditReplyDialog = inject("storeComments")(observer(({storeComments, comment, reply, onEditReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${reply.userColor};">${reply.userInitials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('edit-reply-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="reply-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textEditReply}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="reply-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div>
+                            <div class='name'>${reply.userName}</div>
+                            <div class='reply-date'>${reply.date}</div>
+                        </div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='reply-text' placeholder='${_t.textEditComment}' autofocus>${reply.reply}</textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('reply-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openEditReply(false);
+                    });
+                    const done = document.getElementById('reply-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('reply-text').value;
+                        if (value.length > 0) {
+                            onEditReply(comment, reply, value);
+                            f7.dialog.close();
+                            storeComments.openEditReply(false);
+                        }
+                    });
+                    const area = document.getElementById('reply-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='edit-reply-dialog'></div>
+    );
+}));
+
+const EditReply = ({comment, reply, onEditReply}) => {
+    return (
+        Device.phone ?
+            <EditReplyPopup comment={comment} reply={reply} onEditReply={onEditReply}/> :
+            <EditReplyDialog comment={comment} reply={reply} onEditReply={onEditReply}/>
    )
 };

@ -221,9 +544,12 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
        }
    };

-    const [clickComment, setClickComment] = useState();
+    const [clickComment, setComment] = useState();
    const [commentActionsOpened, openActionComment] = useState(false);

+    const [reply, setReply] = useState();
+    const [replyActionsOpened, openActionReply] = useState(false);
+
    return (
        <Page>
            <Navbar title={_t.textComments} backLink={_t.textBack}/>
@ -245,7 +571,7 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
                                        <div className='right'>
                                            <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div>
                                            <div className='comment-menu'
-                                                 onClick={() => {setClickComment(comment); openActionComment(true);}}
+                                                 onClick={() => {setComment(comment); openActionComment(true);}}
                                            ><Icon icon='icon-menu-comment'/></div>
                                        </div>
                                    }
@ -254,7 +580,7 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
                                    {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
                                    <div className='comment-text'><pre>{comment.comment}</pre></div>
                                    {comment.replies.length > 0 &&
-                                    <ul className='list-reply'>
+                                    <ul className='reply-list'>
                                        {comment.replies.map((reply, indexReply) => {
                                            return (
                                                <li key={`reply-${indexComment}-${indexReply}`}
@ -273,7 +599,11 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
                                                                    </div>
                                                                    {!viewMode &&
                                                                        <div className='right'>
-                                                                            <div className='reply-menu'><Icon icon='icon-menu-comment'/></div>
+                                                                            <div className='reply-menu'
+                                                                                 onClick={() => {setComment(comment); setReply(reply); openActionReply(true);}}
+                                                                            >
+                                                                                <Icon icon='icon-menu-comment'/>
+                                                                            </div>
                                                                        </div>
                                                                    }
                                                                </div>
@ -296,14 +626,108 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
            }

            <CommentActions comment={clickComment} onCommentMenuClick={onCommentMenuClick} opened={commentActionsOpened} openActionComment={openActionComment}/>
+            <ReplyActions comment={clickComment} reply={reply} onCommentMenuClick={onCommentMenuClick} opened={replyActionsOpened} openActionReply={openActionReply}/>
        </Page>
    )
 };

 const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments));

+const CommentList = () => {
+    return (
+        <List>
+
+        </List>
+    )
+};
+
+const ViewCommentSheet = ({closeCurComments}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+
+    useEffect(() => {
+        f7.sheet.open('#view-comment-sheet');
+    });
+
+    const [stateHeight, setHeight] = useState('45%');
+    const [stateOpacity, setOpacity] = useState(1);
+
+    const [stateStartY, setStartY] = useState();
+    const [isNeedClose, setNeedClose] = useState(false);
+
+    const handleTouchStart = (event) => {
+        const touchObj = event.changedTouches[0];
+        setStartY(parseInt(touchObj.clientY));
+    };
+    const handleTouchMove = (event) => {
+        const touchObj = event.changedTouches[0];
+        const dist = parseInt(touchObj.clientY) - stateStartY;
+        if (dist < 0) { // to top
+            setHeight('90%');
+            setOpacity(1);
+            setNeedClose(false);
+        } else if (dist < 80) {
+            setHeight('45%');
+            setOpacity(1);
+            setNeedClose(false);
+        } else {
+            setNeedClose(true);
+            setOpacity(0.6);
+        }
+    };
+    const handleTouchEnd = (event) => {
+        console.log('end');
+        const touchObj = event.changedTouches[0];
+        const swipeEnd = parseInt(touchObj.clientY);
+        const dist = swipeEnd - stateStartY;
+        if (isNeedClose) {
+            f7.sheet.close('#view-comment-sheet');
+            closeCurComments();
+        } else if (stateHeight === '90%' && dist > 20) {
+            setHeight('45%');
+        }
+    };
+    return (
+        <Sheet id='view-comment-sheet' style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
+            <Toolbar position='bottom'>
+                <Link className='btn-add-reply' href='#'>{_t.textAddReply}</Link>
+                <div className='comment-navigation row'>
+                    <Link href='#'><Icon slot='media' icon='icon-prev'/></Link>
+                    <Link href='#'><Icon slot='media' icon='icon-next'/></Link>
+                </div>
+            </Toolbar>
+            <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
+                <Icon icon='icon-swipe'/>
+            </div>
+            <CommentList />
+        </Sheet>
+    )
+};
+
+const ViewCommentPopover = () => {
+    useEffect(() => {
+        f7.popover.open('#view-comment-popover', '#btn-coauth');
+    });
+    return (
+        <Popover id='view-comment-popover'>
+            <CommentList />
+        </Popover>
+    )
+};
+
+const ViewCurrentComments = props => {
+    return (
+        Device.phone ?
+            <ViewCommentSheet {...props}/> :
+            <ViewCommentPopover {...props}/>
+    )
+};
+
 export {
    AddComment,
    EditComment,
-    _ViewComments as ViewComments
-}
+    AddReply,
+    EditReply,
+    _ViewComments as ViewComments,
+    ViewCurrentComments
+};
--- a/apps/common/mobile/resources/less/comments.less
+++ b/apps/common/mobile/resources/less/comments.less
@ -1,3 +1,6 @@
+@comment-date: #6d6d72;
+@swipe-icon: rgba(0, 0, 0, 0.12);
+
@import './ios/comments';
@import './material/comments';

@ -17,14 +20,14 @@
    }
  }
 }
-#add-comment-dialog {
+#add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
  .dialog {
    --f7-dialog-width: 400px;
    .dialog-inner {
      padding: 0;
      height: 400px;
      .wrap-comment {
-        .name {
+        .name, .comment-date, .reply-date {
          text-align: left;
        }
        .wrap-textarea {
@ -74,7 +77,6 @@
    line-height: 18px;
    color: @comment-date;
    margin: 0;
-    margin-top: 0;
  }
  .comment-quote {
    color: @themeColor;
@ -96,11 +98,60 @@
      overflow-wrap: break-word;
    }
  }
-  .list-reply {
+  .reply-list {
    padding-left: 26px;
  }
 }

-.edit-comment-popup {
+.edit-comment-popup, .add-reply-popup, .edit-reply-popup {
  z-index: 20000;
+}
+
+#view-comment-sheet {
+  background-color: @white;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 45%;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12);
+  webkit-transition: height 200ms;
+  transition: height 200ms;
+  .top {
+    height: 90%;
+  }
+  .swipe-container {
+    display: flex;
+    justify-content: center;
+    height: 40px;
+    .icon-swipe {
+      margin-top: 8px;
+      width: 40px;
+      height: 4px;
+      background: @swipe-icon;
+      border-radius: 2px;
+    }
+  }
+  .toolbar {
+    position: fixed;
+    background-color: @white;
+    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+    .link {
+      --f7-toolbar-link-color: @themeColor;
+    }
+    .toolbar-inner {
+      padding: 0 16px;
+    }
+    .btn-add-reply {
+      padding: 0;
+      min-width: 80px;
+      font-size: 16px;
+    }
+    .comment-navigation {
+      min-width: 62px;
+      display: flex;
+      justify-content: space-between;
+      .link {
+        padding: 0 12px;
+      }
+    }
+  }
 }
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@ -8,8 +8,6 @@
@background-normal: @white;
@autoColor: @black;

-@comment-date: #6d6d72;
-
 .popup, .popover, .sheet-modal {
    .list {
        &:first-child {
--- a/apps/common/mobile/resources/less/ios/icons.less
+++ b/apps/common/mobile/resources/less/ios/icons.less
@ -4,5 +4,16 @@
        &.icon_mask {
            background-color: white;
        }
+
+        &.icon-prev {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
+        }
+        &.icon-next {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
+        }
    }
 }
--- a/apps/common/mobile/resources/less/material/comments.less
+++ b/apps/common/mobile/resources/less/material/comments.less
@ -1,11 +1,8 @@
 .device-android {
-  .wrap-comment {
-    .header-comment {
+  .wrap-comment, .comment-list, .reply-list {
+    .comment-header, .reply-header {
      display: flex;
-      align-items: center;
      .initials {
-        height: 30px;
-        width: 30px;
        border-radius: 50px;
        color: @white;
        display: flex;
@ -15,13 +12,24 @@
        font-size: 14px;
      }
    }
+  }
+
+  .wrap-comment {
+    .comment-header {
+      align-items: center;
+      .initials {
+        height: 30px;
+        width: 30px;
+      }
+    }
    .wrap-textarea {
      .input:not(.input-outline):after {
        content: none;
      }
    }
  }
-  #add-comment-dialog {
+
+  #add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
    .dialog {
      --f7-dialog-text-color: @black;
      .done {
@ -29,4 +37,46 @@
      }
    }
  }
+
+  .comment-list {
+    .item-inner:after {
+      content: none;
+    }
+    .comment-header {
+      .left {
+        display: flex;
+        align-items: center;
+        .initials {
+          width: 40px;
+          height: 40px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+  .reply-list {
+    .reply-header {
+      .left {
+        display: flex;
+        .initials {
+          margin-top: 5px;
+          width: 24px;
+          height: 24px;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+
+  .edit-comment-popup, .edit-reply-popup, #edit-comment-dialog, #edit-reply-dialog {
+    .wrap-comment {
+      .comment-header, .reply-header {
+        .initials {
+          height: 40px;
+          width: 40px;
+        }
+      }
+    }
+  }
+
 }
--- a/apps/common/mobile/resources/less/material/icons.less
+++ b/apps/common/mobile/resources/less/material/icons.less
@ -4,5 +4,16 @@
        &.icon_mask {
            background-color: black;
        }
+
+        &.icon-prev {
+            width: 24px;
+            height: 24px;
+            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
+        }
+        &.icon-next {
+            width: 24px;
+            height: 24px;
+            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
+        }
    }
 }
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@ -125,7 +125,8 @@
      "textMessageDeleteComment": "Do you really want to delete this comment?",
      "textMessageDeleteReply": "Do you really want to delete this reply?",
      "textDeleteReply": "Delete Reply",
-      "textEditComment": "Edit Comment"
+      "textEditComment": "Edit Comment",
+      "textEditReply": "Edit Reply"
    }
  },
  "Settings": {
--- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
+++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
@ -1,13 +1,43 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { f7 } from 'framework7-react';
+import { inject, observer } from "mobx-react";
 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,
+    canReview: stores.storeAppOptions.canReview
+}))
 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);
+    }
+
+    static closeContextMenu() {
+        f7.popover.close(idContextMenuElement, false);
+    }
+
+    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() {
@ -17,23 +47,244 @@ class ContextMenu extends ContextMenuController {
    onMenuItemClick(action) {
        super.onMenuItemClick(action);

-        console.log("on click item");
+        switch (action) {
+            case 'addcomment':
+                Common.Notifications.trigger('addcomment');
+                break;
+            case 'viewcomment':
+                Common.Notifications.trigger('viewcomment');
+                break;
+        }
+
+        console.log("click context menu item: " + action);
+    }
+
+    onDocumentReady() {
+        super.onDocumentReady();
+
+        const api = Common.EditorApi.get();
+        api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
+        api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
    }

    initMenuItems() {
-        return [
-            {
-                text: 'Edit',
-                action: 'edit'
-            }, {
-                text: 'View',
-                action: 'view'
-            }, {
-                icon: 'icon-paste',
-                action: 'review'
+        if ( !Common.EditorApi ) return [];
+
+        const { isEdit, canViewComments, canReview } = this.props;
+
+        const api = Common.EditorApi.get();
+        const stack = api.getSelectedElements();
+        const canCopy = api.can_CopyCut();
+
+        let itemsIcon = [],
+            itemsText = [];
+
+        if ( canCopy ) {
+            itemsIcon.push({
+                caption: /*me.menuCopy*/ 'Copy',
+                event: 'copy',
+                icon: 'icon-copy'
+            });
+        }
+
+        if ( canViewComments && this.isComments && !isEdit ) {
+            itemsText.push({
+                caption: /*me.menuViewComment*/'View Comment',
+                event: 'viewcomment'
+            });
+        }
+
+        let isText = false,
+            isTable = false,
+            isImage = false,
+            isChart = false,
+            isShape = false,
+            isLink = false,
+            lockedText = false,
+            lockedTable = false,
+            lockedImage = false,
+            lockedHeader = false;
+
+        stack.forEach(item => {
+            const objectType = item.get_ObjectType(),
+                    objectValue = item.get_ObjectValue();
+
+            if ( objectType == Asc.c_oAscTypeSelectElement.Header ) {
+                lockedHeader = objectValue.get_Locked();
+            } else
+            if ( objectType == Asc.c_oAscTypeSelectElement.Paragraph ) {
+                lockedText = objectValue.get_Locked();
+                isText = true;
+            } else
+            if ( objectType == Asc.c_oAscTypeSelectElement.Image ) {
+                lockedImage = objectValue.get_Locked();
+                if ( objectValue && objectValue.get_ChartProperties() ) {
+                    isChart = true;
+                } else
+                if ( objectValue && objectValue.get_ShapeProperties() ) {
+                    isShape = true;
+                } else {
+                    isImage = true;
+                }
+            } else
+            if ( objectType == Asc.c_oAscTypeSelectElement.Table ) {
+                lockedTable = objectValue.get_Locked();
+                isTable = true;
+            } else
+            if ( objectType == Asc.c_oAscTypeSelectElement.Hyperlink ) {
+                isLink = true;
            }
-        ];
+        });
+
+        if ( stack.length > 0 ) {
+            const swapItems = function(items, indexBefore, indexAfter) {
+                items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
+            };
+
+            if ( isEdit && !this.isDisconnected ) {
+                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader && canCopy ) {
+                    itemsIcon.push({
+                        // caption: me.menuCut,
+                        event: 'cut',
+                        icon: 'icon-cut'
+                    });
+
+                    // Swap 'Copy' and 'Cut'
+                    swapItems(itemsIcon, 0, 1);
+                }
+
+                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) {
+                    itemsIcon.push({
+                        // caption: me.menuPaste,
+                        event: 'paste',
+                        icon: 'icon-paste'
+                    });
+                }
+
+                // For test
+                if ( this.isComments && canViewComments ) {
+                    itemsText.push({
+                        caption: /*me.menuViewComment*/'View Comment',
+                        event: 'viewcomment'
+                    });
+                }
+
+                const isObject = isShape || isChart || isImage || isTable;
+                const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject);
+                if ( !hideAddComment ) {
+                    itemsText.push({
+                        caption: /*me.menuAddComment*/'Add Comment',
+                        event: 'addcomment'
+                    });
+                }
+                // end test
+
+                if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) {
+                    itemsText.push({
+                        caption: /*me.menuMerge*/'Merge',
+                        event: 'merge'
+                    });
+                }
+
+                if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) {
+                    itemsText.push({
+                        caption: /*me.menuSplit*/'Split',
+                        event: 'split'
+                    });
+                }
+
+                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) {
+                    itemsText.push({
+                        caption: /*me.menuDelete*/'Delete',
+                        event: 'delete'
+                    });
+                }
+
+                if ( isTable && !lockedTable && !lockedText && !lockedHeader ) {
+                    itemsText.push({
+                        caption: /*me.menuDeleteTable*/'Delete Table',
+                        event: 'deletetable'
+                    });
+                }
+
+                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){
+                    itemsText.push({
+                        caption: /*me.menuEdit*/'Edit',
+                        event: 'edit'
+                    });
+                }
+
+                // if ( !_.isEmpty(api.can_AddHyperlink()) && !lockedHeader) {
+                //     arrItems.push({
+                //         caption: me.menuAddLink,
+                //         event: 'addlink'
+                //     });
+                // }
+
+                if ( canReview ) {
+                    if (false /*_inRevisionChange*/) {
+                        itemsText.push({
+                            caption: /*me.menuReviewChange*/'Review Change',
+                            event: 'reviewchange'
+                        });
+                    } else {
+                        itemsText.push({
+                            caption: /*me.menuReview*/'Review',
+                            event: 'review'
+                        });
+                    }
+                }
+
+                if ( this.isComments && canViewComments ) {
+                    itemsText.push({
+                        caption: /*me.menuViewComment*/'View Comment',
+                        event: 'viewcomment'
+                    });
+                }
+
+                /*const isObject = isShape || isChart || isImage || isTable;
+                const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject);
+                if ( !hideAddComment ) {
+                    itemsText.push({
+                        caption: 'Add Comment',
+                        event: 'addcomment'
+                    });
+                }*/
+            }
+        }
+
+        if ( isLink ) {
+            itemsText.push({
+                caption: /*me.menuOpenLink*/'Open Link',
+                event: 'openlink'
+            });
+        }
+
+        if ( Device.phone && itemsText.length > 2 ) {
+            // _actionSheets = arrItems.slice(2);
+            // arrItems = arrItems.slice(0, 2);
+            // arrItems.push({
+            //     caption: me.menuMore,
+            //     event: 'showActionSheet'
+            // });
+            this.extraItems = itemsText.splice(2,itemsText.length, {
+                caption: /*me.menuMore*/'More',
+                event: 'showActionSheet'
+            });
+        }
+
+        return itemsIcon.concat(itemsText);
+        // return [{
+        //         caption: 'Edit',
+        //         event: 'edit'
+        //     }, {
+        //         caption: 'View',
+        //         event: 'view'
+        //     }, {
+        //         icon: 'icon-paste',
+        //         event: 'review'
+        //     }];
    }
 }

-export { ContextMenu, idContextMenuElement };
+export { ContextMenu as default };
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@ -6,7 +6,12 @@ import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx';
 import {InitReviewController as ReviewController} from '../../../../common/mobile/lib/controller/collaboration/Review.jsx';
 import { onAdvancedOptions } from './settings/Download.jsx';
-import {CommentsController, AddCommentController} from "../../../../common/mobile/lib/controller/collaboration/Comments";
+import {
+    CommentsController,
+    AddCommentController,
+    EditCommentController,
+    ViewCommentsController
+} from "../../../../common/mobile/lib/controller/collaboration/Comments";

@inject(
    "storeAppOptions",
@ -335,6 +340,8 @@ class MainController extends Component {
                <ReviewController />
                <CommentsController />
                <AddCommentController />
+                <EditCommentController />
+                <ViewCommentsController />
            </Fragment>
            )
    }
--- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
@ -25,16 +25,14 @@ class ApplicationSettingsController extends Component {
    }

    switchNoCharacters(value) {
-        Common.localStorage.setItem("de-mobile-no-characters", value);
+        LocalStorage.setItem("de-mobile-no-characters", value);

-        const api = Common.EditorApi.get();
-        api.put_ShowParaMarks(value);
+        Common.EditorApi.get().put_ShowParaMarks(value);
    }

    switchShowTableEmptyLine(value) {
-        Common.localStorage.setItem("de-mobile-hidden-borders", value);
-        const api = Common.EditorApi.get();
-        api.put_ShowTableEmptyLine(value);
+        LocalStorage.setItem("de-mobile-hidden-borders", value);
+        Common.EditorApi.get().put_ShowTableEmptyLine(value);
    }

    switchDisplayComments(value) {
@ -51,10 +49,9 @@ class ApplicationSettingsController extends Component {
    }

    switchDisplayResolved(value) {
-        const api = Common.EditorApi.get();
        const displayComments = LocalStorage.getBool("de-mobile-settings-livecomment");
        if (displayComments) {
-            api.asc_showComments(value);
+            Common.EditorApi.get().asc_showComments(value);
            LocalStorage.setBool("de-settings-resolvedcomment", value);
        }
    }
--- a/apps/documenteditor/mobile/src/less/icons-material.less
+++ b/apps/documenteditor/mobile/src/less/icons-material.less
@ -440,16 +440,6 @@
      height: 24px;
      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>');
    }
-    &.icon-prev-comment {
-      width: 24px;
-      height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
-    }
-    &.icon-next-comment {
-      width: 24px;
-      height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
-    }
    &.icon-done-comment {
      width: 24px;
      height: 24px;
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@ -8,10 +8,9 @@ import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
 import Collaboration from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
-import { AddCommentController } from '../../../../common/mobile/lib/controller/collaboration/Comments.jsx';
 import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
-import { ContextMenu, idContextMenuElement } from '../controller/ContextMenu';
+import ContextMenu from '../controller/ContextMenu';

 export default class MainPage extends Component {
    constructor(props) {
@ -25,7 +24,7 @@ export default class MainPage extends Component {
    }

    handleClickToOpenOptions = opts => {
-        f7.popover.close(idContextMenuElement, false);
+        ContextMenu.closeContextMenu();

        this.setState(state => {
            if ( opts == 'edit' )
--- a/apps/documenteditor/mobile/src/store/appOptions.js
+++ b/apps/documenteditor/mobile/src/store/appOptions.js
@ -1,8 +1,23 @@
-import {action, observable} from 'mobx';
+import {makeObservable, action, observable} from 'mobx';

 export class storeAppOptions {
+    constructor() {
+        makeObservable(this, {
+            isEdit: observable,
+            canViewComments: observable,
+            canReview: observable,
+            setConfigOptions: action,
+            setPermissionOptions: action,
+            setCanViewReview: action
+        });
+    }
+
+    isEdit = false;
+    canViewComments = false;
+    canReview = false;
+
    config = {};
-    @action setConfigOptions (config) {
+    setConfigOptions (config) {
        this.config = config;
        this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);
        this.isDesktopApp = config.targetApp == 'desktop';
@ -24,7 +39,7 @@ export class storeAppOptions {
        this.canBack = this.canBackToFolder === true;
        this.canPlugins = false;
    }
-    @action setPermissionOptions (document, licType, params, permissions) {
+    setPermissionOptions (document, licType, params, permissions) {
        this.review = (permissions.review === undefined) ? (permissions.edit !== false) : permissions.review;
        this.canAnalytics = params.asc_getIsAnalyticsEnable();
        this.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
@ -71,7 +86,7 @@ export class storeAppOptions {

        this.canUseReviewPermissions = this.canLicense && this.customization && this.customization.reviewPermissions && (typeof (this.customization.reviewPermissions) == 'object');
    }
-    @action setCanViewReview (value) {
+    setCanViewReview (value) {
        this.canViewReview = value;
    }
 }
--- a/apps/documenteditor/mobile/src/store/applicationSettings.js
+++ b/apps/documenteditor/mobile/src/store/applicationSettings.js
@ -1,45 +1,59 @@
-import {action, observable} from 'mobx';
+import {makeObservable, action, observable} from 'mobx';

 export class storeApplicationSettings {
-   
-    @observable unitMeasurement = 1;
+    constructor() {
+        makeObservable(this, {
+            unitMeasurement: observable
+            , isSpellChecking: observable
+            , isNonprintingCharacters: observable
+            , isHiddenTableBorders: observable
+            , isComments: observable
+            , isResolvedComments: observable
+            , macrosMode: observable
+            , changeSpellCheck: action
+            , changeUnitMeasurement: action
+            , changeNoCharacters: action
+            , changeShowTableEmptyLine: action
+            , changeDisplayComments: action
+            , changeDisplayResolved: action
+            , changeMacrosSettings: action
+        })
+    }

-    @observable isSpellChecking = true;
+    unitMeasurement = 1;
+    isSpellChecking = true;
+    isNonprintingCharacters = false;
+    isHiddenTableBorders = false;
+    isComments = true;
+    isResolvedComments = true;
+    macrosMode = 0;

-    @observable isNonprintingCharacters = false;
-    @observable isHiddenTableBorders = false;
-
-    @observable isComments = true;
-    @observable isResolvedComments = true;
-
-    @observable macrosMode = 0;
-
-    @action changeUnitMeasurement(value) {
+    changeUnitMeasurement(value) {
        this.unitMeasurement = +value;
    }

-    @action changeSpellCheck(value) {
+    changeSpellCheck(value) {
        this.isSpellChecking = value;
    }

-    @action changeNoCharacters(value) {
+    changeNoCharacters(value) {
        this.isNonprintingCharacters = value;
    }

-    @action changeShowTableEmptyLine(value) {
+    changeShowTableEmptyLine(value) {
        this.isHiddenTableBorders = value;
    }

-    @action changeDisplayComments(value) {
+    changeDisplayComments(value) {
        this.isComments = value;
        if (!value) this.changeDisplayResolved(value);
    }

-    @action changeDisplayResolved(value) {
+    changeDisplayResolved(value) {
        this.isResolvedComments = value;
    }

-    @action changeMacrosSettings(value) {
+    changeMacrosSettings(value) {
        this.macrosMode = +value;
    }
 }
--- a/apps/documenteditor/mobile/src/store/tableSettings.js
+++ b/apps/documenteditor/mobile/src/store/tableSettings.js
@ -1,7 +1,11 @@
-import {action, observable, computed} from 'mobx';
+import {makeObservable, action, observable, computed} from 'mobx';
 import {f7} from 'framework7-react';

 export class storeTableSettings {
+    constructor() {
+        makeObservable(this)
+    }
+
    @observable _templates = [];
    @action initTableTemplates (templates) {
        this._templates = templates;
@ -67,7 +71,6 @@ export class storeTableSettings {
    // Border style
    @observable cellBorders;
    @observable cellBorderWidth = 0.5;
-    @observable cellBorderWidth = 0.5;
    @observable cellBorderColor = '000000';

    borderSizeTransform () {
--- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/documenteditor/mobile/src/view/add/AddOther.jsx
@ -202,7 +202,7 @@ const AddOther = props => {
        <List>
            <ListItem title={_t.textComment} onClick={() => {
                props.closeModal();
-                props.storeComments.openAddComment(true);
+                Common.Notifications.trigger('addcomment');
            }}>
                <Icon slot="media" icon="icon-insert-comment"></Icon>
            </ListItem>
--- a/apps/presentationeditor/mobile/src/less/icons-ios.less
+++ b/apps/presentationeditor/mobile/src/less/icons-ios.less
@ -187,18 +187,6 @@
      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
    }

-    &.icon-prev, &.icon-prev-comment {
-      width: 22px;
-      height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
-    }
-
-    &.icon-next, &.icon-next-comment {
-      width: 22px;
-      height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
-    }
-
    &.icon-table-add-column-left {
      width: 22px;
      height: 22px;
--- a/apps/presentationeditor/mobile/src/less/icons-material.less
+++ b/apps/presentationeditor/mobile/src/less/icons-material.less
@ -471,18 +471,6 @@
      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>');
    }

-    &.icon-prev-comment {
-      width: 24px;
-      height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
-    }
-
-    &.icon-next-comment {
-      width: 24px;
-      height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
-    }
-
    &.icon-done-comment {
      width: 24px;
      height: 24px;
--- a/apps/presentationeditor/mobile/src/store/appOptions.js
+++ b/apps/presentationeditor/mobile/src/store/appOptions.js
@ -1,8 +1,17 @@
-import {action, observable} from 'mobx';
+import {makeObservable, action, observable} from 'mobx';

 export class storeAppOptions {
+    constructor() {
+        makeObservable(this, {
+            isEdit: observable,
+            setConfigOptions: action,
+            setPermissionOptions: action
+        });
+    }
+
+    isEdit = false;
    config = {};
-    @action setConfigOptions (config) {
+    setConfigOptions (config) {
        this.config = config;
        this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);
        this.isDesktopApp = config.targetApp == 'desktop';
@ -24,7 +33,7 @@ export class storeAppOptions {
        this.canBack = this.canBackToFolder === true;
        this.canPlugins = false;
    }
-    @action setPermissionOptions (document, licType, params, permissions) {
+    setPermissionOptions (document, licType, params, permissions) {
        this.review = (permissions.review === undefined) ? (permissions.edit !== false) : permissions.review;
        this.canAnalytics = params.asc_getIsAnalyticsEnable();
        this.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
--- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
@ -123,16 +123,6 @@
            height: 22px;
            .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
        }
-        &.icon-prev, &.icon-prev-comment {
-            width: 22px;
-            height: 22px;
-            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
-        }
-        &.icon-next, &.icon-next-comment {
-            width: 22px;
-            height: 22px;
-            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
-        }
        &.icon-expand-down {
            width: 22px;
            height: 22px;
--- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
@ -365,16 +365,6 @@
            height: 24px;
            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>');
        }
-        &.icon-prev-comment {
-            width: 24px;
-            height: 24px;
-            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
-        }
-        &.icon-next-comment {
-            width: 24px;
-            height: 24px;
-            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
-        }
        &.icon-done-comment {
            width: 24px;
            height: 24px;
--- a/vendor/framework7-react/babel.config.js
+++ b/vendor/framework7-react/babel.config.js
@ -9,6 +9,6 @@ module.exports = {
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-proposal-decorators', {'legacy': true }],
-    ['@babel/plugin-proposal-class-properties',{'loose':true}],
+    ['@babel/plugin-proposal-class-properties',{'loose':false}],
  ],
 };
--- a/vendor/framework7-react/package.json
+++ b/vendor/framework7-react/package.json
@ -58,8 +58,8 @@
    "less": "^3.13.1",
    "less-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.9.0",
-    "mobx": "^5.15.7",
-    "mobx-react": "^6.3.1",
+    "mobx": "^6.1.8",
+    "mobx-react": "^7.1.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "ora": "^4.1.1",
    "postcss-loader": "^3.0.0",