pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-23 23:11:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE mobile] Adding rename file

Browse Source
This commit is contained in:
SergeyEzhin
2023-05-05 23:59:15 +03:00
parent 65ae502b13
commit 12bab61ce2
8 changed files with 153 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/documenteditor/mobile/locale/en.json
View File

@ -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"
}
}

2
apps/documenteditor/mobile/src/controller/Main.jsx
View File

@ -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);

18
apps/documenteditor/mobile/src/controller/Toolbar.jsx
View File

@ -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 (
<ToolbarView openOptions={props.openOptions}
closeOptions={props.closeOptions}
@ -230,6 +241,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
turnOnViewerMode={turnOnViewerMode}
isMobileView={isMobileView}
changeMobileView={changeMobileView}
changeTitle={changeTitle}
/>
)
}));

70
apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx
View File

@ -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 ?
'<div class="input-field"><input type="text" class="modal-text-input" name="modal-title" id="modal-title"></div>' : '<div class="input-field modal-title"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="text" name="modal-title" id="modal-title"></div></div></div></li></ul></div></div>',
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 {
<DocumentInfo
getAppProps={this.getAppProps}
docInfoObject={this.docInfoObject}
changeTitleHandler={this.changeTitleHandler}
/>
);
}
}
export default inject("storeAppOptions")(observer(withTranslation()(DocumentInfoController)));
export default inject("storeAppOptions", "storeDocumentInfo")(observer(withTranslation()(DocumentInfoController)));

9
apps/documenteditor/mobile/src/store/documentInfo.js
View File

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

53
apps/documenteditor/mobile/src/view/Toolbar.jsx
View File

@ -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 ?
'<div class="input-field"><input type="text" class="modal-text-input" name="modal-title" id="modal-title"></div>' : '<div class="input-field modal-title"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="text" name="modal-title" id="modal-title"></div></div></div></li></ul></div></div>',
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
})}
</NavLeft>
{(!Device.phone || isViewer) && <div className='title' style={{width: '71%'}}>{docTitle}</div>}
{(!Device.phone || isViewer) && <div className='title' onClick={changeTitleHandler} style={{width: '71%'}}>{docTitle}</div>}
<NavRight>
{(Device.android && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo,

4
apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx
View File

@ -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) => {
<Fragment>
<BlockTitle>{_t.textDocumentTitle}</BlockTitle>
<List>
<ListItem title={dataDoc.title}></ListItem>
<ListItem href="#" title={dataDoc.title} onClick={props.changeTitleHandler}></ListItem>
</List>
</Fragment>
) : null}

7
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View File

@ -103,12 +103,13 @@ const SettingsList = inject("storeAppOptions", "storeReview", "storeDocumentInfo
const canProtect = appOptions.canProtect;
const storeReview = props.storeReview;
const displayMode = storeReview.displayMode;
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const docInfo = props.storeDocumentInfo;
const docTitle = docInfo.dataDoc.title;
const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : '';
const isNotForm = docExt && docExt !== 'oform';
const navbar = <Navbar title={docTitle}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
if ( props.onOptionClick )