From f3a20f1c7162e3dc54ce0fb68eb9c6ec018e5c58 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Wed, 19 Dec 2018 11:41:45 +0800
Subject: [PATCH] [dir view] added 'add md document' tip for empty library
 (#2668)

---
 frontend/src/components/dir-view/dir-panel.js |  1 +
 .../dirent-list-view/dirent-list-view.js      | 49 ++++++++++++++++++-
 frontend/src/css/tip-for-new-md.css           | 12 +++++
 media/css/seahub_react.css                    |  1 +
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/css/tip-for-new-md.css

diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index 0b955a59a1..cbbdb52c03 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -172,6 +172,7 @@ class DirPanel extends React.Component {
                     isDirentListLoading={this.props.isDirentListLoading}
                     isAllItemSelected={this.props.isAllDirentSelected}
                     isRepoOwner={this.state.isRepoOwner}
+                    onAddFile={this.props.onAddFile}
                     onItemDetails={this.onItemDetails}
                     onItemMove={this.props.onItemMove}
                     onItemCopy={this.props.onItemCopy}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index 3bb387061c..647cd1c387 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
+import ModalPortal from '../modal-portal';
+import CreateFile from '../../components/dialog/create-file-dialog';
+
+import '../../css/tip-for-new-md.css';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -12,6 +16,7 @@ const propTypes = {
   isAllItemSelected: PropTypes.bool.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
+  onAddFile: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
   onAllItemSelected: PropTypes.func.isRequired,
   onItemSelected: PropTypes.func.isRequired,
@@ -29,6 +34,8 @@ class DirentListView extends React.Component {
     super(props);
     this.state = {
       isItemFreezed: false,
+      isCreateFileDialogShow: false,
+      fileType: ''
     };
   }
 
@@ -48,6 +55,25 @@ class DirentListView extends React.Component {
     this.props.onItemDetails(dirent);
   }
 
+  onCreateFileToggle = () => {
+    this.setState({
+      isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
+      fileType: ''
+    });
+  }
+
+  onCreateMarkdownToggle = () => {
+    this.setState({
+      isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
+      fileType: '.md'
+    });
+  }
+
+  onAddFile = (filePath, isDraft) => {
+    this.setState({isCreateFileDialogShow: false});
+    this.props.onAddFile(filePath, isDraft);
+  }
+
   render() {
     const { direntList } = this.props;
 
@@ -55,6 +81,27 @@ class DirentListView extends React.Component {
       return (<Loading />);
     }
 
+    if (this.props.path == '/' && !direntList.length) {
+      return (
+        <Fragment>
+          <div className="tip-for-new-md d-flex">
+            <button className="big-new-md-button" onClick={this.onCreateMarkdownToggle}><span className="sf2-icon-plus add-md-icon"></span><br />{gettext('Markdown Document')}</button>
+            <p>{gettext('You can create online document using Markdown format easily. When creating a document, you can mark it as draft. After finishing the draft, you can ask others to review it. They can view the document history in the review page and leave comments on the document.')}</p>
+          </div>
+          {this.state.isCreateFileDialogShow && (
+            <ModalPortal>
+              <CreateFile
+                parentPath={this.props.path}
+                fileType={this.state.fileType}
+                onAddFile={this.onAddFile}
+                addFileCancel={this.onCreateFileToggle}
+              />
+            </ModalPortal>
+          )}
+        </Fragment>
+      );
+    }
+
     return (
       <table>
         <thead>
diff --git a/frontend/src/css/tip-for-new-md.css b/frontend/src/css/tip-for-new-md.css
new file mode 100644
index 0000000000..9ef008e0ad
--- /dev/null
+++ b/frontend/src/css/tip-for-new-md.css
@@ -0,0 +1,12 @@
+.tip-for-new-md {
+  padding: 5em 8em; 
+}
+.big-new-md-button {
+  padding: .9em 2em 1em; 
+  background: #eee;
+  border-radius: 8px; 
+  margin-right: 1.5em;
+}
+.add-md-icon {
+  font-size: 1.2em;
+}
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 23a6aa3b6e..307a67ec4c 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -87,6 +87,7 @@
 .sf2-icon-close:before { content:"\e035"; }
 .sf2-icon-two-columns:before { content:"\e036"; }
 .sf2-icon-tag:before {content:"\e037"}
+.sf2-icon-plus:before { content: "\e027"; }
 
 /* common class and element style*/
 a { color:#eb8205; }