[DE mobile] Add Edit Users into Collaboration

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

@@ -57,7 +57,8 @@ define([
             arrChangeReview = [],
             dateChange = [],
             _fileKey,
-            _userId;
+            _userId,
+            editUsers = [];
 
         return {
             models: [],
@@ -78,6 +79,8 @@ define([
             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));
             },
 
             onLaunch: function () {
@@ -167,6 +170,9 @@ define([
                 } else if('#change-view' == pageId) {
                     me.initChange();
                     Common.Utils.addScrollIfNeed('.page[data-page=change-view]', '.page[data-page=change-view] .page-content');
+                } 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(!this.appConfig.canReview) {
                         $('#reviewing-settings').hide();
@@ -565,6 +571,50 @@ define([
                 }
             },
 
+            onChangeEditUsers: function(users) {
+                editUsers = users;
+            },
+
+            initEditUsers: function() {
+                var templateUserItem = _.template([
+                    '<% _.each(users, function(item) { %>',
+                    '<li id="<%= item.id %>" class="<% if (item.view) {%> viewmode <% } %> item-content">' +
+                    '<div class="user-name item-inner">' +
+                    '<div class="color" style="background-color: <%= item.color %>;"></div>'+
+                    '<label><%= item.name %></label>' +
+                    '<% if (item.len>1) { %><label class="length"> (<%= item.len %>)</label><% } %>' +
+                    '</div>'+
+                    '</li>',
+                    '<% }); %>'
+                ].join(''));
+                var users = [],
+                    usersSort = [],
+                    len;
+                _.each(editUsers, function(item){
+                    users.push({color: item.asc_getColor(), id: item.id, idOriginal: item.idOriginal, name: item.userName, view: item.view})
+                });
+                _.each(users, function(item){
+                    if (usersSort.filter(function (itemFil) {return item.idOriginal === itemFil.idOriginal;}).length === 0) {
+                        len = users.filter(function (itemFil) {
+                            return item.idOriginal === itemFil.idOriginal;
+                        }).length;
+                        usersSort.push({color: item.color, id: item.id, idOriginal: item.idOriginal, name: item.name, view: item.view, len: len})
+                    }
+                });
+                var templateUserList = _.template(
+                    '<div class="item-content"><div class="item-inner">' +
+                    this.textEditUser +
+                    '</div></div>' +
+                    '<ul>' +
+                        templateUserItem(({users: usersSort})) +
+                    '</ul>');
+                    $('#user-list').html(templateUserList({
+                        users: usersSort.filter(function (item) {
+                            return !item.view;
+                        }),
+                    }));
+            },
+
 
 
 
@@ -625,7 +675,8 @@ define([
             textTableRowsDel: '<b>Table Rows Deleted<b/>',
             textParaMoveTo: '<b>Moved:</b>',
             textParaMoveFromUp: '<b>Moved Up:</b>',
-            textParaMoveFromDown: '<b>Moved Down:</b>'
+            textParaMoveFromDown: '<b>Moved Down:</b>',
+            textEditUser: 'Document is currently being edited by several users.'
 
         }
     })(), DE.Controllers.Collaboration || {}))

apps/documenteditor/mobile/app/template/Collaboration.template

@@ -11,6 +11,15 @@
             <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>
                         <li>
                             <a id="reviewing-settings" class="item-link" data-page="#reviewing-settings-view">
                                 <div class="item-content">
@@ -176,3 +185,22 @@
         </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/documenteditor/mobile/app/view/Collaboration.js

@@ -151,7 +151,8 @@ define([
             textMarkup: 'Markup',
             textFinal: 'Final',
             textOriginal: 'Original',
-            textChange: 'Review Change'
+            textChange: 'Review Change',
+            textEditUsers: 'Edit Users'
 
         }
     })(), DE.Views.Collaboration || {}))

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

@@ -6914,3 +6914,22 @@ 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: 26px;
+  min-height: 26px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+  margin-right: 20px;
+}
+#user-list ul:before {
+  content: none;
+}

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

@@ -6685,3 +6685,28 @@ 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: 26px;
+  min-height: 26px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+  margin-right: 20px;
+}
+#user-list ul:after {
+  content: none;
+}
+#user-list ul:before {
+  content: none;
+}
+#user-list .item-inner:after {
+  content: none;
+}

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

@@ -240,3 +240,26 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
+
+//Edit users
+#user-list {
+  .item-content {
+    padding-left: 0;
+  }
+  .item-inner {
+    justify-content: flex-start;
+    padding-left: 15px;
+  }
+  .length {
+    margin-left: 4px;
+  }
+  .color {
+    min-width: 26px;
+    min-height: 26px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+    margin-right: 20px;
+  }
+  ul:before {
+    content: none;
+  }
+}

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

@@ -227,3 +227,32 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
+
+//Edit users
+#user-list {
+  .item-content {
+    padding-left: 0;
+  }
+  .item-inner {
+    justify-content: flex-start;
+    padding-left: 15px;
+  }
+  .length {
+    margin-left: 4px;
+  }
+  .color {
+    min-width: 26px;
+    min-height: 26px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+    margin-right: 20px;
+  }
+  ul:after {
+    content: none;
+  }
+  ul:before {
+    content: none;
+  }
+  .item-inner:after {
+    content: none;
+  }
+}