haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-24 04:48:03 +00:00
Code Issues Releases Wiki Activity

Sdoc draft (#5556)

Browse Source 
* [dir view] redesigned the sdoc draft identifier

* [dir view] added option 'Mark as draft' to 'New File' dialog; added big button '+ SeaDoc' for empty library

* [sdoc draft] fixed API typos

* [sdoc file view] displayed draft identifier & added 'unmark as draft' for drafts

* [media/sdoc-editor] updated i18n/l10n strings for sdoc-editor

* [dir view] 'New' dropdown menu: added '(beta)' for 'New SeaDoc File'
This commit is contained in:
llj
2023-07-22 15:54:25 +08:00
committed by GitHub
parent f02f40ee3a
commit 68ed3e5773
20 changed files with 148 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/dialog/create-file-dialog.js
View File

@@ -9,7 +9,7 @@ const propTypes = {
parentPath: PropTypes.string.isRequired,
onAddFile: PropTypes.func.isRequired,
checkDuplicatedName: PropTypes.func.isRequired,
addFileCancel: PropTypes.func.isRequired,
toggleDialog: PropTypes.func.isRequired,
};
class CreateFile extends React.Component {
@@ -18,7 +18,8 @@ class CreateFile extends React.Component {
this.state = {
parentPath: '',
childName: props.fileType || '',
isDraft: false,
isMarkdownDraft: false,
isSdocDraft: false,
errMessage: '',
isSubmitBtnActive: false,
};
@@ -60,8 +61,9 @@ class CreateFile extends React.Component {
this.setState({errMessage: errMessage});
} else {
let path = this.state.parentPath + newName;
let isDraft = this.state.isDraft;
this.props.onAddFile(path, isDraft);
const { isMarkdownDraft, isSdocDraft } = this.state;
this.props.onAddFile(path, isMarkdownDraft, isSdocDraft);
this.props.toggleDialog();
}
}
@@ -75,7 +77,7 @@ class CreateFile extends React.Component {
handleCheck = () => {
let pos = this.state.childName.lastIndexOf('.');
if (this.state.isDraft) {
if (this.state.isMarkdownDraft) {
// from draft to not draft
// case 1, normally, the file name is ended with `(draft)`, like `test(draft).md`
// case 2, the file name is not ended with `(draft)`, the user has deleted some characters, like `test(dra.md`
@@ -86,17 +88,17 @@ class CreateFile extends React.Component {
// remove `(draft)` from file name
this.setState({
childName: fileName + fileType,
isDraft: !this.state.isDraft
isMarkdownDraft: !this.state.isMarkdownDraft
});
} else {
// don't change file name
this.setState({
isDraft: !this.state.isDraft
isMarkdownDraft: !this.state.isMarkdownDraft
});
}
}
if (!this.state.isDraft) {
if (!this.state.isMarkdownDraft) {
// from not draft to draft
// case 1, test.md ===> test(draft).md
// case 2, .md ===> (draft).md
@@ -106,25 +108,21 @@ class CreateFile extends React.Component {
let fileType = this.state.childName.substring(pos);
this.setState({
childName: fileName + '(draft)' + fileType,
isDraft: !this.state.isDraft
isMarkdownDraft: !this.state.isMarkdownDraft
});
} else if (pos === 0 ) {
this.setState({
childName: '(draft)' + this.state.childName,
isDraft: !this.state.isdraft
isMarkdownDraft: !this.state.isMarkdownDraft
});
} else {
this.setState({
isDraft: !this.state.isdraft
isMarkdownDraft: !this.state.isMarkdownDraft
});
}
}
}
toggle = () => {
this.props.addFileCancel();
}
checkDuplicatedName = () => {
let isDuplicated = this.props.checkDuplicatedName(this.state.childName);
return isDuplicated;
@@ -136,10 +134,18 @@ class CreateFile extends React.Component {
this.newInput.current.setSelectionRange(0,0);
}
toggleMarkSdocDraft = (e) => {
this.setState({
isSdocDraft: e.target.checked
});
}
render() {
const { isSdocDraft } = this.state;
const { toggleDialog } = this.props;
return (
<Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
<ModalHeader toggle={this.toggle}>{gettext('New File')}</ModalHeader>
<Modal isOpen={true} toggle={toggleDialog} onOpened={this.onAfterModelOpened}>
<ModalHeader toggle={toggleDialog}>{gettext('New File')}</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
@@ -159,11 +165,19 @@ class CreateFile extends React.Component {
</Label>
</FormGroup>
)}
{this.props.fileType == '.sdoc' && (
<FormGroup check>
<Label check>
<Input type="checkbox" checked={isSdocDraft} onChange={this.toggleMarkSdocDraft}/>
<span>{gettext('Mark as draft')}</span>
</Label>
</FormGroup>
)}
</Form>
{this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
<Button color="secondary" onClick={toggleDialog}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
</ModalFooter>
</Modal>

9
frontend/src/components/dir-view-mode/dir-column-nav.js
View File

@@ -143,11 +143,6 @@ class DirColumnNav extends React.Component {
this.props.onAddFolderNode(dirPath);
}
onAddFileNode = (filePath, isDraft) => {
this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
this.props.onAddFileNode(filePath, isDraft);
}
onRenameNode = (newName) => {
this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
let node = this.state.opNode;
@@ -287,9 +282,9 @@ class DirColumnNav extends React.Component {
<ModalPortal>
<CreateFile
parentPath={this.state.opNode.path}
onAddFile={this.onAddFileNode}
onAddFile={this.props.onAddFileNode}
checkDuplicatedName={this.checkDuplicatedName}
addFileCancel={this.onAddFileToggle}
toggleDialog={this.onAddFileToggle}
/>
</ModalPortal>
)}

20
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { siteRoot, thumbnailSizeForOriginal, username, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled, canGenerateShareLink } from '../../utils/constants';
import { siteRoot, thumbnailSizeForOriginal, username } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import URLDecorator from '../../utils/url-decorator';
@@ -29,6 +29,7 @@ const propTypes = {
repoID: PropTypes.string.isRequired,
currentRepoInfo: PropTypes.object,
direntList: PropTypes.array.isRequired,
fullDirentList: PropTypes.array,
onAddFile: PropTypes.func,
onItemDelete: PropTypes.func,
onItemCopy: PropTypes.func.isRequired,
@@ -48,7 +49,7 @@ const propTypes = {
onItemRename: PropTypes.func.isRequired,
};
class DirentGridView extends React.Component{
class DirentGridView extends React.Component {
constructor(props) {
super(props);
this.state = {
@@ -93,11 +94,6 @@ class DirentGridView extends React.Component{
this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
}
onAddFile = (filePath, isDraft) => {
this.setState({isCreateFileDialogShow: false});
this.props.onAddFile(filePath, isDraft);
}
onAddFolder = (dirPath) => {
this.setState({isCreateFolderDialogShow: false});
this.props.onAddFolder(dirPath);
@@ -169,7 +165,7 @@ class DirentGridView extends React.Component{
this.onCreateFolderToggle(currentObject);
break;
case 'New File':
this.onCreateFileToggle(currentObject);
this.onCreateFileToggle();
break;
case 'Access Log':
this.onAccessLog(currentObject);
@@ -274,7 +270,7 @@ class DirentGridView extends React.Component{
onMarkAsDraft = (currentObject) => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(currentObject);
seafileAPI.sdocMaskAsDraft(repoID, filePath).then((res) => {
seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
this.props.updateDirent(currentObject, 'is_sdoc_draft', true);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
@@ -285,7 +281,7 @@ class DirentGridView extends React.Component{
onUnmarkAsDraft = (currentObject) => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(currentObject);
seafileAPI.sdocUnmaskAsDraft(repoID, filePath).then((res) => {
seafileAPI.sdocUnmarkAsDraft(repoID, filePath).then((res) => {
this.props.updateDirent(currentObject, 'is_sdoc_draft', false);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
@@ -527,9 +523,9 @@ class DirentGridView extends React.Component{
<ModalPortal>
<CreateFile
parentPath={this.props.path}
onAddFile={this.onAddFile}
onAddFile={this.props.onAddFile}
checkDuplicatedName={this.checkDuplicatedName}
addFileCancel={this.onCreateFileToggle}
toggleDialog={this.onCreateFileToggle}
/>
</ModalPortal>
)}

6
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -365,7 +365,7 @@ class DirentListItem extends React.Component {
onMarkAsDraft = () => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(this.props.dirent);
seafileAPI.sdocMaskAsDraft(repoID, filePath).then((res) => {
seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
this.props.updateDirent(this.props.dirent, 'is_sdoc_draft', true);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
@@ -376,7 +376,7 @@ class DirentListItem extends React.Component {
onUnmarkAsDraft = () => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(this.props.dirent);
seafileAPI.sdocUnmaskAsDraft(repoID, filePath).then((res) => {
seafileAPI.sdocUnmarkAsDraft(repoID, filePath).then((res) => {
this.props.updateDirent(this.props.dirent, 'is_sdoc_draft', false);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
@@ -737,7 +737,7 @@ class DirentListItem extends React.Component {
<a href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
}
{(Utils.isSdocFile(dirent.name) && dirent.is_sdoc_draft) &&
<span className="pl-1">{'(draft)'}</span>
<span className="sdoc-draft-identifier">{gettext('Draft')}</span>
}
</Fragment>
)}

14
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@@ -1,9 +1,8 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { siteRoot, gettext, thumbnailSizeForOriginal, username, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled, canGenerateShareLink } from '../../utils/constants';
import { siteRoot, gettext, thumbnailSizeForOriginal, username } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import TextTranslation from '../../utils/text-translation';
import { seafileAPI } from '../../utils/seafile-api';
import URLDecorator from '../../utils/url-decorator';
import Loading from '../loading';
import toaster from '../toast';
@@ -220,11 +219,6 @@ class DirentListView extends React.Component {
this.setState({isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow});
}
onAddFile = (filePath, isDraft) => {
this.setState({isCreateFileDialogShow: false});
this.props.onAddFile(filePath, isDraft);
}
onAddFolder = (dirPath) => {
this.setState({isCreateFolderDialogShow: false});
this.props.onAddFolder(dirPath);
@@ -371,7 +365,7 @@ class DirentListView extends React.Component {
let id = 'dirents-menu';
let menuList = [];
if (isCustomPermission) {
const { modify: canModify, copy: canCopy, download: canDownload, delete: canDelete } = customPermission.permission;
const { modify: canModify, copy: canCopy, download: canDownload, delete: canDelete } = customPermission.permission;
canModify && menuList.push(TextTranslation.MOVE);
canCopy && menuList.push(TextTranslation.COPY);
canDownload && menuList.push(TextTranslation.DOWNLOAD);
@@ -704,9 +698,9 @@ class DirentListView extends React.Component {
<CreateFile
parentPath={this.props.path}
fileType={this.state.fileType}
onAddFile={this.onAddFile}
onAddFile={this.props.onAddFile}
checkDuplicatedName={this.checkDuplicatedName}
addFileCancel={this.onCreateFileToggle}
toggleDialog={this.onCreateFileToggle}
/>
</ModalPortal>
)}

22
frontend/src/components/dirent-list-view/dirent-none-view.js
View File

@@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import { enableSeadoc, gettext } from '../../utils/constants';
import Loading from '../loading';
import ModalPortal from '../modal-portal';
import CreateFile from '../../components/dialog/create-file-dialog';
@@ -10,7 +10,7 @@ import '../../css/tip-for-new-file.css';
const propTypes = {
path: PropTypes.string.isRequired,
isDirentListLoading: PropTypes.bool.isRequired,
onAddFile: PropTypes.func.isRequired,
onAddFile: PropTypes.func.isRequired
};
class DirentNodeView extends React.Component {
@@ -41,11 +41,6 @@ class DirentNodeView extends React.Component {
return false; // current repo is null, and unnecessary to check duplicated name
}
onAddFile = (filePath, isDraft) => {
this.setState({isCreateFileDialogShow: false});
this.props.onAddFile(filePath, isDraft);
}
render() {
if (this.props.isDirentListLoading) {
return (<Loading />);
@@ -53,9 +48,9 @@ class DirentNodeView extends React.Component {
return (
<Fragment>
<div className="tip-for-new-file text-center">
<p className="text-secondary">{gettext('This folder has no content at this time.')}</p>
<p className="text-secondary">{gettext('You can create files quickly')}{' +'}</p>
<div className="tip-for-new-file">
<p className="text-secondary text-center">{gettext('This folder has no content at this time.')}</p>
<p className="text-secondary text-center">{gettext('You can create files quickly')}{' +'}</p>
<button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
{'+ Markdown'}</button>
<button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
@@ -65,14 +60,17 @@ class DirentNodeView extends React.Component {
{'+ Word'}</button>
<button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
{'+ Excel'}</button>
<br />
{enableSeadoc && <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.sdoc')}>
{'+ SeaDoc'}</button>}
</div>
{this.state.isCreateFileDialogShow && (
<ModalPortal>
<CreateFile
parentPath={this.props.path}
fileType={this.state.fileType}
onAddFile={this.onAddFile}
addFileCancel={this.onCreateFileToggle}
onAddFile={this.props.onAddFile}
toggleDialog={this.onCreateFileToggle}
checkDuplicatedName={this.checkDuplicatedName}
/>
</ModalPortal>

13
frontend/src/components/toolbar/dir-operation-toolbar.js
View File

@@ -110,7 +110,7 @@ class DirOperationToolbar extends React.Component {
onCreateFileToggle = () => {
this.setState({
isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
fileType: '',
fileType: ''
});
}
@@ -149,11 +149,6 @@ class DirOperationToolbar extends React.Component {
});
}
onAddFile = (filePath, isDraft) => {
this.setState({isCreateFileDialogShow: false});
this.props.onAddFile(filePath, isDraft);
}
onAddFolder = (dirPath) => {
this.setState({isCreateFolderDialogShow: false});
this.props.onAddFolder(dirPath);
@@ -215,7 +210,7 @@ class DirOperationToolbar extends React.Component {
<button className="dropdown-item" onClick={this.onCreateExcelToggle} role="menuitem">{gettext('New Excel File')}</button>
<button className="dropdown-item" onClick={this.onCreatePPTToggle} role="menuitem">{gettext('New PowerPoint File')}</button>
<button className="dropdown-item" onClick={this.onCreateWordToggle} role="menuitem">{gettext('New Word File')}</button>
{enableSeadoc && <button className="dropdown-item" onClick={this.onCreateSeaDocToggle} role="menuitem">{gettext('New SeaDoc File')}</button>}
{enableSeadoc && <button className="dropdown-item" onClick={this.onCreateSeaDocToggle} role="menuitem">{gettext('New SeaDoc File')} (beta)</button>}
</div>
)}
</Fragment>
@@ -255,9 +250,9 @@ class DirOperationToolbar extends React.Component {
<CreateFile
parentPath={this.props.path}
fileType={this.state.fileType}
onAddFile={this.onAddFile}
onAddFile={this.props.onAddFile}
checkDuplicatedName={this.checkDuplicatedName}
addFileCancel={this.onCreateFileToggle}
toggleDialog={this.onCreateFileToggle}
/>
</ModalPortal>
)}

4
frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
View File

@@ -124,7 +124,7 @@ class MultipleDirOperationToolbar extends React.Component {
onMarkAsDraft = (dirent) => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(dirent);
seafileAPI.sdocMaskAsDraft(repoID, filePath).then((res) => {
seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
this.props.updateDirent(dirent, 'is_sdoc_draft', true);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
@@ -135,7 +135,7 @@ class MultipleDirOperationToolbar extends React.Component {
onUnmarkAsDraft = (dirent) => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(dirent);
seafileAPI.sdocUnmaskAsDraft(repoID, filePath).then((res) => {
seafileAPI.sdocUnmarkAsDraft(repoID, filePath).then((res) => {
this.props.updateDirent(dirent, 'is_sdoc_draft', false);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);