change markdown view in metadata (#6746)

* change markdown viewer in metadata

* fix side nav click event

frontend/src/components/common/event-bus-type.js

@@ -4,4 +4,5 @@ export const EVENT_BUS_TYPE = {
   SEARCH_LIBRARY_CONTENT: 'search_library_content',
 
   RESTORE_IMAGE: 'restore_image',
+  OPEN_MARKDOWN_DIALOG: 'open_markdown_dialog',
 };

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

@@ -281,11 +281,12 @@ class DirColumnView extends React.Component {
           }
           {this.props.isViewFile &&
             <MarkdownViewerDialog
-              path={this.props.path}
               repoID={this.props.repoID}
+              filePath={this.props.getMarkDownFilePath()}
+              fileName={this.props.getMarkDownFileName()}
+              openMarkdownFile={this.props.openMarkdownFile}
               isFileLoading={this.props.isFileLoading}
               content={this.props.content}
-              currentDirent={this.props.currentDirent}
               lastModified={this.props.lastModified}
               latestContributor={this.props.latestContributor}
               onLinkClick={this.props.onLinkClick}

frontend/src/components/dir-view-mode/markdown-viewer-dialog.js

@@ -1,37 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
-import { Utils } from '../../utils/utils';
-import { siteRoot, mediaUrl } from '../../utils/constants';
+import { mediaUrl } from '../../utils/constants';
 import SeafileMarkdownViewer from '../seafile-markdown-viewer';
 
 import './markdown-viewer-dialog.css';
 
 const propTypes = {
-  path: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  fileName: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   isFileLoading: PropTypes.bool.isRequired,
   content: PropTypes.string,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
-  currentDirent: PropTypes.object,
-  onCloseMarkdownViewDialog: PropTypes.func
+  onCloseMarkdownViewDialog: PropTypes.func,
+  openMarkdownFile: PropTypes.func,
 };
 
 class MarkdownViewerDialog extends React.Component {
 
-  onOpenFile = (e) => {
-    e.preventDefault();
-    let { path, repoID, currentDirent } = this.props;
-    let { name } = currentDirent || {};
-    let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name;
-    window.open(newUrl, '_blank');
-  };
-
   render() {
-    const { currentDirent } = this.props;
-    const { name } = currentDirent || {};
     return (
       <Modal
         isOpen={true}
@@ -43,10 +33,10 @@ class MarkdownViewerDialog extends React.Component {
         <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>
+            <span>{this.props.fileName}</span>
           </div>
           <div className='seafile-markdown-viewer-modal-header-right-tool'>
-            <span className='sf3-font sf3-font-open' onClick={this.onOpenFile}></span>
+            <span className='sf3-font sf3-font-open' onClick={this.props.openMarkdownFile}></span>
             <span className='sf3-font sf3-font-x-01' onClick={this.props.onCloseMarkdownViewDialog}></span>
           </div>
         </div>
@@ -59,7 +49,7 @@ class MarkdownViewerDialog extends React.Component {
             latestContributor={this.props.latestContributor}
             onLinkClick={this.props.onLinkClick}
             repoID={this.props.repoID}
-            path={this.props.path}
+            path={this.props.filePath}
           >
           </SeafileMarkdownViewer>
         </ModalBody>

frontend/src/components/main-side-nav.js

@@ -152,7 +152,7 @@ class MainSideNav extends React.Component {
         className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide-share-admin' : 'side-panel-slide-up-share-admin'}`}
         style={style}
       >
-        {canAddRepo && canShareRepo && (
+        {canAddRepo && canShareRepo && height !== 0 && (
           <li className={`nav-item ${this.getActiveClass('share-admin-libs')}`}>
             <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
               <span aria-hidden="true" className="sharp">#</span>
@@ -160,7 +160,7 @@ class MainSideNav extends React.Component {
             </Link>
           </li>
         )}
-        {canShareRepo && (
+        {canShareRepo && height !== 0 && (
           <li className={`nav-item ${this.getActiveClass('share-admin-folders')}`}>
             <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
               <span aria-hidden="true" className="sharp">#</span>
@@ -168,7 +168,7 @@ class MainSideNav extends React.Component {
             </Link>
           </li>
         )}
-        {linksNavItem}
+        { height !== 0 && linksNavItem}
       </ul>
     );
   }