Fix wikis list style when side panel width is changing (#6349)

* fix wikis list style when side panel width is changing

* change code format

* fix wiki list item width when side panel is folded

frontend/src/app.js

@@ -308,7 +308,11 @@ class App extends Component {
               <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} />
               <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} />
               <PublicSharedView path={siteRoot + 'org/'} />
-              <Wikis path={siteRoot + 'published'} />
+              <Wikis
+                path={siteRoot + 'published'}
+                sidePanelRate={sidePanelRate}
+                isSidePanelFolded={isSidePanelFolded}
+              />
               <Starred path={siteRoot + 'starred'} />
               <InvitationsView path={siteRoot + 'invitations/'} />
               <FilesActivities path={siteRoot + 'dashboard'} />

frontend/src/components/wiki-card-view/wiki-card-group.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import WikiCardItem from './wiki-card-item';
 import WikiCardItemAdd from './wiki-card-item-add';
 import { isMobile } from '../../utils/utils';
+import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
 
 const propTypes = {
   wikis: PropTypes.array.isRequired,
@@ -12,6 +13,8 @@ const propTypes = {
   isShowAvatar: PropTypes.bool.isRequired,
   renameWiki: PropTypes.func.isRequired,
   toggelAddWikiDialog: PropTypes.func,
+  sidePanelRate: PropTypes.number,
+  isSidePanelFolded: PropTypes.bool,
 };
 
 class WikiCardGroup extends Component {
@@ -29,10 +32,16 @@ class WikiCardGroup extends Component {
     window.removeEventListener('resize', this.onResize);
   }
 
+  getContainerWidth = () => {
+    const { sidePanelRate, isSidePanelFolded } = this.props;
+    return isSidePanelFolded ? window.innerWidth - SIDE_PANEL_FOLDED_WIDTH : window.innerWidth * (1 - sidePanelRate);
+  };
+
   onResize = () => {
     if (isMobile) return;
-    const numberOfWiki = Math.floor((window.innerWidth * 0.78 / 180));
+    const containerWidth = this.getContainerWidth();
-    const gridTemplateColumns = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
+    const numberOfWiki = Math.floor(containerWidth / 180);
+    const gridTemplateColumns = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
     if (this.groupItemsRef.current) {
       this.groupItemsRef.current.style.gridTemplateColumns = gridTemplateColumns;
     }
@@ -40,8 +49,9 @@ class WikiCardGroup extends Component {
 
   render() {
     const { wikis, title, isDepartment, toggelAddWikiDialog } = this.props;
-    const numberOfWiki = Math.floor((window.innerWidth * 0.78 / 180));
+    const containerWidth = this.getContainerWidth();
-    const grids = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
+    const numberOfWiki = Math.floor(containerWidth / 180);
+    const grids = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
     return (
       <div className='wiki-card-group mb-4'>
         <h4 className="sf-heading">

frontend/src/components/wiki-card-view/wiki-card-view.js

@@ -13,6 +13,8 @@ const propTypes = {
   deleteWiki: PropTypes.func.isRequired,
   renameWiki: PropTypes.func.isRequired,
   toggelAddWikiDialog: PropTypes.func,
+  sidePanelRate: PropTypes.number,
+  isSidePanelFolded: PropTypes.bool,
 };
 
 class WikiCardView extends Component {
@@ -57,7 +59,7 @@ class WikiCardView extends Component {
 
   render() {
     let { loading, errorMsg, wikis } = this.props.data;
-    const { toggelAddWikiDialog } = this.props;
+    const { toggelAddWikiDialog, sidePanelRate, isSidePanelFolded } = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -72,6 +74,8 @@ class WikiCardView extends Component {
         key='my-Wikis'
         deleteWiki={this.props.deleteWiki}
         renameWiki={this.props.renameWiki}
+        sidePanelRate={sidePanelRate}
+        isSidePanelFolded={isSidePanelFolded}
         wikis={myWikis}
         title={gettext('My Wikis')}
         isDepartment={false}
@@ -85,6 +89,8 @@ class WikiCardView extends Component {
           key={'department-Wikis-' + deptID}
           deleteWiki={this.props.deleteWiki}
           renameWiki={this.props.renameWiki}
+          sidePanelRate={sidePanelRate}
+          isSidePanelFolded={isSidePanelFolded}
           wikis={department2WikisMap[deptID]}
           title={department2WikisMap[deptID][0].owner_nickname}
           isDepartment={true}
@@ -98,6 +104,8 @@ class WikiCardView extends Component {
         key='old-Wikis'
         deleteWiki={this.props.deleteWiki}
         renameWiki={this.props.renameWiki}
+        isSidePanelFolded={isSidePanelFolded}
+        sidePanelRate={sidePanelRate}
         wikis={v1Wikis}
         title={gettext('Old Wikis')}
         isDepartment={false}

frontend/src/pages/wikis/wikis.js

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, canPublishRepo } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -9,6 +10,11 @@ import AddWikiDialog from '../../components/dialog/add-wiki-dialog';
 import wikiAPI from '../../utils/wiki-api';
 import WikiCardView from '../../components/wiki-card-view/wiki-card-view';
 
+const propTypes = {
+  sidePanelRate: PropTypes.number,
+  isSidePanelFolded: PropTypes.bool,
+};
+
 class Wikis extends Component {
   constructor(props) {
     super(props);
@@ -209,6 +215,8 @@ class Wikis extends Component {
                   deleteWiki={this.deleteWiki}
                   renameWiki={this.renameWiki}
                   toggelAddWikiDialog={this.toggelAddWikiDialog}
+                  sidePanelRate={this.props.sidePanelRate}
+                  isSidePanelFolded={this.props.isSidePanelFolded}
                 />
               </div>
             }
@@ -229,4 +237,6 @@ class Wikis extends Component {
   }
 }
 
+Wikis.propTypes = propTypes;
+
 export default Wikis;