[dir view] added an icon button to toggle between displaying/hiding the dirent tree panel (#6093)

frontend/src/components/cur-dir-path/dir-path.js

@@ -15,6 +15,7 @@ const propTypes = {
   repoID: PropTypes.string.isRequired,
   isViewFile: PropTypes.bool,
   fileTags: PropTypes.array.isRequired,
+  toggleTreePanel: PropTypes.func.isRequired
 };
 
 class DirPath extends React.Component {
@@ -78,6 +79,7 @@ class DirPath extends React.Component {
 
     return (
       <div className="path-container">
+        <button className="op-btn mr-2" onClick={this.props.toggleTreePanel}><span className="sf3-font-side-bar sf3-font"></span></button>
         {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
           return (
             <Fragment key={index}>

frontend/src/components/cur-dir-path/index.js

@@ -17,6 +17,7 @@ const propTypes = {
   updateUsedRepoTags: PropTypes.func.isRequired,
   fileTags: PropTypes.array.isRequired,
   onDeleteRepoTag: PropTypes.func.isRequired,
+  toggleTreePanel: PropTypes.func.isRequired,
   direntList: PropTypes.array,
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
@@ -51,6 +52,7 @@ class CurDirPath extends React.Component {
           repoID={this.props.repoID}
           isViewFile={this.props.isViewFile}
           fileTags={this.props.fileTags}
+          toggleTreePanel={this.props.toggleTreePanel}
         />
         {isDesktop &&
         <DirTool

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

@@ -6,6 +6,7 @@ import DirListView from './dir-list-view';
 import DirGridView from './dir-grid-view';
 
 const propTypes = {
+  isTreePanelShown: PropTypes.bool.isRequired,
   currentMode: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
@@ -146,35 +147,39 @@ class DirColumnView extends React.Component {
   }
 
   render() {
-    const { currentMode } = this.props;
+    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 + '%';
     return (
       <div className="dir-colunm-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
-        <DirColumnNav
-          currentPath={this.props.path}
-          userPerm={this.props.userPerm}
-          isTreeDataLoading={this.props.isTreeDataLoading}
-          treeData={this.props.treeData}
-          currentNode={this.props.currentNode}
-          onNodeClick={this.props.onNodeClick}
-          onNodeCollapse={this.props.onNodeCollapse}
-          onNodeExpanded={this.props.onNodeExpanded}
-          onAddFolderNode={this.props.onAddFolderNode}
-          onAddFileNode={this.props.onAddFileNode}
-          onRenameNode={this.props.onRenameNode}
-          onDeleteNode={this.props.onDeleteNode}
-          repoID={this.props.repoID}
-          navRate={this.state.navRate}
-          inResizing={this.state.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>
+        {isTreePanelShown && (
+          <>
+            <DirColumnNav
+              currentPath={this.props.path}
+              userPerm={this.props.userPerm}
+              isTreeDataLoading={this.props.isTreeDataLoading}
+              treeData={this.props.treeData}
+              currentNode={this.props.currentNode}
+              onNodeClick={this.props.onNodeClick}
+              onNodeCollapse={this.props.onNodeCollapse}
+              onNodeExpanded={this.props.onNodeExpanded}
+              onAddFolderNode={this.props.onAddFolderNode}
+              onAddFileNode={this.props.onAddFileNode}
+              onRenameNode={this.props.onRenameNode}
+              onDeleteNode={this.props.onDeleteNode}
+              repoID={this.props.repoID}
+              navRate={this.state.navRate}
+              inResizing={this.state.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-main" style={{userSelect: select, flex: mainFlex}} onScroll={this.props.isViewFile ? () => {} : this.props.onItemsScroll}>
           {this.props.isViewFile ? (
             <DirColumnFile