add resizer (#3010)

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

@@ -24,6 +24,8 @@ const propTypes = {
   onAddFileNode: PropTypes.func.isRequired,
   onAddFolderNode: PropTypes.func.isRequired,
   repoID: PropTypes.string.isRequired,
+  navRate: PropTypes.number,
+  inResizing: PropTypes.bool.isRequired,
 };
 
 class DirColumnNav extends React.Component {
@@ -143,9 +145,11 @@ class DirColumnNav extends React.Component {
   }
 
   render() {
+    let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
+    const select = this.props.inResizing ? 'none' : '';
     return (
       <Fragment>
-        <div className="dir-content-nav" role="navigation">
+        <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}}>
           {this.props.isTreeDataLoading ? 
             (<Loading/>) :
             (<TreeView
@@ -206,6 +210,10 @@ class DirColumnNav extends React.Component {
   }
 }
 
+DirColumnNav.defaultProps={
+  navRate: 0.25
+};
+
 DirColumnNav.propTypes = propTypes;
 
 export default DirColumnNav;

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import DirColumnNav from './dir-column-nav';
 import DirColumnFile from './dir-column-file';
@@ -70,9 +70,84 @@ const propTypes = {
 
 class DirColumnView extends React.Component {
   
+  constructor(props) {
+    super(props);
+    this.state = {
+      inResizing: false,
+      navRate: 0.25,
+    };
+    this.containerWidth = null;
+  }
+
+  onResizeMouseUp = () => {
+    if (this.state.inResizing) {
+      this.setState({
+        inResizing: false
+      });
+    }
+    this.setCookie('navRate', this.state.navRate);
+  }
+
+  onResizeMouseDown = () => {
+    this.setState({
+      inResizing: true
+    });
+  };
+
+  onResizeMouseMove = (e) => {
+    let sizeNavWidth = this.containerWidth / 0.78 * 0.22 + 3;
+    let rate = (e.nativeEvent.clientX - sizeNavWidth) / this.containerWidth;
+    if (rate < 0.1) {
+      this.setState({
+        inResizing: false,
+        navRate: 0.12,
+      });
+    }
+    else if (rate > 0.9) {
+      this.setState({
+        inResizing: false,
+        navRate: 0.88,
+      });
+    }
+    else {
+      this.setState({
+        navRate: rate
+      });
+    }
+  };
+
+  setCookie = (name, value) => {
+    let cookie = name + '=' + value + ';';
+    document.cookie = cookie;
+  }
+
+  getCookie = (cookiename) => {
+    let name = cookiename + '=';
+    let cookie = document.cookie.split(';');
+    for (let i = 0, len = cookie.length; i < len; i++) {
+      let c = cookie[i].trim();
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length) * 1;
+      }
+    }
+    return '';
+  }
+
+  componentDidMount() {
+    this.containerWidth = this.refs.viewModeContainer.clientWidth;
+    let rate = this.getCookie('navRate');
+    if (rate) {
+      this.setState({
+        navRate: rate,
+      });
+    } 
+  }
+
   render() {
+    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
+    const select = this.state.inResizing ? 'none' : '';
     return (
-      <Fragment>
+      <div className="cur-view-content view-mode-container" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
         <DirColumnNav 
           currentPath={this.props.path}
           repoPermission={this.props.repoPermission}
@@ -87,8 +162,11 @@ 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}
         />
-        <div className="dir-content-main">
+        <div className="dir-content-resize" onMouseDown={this.onResizeMouseDown}></div>
+        <div className="dir-content-main" style={{userSelect: select}}>
           {this.props.isViewFile ? (
             <DirColumnFile 
               path={this.props.path}
@@ -140,7 +218,7 @@ class DirColumnView extends React.Component {
             />
           )}
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 const propTypes = {
 

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

@@ -219,3 +219,8 @@
   font-size:12px;
   color: #666;
 }
+
+.dir-content-resize {
+  flex: 0 0 .5%;
+  cursor: ew-resize;
+}