From cb2b35b2a28fbaab12bac0e607854dd85383293a Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Mon, 8 Jul 2024 17:43:29 +0800 Subject: [PATCH] Add nav others --- .../src/components/cur-dir-path/dir-tool.js | 30 ++--------- .../dir-view-mode/dir-column-nav.css | 20 +++++++ .../dir-view-mode/dir-column-nav.js | 15 +++++- .../components/dir-view-mode/dir-others.js | 52 +++++++++++++++++++ .../{dir-views/index.js => dir-views.js} | 28 ++++++---- .../dir-view-mode/dir-views/index.css | 7 --- frontend/src/components/tree-section/index.js | 13 +++-- frontend/src/pages/wiki2/main-panel.js | 2 - 8 files changed, 119 insertions(+), 48 deletions(-) create mode 100644 frontend/src/components/dir-view-mode/dir-column-nav.css create mode 100644 frontend/src/components/dir-view-mode/dir-others.js rename frontend/src/components/dir-view-mode/{dir-views/index.js => dir-views.js} (80%) delete mode 100644 frontend/src/components/dir-view-mode/dir-views/index.css diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js index 8ad67eae2a0..c67e798c6ac 100644 --- a/frontend/src/components/cur-dir-path/dir-tool.js +++ b/frontend/src/components/cur-dir-path/dir-tool.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; -import { gettext, siteRoot } from '../../utils/constants'; +import { gettext } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import TextTranslation from '../../utils/text-translation'; import SeahubPopover from '../common/seahub-popover'; @@ -52,41 +52,21 @@ class DirTool extends React.Component { getMenu = () => { const list = []; - const { repoID, userPerm, currentPath } = this.props; - const { TAGS, TRASH, HISTORY } = TextTranslation; - if (userPerm !== 'rw') { + const { userPerm, currentPath } = this.props; + if (userPerm !== 'rw' || Utils.isMarkdownFile(currentPath)) { return list; } - if (Utils.isMarkdownFile(currentPath)) { - return list; - } - + const { TAGS } = TextTranslation; list.push(TAGS); - - if (Utils.getFileName(currentPath)) { - let trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath); - list.push({...TRASH, href: trashUrl}); - } else { - let trashUrl = siteRoot + 'repo/' + repoID + '/trash/'; - list.push({...TRASH, href: trashUrl}); - let historyUrl = siteRoot + 'repo/history/' + repoID + '/'; - list.push({...HISTORY, href: historyUrl}); - } return list; }; onMenuItemClick = (item) => { - const { key, href } = item; + const { key } = item; switch (key) { case 'Tags': this.setState({isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen}); break; - case 'Trash': - location.href = href; - break; - case 'History': - location.href = href; - break; } }; diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.css b/frontend/src/components/dir-view-mode/dir-column-nav.css new file mode 100644 index 00000000000..c7c0abb893a --- /dev/null +++ b/frontend/src/components/dir-view-mode/dir-column-nav.css @@ -0,0 +1,20 @@ +.dir-content-nav .tree-section:first-child { + margin-top: 12px; +} + +.dir-content-nav .tree-section:last-child { + margin-bottom: 28px; +} + +.dir-others .tree-node-inner:hover { + background-color: #f0f0f0; + border-radius: 0.25rem; +} + +.dir-others .tree-node-inner .tree-node-text { + padding-left: 2rem; +} + +.dir-others .tree-node-inner .left-icon { + padding-left: 10px; +} diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js index c5193b6909d..83a28b69484 100644 --- a/frontend/src/components/dir-view-mode/dir-column-nav.js +++ b/frontend/src/components/dir-view-mode/dir-column-nav.js @@ -14,6 +14,9 @@ import { gettext } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import TreeSection from '../../components/tree-section'; import DirViews from './dir-views'; +import DirOthers from './dir-others'; + +import './dir-column-nav.css'; const propTypes = { currentPath: PropTypes.string.isRequired, @@ -268,7 +271,17 @@ class DirColumnNav extends React.Component { repoID={this.props.repoID} /> - + + ); }; diff --git a/frontend/src/components/dir-view-mode/dir-others.js b/frontend/src/components/dir-view-mode/dir-others.js new file mode 100644 index 00000000000..7e5b1759e1c --- /dev/null +++ b/frontend/src/components/dir-view-mode/dir-others.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { gettext, siteRoot } from '../../utils/constants'; +import { Utils } from '../../utils/utils'; +import TreeSection from '../tree-section'; + +const DirOthers = ({ userPerm, repoID, currentPath }) => { + + let trashUrl = null; + let historyUrl = null; + if (userPerm === 'rw' && !Utils.isMarkdownFile(currentPath)) { + if (Utils.getFileName(currentPath)) { + trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath); + } else { + trashUrl = siteRoot + 'repo/' + repoID + '/trash/'; + historyUrl = siteRoot + 'repo/history/' + repoID + '/'; + } + } + + return ( + + {trashUrl && +
location.href = trashUrl}> +
{gettext('Trash')}
+
+
+ +
+
+
+ } + {historyUrl && +
location.href = historyUrl}> +
{gettext('History')}
+
+
+ +
+
+
+ } + + ); +}; + +DirOthers.propTypes = { + userPerm: PropTypes.string, + repoID: PropTypes.string, + currentPath: PropTypes.string, +}; + +export default DirOthers; diff --git a/frontend/src/components/dir-view-mode/dir-views/index.js b/frontend/src/components/dir-view-mode/dir-views.js similarity index 80% rename from frontend/src/components/dir-view-mode/dir-views/index.js rename to frontend/src/components/dir-view-mode/dir-views.js index f2e7b8a5b97..567ff35df2e 100644 --- a/frontend/src/components/dir-view-mode/dir-views/index.js +++ b/frontend/src/components/dir-view-mode/dir-views.js @@ -1,13 +1,11 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { gettext } from '../../../utils/constants'; -import { Utils } from '../../../utils/utils'; -import TreeSection from '../../tree-section'; -import { MetadataStatusManagementDialog, MetadataTreeView } from '../../../metadata'; -import metadataAPI from '../../../metadata/api'; -import toaster from '../../toast'; - -import './index.css'; +import { gettext } from '../../utils/constants'; +import { Utils } from '../../utils/utils'; +import TreeSection from '../tree-section'; +import { MetadataStatusManagementDialog, MetadataTreeView } from '../../metadata'; +import metadataAPI from '../../metadata/api'; +import toaster from '../toast'; const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { const enableMetadataManagement = useMemo(() => { @@ -63,11 +61,21 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { return ( <> - + {!loading && metadataStatus && ()} {showMetadataStatusManagementDialog && ( - + )} ); diff --git a/frontend/src/components/dir-view-mode/dir-views/index.css b/frontend/src/components/dir-view-mode/dir-views/index.css deleted file mode 100644 index 2ebb4ec5dfc..00000000000 --- a/frontend/src/components/dir-view-mode/dir-views/index.css +++ /dev/null @@ -1,7 +0,0 @@ -.dir-content-nav .tree-section:first-child { - margin-top: 12px; -} - -.dir-content-nav .tree-section:last-child { - margin-bottom: 28px; -} diff --git a/frontend/src/components/tree-section/index.js b/frontend/src/components/tree-section/index.js index 24f0d077e47..46c85e463c2 100644 --- a/frontend/src/components/tree-section/index.js +++ b/frontend/src/components/tree-section/index.js @@ -1,10 +1,11 @@ import React, { useCallback, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; +import classnames from 'classnames'; import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu'; import './index.css'; -const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationClick }) => { +const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationClick, className }) => { const [showChildren, setShowChildren] = useState(true); const [highlight, setHighlight] = useState(false); const [freeze, setFreeze] = useState(false); @@ -43,8 +44,13 @@ const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationCl }, []); return ( -
-
+
+
{title}
{validMoreOperations.length > 0 && ( @@ -81,6 +87,7 @@ TreeSection.propTypes = { children: PropTypes.any, moreKey: PropTypes.object, moreOperationClick: PropTypes.func, + className: PropTypes.string, }; export default TreeSection; diff --git a/frontend/src/pages/wiki2/main-panel.js b/frontend/src/pages/wiki2/main-panel.js index d357e8f09d2..f38f40c675d 100644 --- a/frontend/src/pages/wiki2/main-panel.js +++ b/frontend/src/pages/wiki2/main-panel.js @@ -55,8 +55,6 @@ class MainPanel extends Component { return { ...props, docUuid: window.seafile.docUuid, currentPageConfig }; } - - render() { const { permission, pathExist, isDataLoading, isViewFile, config, onUpdatePage } = this.props; const { currentPageConfig = {}, } = this.state;