From ef8d4e1a8869119807f5e983f51d9cd047c845e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= Date: Wed, 7 Aug 2024 14:21:27 +0800 Subject: [PATCH 1/5] fix: set width fail --- frontend/src/components/dirent-detail/detail/detail/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/dirent-detail/detail/detail/index.js b/frontend/src/components/dirent-detail/detail/detail/index.js index 1296a52700b..26db10f3373 100644 --- a/frontend/src/components/dirent-detail/detail/detail/index.js +++ b/frontend/src/components/dirent-detail/detail/detail/index.js @@ -43,7 +43,7 @@ const Detail = ({ children, className }) => { }, [setDragHandlerTop]); useEffect(() => { - const width = localStorage.getItem('sf_cur_view_detail_width', 300); + const width = parseInt(localStorage.getItem('sf_cur_view_detail_width', 300)); setWidth(width); }, []); From a4524a9a1f46826b38fa56827de256c8caf8823d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= Date: Wed, 7 Aug 2024 15:25:41 +0800 Subject: [PATCH 2/5] feat: update code --- .../dirent-details/dir-details.js | 5 +-- .../dirent-details/file-details.js | 4 +-- .../dirent-detail/dirent-details/index.js | 34 +++++++++++-------- .../dirent-detail/dirent-details/utils.js | 12 ++++--- 4 files changed, 28 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/dirent-detail/dirent-details/dir-details.js b/frontend/src/components/dirent-detail/dirent-details/dir-details.js index 7e504de982a..958ba73a449 100644 --- a/frontend/src/components/dirent-detail/dirent-details/dir-details.js +++ b/frontend/src/components/dirent-detail/dirent-details/dir-details.js @@ -1,19 +1,16 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; -import { getDirentPath, getFileParent } from './utils'; +import { getDirentPath } from './utils'; import DetailItem from '../detail-item'; import { CellType } from '../../../metadata/metadata-view/_basic'; import { gettext } from '../../../utils/constants'; import { MetadataDetails } from '../../../metadata'; const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail, ...params }) => { - const parent = useMemo(() => getFileParent(dirent, path), [dirent, path]); const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]); return ( <> - - { const [isEditFileTagShow, setEditFileTagShow] = useState(false); - const parent = useMemo(() => getFileParent(dirent, path), [dirent, path]); const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]); const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []); @@ -28,7 +27,6 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, return ( <> - { + const { dirent } = this.state; if (!dirent) return null; - const { repoID, path, fileTags } = this.props; - const direntName = dirent.name; - const smallIconUrl = Utils.getDirentIcon(dirent); // let bigIconUrl = Utils.getDirentIcon(dirent, true); - let bigIconUrl = ''; const isImg = Utils.imageCheck(dirent.name); // const isVideo = Utils.videoCheck(dirent.name); - if (isImg) { - bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`); - } + if (!isImg) return null; + const { repoID, path } = this.props; + const bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`); + return ( +
+ +
+ ); + }; + + render() { + const { dirent, direntDetail, collaborators, collaboratorsCache } = this.state; + const { repoID, path, fileTags } = this.props; + const direntName = dirent?.name || ''; + const smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : ''; return (
- {isImg && ( -
- -
- )} - {direntDetail && ( + {this.renderImage()} + {dirent && direntDetail && (
{dirent.type !== 'file' ? ( { if (Utils.isMarkdownFile(path)) return path; // column mode: view file - if (dirent.type === 'dir') return path; return Utils.joinPath(path, dirent.name); }; export const getFileParent = (dirent, path) => { const direntPath = getDirentPath(dirent, path); - if (direntPath === '/') return '/'; - const index = direntPath.lastIndexOf('/'); - const positionPath = direntPath.slice(0, index); - return positionPath || '/'; + let position = ''; + if (direntPath !== '/') { + const index = direntPath.lastIndexOf('/'); + const positionPath = direntPath.slice(0, index); + position = position + positionPath; + } + return position; }; From 24037950a651ac6f4d419b264459143d56397081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= Date: Wed, 7 Aug 2024 15:30:14 +0800 Subject: [PATCH 3/5] feat: update code --- frontend/src/components/dirent-detail/dirent-details/index.js | 2 +- frontend/src/utils/utils.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js index 39b28fa291f..ed77891723e 100644 --- a/frontend/src/components/dirent-detail/dirent-details/index.js +++ b/frontend/src/components/dirent-detail/dirent-details/index.js @@ -111,7 +111,7 @@ class DirentDetails extends React.Component { const { dirent, direntDetail, collaborators, collaboratorsCache } = this.state; const { repoID, path, fileTags } = this.props; const direntName = dirent?.name || ''; - const smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : ''; + const smallIconUrl = Utils.getDirentIcon(dirent); return ( diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js index bbd5951ab00..9abb6dd03fb 100644 --- a/frontend/src/utils/utils.js +++ b/frontend/src/utils/utils.js @@ -391,6 +391,7 @@ export const Utils = { }, getDirentIcon: function (dirent, isBig) { + if (!dirent) return mediaUrl + 'img/file/256/' + this.FILEEXT_ICON_MAP['default']; let size = this.isHiDPI() ? 48 : 24; size = isBig ? 192 : size; if (dirent.isDir()) { From 46a3cae2029690428eb5f9ae45defc1148bfad85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= Date: Thu, 8 Aug 2024 14:01:39 +0800 Subject: [PATCH 4/5] feat: update code --- .../components/dirent-detail/detail-item/index.css | 8 +++++++- .../dirent-detail/detail/detail/index.css | 13 ------------- .../components/dirent-detail/detail/detail/index.js | 3 ++- .../dirent-detail/dirent-details/dir-details.js | 6 ------ .../pages/lib-content-view/lib-content-container.js | 2 -- 5 files changed, 9 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/dirent-detail/detail-item/index.css b/frontend/src/components/dirent-detail/detail-item/index.css index 4b27fec7816..2a1153ab9ea 100644 --- a/frontend/src/components/dirent-detail/detail-item/index.css +++ b/frontend/src/components/dirent-detail/detail-item/index.css @@ -42,10 +42,16 @@ } .dirent-detail-item .dirent-detail-item-value .text-formatter, -.dirent-detail-item .dirent-detail-item-value .ctime-formatter { +.dirent-detail-item .dirent-detail-item-value .ctime-formatter, +.dirent-detail-item .dirent-detail-item-value .mtime-formatter, +.dirent-detail-item .dirent-detail-item-value .date-formatter { line-height: 1.5; } +.dirent-detail-item .dirent-detail-item-value .date-formatter { + text-align: left; +} + .dirent-detail-item-value .creator-formatter { height: 20px; } diff --git a/frontend/src/components/dirent-detail/detail/detail/index.css b/frontend/src/components/dirent-detail/detail/detail/index.css index dac65a7d7e6..fa75f4cf155 100644 --- a/frontend/src/components/dirent-detail/detail/detail/index.css +++ b/frontend/src/components/dirent-detail/detail/detail/index.css @@ -1,21 +1,8 @@ -@keyframes move { - from { - right: -500px; - opacity: 0.5; - } - to { - right: 0px; - opacity: 1; - } -} - .cur-view-detail { display: flex; flex-direction: column; background-color: #fff; - width: 400px; height: 100%; border-left: 1px solid #eee; - animation: move .5s ease-in-out 1; position: relative; } diff --git a/frontend/src/components/dirent-detail/detail/detail/index.js b/frontend/src/components/dirent-detail/detail/detail/index.js index 26db10f3373..18afeb695e2 100644 --- a/frontend/src/components/dirent-detail/detail/detail/index.js +++ b/frontend/src/components/dirent-detail/detail/detail/index.js @@ -43,7 +43,8 @@ const Detail = ({ children, className }) => { }, [setDragHandlerTop]); useEffect(() => { - const width = parseInt(localStorage.getItem('sf_cur_view_detail_width', 300)); + const lastSettingsValue = localStorage.getItem('sf_cur_view_detail_width'); + const width = lastSettingsValue ? parseInt(lastSettingsValue) : 300; setWidth(width); }, []); diff --git a/frontend/src/components/dirent-detail/dirent-details/dir-details.js b/frontend/src/components/dirent-detail/dirent-details/dir-details.js index 958ba73a449..04cabcf1fef 100644 --- a/frontend/src/components/dirent-detail/dirent-details/dir-details.js +++ b/frontend/src/components/dirent-detail/dirent-details/dir-details.js @@ -11,12 +11,6 @@ const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail, ...params }) return ( <> - {window.app.pageOptions.enableMetadataManagement && ( diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 8f4d2b067df..64db676811b 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -120,12 +120,10 @@ class LibContentContainer extends React.Component { onPathClick = (path) => { this.props.onMainNavBarClick(path); - this.props.closeDirentDetail(); }; onItemClick = (dirent) => { this.props.onItemClick(dirent); - this.props.closeDirentDetail(); }; onDirentClick = (dirent, event) => { From e63672878e1f95fbd4b0adfb0b50feff6d48ce6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= Date: Thu, 8 Aug 2024 14:39:44 +0800 Subject: [PATCH 5/5] feat: update code --- .../src/components/dir-view-mode/dir-views.js | 38 +++----------- .../dirent-detail/detail-item/index.css | 4 ++ .../dirent-details/dir-details.js | 5 +- .../dirent-details/file-details.js | 5 +- frontend/src/metadata/hooks/index.js | 1 + .../src/metadata/hooks/metadata-status.js | 50 +++++++++++++++++++ frontend/src/metadata/index.js | 4 ++ .../lib-content-view/lib-content-container.js | 8 +-- 8 files changed, 76 insertions(+), 39 deletions(-) create mode 100644 frontend/src/metadata/hooks/index.js create mode 100644 frontend/src/metadata/hooks/metadata-status.js diff --git a/frontend/src/components/dir-view-mode/dir-views.js b/frontend/src/components/dir-view-mode/dir-views.js index 725299adc42..c09ac8ea5f9 100644 --- a/frontend/src/components/dir-view-mode/dir-views.js +++ b/frontend/src/components/dir-view-mode/dir-views.js @@ -1,11 +1,8 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, 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 { MetadataStatusManagementDialog, MetadataTreeView, useMetadataStatus } from '../../metadata'; const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { const enableMetadataManagement = useMemo(() => { @@ -13,9 +10,8 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [window.app.pageOptions.enableMetadataManagement]); - const [loading, setLoading] = useState(true); const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false); - const [metadataStatus, setMetadataStatus] = useState(false); + const { enableExtendedProperties, updateEnableExtendedProperties } = useMetadataStatus(); const moreOperations = useMemo(() => { if (!enableMetadataManagement) return []; if (userPerm !== 'rw' && userPerm !== 'admin') return []; @@ -24,25 +20,6 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { ]; }, [enableMetadataManagement, userPerm]); - useEffect(() => { - if (!enableMetadataManagement) { - setLoading(false); - return; - } - - const repoMetadataManagementEnabledStatusRes = metadataAPI.getMetadataStatus(repoID); - Promise.all([repoMetadataManagementEnabledStatusRes]).then(results => { - const [repoMetadataManagementEnabledStatusRes] = results; - setMetadataStatus(repoMetadataManagementEnabledStatusRes.data.enabled); - setLoading(false); - }).catch(error => { - const errorMsg = Utils.getErrorMsg(error, true); - toaster.danger(errorMsg); - setLoading(false); - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const moreOperationClick = useCallback((operationKey) => { if (operationKey === 'extended-properties') { setShowMetadataStatusManagementDialog(true); @@ -55,9 +32,8 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { }, []); const toggleMetadataStatus = useCallback((value) => { - if (metadataStatus === value) return; - setMetadataStatus(value); - }, [metadataStatus]); + updateEnableExtendedProperties(value); + }, [updateEnableExtendedProperties]); return ( <> @@ -67,11 +43,11 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => { moreOperations={moreOperations} moreOperationClick={moreOperationClick} > - {!loading && metadataStatus && ()} + {enableExtendedProperties && ()} {showMetadataStatusManagementDialog && ( { const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]); + const { enableExtendedProperties } = useMetadataStatus(); return ( <> - {window.app.pageOptions.enableMetadataManagement && ( + {window.app.pageOptions.enableMetadataManagement && enableExtendedProperties && ( )} diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details.js b/frontend/src/components/dirent-detail/dirent-details/file-details.js index 36d434d71ce..a9d72250e57 100644 --- a/frontend/src/components/dirent-detail/dirent-details/file-details.js +++ b/frontend/src/components/dirent-detail/dirent-details/file-details.js @@ -8,11 +8,12 @@ import { gettext } from '../../../utils/constants'; import EditFileTagPopover from '../../popover/edit-filetag-popover'; import FileTagList from '../../file-tag-list'; import { Utils } from '../../../utils/utils'; -import { MetadataDetails } from '../../../metadata'; +import { MetadataDetails, useMetadataStatus } from '../../../metadata'; import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils'; const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList, ...params }) => { const [isEditFileTagShow, setEditFileTagShow] = useState(false); + const { enableExtendedProperties } = useMetadataStatus(); const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]); const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []); @@ -35,7 +36,7 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, avatar_url: direntDetail.last_modifier_avatar, }]} /> - {!window.app.pageOptions.enableMetadataManagement && ( + {!window.app.pageOptions.enableMetadataManagement && enableExtendedProperties && ( {Array.isArray(fileTagList) && fileTagList.length > 0 ? ( diff --git a/frontend/src/metadata/hooks/index.js b/frontend/src/metadata/hooks/index.js new file mode 100644 index 00000000000..68b307d5488 --- /dev/null +++ b/frontend/src/metadata/hooks/index.js @@ -0,0 +1 @@ +export { MetadataStatusProvider, useMetadataStatus } from './metadata-status'; diff --git a/frontend/src/metadata/hooks/metadata-status.js b/frontend/src/metadata/hooks/metadata-status.js new file mode 100644 index 00000000000..9a6b946b14d --- /dev/null +++ b/frontend/src/metadata/hooks/metadata-status.js @@ -0,0 +1,50 @@ +import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import metadataAPI from '../api'; +import { Utils } from '../../utils/utils'; +import toaster from '../../components/toast'; + +const MetadataStatusContext = React.createContext(null); + +export const MetadataStatusProvider = ({ repoID, children }) => { + const enableMetadataManagement = useMemo(() => { + return window.app.pageOptions.enableMetadataManagement; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [window.app.pageOptions.enableMetadataManagement]); + + + const [enableExtendedProperties, setEnableExtendedProperties] = useState(false); + + useEffect(() => { + if (!enableMetadataManagement) { + setEnableExtendedProperties(false); + return; + } + metadataAPI.getMetadataStatus(repoID).then(res => { + setEnableExtendedProperties(res.data.enabled); + }).catch(error => { + const errorMsg = Utils.getErrorMsg(error, true); + toaster.danger(errorMsg); + setEnableExtendedProperties(false); + }); + }, [repoID, enableMetadataManagement]); + + const updateEnableExtendedProperties = useCallback((newValue) => { + if (newValue === enableExtendedProperties) return; + setEnableExtendedProperties(newValue); + }, [enableExtendedProperties]); + + return ( + + {children} + + ); +}; + +export const useMetadataStatus = () => { + const context = useContext(MetadataStatusContext); + if (!context) { + throw new Error('\'MetadataStatusContext\' is null'); + } + const { enableExtendedProperties, updateEnableExtendedProperties } = context; + return { enableExtendedProperties, updateEnableExtendedProperties }; +}; diff --git a/frontend/src/metadata/index.js b/frontend/src/metadata/index.js index dc4945471d0..4ad4264f278 100644 --- a/frontend/src/metadata/index.js +++ b/frontend/src/metadata/index.js @@ -2,8 +2,12 @@ import SeafileMetadata from './metadata-view'; import MetadataStatusManagementDialog from './metadata-status-manage-dialog'; import MetadataTreeView from './metadata-tree-view'; import MetadataDetails from './metadata-details'; +import metadataAPI from './api'; + +export * from './hooks'; export { + metadataAPI, SeafileMetadata, MetadataStatusManagementDialog, MetadataTreeView, diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 64db676811b..27f8dbc2781 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -1,10 +1,11 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { gettext } from '../../utils/constants'; import CurDirPath from '../../components/cur-dir-path'; import Detail from '../../components/dirent-detail'; import DirColumnView from '../../components/dir-view-mode/dir-column-view'; import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents-toolbar'; +import { MetadataStatusProvider } from '../../metadata/hooks'; import '../../css/lib-content-view.css'; @@ -179,7 +180,7 @@ class LibContentContainer extends React.Component { } return ( - +
{this.props.currentRepoInfo.status === 'read-only' &&
@@ -251,7 +252,6 @@ class LibContentContainer extends React.Component {
{!this.props.pathExist && this.errMessage} {this.props.pathExist && ( @@ -333,7 +333,7 @@ class LibContentContainer extends React.Component { )}
- + ); } }