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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
@@ -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 &&
|
||||
|
@@ -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;
|
||||
|
@@ -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);
|
||||
};
|
||||
|
||||
|
@@ -134,6 +134,7 @@ export const MetadataViewProvider = ({
|
||||
renameFileCallback: params.renameFileCallback,
|
||||
updateCurrentDirent: params.updateCurrentDirent,
|
||||
closeDirentDetail: params.closeDirentDetail,
|
||||
showDirentDetail: params.showDirentDetail,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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
|
||||
|
@@ -2348,6 +2348,7 @@ class LibContentView extends React.Component {
|
||||
sortItems={this.sortItems}
|
||||
viewId={this.state.viewId}
|
||||
viewType={this.props.viewType}
|
||||
onCloseDetail={this.closeDirentDetail}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
Reference in New Issue
Block a user