markdown view update (#6705)

* markdown view update

* code normal

* code normal

* code normal

* code normal

frontend/src/components/dir-view-mode/dir-column-file.css

@@ -0,0 +1,50 @@
+.seafile-markdown-viewer-modal {
+  max-width: 950px;
+}
+
+.seafile-markdown-viewer-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-left-name > span {
+  margin-right: 6px;
+}
+
+.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-right-tool > span {
+  margin-left: 10px;
+  cursor: pointer;
+  color: #000;
+  opacity: 0.5;
+}
+
+.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-right-tool > span:hover {
+  opacity: 0.75;
+}
+
+.seafile-markdown-viewer-modal-body {
+  padding: 0;
+  height: 600px;
+  overflow: auto;
+}
+
+.seafile-markdown-viewer-modal-body .wiki-page-container {
+  margin: 40px 60px 0px 60px;
+}
+
+.seafile-markdown-viewer-modal-body .wiki-page-container .empty-loading-page {
+  display: none;
+}
+
+.seafile-markdown-viewer-modal-body .loading-tip {
+  margin-top: 30%;
+}
+
+.seafile-markdown-viewer-modal-body .sf-slate-viewer-scroll-container {
+  background: #fff;
+  padding: 0px 0 0px;
+  overflow: hidden;
+}

frontend/src/components/dir-view-mode/dir-column-file.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
 import { SeafileMetadata } from '../../metadata';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import SeafileMarkdownViewer from '../seafile-markdown-viewer';
 
+import './dir-column-file.css';
+
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
@@ -18,6 +21,8 @@ const propTypes = {
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
   currentRepoInfo: PropTypes.object,
+  currentDirent: PropTypes.object,
+  onCloseMarkdownViewDialog: PropTypes.func
 };
 
 class DirColumnFile extends React.Component {
@@ -46,6 +51,9 @@ class DirColumnFile extends React.Component {
   };
 
   render() {
+    const { currentDirent } = this.props;
+    const { name } = currentDirent;
+
     if (this.props.isFileLoadedErr) {
       return (
         <div className="message err-tip">{gettext('File does not exist.')}</div>
@@ -59,20 +67,39 @@ class DirColumnFile extends React.Component {
     }
 
     return (
-      <SeafileMarkdownViewer
-        isTOCShow={false}
-        isFileLoading={this.props.isFileLoading}
-        markdownContent={this.props.content}
-        lastModified = {this.props.lastModified}
-        latestContributor={this.props.latestContributor}
-        onLinkClick={this.props.onLinkClick}
-        repoID={this.props.repoID}
-        path={this.props.path}
+      <Modal
+        isOpen={true}
+        className='seafile-markdown-viewer-modal'
+        toggle={this.props.onCloseMarkdownViewDialog}
+        contentClassName='seafile-markdown-viewer-modal-content'
+        zIndex={1046}
       >
-        <span className='wiki-open-file position-fixed' onClick={this.onOpenFile}>
-          <i className="sf3-font sf3-font-expand-arrows-alt"></i>
-        </span>
-      </SeafileMarkdownViewer>
+        <div className='seafile-markdown-viewer-modal-header'>
+          <div className='seafile-markdown-viewer-modal-header-left-name'>
+            <span ><img src={`${mediaUrl}img/file/256/md.png`} width='24' alt='' /></span>
+            <span>{name}</span>
+          </div>
+          <div className='seafile-markdown-viewer-modal-header-right-tool'>
+            {/* Hidden for now, operations may be added later */}
+            {/* <span className='sf3-font sf3-font-more'></span> */}
+            <span className='sf3-font sf3-font-open' onClick={this.onOpenFile}></span>
+            <span className='sf3-font sf3-font-x-01' onClick={this.props.onCloseMarkdownViewDialog}></span>
+          </div>
+        </div>
+        <ModalBody className='seafile-markdown-viewer-modal-body'>
+          <SeafileMarkdownViewer
+            isTOCShow={false}
+            isFileLoading={this.props.isFileLoading}
+            markdownContent={this.props.content}
+            lastModified = {this.props.lastModified}
+            latestContributor={this.props.latestContributor}
+            onLinkClick={this.props.onLinkClick}
+            repoID={this.props.repoID}
+            path={this.props.path}
+          >
+          </SeafileMarkdownViewer>
+        </ModalBody>
+      </Modal>
     );
   }
 }

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -23,6 +23,7 @@ const propTypes = {
   isTreeDataLoading: PropTypes.bool.isRequired,
   treeData: PropTypes.object.isRequired,
   currentNode: PropTypes.object,
+  currentDirent: PropTypes.object,
   onNodeClick: PropTypes.func.isRequired,
   onNodeCollapse: PropTypes.func.isRequired,
   onNodeExpanded: PropTypes.func.isRequired,
@@ -41,6 +42,7 @@ const propTypes = {
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
+  onCloseMarkdownViewDialog: PropTypes.func,
   // repo content
   isRepoInfoBarShow: PropTypes.bool.isRequired,
   usedRepoTags: PropTypes.array.isRequired,
@@ -198,10 +200,12 @@ class DirColumnView extends React.Component {
               filePermission={this.props.filePermission}
               content={this.props.content}
               viewId={this.props.viewId}
+              currentDirent={this.props.currentDirent}
               currentRepoInfo={this.props.currentRepoInfo}
               lastModified={this.props.lastModified}
               latestContributor={this.props.latestContributor}
               onLinkClick={this.props.onLinkClick}
+              onCloseMarkdownViewDialog={this.props.onCloseMarkdownViewDialog}
             />
           ) : (currentMode == 'list' ?
             <DirListView

frontend/src/components/seafile-markdown-viewer/index.js

@@ -28,8 +28,33 @@ class SeafileMarkdownViewer extends React.Component {
   constructor(props) {
     super(props);
     this.scrollRef = React.createRef();
+    this.seafileMarkdownViewerRef = null;
+    this.timer = null;
+    this.state = {
+      isMarkdownEditorRenderCompleted: false,
+    };
   }
 
+  componentDidMount() {
+    this.timer = setInterval(() => {
+      this.checkMarkdownEditorRenderCompleted();
+    }, 100);
+  }
+
+  componentWillUnmount() {
+    if (this.timer) clearInterval(this.timer);
+  }
+
+  checkMarkdownEditorRenderCompleted = () => {
+    if (this.seafileMarkdownViewerRef) {
+      const firstEl = this.seafileMarkdownViewerRef.firstElementChild;
+      if (firstEl.className !== 'empty-loading-page') {
+        this.setState({ isMarkdownEditorRenderCompleted: true });
+        if (this.timer) clearInterval(this.timer);
+      }
+    }
+  };
+
   onLinkClick = (link) => {
     this.props.onLinkClick(link);
   };
@@ -103,22 +128,30 @@ class SeafileMarkdownViewer extends React.Component {
   };
 
   render() {
-    if (this.props.isFileLoading) {
+    const { isMarkdownEditorRenderCompleted } = this.state;
+    const { isFileLoading, isWiki, containerClassName = '' } = this.props;
+
+    if (isFileLoading) {
       return <Loading />;
     }
-    const { isWiki, containerClassName = '' } = this.props;
+
     const containerClass = `wiki-page-container ${containerClassName}`;
     // In dir-column-file width is 100%;
     // In wiki-viewer width isn't 100%
     const contentClassName = `wiki-page-content ${isWiki ? '' : 'w-100'}`;
     return (
       <div ref={this.scrollRef} className={containerClass}>
-        <div className={contentClassName}>
+        <div className={contentClassName} ref={ref => this.seafileMarkdownViewerRef = ref}>
           {this.props.children}
           {this.renderMarkdown()}
-          <p id="wiki-page-last-modified">
-            {gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span>
-          </p>
+          {isMarkdownEditorRenderCompleted && (
+            <p id="wiki-page-last-modified">
+              {gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span>
+            </p>
+          )}
+          {!isMarkdownEditorRenderCompleted && (
+            <Loading />
+          )}
         </div>
       </div>
     );