[mobile] Show foreign cursor label, enable collaboration fast mode

This commit is contained in:
JuliaSvinareva 2021-03-19 19:11:57 +03:00
parent f33112be3a
commit eda4736916
5 changed files with 136 additions and 2 deletions

View file

@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react';
import { f7 } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device'
import {observer, inject} from "mobx-react";
import { Device } from '../../../../common/mobile/utils/device';
import ContextMenuView, { idContextMenuElement, ActionsWithExtraItems } from '../view/ContextMenu';
@ -23,6 +24,8 @@ class ContextMenuController extends Component {
this.onDocumentReady = this.onDocumentReady.bind(this);
this.onApiOpenContextMenu = this.onApiOpenContextMenu.bind(this);
this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this);
this.onApiShowForeignCursorLabel = this.onApiShowForeignCursorLabel.bind(this);
this.onApiHideForeignCursorLabel = this.onApiHideForeignCursorLabel.bind(this);
}
onDocumentReady() {
@ -38,6 +41,8 @@ class ContextMenuController extends Component {
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
api.asc_registerCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
api.asc_registerCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
api.asc_registerCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
}
offsetPopoverTop(popover) {
@ -150,12 +155,61 @@ class ContextMenuController extends Component {
}
}
onApiShowForeignCursorLabel(UserId, X, Y, color) {
/** coauthoring begin **/
const tipHeight = 20;
if (!this.fastCoAuthTips) {
this.fastCoAuthTips = [];
}
let src;
for (let i=0; i<this.fastCoAuthTips.length; i++) {
if (this.fastCoAuthTips[i].attr('userid') === UserId) {
src = this.fastCoAuthTips[i];
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);
}
src.css({
top: (Y - tipHeight) + 'px',
left: X + 'px'});
/** coauthoring end **/
}
onApiHideForeignCursorLabel(userId) {
/** coauthoring begin **/
for (let i=0; i<this.fastCoAuthTips.length; i++) {
if (this.fastCoAuthTips[i].attr('userid') == userId) {
const src = this.fastCoAuthTips[i];
//this.fastCoAuthTips[i].fadeOut(150, () => {src.remove()});
src[0].classList.remove('active');
src.remove();
this.fastCoAuthTips.splice(i, 1);
break;
}
}
/** coauthoring end **/
}
componentWillUnmount() {
Common.Notifications.off('document:ready', this.onDocumentReady);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
}
componentDidMount() {

View file

@ -1,5 +1,6 @@
import React, { Component } from 'react'
import {observer, inject} from "mobx-react"
import { LocalStorage } from '../../../utils/LocalStorage';
class CollaborationController extends Component {
constructor(props){
@ -12,6 +13,52 @@ class CollaborationController extends Component {
api.asc_registerCallback('asc_onParticipantsChanged', this.onChangeEditUsers.bind(this));
api.asc_registerCallback('asc_onConnectionStateChanged', this.onUserConnection.bind(this));
});
Common.Notifications.on('document:ready', this.onDocumentReady.bind(this));
}
onDocumentReady() {
const api = Common.EditorApi.get();
const appOptions = this.props.storeAppOptions;
/** coauthoring begin **/
let isFastCoauth;
if (appOptions.isEdit && appOptions.canLicense && !appOptions.isOffline && appOptions.canCoAuthoring) {
// Force ON fast co-authoring mode
isFastCoauth = true;
api.asc_SetFastCollaborative(isFastCoauth);
if (window.editorType === 'de') {
const value = LocalStorage.getItem((isFastCoauth) ? "de-settings-showchanges-fast" : "de-settings-showchanges-strict");
if (value !== null) {
api.SetCollaborativeMarksShowType(
value === 'all' ? Asc.c_oAscCollaborativeMarksShowType.All :
value === 'none' ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
} else {
api.SetCollaborativeMarksShowType(isFastCoauth ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
}
}
} else if (!appOptions.isEdit && appOptions.isRestrictedEdit) {
isFastCoauth = true;
api.asc_SetFastCollaborative(isFastCoauth);
window.editorType === 'de' && api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
api.asc_setAutoSaveGap(1);
} else {
isFastCoauth = false;
api.asc_SetFastCollaborative(isFastCoauth);
window.editorType === 'de' && api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
}
if (appOptions.isEdit) {
let value;
if (window.editorType === 'sse') {
value = appOptions.canAutosave ? 1 : 0; // FORCE AUTOSAVE
} else {
value = isFastCoauth; // Common.localStorage.getItem("de-settings-autosave");
value = (!isFastCoauth && value !== null) ? parseInt(value) : (appOptions.canCoAuthoring ? 1 : 0);
}
api.asc_setAutoSaveGap(value);
}
/** coauthoring end **/
}
onChangeEditUsers(users) {

View file

@ -62,4 +62,14 @@ export class storeUsers {
});
return user;
}
searchUserByCurrentId (id) {
let user = null;
this.users.forEach((item) => {
if (item.asc_getId() === id) {
user = item;
}
});
return user;
}
}

View file

@ -669,6 +669,22 @@ input[type="number"]::-webkit-inner-spin-button {
}
}
.username-tip {
height: 20px;
color: @white;
padding: 0 10px;
position: absolute;
z-index: 900;
display: none;
pointer-events: none;
transition: opacity 0.1ms ease-out;
opacity: 0;
&.active {
display: block;
opacity: 1;
}
}

View file

@ -11,7 +11,8 @@ import { Device } from '../../../../common/mobile/utils/device';
@inject ( stores => ({
isEdit: stores.storeAppOptions.isEdit,
canViewComments: stores.storeAppOptions.canViewComments,
canReview: stores.storeAppOptions.canReview
canReview: stores.storeAppOptions.canReview,
users: stores.users
}))
class ContextMenu extends ContextMenuController {
constructor(props) {
@ -21,12 +22,18 @@ class ContextMenu extends ContextMenuController {
this.onApiShowComment = this.onApiShowComment.bind(this);
this.onApiHideComment = this.onApiHideComment.bind(this);
this.onApiShowChange = this.onApiShowChange.bind(this);
this.getUserName = this.getUserName.bind(this);
}
static closeContextMenu() {
f7.popover.close(idContextMenuElement, false);
}
getUserName(id) {
const user = this.props.users.searchUserByCurrentId(id);
return Common.Utils.UserInfoParser.getParsedName(user.asc_getUserName());
}
componentWillUnmount() {
super.componentWillUnmount();