[add] preview-readme.md (#2857)

frontend/src/components/dialog/readme-dialog.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
+import Loading from '../../components/loading';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  toggleCancel: PropTypes.func.isRequired,
+};
+
+class ReadmeDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      readmeContent: null,
+      isLoading: true,
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getFileDownloadLink(this.props.repoID, this.props.filePath).then(res => {
+      seafileAPI.getFileContent(res.data).then(res => {
+        this.setState({
+          readmeContent: res.data,
+          isLoading: false,
+        }); 
+      });
+    });
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} className="readme-dialog" size="lg">
+        <ModalHeader>{gettext('Readme.md')}
+          <a className="readme-dialog-edit" href={this.props.href} target='_blank'><i className="fa fa-pencil"></i></a>
+        </ModalHeader>
+        <ModalBody>
+          {this.state.isLoading ? 
+            <Loading />:
+            <MarkdownViewer markdownContent={this.state.readmeContent} showTOC={false}/>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleCancel}>{gettext('Close')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ReadmeDialog.propTypes = propTypes;
+
+export default ReadmeDialog;

frontend/src/components/repo-info-bar.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ModalPortal from './modal-portal';
-import { Modal } from 'reactstrap';
 import ListTaggedFilesDialog from './dialog/list-taggedfiles-dialog';
 import ListRepoDraftsDialog from './dialog/list-repo-drafts-dialog';
 import ListRepoReviewsDialog from './dialog/list-repo-reviews-dialog';
+import ReadmeDialog from './dialog/readme-dialog';
 import { siteRoot, gettext } from '../utils/constants';
 import { Utils } from '../utils/utils';
 
@@ -28,6 +28,7 @@ class RepoInfoBar extends React.Component {
       isListTaggedFileShow: false,
       showRepoDrafts: false,
       showRepoReviews: false,
+      showReadmeDialog: false,
     };
   }
 
@@ -56,10 +57,16 @@ class RepoInfoBar extends React.Component {
     });
   }
 
+  toggleReadme = () => {
+    this.setState({
+      showReadmeDialog: !this.state.showReadmeDialog
+    });
+  }
+
   render() {
     let {repoID, currentPath, usedRepoTags, readmeMarkdown} = this.props;
     let href = readmeMarkdown !== null ? siteRoot + 'lib/' + repoID + '/file' + Utils.joinPath(currentPath, readmeMarkdown.name) : '';
-
+    let filePath = currentPath + 'readme.md';
     return (
       <div className="repo-info-bar">
         {usedRepoTags.length > 0 && (
@@ -78,12 +85,18 @@ class RepoInfoBar extends React.Component {
           </ul>
         )}
         <div className="readme-files">
-          {readmeMarkdown !== null && (
+          {(readmeMarkdown !== null && readmeMarkdown.size > 1) && 
+            <span className="readme-file" onClick={this.toggleReadme}>
+              <i className="readme-flag fa fa-flag"></i>
+              <span className="readme-name">{readmeMarkdown.name}</span>
+            </span>
+          }
+          {(readmeMarkdown !== null && readmeMarkdown.size < 2) && 
             <span className="readme-file">
               <i className="readme-flag fa fa-flag"></i>
               <a className="readme-name" href={href} target='_blank'>{readmeMarkdown.name}</a>
             </span>
-          )}
+          }
           {this.props.draftCounts > 0 &&
             <span className="readme-file">
               <i className="readme-flag fa fa-pen"></i>
@@ -132,6 +145,16 @@ class RepoInfoBar extends React.Component {
           </ModalPortal>
         )}
 
+        {this.state.showReadmeDialog && (
+          <ModalPortal>
+            <ReadmeDialog
+              toggleCancel={this.toggleReadme}
+              repoID={repoID}
+              filePath={filePath}
+              href={href}
+            />
+          </ModalPortal>
+        )}
       </div>
     );
   }

frontend/src/css/repo-info-bar.css

@@ -19,6 +19,7 @@
   width: 12px;
   height: 12px;
   border-radius: 50%;
+  cursor: pointer;
 }
 
 .used-tag-name {
@@ -42,6 +43,7 @@
 .readme-file {
   margin: 0 15px;
   display: inline-block;
+  cursor: pointer;
 }
 
 .readme-file a {
@@ -57,3 +59,8 @@
   margin: 0 0.25rem;
   font-size: 14px;
 }
+
+.readme-dialog-edit {
+  position: absolute;
+  right: 16px;
+}