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

[DE PE SSE mobile] Correct overflowed title in toolbar

apps/common/mobile/resources/less/common.less

@@ -25,12 +25,12 @@
     }
 }
 
-.navbar {
+//.navbar {
-    .title {
+//    .title {
-        text-overflow: initial;
+//        text-overflow: initial;
-        white-space: normal;
+//        white-space: normal;
-    }
+//    }
-}
+//}
 
 .navbar-hidden {
     transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
@@ -48,9 +48,12 @@
     .subnavbar-inner {
         padding: 0;
         .title {
-            white-space: nowrap;
+            //white-space: nowrap;
             overflow: hidden;
-            text-overflow: ellipsis;
+            text-overflow: initial;
+            margin: 0;
+            padding: 0;
+            flex-shrink: initial;
         }
     }
     .icon-back {

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

@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect} from 'react';
 import { useTranslation } from 'react-i18next';
 import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
@@ -12,20 +12,35 @@ const ToolbarView = props => {
     const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls || isDisconnected;
     const isViewer = props.isViewer;
     const isMobileView = props.isMobileView;
+    const docTitle = props.docTitle;
+    const docTitleLength = docTitle.length;
 
-    const shortTitle = (title) => {
+    const correctOverflowedText = el => {
-        const arrDocTitle = title.split('.');
+        if(el) {
-        const ext = arrDocTitle[1];
+            el.innerText = docTitle;
-        const name = arrDocTitle[0];
 
-        if(name.length > 7 && Device.phone) {
+            if(el.scrollWidth > el.clientWidth) {
-            let shortName = name.substring(0, 7);
+                const arrDocTitle = docTitle.split('.');
-            return `${shortName}...${ext}`;
+                const ext = arrDocTitle[1];
+                const name = arrDocTitle[0];
+                const diff = Math.floor(docTitleLength * el.clientWidth / el.scrollWidth - ext.length - 6);
+                const shortName = name.substring(0, diff).trim();
+
+                return `${shortName}...${ext}`;
+            }
+
+           return docTitle;
         }
-
-        return title;
     };
 
+    useEffect(() => {
+        const elemTitle = document.querySelector('.subnavbar .title');
+
+        if (elemTitle) {
+            elemTitle.innerText = correctOverflowedText(elemTitle);
+        }
+    }, [docTitle, isViewer]);
+
     return (
         <Fragment>
             <NavLeft>
@@ -38,7 +53,7 @@ const ToolbarView = props => {
                     onRedoClick: props.onRedo
                 })}
             </NavLeft>
-            {(!Device.phone || isViewer) && <NavTitle>{shortTitle(props.docTitle)}</NavTitle>}
+            {(!Device.phone || isViewer) && <div className='title' style={{width: '71%'}}>{docTitle}</div>}
             <NavRight>
                 {(Device.android && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
                     disabledUndo: !props.isCanUndo,
@@ -46,7 +61,8 @@ const ToolbarView = props => {
                     onUndoClick: props.onUndo,
                     onRedoClick: props.onRedo
                 })}
-                {(isViewer || !Device.phone) && isAvailableExt && !props.disabledControls && <Link icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => {
+                {/*isAvailableExt && !props.disabledControls &&*/}
+                {(isViewer || !Device.phone) && <Link className={(!isAvailableExt || props.disabledControls) && 'disabled'} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => {
                     await props.changeMobileView();
                     await props.openOptions('snackbar');
                     setTimeout(() => {
@@ -61,8 +77,9 @@ const ToolbarView = props => {
                     onEditClick: e => props.openOptions('edit'),
                     onAddClick: e => props.openOptions('add')
                 })}
+                {/*props.displayCollaboration &&*/}
                 {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}
+                {!Device.phone ? <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>
             </NavRight>
         </Fragment>

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

@@ -1,10 +1,41 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
 import EditorUIController from '../lib/patch'
 
 const ToolbarView = props => {
     const isDisconnected = props.isDisconnected;
+    const docTitle = props.docTitle;
+    const docTitleLength = docTitle.length;
+
+    const correctOverflowedText = el => {
+        if(el) {
+            el.innerText = docTitle;
+
+            if(el.scrollWidth > el.clientWidth) {
+                const arrDocTitle = docTitle.split('.');
+                const ext = arrDocTitle[1];
+                const name = arrDocTitle[0];
+                const diff = Math.floor(docTitleLength * el.clientWidth / el.scrollWidth - ext.length - 6);
+                const shortName = name.substring(0, diff).trim();
+
+                return `${shortName}...${ext}`;
+            }
+
+            return docTitle;
+        }
+    };
+
+    useEffect(() => {
+        if(!Device.phone) {
+            const elemTitle = document.querySelector('.subnavbar .title');
+
+            if (elemTitle) {
+                elemTitle.innerText = correctOverflowedText(elemTitle);
+            }
+        }
+    }, [docTitle]);
+
     return (
         <Fragment>
             <NavLeft>
@@ -16,7 +47,7 @@ const ToolbarView = props => {
                     onRedoClick: props.onRedo
                 })}
             </NavLeft>
-            {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
+            {!Device.phone && <NavTitle style={{width: '71%'}}>{props.docTitle}</NavTitle>}
             <NavRight>
                 {Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
                     disabledUndo: !props.isCanUndo || isDisconnected,

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

@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
 import EditorUIController from '../lib/patch'
@@ -14,6 +14,36 @@ const ToolbarView = props => {
             onUndoClick: props.onUndo,
             onRedoClick: props.onRedo
         }) : null;
+    const docTitle = props.docTitle;
+    const docTitleLength = docTitle.length;
+
+    const correctOverflowedText = el => {
+        if(el) {
+            el.innerText = docTitle;
+
+            if(el.scrollWidth > el.clientWidth) {
+                const arrDocTitle = docTitle.split('.');
+                const ext = arrDocTitle[1];
+                const name = arrDocTitle[0];
+                const diff = Math.floor(docTitleLength * el.clientWidth / el.scrollWidth - ext.length - 6);
+                const shortName = name.substring(0, diff).trim();
+
+                return `${shortName}...${ext}`;
+            }
+
+            return docTitle;
+        }
+    };
+
+    useEffect(() => {
+        if(!Device.phone) {
+            const elemTitle = document.querySelector('.subnavbar .title');
+
+            if (elemTitle) {
+                elemTitle.innerText = correctOverflowedText(elemTitle);
+            }
+        }
+    }, [docTitle]);
 
     return (
         <Fragment>
@@ -21,7 +51,7 @@ const ToolbarView = props => {
                 {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
                 {Device.ios && undo_box}
             </NavLeft>
-            {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
+            {!Device.phone && <NavTitle style={{width: '71%'}}>{props.docTitle}</NavTitle>}
             <NavRight>
                 {Device.android && undo_box}
                 {props.showEditDocument &&