haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 23:48:47 +00:00
Code Issues Releases Wiki Activity

remove markdown viewer dialog (#7052)

Browse Source
This commit is contained in:
Michael An
2024-11-18 12:07:03 +08:00
committed by GitHub
parent 9c3e828bf6
commit 559d8c52ca
7 changed files with 19 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/common/event-bus-type.js
View File

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

16
frontend/src/components/dir-view-mode/dir-column-view.js
View File

@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import DirColumnNav from './dir-column-nav';
import MarkdownViewerDialog from './markdown-viewer-dialog';
import DirListView from './dir-list-view';
import DirGridView from './dir-grid-view';
import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
@@ -43,7 +42,6 @@ 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,
@@ -288,20 +286,6 @@ class DirColumnView extends React.Component {
eventBus={this.props.eventBus}
/>
}
{this.props.isViewFile &&
<MarkdownViewerDialog
repoID={this.props.repoID}
filePath={this.props.getMarkDownFilePath()}
fileName={this.props.getMarkDownFileName()}
openMarkdownFile={this.props.openMarkdownFile}
isFileLoading={this.props.isFileLoading}
content={this.props.content}
lastModified={this.props.lastModified}
latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick}
onCloseMarkdownViewDialog={this.props.onCloseMarkdownViewDialog}
/>
}
</div>
</div>
);

56
frontend/src/components/dir-view-mode/markdown-viewer-dialog.css
View File

@@ -1,56 +0,0 @@
.seafile-markdown-viewer-modal {
max-width: 950px;
height: calc(100% - 56px);
}
.seafile-markdown-viewer-modal .seafile-markdown-viewer-modal-content {
height: 100%;
}
.seafile-markdown-viewer-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e5e5e5;
padding: 0 16px;
height: 48px;
}
.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-left-name img {
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: calc(100vh / 2 + 130px);
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;
}

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

@@ -1,67 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody } from 'reactstrap';
import { mediaUrl } from '../../utils/constants';
import SeafileMarkdownViewer from '../seafile-markdown-viewer';
import InternalLinkOperation from '../operations/internal-link-operation';
import { Utils } from '../../utils/utils';
import './markdown-viewer-dialog.css';
const propTypes = {
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,
onCloseMarkdownViewDialog: PropTypes.func,
openMarkdownFile: PropTypes.func,
};
class MarkdownViewerDialog extends React.Component {
render() {
const { repoID, filePath, fileName } = this.props;
return (
<Modal
isOpen={true}
className='seafile-markdown-viewer-modal'
toggle={this.props.onCloseMarkdownViewDialog}
contentClassName='seafile-markdown-viewer-modal-content'
zIndex={1046}
>
<div className='seafile-markdown-viewer-modal-header'>
<div className='seafile-markdown-viewer-modal-header-left-name d-flex align-items-center'>
<span><img src={`${mediaUrl}img/file/256/md.png`} width='24' alt='' /></span>
<span>{fileName}</span>
<InternalLinkOperation path={Utils.joinPath(filePath, fileName)} repoID={repoID} />
</div>
<div className='seafile-markdown-viewer-modal-header-right-tool'>
<span className='sf3-font sf3-font-new-page' onClick={this.props.openMarkdownFile}></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={repoID}
path={filePath}
>
</SeafileMarkdownViewer>
</ModalBody>
</Modal>
);
}
}
MarkdownViewerDialog.propTypes = propTypes;
export default MarkdownViewerDialog;

2
frontend/src/metadata/utils/open-file.js
View File

@@ -43,7 +43,7 @@ const _openUrl = (url) => {
};
const _openMarkdown = (fileName, parentDir, eventBus) => {
eventBus && eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
eventBus && eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN, parentDir, fileName);
};
const _openByNewWindow = (fileName, parentDir, fileType) => {

97
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -105,8 +105,6 @@ class LibContentView extends React.Component {
this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState
this.currentMoveItemName = '';
this.currentMoveItemPath = '';
this.markdownFileName = '';
this.markdownFileParentDir = '';
this.unsubscribeEventBus = null;
}
@@ -282,12 +280,6 @@ class LibContentView extends React.Component {
}
} else if (event.state && event.state.path) { // file path
let path = event.state.path;
if (this.state.isTreePanelShown) {
if (Utils.isMarkdownFile(path)) { // Judging not strict
this.showFile(path);
return;
}
}
this.loadDirentList(path);
this.setState({
path: path,
@@ -393,26 +385,6 @@ class LibContentView extends React.Component {
// list used FileTags
this.updateUsedRepoTags();
if (Utils.isMarkdownFile(path)) {
this.handleMarkdownFile(path);
} else {
this.handleNonMarkdownFile(path);
}
};
handleMarkdownFile = (path) => {
seafileAPI.getFileInfo(this.props.repoID, path).then(() => {
this.loadSidePanel(path);
this.showFile(path);
}).catch(() => {
if (this.state.isTreePanelShown) {
this.loadSidePanel(path);
}
this.showDir(path);
});
};
handleNonMarkdownFile = (path) => {
if (this.state.isTreePanelShown) {
this.loadSidePanel(path);
}
@@ -469,11 +441,12 @@ class LibContentView extends React.Component {
window.history.pushState({ url: url, path: path }, path, url);
};
openMarkDownDialog = (parentDir, fileName) => {
this.markdownFileParentDir = parentDir;
this.markdownFileName = fileName;
const markdownFilePath = Utils.joinPath(parentDir, fileName);
this.showFile(markdownFilePath, true);
openMarkDown = (parentDir, fileName) => {
let filePath = Utils.joinPath(parentDir, fileName);
let repoID = this.props.repoID;
const w = window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(filePath);
w.location.href = url;
};
showFile = (filePath, noRedirection) => {
@@ -540,7 +513,7 @@ class LibContentView extends React.Component {
isDirentDetailShow: viewType === VIEW_TYPE.GALLERY ? this.state.isDirentDetailShow : false,
}, () => {
setTimeout(() => {
this.unsubscribeEventBus = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, this.openMarkDownDialog);
this.unsubscribeEventBus = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.OPEN_MARKDOWN, this.openMarkDown);
}, 1);
});
const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`;
@@ -1498,15 +1471,10 @@ class LibContentView extends React.Component {
}
this.showDir(direntPath);
} else { // is file
if (this.state.isTreePanelShown && Utils.isMarkdownFile(direntPath)) {
this.setState({ currentDirent: dirent });
this.showColumnMarkdownFile(direntPath);
} else {
let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath);
if (dirent.is_sdoc_revision && dirent.revision_id) {
url = siteRoot + 'lib/' + repoID + '/revisions/' + dirent.revision_id + '/';
}
let isWeChat = Utils.isWeChat();
if (!isWeChat) {
window.open(url);
@@ -1514,7 +1482,6 @@ class LibContentView extends React.Component {
location.href = url;
}
}
}
};
onDirentSelected = (dirent, event) => {
@@ -1877,11 +1844,7 @@ class LibContentView extends React.Component {
}
this.showDir(node.path);
} else {
if (Utils.isMarkdownFile(node.path)) {
if (node.path !== this.state.path) {
this.showColumnMarkdownFile(node.path);
}
} else if (Utils.isFileMetadata(node?.object?.type)) {
if (Utils.isFileMetadata(node?.object?.type)) {
if (node.path !== this.state.path) {
this.showFileMetadata(node.path, node.view_id || '0000', node.view_type || VIEW_TYPE.TABLE);
}
@@ -1896,27 +1859,6 @@ class LibContentView extends React.Component {
}
};
showColumnMarkdownFile = (filePath) => {
let repoID = this.props.repoID;
seafileAPI.getFileInfo(repoID, filePath).then((res) => {
if (res.data.size === 0) {
// loading of asynchronously obtained data may be blocked
const w = window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(filePath);
w.location.href = url;
} else {
this.showFile(filePath, true);
}
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
onCloseMarkdownViewDialog = () => {
this.setState({ isViewFile: false });
};
onTreeNodeCollapse = (node) => {
let tree = treeHelper.collapseNode(this.state.treeData, node);
this.setState({ treeData: tree });
@@ -2028,28 +1970,9 @@ class LibContentView extends React.Component {
this.setState({
currentMode: cookie.load('seafile_view_mode') || (isMetadataView ? METADATA_MODE : LIST_MODE),
});
this.markdownFileName = '';
this.markdownFileParentDir = '';
}
};
getMarkDownFilePath = () => {
return this.markdownFileParentDir || this.state.path || '';
};
getMarkDownFileName = () => {
const { currentDirent } = this.state;
return this.markdownFileName || (currentDirent && currentDirent.name) || '';
};
openMarkdownFile = () => {
let { repoID } = this.props;
let path = this.getMarkDownFilePath();
let name = this.getMarkDownFileName();
let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name;
window.open(newUrl, '_blank');
};
recalculateSelectedDirents = (unSelectNames, newDirentList) => {
let selectedDirentList = this.state.selectedDirentList.slice(0);
if (selectedDirentList.length > 0) {
@@ -2418,10 +2341,6 @@ class LibContentView extends React.Component {
showDirentDetail={this.showDirentDetail}
onItemsScroll={this.onItemsScroll}
eventBus={this.props.eventBus}
onCloseMarkdownViewDialog={this.onCloseMarkdownViewDialog}
getMarkDownFilePath={this.getMarkDownFilePath}
getMarkDownFileName={this.getMarkDownFileName}
openMarkdownFile={this.openMarkdownFile}
updateCurrentDirent={this.updateCurrentDirent}
closeDirentDetail={this.closeDirentDetail}
/>