From 4a27e72c69315d22ca9d03bfb37933f3b14bf54f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <978987373@qq.com> Date: Tue, 26 Dec 2023 14:35:44 +0800 Subject: [PATCH] Optimize markdown code (#5860) * optimize markdown editor css * optimize markdown viewer * optimize markdown viewer * fix wraning --- .../dir-view-mode/dir-column-file.js | 6 +- .../components/markdown-view/history-list.js | 167 ---------------- .../index.js} | 43 +++-- .../seafile-markdown-viewer/style.css | 25 +++ .../components/toolbar/view-file-toolbar.js | 2 +- frontend/src/css/layout.css | 4 - frontend/src/css/lib-content-view.css | 69 +------ .../css/markdown-viewer/history-viewer.css | 104 ---------- .../css/markdown-viewer/markdown-editor.css | 182 ------------------ .../markdown-editor/css/markdown-editor.css | 84 ++++++++ .../pages/markdown-editor/css/rich-editor.css | 125 ------------ .../pages/markdown-editor/css/side-panel.css | 89 --------- frontend/src/pages/markdown-editor/index.js | 2 +- frontend/src/pages/wiki/main-panel.js | 9 +- frontend/src/pages/wiki/wiki.css | 30 +-- 15 files changed, 152 insertions(+), 789 deletions(-) delete mode 100644 frontend/src/components/markdown-view/history-list.js rename frontend/src/components/{wiki-markdown-viewer.js => seafile-markdown-viewer/index.js} (80%) create mode 100644 frontend/src/components/seafile-markdown-viewer/style.css delete mode 100644 frontend/src/css/markdown-viewer/history-viewer.css delete mode 100644 frontend/src/css/markdown-viewer/markdown-editor.css create mode 100644 frontend/src/pages/markdown-editor/css/markdown-editor.css delete mode 100644 frontend/src/pages/markdown-editor/css/rich-editor.css delete mode 100644 frontend/src/pages/markdown-editor/css/side-panel.css diff --git a/frontend/src/components/dir-view-mode/dir-column-file.js b/frontend/src/components/dir-view-mode/dir-column-file.js index b7eec552c2..034aca5d8a 100644 --- a/frontend/src/components/dir-view-mode/dir-column-file.js +++ b/frontend/src/components/dir-view-mode/dir-column-file.js @@ -4,7 +4,7 @@ import { Utils } from '../../utils/utils'; import { gettext, siteRoot } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api'; import toaster from '../toast'; -import WikiMarkdownViewer from '../wiki-markdown-viewer'; +import SeafileMarkdownViewer from '../seafile-markdown-viewer'; const propTypes = { path: PropTypes.string.isRequired, @@ -70,7 +70,7 @@ class DirColumnFile extends React.Component { ); } return ( - } - + ); } } diff --git a/frontend/src/components/markdown-view/history-list.js b/frontend/src/components/markdown-view/history-list.js deleted file mode 100644 index 7b2a32f631..0000000000 --- a/frontend/src/components/markdown-view/history-list.js +++ /dev/null @@ -1,167 +0,0 @@ -/* eslint-disable linebreak-style */ -import React from 'react'; -import PropTypes from 'prop-types'; -import axios from 'axios'; -import Loading from '../loading'; -import moment from 'moment'; -import { gettext } from '../../utils/constants'; -import '../../css/markdown-viewer/history-viewer.css'; - -const propTypes = { - editorApi: PropTypes.object.isRequired, - showDiffViewer: PropTypes.func.isRequired, - setDiffViewerContent: PropTypes.func.isRequired, - reloadDiffContent: PropTypes.func.isRequired, - toggleHistoryPanel: PropTypes.func.isRequired, -}; - -class HistoryList extends React.Component { - - constructor(props) { - super(props); - this.perPage = 25; - this.state = { - historyList: [], - activeItem: 0, - currentPage: 1, - totalReversionCount: 0, - loading: false - }; - } - - componentDidMount() { - this.props.editorApi.listFileHistoryRecords(1, this.perPage).then((res) => { - this.setState({ - historyList: res.data.data, - totalReversionCount: res.data.total_count - }); - if (res.data.data.length > 1) { - axios.all([ - this.props.editorApi.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path), - this.props.editorApi.getFileHistoryVersion(res.data.data[1].commit_id, res.data.data[1].path) - ]).then(axios.spread((res1, res2) => { - axios.all([this.props.editorApi.getFileContent(res1.data), this.props.editorApi.getFileContent(res2.data)]).then(axios.spread((content1,content2) => { - this.props.showDiffViewer(); - this.props.setDiffViewerContent(content1.data, content2.data); - })); - })); - } else { - this.props.editorApi.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path).then((res) => { - this.props.editorApi.getFileContent(res.data).then((content) => { - this.props.showDiffViewer(); - this.props.setDiffViewerContent(content.data, ''); - }); - }); - } - }); - } - - onClick = (event, key, preItem, currentItem)=> { - if (key === this.state.activeItem) return false; - this.props.reloadDiffContent(); - this.setState({ - activeItem: key, - }); - axios.all([ - this.props.editorApi.getFileHistoryVersion(currentItem.commit_id, currentItem.path), - this.props.editorApi.getFileHistoryVersion(preItem.commit_id, preItem.path) - ]).then(axios.spread((res1, res2) => { - axios.all([this.props.editorApi.getFileContent(res1.data), this.props.editorApi.getFileContent(res2.data)]).then(axios.spread((content1,content2) => { - this.props.showDiffViewer(); - this.props.setDiffViewerContent(content1.data, content2.data); - })); - })); - }; - - onScroll = (event) => { - const clientHeight = event.target.clientHeight; - const scrollHeight = event.target.scrollHeight; - const scrollTop = event.target.scrollTop; - const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight); - if (isBottom) { - if (this.state.totalReversionCount > this.perPage * this.state.currentPage) { - let currentPage = this.state.currentPage + 1; - this.setState({ - currentPage: currentPage, - loading : true - }); - this.props.editorApi.listFileHistoryRecords(currentPage, this.perPage).then((res) => { - let currentHistoryList = Object.assign([], this.state.historyList); - this.setState({ - historyList: [...currentHistoryList, ...res.data.data], - loading : false - }); - }); - } - } - }; - - render() { - return ( -
-
-
- -
-
{gettext('History Versions')}
-
- -
- ); - } -} - -HistoryList.propTypes = propTypes; - - -const HistoryItempropTypes = { - ctime: PropTypes.string, - onClick: PropTypes.func, - index: PropTypes.number, - preItem: PropTypes.object, - currentItem: PropTypes.object, - name: PropTypes.string, - className: PropTypes.string, -}; - -class HistoryItem extends React.Component { - render() { - let time = moment.parseZone(this.props.ctime).format('YYYY-MM-DD HH:mm'); - return ( -
  • this.props.onClick(event, this.props.index, this.props.preItem, this.props.currentItem)} className={'history-item-container ' + this.props.className}> -
    {time}
    -
    {this.props.name}
    -
    • - ); - } -} - -HistoryItem.propTypes = HistoryItempropTypes; - - -export default HistoryList; diff --git a/frontend/src/components/wiki-markdown-viewer.js b/frontend/src/components/seafile-markdown-viewer/index.js similarity index 80% rename from frontend/src/components/wiki-markdown-viewer.js rename to frontend/src/components/seafile-markdown-viewer/index.js index f4327d5a21..9aae57ce17 100644 --- a/frontend/src/components/wiki-markdown-viewer.js +++ b/frontend/src/components/seafile-markdown-viewer/index.js @@ -1,27 +1,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import { EXTERNAL_EVENTS, EventBus, MarkdownViewer } from '@seafile/seafile-editor'; -import { gettext, isPublicWiki, mediaUrl, repoID, serviceURL, sharedToken, slug } from '../utils/constants'; -import Loading from './loading'; -import { Utils } from '../utils/utils'; +import { gettext, mediaUrl, serviceURL, sharedToken, slug } from '../../utils/constants'; +import { Utils } from '../../utils/utils'; +import Loading from '../loading'; + +import './style.css'; const propTypes = { + isWiki: PropTypes.bool, + path: PropTypes.string, + repoID: PropTypes.string, + isTOCShow: PropTypes.bool, children: PropTypes.object, isFileLoading: PropTypes.bool.isRequired, + containerClassName: PropTypes.string, markdownContent: PropTypes.string.isRequired, latestContributor: PropTypes.string.isRequired, lastModified: PropTypes.string.isRequired, onLinkClick: PropTypes.func.isRequired, - isWiki: PropTypes.bool, - isTOCShow: PropTypes.bool, - // for dir-column-file component(import repoID is undefined) - repoID: PropTypes.string, - path: PropTypes.string, }; -const contentClass = 'wiki-page-content'; - -class WikiMarkdownViewer extends React.Component { +class SeafileMarkdownViewer extends React.Component { constructor(props) { super(props); @@ -32,6 +32,7 @@ class WikiMarkdownViewer extends React.Component { const eventBus = EventBus.getInstance(); this.unsubscribeLinkClick = eventBus.subscribe(EXTERNAL_EVENTS.ON_LINK_CLICK, this.onLinkClick); } + componentWillUnmount() { this.unsubscribeLinkClick(); } @@ -50,9 +51,10 @@ class WikiMarkdownViewer extends React.Component { }; changeInlineNode = (item) => { + const { repoID } = this.props; let url, imagePath; - - if (item.type == 'image' && isPublicWiki) { // change image url + // isPublicWiki: in the old version, only public wiki need replace image url + if (item.type == 'image') { // change image url url = item.data.src; const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1'); // different repo @@ -113,10 +115,13 @@ class WikiMarkdownViewer extends React.Component { if (this.props.isFileLoading) { return ; } - // In dir-column-file repoID is one of props, width is 100%; In wiki-viewer repoID is not props, width isn't 100% - let contentClassName = `${this.props.repoID ? contentClass + ' w-100' : contentClass}`; + 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 ( -
    +
    {this.props.children} {this.renderMarkdown()} @@ -131,7 +136,7 @@ const defaultProps = { isWiki: false, }; -WikiMarkdownViewer.propTypes = propTypes; -MarkdownViewer.defaultProps = defaultProps; +SeafileMarkdownViewer.propTypes = propTypes; +SeafileMarkdownViewer.defaultProps = defaultProps; -export default WikiMarkdownViewer; +export default SeafileMarkdownViewer; diff --git a/frontend/src/components/seafile-markdown-viewer/style.css b/frontend/src/components/seafile-markdown-viewer/style.css new file mode 100644 index 0000000000..7de311b977 --- /dev/null +++ b/frontend/src/components/seafile-markdown-viewer/style.css @@ -0,0 +1,25 @@ +.wiki-page-container .article { + margin: 0; + padding: 0 10px; + max-width: none; + border: none; +} + +.wiki-page-container .article span[data-url] { + cursor: pointer; +} + +.wiki-page-container .article .ml-2 { + text-decoration: underline; +} + +.wiki-page-container .article .ml-2:hover { + text-decoration: underline; + color:#eb8205; +} + +#wiki-page-last-modified { + padding: 40px 10px; + font-size:12px; + color: #666; +} diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js index 143fc29e86..0d2901580f 100644 --- a/frontend/src/components/toolbar/view-file-toolbar.js +++ b/frontend/src/components/toolbar/view-file-toolbar.js @@ -22,7 +22,7 @@ const propTypes = { fileTags: PropTypes.array.isRequired, onFileTagChanged: PropTypes.func.isRequired, showShareBtn: PropTypes.bool.isRequired, - dirent: PropTypes.object.isRequired, + dirent: PropTypes.object, }; class ViewFileToolbar extends React.Component { diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css index 84e2be0aeb..adf9faedf9 100644 --- a/frontend/src/css/layout.css +++ b/frontend/src/css/layout.css @@ -136,10 +136,6 @@ z-index: -1; } -.cur-view-content .article { - padding: 40px; -} - .cur-view-content .hd { padding-bottom: 0; margin-bottom: .5em; diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css index cd9c67e0da..7c89301123 100644 --- a/frontend/src/css/lib-content-view.css +++ b/frontend/src/css/lib-content-view.css @@ -169,21 +169,12 @@ flex: 1; } -/* wiki-page-content */ -.wiki-page-content { +.dir-content-main .wiki-page-content { flex: 1; } -.wiki-page-content .ml-2 { - text-decoration: underline; -} - -.wiki-page-content .ml-2:hover { - text-decoration: underline; - color:#eb8205; -} - -.wiki-page-content .wiki-open-file { +/* wiki-page-content children */ +.dir-content-main .wiki-open-file { width: 40px; height: 40px; font-size: 16px; @@ -199,74 +190,28 @@ cursor: pointer; } -.wiki-page-content .wiki-open-file i { +.dir-content-main .wiki-open-file i { position: absolute; top: 12px; left: 12px; } -.wiki-page-content .wiki-open-file:hover { +.dir-content-main .wiki-open-file:hover { background-color: #f6f6f6; } -.wiki-page-content .sf-slate-viewer-scroll-container { +.dir-content-main .sf-slate-viewer-scroll-container { padding: 0; background-color: #fff; border: none; overflow: inherit; } -.wiki-page-content .sf-slate-viewer-article-container { +.dir-content-main .sf-slate-viewer-article-container { display: block; width: 100%; } -.dir-content-main .wiki-page-content .article { - margin: 0; - padding: 0 10px; - border: none; - max-width: fit-content; -} - -.wiki-page-content a { - cursor: pointer; -} -.wiki-page-ops { - position: fixed; - top: 10px; -} - -@media (min-width: 768px) { - .wiki-page-ops:before { - content:''; - border-left:1px solid #ddd; - position:absolute; - top:3px; - left:-16px; - bottom:3px; - } -} - -.wiki-page-list-item { - word-break:break-all; - line-height:1.6; - margin:3px 0; -} - -.wiki-page-link, -.wiki-page-link:hover { - font-size:1.15em; - font-weight:normal; - color:#444; - margin-left:5px; -} - -#wiki-page-last-modified { - padding: 40px 10px; - font-size:12px; - color: #666; -} - .dir-content-resize { flex: 0 0 .5%; cursor: ew-resize; diff --git a/frontend/src/css/markdown-viewer/history-viewer.css b/frontend/src/css/markdown-viewer/history-viewer.css deleted file mode 100644 index 57ab397dfa..0000000000 --- a/frontend/src/css/markdown-viewer/history-viewer.css +++ /dev/null @@ -1,104 +0,0 @@ -.seafile-history-side-panel { - user-select: none; - background-color: #fff; - display: flex; - flex-direction: column; - flex: 0 0 auto; -} - -.history-side-panel-title { - height: 50px; - border-bottom: 1px solid #e5e5e5; - line-height: 50px; - font-size: 1rem; - padding: 0 10px; - box-sizing: border-box; - background-color: rgb(250,250,249); - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.history-side-panel-title .history-tile-text { - font-weight: bolder; -} - - -.history-side-panel-title .history-title-close { - color: #b9b9b9; -} - -.history-side-panel-title .history-title-close:hover { - color: #888; -} - - -.history-list-container { - height: calc(100% - 36px); - overflow-y: hidden; -} -.history-list-container:hover { - overflow-y: auto; -} - -.item-active { - background-color: #fdc297; -} - -.history-item-container { - padding: 0.5rem .8rem; -} - -.history-item-container:not(.item-active):hover { - background-color: #ffe7d5; -} - -.history-item-container div { - width: 100%; -} - -.history-item-container .owner { - margin-top: 0.2rem; -} - -.history-item-container .owner i { - color: #549b5a; - font-size: 0.2rem; - margin-right: 0.2rem; - vertical-align: middle; -} - -.history-item-container .owner span { - vertical-align: middle; -} - -.diff-container { - flex: 1 1 auto; - overflow: auto; - box-sizing: border-box; -} - -.diff-wrapper { - width: 90%; - border: 1px solid #e5e5e5; - margin: 20px auto; - background-color: #fff; - min-height: calc(100% - 40px); - padding: 70px 75px; -} - -@media (max-width:991.8px) { - .diff-container { - width: 100%; - box-sizing: border-box; - } - .diff-wrapper { - padding: 20px; - } -} -@media (min-width:992px) { - .seafile-history-side-panel { - /* width: 260px; */ - width: 100%; - } -} diff --git a/frontend/src/css/markdown-viewer/markdown-editor.css b/frontend/src/css/markdown-viewer/markdown-editor.css deleted file mode 100644 index 0d19393334..0000000000 --- a/frontend/src/css/markdown-viewer/markdown-editor.css +++ /dev/null @@ -1,182 +0,0 @@ -html, body, #root { - width: 100%; - height: 100%; -} - -#root { - display: flex; - flex-direction: column; - min-height: 0; - min-width: 0; -} - -.seafile-md-viewer { - height: 100%; - flex-direction: row; - position: relative; - float: none; -} -.sf-md-viewer-topbar-first, -.sf-md-viewer-topbar-first-narrow { - padding: 4px 10px; - background-color: #fff; - border-bottom: 1px solid #e5e5e5; - box-shadow: 0 3px 2px -2px rgba(200,200,200,.15); - flex-shrink:0; - align-items: center; -} -.seafile-md-viewer-container { - width: 100%; - background-color: #fafaf9; - height: 100%; - position: relative; - overflow: auto; - display: flex; -} -.seafile-md-viewer-container.side-panel-on { - width: calc(100% - 260px); -} -.seafile-md-viewer-slate { - flex: auto; - position: relative; - margin: 20px 0px 20px 5%; - max-width: calc(90% - 260px); -} -.seafile-md-viewer-main { - flex: auto; - overflow: auto; - background:#fafaf9; - width: 70%; -} -.seafile-md-viewer-slate.side-panel-on { - margin: 20px 5%; -} -/* outline */ -.seafile-md-viewer .seafile-editor-outline { - background-color: #fafaf9; - margin: 40px auto; - padding: 0 0.75rem 0 1.25rem; - border-left: 0; - width: 260px; - position: fixed; - top: 68px; - overflow-y: hidden; - right: 5%; - z-index: 1; - height: 80%; -} -.seafile-md-viewer .seafile-editor-outline:hover { - overflow: auto; -} -.seafile-md-viewer .seafile-editor-outline .active { - color: #eb8205; - border-left: 1px solid #eb8205; -} -.seafile-md-viewer .seafile-editor-outline-heading { - padding: 7px 0; - border-bottom: 1px solid #eee; - color: #a0a0a0; -} -.seafile-editor-outline .outline-h2, .seafile-editor-outline .outline-h3 { - height: 30px; - margin-left: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; -} -.seafile-editor-outline .outline-h2 { - padding-left: 20px; -} -.seafile-editor-outline .outline-h3 { - padding-left: 40px; -} -/* side-panel */ -.seafile-md-viewer-side-panel { - height: 100%; - overflow: hidden; - width: 260px; - position: fixed; - right: 0; - top: 87px; -} -.seafile-md-viewer-side-panel .seafile-history-side-panel { - width: 100%; - height: 100%; -} -.seafile-md-viewer-side-panel .seafile-history-side-panel { - border-left: 1px solid #e6e6dd; -} -@media (max-width:991.8px) { - .seafile-editor-outline { - display: none; - } - .seafile-md-viewer-slate { - width: calc(100% - 80px); - margin: 20px 40px; - max-width: 100%; - } -} - -@media (max-width: 768px) { - .sf-md-viewer-topbar-first { - display: none !important; - } -} -@media (min-width: 768px) { - .sf-md-viewer-topbar-first-narrow { - display: none !important; - } -} - -/* toolbar */ -.topbar-file-info { - display: inline-block; - margin-left: 8px; - /* - only select file info text - */ - user-select: text; -} -.topbar-file-info .file-title { - font-size: 1.2rem; - font-weight: bold; - display: flex; - align-items: center; -} - -.topbar-file-info .file-title .iconfont { - font-size: 0.875rem; -} - -.topbar-file-info .file-title .file-star { - font-size: 0.875rem; - cursor: pointer; - margin-left: 0.5rem; - vertical-align: text-bottom; - color: #999; -} - -.topbar-file-info .file-title .file-star .star { - color: #999; -} - -.topbar-file-info .file-state { - font-size: 0.8125rem; -} - -.topbar-file-info .file-state .file-modifier-name { - margin-right: 0.5rem; -} - -.topbar-file-info .file-state .file-modifier-savedraft { - margin-left: 0.5rem; - color: #888; -} - -.sf-md-viewer-content { - flex: 1; - display: flex; - min-height: 0; - min-width: 0; -} \ No newline at end of file diff --git a/frontend/src/pages/markdown-editor/css/markdown-editor.css b/frontend/src/pages/markdown-editor/css/markdown-editor.css new file mode 100644 index 0000000000..e59f85e318 --- /dev/null +++ b/frontend/src/pages/markdown-editor/css/markdown-editor.css @@ -0,0 +1,84 @@ +html, body, #root { + width: 100%; + height: 100%; +} + +#root { + display: flex; + flex-direction: column; + min-height: 0; + min-width: 0; +} + +.sf-md-viewer-topbar-first, +.sf-md-viewer-topbar-first-narrow { + padding: 4px 10px; + background-color: #fff; + border-bottom: 1px solid #e5e5e5; + box-shadow: 0 3px 2px -2px rgba(200,200,200,.15); + flex-shrink:0; + align-items: center; +} + +@media (max-width: 768px) { + .sf-md-viewer-topbar-first { + display: none !important; + } +} +@media (min-width: 768px) { + .sf-md-viewer-topbar-first-narrow { + display: none !important; + } +} + +/* toolbar */ +.topbar-file-info { + display: inline-block; + margin-left: 8px; + /* + only select file info text + */ + user-select: text; +} +.topbar-file-info .file-title { + font-size: 1.2rem; + font-weight: bold; + display: flex; + align-items: center; +} + +.topbar-file-info .file-title .iconfont { + font-size: 0.875rem; +} + +.topbar-file-info .file-title .file-star { + font-size: 0.875rem; + cursor: pointer; + margin-left: 0.5rem; + vertical-align: text-bottom; + color: #999; +} + +.topbar-file-info .file-title .file-star .star { + color: #999; +} + +.topbar-file-info .file-state { + font-size: 0.8125rem; +} + +.topbar-file-info .file-state .file-modifier-name { + margin-right: 0.5rem; +} + +.topbar-file-info .file-state .file-modifier-savedraft { + margin-left: 0.5rem; + color: #888; +} + +.sf-md-viewer-content { + flex: 1; + display: flex; + min-height: 0; + min-width: 0; +} diff --git a/frontend/src/pages/markdown-editor/css/rich-editor.css b/frontend/src/pages/markdown-editor/css/rich-editor.css deleted file mode 100644 index eef631e802..0000000000 --- a/frontend/src/pages/markdown-editor/css/rich-editor.css +++ /dev/null @@ -1,125 +0,0 @@ -.seafile-markdown-editor { - flex: 1; - display: flex; - flex-direction: column; - min-height: 0; - min-width: 0; -} - -.seafile-markdown-editor .markdown-editor-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - position: relative; - border-bottom: 1px solid #e5e5e5; - background-color: #fff; - user-select: none; - box-shadow: 0 3px 2px -2px rgba(200,200,200,.15); - z-index: 3; -} - -.seafile-markdown-editor .markdown-editor-toolbar .editor-btn-group { - height: 100%; - padding: 5px 0 5px 5px; - font-size: 0.75rem; - border-right: 1px solid #e5e5e5; - color: #555555; -} - -.seafile-markdown-editor .markdown-editor-content { - flex: 1; - display: flex; - min-height: 0; - min-width: 0; - overflow: hidden; -} - -.seafile-markdown-editor .markdown-editor-content .markdown-editor-wrapper { - flex: 1; - display: flex; - position: relative; - overflow-x: hidden; - min-height: 0; - min-width: 0; - background-color: #fafaf9; -} - -.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper { - width: 0; - display: flex; - overflow: hidden; - min-width: 0; - min-height: 0; -} - -.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper.show { - width: 300px; - background-color: #fff; - border-left: 1px solid #e6e6dd; - position: relative; -} - - -.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .file-info { - flex: 1; - display: flex; - min-width: 0; - min-height: 0; -} - -.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .help-info { - flex: 1; - display: flex; - min-width: 0; - min-height: 0; -} - -.seafile-markdown-editor ::-webkit-scrollbar{ - width: 8px; - height: 8px; -} - -.seafile-markdown-editor ::-webkit-scrollbar-button { - display: none; -} - -.seafile-markdown-editor ::-webkit-scrollbar-thumb { - background-color: rgb(206, 206, 212); - border-radius: 10px; -} - -@media (max-width: 991.8px) { - .seafile-editor { - min-width: calc(100% - 40px); - } - - .seafile-editor-main-panel { - width: calc(100% - 200px); - } - - .seafile-editor-side-panel { - min-width: 200px; - } - - .editor-container { - width: 100%; - } - - .editor-container .editor { - margin: 20px !important; - padding: 20px 30px; - } -} - -@media (max-width: 768px) { - .editor-container .editor { - margin: 0 !important; - padding: 10px 15px; - border: 0; - } -} - -.full-screen .editor-container .article { - margin: 20px auto; - max-width: 950px; -} diff --git a/frontend/src/pages/markdown-editor/css/side-panel.css b/frontend/src/pages/markdown-editor/css/side-panel.css deleted file mode 100644 index c8a10022d6..0000000000 --- a/frontend/src/pages/markdown-editor/css/side-panel.css +++ /dev/null @@ -1,89 +0,0 @@ -.seafile-markdown-editor .markdown-help-wrapper .side-panel { - flex: 1; - display: flex; - flex-direction: column; - background-color: #f5f5f5; - user-select: none; -} - -.seafile-markdown-editor .side-panel .nav { - padding: 10px 0; - min-width: 125px; - border-bottom: 1px solid #eee; - height: 36px; - flex-wrap: nowrap; -} - -.seafile-markdown-editor .side-panel .nav .nav-item { - padding: 0 0.75rem; -} - -.seafile-markdown-editor .side-panel .nav .nav-link { - padding: 0 0.75rem; - transition: 0.3s color; - margin-right: 0; -} - -.seafile-markdown-editor .side-panel .nav-link { - color: #888; -} - -.seafile-markdown-editor .side-panel .nav .nav-link.active { - color: #ff9800; - border-bottom: 0; -} - -.seafile-markdown-editor .side-panel .nav .iconfont { - font-weight: 700; - font-size: 0.875rem; -} - -.seafile-markdown-editor .side-panel-content { - font-size: 0.937rem; - overflow: hidden; -} - -.seafile-markdown-editor .side-panel-content:hover { - overflow: auto; -} - -.image-view { - width: 200px; - height: 150px; - position: absolute; - background-color: #fff; - z-index: 1004; - box-shadow: 0 0 10px #aaa; - border-radius: 3px; - line-height: 150px; - overflow: hidden; - font-size: 0; - text-align: center; -} - -.image-view img { - max-width: 100%; - max-height: 100%; -} - -.image-view i { - width: 100%; - height: 100%; - text-align: center; - line-height: 150px; - font-size: 30px; - color: #eb8205; - -moz-animation: rotate 1.5s ease infinite; - -webkit-animation: rotate 1.5s ease infinite; - animation: rotate 1.5s ease infinite; -} - -@keyframes rotate { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js index ef4acb8d0b..ba97c858db 100644 --- a/frontend/src/pages/markdown-editor/index.js +++ b/frontend/src/pages/markdown-editor/index.js @@ -11,7 +11,7 @@ import HeaderToolbar from './header-toolbar'; import editorApi from './editor-api'; import DetailListView from './detail-list-view'; -import '../../css/markdown-viewer/markdown-editor.css'; +import './css/markdown-editor.css'; const CryptoJS = require('crypto-js'); const URL = require('url-parse'); diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js index ef9230b5d7..16ae9822ac 100644 --- a/frontend/src/pages/wiki/main-panel.js +++ b/frontend/src/pages/wiki/main-panel.js @@ -1,7 +1,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { gettext, repoID, siteRoot, username, isPro } from '../../utils/constants'; -import WikiMarkdownViewer from '../../components/wiki-markdown-viewer'; +import SeafileMarkdownViewer from '../../components/seafile-markdown-viewer'; import WikiDirListView from '../../components/wiki-dir-list-view/wiki-dir-list-view'; import Loading from '../../components/loading'; import { Utils } from '../../utils/utils'; @@ -121,14 +121,15 @@ class MainPanel extends Component { {!this.props.pathExist && errMessage} {this.props.pathExist && this.props.isDataLoading && } {isViewingFile && ( - )} {(!this.props.isDataLoading && !this.props.isViewFile) && ( diff --git a/frontend/src/pages/wiki/wiki.css b/frontend/src/pages/wiki/wiki.css index 38df6ec63b..9ebbf73672 100644 --- a/frontend/src/pages/wiki/wiki.css +++ b/frontend/src/pages/wiki/wiki.css @@ -94,28 +94,12 @@ img[src=""] { } } -.wiki-page-container .article { - margin: 0; - padding: 0 10px; -} -.wiki-page-container .article h1 { +/* reset article h1 */ +.wiki-main-panel .article h1 { margin-top: 0; } -.wiki-page-container .article span[data-url] { - cursor: pointer; -} - -.wiki-page-container .article .ml-2 { - text-decoration: underline; -} - -.wiki-page-container .article .ml-2:hover { - text-decoration: underline; - color:#eb8205; -} - .wiki-page-container .outline-h2, .wiki-page-container .outline-h3 { height: 24px; @@ -138,10 +122,6 @@ img[src=""] { margin: 0 !important; } -.wiki-page-container .article { - border: none; -} - .wiki-page-container .sf-slate-viewer-outline { top: 79px; width: 200px; @@ -152,9 +132,3 @@ img[src=""] { padding: 0 !important; } } - -#wiki-page-last-modified { - padding: 40px 10px; - font-size:12px; - color: #666; -}