Draft optimized (#2409)

* repair drafts

* repair naming error

* optimized code

* sentence error

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

@@ -9,7 +9,7 @@ const propTypes = {
   isItemFreezed: PropTypes.bool.isRequired,
   onMenuToggleClick: PropTypes.func.isRequired,
 }
-class ListItem extends React.Component {
+class DraftListItem extends React.Component {
 
   constructor(props) {
     super(props);
@@ -77,6 +77,6 @@ class ListItem extends React.Component {
   }
 }
 
-ListItem.propTypes = propTypes;
+DraftListItem.propTypes = propTypes;
 
-export default ListItem;
+export default DraftListItem;

frontend/src/components/draft-list-view/draft-list-menu.js

@@ -9,7 +9,7 @@ const propTypes = {
   onPublishHandler: PropTypes.func.isRequired
 };
 
-class ListMenu extends React.Component {
+class DraftListMenu extends React.Component {
 
   render() {
     let style = '';
@@ -28,6 +28,6 @@ class ListMenu extends React.Component {
   }
 }
 
-ListMenu.propTypes = propTypes;
+DraftListMenu.propTypes = propTypes;
 
-export default ListMenu;
+export default DraftListMenu;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../constants';
-import ListItem from './list-item';
+import DraftListItem from './draft-list-item';
 
 const propTypes = {
   isItemFreezed: PropTypes.bool.isRequired,
@@ -9,7 +9,7 @@ const propTypes = {
   onMenuToggleClick: PropTypes.func.isRequired,
 };
 
-class ListView extends React.Component {
+class DraftListView extends React.Component {
 
   render() {
     let drafts = this.props.draftList;
@@ -21,14 +21,14 @@ class ListView extends React.Component {
               <th style={{width: '4%'}}>{/*img*/}</th>
               <th style={{width: '46%'}}>{gettext('Name')}</th>
               <th style={{width: '20%'}}>{gettext('Owner')}</th>
-              <th style={{width: '20%'}}>{gettext('Update time')}</th>
+              <th style={{width: '20%'}}>{gettext('Last Update')}</th>
               <th style={{width: '10%'}}></th>
             </tr>
           </thead>
           <tbody>
             { drafts && drafts.map((draft) => {
               return (
-                <ListItem 
+                <DraftListItem 
                   key={draft.id} 
                   draft={draft} 
                   onMenuToggleClick={this.props.onMenuToggleClick} 
@@ -43,6 +43,6 @@ class ListView extends React.Component {
   }
 }
 
-ListView.propTypes = propTypes;
+DraftListView.propTypes = propTypes;
 
-export default ListView;
+export default DraftListView;

frontend/src/components/utils.js

@@ -4,17 +4,17 @@ export const keyCodes = {
   tab:   9,
   up:    38,
   down:  40
-}
+};
 
 export function bytesToSize(bytes) {
-  if (typeof(bytes) == 'undefined') return ' '
+  if (typeof(bytes) == 'undefined') return ' ';
 
-  if(bytes < 0) return '--'
+  if(bytes < 0) return '--';
-  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
 
-  if (bytes === 0) return bytes + ' ' + sizes[0]
+  if (bytes === 0) return bytes + ' ' + sizes[0];
 
-  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)), 10)
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)), 10);
-  if (i === 0) return bytes + ' ' + sizes[i]
+  if (i === 0) return bytes + ' ' + sizes[i];
-  return (bytes / (1000 ** i)).toFixed(1) + ' ' + sizes[i]
+  return (bytes / (1000 ** i)).toFixed(1) + ' ' + sizes[i];
 }

frontend/src/css/common.css

@@ -145,8 +145,13 @@
 }
 
 .empty-tip h2 {
+  font-size: 1.25rem;
   text-align: center;
+  color: #222;
+  font-weight: bold;
+
 }
+
 /* end tip */
 
 /* begin more component */

frontend/src/file-history.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import editUtilties from './utils/editor-utilties';
 import { filePath } from './components/constants';
 import URLDecorator from './utils/url-decorator';
-import { processor } from '@seafile/seafile-editor/src/lib/seafile-markdown2html';
 import SidePanel from './pages/file-history/side-panel';
 import MainPanel from './pages/file-history/main-panel';
 import axios from 'axios';

frontend/src/pages/drafts/drafts-view.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { gettext } from '../../components/constants';
 import editUtilties from '../../utils/editor-utilties';
 import Loading from '../../components/loading';
-import ListView from '../../components/list-view/list-view';
+import DraftListView from '../../components/draft-list-view/draft-list-view';
-import ListMenu from '../../components/list-view/list-menu';
+import DraftListMenu from '../../components/draft-list-view/draft-list-menu';
 
 class DraftsView extends React.Component {
   
@@ -87,7 +87,7 @@ class DraftsView extends React.Component {
         <div className="cur-view-content" style={{padding: 0}}>
           {this.state.isLoadingDraft && <Loading /> }
           {(!this.state.isLoadingDraft && this.state.draftList.length !==0) &&
-            <ListView
+            <DraftListView
               draftList={this.state.draftList} 
               isItemFreezed={this.state.isItemFreezed}
               onMenuToggleClick={this.onMenuToggleClick}
@@ -95,11 +95,12 @@ class DraftsView extends React.Component {
           }
           {(!this.state.isLoadingDraft && this.state.draftList.length === 0) &&
             <div className="message empty-tip">
-              <h2>{gettext('There is no draft file existing')}</h2>
+              <h2>{gettext('No draft yet')}</h2>
+              <p>{gettext('Draft is a way to let you collaborate with others on files. You can create a draft from a file, edit the draft and then ask for a review. The original file will be updated only after the draft be reviewed.')}</p>
             </div>
           }
           {this.state.isMenuShow && 
-            <ListMenu 
+            <DraftListMenu 
               isMenuShow={this.state.isMenuShow} 
               currentDraft={this.state.currentDraft} 
               menuPosition={this.state.menuPosition} 

frontend/src/pages/file-history/main-panel.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Prism from 'prismjs';
 import Loading from '../../components/loading';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import DiffViewer from '@seafile/seafile-editor/dist/diff-viewer/diff-viewer'
+import DiffViewer from '@seafile/seafile-editor/dist/diff-viewer/diff-viewer';
 import '../../css/initial-style.css';
 
 require('@seafile/seafile-editor/src/lib/code-hight-package');

static/scripts/app/views/dirent.js

@@ -622,11 +622,13 @@ define([
                 type: 'POST',
                 beforeSend: Common.prepareCSRFToken,
                 success: function(res) {
-                    var msg = gettext("New Success.");
+                    var siteRoot = window.app.config.siteRoot;
-                    Common.feedback(msg, 'success');
+                    var repoID = res.draft_repo_id;
+                    var filePath = res.draft_file_path;
+                    window.location.href= siteRoot + 'lib/' + repoID + '/file' + filePath + '?mode=edit';
                 },
                 error: function() {
-                    var err_msg = gettext("The draft is already exist.");
+                    var err_msg = gettext("The draft already exists.");
                     Common.feedback(err_msg, 'error');
                 }
             });