Merge pull request #1601 from ONLYOFFICE/feature/fix-selectors-users

Feature/fix selectors users

apps/common/mobile/lib/controller/ContextMenu.jsx

@@ -175,21 +175,30 @@ class ContextMenuController extends Component {
                 break;
             }
         }
+
         if (!src) {
             src = $$(`<div class="username-tip"></div>`);
             src.attr('userid', UserId);
             src.css({'background-color': '#'+Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())});
             src.text(this.getUserName(UserId));
-            $$('#id_main_parent').append(src);
             this.fastCoAuthTips.push(src);
             //src.fadeIn(150);
             src[0].classList.add('active');
 
-            $$('#id_main_view').append(src);
+            $$("#editor_sdk").append(src);
         }
-        src.css({
+
-            top: (Y - tipHeight) + 'px',
+        if ( X + src.outerWidth() > $$(window).width() ) { 
-            left: X + 'px'});
+            src.css({
+                top: (Y - tipHeight) + 'px',
+                left: X - src.outerWidth() + 'px'});
+        } else {
+            src.css({
+                left: X + 'px',
+                top: (Y - tipHeight) + 'px',
+            });
+        }
+        
         /** coauthoring end **/
     }
 

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

@@ -269,13 +269,18 @@ class ContextMenu extends ContextMenuController {
     }
 
     onApiMouseMove(dataarray) {
-        let index_locked;
+        const tipHeight = 20;
+        let index_locked,
+            index_foreign,
+            editorOffset = $$("#editor_sdk").offset(),
+            XY = [ editorOffset.left -  $(window).scrollLeft(), editorOffset.top - $(window).scrollTop()];
 
         for (let i = dataarray.length; i > 0; i--) {
             if (dataarray[i-1].asc_getType() === Asc.c_oAscMouseMoveType.LockedObject) index_locked = i;
+            if (dataarray[i-1].asc_getType() === Asc.c_oAscMouseMoveType.ForeignSelect) index_foreign = i;
         }
 
-        if (!index_locked && this.isOpenWindowUser) {
+        if (this.isOpenWindowUser) {
             this.timer = setTimeout(() => $$('.username-tip').remove(), 1500);
             this.isOpenWindowUser = false;
         } else {
@@ -284,10 +289,7 @@ class ContextMenu extends ContextMenuController {
         }
 
         if (index_locked && this.isUserVisible(dataarray[index_locked-1].asc_getUserId())) {
-            const tipHeight = 20;
+            let data = dataarray[index_locked - 1],
-            let editorOffset = $$("#editor_sdk").offset(),
-                XY = [ editorOffset.left -  $(window).scrollLeft(), editorOffset.top - $(window).scrollTop()],
-                data = dataarray[index_locked - 1],
                 X = data.asc_getX(),
                 Y = data.asc_getY(),
                 src = $$(`<div class="username-tip"></div>`);
@@ -318,6 +320,39 @@ class ContextMenu extends ContextMenuController {
             }
             this.isOpenWindowUser = true;
         }
+
+        if(index_foreign && this.isUserVisible(dataarray[index_foreign-1].asc_getUserId())) {
+            let data = dataarray[index_foreign - 1],
+                src = $$(`<div class="username-tip"></div>`),
+                color = data.asc_getColor(),
+                foreignSelectX = data.asc_getX(),
+                foreignSelectY = data.asc_getY();
+            
+            src.css({
+                height      : tipHeight + 'px',
+                position    : 'absolute',
+                zIndex      : '5000',
+                visibility  : 'visible',
+                'background-color': '#'+Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())
+            });
+
+            src.text(this.getUserName(data.asc_getUserId()));
+            src.addClass('active');
+            $$(document.body).append(src);
+
+            if ( foreignSelectX + src.outerWidth() > $$(window).width() ) {
+                src.css({
+                    left:  foreignSelectX - src.outerWidth() + 'px',
+                    top: (foreignSelectY + XY[1] - tipHeight) + 'px',
+                });
+            } else {
+                src.css({
+                    left:  foreignSelectX + 'px',
+                    top: (foreignSelectY + XY[1] - tipHeight) + 'px',
+                });
+            }
+            this.isOpenWindowUser = true;
+        }
     }
 
     initExtraItems () {

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

@@ -71,7 +71,7 @@
     }
 }
 
-.username-tip.active {
+.username-tip {
     background-color: #ee3525; 
 }