refactor: resize ui (#6315)

* refactor: resize ui

* feat: optimize z-indez

* feat: optimize code

* feat: optimize code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/dir-view-mode/dir-column-file.js

@@ -59,7 +59,7 @@ class DirColumnFile extends React.Component {
       };
 
       return (
-        <div className="w-100 h-100 o-hidden d-flex" style={{ paddingRight: 10, flexDirection: 'column', alignItems: 'center' }}>
+        <div className="w-100 h-100 o-hidden d-flex" style={{ paddingRight: 10, paddingLeft: 10, flexDirection: 'column', alignItems: 'center' }}>
           <div className="" style={{ width: '100%', height: 10, zIndex: 7, transform: 'translateZ(1000px)', position: 'relative', background: '#fff' }}></div>
           <SeafileMetadata repoID={this.props.repoID} currentRepoInfo={this.props.currentRepoInfo} />
         </div>

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -73,6 +73,8 @@ const propTypes = {
   isDirentDetailShow: PropTypes.bool.isRequired
 };
 
+const DRAG_HANDLER_HEIGHT = 26;
+
 class DirColumnView extends React.Component {
 
   constructor(props) {
@@ -82,6 +84,8 @@ class DirColumnView extends React.Component {
       navRate: 0.25,
     };
     this.containerWidth = null;
+    this.resizeRef = null;
+    this.dragHandler = null;
   }
 
   onResizeMouseUp = () => {
@@ -124,6 +128,17 @@ class DirColumnView extends React.Component {
     }
   };
 
+  onMouseOver = (event) => {
+    if (!this.dragHandler) return;
+    const { top } = this.resizeRef.getBoundingClientRect();
+    const dragHandlerTop = event.pageY - top - DRAG_HANDLER_HEIGHT / 2;
+    this.setDragHandlerTop(dragHandlerTop);
+  };
+
+  setDragHandlerTop = (top) => {
+    this.dragHandler.style.top = top + 'px';
+  };
+
   setCookie = (name, value) => {
     let cookie = name + '=' + value + ';';
     document.cookie = cookie;
@@ -152,11 +167,12 @@ class DirColumnView extends React.Component {
 
   render() {
     const { currentMode, isTreePanelShown } = this.props;
-    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
-    const select = this.state.inResizing ? 'none' : '';
-    const mainFlex = '1 0 ' + (1 - this.state.navRate - 0.05) * 100 + '%';
+    const { navRate, inResizing } = this.state;
+    const onResizeMove = inResizing ? this.onResizeMouseMove : null;
+    const select = inResizing ? 'none' : '';
+    const mainFlex = '1 0 ' + (1 - navRate) * 100 + '%';
     return (
-      <div className="dir-colunm-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
+      <div className="dir-column-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
         {isTreePanelShown && (
           <>
             <DirColumnNav
@@ -173,15 +189,24 @@ class DirColumnView extends React.Component {
               onRenameNode={this.props.onRenameNode}
               onDeleteNode={this.props.onDeleteNode}
               repoID={this.props.repoID}
-              navRate={this.state.navRate}
-              inResizing={this.state.inResizing}
+              navRate={navRate}
+              inResizing={inResizing}
               currentRepoInfo={this.props.currentRepoInfo}
               onItemMove={this.props.onItemMove}
               onItemCopy={this.props.onItemCopy}
               selectedDirentList={this.props.selectedDirentList}
               onItemsMove={this.props.onItemsMove}
             />
-            <div className="dir-content-resize" onMouseDown={this.onResizeMouseDown}></div>
+            <div
+              className="dir-content-resize"
+              ref={ref => this.resizeRef = ref}
+              style={{ left: `calc(${navRate ? navRate * 100 + '%' : '25%'} - 1px)` }}
+              onMouseDown={this.onResizeMouseDown}
+              onMouseOver={this.onMouseOver}
+            >
+              <div className="line"></div>
+              <div className="drag-handler" ref={ref => this.dragHandler = ref} style={{ height: DRAG_HANDLER_HEIGHT }}></div>
+            </div>
           </>
         )}
         <div className="dir-content-main" style={{userSelect: select, flex: mainFlex}} onScroll={this.props.isViewFile ? () => {} : this.props.onItemsScroll}>

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

@@ -22,9 +22,10 @@
   min-height: 0;
 }
 
-.dir-colunm-view {
+.dir-column-view {
   display: flex;
   width: 100%;
+  position: relative;
 }
 
 .dir-content-nav {
@@ -224,8 +225,47 @@
 }
 
 .dir-content-resize {
-  flex: 0 0 .5%;
-  cursor: ew-resize;
+  height: 100%;
+  width: 6px;
+  position: absolute;
+  top: 0;
+  z-index: 8;
+  opacity: 0;
+  transition-duration: .2s;
+  transition-property: opacity;
+}
+
+.dir-content-resize:hover {
+  opacity: 1;
+  cursor: col-resize;
+}
+
+.dir-content-resize .line {
+  background-color: #aaa;
+  height: 100%;
+  width: 2px;
+  display: none;
+  user-select: none;
+}
+
+.dir-content-resize:hover .line {
+  display: block;
+}
+
+.dir-content-resize .drag-handler {
+  background: #2d7ff9;
+  border-radius: 10px;
+  margin-left: 1px;
+  position: absolute;
+  transform: translate(-50%);
+  width: 6px;
+  display: none;
+  z-index: 1;
+  user-select: none;
+}
+
+.dir-content-resize:hover .drag-handler {
+  display: block;
 }
 
 .readonly-tip-message {