[PE mobile] Add Collaboration, add Edit Users, fix less

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

@@ -1,6 +1,7 @@
 // Container
 .phone.ios {
-  .container-edit {
+  .container-edit,
+  .container-collaboration {
     .navbar {
       .hairline(top, @toolbarBorderColor);
     }
@@ -15,7 +16,8 @@
 
 .container-edit,
 .container-add,
-.container-settings {
+.container-settings,
+.container-collaboration {
   &.popover {
     width: 360px;
   }

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

@@ -1,7 +1,8 @@
 // Container
 
 .phone.android {
-  .container-edit {
+  .container-edit,
+  .container-collaboration {
 
     .page-content {
       .list-block:first-child {
@@ -13,7 +14,8 @@
 
 .container-edit,
 .container-add,
-.container-settings {
+.container-settings,
+.container-collaboration {
   &.popover {
     width: 360px;
   }

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

@@ -5844,7 +5844,8 @@ html:not(.phone) #editor-navbar.navbar .right a + a,
 html:not(.phone) #editor-navbar.navbar .left a + a {
   margin-left: 10px;
 }
-.phone.ios .container-edit .navbar:before {
+.phone.ios .container-edit .navbar:before,
+.phone.ios .container-collaboration .navbar:before {
   content: '';
   position: absolute;
   left: 0;
@@ -5859,20 +5860,24 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
   -webkit-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
 }
-html.pixel-ratio-2 .phone.ios .container-edit .navbar:before {
+html.pixel-ratio-2 .phone.ios .container-edit .navbar:before,
+html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before {
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
 }
-html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
+html.pixel-ratio-3 .phone.ios .container-edit .navbar:before,
+html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before {
   -webkit-transform: scaleY(0.33);
   transform: scaleY(0.33);
 }
-.phone.ios .container-edit .page-content .list-block:first-child {
+.phone.ios .container-edit .page-content .list-block:first-child,
+.phone.ios .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
 .container-edit.popover,
 .container-add.popover,
-.container-settings.popover {
+.container-settings.popover,
+.container-collaboration.popover {
   width: 360px;
 }
 .settings.popup .list-block ul,

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

@@ -5628,12 +5628,14 @@ a.item-link,
 [disabled] [disabled] {
   opacity: 1;
 }
-.phone.android .container-edit .page-content .list-block:first-child {
+.phone.android .container-edit .page-content .list-block:first-child,
+.phone.android .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
 .container-edit.popover,
 .container-add.popover,
-.container-settings.popover {
+.container-settings.popover,
+.container-collaboration.popover {
   width: 360px;
 }
 .settings.popup .list-block,

apps/presentationeditor/mobile/app-dev.js

@@ -147,7 +147,8 @@ require([
             'AddShape',
             'AddImage',
             'AddLink',
-            'AddSlide'
+            'AddSlide',
+            'Collaboration'
         ]
     });
 
@@ -214,7 +215,8 @@ require([
         'presentationeditor/mobile/app/controller/add/AddShape',
         'presentationeditor/mobile/app/controller/add/AddImage',
         'presentationeditor/mobile/app/controller/add/AddLink',
-        'presentationeditor/mobile/app/controller/add/AddSlide'
+        'presentationeditor/mobile/app/controller/add/AddSlide',
+        'presentationeditor/mobile/app/controller/Collaboration'
 
     ], function() {
         window.compareVersions = true;

apps/presentationeditor/mobile/app.js

@@ -158,7 +158,8 @@ require([
             'AddShape',
             'AddImage',
             'AddLink',
-            'AddSlide'
+            'AddSlide',
+            'Collaboration'
         ]
     });
 
@@ -225,7 +226,8 @@ require([
         'presentationeditor/mobile/app/controller/add/AddShape',
         'presentationeditor/mobile/app/controller/add/AddImage',
         'presentationeditor/mobile/app/controller/add/AddLink',
-        'presentationeditor/mobile/app/controller/add/AddSlide'
+        'presentationeditor/mobile/app/controller/add/AddSlide',
+        'presentationeditor/mobile/app/controller/Collaboration'
     ], function() {
         app.start();
     });

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

@@ -0,0 +1,212 @@
+/*
+ *
+ * (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()) {
+                        usersArray.push({
+                            color: item.asc_getColor(),
+                            id: item.asc_getId(),
+                            idOriginal: item.asc_getIdOriginal(),
+                            name: item.asc_getUserName(),
+                            view: item.asc_getView(),
+                            initial: initials
+                        })
+                    }
+                });
+                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

@@ -163,6 +163,7 @@ define([
                 $(modalView).find('.formats a').single('click',             _.bind(me._onSaveFormat, me));
                 $('#page-settings-view #slide-size-block li').single('click',           _.bind(me._onSlideSize, me));
                 $('#settings-print').single('click',                        _.bind(me._onPrint, me));
+                $('#settings-collaboration').single('click',                _.bind(me.onCollaboration, me));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=settings-setup-view]', '.page[data-page=settings-setup-view] .page-content');
                 Common.Utils.addScrollIfNeed('.page[data-page=settings-download-view]', '.page[data-page=settings-download-view] .page-content');
@@ -187,6 +188,10 @@ define([
                 }
             },
 
+            onCollaboration: function() {
+                PE.getController('Collaboration').showModal();
+            },
+
             initPageColorSchemes: function () {
                 $('#color-schemes-content').html(templateInsert);
                 $('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));

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

@@ -0,0 +1,47 @@
+<!-- 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/template/Settings.template

@@ -25,6 +25,18 @@
                             </a>
                         </li>
                         <% } %>
+                        <% if(phone) {%>
+                        <li>
+                            <div id="settings-collaboration" class="item-content">
+                                <div class="item-media">
+                                    <i class="icon icon-collaboration"></i>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title"><%= scope.textCollaboration %></div>
+                                </div>
+                            </div>
+                        </li>
+                        <% } %>
                         <li>
                             <a id="settings-presentation-setup" class="item-link">
                                 <div class="item-content">

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

@@ -0,0 +1,149 @@
+/*
+ *
+ * (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/Settings.js

@@ -246,7 +246,8 @@ define([
             textCentimeter: 'Centimeter',
             textPoint: 'Point',
             textInch: 'Inch',
-            textColorSchemes: 'Color Schemes'
+            textColorSchemes: 'Color Schemes',
+            textCollaboration: 'Collaboration'
         }
     })(), PE.Views.Settings || {}))
 });

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

@@ -5844,7 +5844,8 @@ html:not(.phone) #editor-navbar.navbar .right a + a,
 html:not(.phone) #editor-navbar.navbar .left a + a {
   margin-left: 10px;
 }
-.phone.ios .container-edit .navbar:before {
+.phone.ios .container-edit .navbar:before,
+.phone.ios .container-collaboration .navbar:before {
   content: '';
   position: absolute;
   left: 0;
@@ -5859,20 +5860,24 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
   -webkit-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
 }
-html.pixel-ratio-2 .phone.ios .container-edit .navbar:before {
+html.pixel-ratio-2 .phone.ios .container-edit .navbar:before,
+html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before {
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
 }
-html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
+html.pixel-ratio-3 .phone.ios .container-edit .navbar:before,
+html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before {
   -webkit-transform: scaleY(0.33);
   transform: scaleY(0.33);
 }
-.phone.ios .container-edit .page-content .list-block:first-child {
+.phone.ios .container-edit .page-content .list-block:first-child,
+.phone.ios .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
 .container-edit.popover,
 .container-add.popover,
-.container-settings.popover {
+.container-settings.popover,
+.container-collaboration.popover {
   width: 360px;
 }
 .settings.popup .list-block ul,
@@ -6721,6 +6726,11 @@ i.icon.icon-format-otp {
   height: 30px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2233%22%20height%3D%2233%22%20viewBox%3D%220%200%2033%2033%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip-otp%22%3E%3Crect%20width%3D%2233%22%20height%3D%2233%22%2F%3E%3C%2FclipPath%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aa5252%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22otp%22%20clip-path%3D%22url(%23clip-otp)%22%3E%3Crect%20id%3D%22Rectangle_20%22%20data-name%3D%22Rectangle%2020%22%20width%3D%2233%22%20height%3D%2233%22%20fill%3D%22none%22%2F%3E%3Cpath%20id%3D%22Path_33%22%20data-name%3D%22Path%2033%22%20d%3D%22M125.173%2C121h0c-.046-.03-.093-.059-.141-.088a6.133%2C6.133%2C0%2C0%2C0-2.467-.869%2C6.014%2C6.014%2C0%2C0%2C0-4.309%2C1.188%2C6.223%2C6.223%2C0%2C0%2C0-2.892-1.147%2C5.965%2C5.965%2C0%2C0%2C0-4.039%2C1l-.036.024a.176.176%2C0%2C0%2C0-.049.125.145.145%2C0%2C0%2C0%2C.126.158l.019%2C0a.019.019%2C0%2C0%2C0%2C.009%2C0%2C5.781%2C5.781%2C0%2C0%2C1%2C2.005-.111%2C6.41%2C6.41%2C0%2C0%2C1%2C4.782%2C2.669c.06.081.115.076.178%2C0a6.288%2C6.288%2C0%2C0%2C1%2C6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155%2C0%2C0%2C0%2C125.173%2C121Z%22%20transform%3D%22translate(-94.24%20-116)%22%20class%3D%22cls-1%22%2F%3E%3Cpath%20id%3D%22Path_34%22%20data-name%3D%22Path%2034%22%20d%3D%22M126.894%2C125.978a.175.175%2C0%2C0%2C0-.022-.011%2C11.686%2C11.686%2C0%2C0%2C0-4.905-1.082%2C11.924%2C11.924%2C0%2C0%2C0-7.444%2C2.647%2C11.725%2C11.725%2C0%2C0%2C0-5.251-1.245%2C11.884%2C11.884%2C0%2C0%2C0-7.176%2C2.441.229.229%2C0%2C0%2C0-.022.016.217.217%2C0%2C0%2C0-.073.167.2.2%2C0%2C0%2C0%2C.191.211.167.167%2C0%2C0%2C0%2C.037%2C0%2C.118.118%2C0%2C0%2C0%2C.023-.008%2C11.679%2C11.679%2C0%2C0%2C1%2C3.71-.608c3.429%2C0%2C6.486.9%2C8.787%2C3.315a.093.093%2C0%2C0%2C1%2C.016.016.172.172%2C0%2C0%2C0%2C.123.052.18.18%2C0%2C0%2C0%2C.147-.078s.075-.115.111-.171a12.1%2C12.1%2C0%2C0%2C1%2C10.479-5.315c.306%2C0%2C.611.014.912.037l.273.022a.2.2%2C0%2C0%2C0%2C.191-.211A.211.211%2C0%2C0%2C0%2C126.894%2C125.978Z%22%20transform%3D%22translate(-100%20-115.885)%22%20class%3D%22cls-1%22%2F%3E%3Cg%20id%3D%22Group_5%22%20data-name%3D%22Group%205%22%20transform%3D%22translate(16%2016)%22%3E%3Cpath%20id%3D%22Path_44%22%20data-name%3D%22Path%2044%22%20d%3D%22M1.011%2C0H13.989A1.011%2C1.011%2C0%2C0%2C1%2C15%2C1.011V13.989A1.011%2C1.011%2C0%2C0%2C1%2C13.989%2C15H1.011A1.011%2C1.011%2C0%2C0%2C1%2C0%2C13.989V1.011A1.011%2C1.011%2C0%2C0%2C1%2C1.011%2C0Z%22%20class%3D%22cls-1%22%2F%3E%3Cpath%20id%3D%22Path_39%22%20data-name%3D%22Path%2039%22%20d%3D%22M5.794%2C13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z%22%20transform%3D%22translate(2.742%20-0.25)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+i.icon.icon-collaboration {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.9912%206C15.9912%208.34102%2015.4074%2010.1346%2014.6055%2011.3121C13.7983%2012.4974%2012.8249%2013%2011.9912%2013C11.1575%2013%2010.1841%2012.4974%209.37695%2011.3121C8.57501%2010.1346%207.99121%208.34102%207.99121%206C7.99121%203.61508%209.96974%202%2011.9912%202C14.0127%202%2015.9912%203.61508%2015.9912%206ZM14.5015%2012.9506C13.7365%2013.6361%2012.8649%2014%2011.9912%2014C11.1195%2014%2010.2499%2013.6378%209.48619%2012.9554C7.78363%2013.6081%206.36015%2014.2591%205.26963%2014.9224C3.55256%2015.9667%203%2016.8326%203%2017.5C3%2018.2545%203.4257%2019.0877%204.82302%2019.7879C6.25015%2020.5031%208.57272%2020.9999%2012%2021C15.4273%2021%2017.7499%2020.5031%2019.177%2019.7879C20.5743%2019.0877%2021%2018.2545%2021%2017.5C21%2016.8326%2020.4474%2015.9667%2018.7304%2014.9224C17.6372%2014.2575%2016.2095%2013.605%2014.5015%2012.9506ZM15.2272%2012.1594C16.2765%2010.7825%2016.9912%208.67814%2016.9912%206C16.9912%203%2014.5%201%2011.9912%201C9.48242%201%206.99121%203%206.99121%206C6.99121%208.68159%207.70777%2010.7879%208.75931%2012.1647C4.60309%2013.7964%202%2015.4951%202%2017.5C2%2019.9852%205%2021.9999%2012%2022C19%2022%2022%2019.9852%2022%2017.5C22%2015.4929%2019.3913%2013.7927%2015.2272%2012.1594Z%22%20fill%3D%22%23aa5252%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 .label-switch input[type="checkbox"]:checked + .checkbox {
   background: #aa5252;
 }
@@ -6838,3 +6848,26 @@ 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: #6d6d72;
+  font-weight: 500;
+}
+#user-list ul:before {
+  content: none;
+}

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

@@ -5628,12 +5628,14 @@ a.item-link,
 [disabled] [disabled] {
   opacity: 1;
 }
-.phone.android .container-edit .page-content .list-block:first-child {
+.phone.android .container-edit .page-content .list-block:first-child,
+.phone.android .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
 .container-edit.popover,
 .container-add.popover,
-.container-settings.popover {
+.container-settings.popover,
+.container-collaboration.popover {
   width: 360px;
 }
 .settings.popup .list-block,
@@ -6259,6 +6261,11 @@ i.icon.icon-format-otp {
   height: 30px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2233%22%20height%3D%2233%22%20viewBox%3D%220%200%2033%2033%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip-otp%22%3E%3Crect%20width%3D%2233%22%20height%3D%2233%22%2F%3E%3C%2FclipPath%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aa5252%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22otp%22%20clip-path%3D%22url(%23clip-otp)%22%3E%3Crect%20id%3D%22Rectangle_20%22%20data-name%3D%22Rectangle%2020%22%20width%3D%2233%22%20height%3D%2233%22%20fill%3D%22none%22%2F%3E%3Cpath%20id%3D%22Path_33%22%20data-name%3D%22Path%2033%22%20d%3D%22M125.173%2C121h0c-.046-.03-.093-.059-.141-.088a6.133%2C6.133%2C0%2C0%2C0-2.467-.869%2C6.014%2C6.014%2C0%2C0%2C0-4.309%2C1.188%2C6.223%2C6.223%2C0%2C0%2C0-2.892-1.147%2C5.965%2C5.965%2C0%2C0%2C0-4.039%2C1l-.036.024a.176.176%2C0%2C0%2C0-.049.125.145.145%2C0%2C0%2C0%2C.126.158l.019%2C0a.019.019%2C0%2C0%2C0%2C.009%2C0%2C5.781%2C5.781%2C0%2C0%2C1%2C2.005-.111%2C6.41%2C6.41%2C0%2C0%2C1%2C4.782%2C2.669c.06.081.115.076.178%2C0a6.288%2C6.288%2C0%2C0%2C1%2C6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155%2C0%2C0%2C0%2C125.173%2C121Z%22%20transform%3D%22translate(-94.24%20-116)%22%20class%3D%22cls-1%22%2F%3E%3Cpath%20id%3D%22Path_34%22%20data-name%3D%22Path%2034%22%20d%3D%22M126.894%2C125.978a.175.175%2C0%2C0%2C0-.022-.011%2C11.686%2C11.686%2C0%2C0%2C0-4.905-1.082%2C11.924%2C11.924%2C0%2C0%2C0-7.444%2C2.647%2C11.725%2C11.725%2C0%2C0%2C0-5.251-1.245%2C11.884%2C11.884%2C0%2C0%2C0-7.176%2C2.441.229.229%2C0%2C0%2C0-.022.016.217.217%2C0%2C0%2C0-.073.167.2.2%2C0%2C0%2C0%2C.191.211.167.167%2C0%2C0%2C0%2C.037%2C0%2C.118.118%2C0%2C0%2C0%2C.023-.008%2C11.679%2C11.679%2C0%2C0%2C1%2C3.71-.608c3.429%2C0%2C6.486.9%2C8.787%2C3.315a.093.093%2C0%2C0%2C1%2C.016.016.172.172%2C0%2C0%2C0%2C.123.052.18.18%2C0%2C0%2C0%2C.147-.078s.075-.115.111-.171a12.1%2C12.1%2C0%2C0%2C1%2C10.479-5.315c.306%2C0%2C.611.014.912.037l.273.022a.2.2%2C0%2C0%2C0%2C.191-.211A.211.211%2C0%2C0%2C0%2C126.894%2C125.978Z%22%20transform%3D%22translate(-100%20-115.885)%22%20class%3D%22cls-1%22%2F%3E%3Cg%20id%3D%22Group_5%22%20data-name%3D%22Group%205%22%20transform%3D%22translate(16%2016)%22%3E%3Cpath%20id%3D%22Path_44%22%20data-name%3D%22Path%2044%22%20d%3D%22M1.011%2C0H13.989A1.011%2C1.011%2C0%2C0%2C1%2C15%2C1.011V13.989A1.011%2C1.011%2C0%2C0%2C1%2C13.989%2C15H1.011A1.011%2C1.011%2C0%2C0%2C1%2C0%2C13.989V1.011A1.011%2C1.011%2C0%2C0%2C1%2C1.011%2C0Z%22%20class%3D%22cls-1%22%2F%3E%3Cpath%20id%3D%22Path_39%22%20data-name%3D%22Path%2039%22%20d%3D%22M5.794%2C13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z%22%20transform%3D%22translate(2.742%20-0.25)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+i.icon.icon-collaboration {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.9912%206C15.9912%208.34102%2015.4074%2010.1346%2014.6055%2011.3121C13.7983%2012.4974%2012.8249%2013%2011.9912%2013C11.1575%2013%2010.1841%2012.4974%209.37695%2011.3121C8.57501%2010.1346%207.99121%208.34102%207.99121%206C7.99121%203.61508%209.96974%202%2011.9912%202C14.0127%202%2015.9912%203.61508%2015.9912%206ZM14.5015%2012.9506C13.7365%2013.6361%2012.8649%2014%2011.9912%2014C11.1195%2014%2010.2499%2013.6378%209.48619%2012.9554C7.78363%2013.6081%206.36015%2014.2591%205.26963%2014.9224C3.55256%2015.9667%203%2016.8326%203%2017.5C3%2018.2545%203.4257%2019.0877%204.82302%2019.7879C6.25015%2020.5031%208.57272%2020.9999%2012%2021C15.4273%2021%2017.7499%2020.5031%2019.177%2019.7879C20.5743%2019.0877%2021%2018.2545%2021%2017.5C21%2016.8326%2020.4474%2015.9667%2018.7304%2014.9224C17.6372%2014.2575%2016.2095%2013.605%2014.5015%2012.9506ZM15.2272%2012.1594C16.2765%2010.7825%2016.9912%208.67814%2016.9912%206C16.9912%203%2014.5%201%2011.9912%201C9.48242%201%206.99121%203%206.99121%206C6.99121%208.68159%207.70777%2010.7879%208.75931%2012.1647C4.60309%2013.7964%202%2015.4951%202%2017.5C2%2019.9852%205%2021.9999%2012%2022C19%2022%2022%2019.9852%2022%2017.5C22%2015.4929%2019.3913%2013.7927%2015.2272%2012.1594Z%22%20fill%3D%22%23aa5252%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 .navbar i.icon.icon-undo {
   width: 22px;
   height: 22px;
@@ -6667,3 +6674,26 @@ 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: #6d6d72;
+  font-weight: 400;
+}
+#user-list ul:before {
+  content: none;
+}

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

@@ -243,4 +243,34 @@ input, textarea {
 .modal.modal-in {
   max-height: 100%;
   overflow: auto;
+}
+
+//Edit users
+@contentBlockColor: #6d6d72;
+
+#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: @contentBlockColor;
+    font-weight: 500;
+
+  }
+  ul:before {
+    content: none;
+  }
 }

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

@@ -231,4 +231,33 @@ input, textarea {
 .modal.modal-in {
   max-height: 100%;
   overflow: auto;
+}
+
+//Edit users
+@contentBlockColor: #6d6d72;
+
+#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: @contentBlockColor;
+    font-weight: 400;
+  }
+  ul:before {
+    content: none;
+  }
 }

apps/presentationeditor/mobile/resources/less/ios/_icons.less

@@ -398,4 +398,11 @@ i.icon {
     height: 30px;
     .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-otp"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{themeColor};}</style></defs><g id="otp" clip-path="url(#clip-otp)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>');
   }
+
+  //  Collaboration
+  &.icon-collaboration {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9912 6C15.9912 8.34102 15.4074 10.1346 14.6055 11.3121C13.7983 12.4974 12.8249 13 11.9912 13C11.1575 13 10.1841 12.4974 9.37695 11.3121C8.57501 10.1346 7.99121 8.34102 7.99121 6C7.99121 3.61508 9.96974 2 11.9912 2C14.0127 2 15.9912 3.61508 15.9912 6ZM14.5015 12.9506C13.7365 13.6361 12.8649 14 11.9912 14C11.1195 14 10.2499 13.6378 9.48619 12.9554C7.78363 13.6081 6.36015 14.2591 5.26963 14.9224C3.55256 15.9667 3 16.8326 3 17.5C3 18.2545 3.4257 19.0877 4.82302 19.7879C6.25015 20.5031 8.57272 20.9999 12 21C15.4273 21 17.7499 20.5031 19.177 19.7879C20.5743 19.0877 21 18.2545 21 17.5C21 16.8326 20.4474 15.9667 18.7304 14.9224C17.6372 14.2575 16.2095 13.605 14.5015 12.9506ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{themeColor}"/></g></svg>');
+  }
 }

apps/presentationeditor/mobile/resources/less/material/_icons.less

@@ -368,6 +368,13 @@ i.icon {
     height: 30px;
     .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-otp"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{themeColor};}</style></defs><g id="otp" clip-path="url(#clip-otp)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>');
   }
+
+  //  Collaboration
+  &.icon-collaboration {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9912 6C15.9912 8.34102 15.4074 10.1346 14.6055 11.3121C13.7983 12.4974 12.8249 13 11.9912 13C11.1575 13 10.1841 12.4974 9.37695 11.3121C8.57501 10.1346 7.99121 8.34102 7.99121 6C7.99121 3.61508 9.96974 2 11.9912 2C14.0127 2 15.9912 3.61508 15.9912 6ZM14.5015 12.9506C13.7365 13.6361 12.8649 14 11.9912 14C11.1195 14 10.2499 13.6378 9.48619 12.9554C7.78363 13.6081 6.36015 14.2591 5.26963 14.9224C3.55256 15.9667 3 16.8326 3 17.5C3 18.2545 3.4257 19.0877 4.82302 19.7879C6.25015 20.5031 8.57272 20.9999 12 21C15.4273 21 17.7499 20.5031 19.177 19.7879C20.5743 19.0877 21 18.2545 21 17.5C21 16.8326 20.4474 15.9667 18.7304 14.9224C17.6372 14.2575 16.2095 13.605 14.5015 12.9506ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{themeColor}"/></g></svg>');
+  }
 }
 
 // Overwrite color for toolbar

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

@@ -5844,7 +5844,8 @@ html:not(.phone) #editor-navbar.navbar .right a + a,
 html:not(.phone) #editor-navbar.navbar .left a + a {
   margin-left: 10px;
 }
-.phone.ios .container-edit .navbar:before {
+.phone.ios .container-edit .navbar:before,
+.phone.ios .container-collaboration .navbar:before {
   content: '';
   position: absolute;
   left: 0;
@@ -5859,20 +5860,24 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
   -webkit-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
 }
-html.pixel-ratio-2 .phone.ios .container-edit .navbar:before {
+html.pixel-ratio-2 .phone.ios .container-edit .navbar:before,
+html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before {
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
 }
-html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
+html.pixel-ratio-3 .phone.ios .container-edit .navbar:before,
+html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before {
   -webkit-transform: scaleY(0.33);
   transform: scaleY(0.33);
 }
-.phone.ios .container-edit .page-content .list-block:first-child {
+.phone.ios .container-edit .page-content .list-block:first-child,
+.phone.ios .container-collaboration .page-content .list-block:first-child {
   margin-top: -1px;
 }
 .container-edit.popover,
 .container-add.popover,
-.container-settings.popover {
+.container-settings.popover,
+.container-collaboration.popover {
   width: 360px;
 }
 .settings.popup .list-block ul,