fix: resize (#6319)

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

frontend/src/app.js

@@ -255,7 +255,7 @@ class App extends Component {
               <OCMViaWebdavWrapper path={siteRoot + 'ocm-via-webdav'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
-              <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
+              <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} isSidePanelFolded={isSidePanelFolded} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
               <OCMRepoDir path={siteRoot + 'remote-library/:providerID/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
               <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
               <Group

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

@@ -4,8 +4,10 @@ import DirColumnNav from './dir-column-nav';
 import DirColumnFile from './dir-column-file';
 import DirListView from './dir-list-view';
 import DirGridView from './dir-grid-view';
+import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
 
 const propTypes = {
+  isSidePanelFolded: PropTypes.bool,
   isTreePanelShown: PropTypes.bool.isRequired,
   currentMode: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
@@ -99,7 +101,9 @@ class DirColumnView extends React.Component {
   };
 
   onResizeMouseMove = (e) => {
-    let sizeNavWidth = this.containerWidth / 0.78 * 0.22 + 3;
+    const { isSidePanelFolded } = this.props;
+    let sizeNavWidth = isSidePanelFolded ? SIDE_PANEL_FOLDED_WIDTH + 3 : this.containerWidth / 0.78 * 0.22 + 3;
+
     let rate = (e.nativeEvent.clientX - sizeNavWidth) / this.containerWidth;
     if (rate < 0.1) {
       this.setState({

frontend/src/components/side-panel.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Utils } from '../utils/utils';
 import Logo from './logo';
 import MainSideNav from './main-side-nav';
+import { SIDE_PANEL_FOLDED_WIDTH } from '../constants';
 
 const propTypes = {
   isSidePanelClosed: PropTypes.bool,
@@ -19,8 +21,9 @@ class SidePanel extends React.Component {
 
   render() {
     const { children, isSidePanelFolded, showLogoOnlyInMobile = false } = this.props;
+    const style = isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : {};
     return (
-      <div className={`side-panel ${isSidePanelFolded ? 'side-panel-folded' : ''} ${this.props.isSidePanelClosed ? '' : 'left-zero'}`}>
+      <div className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })} style={style}>
         <div className={'side-panel-north'}>
           {showLogoOnlyInMobile && !Utils.isDesktop() && <Logo onCloseSidePanel={this.props.onCloseSidePanel} />}
         </div>

frontend/src/constants/index.js

@@ -113,4 +113,6 @@ export const PRIVATE_FILE_TYPE = {
 const TAG_COLORS = ['#FBD44A', '#EAA775', '#F4667C', '#DC82D2', '#9860E5', '#9F8CF1', '#59CB74', '#ADDF84',
   '#89D2EA', '#4ECCCB', '#46A1FD', '#C2C2C2'];
 
+export const SIDE_PANEL_FOLDED_WIDTH = 69;
+
 export { KeyCodes, zIndexes, TAG_COLORS };

frontend/src/css/layout.css

@@ -29,10 +29,6 @@
   background: #fff;
 }
 
-.side-panel-folded {
-  flex-basis: 69px;
-}
-
 .user-panel .side-panel-north {
   height: 49px;
 }

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

@@ -10,6 +10,7 @@ import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents
 import '../../css/lib-content-view.css';
 
 const propTypes = {
+  isSidePanelFolded: PropTypes.bool,
   switchViewMode: PropTypes.func.isRequired,
   isCustomPermission: PropTypes.bool,
 
@@ -249,6 +250,7 @@ class LibContentContainer extends React.Component {
             {!this.props.pathExist && this.errMessage}
             {this.props.pathExist && (
               <DirColumnView
+                isSidePanelFolded={this.props.isSidePanelFolded}
                 isTreePanelShown={this.props.isTreePanelShown}
                 currentMode={this.props.currentMode}
                 path={this.props.path}

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

@@ -23,6 +23,7 @@ import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dire
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
 
 const propTypes = {
+  isSidePanelFolded: PropTypes.bool,
   pathPrefix: PropTypes.array.isRequired,
   onTabNavClick: PropTypes.func.isRequired,
   onMenuClick: PropTypes.func.isRequired,
@@ -2068,6 +2069,7 @@ class LibContentView extends React.Component {
         </div>
         <div className="main-panel-center flex-row">
           <LibContentContainer
+            isSidePanelFolded={this.props.isSidePanelFolded}
             repoEncrypted={this.state.repoEncrypted}
             isRepoOwner={isRepoOwner}
             onFilesTagChanged={this.onFileTagChanged}