From 3e768ba50a50e5a1486e24f695c6e5fd3d71c72a Mon Sep 17 00:00:00 2001 From: zhouwenxuan Date: Mon, 16 Dec 2024 11:01:21 +0800 Subject: [PATCH] record the status of detail to local storage --- .../src/components/cur-dir-path/dir-tool.js | 14 +++------- .../src/components/dir-view-mode/constants.js | 1 - .../dir-view-mode/dir-column-view.js | 3 --- .../src/components/dirent-detail/index.js | 6 ++++- .../toolbar/selected-dirents-toolbar.js | 1 - .../metadata/components/view-details/index.js | 6 +++-- .../view-toolbar/face-recognition/index.js | 6 ++--- .../gallery-view-toolbar/index.js | 6 ++--- .../metadata/components/view-toolbar/index.js | 12 ++++----- .../view-toolbar/kanban-view-toolbar/index.js | 12 ++++----- frontend/src/metadata/constants/view.js | 2 ++ frontend/src/metadata/hooks/metadata-view.js | 1 - .../views/face-recognition/peoples/index.js | 8 +----- .../lib-content-view/lib-content-view.js | 26 ++++++++++--------- frontend/src/tag/hooks/tag-view.js | 1 - frontend/src/tag/hooks/tags.js | 1 - 16 files changed, 47 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js index 7d71343c8ca..1a8517fbbf1 100644 --- a/frontend/src/components/cur-dir-path/dir-tool.js +++ b/frontend/src/components/cur-dir-path/dir-tool.js @@ -10,7 +10,6 @@ import ViewModes from '../../components/view-modes'; import SortMenu from '../../components/sort-menu'; import MetadataViewToolBar from '../../metadata/components/view-toolbar'; import { PRIVATE_FILE_TYPE } from '../../constants'; -import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants'; const propTypes = { repoID: PropTypes.string.isRequired, @@ -25,7 +24,7 @@ const propTypes = { sortOrder: PropTypes.string, sortItems: PropTypes.func, viewId: PropTypes.string, - onCloseDetail: PropTypes.func, + onToggleDetail: PropTypes.func, }; class DirTool extends React.Component { @@ -92,14 +91,10 @@ class DirTool extends React.Component { this.props.sortItems(sortBy, sortOrder); }; - showDirentDetail = () => { - this.props.switchViewMode(DIRENT_DETAIL_MODE); - }; - render() { const menuItems = this.getMenu(); const { isDropdownMenuOpen } = this.state; - const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props; + const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail } = this.props; const propertiesText = TextTranslation.PROPERTIES.value; const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/'); const isTagView = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/'); @@ -110,8 +105,7 @@ class DirTool extends React.Component { ); @@ -130,7 +124,7 @@ class DirTool extends React.Component { {(!isCustomPermission) && -
+
} diff --git a/frontend/src/components/dir-view-mode/constants.js b/frontend/src/components/dir-view-mode/constants.js index 88f82f3e440..af4115416ff 100644 --- a/frontend/src/components/dir-view-mode/constants.js +++ b/frontend/src/components/dir-view-mode/constants.js @@ -1,5 +1,4 @@ export const LIST_MODE = 'list'; export const GRID_MODE = 'grid'; -export const DIRENT_DETAIL_MODE = 'detail'; export const METADATA_MODE = 'metadata'; export const TAGS_MODE = 'tags'; diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js index c98dc1f6ba0..f52adf183e1 100644 --- a/frontend/src/components/dir-view-mode/dir-column-view.js +++ b/frontend/src/components/dir-view-mode/dir-column-view.js @@ -81,7 +81,6 @@ const propTypes = { onItemsScroll: PropTypes.func.isRequired, eventBus: PropTypes.object, updateCurrentDirent: PropTypes.func.isRequired, - closeDirentDetail: PropTypes.func.isRequired, }; class DirColumnView extends React.Component { @@ -206,7 +205,6 @@ class DirColumnView extends React.Component { deleteFilesCallback={this.props.deleteFilesCallback} renameFileCallback={this.props.renameFileCallback} updateCurrentDirent={this.props.updateCurrentDirent} - closeDirentDetail={this.props.closeDirentDetail} showDirentDetail={this.props.showDirentDetail} /> )} @@ -219,7 +217,6 @@ class DirColumnView extends React.Component { deleteFilesCallback={this.props.deleteFilesCallback} renameFileCallback={this.props.renameFileCallback} updateCurrentDirent={this.props.updateCurrentDirent} - closeDirentDetail={this.props.closeDirentDetail} /> )} {currentMode === LIST_MODE && diff --git a/frontend/src/components/dirent-detail/index.js b/frontend/src/components/dirent-detail/index.js index 838de2f95ed..76f41530b1a 100644 --- a/frontend/src/components/dirent-detail/index.js +++ b/frontend/src/components/dirent-detail/index.js @@ -6,8 +6,9 @@ import ViewDetails from '../../metadata/components/view-details'; import ObjectUtils from '../../metadata/utils/object-utils'; import { MetadataContext } from '../../metadata'; import { PRIVATE_FILE_TYPE } from '../../constants'; +import { TAGS_MODE } from '../dir-view-mode/constants'; -const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => { +const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged, currentMode }) => { const isView = useMemo(() => path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [path]); useEffect(() => { @@ -34,6 +35,8 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi return (); } + if (currentMode === TAGS_MODE) return null; + return ( { const view = useMemo(() => viewsMap[viewId], [viewId, viewsMap]); const icon = useMemo(() => { - const type = view.type; + const type = view?.type; if (type === VIEW_TYPE.GALLERY) return `${mediaUrl}favicons/gallery.png`; if (type === VIEW_TYPE.TABLE) return `${mediaUrl}favicons/table.png`; if (type === VIEW_TYPE.FACE_RECOGNITION) return `${mediaUrl}favicons/face-recognition-view.png`; @@ -21,6 +21,8 @@ const ViewDetails = ({ viewId, onClose }) => { return `${mediaUrl}img/file/256/file.png`; }, [view]); + if (!view || !VIEW_TYPES_SUPPORT_SHOW_DETAIL.includes(view.type)) return null; + return (
diff --git a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js index d5ee4086914..234fc4f8f67 100644 --- a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js +++ b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js @@ -4,7 +4,7 @@ import { GalleryGroupBySetter, GallerySliderSetter, SortSetter } from '../../dat import { gettext } from '../../../../utils/constants'; import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID, VIEW_TYPE } from '../../../constants'; -const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }) => { +const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, onToggleDetail }) => { const [isShow, setShow] = useState(false); const [view, setView] = useState({}); @@ -53,7 +53,7 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail } modifySorts={modifySorts} /> {!isCustomPermission && ( -
+
)} @@ -66,7 +66,7 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail } FaceRecognitionViewToolbar.propTypes = { isCustomPermission: PropTypes.bool, readOnly: PropTypes.bool, - showDetail: PropTypes.func, + onToggleDetail: PropTypes.func, }; export default FaceRecognitionViewToolbar; diff --git a/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js index 79328d8634b..79f6d718203 100644 --- a/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js +++ b/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js @@ -6,7 +6,7 @@ import { gettext } from '../../../../utils/constants'; const GalleryViewToolbar = ({ readOnly, isCustomPermission, view, collaborators, - modifyFilters, modifySorts, showDetail, + modifyFilters, modifySorts, onToggleDetail, }) => { const viewType = useMemo(() => view.type, [view]); const viewColumns = useMemo(() => { @@ -48,7 +48,7 @@ const GalleryViewToolbar = ({ modifySorts={modifySorts} /> {!isCustomPermission && ( -
+
)} @@ -65,7 +65,7 @@ GalleryViewToolbar.propTypes = { collaborators: PropTypes.array, modifyFilters: PropTypes.func, modifySorts: PropTypes.func, - showDetail: PropTypes.func, + onToggleDetail: PropTypes.func, }; export default GalleryViewToolbar; diff --git a/frontend/src/metadata/components/view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/index.js index f890f9b0744..7745e65bf9d 100644 --- a/frontend/src/metadata/components/view-toolbar/index.js +++ b/frontend/src/metadata/components/view-toolbar/index.js @@ -9,7 +9,7 @@ import MapViewToolBar from './map-view-toolbar'; import './index.css'; -const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => { +const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => { const [view, setView] = useState(null); const [collaborators, setCollaborators] = useState([]); @@ -89,14 +89,14 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => collaborators={collaborators} modifyFilters={modifyFilters} modifySorts={modifySorts} - showDetail={showDetail} + onToggleDetail={onToggleDetail} /> )} {viewType === VIEW_TYPE.FACE_RECOGNITION && ( )} {viewType === VIEW_TYPE.KANBAN && ( @@ -107,8 +107,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => collaborators={collaborators} modifyFilters={modifyFilters} modifySorts={modifySorts} - showDetail={showDetail} - closeDetail={closeDetail} + onToggleDetail={onToggleDetail} /> )} {viewType === VIEW_TYPE.MAP && ( @@ -126,8 +125,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => ViewToolBar.propTypes = { viewId: PropTypes.string, isCustomPermission: PropTypes.bool, - showDetail: PropTypes.func, - closeDetail: PropTypes.func, + onToggleDetail: PropTypes.func, }; export default ViewToolBar; diff --git a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js index 9835eb6575a..c917479070f 100644 --- a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js +++ b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js @@ -12,8 +12,7 @@ const KanbanViewToolBar = ({ collaborators, modifyFilters, modifySorts, - showDetail, - closeDetail, + onToggleDetail, }) => { const viewType = useMemo(() => view.type, [view]); const viewColumns = useMemo(() => { @@ -26,14 +25,14 @@ const KanbanViewToolBar = ({ }, [viewColumns]); const onToggleKanbanSetting = () => { - closeDetail(); + onToggleDetail(); window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS); }; const toggleDetails = useCallback(() => { window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.CLOSE_KANBAN_SETTINGS); - showDetail(); - }, [showDetail]); + onToggleDetail(); + }, [onToggleDetail]); return ( <> @@ -88,7 +87,8 @@ KanbanViewToolBar.propTypes = { view: PropTypes.object, collaborators: PropTypes.array, modifyFilters: PropTypes.func, - modifySorts: PropTypes.func + modifySorts: PropTypes.func, + onToggleDetail: PropTypes.func, }; export default KanbanViewToolBar; diff --git a/frontend/src/metadata/constants/view.js b/frontend/src/metadata/constants/view.js index 84dc83d7d64..b46e63e3598 100644 --- a/frontend/src/metadata/constants/view.js +++ b/frontend/src/metadata/constants/view.js @@ -113,3 +113,5 @@ export const VIEW_DEFAULT_SETTINGS = { [KANBAN_SETTINGS_KEYS.COLUMNS]: [], } }; + +export const VIEW_TYPES_SUPPORT_SHOW_DETAIL = [VIEW_TYPE.GALLERY, VIEW_TYPE.KANBAN]; diff --git a/frontend/src/metadata/hooks/metadata-view.js b/frontend/src/metadata/hooks/metadata-view.js index cd9143b2d45..7773f1d0cdc 100644 --- a/frontend/src/metadata/hooks/metadata-view.js +++ b/frontend/src/metadata/hooks/metadata-view.js @@ -140,7 +140,6 @@ export const MetadataViewProvider = ({ deleteFilesCallback: params.deleteFilesCallback, renameFileCallback: params.renameFileCallback, updateCurrentDirent: params.updateCurrentDirent, - closeDirentDetail: params.closeDirentDetail, showDirentDetail: params.showDirentDetail, }} > diff --git a/frontend/src/metadata/views/face-recognition/peoples/index.js b/frontend/src/metadata/views/face-recognition/peoples/index.js index 17c06de0638..5cd4d7d72ff 100644 --- a/frontend/src/metadata/views/face-recognition/peoples/index.js +++ b/frontend/src/metadata/views/face-recognition/peoples/index.js @@ -17,7 +17,7 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => { const containerRef = useRef(null); - const { metadata, store, closeDirentDetail } = useMetadataView(); + const { metadata, store } = useMetadataView(); const loadMore = useCallback(async () => { if (isLoadingMore) return; @@ -63,12 +63,6 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => { return () => {}; }, []); - useEffect(() => { - closeDirentDetail(); - return () => {}; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - if (!Array.isArray(peoples) || peoples.length === 0) return (); return ( diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 7b8b9994bf1..40de67c9397 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -25,7 +25,7 @@ import { PRIVATE_FILE_TYPE } from '../../constants'; import { MetadataStatusProvider } from '../../hooks'; import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks'; import { TagsProvider } from '../../tag/hooks'; -import { LIST_MODE, METADATA_MODE, DIRENT_DETAIL_MODE, TAGS_MODE } from '../../components/dir-view-mode/constants'; +import { LIST_MODE, METADATA_MODE, TAGS_MODE } from '../../components/dir-view-mode/constants'; import CurDirPath from '../../components/cur-dir-path'; import DirTool from '../../components/cur-dir-path/dir-tool'; import Detail from '../../components/dirent-detail'; @@ -55,6 +55,10 @@ class LibContentView extends React.Component { if (storedTreePanelState != undefined) { isTreePanelShown = storedTreePanelState == 'true'; } + + const storedDirentDetailShowState = localStorage.getItem('dirent_detail_show'); + const isDirentDetailShow = storedDirentDetailShowState == 'true'; + this.state = { currentMode: cookie.load('seafile_view_mode') || LIST_MODE, isTreePanelShown: isTreePanelShown, // display the 'dirent tree' side panel @@ -88,7 +92,7 @@ class LibContentView extends React.Component { isAllDirentSelected: false, dirID: '', // for update dir list errorMsg: '', - isDirentDetailShow: false, + isDirentDetailShow: isDirentDetailShow, itemsShowLength: 100, isSessionExpired: false, isCopyMoveProgressDialogShow: false, @@ -134,14 +138,18 @@ class LibContentView extends React.Component { showDirentDetail = () => { this.setState({ isDirentDetailShow: true }); + localStorage.setItem('dirent_detail_show', 'true'); }; toggleDirentDetail = () => { - this.setState({ isDirentDetailShow: !this.state.isDirentDetailShow }); + const newState = !this.state.isDirentDetailShow; + this.setState({ isDirentDetailShow: newState }); + localStorage.setItem('dirent_detail_show', newState); }; closeDirentDetail = () => { this.setState({ isDirentDetailShow: false }); + localStorage.setItem('dirent_detail_show', 'false'); }; componentDidMount() { @@ -508,7 +516,6 @@ class LibContentView extends React.Component { currentMode: METADATA_MODE, path: filePath, viewId: viewId, - isDirentDetailShow: viewType === VIEW_TYPE.GALLERY ? this.state.isDirentDetailShow : false, }); const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`; window.history.pushState({ url: url, path: '' }, '', url); @@ -532,7 +539,6 @@ class LibContentView extends React.Component { currentMode: TAGS_MODE, path: filePath, tagId: tagId, - isDirentDetailShow: false }); const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?tag=${encodeURIComponent(tagId)}`; window.history.pushState({ url: url, path: '' }, '', url); @@ -988,10 +994,7 @@ class LibContentView extends React.Component { if (mode === this.state.currentMode) { return; } - if (mode === DIRENT_DETAIL_MODE) { - this.toggleDirentDetail(); - return; - } + cookie.save('seafile_view_mode', mode); let path = this.state.path; if (this.state.isTreePanelShown && this.state.isViewFile) { @@ -2236,7 +2239,6 @@ class LibContentView extends React.Component { isGroupOwnedRepo={this.state.isGroupOwnedRepo} showDirentDetail={this.showDirentDetail} currentMode={this.state.currentMode} - switchViewMode={this.switchViewMode} onItemConvert={this.onConvertItem} onAddFolder={this.onAddFolder} /> @@ -2292,7 +2294,7 @@ class LibContentView extends React.Component { sortItems={this.sortItems} viewId={this.state.viewId} viewType={this.props.viewType} - onCloseDetail={this.closeDirentDetail} + onToggleDetail={this.toggleDirentDetail} />
} @@ -2364,7 +2366,6 @@ class LibContentView extends React.Component { onItemsScroll={this.onItemsScroll} eventBus={this.props.eventBus} updateCurrentDirent={this.updateCurrentDirent} - closeDirentDetail={this.closeDirentDetail} /> :
{gettext('Folder does not exist.')}
@@ -2379,6 +2380,7 @@ class LibContentView extends React.Component { fileTags={this.state.isViewFile ? this.state.fileTags : []} onFileTagChanged={this.onFileTagChanged} onClose={this.closeDirentDetail} + currentMode={this.state.currentMode} /> )}
diff --git a/frontend/src/tag/hooks/tag-view.js b/frontend/src/tag/hooks/tag-view.js index f658f9e4d09..c4272eab301 100644 --- a/frontend/src/tag/hooks/tag-view.js +++ b/frontend/src/tag/hooks/tag-view.js @@ -49,7 +49,6 @@ export const TagViewProvider = ({ repoID, tagID, children, ...params }) => { deleteFilesCallback: params.deleteFilesCallback, renameFileCallback: params.renameFileCallback, updateCurrentDirent: params.updateCurrentDirent, - closeDirentDetail: params.closeDirentDetail, }}> {children} diff --git a/frontend/src/tag/hooks/tags.js b/frontend/src/tag/hooks/tags.js index 52cfcecc0c6..651c895ff83 100644 --- a/frontend/src/tag/hooks/tags.js +++ b/frontend/src/tag/hooks/tags.js @@ -240,7 +240,6 @@ export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, .. deleteFilesCallback: params.deleteFilesCallback, renameFileCallback: params.renameFileCallback, updateCurrentDirent: params.updateCurrentDirent, - closeDirentDetail: params.closeDirentDetail, addTag, addTags, modifyTags,