diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 39292d4b3..1e80ac7d0 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -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 { diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 0e8025401..d5b900929 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/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 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 ( @@ -38,7 +53,7 @@ const ToolbarView = props => { onRedoClick: props.onRedo })} - {(!Device.phone || isViewer) && {shortTitle(props.docTitle)}} + {(!Device.phone || isViewer) &&
{docTitle}
} {(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 && { + {/*isAvailableExt && !props.disabledControls &&*/} + {(isViewer || !Device.phone) && { 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 : } - {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches ? props.openOptions('coauth')}> : null} + {!Device.phone ? props.openOptions('coauth')}> : null} props.openOptions('settings')}>
diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx index df37c212f..3fadc06ee 100644 --- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx +++ b/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 ( @@ -16,7 +47,7 @@ const ToolbarView = props => { onRedoClick: props.onRedo })} - {!Device.phone && {props.docTitle}} + {!Device.phone && {props.docTitle}} {Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo || isDisconnected, diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx index 56d314ab6..5512c0fca 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx +++ b/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 ( @@ -21,7 +51,7 @@ const ToolbarView = props => { {props.isShowBack && } {Device.ios && undo_box} - {!Device.phone && {props.docTitle}} + {!Device.phone && {props.docTitle}} {Device.android && undo_box} {props.showEditDocument &&