Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
[DE PE SSE mobile] Correct overflowed title in toolbar
This commit is contained in:
maxkadushkin 2022-11-11 18:35:26 +03:00 committed by GitHub
parent fe6bd5d72d 750a2c7a00
commit 18ecdb6532
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/common/mobile/resources/less/common.less
View file

@ -25,12 +25,12 @@
}
}
.navbar {
.title {
text-overflow: initial;
white-space: normal;
}
}
//.navbar {
// .title {
// text-overflow: initial;
// 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 {

43
apps/documenteditor/mobile/src/view/Toolbar.jsx
View file

@ -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 arrDocTitle = title.split('.');
const ext = arrDocTitle[1];
const name = arrDocTitle[0];
const correctOverflowedText = el => {
if(el) {
el.innerText = docTitle;
if(name.length > 7 && Device.phone) {
let shortName = name.substring(0, 7);
return `${shortName}...${ext}`;
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;
}
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>

35
apps/presentationeditor/mobile/src/view/Toolbar.jsx
View file

@ -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,

34
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
View file

@ -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 &&