Move files into the root library (#3217)

* Move files into the root library

* Add border when file into the root library

* modify some style

* delete overflow:visible

* Add border-bottom

frontend/src/components/tree-view/tree-node-view.js

@@ -98,6 +98,7 @@ class TreeNodeView extends React.Component {
   }
 
   onNodeDrop = (e) => {
+    e.stopPropagation();
     this.setState({isNodeDropShow: false});
     this.props.onNodeDrop(e, this.props.node);
   }

frontend/src/components/tree-view/tree-view.js

@@ -31,6 +31,7 @@ class TreeView extends React.Component {
       nodeData: null,
       fileData: null,
       mousePosition: {clientX: '', clientY: ''},
+      isTreeViewDropTipShow: false,
     };
   }
 
@@ -59,7 +60,12 @@ class TreeView extends React.Component {
   }
 
   onNodeDragEnter = (e, node) => {
-    //todo
+    e.persist()
+    if (e.target.className === 'tree-view tree ') {
+      this.setState({
+        isTreeViewDropTipShow: true,
+      })
+    }
   }
 
   onNodeDragMove = (e) => {
@@ -68,7 +74,11 @@ class TreeView extends React.Component {
   }
 
   onNodeDragLeave = (e, node) => {
-    //todo
+    if (e.target.className === 'tree-view tree tree-view-drop') {
+      this.setState({
+        isTreeViewDropTipShow: false,
+      })
+    }
   }
 
   onNodeDrop = (e, node) => {
@@ -81,6 +91,12 @@ class TreeView extends React.Component {
     let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartNodeData;
     let dropNodeData = node;
 
+    if (!dropNodeData) {
+      this.onItemMove(this.props.currentRepoInfo, nodeDirent, '/', nodeParentPath);
+      this.setState({isTreeViewDropTipShow: false})
+      return;
+    }
+
     if (dropNodeData.object.type !== 'dir') {
       return;
     }
@@ -158,7 +174,7 @@ class TreeView extends React.Component {
 
   render() {
     return (
-      <div className="tree-view tree">
+      <div className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`} onDrop={this.onNodeDrop} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave}>
         <TreeNodeView 
           repoPermission={this.props.repoPermission}
           node={this.props.treeData.root}

frontend/src/css/lib-content-view.css

@@ -36,10 +36,25 @@
 
 /*tree view */
 .tree-view {
-  margin-left: -10px;
+  margin-left: -9px;
   padding: 12px 12px 12px 0;
   line-height: 1.5;
   flex: 1;
+  border: 1px solid rgba(69,170,242,0);
+}
+
+.tree-view-drop {
+  border: 1px solid rgba(69,170,242);
+}
+
+.tree-view-drop::before {
+  border-left: 1px solid rgba(69,170,242);
+  content: '';
+  margin-left: 8px;
+  height: calc(100% + 24px);
+  display: block;
+  margin-top: -12px;
+  float: left;
 }
 
 .tree-node-inner {