Delete markdown viewer (#3263)

* delete md viewer

* add

frontend/src/components/toolbar/markdown-viewer-toolbar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbarcomponent/editorToolBar';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
 import FileInfo from '@seafile/seafile-editor/dist/components/topbarcomponent/file-info';
 
 const propTypes = {
@@ -11,8 +12,6 @@ const propTypes = {
   editorUtilities: PropTypes.object.isRequired,
   collabUsers: PropTypes.array.isRequired,
   fileInfo: PropTypes.object.isRequired,
-  fileTagList: PropTypes.array.isRequired,
-  relatedFiles: PropTypes.array.isRequired,
   toggleShareLinkDialog: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,
   toggleNewDraft: PropTypes.func.isRequired,
@@ -23,114 +22,137 @@ const propTypes = {
   toggleHistory: PropTypes.func.isRequired,
   commentsNumber: PropTypes.number.isRequired,
   toggleCommentList: PropTypes.func.isRequired,
+  editorMode: PropTypes.string.isRequired,
+  readOnly: PropTypes.bool.isRequired,
 };
 
+const MoreMenuPropTypes = {
+  readOnly: PropTypes.bool.isRequired,
+  openDialogs: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  editorMode: PropTypes.string.isRequired
+}
+
+class MoreMenu extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltipOpen: false,
+      dropdownOpen:false
+    };
+  }
+
+  tooltipToggle = () => {
+    this.setState({ tooltipOpen: !this.state.tooltipOpen });
+  }
+
+  dropdownToggle = () => {
+    this.setState({ dropdownOpen:!this.state.dropdownOpen });
+  }
+
+  render() {
+    const editorMode = this.props.editorMode;
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-lg-1">
+        <DropdownToggle id="moreButton">
+          <i className="fa fa-ellipsis-v"/>
+          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
+          </Tooltip>
+        </DropdownToggle>
+        <DropdownMenu className="drop-list" right={true}>
+          {(!this.props.readOnly && editorMode === 'rich') &&
+            <DropdownItem onMouseDown={this.props.onEdit.bind(this, 'plain')}>{gettext('Switch to plain text editor')}</DropdownItem>}
+          {(!this.props.readOnly && editorMode === 'plain') &&
+            <DropdownItem onMouseDown={this.props.onEdit.bind(this, 'rich')}>{gettext('Switch to rich text editor')}</DropdownItem>}
+          {(this.props.openDialogs && editorMode === 'rich') &&
+            <DropdownItem onMouseDown={this.props.openDialogs.bind(this, 'help')}>{gettext('Help')}</DropdownItem>
+          }
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+MoreMenu.propTypes = MoreMenuPropTypes;
+
+
 class MarkdownViewerToolbar extends React.Component {
 
   constructor(props) {
     super(props);
   }
 
-  renderFirstToolbar() {
-    return (
-      <div className="sf-md-viewer-topbar-first d-flex justify-content-between">
-        <FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
-          fileInfo={this.props.fileInfo}/>
-        {(this.props.hasDraft && !this.props.isDraft) &&
-          <div className='seafile-btn-view-review'>
-            <div className='tag tag-green'>{gettext('This file is in draft stage.')}
-              <a className="ml-2" onMouseDown={this.props.editorUtilities.goDraftPage}>{gettext('View Draft')}</a></div>
-          </div>
-        }
-        <div className="topbar-btn-container">
-          { (!this.props.hasDraft && !this.props.isDraft && this.props.isDocs) &&
-            <button onMouseDown={this.props.toggleNewDraft} className="btn btn-success btn-new-draft">
-              {gettext('New Draft')}</button>
-          }
-          {this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
-            users={this.props.collabUsers} id={'usersButton'} />}
-          <ButtonGroup>
-            <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
-              onMouseDown={this.props.toggleShareLinkDialog}/>
-            {
-              this.props.commentsNumber > 0 ?
-                <button className="btn btn-icon btn-secondary btn-active" id="commentsNumber" type="button"
-                  data-active="false" onMouseDown={this.props.toggleCommentList}>
-                  <i className="fa fa-comments"></i>{' '}<span>{this.props.commentsNumber}</span>
-                </button>
-                :
-                <IconButton id={'commentsNumber'} text={gettext('Comments')} icon={'fa fa-comments'} onMouseDown={this.props.toggleCommentList}/>
-            }
-            <IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
-              icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory}/>
-            {
-              (!this.props.hasDraft && this.props.fileInfo.permission === 'rw')? <IconButton text={gettext('Edit')}
-                id={'editButton'} icon={'fa fa-edit'} onMouseDown={this.props.onEdit}/>: null
-            }
-            {
-              this.props.showFileHistory && <IconButton id={'historyButton'}
-                text={gettext('File History')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'}/>
-            }
-          </ButtonGroup>
-        </div>
-      </div>
-    );
-  }
-
-  renderSecondToolbar() {
-    const { relatedFiles, fileTagList } = this.props;
-    const openDialogs = this.props.openDialogs;
-    let relatedFileString = '';
-    if (relatedFiles) {
-      const length = relatedFiles.length;
-      if (length === 1) relatedFileString = gettext('related file');
-      else if (length > 1) relatedFileString = gettext('related files');
-    }
-    return(
-      <div className="sf-md-viewer-topbar-second d-flex justify-content-center">
-        {(fileTagList) && (fileTagList.length > 0 ?
-          <ul className="sf-files-tags">
-            {
-              fileTagList.map((item, index=0) => {
-                return (
-                  <li key={index} className='sf-files-tag'>
-                    <span className="file-tag-icon" style={{backgroundColor: item.tag_color}}></span>
-                    <span className="file-tag-name" title={item.tag_name}>{item.tag_name}</span>
-                  </li>
-                );
-              })
-            }
-            <li className='sf-files-tag'><span className="file-tag-name"
-              onClick={openDialogs.bind(this, 'tags')}>{gettext('Edit')}</span></li>
-          </ul>
-          :
-          <span className="no-file-tag edit-related-file"
-            onClick={openDialogs.bind(this, 'tags')}>{gettext('No tags')}</span>
-        )}
-        {relatedFiles &&
-          <div className="sf-related-files-bar">
-            {relatedFiles.length === 0 ?
-              <span className="edit-related-file no-related-file"
-                onClick={openDialogs.bind(this, 'related_files')}>{gettext('No related files')}</span>:
-              <React.Fragment>
-                <a href="#sf-releted-files">{relatedFiles.length}{' '}{relatedFileString}</a>
-                <span className="edit-related-file" onClick={openDialogs.bind(this, 'related_files')}>
-                  {gettext('Edit')}</span>
-              </React.Fragment>
-            }
-          </div>
-        }
-      </div>
-    );
-  }
-
   render() {
-    return (
-      <div className="sf-md-viewer-topbar">
-        {this.renderFirstToolbar()}
-        {this.renderSecondToolbar()}
-      </div>
-    );
+
+    if (this.props.editorMode === 'rich') {
+      return (
+        <div className="sf-md-viewer-topbar">
+          <div className="sf-md-viewer-topbar-first d-flex justify-content-between">
+            <FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
+              fileInfo={this.props.fileInfo}/>
+            {(this.props.hasDraft && !this.props.isDraft) &&
+              <div className='seafile-btn-view-review'>
+                <div className='tag tag-green'>{gettext('This file is in draft stage.')}
+                  <a className="ml-2" onMouseDown={this.props.editorUtilities.goDraftPage}>{gettext('View Draft')}</a></div>
+              </div>
+            }
+            <div className="topbar-btn-container">
+              { (!this.props.hasDraft && !this.props.isDraft && this.props.isDocs) &&
+                <button onMouseDown={this.props.toggleNewDraft} className="btn btn-success btn-new-draft">
+                  {gettext('New Draft')}</button>
+              }
+              {this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
+                users={this.props.collabUsers} id={'usersButton'} />}
+              <ButtonGroup>
+                <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
+                  onMouseDown={this.props.toggleShareLinkDialog}/>
+                {
+                  this.props.commentsNumber > 0 ?
+                    <button className="btn btn-icon btn-secondary btn-active" id="commentsNumber" type="button"
+                      data-active="false" onMouseDown={this.props.toggleCommentList}>
+                      <i className="fa fa-comments"></i>{' '}<span>{this.props.commentsNumber}</span>
+                    </button>
+                    :
+                    <IconButton id={'commentsNumber'} text={gettext('Comments')} icon={'fa fa-comments'} onMouseDown={this.props.toggleCommentList}/>
+                }
+                <IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
+                  icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory}/>
+                {
+                  this.props.showFileHistory && <IconButton id={'historyButton'}
+                    text={gettext('File History')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'}/>
+                }
+              </ButtonGroup>
+              <MoreMenu
+                readOnly={this.props.readOnly}
+                openDialogs={this.props.openDialogs}
+                editorMode={this.props.editorMode}
+                onEdit={this.props.onEdit}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    } else if (this.props.editorMode === 'plain') {
+      return (
+        <div className="sf-md-viewer-topbar">
+          <div className="sf-md-viewer-topbar-first d-flex justify-content-between">
+            <FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
+              fileInfo={this.props.fileInfo}/>
+            <div className="topbar-btn-container">
+              {this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
+                users={this.props.collabUsers} id={'usersButton'} />}
+              <MoreMenu
+                readOnly={this.props.readOnly}
+                openDialogs={this.props.openDialogs}
+                editorMode={this.props.editorMode}
+                onEdit={this.props.onEdit}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
   }
 }