Sdoc draft (#5556)

* [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'

frontend/src/components/dirent-list-view/dirent-list-item.js

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

frontend/src/components/dirent-list-view/dirent-list-view.js

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

frontend/src/components/dirent-list-view/dirent-none-view.js

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