diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index 1b6acf2d7d..a9182eced5 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { Device } from '../../../../common/mobile/utils/device'; import { inject, observer } from 'mobx-react'; import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; @@ -206,8 +207,56 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto api.ChangeReaderMode(); } + const changeTitleHandler = () => { + f7.dialog.create({ + title: t('Toolbar.textRenameFile'), + text : t('Toolbar.textEnterNewFileName'), + content: Device.ios ? + '
' : '', + cssClass: 'dlg-adv-options', + buttons: [ + { + text: t('Edit.textCancel') + }, + { + text: t('Edit.textOk'), + cssClass: 'btn-change-title', + bold: true, + close: false, + onClick: () => { + const titleFieldValue = document.querySelector('#modal-title').value; + if(titleFieldValue.trim().length) { + changeTitle(titleFieldValue); + f7.dialog.close(); + } + } + } + ], + on: { + opened: () => { + const nameDoc = docTitle.split('.')[0]; + const titleField = document.querySelector('#modal-title'); + const btnChangeTitle = document.querySelector('.btn-change-title'); + + titleField.value = nameDoc; + titleField.focus(); + titleField.select(); + + titleField.addEventListener('input', () => { + if(titleField.value.trim().length) { + btnChangeTitle.classList.remove('disabled'); + } else { + btnChangeTitle.classList.add('disabled'); + } + }); + } + } + }).open(); + } + const changeTitle = (name) => { const api = Common.EditorApi.get(); + const storeDocumentInfo = props.storeDocumentInfo; const docInfo = storeDocumentInfo.docInfo; const title = `${name}.${docExt}`; @@ -246,7 +295,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto turnOnViewerMode={turnOnViewerMode} isMobileView={isMobileView} changeMobileView={changeMobileView} - changeTitle={changeTitle} + changeTitleHandler={changeTitleHandler} isVersionHistoryMode={isVersionHistoryMode} closeHistory={closeHistory} /> diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 2d7a82ac3e..d053f899da 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -34,53 +34,6 @@ const ToolbarView = props => { } }; - const changeTitleHandler = () => { - f7.dialog.create({ - title: t('Toolbar.textRenameFile'), - text : t('Toolbar.textEnterNewFileName'), - content: Device.ios ? - '
' : '', - cssClass: 'dlg-adv-options', - buttons: [ - { - text: t('Edit.textCancel') - }, - { - text: t('Edit.textOk'), - cssClass: 'btn-change-title', - bold: true, - close: false, - onClick: () => { - const titleFieldValue = document.querySelector('#modal-title').value; - if(titleFieldValue.trim().length) { - props.changeTitle(titleFieldValue); - f7.dialog.close(); - } - } - } - ], - on: { - opened: () => { - const nameDoc = docTitle.split('.')[0]; - const titleField = document.querySelector('#modal-title'); - const btnChangeTitle = document.querySelector('.btn-change-title'); - - titleField.value = nameDoc; - titleField.focus(); - titleField.select(); - - titleField.addEventListener('input', () => { - if(titleField.value.trim().length) { - btnChangeTitle.classList.remove('disabled'); - } else { - btnChangeTitle.classList.add('disabled'); - } - }); - } - } - }).open(); - } - useEffect(() => { const elemTitle = document.querySelector('.subnavbar .title'); @@ -105,7 +58,7 @@ const ToolbarView = props => { onRedoClick: props.onRedo })} - {((!Device.phone || isViewer) && !isVersionHistoryMode) &&
{docTitle}
} + {((!Device.phone || isViewer) && !isVersionHistoryMode) &&
props.changeTitleHandler()} style={{width: '71%'}}>{docTitle}
} {(Device.android && props.isEdit && !isViewer && !isVersionHistoryMode) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo, @@ -127,7 +80,7 @@ const ToolbarView = props => { onAddClick: e => props.openOptions('add') })} {/*props.displayCollaboration &&*/} - {Device.phone || isVersionHistoryMode ? null : } + {Device.phone ? null : } {window.matchMedia("(min-width: 360px)").matches && docExt !== 'oform' && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} {isVersionHistoryMode ? props.openOptions('history')}> : null} props.openOptions('settings')}> diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx index 88b1185865..10c2d1abb9 100644 --- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx +++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx @@ -74,7 +74,7 @@ const ToolbarView = props => { onEditClick: () => props.openOptions('edit'), onAddClick: () => props.openOptions('add') })} - {Device.phone || isVersionHistoryMode ? null : } + {Device.phone ? null : } {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} {isVersionHistoryMode ? props.openOptions('history')}> : null} props.openOptions('settings')}> diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx index 9edac50afb..703afc5116 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx @@ -72,7 +72,7 @@ const ToolbarView = props => { onEditClick: () => props.openOptions('edit'), onAddClick: () => props.openOptions('add') })} - {Device.phone || isVersionHistoryMode ? null : } + {Device.phone ? null : } {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} {isVersionHistoryMode ? props.openOptions('history')}> : null} props.openOptions('settings')}>