diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 1034785623..b3343da09f 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -733,6 +733,8 @@
"stayButtonText": "Stay on this page",
"textOk": "OK",
"textSwitchedMobileView": "Switched to Mobile view",
- "textSwitchedStandardView": "Switched to Standard view"
+ "textSwitchedStandardView": "Switched to Standard view",
+ "textRenameFile": "Rename File",
+ "textEnterNewFileName": "Enter a new file name"
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx
index 3c35103d39..be4226fc3f 100644
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@@ -173,8 +173,10 @@ class MainController extends Component {
// Document Info
const storeDocumentInfo = this.props.storeDocumentInfo;
+ // this.document
storeDocumentInfo.setDataDoc(this.document);
+ storeDocumentInfo.setDocInfo(docInfo);
// Common.SharedSettings.set('document', data.doc);
diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
index e2eec7f0d5..f70489a92d 100644
--- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
@@ -24,9 +24,9 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
const disabledEditControls = storeToolbarSettings.disabledEditControls;
const disabledSettings = storeToolbarSettings.disabledSettings;
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 : '';
+ const storeDocumentInfo = props.storeDocumentInfo;
+ const docExt = storeDocumentInfo.dataDoc ? storeDocumentInfo.dataDoc.fileType : '';
+ const docTitle = storeDocumentInfo.dataDoc ? storeDocumentInfo.dataDoc.title : '';
const isAvailableExt = docExt && docExt !== 'oform';
useEffect(() => {
@@ -205,6 +205,17 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
api.ChangeReaderMode();
}
+ const changeTitle = (name) => {
+ const api = Common.EditorApi.get();
+ const docInfo = storeDocumentInfo.docInfo;
+ const title = `${name}.${docExt}`;
+
+ storeDocumentInfo.changeTitle(title);
+ docInfo.put_Title(title);
+ storeDocumentInfo.setDocInfo(docInfo);
+ api.asc_setDocInfo(docInfo);
+ }
+
return (
)
}));
diff --git a/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx b/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx
index 6f859d0513..5f77077c31 100644
--- a/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx
@@ -1,7 +1,9 @@
import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import DocumentInfo from "../../view/settings/DocumentInfo";
+import { f7 } from 'framework7-react';
import { withTranslation } from 'react-i18next';
+import { Device } from "../../../../../common/mobile/utils/device";
class DocumentInfoController extends Component {
constructor(props) {
@@ -11,6 +13,7 @@ class DocumentInfoController extends Component {
this.docInfoObject = {};
this.getAppProps = this.getAppProps.bind(this);
+ this.changeTitleHandler = this.changeTitleHandler.bind(this);
if(this.docProps) {
this.updateFileInfo(this.docProps);
@@ -144,6 +147,70 @@ class DocumentInfoController extends Component {
}
}
+ changeTitleHandler() {
+ const { t } = this.props;
+ const storeDocumentInfo = this.props.storeDocumentInfo;
+ const docTitle = storeDocumentInfo.dataDoc.title;
+
+ 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) {
+ this.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();
+ }
+
+ changeTitle(name) {
+ const api = Common.EditorApi.get();
+ const storeDocumentInfo = this.props.storeDocumentInfo;
+ const docInfo = storeDocumentInfo.docInfo;
+ const docExt = storeDocumentInfo.dataDoc.fileType;
+ const title = `${name}.${docExt}`;
+
+ storeDocumentInfo.changeTitle(title);
+ docInfo.put_Title(title);
+ storeDocumentInfo.setDocInfo(docInfo);
+ api.asc_setDocInfo(docInfo);
+ }
+
componentDidMount() {
const api = Common.EditorApi.get();
api.startGetDocInfo();
@@ -154,10 +221,11 @@ class DocumentInfoController extends Component {
);
}
}
-export default inject("storeAppOptions")(observer(withTranslation()(DocumentInfoController)));
+export default inject("storeAppOptions", "storeDocumentInfo")(observer(withTranslation()(DocumentInfoController)));
diff --git a/apps/documenteditor/mobile/src/store/documentInfo.js b/apps/documenteditor/mobile/src/store/documentInfo.js
index e79cfdf0d9..1809b30a3c 100644
--- a/apps/documenteditor/mobile/src/store/documentInfo.js
+++ b/apps/documenteditor/mobile/src/store/documentInfo.js
@@ -9,7 +9,9 @@ export class storeDocumentInfo {
switchIsLoaded: action,
changeCount: action,
setDataDoc: action,
- changeTitle: action
+ changeTitle: action,
+ docInfo: observable,
+ setDocInfo: action
});
}
@@ -23,6 +25,11 @@ export class storeDocumentInfo {
isLoaded = true;
dataDoc;
+ docInfo;
+
+ setDocInfo(docInfo) {
+ this.docInfo = docInfo;
+ }
switchIsLoaded(value) {
this.isLoaded = value;
diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx
index 47c8267a66..9dc69b7f46 100644
--- a/apps/documenteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx
@@ -1,6 +1,6 @@
-import React, {Fragment, useEffect} from 'react';
+import React, { Fragment, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
+import { NavLeft, NavRight, NavTitle, Link, Icon, f7 } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
import EditorUIController from '../lib/patch';
@@ -33,6 +33,53 @@ 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');
@@ -53,7 +100,7 @@ const ToolbarView = props => {
onRedoClick: props.onRedo
})}
- {(!Device.phone || isViewer) && {docTitle}
}
+ {(!Device.phone || isViewer) && {docTitle}
}
{(Device.android && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo,
diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx
index fe45f5191f..6a9491807c 100644
--- a/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx
@@ -3,7 +3,7 @@ import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
import { useTranslation } from "react-i18next";
-const PageDocumentInfo = (props) => {
+const PageDocumentInfo = props => {
const { t } = useTranslation();
const _t = t("Settings", { returnObjects: true });
const storeInfo = props.storeDocumentInfo;
@@ -44,7 +44,7 @@ const PageDocumentInfo = (props) => {
{_t.textDocumentTitle}
-
+
) : null}
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index f7d9d9af6f..52921d7fef 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -103,12 +103,13 @@ const SettingsList = inject("storeAppOptions", "storeReview", "storeDocumentInfo
const canProtect = appOptions.canProtect;
const storeReview = props.storeReview;
const displayMode = storeReview.displayMode;
- const navbar =
- {!props.inPopover && {_t.textDone}}
- ;
const docInfo = props.storeDocumentInfo;
+ const docTitle = docInfo.dataDoc.title;
const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : '';
const isNotForm = docExt && docExt !== 'oform';
+ const navbar =
+ {!props.inPopover && {_t.textDone}}
+ ;
const onoptionclick = page => {
if ( props.onOptionClick )