[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

frontend/src/css/layout.css

@@ -94,7 +94,7 @@
 .cur-view-path {
   position: relative; /* for the ':after' */
   padding: 8px 16px;
-  max-height: 40px;
+  max-height: 48px;
   background: #fff;
   display: flex;
   align-items: center;

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

@@ -225,3 +225,15 @@
   justify-content: center;
   align-items: center;
 }
+
+.op-btn {
+  background: #fff;
+  border: 1px solid #dbdbdb;
+  border-radius: 3px;
+  height: 32px;
+  padding: 0 .5rem;
+}
+
+.op-btn:hover {
+  background: #f5f5f5;
+}

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -11,6 +11,7 @@ import '../../css/lib-content-view.css';
 const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
   isTreePanelShown: PropTypes.bool.isRequired,
+  toggleTreePanel: PropTypes.func.isRequired,
   currentMode: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
   pathExist: PropTypes.bool.isRequired,
@@ -186,12 +187,14 @@ class LibContentContainer extends React.Component {
               sortBy={this.props.sortBy}
               sortOrder={this.props.sortOrder}
               sortItems={this.props.sortItems}
+              toggleTreePanel={this.props.toggleTreePanel}
             />
           </div>
           <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
             {!this.props.pathExist && this.errMessage}
             {this.props.pathExist && (
               <DirColumnView
+                isTreePanelShown={this.props.isTreePanelShown}
                 currentMode={this.props.currentMode}
                 path={this.props.path}
                 repoID={repoID}

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -1945,6 +1945,12 @@ class LibContentView extends React.Component {
     e.preventDefault();
   };
 
+  toggleTreePanel = () => {
+    this.setState({
+      isTreePanelShown: !this.state.isTreePanelShown
+    });
+  };
+
   render() {
     if (this.state.libNeedDecrypt) {
       return (
@@ -2046,6 +2052,7 @@ class LibContentView extends React.Component {
           <LibContentContainer
             pathPrefix={this.props.pathPrefix}
             isTreePanelShown={this.state.isTreePanelShown}
+            toggleTreePanel={this.toggleTreePanel}
             currentMode={this.state.currentMode}
             path={this.state.path}
             pathExist={this.state.pathExist}