From 7c6866503f8c4578f7f190b546964b9a4f08d4dc Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Mon, 15 Jul 2024 17:23:23 +0800 Subject: [PATCH] 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 | 6 +++++- .../wiki-card-view/wiki-card-group.js | 18 ++++++++++++++---- .../wiki-card-view/wiki-card-view.js | 10 +++++++++- frontend/src/pages/wikis/wikis.js | 10 ++++++++++ 4 files changed, 38 insertions(+), 6 deletions(-) diff --git a/frontend/src/app.js b/frontend/src/app.js index 46ce7c6db1..33cf841504 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -308,7 +308,11 @@ class App extends Component { - + diff --git a/frontend/src/components/wiki-card-view/wiki-card-group.js b/frontend/src/components/wiki-card-view/wiki-card-group.js index 568e362f1a..ec414d2ea1 100644 --- a/frontend/src/components/wiki-card-view/wiki-card-group.js +++ b/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 gridTemplateColumns = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki); + const containerWidth = this.getContainerWidth(); + 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 grids = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki); + const containerWidth = this.getContainerWidth(); + const numberOfWiki = Math.floor(containerWidth / 180); + const grids = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki); return (

diff --git a/frontend/src/components/wiki-card-view/wiki-card-view.js b/frontend/src/components/wiki-card-view/wiki-card-view.js index 117857e2d3..ed07a297de 100644 --- a/frontend/src/components/wiki-card-view/wiki-card-view.js +++ b/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 ; @@ -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} diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js index 013f4dfc09..ad838d348c 100644 --- a/frontend/src/pages/wikis/wikis.js +++ b/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} />

} @@ -229,4 +237,6 @@ class Wikis extends Component { } } +Wikis.propTypes = propTypes; + export default Wikis;