diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index f41be55efe..b75d92e7ef 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -343,7 +343,7 @@ class DirentListItem extends React.Component { onItemDragStart = (e) => { let nodeRootPath = ''; - nodeRootPath = this.props.path === '/' ? `${this.props.path}${this.props.dirent.name}` : this.props.path; + nodeRootPath = this.props.path === '/' ? `${this.props.path}${this.props.dirent.name}` : `${this.props.path}/${this.props.dirent.name}`; let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath}; dragStartItemData = JSON.stringify(dragStartItemData); diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index 5d824fb659..39bb93e494 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -65,6 +65,7 @@ class DirentListView extends React.Component { progress: 0, isMutipleOperation: true, activeDirent: null, + isListDropTipShow: false, }; this.isRepoOwner = props.currentRepoInfo.owner_email === username; @@ -525,6 +526,42 @@ class DirentListView extends React.Component { return []; } + onTableDragEnter = (e) => { + if (e.target.className === 'table-container ') { + this.setState({isListDropTipShow: true}); + } + } + + onTableDragOver = (e) => { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + } + + onTableDragLeave = (e) => { + if (e.target.className === 'table-container table-drop-active') { + this.setState({isListDropTipShow: false}) + } + } + + tableDrop = (e) => { + e.persist(); + this.setState({isListDropTipShow: false}); + if (e.dataTransfer.files.length) { // uploaded files + return; + } + let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info'); + dragStartItemData = JSON.parse(dragStartItemData); + + let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartItemData; + + if (e.target.className === 'table-container table-drop-active') { + if (nodeRootPath === this.props.path || nodeParentPath === this.props.path) { + return; + } + this.props.onItemMove(this.props.currentRepoInfo, nodeDirent, this.props.path, nodeParentPath) + } + } + render() { const { direntList, sortBy, sortOrder } = this.props; @@ -538,7 +575,16 @@ class DirentListView extends React.Component { const sortIcon = sortOrder == 'asc' ? : ; return ( -
+
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css index 5ba7784945..26df6f7218 100644 --- a/frontend/src/css/layout.css +++ b/frontend/src/css/layout.css @@ -118,6 +118,18 @@ .table-container { flex: 1; padding: 0 1rem 10rem; + position: relative; +} + +.table-drop-active::before { + border: 1px solid rgba(69,170,242); + content: ''; + position: absolute; + display: block; + width: 100%; + height: 100%; + left: 0; + z-index: -1; } .cur-view-content .article { 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 d0cdbd8ed0..dc2bb7c9a2 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -141,6 +141,11 @@ class LibContentContainer extends React.Component { onItemsScroll = (e) => { let target = e.target; + + if (target.scrollTop === 0) { + return; + } + if (target.scrollTop + target.clientHeight + 1 >= target.scrollHeight) { this.props.onListContainerScroll(); } 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 dd02160bae..90786f2657 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -306,6 +306,7 @@ class LibContentView extends React.Component { // update data this.loadDirentList(path); + this.resetShowLength(); if (!this.isNeedUpdateHistoryState) { this.isNeedUpdateHistoryState = true; @@ -405,7 +406,6 @@ class LibContentView extends React.Component { if (!this.state.repoEncrypted && direntList.length) { this.getThumbnails(repoID, path, this.state.direntList); } - this.resetShowLength(); }).catch(() => { this.setState({ isDirentListLoading: false, @@ -729,12 +729,12 @@ class LibContentView extends React.Component { nodeParentPath = this.state.path; } let direntPath = Utils.joinPath(nodeParentPath, dirName); - seafileAPI.moveDir(repoID, destRepo.repo_id,moveToDirentPath, nodeParentPath, dirName).then(res => { + seafileAPI.moveDir(repoID, destRepo.repo_id, moveToDirentPath, nodeParentPath, dirName).then(res => { let nodeName = res.data[0].obj_name; if (this.state.currentMode === 'column') { this.moveTreeNode(direntPath, moveToDirentPath, destRepo, nodeName); } - this.moveDirent(direntPath); + this.moveDirent(direntPath, moveToDirentPath); let message = gettext('Successfully moved %(name)s.'); message = message.replace('%(name)s', dirName); @@ -996,8 +996,12 @@ class LibContentView extends React.Component { // else do nothing } - moveDirent = (direntPath) => { - let name = direntPath.slice(direntPath.lastIndexOf('/') + 1); + moveDirent = (direntPath, moveToDirentPath = null) => { + let name = Utils.getFileName(direntPath); + if (moveToDirentPath === this.state.path) { + this.loadDirentList(this.state.path); + return; + } let direntList = this.state.direntList.filter(item => { return item.name !== name; });