1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 07:27:04 +00:00

show dirent detail

This commit is contained in:
zhouwenxuan
2024-11-13 17:15:36 +08:00
committed by 杨国璇
parent 1b89962f90
commit 0b30d895f3
11 changed files with 69 additions and 10 deletions

View File

@@ -25,6 +25,7 @@ const propTypes = {
sortOrder: PropTypes.string,
sortItems: PropTypes.func,
viewId: PropTypes.string,
onCloseDetail: PropTypes.func,
};
class DirTool extends React.Component {
@@ -119,7 +120,7 @@ class DirTool extends React.Component {
if (isFileExtended) {
return (
<div className="dir-tool">
<MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} />
<MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} closeDetail={this.props.onCloseDetail} />
</div>
);
}

View File

@@ -205,6 +205,7 @@ class DirColumnView extends React.Component {
renameFileCallback={this.props.renameFileCallback}
updateCurrentDirent={this.props.updateCurrentDirent}
closeDirentDetail={this.props.closeDirentDetail}
showDirentDetail={this.props.showDirentDetail}
/>
)}
{currentMode === LIST_MODE &&

View File

@@ -8,7 +8,7 @@ import KanbanViewToolBar from './kanban-view-toolbar';
import './index.css';
const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => {
const [view, setView] = useState(null);
const [collaborators, setCollaborators] = useState([]);
@@ -105,6 +105,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
collaborators={collaborators}
modifyFilters={modifyFilters}
modifySorts={modifySorts}
closeDetail={closeDetail}
/>
)}
</div>
@@ -114,7 +115,8 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
ViewToolBar.propTypes = {
viewId: PropTypes.string,
isCustomPermission: PropTypes.bool,
switchViewMode: PropTypes.func,
showDetail: PropTypes.func,
closeDetail: PropTypes.func,
};
export default ViewToolBar;

View File

@@ -9,7 +9,8 @@ const KanbanViewToolBar = ({
view,
collaborators,
modifyFilters,
modifySorts
modifySorts,
closeDetail,
}) => {
const viewType = useMemo(() => view.type, [view]);
const viewColumns = useMemo(() => {
@@ -22,6 +23,7 @@ const KanbanViewToolBar = ({
}, [viewColumns]);
const onToggleKanbanSetting = () => {
closeDetail();
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
};

View File

@@ -134,6 +134,7 @@ export const MetadataViewProvider = ({
renameFileCallback: params.renameFileCallback,
updateCurrentDirent: params.updateCurrentDirent,
closeDirentDetail: params.closeDirentDetail,
showDirentDetail: params.showDirentDetail,
}}
>
{children}

View File

@@ -34,6 +34,10 @@
margin-bottom: 0;
}
.sf-metadata-kanban-card .sf-metadata-kanban-card-record .file-name-formatter-wrapper {
width: fit-content;
}
.sf-metadata-kanban-card .sf-metadata-kanban-card-record .sf-metadata-kanban-card-record-name {
margin-bottom: 4px;
color: #666;
@@ -68,7 +72,7 @@
}
.sf-metadata-kanban-card .file-name-formatter:not(.sf-metadata-image-file-formatter) {
margin-left: -4px;
transform: translateX(-4px);
}
.sf-metadata-kanban-card .sf-metadata-special-file-name-formatter:not(.sf-metadata-image-file-formatter) {
@@ -79,6 +83,16 @@
transform: translateY(-1px);
}
.sf-metadata-kanban-card .sf-metadata-ui.file-name-formatter .sf-metadata-file-name {
text-decoration: none;
flex: none;
}
.sf-metadata-kanban-card .sf-metadata-ui.file-name-formatter .sf-metadata-file-name:hover {
text-decoration: underline;
text-decoration-color: #212529;
}
.sf-metadata-kanban-card .sf-metadata-kanban-card-record .collaborators-formatter {
display: flex;
flex-wrap: wrap;

View File

@@ -1,8 +1,10 @@
import React from 'react';
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getCellValueByColumn, isValidCellValue } from '../../../../../utils/cell';
import Formatter from '../formatter';
import { PRIVATE_COLUMN_KEY } from '../../../../../constants';
import { useMetadataView } from '../../../../../hooks/metadata-view';
import './index.css';
@@ -13,12 +15,39 @@ const Card = ({
record,
titleColumn,
displayColumns,
onCloseSettings,
}) => {
const { updateCurrentDirent, showDirentDetail } = useMetadataView();
const titleValue = getCellValueByColumn(record, titleColumn);
const handleClick = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
const name = record[PRIVATE_COLUMN_KEY.FILE_NAME];
const path = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
updateCurrentDirent({
type: 'file',
name,
path,
file_tags: []
});
onCloseSettings();
showDirentDetail();
}, [record, updateCurrentDirent, showDirentDetail, onCloseSettings]);
const handleClickFilename = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
console.log('click filename');
}, []);
return (
<article data-id={record._id} className={classnames('sf-metadata-kanban-card', { 'readonly': readonly })}>
<article
data-id={record._id}
className={classnames('sf-metadata-kanban-card', { 'readonly': readonly })}
onClick={handleClick}
>
{titleColumn && (
<div className="sf-metadata-kanban-card-header">
<Formatter value={titleValue} column={titleColumn} record={record}/>
@@ -41,7 +70,9 @@ const Card = ({
return (
<div className="sf-metadata-kanban-card-record" key={column.key}>
{displayColumnName && (<div className="sf-metadata-kanban-card-record-name">{column.name}</div>)}
<Formatter value={value} column={column} record={record}/>
<div className='file-name-formatter-wrapper' onClick={handleClickFilename}>
<Formatter value={value} column={column} record={record}/>
</div>
</div>
);
})}
@@ -57,6 +88,7 @@ Card.propTypes = {
record: PropTypes.object,
titleColumn: PropTypes.object,
displayColumns: PropTypes.array,
onCloseSettings: PropTypes.func.isRequired,
};
export default Card;

View File

@@ -23,6 +23,7 @@ const Board = ({
deleteOption,
onFreezed,
onUnFreezed,
onCloseSettings,
}) => {
const [isDraggingOver, setDraggingOver] = useState(false);
const boardName = useMemo(() => `sf_metadata_kanban_board_${board.key}`, [board]);
@@ -82,6 +83,7 @@ const Board = ({
record={record}
titleColumn={titleColumn}
displayColumns={displayColumns}
onCloseSettings={onCloseSettings}
/>
);
if (readonly) return CardElement;
@@ -110,6 +112,7 @@ Board.propTypes = {
deleteOption: PropTypes.func,
onFreezed: PropTypes.func,
onUnFreezed: PropTypes.func,
onCloseSettings: PropTypes.func.isRequired,
};
export default Board;

View File

@@ -14,7 +14,7 @@ import Board from './board';
import './index.css';
const Boards = ({ modifyRecord, modifyColumnData }) => {
const Boards = ({ modifyRecord, modifyColumnData, onCloseSettings }) => {
const [haveFreezed, setHaveFreezed] = useState(false);
const { metadata, store } = useMetadataView();
@@ -193,6 +193,7 @@ const Boards = ({ modifyRecord, modifyColumnData }) => {
deleteOption={deleteOption}
onFreezed={onFreezed}
onUnFreezed={onUnFreezed}
onCloseSettings={onCloseSettings}
/>
);
})}
@@ -207,6 +208,7 @@ const Boards = ({ modifyRecord, modifyColumnData }) => {
Boards.propTypes = {
modifyRecord: PropTypes.func.isRequired,
modifyColumnData: PropTypes.func.isRequired,
onCloseSettings: PropTypes.func.isRequired,
};
export default Boards;

View File

@@ -52,7 +52,7 @@ const Kanban = () => {
return (
<div className="sf-metadata-view-kanban">
<Boards modifyRecord={modifyRecord} modifyColumnData={modifyColumnData} />
<Boards modifyRecord={modifyRecord} modifyColumnData={modifyColumnData} onCloseSettings={closeSettings} />
<div className="sf-metadata-view-setting-panel sf-metadata-view-kanban-setting h-100">
{isShowSettings && (
<Settings

View File

@@ -2348,6 +2348,7 @@ class LibContentView extends React.Component {
sortItems={this.sortItems}
viewId={this.state.viewId}
viewType={this.props.viewType}
onCloseDetail={this.closeDirentDetail}
/>
</div>
}