Merge pull request #213 from ONLYOFFICE/feature/mobile-settings

Feature/mobile settings

apps/common/mobile/lib/controller/Collaboration.js

@@ -33,64 +33,78 @@
 
 /**
  *  Collaboration.js
- *  Document Editor
  *
- *  Created by Julia Svinareva on 14/5/19
+ *  Created by Julia Svinareva on 12/7/19
  *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
  *
  */
+
+if (Common === undefined)
+    var Common = {};
+
+Common.Controllers = Common.Controllers || {};
+
 define([
     'core',
     'jquery',
     'underscore',
     'backbone',
-    'documenteditor/mobile/app/view/Collaboration'
+    'common/mobile/lib/view/Collaboration'
 ], function (core, $, _, Backbone) {
     'use strict';
 
-    DE.Controllers.Collaboration = Backbone.Controller.extend(_.extend((function() {
+    Common.Controllers.Collaboration = Backbone.Controller.extend(_.extend((function() {
         // Private
-        var _settings = [],
+        var rootView,
-            _headerType = 1,
+            _userId,
-             rootView,
+            editUsers = [],
+            editor = !!window.DE ? 'DE' : !!window.PE ? 'PE' : 'SSE',
             displayMode = "Markup",
             arrChangeReview = [],
             dateChange = [],
-            _fileKey,
+            _fileKey;
-            _userId,
+
-            editUsers = [];
 
         return {
             models: [],
             collections: [],
             views: [
-                'Collaboration'
+                'Common.Views.Collaboration'
             ],
 
             initialize: function() {
                 var me = this;
                 me.addListeners({
-                    'Collaboration': {
+                    'Common.Views.Collaboration': {
                         'page:show' : me.onPageShow
                     }
                 });
+                Common.NotificationCenter.on('comments:filterchange',   _.bind(this.onFilterChange, this));
             },
 
             setApi: function(api) {
                 this.api = api;
-                this.api.asc_registerCallback('asc_onShowRevisionsChange', _.bind(this.changeReview, this));
                 this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onChangeEditUsers, this));
                 this.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(this.onChangeEditUsers, this));
+                this.api.asc_registerCallback('asc_onAddComment', _.bind(this.onApiAddComment, this));
+                this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this));
+                this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this));
+                this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this));
+                if (editor === 'DE') {
+                    this.api.asc_registerCallback('asc_onShowRevisionsChange', _.bind(this.changeReview, this));
+                }
             },
 
             onLaunch: function () {
-                this.createView('Collaboration').render();
+                this.createView('Common.Views.Collaboration').render();
             },
 
             setMode: function(mode) {
                 this.appConfig = mode;
-                _fileKey = mode.fileKey;
                 _userId = mode.user.id;
+                if (editor === 'DE') {
+                    _fileKey = mode.fileKey;
+                }
                 return this;
             },
 
@@ -99,7 +113,8 @@ define([
                 var me = this,
                     isAndroid = Framework7.prototype.device.android === true,
                     modalView,
-                    mainView = DE.getController('Editor').getView('Editor').f7View;
+                    appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
+                    mainView = appPrefix.getController('Editor').getView('Editor').f7View;
 
                 uiApp.closeModal();
 
@@ -107,7 +122,7 @@ define([
                     modalView = $$(uiApp.pickerModal(
                         '<div class="picker-modal settings container-collaboration">' +
                         '<div class="view collaboration-root-view navbar-through">' +
-                        this.getView('Collaboration').rootLayout() +
+                        this.getView('Common.Views.Collaboration').rootLayout() +
                         '</div>' +
                         '</div>'
                     )).on('opened', function () {
@@ -129,7 +144,7 @@ define([
                         '<div class="popover-inner">' +
                         '<div class="content-block">' +
                         '<div class="view popover-view collaboration-root-view navbar-through">' +
-                        this.getView('Collaboration').rootLayout() +
+                        this.getView('Common.Views.Collaboration').rootLayout() +
                         '</div>' +
                         '</div>' +
                         '</div>' +
@@ -148,10 +163,26 @@ define([
                     domCache: true
                 });
 
-                Common.NotificationCenter.trigger('collaborationcontainer:show');
+                if (!Common.SharedSettings.get('phone')) {
-                this.onPageShow(this.getView('Collaboration'));
+                    this.picker = $$(modalView);
+                    var $overlay = $('.modal-overlay');
 
-                DE.getController('Toolbar').getView('Toolbar').hideSearch();
+                    $$(this.picker).on('opened', function () {
+                        $overlay.on('removeClass', function () {
+                            if (!$overlay.hasClass('modal-overlay-visible')) {
+                                $overlay.addClass('modal-overlay-visible')
+                            }
+                        });
+                    }).on('close', function () {
+                        $overlay.off('removeClass');
+                        $overlay.removeClass('modal-overlay-visible')
+                    });
+                }
+
+                Common.NotificationCenter.trigger('collaborationcontainer:show');
+                this.onPageShow(this.getView('Common.Views.Collaboration'));
+
+                appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
             },
 
             rootView : function() {
@@ -173,13 +204,69 @@ define([
                 } else if('#edit-users-view' == pageId) {
                     me.initEditUsers();
                     Common.Utils.addScrollIfNeed('.page[data-page=edit-users-view]', '.page[data-page=edit-users-view] .page-content');
+                } else if ('#comments-view' == pageId) {
+                    me.initComments();
+                    Common.Utils.addScrollIfNeed('.page[data-page=comments-view]', '.page[data-page=comments-view] .page-content');
                 } else {
-                    if(!this.appConfig.canReview) {
+                    if(editor === 'DE' && !this.appConfig.canReview) {
                         $('#reviewing-settings').hide();
                     }
                 }
             },
 
+            //Edit users
+
+            onChangeEditUsers: function(users) {
+                editUsers = users;
+            },
+
+            initEditUsers: function() {
+                var usersArray = [];
+                _.each(editUsers, function(item){
+                    var fio = item.asc_getUserName().split(' ');
+                    var initials = fio[0].substring(0, 1).toUpperCase();
+                    if (fio.length > 1) {
+                        initials += fio[fio.length - 1].substring(0, 1).toUpperCase();
+                    }
+                    if(!item.asc_getView()) {
+                        var userAttr = {
+                            color: item.asc_getColor(),
+                            id: item.asc_getId(),
+                            idOriginal: item.asc_getIdOriginal(),
+                            name: item.asc_getUserName(),
+                            view: item.asc_getView(),
+                            initial: initials
+                        };
+                        if(item.asc_getIdOriginal() == _userId) {
+                            usersArray.unshift(userAttr);
+                        } else {
+                            usersArray.push(userAttr);
+                        }
+                    }
+                });
+                var userSort = _.chain(usersArray).groupBy('idOriginal').value();
+                var templateUserItem = _.template([
+                    '<%  _.each(users, function (user) { %>',
+                    '<li id="<%= user[0].id %>" class="<% if (user[0].view) {%> viewmode <% } %> item-content">' +
+                    '<div class="user-name item-inner">' +
+                    '<div class="color" style="background-color: <%= user[0].color %>;"><%= user[0].initial %></div>'+
+                    '<label><%= user[0].name %></label>' +
+                    '<% if (user.length>1) { %><label class="length"> (<%= user.length %>)</label><% } %>' +
+                    '</div>'+
+                    '</li>',
+                    '<% }); %>'].join(''));
+                var templateUserList = _.template(
+                    '<div class="item-content"><div class="item-inner">' +
+                    this.textEditUser +
+                    '</div></div>' +
+                    '<ul>' +
+                    templateUserItem({users: userSort}) +
+                    '</ul>');
+                $('#user-list').html(templateUserList());
+            },
+
+            //Review
+
             initReviewingSettingsView: function () {
                 var me = this;
                 $('#settings-review input:checkbox').attr('checked', this.appConfig.isReviewOnly || Common.localStorage.getBool("de-mobile-track-changes-" + (_fileKey || '')));
@@ -204,13 +291,14 @@ define([
                     $checkbox.attr('checked', true);
                 } else {
                     this.api.asc_SetTrackRevisions(state);
-                    Common.localStorage.setItem("de-mobile-track-changes-" + (_fileKey || ''), state ? 1 : 0);
+                    var prefix = !!window.DE ? 'de' : !!window.PE ? 'pe' : 'sse';
+                    Common.localStorage.setItem(prefix + "-mobile-track-changes-" + (_fileKey || ''), state ? 1 : 0);
                 }
             },
 
             onAcceptAllClick: function() {
                 if (this.api) {
-                   this.api.asc_AcceptAllChanges();
+                    this.api.asc_AcceptAllChanges();
                 }
             },
 
@@ -517,15 +605,15 @@ define([
                                 changetext += '</b>';
                                 changetext += proptext;
                                 break;
-                                case Asc.c_oAscRevisionsChangeType.TablePr:
+                            case Asc.c_oAscRevisionsChangeType.TablePr:
-                                    changetext = me.textTableChanged;
+                                changetext = me.textTableChanged;
-                                    break;
+                                break;
-                                case Asc.c_oAscRevisionsChangeType.RowsAdd:
+                            case Asc.c_oAscRevisionsChangeType.RowsAdd:
-                                    changetext = me.textTableRowsAdd;
+                                changetext = me.textTableRowsAdd;
-                                    break;
+                                break;
-                                case Asc.c_oAscRevisionsChangeType.RowsRem:
+                            case Asc.c_oAscRevisionsChangeType.RowsRem:
-                                    changetext = me.textTableRowsDel;
+                                changetext = me.textTableRowsDel;
-                                    break;
+                                break;
 
                         }
                         var date = (item.get_DateTime() == '') ? new Date() : new Date(item.get_DateTime()),
@@ -577,56 +665,215 @@ define([
                 }
             },
 
-            onChangeEditUsers: function(users) {
+            //Comments
-                editUsers = users;
+
+            groupCollectionComments: [],
+            collectionComments: [],
+            groupCollectionFilter: [],
+            filter: [],
+
+            initComments: function() {
+                this.getView('Common.Views.Collaboration').renderComments((this.groupCollectionFilter.length !== 0) ? this.groupCollectionFilter : (this.collectionComments.length !== 0) ? this.collectionComments : false);
+                $('.comment-quote').single('click', _.bind(this.onSelectComment, this));
             },
 
-            initEditUsers: function() {
+            readSDKReplies: function (data) {
-                var usersArray = [];
+                var i = 0,
-                _.each(editUsers, function(item){
+                    replies = [],
-                    var fio = item.asc_getUserName().split(' ');
+                    date = null;
-                    var initials = fio[0].substring(0, 1).toUpperCase();
+                var repliesCount = data.asc_getRepliesCount();
-                    if (fio.length > 1) {
+                if (repliesCount) {
-                        initials += fio[fio.length - 1].substring(0, 1).toUpperCase();
+                    for (i = 0; i < repliesCount; ++i) {
+                        date = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) :
+                            ((data.asc_getReply(i).asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
+
+                        var user = _.findWhere(editUsers, {idOriginal: data.asc_getReply(i).asc_getUserId()});
+                        replies.push({
+                            userid              : data.asc_getReply(i).asc_getUserId(),
+                            username            : data.asc_getReply(i).asc_getUserName(),
+                            usercolor           : (user) ? user.asc_getColor() : null,
+                            date                : this.dateToLocaleTimeString(date),
+                            reply               : data.asc_getReply(i).asc_getText(),
+                            time                : date.getTime()
+                        });
                     }
-                    if(!item.asc_getView()) {
+                }
-                        var userAttr = {
+                return replies;
-                            color: item.asc_getColor(),
+            },
-                            id: item.asc_getId(),
+
-                            idOriginal: item.asc_getIdOriginal(),
+            readSDKComment: function(id, data) {
-                            name: item.asc_getUserName(),
+                var date = (data.asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getOnlyOfficeTime())) :
-                            view: item.asc_getView(),
+                    ((data.asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getTime())));
-                            initial: initials
+                var user = _.findWhere(editUsers, {idOriginal: data.asc_getUserId()}),
-                        };
+                    groupname = id.substr(0, id.lastIndexOf('_')+1).match(/^(doc|sheet[0-9_]+)_/);
-                        if(item.asc_getIdOriginal() == _userId) {
+                var comment = {
-                            usersArray.unshift(userAttr);
+                    uid                 : id,
-                        } else {
+                    userid              : data.asc_getUserId(),
-                            usersArray.push(userAttr);
+                    username            : data.asc_getUserName(),
+                    usercolor           : (user) ? user.asc_getColor() : null,
+                    date                : this.dateToLocaleTimeString(date),
+                    quote               : data.asc_getQuoteText(),
+                    comment             : data.asc_getText(),
+                    resolved            : data.asc_getSolved(),
+                    unattached          : !_.isUndefined(data.asc_getDocumentFlag) ? data.asc_getDocumentFlag() : false,
+                    time                : date.getTime(),
+                    replys              : [],
+                    groupName           : (groupname && groupname.length>1) ? groupname[1] : null
+                }
+                if (comment) {
+                    var replies = this.readSDKReplies(data);
+                    if (replies.length) {
+                        comment.replys = replies;
+                    }
+                }
+                return comment;
+            },
+
+            onApiChangeCommentData: function(id, data) {
+                var me = this,
+                    i = 0,
+                    date = null,
+                    replies = null,
+                    repliesCount = 0,
+                    dateReply = null,
+                    comment = _.findWhere(me.collectionComments, {uid: id}) || this.findCommentInGroup(id);
+
+                if (comment) {
+
+                    date = (data.asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getOnlyOfficeTime())) :
+                        ((data.asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getTime())));
+
+                    var user = _.findWhere(editUsers, {idOriginal: data.asc_getUserId()});
+                    comment.comment = data.asc_getText();
+                    comment.userid = data.asc_getUserId();
+                    comment.username = data.asc_getUserName();
+                    comment.usercolor = (user) ? user.asc_getColor() : null;
+                    comment.resolved = data.asc_getSolved();
+                    comment.quote = data.asc_getQuoteText();
+                    comment.time = date.getTime();
+                    comment.date = me.dateToLocaleTimeString(date);
+
+                    replies = _.clone(comment.replys);
+
+                    replies.length = 0;
+
+                    repliesCount = data.asc_getRepliesCount();
+                    for (i = 0; i < repliesCount; ++i) {
+
+                        dateReply = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) :
+                            ((data.asc_getReply(i).asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
+
+                        user = _.findWhere(editUsers, {idOriginal: data.asc_getReply(i).asc_getUserId()});
+                        replies.push({
+                            userid              : data.asc_getReply(i).asc_getUserId(),
+                            username            : data.asc_getReply(i).asc_getUserName(),
+                            usercolor           : (user) ? user.asc_getColor() : null,
+                            date                : me.dateToLocaleTimeString(dateReply),
+                            reply               : data.asc_getReply(i).asc_getText(),
+                            time                : dateReply.getTime()
+                        });
+                    }
+                    comment.replys = replies;
+                    if($('.page-comments').length > 0) {
+                        this.initComments();
+                    }
+                }
+            },
+
+            onApiAddComment: function (id, data) {
+                var comment = this.readSDKComment(id, data);
+                if (comment) {
+                    comment.groupName ? this.addCommentToGroupCollection(comment) : this.collectionComments.push(comment);
+                }
+                if($('.page-comments').length > 0) {
+                    this.initComments();
+                }
+            },
+
+            onApiAddComments: function (data) {
+                for (var i = 0; i < data.length; ++i) {
+                    var comment = this.readSDKComment(data[i].asc_getId(), data[i]);
+                    comment.groupName ? this.addCommentToGroupCollection(comment) : this.collectionComments.push(comment);
+                }
+                if($('.page-comments').length > 0) {
+                    this.initComments();
+                }
+            },
+
+            stringOOToLocalDate: function (date) {
+                if (typeof date === 'string')
+                    return parseInt(date);
+                return 0;
+            },
+
+            addCommentToGroupCollection: function (comment) {
+                var 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);
+                }
+            },
+
+            findCommentInGroup: function (id) {
+                for (var name in this.groupCollectionComments) {
+                    var store = this.groupCollectionComments[name],
+                        model = _.findWhere(store, {uid: id});
+                    if (model) return model;
+                }
+            },
+
+            onApiRemoveComment: function (id) {
+                function remove (collection, key) {
+                    if(collection instanceof Array) {
+                        var index = collection.indexOf(key);
+                        if(index != -1) {
+                            collection.splice(index, 1);
                         }
                     }
-                });
+                }
-                var userSort = _.chain(usersArray).groupBy('idOriginal').value();
+                if (this.groupCollectionComments) {
-                var templateUserItem = _.template([
+                    for (var name in this.groupCollectionComments) {
-                    '<%  _.each(users, function (user) { %>',
+                        var store = this.groupCollectionComments[name],
-                    '<li id="<%= user[0].id %>" class="<% if (user[0].view) {%> viewmode <% } %> item-content">' +
+                            comment = _.findWhere(store, {uid: id});
-                    '<div class="user-name item-inner">' +
+                        if (comment) {
-                    '<div class="color" style="background-color: <%= user[0].color %>;"><%= user[0].initial %></div>'+
+                            remove(this.groupCollectionComments[name], comment);
-                    '<label><%= user[0].name %></label>' +
+                            if (this.filter.indexOf(name) != -1) {
-                    '<% if (user.length>1) { %><label class="length"> (<%= user.length %>)</label><% } %>' +
+                                remove(this.groupCollectionFilter, comment);
-                    '</div>'+
+                            }
-                    '</li>',
+                        }
-                    '<% }); %>'].join(''));
+                    }
-                var templateUserList = _.template(
+                }
-                    '<div class="item-content"><div class="item-inner">' +
+                if (this.collectionComments.length > 0) {
-                    this.textEditUser +
+                    var comment = _.findWhere(this.collectionComments, {uid: id});
-                    '</div></div>' +
+                    if (comment) {
-                    '<ul>' +
+                        remove(this.collectionComments, comment);
-                    templateUserItem({users: userSort}) +
+                    }
-                    '</ul>');
+                }
-                $('#user-list').html(templateUserList());
+                if($('.page-comments').length > 0) {
+                    this.initComments();
+                }
             },
 
+            onFilterChange: function (filter) {
+                if (filter) {
+                    var me = this,
+                        comments = [];
+                    this.filter = filter;
+                    filter.forEach(function(item){
+                        if (!me.groupCollectionComments[item])
+                            me.groupCollectionComments[item] = [];
+                        comments = comments.concat(me.groupCollectionComments[item]);
+                    });
+                    this.groupCollectionFilter = comments;
+                }
+            },
 
+            onSelectComment: function (e) {
+                var id = $(e.currentTarget).data('id');
+                this.api.asc_selectComment(id);
+            },
 
 
             textInserted: '<b>Inserted:</b>',
@@ -690,5 +937,5 @@ define([
             textEditUser: 'Document is currently being edited by several users.'
 
         }
-    })(), DE.Controllers.Collaboration || {}))
+    })(), Common.Controllers.Collaboration || {}))
 });

apps/common/mobile/lib/template/Collaboration.template

@@ -20,6 +20,16 @@
                                 </div>
                             </a>
                         </li>
+                        <li>
+                            <a id="comments-settings" class="item-link" data-page="#comments-view">
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title"><%= scope.textСomments %></div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <% if (editor === 'DE') { %>
                         <li>
                             <a id="reviewing-settings" class="item-link" data-page="#reviewing-settings-view">
                                 <div class="item-content">
@@ -29,6 +39,7 @@
                                 </div>
                             </a>
                         </li>
+                        <% } %>
                     </ul>
                 </div>
             </div>
@@ -36,6 +47,25 @@
     </div>
 </div>
 
+<!-- Editable Users view -->
+<div id="edit-users-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textEditUsers %></div>
+            <div class="right sliding"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page page-change" data-page="edit-users-view">
+            <div class="page-content">
+                <div id="user-list" class="list-block">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Reviewing Settings view -->
 <div id="reviewing-settings-view">
     <div class="navbar">
@@ -137,14 +167,14 @@
                             </label>
                         </li>
                         <li>
-                             <label class="label-radio item-content">
+                            <label class="label-radio item-content">
-                                 <input type="radio" name="doc-orientation" value="Original">
+                                <input type="radio" name="doc-orientation" value="Original">
-                                 <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                 <div class="item-inner">
+                                <div class="item-inner">
-                                     <div class="item-title"><%= scope.textOriginal %></div>
+                                    <div class="item-title"><%= scope.textOriginal %></div>
-                                 </div>
+                                </div>
-                             </label>
+                            </label>
-                         </li>
+                        </li>
                     </ul>
                 </div>
 
@@ -170,7 +200,7 @@
                 <a href="#" id="btn-prev-change" class="link icon-only"><i class="icon icon-prev-change"></i></a>
                 <a href="#" id="btn-next-change" class="link icon-only"><i class="icon icon-next-change"></i></a>
                 </span>
-                <span class="right-buttons">
+                    <span class="right-buttons">
                 <a href="#" id="btn-goto-change" class="link icon-only" style="display: none;"><i class="icon icon-goto"></i></a>
                 <span class="accept-reject">
                 <a href="#" id="btn-accept-change" class="link icon-only"><i class="icon icon-accept"></i></a>
@@ -188,19 +218,20 @@
     </div>
 </div>
 
-<!-- Editable Users view -->
+<!-- Comments view -->
-<div id="edit-users-view">
+<div id="comments-view">
     <div class="navbar">
         <div class="navbar-inner">
             <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textEditUsers %></div>
+            <div class="center sliding"><%= scope.textСomments %></div>
             <div class="right sliding"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
         </div>
     </div>
     <div class="pages">
-        <div class="page page-change" data-page="edit-users-view">
+        <div class="page page-comments" data-page="comments-view">
             <div class="page-content">
-                <div id="user-list" class="list-block">
+                <div class="list-block">
+                    <ul id="comments-list"></ul>
                 </div>
             </div>
         </div>

apps/common/mobile/lib/view/Collaboration.js

@@ -33,22 +33,26 @@
 
 /**
  *  Collaboration.js
- *  Document Editor
  *
- *  Created by Julia Svinareva on 14/5/19
+ *  Created by Julia Svinareva on 12/7/19
  *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
  *
  */
 
+if (Common === undefined)
+    var Common = {};
+
+Common.Views = Common.Views || {};
+
 define([
-    'text!documenteditor/mobile/app/template/Collaboration.template',
+    'text!common/mobile/lib/template/Collaboration.template',
     'jquery',
     'underscore',
     'backbone'
 ], function (settingsTemplate, $, _, Backbone) {
     'use strict';
 
-    DE.Views.Collaboration = Backbone.View.extend(_.extend((function() {
+    Common.Views.Collaboration = Backbone.View.extend(_.extend((function() {
         // private
 
         return {
@@ -81,7 +85,8 @@ define([
                     android : Common.SharedSettings.get('android'),
                     phone   : Common.SharedSettings.get('phone'),
                     orthography: Common.SharedSettings.get('sailfish'),
-                    scope   : this
+                    scope   : this,
+                    editor  : !!window.DE ? 'DE' : !!window.PE ? 'PE' : 'SSE'
                 }));
 
                 return this;
@@ -119,7 +124,10 @@ define([
             },
 
             showPage: function(templateId, animate) {
-                var rootView = DE.getController('Collaboration').rootView();
+                var me = this;
+                var prefix = !!window.DE ? DE : !!window.PE ? PE : SSE;
+                var rootView = prefix.getController('Common.Controllers.Collaboration').rootView();
+
 
                 if (rootView && this.layout) {
                     var $content = this.layout.find(templateId);
@@ -138,6 +146,44 @@ define([
                 }
             },
 
+            renderComments: function (comments) {
+                var $listComments = $('#comments-list'),
+                    items = [];
+
+                _.each(comments, function (comment) {
+                    var itemTemplate = [
+                        '<li class="comment item-content">',
+                        '<div class="item-inner">',
+                        '<p class="user-name"><%= item.username %></p>',
+                        '<p class="comment-date"><%= item.date %></p>',
+                        '<% if(item.quote) {%>',
+                        '<p class="comment-quote" data-id="<%= item.uid %>"><%= item.quote %></p>',
+                        '<% } %>',
+                        '<p class="comment-text"><%= item.comment %></p>',
+                        '<% if(replys > 0) {%>',
+                        '<ul class="list-reply">',
+                        '<% _.each(item.replys, function (reply) { %>',
+                        '<li class="reply-item">',
+                        '<p class="user-name"><%= reply.username %></p>',
+                        '<p class="reply-date"><%= reply.date %></p>',
+                        '<p class="reply-text"><%= reply.reply %></p>',
+                        '</li>',
+                        '<% }); %>',
+                        '</ul>',
+                        '<% } %>',
+                        '</div>',
+                        '</li>'
+                    ].join('');
+                    items.push(_.template(itemTemplate)({
+                        android: Framework7.prototype.device.android,
+                        item: comment,
+                        replys: comment.replys.length
+                    }));
+                });
+
+                $listComments.html(items);
+            },
+
 
 
             textCollaboration: 'Collaboration',
@@ -155,5 +201,5 @@ define([
             textEditUsers: 'Users'
 
         }
-    })(), DE.Views.Collaboration || {}))
+    })(), Common.Views.Collaboration || {}))
 });

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

@@ -59,4 +59,99 @@
   .page-content .list-block:first-child {
     margin-top: -1px;
   }
+}
+
+//Edit users
+@initialEditUser: #373737;
+
+#user-list {
+  .item-content {
+    padding-left: 0;
+  }
+  .item-inner {
+    justify-content: flex-start;
+    padding-left: 15px;
+  }
+  .length {
+    margin-left: 4px;
+  }
+  .color {
+    min-width: 40px;
+    min-height: 40px;
+    margin-right: 20px;
+    text-align: center;
+    border-radius: 50px;
+    line-height: 40px;
+    color: @initialEditUser;
+    font-weight: 500;
+
+  }
+  ul:before {
+    content: none;
+  }
+}
+
+//Comments
+.page-comments {
+  .list-block .item-inner {
+    display: block;
+    padding: 16px 0;
+    word-wrap: break-word;
+  }
+  p {
+    margin: 0;
+  }
+  .user-name {
+    font-size: 17px;
+    line-height: 22px;
+    color: #000000;
+    margin: 0;
+    font-weight: bold;
+  }
+  .comment-date, .reply-date {
+    font-size: 12px;
+    line-height: 18px;
+    color: #6d6d72;
+    margin: 0;
+    margin-top: 0px;
+  }
+  .comment-text, .reply-text {
+    color: #000000;
+    font-size: 15px;
+    line-height: 25px;
+    margin: 0;
+    max-width: 100%;
+    padding-right: 15px;
+  }
+  .reply-item {
+    margin-top: 15px;
+    .user-name {
+      padding-top: 16px;
+    }
+    &:before {
+      content: '';
+      position: absolute;
+      left: auto;
+      bottom: 0;
+      right: auto;
+      top: 0;
+      height: 1px;
+      width: 100%;
+      background-color: @listBlockBorderColor;
+      display: block;
+      z-index: 15;
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+    }
+  }
+  .comment-quote {
+    color: @themeColor;
+    border-left: 1px solid @themeColor;
+    padding-left: 10px;
+    margin: 5px 0;
+    font-size: 15px;
+  }
+}
+.settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
 }

apps/common/mobile/resources/less/material/_collaboration.less

@@ -57,4 +57,100 @@
   .page-content .list-block:first-child {
     margin-top: -1px;
   }
+}
+
+
+//Edit users
+@initialEditUser: #373737;
+
+#user-list {
+  .item-content {
+    padding-left: 0;
+  }
+  .item-inner {
+    justify-content: flex-start;
+    padding-left: 15px;
+  }
+  .length {
+    margin-left: 4px;
+  }
+  .color {
+    min-width: 40px;
+    min-height: 40px;
+    margin-right: 20px;
+    text-align: center;
+    border-radius: 50px;
+    line-height: 40px;
+    color: @initialEditUser;
+    font-weight: 400;
+  }
+  ul:before {
+    content: none;
+  }
+}
+
+
+//Comments
+.page-comments {
+  .list-block .item-inner {
+    display: block;
+    padding: 16px 0;
+    word-wrap: break-word;
+  }
+  p {
+    margin: 0;
+  }
+  .user-name {
+    font-size: 17px;
+    line-height: 22px;
+    color: #000000;
+    margin: 0;
+    font-weight: bold;
+  }
+  .comment-date, .reply-date {
+    font-size: 12px;
+    line-height: 18px;
+    color: #6d6d72;
+    margin: 0;
+    margin-top: 0px;
+  }
+  .comment-text, .reply-text {
+    color: #000000;
+    font-size: 15px;
+    line-height: 25px;
+    margin: 0;
+    max-width: 100%;
+    padding-right: 15px;
+  }
+  .reply-item {
+    margin-top: 15px;
+    .user-name {
+      padding-top: 16px;
+    }
+    &:before {
+      content: '';
+      position: absolute;
+      left: auto;
+      bottom: 0;
+      right: auto;
+      top: 0;
+      height: 1px;
+      width: 100%;
+      background-color: @listBlockBorderColor;
+      display: block;
+      z-index: 15;
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+    }
+  }
+  .comment-quote {
+    color: @themeColor;
+    border-left: 1px solid @themeColor;
+    padding-left: 10px;
+    margin: 5px 0;
+    font-size: 15px;
+  }
+}
+.settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
 }

apps/documenteditor/mobile/app-dev.js

@@ -151,7 +151,7 @@ require([
             'AddShape',
             'AddImage',
             'AddOther',
-            'Collaboration'
+            'Common.Controllers.Collaboration'
         ]
     });
 
@@ -222,7 +222,7 @@ require([
         'documenteditor/mobile/app/controller/add/AddShape',
         'documenteditor/mobile/app/controller/add/AddImage',
         'documenteditor/mobile/app/controller/add/AddOther',
-        'documenteditor/mobile/app/controller/Collaboration'
+        'common/mobile/lib/controller/Collaboration'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/documenteditor/mobile/app.js

@@ -162,7 +162,7 @@ require([
             'AddShape',
             'AddImage',
             'AddOther',
-            'Collaboration'
+            'Common.Controllers.Collaboration'
         ]
     });
 
@@ -233,7 +233,7 @@ require([
         'documenteditor/mobile/app/controller/add/AddShape',
         'documenteditor/mobile/app/controller/add/AddImage',
         'documenteditor/mobile/app/controller/add/AddOther',
-        'documenteditor/mobile/app/controller/Collaboration'
+        'common/mobile/lib/controller/Collaboration'
     ], function() {
         app.start();
     });

apps/documenteditor/mobile/app/controller/DocumentHolder.js

@@ -149,14 +149,14 @@ define([
                         }
                     });
                 } else if ('review' == eventName) {
-                    var getCollaboration = DE.getController('Collaboration');
+                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
                     getCollaboration.showModal();
-                    getCollaboration.getView('Collaboration').showPage('#reviewing-settings-view', false);
+                    getCollaboration.getView('Common.Views.Collaboration').showPage('#reviewing-settings-view', false);
                 } else if('reviewchange' == eventName) {
-                    var getCollaboration = DE.getController('Collaboration');
+                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
                     getCollaboration.showModal();
-                    getCollaboration.getView('Collaboration').showPage('#reviewing-settings-view', false);
+                    getCollaboration.getView('Common.Views.Collaboration').showPage('#reviewing-settings-view', false);
-                    getCollaboration.getView('Collaboration').showPage('#change-view', false);
+                    getCollaboration.getView('Common.Views.Collaboration').showPage('#change-view', false);
                 } else if ('showActionSheet' == eventName && _actionSheets.length > 0) {
                     _.delay(function () {
                         _.each(_actionSheets, function (action) {

apps/documenteditor/mobile/app/controller/Main.js

@@ -516,7 +516,8 @@ define([
 
                 /** coauthoring begin **/
                 this.isLiveCommenting = Common.localStorage.getBool("de-settings-livecomment", true);
-                this.isLiveCommenting ? this.api.asc_showComments(true) : this.api.asc_hideComments();
+                var resolved = Common.localStorage.getBool("de-settings-resolvedcomment", true);
+                this.isLiveCommenting ? this.api.asc_showComments(resolved) : this.api.asc_hideComments();
                 /** coauthoring end **/
 
                 value = Common.localStorage.getItem("de-settings-zoom");

apps/documenteditor/mobile/app/controller/Settings.js

@@ -47,7 +47,7 @@ define([
     'underscore',
     'backbone',
     'documenteditor/mobile/app/view/Settings',
-    'documenteditor/mobile/app/controller/Collaboration'
+    'common/mobile/lib/controller/Collaboration'
 ], function (core, $, _, Backbone) {
     'use strict';
 
@@ -85,7 +85,8 @@ define([
             _isReviewOnly = false,
             _fileKey,
             templateInsert,
-            _metricText = Common.Utils.Metric.getCurrentMetricName();
+            _metricText = Common.Utils.Metric.getCurrentMetricName(),
+            _isEdit;
 
         var mm2Cm = function(mm) {
             return parseFloat((mm/10.).toFixed(2));
@@ -147,6 +148,7 @@ define([
                 _canReview = mode.canReview;
                 _isReviewOnly = mode.isReviewOnly;
                 _fileKey = mode.fileKey;
+                _isEdit = mode.isEdit;
             },
 
             initEvents: function () {
@@ -234,6 +236,16 @@ define([
                     $('#settings-hidden-borders input:checkbox').attr('checked', (Common.localStorage.getItem("de-mobile-hidden-borders") == 'true') ? true : false);
                     $('#settings-hidden-borders input:checkbox').single('change',   _.bind(me.onShowTableEmptyLine, me));
                     $('#settings-orthography').single('click',                  _.bind(me.onOrthographyCheck, me));
+                    var displayComments = Common.localStorage.getBool("de-settings-livecomment", true);
+                    $('#settings-display-comments input:checkbox').attr('checked', displayComments);
+                    $('#settings-display-comments input:checkbox').single('change',   _.bind(me.onChangeDisplayComments, me));
+                    var displayResolved = Common.localStorage.getBool("de-settings-resolvedcomment", true);
+                    if (!displayComments) {
+                        $("#settings-display-resolved").addClass("disabled");
+                        displayResolved = false;
+                    }
+                    $('#settings-display-resolved input:checkbox').attr('checked', displayResolved);
+                    $('#settings-display-resolved input:checkbox').single('change',   _.bind(me.onChangeDisplayResolved, me));
                     Common.Utils.addScrollIfNeed('.page[data-page=settings-advanced-view]', '.page[data-page=settings-advanced-view] .page-content');
                 } else if ('#color-schemes-view' == pageId) {
                     me.initPageColorSchemes();
@@ -249,7 +261,7 @@ define([
                     $('#settings-download').single('click',                     _.bind(me.onDownloadOrigin, me));
                     $('#settings-print').single('click',                        _.bind(me.onPrint, me));
                     $('#settings-collaboration').single('click',                _.bind(me.clickCollaboration, me));
-                    var _stateDisplayMode = DE.getController('Collaboration').getDisplayMode();
+                    var _stateDisplayMode = DE.getController('Common.Controllers.Collaboration').getDisplayMode();
                     if(_stateDisplayMode == "Final" || _stateDisplayMode == "Original") {
                         $('#settings-document').addClass('disabled');
                     }
@@ -260,8 +272,34 @@ define([
                 }
             },
 
+            onChangeDisplayComments: function(e) {
+                var displayComments = $(e.currentTarget).is(':checked');
+                if (!displayComments) {
+                    this.api.asc_hideComments();
+                    $("#settings-display-resolved input").prop( "checked", false );
+                    Common.localStorage.setBool("de-settings-resolvedcomment", false);
+                    $("#settings-display-resolved").addClass("disabled");
+                } else {
+                    var resolved = Common.localStorage.getBool("de-settings-resolvedcomment");
+                    this.api.asc_showComments(resolved);
+                    $("#settings-display-resolved").removeClass("disabled");
+                }
+                Common.localStorage.setBool("de-settings-livecomment", displayComments);
+            },
+
+            onChangeDisplayResolved: function(e) {
+                var displayComments = Common.localStorage.getBool("de-settings-livecomment");
+                if (displayComments) {
+                    var resolved = $(e.currentTarget).is(':checked');
+                    if (this.api) {
+                        this.api.asc_showComments(resolved);
+                    }
+                    Common.localStorage.setBool("de-settings-resolvedcomment", resolved);
+                }
+            },
+
             clickCollaboration: function() {
-                DE.getController('Collaboration').showModal();
+                DE.getController('Common.Controllers.Collaboration').showModal();
             },
 
             onNoCharacters: function(e) {
@@ -339,11 +377,14 @@ define([
                 var value = Common.localStorage.getItem('de-mobile-settings-unit');
                     value = (value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
                 $unitMeasurement.val([value]);
-                var _stateDisplayMode = DE.getController('Collaboration').getDisplayMode();
+                var _stateDisplayMode = DE.getController('Common.Controllers.Collaboration').getDisplayMode();
                 if(_stateDisplayMode == "Final" || _stateDisplayMode == "Original") {
                     $('#settings-no-characters').addClass('disabled');
                     $('#settings-hidden-borders').addClass('disabled');
                 }
+                if (!_isEdit) {
+                    $('.page[data-page=settings-advanced-view] .page-content > :not(.display-view)').hide();
+                }
             },
 
             initPageDocumentSettings: function () {

apps/documenteditor/mobile/app/template/Settings.template

@@ -639,6 +639,34 @@
                     </ul>
                 </div>
 
+                <div class="content-block-title display-view"><%= scope.textCommentingDisplay %></div>
+                <div class="list-block display-view">
+                    <ul>
+                        <div id="settings-display-comments" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textDisplayComments %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="settings-display-resolved" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textDisplayResolvedComments %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </ul>
+                </div>
+
             </div>
         </div>
     </div>

apps/documenteditor/mobile/app/view/Settings.js

@@ -124,7 +124,6 @@ define([
                         $layour.find('#settings-search .item-title').text(this.textFindAndReplace)
                     } else {
                         $layour.find('#settings-document').hide();
-                        $layour.find('#settings-advanced').hide();
                         $layour.find('#color-schemes').hide();
                         $layour.find('#settings-spellcheck').hide();
                         $layour.find('#settings-orthography').hide();
@@ -287,7 +286,10 @@ define([
             textColorSchemes: 'Color Schemes',
             textNoCharacters: 'Nonprinting Characters',
             textHiddenTableBorders: 'Hidden Table Borders',
-            textCollaboration: 'Collaboration'
+            textCollaboration: 'Collaboration',
+            textCommentingDisplay: 'Commenting Display',
+            textDisplayComments: 'Comments',
+            textDisplayResolvedComments: 'Resolved Comments'
 
     }
     })(), DE.Views.Settings || {}))

apps/documenteditor/mobile/app/view/Toolbar.js

@@ -153,7 +153,7 @@ define([
 
             //Collaboration
             showCollaboration: function () {
-                DE.getController('Collaboration').showModal();
+                DE.getController('Common.Controllers.Collaboration').showModal();
             },
 
             editDocument: function () {

apps/documenteditor/mobile/locale/en.json

@@ -3,6 +3,65 @@
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
+  "Common.Controllers.Collaboration.textInserted": "<b>Inserted:</b>",
+  "Common.Controllers.Collaboration.textDeleted": "<b>Deleted:</b>",
+  "Common.Controllers.Collaboration.textParaInserted": "<b>Paragraph Inserted</b>",
+  "Common.Controllers.Collaboration.textParaDeleted": "<b>Paragraph Deleted</b>",
+  "Common.Controllers.Collaboration.textFormatted": "Formatted",
+  "Common.Controllers.Collaboration.textParaFormatted": "<b>Paragraph Formatted</b>",
+  "Common.Controllers.Collaboration.textNot": "Not",
+  "Common.Controllers.Collaboration.textBold": "Bold",
+  "Common.Controllers.Collaboration.textItalic": "Italic",
+  "Common.Controllers.Collaboration.textStrikeout": "Strikeout",
+  "Common.Controllers.Collaboration.textUnderline": "Underline",
+  "Common.Controllers.Collaboration.textColor": "Font color",
+  "Common.Controllers.Collaboration.textBaseline": "Baseline",
+  "Common.Controllers.Collaboration.textSuperScript": "Superscript",
+  "Common.Controllers.Collaboration.textSubScript": "Subscript",
+  "Common.Controllers.Collaboration.textHighlight": "Highlight color",
+  "Common.Controllers.Collaboration.textSpacing": "Spacing",
+  "Common.Controllers.Collaboration.textDStrikeout": "Double strikeout",
+  "Common.Controllers.Collaboration.textCaps": "All caps",
+  "Common.Controllers.Collaboration.textSmallCaps": "Small caps",
+  "Common.Controllers.Collaboration.textPosition": "Position",
+  "Common.Controllers.Collaboration.textShd": "Background color",
+  "Common.Controllers.Collaboration.textContextual": "Don't add interval between paragraphs of the same style",
+  "Common.Controllers.Collaboration.textNoContextual": "Add interval between paragraphs of the same style",
+  "Common.Controllers.Collaboration.textIndentLeft": "Indent left",
+  "Common.Controllers.Collaboration.textIndentRight": "Indent right",
+  "Common.Controllers.Collaboration.textFirstLine": "First line",
+  "Common.Controllers.Collaboration.textRight": "Align right",
+  "Common.Controllers.Collaboration.textLeft": "Align left",
+  "Common.Controllers.Collaboration.textCenter": "Align center",
+  "Common.Controllers.Collaboration.textJustify": "Align justify",
+  "Common.Controllers.Collaboration.textBreakBefore": "Page break before",
+  "Common.Controllers.Collaboration.textKeepNext": "Keep with next",
+  "Common.Controllers.Collaboration.textKeepLines": "Keep lines together",
+  "Common.Controllers.Collaboration.textNoBreakBefore": "No page break before",
+  "Common.Controllers.Collaboration.textNoKeepNext": "Don't keep with next",
+  "Common.Controllers.Collaboration.textNoKeepLines": "Don't keep lines together",
+  "Common.Controllers.Collaboration.textLineSpacing": "Line Spacing: ",
+  "Common.Controllers.Collaboration.textMultiple": "multiple",
+  "Common.Controllers.Collaboration.textAtLeast": "at least",
+  "Common.Controllers.Collaboration.textExact": "exactly",
+  "Common.Controllers.Collaboration.textSpacingBefore": "Spacing before",
+  "Common.Controllers.Collaboration.textSpacingAfter": "Spacing after",
+  "Common.Controllers.Collaboration.textAuto": "auto",
+  "Common.Controllers.Collaboration.textWidow": "Widow control",
+  "Common.Controllers.Collaboration.textNoWidow": "No widow control",
+  "Common.Controllers.Collaboration.textTabs": "Change tabs",
+  "Common.Controllers.Collaboration.textNum": "Change numbering",
+  "Common.Controllers.Collaboration.textEquation": "Equation",
+  "Common.Controllers.Collaboration.textImage": "Image",
+  "Common.Controllers.Collaboration.textChart": "Chart",
+  "Common.Controllers.Collaboration.textShape": "Shape",
+  "Common.Controllers.Collaboration.textTableChanged": "<b>Table Settings Changed</b>",
+  "Common.Controllers.Collaboration.textTableRowsAdd": "<b>Table Rows Added<b/>",
+  "Common.Controllers.Collaboration.textTableRowsDel": "<b>Table Rows Deleted<b/>",
+  "Common.Controllers.Collaboration.textParaMoveTo": "<b>Moved:</b>",
+  "Common.Controllers.Collaboration.textParaMoveFromUp": "<b>Moved Up:</b>",
+  "Common.Controllers.Collaboration.textParaMoveFromDown": "<b>Moved Down:</b>",
+  "Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
   "DE.Controllers.AddContainer.textImage": "Image",
   "DE.Controllers.AddContainer.textOther": "Other",
   "DE.Controllers.AddContainer.textShape": "Shape",
@@ -185,65 +244,6 @@
   "DE.Controllers.Toolbar.dlgLeaveTitleText": "You leave the application",
   "DE.Controllers.Toolbar.leaveButtonText": "Leave this Page",
   "DE.Controllers.Toolbar.stayButtonText": "Stay on this Page",
-  "DE.Controllers.Collaboration.textInserted": "<b>Inserted:</b>",
-  "DE.Controllers.Collaboration.textDeleted": "<b>Deleted:</b>",
-  "DE.Controllers.Collaboration.textParaInserted": "<b>Paragraph Inserted</b>",
-  "DE.Controllers.Collaboration.textParaDeleted": "<b>Paragraph Deleted</b>",
-  "DE.Controllers.Collaboration.textFormatted": "Formatted",
-  "DE.Controllers.Collaboration.textParaFormatted": "<b>Paragraph Formatted</b>",
-  "DE.Controllers.Collaboration.textNot": "Not",
-  "DE.Controllers.Collaboration.textBold": "Bold",
-  "DE.Controllers.Collaboration.textItalic": "Italic",
-  "DE.Controllers.Collaboration.textStrikeout": "Strikeout",
-  "DE.Controllers.Collaboration.textUnderline": "Underline",
-  "DE.Controllers.Collaboration.textColor": "Font color",
-  "DE.Controllers.Collaboration.textBaseline": "Baseline",
-  "DE.Controllers.Collaboration.textSuperScript": "Superscript",
-  "DE.Controllers.Collaboration.textSubScript": "Subscript",
-  "DE.Controllers.Collaboration.textHighlight": "Highlight color",
-  "DE.Controllers.Collaboration.textSpacing": "Spacing",
-  "DE.Controllers.Collaboration.textDStrikeout": "Double strikeout",
-  "DE.Controllers.Collaboration.textCaps": "All caps",
-  "DE.Controllers.Collaboration.textSmallCaps": "Small caps",
-  "DE.Controllers.Collaboration.textPosition": "Position",
-  "DE.Controllers.Collaboration.textShd": "Background color",
-  "DE.Controllers.Collaboration.textContextual": "Don't add interval between paragraphs of the same style",
-  "DE.Controllers.Collaboration.textNoContextual": "Add interval between paragraphs of the same style",
-  "DE.Controllers.Collaboration.textIndentLeft": "Indent left",
-  "DE.Controllers.Collaboration.textIndentRight": "Indent right",
-  "DE.Controllers.Collaboration.textFirstLine": "First line",
-  "DE.Controllers.Collaboration.textRight": "Align right",
-  "DE.Controllers.Collaboration.textLeft": "Align left",
-  "DE.Controllers.Collaboration.textCenter": "Align center",
-  "DE.Controllers.Collaboration.textJustify": "Align justify",
-  "DE.Controllers.Collaboration.textBreakBefore": "Page break before",
-  "DE.Controllers.Collaboration.textKeepNext": "Keep with next",
-  "DE.Controllers.Collaboration.textKeepLines": "Keep lines together",
-  "DE.Controllers.Collaboration.textNoBreakBefore": "No page break before",
-  "DE.Controllers.Collaboration.textNoKeepNext": "Don't keep with next",
-  "DE.Controllers.Collaboration.textNoKeepLines": "Don't keep lines together",
-  "DE.Controllers.Collaboration.textLineSpacing": "Line Spacing: ",
-  "DE.Controllers.Collaboration.textMultiple": "multiple",
-  "DE.Controllers.Collaboration.textAtLeast": "at least",
-  "DE.Controllers.Collaboration.textExact": "exactly",
-  "DE.Controllers.Collaboration.textSpacingBefore": "Spacing before",
-  "DE.Controllers.Collaboration.textSpacingAfter": "Spacing after",
-  "DE.Controllers.Collaboration.textAuto": "auto",
-  "DE.Controllers.Collaboration.textWidow": "Widow control",
-  "DE.Controllers.Collaboration.textNoWidow": "No widow control",
-  "DE.Controllers.Collaboration.textTabs": "Change tabs",
-  "DE.Controllers.Collaboration.textNum": "Change numbering",
-  "DE.Controllers.Collaboration.textEquation": "Equation",
-  "DE.Controllers.Collaboration.textImage": "Image",
-  "DE.Controllers.Collaboration.textChart": "Chart",
-  "DE.Controllers.Collaboration.textShape": "Shape",
-  "DE.Controllers.Collaboration.textTableChanged": "<b>Table Settings Changed</b>",
-  "DE.Controllers.Collaboration.textTableRowsAdd": "<b>Table Rows Added<b/>",
-  "DE.Controllers.Collaboration.textTableRowsDel": "<b>Table Rows Deleted<b/>",
-  "DE.Controllers.Collaboration.textParaMoveTo": "<b>Moved:</b>",
-  "DE.Controllers.Collaboration.textParaMoveFromUp": "<b>Moved Up:</b>",
-  "DE.Controllers.Collaboration.textParaMoveFromDown": "<b>Moved Down:</b>",
-  "DE.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
   "DE.Views.AddImage.textAddress": "Address",
   "DE.Views.AddImage.textBack": "Back",
   "DE.Views.AddImage.textFromLibrary": "Picture from Library",
@@ -492,18 +492,21 @@
   "DE.Views.Settings.textColorSchemes": "Color Schemes",
   "DE.Views.Settings.textNoCharacters": "Nonprinting Characters",
   "DE.Views.Settings.textHiddenTableBorders": "Hidden Table Borders",
+  "DE.Views.Settings.textCommentingDisplay": "Commenting Display",
+  "DE.Views.Settings.textDisplayComments": "Comments",
+  "DE.Views.Settings.textDisplayResolvedComments": "Resolved Comments",
   "DE.Views.Toolbar.textBack": "Back",
-  "DE.Views.Collaboration.textCollaboration": "Collaboration",
+  "Common.Views.Collaboration.textCollaboration": "Collaboration",
-  "DE.Views.Collaboration.textReviewing": "Review",
+  "Common.Views.Collaboration.textReviewing": "Review",
-  "DE.Views.Collaboration.textСomments": "Сomments",
+  "Common.Views.Collaboration.textСomments": "Сomments",
-  "DE.Views.Collaboration.textBack": "Back",
+  "Common.Views.Collaboration.textBack": "Back",
-  "DE.Views.Collaboration.textReview": "Track Changes",
+  "Common.Views.Collaboration.textReview": "Track Changes",
-  "DE.Views.Collaboration.textAcceptAllChanges": "Accept All Changes",
+  "Common.Views.Collaboration.textAcceptAllChanges": "Accept All Changes",
-  "DE.Views.Collaboration.textRejectAllChanges": "Reject All Changes",
+  "Common.Views.Collaboration.textRejectAllChanges": "Reject All Changes",
-  "DE.Views.Collaboration.textDisplayMode": "Display Mode",
+  "Common.Views.Collaboration.textDisplayMode": "Display Mode",
-  "DE.Views.Collaboration.textMarkup": "Markup",
+  "Common.Views.Collaboration.textMarkup": "Markup",
-  "DE.Views.Collaboration.textFinal": "Final",
+  "Common.Views.Collaboration.textFinal": "Final",
-  "DE.Views.Collaboration.textOriginal": "Original",
+  "Common.Views.Collaboration.textOriginal": "Original",
-  "DE.Views.Collaboration.textChange": "Review Change",
+  "Common.Views.Collaboration.textChange": "Review Change",
-  "DE.Views.Collaboration.textEditUsers": "Users"
+  "Common.Views.Collaboration.textEditUsers": "Users"
 }

apps/documenteditor/mobile/resources/css/app-ios.css

@@ -6338,6 +6338,93 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
+#user-list .item-content {
+  padding-left: 0;
+}
+#user-list .item-inner {
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+#user-list .length {
+  margin-left: 4px;
+}
+#user-list .color {
+  min-width: 40px;
+  min-height: 40px;
+  margin-right: 20px;
+  text-align: center;
+  border-radius: 50px;
+  line-height: 40px;
+  color: #373737;
+  font-weight: 500;
+}
+#user-list ul:before {
+  content: none;
+}
+.page-comments .list-block .item-inner {
+  display: block;
+  padding: 16px 0;
+  word-wrap: break-word;
+}
+.page-comments p {
+  margin: 0;
+}
+.page-comments .user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+  font-weight: bold;
+}
+.page-comments .comment-date,
+.page-comments .reply-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 0px;
+}
+.page-comments .comment-text,
+.page-comments .reply-text {
+  color: #000000;
+  font-size: 15px;
+  line-height: 25px;
+  margin: 0;
+  max-width: 100%;
+  padding-right: 15px;
+}
+.page-comments .reply-item {
+  margin-top: 15px;
+}
+.page-comments .reply-item .user-name {
+  padding-top: 16px;
+}
+.page-comments .reply-item:before {
+  content: '';
+  position: absolute;
+  left: auto;
+  bottom: 0;
+  right: auto;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: #c8c7cc;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.page-comments .comment-quote {
+  color: #446995;
+  border-left: 1px solid #446995;
+  padding-left: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+}
+.settings.popup .list-block ul.list-reply:last-child:after,
+.settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
+}
 .tablet .searchbar.document.replace .center .searchbar:first-child {
   margin-right: 10px;
 }
@@ -6989,26 +7076,3 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
-#user-list .item-content {
-  padding-left: 0;
-}
-#user-list .item-inner {
-  justify-content: flex-start;
-  padding-left: 15px;
-}
-#user-list .length {
-  margin-left: 4px;
-}
-#user-list .color {
-  min-width: 40px;
-  min-height: 40px;
-  margin-right: 20px;
-  text-align: center;
-  border-radius: 50px;
-  line-height: 40px;
-  color: #373737;
-  font-weight: 500;
-}
-#user-list ul:before {
-  content: none;
-}

apps/documenteditor/mobile/resources/css/app-material.css

@@ -5923,6 +5923,93 @@ html.phone .document-menu .list-block .item-link {
 .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
+#user-list .item-content {
+  padding-left: 0;
+}
+#user-list .item-inner {
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+#user-list .length {
+  margin-left: 4px;
+}
+#user-list .color {
+  min-width: 40px;
+  min-height: 40px;
+  margin-right: 20px;
+  text-align: center;
+  border-radius: 50px;
+  line-height: 40px;
+  color: #373737;
+  font-weight: 400;
+}
+#user-list ul:before {
+  content: none;
+}
+.page-comments .list-block .item-inner {
+  display: block;
+  padding: 16px 0;
+  word-wrap: break-word;
+}
+.page-comments p {
+  margin: 0;
+}
+.page-comments .user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+  font-weight: bold;
+}
+.page-comments .comment-date,
+.page-comments .reply-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 0px;
+}
+.page-comments .comment-text,
+.page-comments .reply-text {
+  color: #000000;
+  font-size: 15px;
+  line-height: 25px;
+  margin: 0;
+  max-width: 100%;
+  padding-right: 15px;
+}
+.page-comments .reply-item {
+  margin-top: 15px;
+}
+.page-comments .reply-item .user-name {
+  padding-top: 16px;
+}
+.page-comments .reply-item:before {
+  content: '';
+  position: absolute;
+  left: auto;
+  bottom: 0;
+  right: auto;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.12);
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.page-comments .comment-quote {
+  color: #446995;
+  border-left: 1px solid #446995;
+  padding-left: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+}
+.settings.popup .list-block ul.list-reply:last-child:after,
+.settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }
@@ -6760,26 +6847,3 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
-#user-list .item-content {
-  padding-left: 0;
-}
-#user-list .item-inner {
-  justify-content: flex-start;
-  padding-left: 15px;
-}
-#user-list .length {
-  margin-left: 4px;
-}
-#user-list .color {
-  min-width: 40px;
-  min-height: 40px;
-  margin-right: 20px;
-  text-align: center;
-  border-radius: 50px;
-  line-height: 40px;
-  color: #373737;
-  font-weight: 400;
-}
-#user-list ul:before {
-  content: none;
-}

apps/documenteditor/mobile/resources/less/app-ios.less

@@ -240,33 +240,3 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
-
-//Edit users
-@initialEditUser: #373737;
-
-#user-list {
-  .item-content {
-    padding-left: 0;
-  }
-  .item-inner {
-    justify-content: flex-start;
-    padding-left: 15px;
-  }
-  .length {
-    margin-left: 4px;
-  }
-  .color {
-    min-width: 40px;
-    min-height: 40px;
-    margin-right: 20px;
-    text-align: center;
-    border-radius: 50px;
-    line-height: 40px;
-    color: @initialEditUser;
-    font-weight: 500;
-
-  }
-  ul:before {
-    content: none;
-  }
-}

apps/documenteditor/mobile/resources/less/app-material.less

@@ -227,32 +227,3 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
-
-//Edit users
-@initialEditUser: #373737;
-
-#user-list {
-  .item-content {
-    padding-left: 0;
-  }
-  .item-inner {
-    justify-content: flex-start;
-    padding-left: 15px;
-  }
-  .length {
-    margin-left: 4px;
-  }
-  .color {
-    min-width: 40px;
-    min-height: 40px;
-    margin-right: 20px;
-    text-align: center;
-    border-radius: 50px;
-    line-height: 40px;
-    color: @initialEditUser;
-    font-weight: 400;
-  }
-  ul:before {
-    content: none;
-  }
-}

apps/presentationeditor/mobile/app-dev.js

@@ -149,7 +149,7 @@ require([
             'AddImage',
             'AddLink',
             'AddSlide',
-            'Collaboration'
+            'Common.Controllers.Collaboration'
         ]
     });
 
@@ -218,7 +218,7 @@ require([
         'presentationeditor/mobile/app/controller/add/AddImage',
         'presentationeditor/mobile/app/controller/add/AddLink',
         'presentationeditor/mobile/app/controller/add/AddSlide',
-        'presentationeditor/mobile/app/controller/Collaboration'
+        'common/mobile/lib/controller/Collaboration'
 
     ], function() {
         window.compareVersions = true;

apps/presentationeditor/mobile/app.js

@@ -160,7 +160,7 @@ require([
             'AddImage',
             'AddLink',
             'AddSlide',
-            'Collaboration'
+            'Common.Controllers.Collaboration'
         ]
     });
 
@@ -229,7 +229,7 @@ require([
         'presentationeditor/mobile/app/controller/add/AddImage',
         'presentationeditor/mobile/app/controller/add/AddLink',
         'presentationeditor/mobile/app/controller/add/AddSlide',
-        'presentationeditor/mobile/app/controller/Collaboration'
+        'common/mobile/lib/controller/Collaboration'
     ], function() {
         app.start();
     });

apps/presentationeditor/mobile/app/controller/Collaboration.js

@@ -1,217 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Collaboration.js
- *  Presentation Editor
- *
- *  Created by Julia Svinareva on 31/5/19
- *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
- *
- */
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone',
-    'presentationeditor/mobile/app/view/Collaboration'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    PE.Controllers.Collaboration = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var rootView,
-            _userId,
-            editUsers = [];
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'Collaboration'
-            ],
-
-            initialize: function() {
-                var me = this;
-                me.addListeners({
-                    'Collaboration': {
-                        'page:show' : me.onPageShow
-                    }
-                });
-            },
-
-            setApi: function(api) {
-                this.api = api;
-                this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onChangeEditUsers, this));
-                this.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(this.onChangeEditUsers, this));
-            },
-
-            onLaunch: function () {
-                this.createView('Collaboration').render();
-            },
-
-            setMode: function(mode) {
-                this.appConfig = mode;
-                _userId = mode.user.id;
-                return this;
-            },
-
-
-            showModal: function() {
-                var me = this,
-                    isAndroid = Framework7.prototype.device.android === true,
-                    modalView,
-                    mainView = PE.getController('Editor').getView('Editor').f7View;
-
-                uiApp.closeModal();
-
-                if (Common.SharedSettings.get('phone')) {
-                    modalView = $$(uiApp.pickerModal(
-                        '<div class="picker-modal settings container-collaboration">' +
-                        '<div class="view collaboration-root-view navbar-through">' +
-                        this.getView('Collaboration').rootLayout() +
-                        '</div>' +
-                        '</div>'
-                    )).on('opened', function () {
-                        if (_.isFunction(me.api.asc_OnShowContextMenu)) {
-                            me.api.asc_OnShowContextMenu()
-                        }
-                    }).on('close', function (e) {
-                        mainView.showNavbar();
-                    }).on('closed', function () {
-                        if (_.isFunction(me.api.asc_OnHideContextMenu)) {
-                            me.api.asc_OnHideContextMenu()
-                        }
-                    });
-                    mainView.hideNavbar();
-                } else {
-                    modalView = uiApp.popover(
-                        '<div class="popover settings container-collaboration">' +
-                        '<div class="popover-angle"></div>' +
-                        '<div class="popover-inner">' +
-                        '<div class="content-block">' +
-                        '<div class="view popover-view collaboration-root-view navbar-through">' +
-                        this.getView('Collaboration').rootLayout() +
-                        '</div>' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>',
-                        $$('#toolbar-collaboration')
-                    );
-                }
-
-                if (Framework7.prototype.device.android === true) {
-                    $$('.view.collaboration-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
-                    $$('.view.collaboration-root-view .navbar').prependTo('.view.collaboration-root-view > .pages > .page');
-                }
-
-                rootView = uiApp.addView('.collaboration-root-view', {
-                    dynamicNavbar: true,
-                    domCache: true
-                });
-
-                Common.NotificationCenter.trigger('collaborationcontainer:show');
-                this.onPageShow(this.getView('Collaboration'));
-
-                PE.getController('Toolbar').getView('Toolbar').hideSearch();
-            },
-
-            rootView : function() {
-                return rootView;
-            },
-
-            onPageShow: function(view, pageId) {
-                var me = this;
-
-                if('#edit-users-view' == pageId) {
-                    me.initEditUsers();
-                    Common.Utils.addScrollIfNeed('.page[data-page=edit-users-view]', '.page[data-page=edit-users-view] .page-content');
-                } else {
-                }
-            },
-
-            onChangeEditUsers: function(users) {
-                editUsers = users;
-            },
-
-            initEditUsers: function() {
-                var usersArray = [];
-                _.each(editUsers, function(item){
-                    var fio = item.asc_getUserName().split(' ');
-                    var initials = fio[0].substring(0, 1).toUpperCase();
-                    if (fio.length > 1) {
-                        initials += fio[fio.length - 1].substring(0, 1).toUpperCase();
-                    }
-                    if(!item.asc_getView()) {
-                        var userAttr = {
-                            color: item.asc_getColor(),
-                            id: item.asc_getId(),
-                            idOriginal: item.asc_getIdOriginal(),
-                            name: item.asc_getUserName(),
-                            view: item.asc_getView(),
-                            initial: initials
-                        };
-                        if(item.asc_getIdOriginal() == _userId) {
-                            usersArray.unshift(userAttr);
-                        } else {
-                            usersArray.push(userAttr);
-                        }
-                    }
-                });
-                var userSort = _.chain(usersArray).groupBy('idOriginal').value();
-                var templateUserItem = _.template([
-                    '<%  _.each(users, function (user) { %>',
-                    '<li id="<%= user[0].id %>" class="<% if (user[0].view) {%> viewmode <% } %> item-content">' +
-                    '<div class="user-name item-inner">' +
-                    '<div class="color" style="background-color: <%= user[0].color %>;"><%= user[0].initial %></div>'+
-                    '<label><%= user[0].name %></label>' +
-                    '<% if (user.length>1) { %><label class="length"> (<%= user.length %>)</label><% } %>' +
-                    '</div>'+
-                    '</li>',
-                    '<% }); %>'].join(''));
-                var templateUserList = _.template(
-                    '<div class="item-content"><div class="item-inner">' +
-                    this.textEditUser +
-                    '</div></div>' +
-                    '<ul>' +
-                    templateUserItem({users: userSort}) +
-                    '</ul>');
-                $('#user-list').html(templateUserList());
-            },
-
-
-            textEditUser: 'Document is currently being edited by several users.'
-
-        }
-    })(), PE.Controllers.Collaboration || {}))
-});

apps/presentationeditor/mobile/app/controller/Settings.js

@@ -194,7 +194,7 @@ define([
             },
 
             onCollaboration: function() {
-                PE.getController('Collaboration').showModal();
+                PE.getController('Common.Controllers.Collaboration').showModal();
             },
 
             initPageColorSchemes: function () {

apps/presentationeditor/mobile/app/template/Collaboration.template

@@ -1,47 +0,0 @@
-<!-- Root view -->
-<div id="collaboration-root-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="center sliding"><%= scope.textCollaboration %></div>
-            <div class="right sliding close-collaboration"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="collaboration-root-view">
-            <div class="page-content">
-                <div class="list-block">
-                    <ul>
-                        <li>
-                            <a id="list-edit-users" class="item-link" data-page="#edit-users-view">
-                                <div class="item-content">
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textEditUsers %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Editable Users view -->
-<div id="edit-users-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textEditUsers %></div>
-            <div class="right sliding"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page page-change" data-page="edit-users-view">
-            <div class="page-content">
-                <div id="user-list" class="list-block">
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

apps/presentationeditor/mobile/app/view/Collaboration.js

@@ -1,149 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Collaboration.js
- *  Presentation Editor
- *
- *  Created by Julia Svinareva on 31/5/19
- *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!presentationeditor/mobile/app/template/Collaboration.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (settingsTemplate, $, _, Backbone) {
-    'use strict';
-
-    PE.Views.Collaboration = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-
-            template: _.template(settingsTemplate),
-
-            events: {
-                //
-            },
-
-            initialize: function() {
-                Common.NotificationCenter.on('collaborationcontainer:show', _.bind(this.initEvents, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                Common.Utils.addScrollIfNeed('.view[data-page=collaboration-root-view] .pages', '.view[data-page=collaboration-root-view] .page');
-                me.updateItemHandlers();
-            },
-
-            initControls: function() {
-                //
-            },
-
-            // Render layout
-            render: function() {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    orthography: Common.SharedSettings.get('sailfish'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            updateItemHandlers: function () {
-                var selectorsDynamicPage = [
-                    '.page[data-page=collaboration-root-view]'
-                ].map(function (selector) {
-                    return selector + ' a.item-link[data-page]';
-                }).join(', ');
-
-                $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
-            },
-
-            onItemClick: function (e) {
-                var $target = $(e.currentTarget),
-                    page = $target.data('page');
-
-                if (page && page.length > 0 ) {
-                    this.showPage(page);
-                }
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    var $layour = this.layout.find('#collaboration-root-view'),
-                        isPhone = Common.SharedSettings.get('phone');
-
-                    return $layour.html();
-                }
-
-                return '';
-            },
-
-            showPage: function(templateId, animate) {
-                var rootView = PE.getController('Collaboration').rootView();
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html(),
-                        animatePages: animate !== false
-                    });
-
-                    this.fireEvent('page:show', [this, templateId]);
-                }
-            },
-
-
-
-            textCollaboration: 'Collaboration',
-            textСomments: 'Сomments',
-            textBack: 'Back',
-            textEditUsers: 'Users'
-
-        }
-    })(), PE.Views.Collaboration || {}))
-});

apps/presentationeditor/mobile/app/view/Toolbar.js

@@ -162,7 +162,7 @@ define([
 
             //Collaboration
             showCollaboration: function () {
-                PE.getController('Collaboration').showModal();
+                PE.getController('Common.Controllers.Collaboration').showModal();
             },
 
             textBack: 'Back'

apps/presentationeditor/mobile/locale/en.json

@@ -226,7 +226,7 @@
   "PE.Controllers.Toolbar.dlgLeaveTitleText": "You leave the application",
   "PE.Controllers.Toolbar.leaveButtonText": "Leave this Page",
   "PE.Controllers.Toolbar.stayButtonText": "Stay on this Page",
-  "PE.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
+  "Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
   "PE.Views.AddImage.textAddress": "Address",
   "PE.Views.AddImage.textBack": "Back",
   "PE.Views.AddImage.textFromLibrary": "Picture from Library",
@@ -477,8 +477,8 @@
   "PE.Views.Settings.unknownText": "Unknown",
   "PE.Views.Settings.textCollaboration": "Collaboration",
   "PE.Views.Toolbar.textBack": "Back",
-  "PE.Views.Collaboration.textCollaboration": "Collaboration",
+  "Common.Views.Collaboration.textCollaboration": "Collaboration",
-  "PE.Views.Collaboration.textСomments": "Сomments",
+  "Common.Views.Collaboration.textСomments": "Сomments",
-  "PE.Views.Collaboration.textBack": "Back",
+  "Common.Views.Collaboration.textBack": "Back",
-  "PE.Views.Collaboration.textEditUsers": "Users"
+  "Common.Views.Collaboration.textEditUsers": "Users"
 }

apps/presentationeditor/mobile/resources/css/app-ios.css

@@ -6274,6 +6274,157 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   margin-left: 20px;
   color: #212121;
 }
+.page-change .block-description {
+  background-color: #fff;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  margin: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+}
+.page-change #user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+}
+.page-change #date-change {
+  font-size: 14px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 3px;
+}
+.page-change #text-change {
+  color: #000000;
+  font-size: 15px;
+  line-height: 20px;
+  margin: 0;
+  margin-top: 10px;
+}
+.page-change .block-btn,
+.page-change .content-block.block-btn:first-child {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 26px 0;
+}
+.page-change .block-btn #btn-next-change,
+.page-change .content-block.block-btn:first-child #btn-next-change,
+.page-change .block-btn #btn-reject-change,
+.page-change .content-block.block-btn:first-child #btn-reject-change {
+  margin-left: 20px;
+}
+.page-change .block-btn #btn-goto-change,
+.page-change .content-block.block-btn:first-child #btn-goto-change {
+  margin-right: 20px;
+}
+.page-change .block-btn .right-buttons,
+.page-change .content-block.block-btn:first-child .right-buttons {
+  display: flex;
+}
+.page-change .block-btn .link,
+.page-change .content-block.block-btn:first-child .link {
+  display: inline-block;
+}
+.navbar .center-collaboration {
+  display: flex;
+  justify-content: space-around;
+}
+.container-collaboration .navbar .right.close-collaboration {
+  position: absolute;
+  right: 10px;
+}
+.container-collaboration .page-content .list-block:first-child {
+  margin-top: -1px;
+}
+#user-list .item-content {
+  padding-left: 0;
+}
+#user-list .item-inner {
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+#user-list .length {
+  margin-left: 4px;
+}
+#user-list .color {
+  min-width: 40px;
+  min-height: 40px;
+  margin-right: 20px;
+  text-align: center;
+  border-radius: 50px;
+  line-height: 40px;
+  color: #373737;
+  font-weight: 500;
+}
+#user-list ul:before {
+  content: none;
+}
+.page-comments .list-block .item-inner {
+  display: block;
+  padding: 16px 0;
+  word-wrap: break-word;
+}
+.page-comments p {
+  margin: 0;
+}
+.page-comments .user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+  font-weight: bold;
+}
+.page-comments .comment-date,
+.page-comments .reply-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 0px;
+}
+.page-comments .comment-text,
+.page-comments .reply-text {
+  color: #000000;
+  font-size: 15px;
+  line-height: 25px;
+  margin: 0;
+  max-width: 100%;
+  padding-right: 15px;
+}
+.page-comments .reply-item {
+  margin-top: 15px;
+}
+.page-comments .reply-item .user-name {
+  padding-top: 16px;
+}
+.page-comments .reply-item:before {
+  content: '';
+  position: absolute;
+  left: auto;
+  bottom: 0;
+  right: auto;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: #c8c7cc;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.page-comments .comment-quote {
+  color: #aa5252;
+  border-left: 1px solid #aa5252;
+  padding-left: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+}
+.settings.popup .list-block ul.list-reply:last-child:after,
+.settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
+}
 .tablet .searchbar.document.replace .center .searchbar:first-child {
   margin-right: 10px;
 }
@@ -6873,26 +7024,3 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
-#user-list .item-content {
-  padding-left: 0;
-}
-#user-list .item-inner {
-  justify-content: flex-start;
-  padding-left: 15px;
-}
-#user-list .length {
-  margin-left: 4px;
-}
-#user-list .color {
-  min-width: 40px;
-  min-height: 40px;
-  margin-right: 20px;
-  text-align: center;
-  border-radius: 50px;
-  line-height: 40px;
-  color: #373737;
-  font-weight: 500;
-}
-#user-list ul:before {
-  content: none;
-}

apps/presentationeditor/mobile/resources/css/app-material.css

@@ -5867,6 +5867,149 @@ html.phone .document-menu .list-block .item-link {
   margin-left: 20px;
   color: #212121;
 }
+.page-change .block-description {
+  background-color: #fff;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  margin: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+}
+.page-change #user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+}
+.page-change #date-change {
+  font-size: 14px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 3px;
+}
+.page-change #text-change {
+  color: #000000;
+  font-size: 15px;
+  line-height: 20px;
+  margin: 0;
+  margin-top: 10px;
+}
+.page-change .block-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 0;
+  padding: 26px 0;
+  background-color: #EFEFF4;
+}
+.page-change .block-btn #btn-next-change,
+.page-change .block-btn #btn-reject-change {
+  margin-left: 20px;
+}
+.page-change .block-btn #btn-goto-change {
+  margin-right: 20px;
+}
+.page-change .block-btn .right-buttons {
+  display: flex;
+}
+.page-change .block-btn .link {
+  display: inline-block;
+}
+.container-collaboration .navbar .right.close-collaboration {
+  position: absolute;
+  right: 5px;
+}
+.container-collaboration .page-content .list-block:first-child {
+  margin-top: -1px;
+}
+#user-list .item-content {
+  padding-left: 0;
+}
+#user-list .item-inner {
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+#user-list .length {
+  margin-left: 4px;
+}
+#user-list .color {
+  min-width: 40px;
+  min-height: 40px;
+  margin-right: 20px;
+  text-align: center;
+  border-radius: 50px;
+  line-height: 40px;
+  color: #373737;
+  font-weight: 400;
+}
+#user-list ul:before {
+  content: none;
+}
+.page-comments .list-block .item-inner {
+  display: block;
+  padding: 16px 0;
+  word-wrap: break-word;
+}
+.page-comments p {
+  margin: 0;
+}
+.page-comments .user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+  font-weight: bold;
+}
+.page-comments .comment-date,
+.page-comments .reply-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 0px;
+}
+.page-comments .comment-text,
+.page-comments .reply-text {
+  color: #000000;
+  font-size: 15px;
+  line-height: 25px;
+  margin: 0;
+  max-width: 100%;
+  padding-right: 15px;
+}
+.page-comments .reply-item {
+  margin-top: 15px;
+}
+.page-comments .reply-item .user-name {
+  padding-top: 16px;
+}
+.page-comments .reply-item:before {
+  content: '';
+  position: absolute;
+  left: auto;
+  bottom: 0;
+  right: auto;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.12);
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.page-comments .comment-quote {
+  color: #aa5252;
+  border-left: 1px solid #aa5252;
+  padding-left: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+}
+.settings.popup .list-block ul.list-reply:last-child:after,
+.settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }
@@ -6701,26 +6844,3 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
-#user-list .item-content {
-  padding-left: 0;
-}
-#user-list .item-inner {
-  justify-content: flex-start;
-  padding-left: 15px;
-}
-#user-list .length {
-  margin-left: 4px;
-}
-#user-list .color {
-  min-width: 40px;
-  min-height: 40px;
-  margin-right: 20px;
-  text-align: center;
-  border-radius: 50px;
-  line-height: 40px;
-  color: #373737;
-  font-weight: 400;
-}
-#user-list ul:before {
-  content: none;
-}

apps/presentationeditor/mobile/resources/less/app-ios.less

@@ -72,6 +72,7 @@ input, textarea {
 @import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/ios/_about.less');
 @import url('../../../../common/mobile/resources/less/ios/_color-schema.less');
+@import url('../../../../common/mobile/resources/less/ios/_collaboration.less');
 
 @import url('ios/_search.less');
 @import url('ios/_icons.less');
@@ -244,33 +245,3 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
-
-//Edit users
-@initialEditUser: #373737;
-
-#user-list {
-  .item-content {
-    padding-left: 0;
-  }
-  .item-inner {
-    justify-content: flex-start;
-    padding-left: 15px;
-  }
-  .length {
-    margin-left: 4px;
-  }
-  .color {
-    min-width: 40px;
-    min-height: 40px;
-    margin-right: 20px;
-    text-align: center;
-    border-radius: 50px;
-    line-height: 40px;
-    color: @initialEditUser;
-    font-weight: 500;
-
-  }
-  ul:before {
-    content: none;
-  }
-}

apps/presentationeditor/mobile/resources/less/app-material.less

@@ -54,6 +54,7 @@
 @import url('../../../../common/mobile/resources/less/material/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/material/_about.less');
 @import url('../../../../common/mobile/resources/less/material/_color-schema.less');
+@import url('../../../../common/mobile/resources/less/material/_collaboration.less');
 
 @import url('material/_search.less');
 @import url('material/_icons.less');
@@ -232,32 +233,3 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
-
-//Edit users
-@initialEditUser: #373737;
-
-#user-list {
-  .item-content {
-    padding-left: 0;
-  }
-  .item-inner {
-    justify-content: flex-start;
-    padding-left: 15px;
-  }
-  .length {
-    margin-left: 4px;
-  }
-  .color {
-    min-width: 40px;
-    min-height: 40px;
-    margin-right: 20px;
-    text-align: center;
-    border-radius: 50px;
-    line-height: 40px;
-    color: @initialEditUser;
-    font-weight: 400;
-  }
-  ul:before {
-    content: none;
-  }
-}

apps/spreadsheeteditor/mobile/app-dev.js

@@ -134,8 +134,8 @@ require([
             ,'AddShape'
             ,'AddOther'
             ,'AddLink'
-            ,'Collaboration'
             ,'FilterOptions'
+            ,'Common.Controllers.Collaboration'
         ]
     });
 
@@ -207,8 +207,8 @@ require([
         ,'spreadsheeteditor/mobile/app/controller/add/AddShape'
         ,'spreadsheeteditor/mobile/app/controller/add/AddOther'
         ,'spreadsheeteditor/mobile/app/controller/add/AddLink'
-        ,'spreadsheeteditor/mobile/app/controller/Collaboration'
         ,'spreadsheeteditor/mobile/app/controller/FilterOptions'
+        ,'common/mobile/lib/controller/Collaboration'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/spreadsheeteditor/mobile/app.js

@@ -145,8 +145,8 @@ require([
             ,'AddShape'
             ,'AddOther'
             ,'AddLink'
-            ,'Collaboration'
             ,'FilterOptions'
+            ,'Common.Controllers.Collaboration'
         ]
     });
 
@@ -218,8 +218,8 @@ require([
         ,'spreadsheeteditor/mobile/app/controller/add/AddShape'
         ,'spreadsheeteditor/mobile/app/controller/add/AddOther'
         ,'spreadsheeteditor/mobile/app/controller/add/AddLink'
-        ,'spreadsheeteditor/mobile/app/controller/Collaboration'
         ,'spreadsheeteditor/mobile/app/controller/FilterOptions'
+        ,'common/mobile/lib/controller/Collaboration'
     ], function() {
         app.start();
     });

apps/spreadsheeteditor/mobile/app/controller/Collaboration.js

@@ -1,217 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Collaboration.js
- *  Spreadsheet Editor
- *
- *  Created by Julia Svinareva on 4/6/19
- *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
- *
- */
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone',
-    'spreadsheeteditor/mobile/app/view/Collaboration'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    SSE.Controllers.Collaboration = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var rootView,
-            _userId,
-            editUsers = [];
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'Collaboration'
-            ],
-
-            initialize: function() {
-                var me = this;
-                me.addListeners({
-                    'Collaboration': {
-                        'page:show' : me.onPageShow
-                    }
-                });
-            },
-
-            setApi: function(api) {
-                this.api = api;
-                this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onChangeEditUsers, this));
-                this.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(this.onChangeEditUsers, this));
-            },
-
-            onLaunch: function () {
-                this.createView('Collaboration').render();
-            },
-
-            setMode: function(mode) {
-                this.appConfig = mode;
-                _userId = mode.user.id;
-                return this;
-            },
-
-
-            showModal: function() {
-                var me = this,
-                    isAndroid = Framework7.prototype.device.android === true,
-                    modalView,
-                    mainView = SSE.getController('Editor').getView('Editor').f7View;
-
-                uiApp.closeModal();
-
-                if (Common.SharedSettings.get('phone')) {
-                    modalView = $$(uiApp.pickerModal(
-                        '<div class="picker-modal settings container-collaboration">' +
-                        '<div class="view collaboration-root-view navbar-through">' +
-                        this.getView('Collaboration').rootLayout() +
-                        '</div>' +
-                        '</div>'
-                    )).on('opened', function () {
-                        if (_.isFunction(me.api.asc_OnShowContextMenu)) {
-                            me.api.asc_OnShowContextMenu()
-                        }
-                    }).on('close', function (e) {
-                        mainView.showNavbar();
-                    }).on('closed', function () {
-                        if (_.isFunction(me.api.asc_OnHideContextMenu)) {
-                            me.api.asc_OnHideContextMenu()
-                        }
-                    });
-                    mainView.hideNavbar();
-                } else {
-                    modalView = uiApp.popover(
-                        '<div class="popover settings container-collaboration">' +
-                        '<div class="popover-angle"></div>' +
-                        '<div class="popover-inner">' +
-                        '<div class="content-block">' +
-                        '<div class="view popover-view collaboration-root-view navbar-through">' +
-                        this.getView('Collaboration').rootLayout() +
-                        '</div>' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>',
-                        $$('#toolbar-collaboration')
-                    );
-                }
-
-                if (Framework7.prototype.device.android === true) {
-                    $$('.view.collaboration-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
-                    $$('.view.collaboration-root-view .navbar').prependTo('.view.collaboration-root-view > .pages > .page');
-                }
-
-                rootView = uiApp.addView('.collaboration-root-view', {
-                    dynamicNavbar: true,
-                    domCache: true
-                });
-
-                Common.NotificationCenter.trigger('collaborationcontainer:show');
-                this.onPageShow(this.getView('Collaboration'));
-
-                SSE.getController('Toolbar').getView('Toolbar').hideSearch();
-            },
-
-            rootView : function() {
-                return rootView;
-            },
-
-            onPageShow: function(view, pageId) {
-                var me = this;
-
-                if('#edit-users-view' == pageId) {
-                    me.initEditUsers();
-                    Common.Utils.addScrollIfNeed('.page[data-page=edit-users-view]', '.page[data-page=edit-users-view] .page-content');
-                } else {
-                }
-            },
-
-            onChangeEditUsers: function(users) {
-                editUsers = users;
-            },
-
-            initEditUsers: function() {
-                var usersArray = [];
-                _.each(editUsers, function(item){
-                    var fio = item.asc_getUserName().split(' ');
-                    var initials = fio[0].substring(0, 1).toUpperCase();
-                    if (fio.length > 1) {
-                        initials += fio[fio.length - 1].substring(0, 1).toUpperCase();
-                    }
-                    if(!item.asc_getView()) {
-                        var userAttr = {
-                            color: item.asc_getColor(),
-                            id: item.asc_getId(),
-                            idOriginal: item.asc_getIdOriginal(),
-                            name: item.asc_getUserName(),
-                            view: item.asc_getView(),
-                            initial: initials
-                        };
-                        if(item.asc_getIdOriginal() == _userId) {
-                            usersArray.unshift(userAttr);
-                        } else {
-                            usersArray.push(userAttr);
-                        }
-                    }
-                });
-                var userSort = _.chain(usersArray).groupBy('idOriginal').value();
-                var templateUserItem = _.template([
-                    '<%  _.each(users, function (user) { %>',
-                    '<li id="<%= user[0].id %>" class="<% if (user[0].view) {%> viewmode <% } %> item-content">' +
-                    '<div class="user-name item-inner">' +
-                    '<div class="color" style="background-color: <%= user[0].color %>;"><%= user[0].initial %></div>'+
-                    '<label><%= user[0].name %></label>' +
-                    '<% if (user.length>1) { %><label class="length"> (<%= user.length %>)</label><% } %>' +
-                    '</div>'+
-                    '</li>',
-                    '<% }); %>'].join(''));
-                var templateUserList = _.template(
-                    '<div class="item-content"><div class="item-inner">' +
-                    this.textEditUser +
-                    '</div></div>' +
-                    '<ul>' +
-                    templateUserItem({users: userSort}) +
-                    '</ul>');
-                $('#user-list').html(templateUserList());
-            },
-
-
-            textEditUser: 'Document is currently being edited by several users.'
-
-        }
-    })(), SSE.Controllers.Collaboration || {}))
-});

apps/spreadsheeteditor/mobile/app/controller/Main.js

@@ -506,9 +506,9 @@ define([
                 this.api.asc_setZoom(zf>0 ? zf : 1);
 
                 /** coauthoring begin **/
-                value = Common.localStorage.getItem("sse-settings-livecomment");
+                this.isLiveCommenting = Common.localStorage.getBool("sse-settings-livecomment", true);
-                this.isLiveCommenting = !(value!==null && parseInt(value) == 0);
+                var resolved = Common.localStorage.getBool("sse-settings-resolvedcomment", true);
-                this.isLiveCommenting?this.api.asc_showComments(true):this.api.asc_hideComments();
+                this.isLiveCommenting ? this.api.asc_showComments(resolved) : this.api.asc_hideComments();
 
                 if (this.appOptions.isEdit && this.appOptions.canLicense && !this.appOptions.isOffline && this.appOptions.canCoAuthoring) {
                     // Force ON fast co-authoring mode

apps/spreadsheeteditor/mobile/app/controller/Settings.js

@@ -282,7 +282,7 @@ define([
             },
 
             onCollaboration: function() {
-                SSE.getController('Collaboration').showModal();
+                SSE.getController('Common.Controllers.Collaboration').showModal();
             },
 
             initSpreadsheetSettings: function() {
@@ -549,6 +549,44 @@ define([
                 var $r1c1Style = $('.page[data-page=settings-application-view] #r1-c1-style input');
                 $r1c1Style.prop('checked',value);
                 $r1c1Style.single('change',    _.bind(me.clickR1C1Style, me));
+
+                //init Commenting Display
+                var displayComments = Common.localStorage.getBool("sse-settings-livecomment", true);
+                $('#settings-display-comments input:checkbox').attr('checked', displayComments);
+                $('#settings-display-comments input:checkbox').single('change',   _.bind(me.onChangeDisplayComments, me));
+                var displayResolved = Common.localStorage.getBool("sse-settings-resolvedcomment", true);
+                if (!displayComments) {
+                    $("#settings-display-resolved").addClass("disabled");
+                    displayResolved = false;
+                }
+                $('#settings-display-resolved input:checkbox').attr('checked', displayResolved);
+                $('#settings-display-resolved input:checkbox').single('change',   _.bind(me.onChangeDisplayResolved, me));
+            },
+
+            onChangeDisplayComments: function(e) {
+                var displayComments = $(e.currentTarget).is(':checked');
+                if (!displayComments) {
+                    this.api.asc_hideComments();
+                    $("#settings-display-resolved input").prop( "checked", false );
+                    Common.localStorage.setBool("sse-settings-resolvedcomment", false);
+                    $("#settings-display-resolved").addClass("disabled");
+                } else {
+                    var resolved = Common.localStorage.getBool("sse-settings-resolvedcomment");
+                    this.api.asc_showComments(resolved);
+                    $("#settings-display-resolved").removeClass("disabled");
+                }
+                Common.localStorage.setBool("sse-settings-livecomment", displayComments);
+            },
+
+            onChangeDisplayResolved: function(e) {
+                var displayComments = Common.localStorage.getBool("sse-settings-livecomment");
+                if (displayComments) {
+                    var resolved = $(e.currentTarget).is(':checked');
+                    if (this.api) {
+                        this.api.asc_showComments(resolved);
+                    }
+                    Common.localStorage.setBool("sse-settings-resolvedcomment", resolved);
+                }
             },
 
             clickR1C1Style: function(e) {

apps/spreadsheeteditor/mobile/app/controller/Toolbar.js

@@ -160,6 +160,7 @@ define([
 
             onApiActiveSheetChanged: function (index) {
                 locked.sheet = this.api.asc_isWorksheetLockedOrDeleted(index);
+                Common.NotificationCenter.trigger('comments:filterchange', ['doc', 'sheet' + this.api.asc_getWorksheetId(index)], false );
             },
 
             onApiCanRevert: function(which, can) {

apps/spreadsheeteditor/mobile/app/template/Collaboration.template

@@ -1,47 +0,0 @@
-<!-- Root view -->
-<div id="collaboration-root-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="center sliding"><%= scope.textCollaboration %></div>
-            <div class="right sliding close-collaboration"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="collaboration-root-view">
-            <div class="page-content">
-                <div class="list-block">
-                    <ul>
-                        <li>
-                            <a id="list-edit-users" class="item-link" data-page="#edit-users-view">
-                                <div class="item-content">
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textEditUsers %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Editable Users view -->
-<div id="edit-users-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textEditUsers %></div>
-            <div class="right sliding"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page page-change" data-page="edit-users-view">
-            <div class="page-content">
-                <div id="user-list" class="list-block">
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

apps/spreadsheeteditor/mobile/app/template/Settings.template

@@ -430,7 +430,49 @@
                         </li>
                     </ul>
                 </div>
+                <div class="content-block-title"><%= scope.textRegionalSettings %></div>
                 <div class="list-block">
+                    <ul>
+                        <li class="media-item">
+                            <a id="regional-settings" class="item-link item-content" data-page="#regional-settings-view">
+                                <div class="item-inner">
+                                    <div class="item-title-row">
+                                        <div class="item-title"><%= scope.textCustom %></div>
+                                    </div>
+                                    <div class="item-subtitle"><%= scope.textExample + ": "%><span class="item-example"><%= scope.textCustomSize %></span></div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title display-view"><%= scope.textCommentingDisplay %></div>
+                <div class="list-block display-view">
+                    <ul>
+                        <div id="settings-display-comments" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textDisplayComments %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="settings-display-resolved" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textDisplayResolvedComments %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </ul>
+                </div>
+                <div class="list-block display-view">
                     <ul>
                         <li id="r1-c1-style">
                             <div class="item-content">
@@ -447,21 +489,6 @@
                         </li>
                     </ul>
                 </div>
-                <div class="content-block-title"><%= scope.textRegionalSettings %></div>
-                <div class="list-block">
-                    <ul>
-                        <li class="media-item">
-                            <a id="regional-settings" class="item-link item-content" data-page="#regional-settings-view">
-                                <div class="item-inner">
-                                    <div class="item-title-row">
-                                        <div class="item-title"><%= scope.textCustom %></div>
-                                    </div>
-                                    <div class="item-subtitle"><%= scope.textExample + ": "%><span class="item-example"><%= scope.textCustomSize %></span></div>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
             </div>
         </div>
     </div>

apps/spreadsheeteditor/mobile/app/view/Collaboration.js

@@ -1,149 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Collaboration.js
- *  Presentation Editor
- *
- *  Created by Julia Svinareva on 31/5/19
- *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!spreadsheeteditor/mobile/app/template/Collaboration.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (settingsTemplate, $, _, Backbone) {
-    'use strict';
-
-    SSE.Views.Collaboration = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-
-            template: _.template(settingsTemplate),
-
-            events: {
-                //
-            },
-
-            initialize: function() {
-                Common.NotificationCenter.on('collaborationcontainer:show', _.bind(this.initEvents, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                Common.Utils.addScrollIfNeed('.view[data-page=collaboration-root-view] .pages', '.view[data-page=collaboration-root-view] .page');
-                me.updateItemHandlers();
-            },
-
-            initControls: function() {
-                //
-            },
-
-            // Render layout
-            render: function() {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    orthography: Common.SharedSettings.get('sailfish'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            updateItemHandlers: function () {
-                var selectorsDynamicPage = [
-                    '.page[data-page=collaboration-root-view]'
-                ].map(function (selector) {
-                    return selector + ' a.item-link[data-page]';
-                }).join(', ');
-
-                $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
-            },
-
-            onItemClick: function (e) {
-                var $target = $(e.currentTarget),
-                    page = $target.data('page');
-
-                if (page && page.length > 0 ) {
-                    this.showPage(page);
-                }
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    var $layour = this.layout.find('#collaboration-root-view'),
-                        isPhone = Common.SharedSettings.get('phone');
-
-                    return $layour.html();
-                }
-
-                return '';
-            },
-
-            showPage: function(templateId, animate) {
-                var rootView = SSE.getController('Collaboration').rootView();
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html(),
-                        animatePages: animate !== false
-                    });
-
-                    this.fireEvent('page:show', [this, templateId]);
-                }
-            },
-
-
-
-            textCollaboration: 'Collaboration',
-            textСomments: 'Сomments',
-            textBack: 'Back',
-            textEditUsers: 'Users'
-
-        }
-    })(), SSE.Views.Collaboration || {}))
-});

apps/spreadsheeteditor/mobile/app/view/Settings.js

@@ -130,7 +130,6 @@ define([
                         $layout.find('#settings-search .item-title').text(this.textFindAndReplace)
                     } else {
                         $layout.find('#settings-spreadsheet').hide();
-                        $layout.find('#settings-application').hide();
                     }
                     if (!canDownload) $layout.find('#settings-download').hide();
                     if (!canAbout) $layout.find('#settings-about').hide();
@@ -170,6 +169,9 @@ define([
                 this.showPage('#settings-application-view');
                 $('#language-formula').single('click', _.bind(this.showFormulaLanguage, this));
                 $('#regional-settings').single('click', _.bind(this.showRegionalSettings, this));
+                if (!isEdit) {
+                    $('.page[data-page=settings-application-view] .page-content > :not(.display-view)').hide();
+                }
             },
 
             showFormulaLanguage: function () {
@@ -381,7 +383,10 @@ define([
             textFormulaLanguage: 'Formula Language',
             textExample: 'Example',
             textR1C1Style: 'R1C1 Reference Style',
-            textRegionalSettings: 'Regional Settings'
+            textRegionalSettings: 'Regional Settings',
+            textCommentingDisplay: 'Commenting Display',
+            textDisplayComments: 'Comments',
+            textDisplayResolvedComments: 'Resolved Comments'
     }
     })(), SSE.Views.Settings || {}))
 });

apps/spreadsheeteditor/mobile/app/view/Toolbar.js

@@ -158,7 +158,7 @@ define([
 
             //Collaboration
             showCollaboration: function () {
-                SSE.getController('Collaboration').showModal();
+                SSE.getController('Common.Controllers.Collaboration').showModal();
             },
 
             textBack: 'Back'

apps/spreadsheeteditor/mobile/locale/en.json

@@ -300,7 +300,7 @@
   "SSE.Controllers.Toolbar.dlgLeaveTitleText": "You leave the application",
   "SSE.Controllers.Toolbar.leaveButtonText": "Leave this Page",
   "SSE.Controllers.Toolbar.stayButtonText": "Stay on this Page",
-  "SSE.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
+  "Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
   "SSE.Controllers.FilterOptions.textEmptyItem": "{Blanks}",
   "SSE.Controllers.FilterOptions.textSelectAll": "Select All",
   "SSE.Controllers.FilterOptions.textErrorTitle": "Warning",
@@ -555,11 +555,14 @@
   "SSE.Views.Settings.textCollaboration": "Collaboration",
   "SSE.Views.Settings.textR1C1Style": "R1C1 Reference Style",
   "SSE.Views.Settings.textRegionalSettings": "Regional Settings",
+  "SSE.Views.Settings.textCommentingDisplay": "Commenting Display",
+  "SSE.Views.Settings.textDisplayComments": "Comments",
+  "SSE.Views.Settings.textDisplayResolvedComments": "Resolved Comments",
   "SSE.Views.Toolbar.textBack": "Back",
-  "SSE.Views.Collaboration.textCollaboration": "Collaboration",
+  "Common.Views.Collaboration.textCollaboration": "Collaboration",
-  "SSE.Views.Collaboration.textСomments": "Сomments",
+  "Common.Views.Collaboration.textСomments": "Сomments",
-  "SSE.Views.Collaboration.textBack": "Back",
+  "Common.Views.Collaboration.textBack": "Back",
-  "SSE.Views.Collaboration.textEditUsers": "Users",
+  "Common.Views.Collaboration.textEditUsers": "Users",
   "SSE.Views.FilterOptions.textFilter": "Filter Options",
   "SSE.Views.FilterOptions.textClearFilter": "Clear Filter",
   "SSE.Views.FilterOptions.textDeleteFilter": "Delete Filter"

apps/spreadsheeteditor/mobile/resources/css/app-ios.css

@@ -6274,6 +6274,157 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   margin-left: 20px;
   color: #212121;
 }
+.page-change .block-description {
+  background-color: #fff;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  margin: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+}
+.page-change #user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+}
+.page-change #date-change {
+  font-size: 14px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 3px;
+}
+.page-change #text-change {
+  color: #000000;
+  font-size: 15px;
+  line-height: 20px;
+  margin: 0;
+  margin-top: 10px;
+}
+.page-change .block-btn,
+.page-change .content-block.block-btn:first-child {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 26px 0;
+}
+.page-change .block-btn #btn-next-change,
+.page-change .content-block.block-btn:first-child #btn-next-change,
+.page-change .block-btn #btn-reject-change,
+.page-change .content-block.block-btn:first-child #btn-reject-change {
+  margin-left: 20px;
+}
+.page-change .block-btn #btn-goto-change,
+.page-change .content-block.block-btn:first-child #btn-goto-change {
+  margin-right: 20px;
+}
+.page-change .block-btn .right-buttons,
+.page-change .content-block.block-btn:first-child .right-buttons {
+  display: flex;
+}
+.page-change .block-btn .link,
+.page-change .content-block.block-btn:first-child .link {
+  display: inline-block;
+}
+.navbar .center-collaboration {
+  display: flex;
+  justify-content: space-around;
+}
+.container-collaboration .navbar .right.close-collaboration {
+  position: absolute;
+  right: 10px;
+}
+.container-collaboration .page-content .list-block:first-child {
+  margin-top: -1px;
+}
+#user-list .item-content {
+  padding-left: 0;
+}
+#user-list .item-inner {
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+#user-list .length {
+  margin-left: 4px;
+}
+#user-list .color {
+  min-width: 40px;
+  min-height: 40px;
+  margin-right: 20px;
+  text-align: center;
+  border-radius: 50px;
+  line-height: 40px;
+  color: #373737;
+  font-weight: 500;
+}
+#user-list ul:before {
+  content: none;
+}
+.page-comments .list-block .item-inner {
+  display: block;
+  padding: 16px 0;
+  word-wrap: break-word;
+}
+.page-comments p {
+  margin: 0;
+}
+.page-comments .user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+  font-weight: bold;
+}
+.page-comments .comment-date,
+.page-comments .reply-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 0px;
+}
+.page-comments .comment-text,
+.page-comments .reply-text {
+  color: #000000;
+  font-size: 15px;
+  line-height: 25px;
+  margin: 0;
+  max-width: 100%;
+  padding-right: 15px;
+}
+.page-comments .reply-item {
+  margin-top: 15px;
+}
+.page-comments .reply-item .user-name {
+  padding-top: 16px;
+}
+.page-comments .reply-item:before {
+  content: '';
+  position: absolute;
+  left: auto;
+  bottom: 0;
+  right: auto;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: #c8c7cc;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.page-comments .comment-quote {
+  color: #40865c;
+  border-left: 1px solid #40865c;
+  padding-left: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+}
+.settings.popup .list-block ul.list-reply:last-child:after,
+.settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
+}
 i.icon.icon-search {
   width: 24px;
   height: 24px;
@@ -7222,29 +7373,6 @@ html.pixel-ratio-3 .cell-styles.dataview .row li {
   max-height: 100%;
   overflow: auto;
 }
-#user-list .item-content {
-  padding-left: 0;
-}
-#user-list .item-inner {
-  justify-content: flex-start;
-  padding-left: 15px;
-}
-#user-list .length {
-  margin-left: 4px;
-}
-#user-list .color {
-  min-width: 40px;
-  min-height: 40px;
-  margin-right: 20px;
-  text-align: center;
-  border-radius: 50px;
-  line-height: 40px;
-  color: #373737;
-  font-weight: 500;
-}
-#user-list ul:before {
-  content: none;
-}
 .filter-root-view .list-center .item-title {
   text-align: center;
   width: 100%;

apps/spreadsheeteditor/mobile/resources/css/app-material.css

@@ -5877,6 +5877,149 @@ html.phone .document-menu .list-block .item-link {
   margin-left: 20px;
   color: #212121;
 }
+.page-change .block-description {
+  background-color: #fff;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  margin: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+}
+.page-change #user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+}
+.page-change #date-change {
+  font-size: 14px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 3px;
+}
+.page-change #text-change {
+  color: #000000;
+  font-size: 15px;
+  line-height: 20px;
+  margin: 0;
+  margin-top: 10px;
+}
+.page-change .block-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 0;
+  padding: 26px 0;
+  background-color: #EFEFF4;
+}
+.page-change .block-btn #btn-next-change,
+.page-change .block-btn #btn-reject-change {
+  margin-left: 20px;
+}
+.page-change .block-btn #btn-goto-change {
+  margin-right: 20px;
+}
+.page-change .block-btn .right-buttons {
+  display: flex;
+}
+.page-change .block-btn .link {
+  display: inline-block;
+}
+.container-collaboration .navbar .right.close-collaboration {
+  position: absolute;
+  right: 5px;
+}
+.container-collaboration .page-content .list-block:first-child {
+  margin-top: -1px;
+}
+#user-list .item-content {
+  padding-left: 0;
+}
+#user-list .item-inner {
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+#user-list .length {
+  margin-left: 4px;
+}
+#user-list .color {
+  min-width: 40px;
+  min-height: 40px;
+  margin-right: 20px;
+  text-align: center;
+  border-radius: 50px;
+  line-height: 40px;
+  color: #373737;
+  font-weight: 400;
+}
+#user-list ul:before {
+  content: none;
+}
+.page-comments .list-block .item-inner {
+  display: block;
+  padding: 16px 0;
+  word-wrap: break-word;
+}
+.page-comments p {
+  margin: 0;
+}
+.page-comments .user-name {
+  font-size: 17px;
+  line-height: 22px;
+  color: #000000;
+  margin: 0;
+  font-weight: bold;
+}
+.page-comments .comment-date,
+.page-comments .reply-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d6d72;
+  margin: 0;
+  margin-top: 0px;
+}
+.page-comments .comment-text,
+.page-comments .reply-text {
+  color: #000000;
+  font-size: 15px;
+  line-height: 25px;
+  margin: 0;
+  max-width: 100%;
+  padding-right: 15px;
+}
+.page-comments .reply-item {
+  margin-top: 15px;
+}
+.page-comments .reply-item .user-name {
+  padding-top: 16px;
+}
+.page-comments .reply-item:before {
+  content: '';
+  position: absolute;
+  left: auto;
+  bottom: 0;
+  right: auto;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.12);
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.page-comments .comment-quote {
+  color: #40865c;
+  border-left: 1px solid #40865c;
+  padding-left: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+}
+.settings.popup .list-block ul.list-reply:last-child:after,
+.settings.popover .list-block ul.list-reply:last-child:after {
+  display: none;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }
@@ -7090,29 +7233,6 @@ html.pixel-ratio-3 .cell-styles.dataview .row li {
   max-height: 100%;
   overflow: auto;
 }
-#user-list .item-content {
-  padding-left: 0;
-}
-#user-list .item-inner {
-  justify-content: flex-start;
-  padding-left: 15px;
-}
-#user-list .length {
-  margin-left: 4px;
-}
-#user-list .color {
-  min-width: 40px;
-  min-height: 40px;
-  margin-right: 20px;
-  text-align: center;
-  border-radius: 50px;
-  line-height: 40px;
-  color: #373737;
-  font-weight: 400;
-}
-#user-list ul:before {
-  content: none;
-}
 .filter-root-view .list-center .item-title {
   text-align: center;
   width: 100%;

apps/spreadsheeteditor/mobile/resources/less/app-ios.less

@@ -74,6 +74,7 @@ input, textarea {
 @import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/ios/_about.less');
 @import url('../../../../common/mobile/resources/less/ios/_color-schema.less');
+@import url('../../../../common/mobile/resources/less/ios/_collaboration.less');
 
 
 @import url('ios/_icons.less');
@@ -193,36 +194,6 @@ input, textarea {
   overflow: auto;
 }
 
-//Edit users
-@initialEditUser: #373737;
-
-#user-list {
-  .item-content {
-    padding-left: 0;
-  }
-  .item-inner {
-    justify-content: flex-start;
-    padding-left: 15px;
-  }
-  .length {
-    margin-left: 4px;
-  }
-  .color {
-    min-width: 40px;
-    min-height: 40px;
-    margin-right: 20px;
-    text-align: center;
-    border-radius: 50px;
-    line-height: 40px;
-    color: @initialEditUser;
-    font-weight: 500;
-
-  }
-  ul:before {
-    content: none;
-  }
-}
-
 //Filter Options
 .filter-root-view {
   .list-center .item-title {

apps/spreadsheeteditor/mobile/resources/less/app-material.less

@@ -67,6 +67,7 @@ input, textarea {
 @import url('../../../../common/mobile/resources/less/material/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/material/_about.less');
 @import url('../../../../common/mobile/resources/less/material/_color-schema.less');
+@import url('../../../../common/mobile/resources/less/material/_collaboration.less');
 
 @import url('material/_search.less');
 @import url('material/_icons.less');
@@ -180,35 +181,6 @@ input, textarea {
   overflow: auto;
 }
 
-//Edit users
-@initialEditUser: #373737;
-
-#user-list {
-  .item-content {
-    padding-left: 0;
-  }
-  .item-inner {
-    justify-content: flex-start;
-    padding-left: 15px;
-  }
-  .length {
-    margin-left: 4px;
-  }
-  .color {
-    min-width: 40px;
-    min-height: 40px;
-    margin-right: 20px;
-    text-align: center;
-    border-radius: 50px;
-    line-height: 40px;
-    color: @initialEditUser;
-    font-weight: 400;
-  }
-  ul:before {
-    content: none;
-  }
-}
-
 //Filter Options
 .filter-root-view {
   .list-center .item-title {