Merge pull request #1914 from ONLYOFFICE/feature/fix-bugs

Feature/fix bugs

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -677,7 +677,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
                                     </div>
                                     {isEdit && !viewMode &&
                                         <div className='right'>
-                                            {(comment.editable && displayMode === 'markup' && !wsProps?.Objects) && <div className='comment-resolve' onClick={() => {!isViewer && onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
+                                            {(comment.editable && displayMode === 'markup' && !wsProps?.Objects && !isViewer) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
                                             {(displayMode === 'markup' && !wsProps?.Objects && !isViewer) &&
                                                 <div className='comment-menu'
                                                     onClick={() => {setComment(comment); openActionComment(true);}}>
@@ -808,7 +808,7 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
                                 </div>
                                 {isEdit && !viewMode &&
                                 <div className='right'>
-                                    {(comment.editable && displayMode === 'markup' && !wsProps?.Objects) && <div className='comment-resolve' onClick={() => {!isViewer && onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
+                                    {(comment.editable && displayMode === 'markup' && !wsProps?.Objects && !isViewer) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
                                     {(displayMode === 'markup' && !wsProps?.Objects && !isViewer) &&
                                         <div className='comment-menu'
                                             onClick={() => {openActionComment(true);}}>

apps/documenteditor/mobile/locale/en.json

@@ -677,6 +677,8 @@
     "dlgLeaveTitleText": "You leave the application",
     "leaveButtonText": "Leave this Page",
     "stayButtonText": "Stay on this page",
-    "textOk": "OK"
+    "textOk": "OK",
+    "textSwitchedMobileView": "Switched to Mobile view",
+    "textSwitchedStandardView": "Switched to Standard view"
   }
 }

apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Snackbar = props => {
+    return (
+        <div className="snackbar">
+            <div className="snackbar__content">
+                <p className="snackbar__text">{props.text}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Snackbar;

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -124,7 +124,7 @@ class MainController extends Component {
                     docInfo = new Asc.asc_CDocInfo();
                     docInfo.put_Id(data.doc.key);
                     docInfo.put_Url(data.doc.url);
-                    // docInfo.put_DirectUrl(data.doc.directUrl);
+                    docInfo.put_DirectUrl(data.doc.directUrl);
                     docInfo.put_Title(data.doc.title);
                     docInfo.put_Format(data.doc.fileType);
                     docInfo.put_VKey(data.doc.vkey);
@@ -273,7 +273,7 @@ class MainController extends Component {
                 this.api.Resize();
                 this.api.zoomFitToWidth();
                 this.api.asc_GetDefaultTableStyles && setTimeout(() => {this.api.asc_GetDefaultTableStyles()}, 1);
-
+                this.api.ChangeReaderMode();
                 this.applyLicense();
 
                 Common.Notifications.trigger('document:ready');

apps/documenteditor/mobile/src/controller/Toolbar.jsx

@@ -29,6 +29,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
     const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
 
     const docInfo = props.storeDocumentInfo;
+    const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : '';
     const docTitle = docInfo.dataDoc ? docInfo.dataDoc.title : '';
 
     useEffect(() => {
@@ -151,8 +152,10 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
 
     return (
         <ToolbarView openOptions={props.openOptions}
+                     closeOptions={props.closeOptions}
                      isEdit={appOptions.isEdit}
                      docTitle={docTitle}
+                     docExt={docExt}
                      isShowBack={isShowBack}
                      onBack={onBack}
                      isCanUndo={isCanUndo}

apps/documenteditor/mobile/src/controller/settings/Settings.jsx

@@ -88,14 +88,15 @@ const Settings = props => {
         appOptions.changeMobileView();
         api.ChangeReaderMode();
 
-        if (Device.phone) {
+        if(Device.phone) {
             closeModal();
         }
     }
 
     return <SettingsView usePopover={!Device.phone}
                          openOptions={props.openOptions}
-                         onclosed={props.onclosed}
+                         closeOptions={props.closeOptions}
+                         // onclosed={props.onclosed}
                          onPrint={onPrint}
                          showHelp={showHelp}
                          showFeedback={showFeedback}

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

@@ -1,5 +1,4 @@
 .ios {
-
     // Stepper 
     .content-block.stepper-block {
         margin: 20px 0;
@@ -58,5 +57,36 @@
     .back-reader-mode {
         margin-left: 10px;
     }
+
+    // Snackbar
+    .snackbar {
+        max-width: 195px;
+        max-height: 48px;
+        position: absolute;
+        bottom: 24px;
+        left: calc(50% - 195px / 2);
+        background: rgba(0, 0, 0, .9);
+        border-radius: 4px;
+        z-index: 1000000;
+        &__content {
+            padding: 15px 16.5px;
+        }
+        &__text {
+            margin: 0;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 13px;
+            line-height: 18px;
+            letter-spacing: -0.078px;
+            color: @fill-white;
+            text-align: center;
+        }
+    }
+
+    @media(max-width: 450px) {
+        .snackbar {
+            bottom: 50px;
+        }
+    }
 }
 

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

@@ -105,4 +105,42 @@
             }
         }
     }
+
+    // Snackbar
+    .snackbar {
+        position: absolute;
+        width: 344px;
+        max-height: 48px;
+        left: calc(50% - 344px / 2);
+        bottom: 16px;
+        background: #333333;
+        border-radius: 4px;
+        z-index: 1000000;
+        &__content {
+            padding: 14px 16px;
+        }
+        &__text {
+            margin: 0;
+            color: @fill-white;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            letter-spacing: 0.25px;
+            text-align: center;
+        }
+    }
+
+    @media(max-width: 450px) {
+        .snackbar {
+            width: auto;
+            max-width: 100%;
+            left: 16px;
+            right: 16px;
+            bottom: 8px;
+            &__text {
+                text-align: left;
+            }
+        }
+    }
 }

apps/documenteditor/mobile/src/less/app.less

@@ -328,3 +328,19 @@
     }
 }
 
+// Snackbar animation
+.snackbar-enter {
+    opacity: 0;
+}
+.snackbar-enter-active {
+    opacity: 1;
+    transition: opacity 300ms;
+}
+.snackbar-exit {
+    opacity: 1;
+}
+.snackbar-exit-active {
+    opacity: 0;
+    transition: opacity 300ms;
+}
+

apps/documenteditor/mobile/src/page/main.jsx

@@ -1,9 +1,10 @@
 
 import React, { Component } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import { f7, Link } from 'framework7-react';
 import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
-
+import { withTranslation } from 'react-i18next';
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../controller/settings/Settings';
@@ -13,6 +14,7 @@ import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
 import NavigationController from '../controller/settings/Navigation';
+import Snackbar from "../components/Snackbar/Snackbar";
 
 class MainPage extends Component {
     constructor(props) {
@@ -23,7 +25,8 @@ class MainPage extends Component {
             addShowOptions: null,
             settingsVisible: false,
             collaborationVisible: false,
-            navigationVisible: false
+            navigationVisible: false,
+            snackbarVisible: false
         };
     }
 
@@ -49,6 +52,9 @@ class MainPage extends Component {
             } else if( opts === 'navigation') {
                 this.state.navigationVisible && (opened = true);
                 newState.navigationVisible = true;
+            } else if( opts === 'snackbar') {
+                this.state.snackbarVisible && (opened = true);
+                newState.snackbarVisible = true;
             }
 
             for (let key in this.state) {
@@ -82,6 +88,8 @@ class MainPage extends Component {
                     return {collaborationVisible: false};
                 else if( opts == 'navigation') 
                     return {navigationVisible: false}
+                else if( opts == 'snackbar')
+                    return {snackbarVisible: false}
             });
             if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
                 f7.navbar.show('.main-navbar');
@@ -91,9 +99,9 @@ class MainPage extends Component {
     };
 
   render() {
+      const { t } = this.props;
       const appOptions = this.props.storeAppOptions;
-      // const isViewer = appOptions.isViewer;
+      const isMobileView = appOptions.isMobileView;
-      // console.log(isViewer);
       const config = appOptions.config;
 
       let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
@@ -165,9 +173,10 @@ class MainPage extends Component {
                     !this.state.addOptionsVisible ? null :
                         <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
                 }
+                {/*onclosed={this.handleOptionsViewClosed.bind(this, 'settings')}*/}
                 {
                     !this.state.settingsVisible ? null :
-                        <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                        <Settings openOptions={this.handleClickToOpenOptions.bind(this)} closeOptions={this.handleOptionsViewClosed.bind(this)} />
                 }
                 {
                     !this.state.collaborationVisible ? null :
@@ -177,10 +186,21 @@ class MainPage extends Component {
                     !this.state.navigationVisible ? null : 
                         <NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
                 }
+                {
+                    <CSSTransition
+                        in={this.state.snackbarVisible}
+                        timeout={500}
+                        classNames="snackbar"
+                        mountOnEnter
+                        unmountOnExit
+                    >
+                        <Snackbar text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
+                    </CSSTransition>
+                }
                 {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}  
           </Page>
       )
   }
 }
 
-export default inject("storeAppOptions")(observer(MainPage));
+export default inject("storeAppOptions")(observer(withTranslation()(MainPage)));

apps/documenteditor/mobile/src/store/appOptions.js

@@ -35,7 +35,7 @@ export class storeAppOptions {
 
     isEdit = false;
 
-    isMobileView = false;
+    isMobileView = true;
     changeMobileView() {
         this.isMobileView = !this.isMobileView;
     }

apps/documenteditor/mobile/src/view/Toolbar.jsx

@@ -2,11 +2,13 @@ import React, {Fragment} from 'react';
 import { useTranslation } from 'react-i18next';
 import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
-import EditorUIController from '../lib/patch'
+import EditorUIController from '../lib/patch';
 
 const ToolbarView = props => {
     const { t } = useTranslation();
     const isDisconnected = props.isDisconnected;
+    const docExt = props.docExt;
+    const isAvailableExt = docExt && docExt !== 'djvu' && docExt !== 'pdf' && docExt !== 'xps';
     const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls || isDisconnected;
     const isViewer = props.isViewer;
     const isMobileView = props.isMobileView;
@@ -44,16 +46,22 @@ const ToolbarView = props => {
                     onUndoClick: props.onUndo,
                     onRedoClick: props.onRedo
                 })}
-                {(isViewer || !Device.phone) && <Link className={props.disabledControls ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => props.changeMobileView()}></Link>}
+                {(isViewer || !Device.phone) && isAvailableExt && <Link className={props.disabledControls ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
+                    props.changeMobileView();
+                    props.openOptions('snackbar');
+                    setTimeout(() => {
+                        props.closeOptions('snackbar');
+                    },  500);
+                }}></Link>}
                 {(props.showEditDocument && !isViewer) &&
                     <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
                 }
-                {props.isEdit && !isViewer && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
+                {props.isEdit && isAvailableExt && !isViewer && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
                         disabled: disableEditBtn || props.disabledControls,
                         onEditClick: e => props.openOptions('edit'),
                         onAddClick: e => props.openOptions('add')
                 })}
-                {isViewer && <Link icon='icon-edit-mode' className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} href={false} onClick={() => props.turnOffViewerMode()}></Link>}
+                {isViewer && isAvailableExt && <Link icon='icon-edit-mode' className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} href={false} onClick={() => props.turnOffViewerMode()}></Link>}
                 {Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
                 {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null}
                 <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -163,7 +163,13 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                     {!isViewer && Device.phone &&
                         <ListItem title={t('Settings.textMobileView')}>
                             <Icon slot="media" icon="icon-mobile-view"></Icon>
-                            <Toggle checked={isMobileView} onToggleChange={() => props.onChangeMobileView()} />
+                            <Toggle checked={isMobileView} onToggleChange={() => {
+                                props.onChangeMobileView();
+                                props.openOptions('snackbar');
+                                setTimeout( () => {
+                                    props.closeOptions('snackbar');
+                                }, 1000);
+                            }} />
                         </ListItem>
                     }
                     {(_isEdit && !isViewer) &&
@@ -230,11 +236,11 @@ class SettingsView extends Component {
         const show_popover = this.props.usePopover;
         return (
             show_popover ?
-                <Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                <Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.closeOptions('settings')}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
                 </Popover> :
-                <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
+                <Popup className="settings-popup" onPopupClosed={() => this.props.closeOptions('settings')}>
-                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
+                    <SettingsList onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
                 </Popup>
         )
     }

vendor/framework7-react/package.json

@@ -38,6 +38,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.8.5",
+    "react-transition-group": "^4.4.5",
     "swiper": "^8.2.4",
     "template7": "^1.4.2"
   },