haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 18:29:23 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* fix wikis list style when side panel width is changing

* change code format

* fix wiki list item width when side panel is folded
This commit is contained in:
Michael An
2024-07-15 17:23:23 +08:00
committed by GitHub
parent 2536d5c6c3
commit 7c6866503f
4 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/wiki-card-view/wiki-card-group.js
View File

@@ -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 (
<div className='wiki-card-group mb-4'>
<h4 className="sf-heading">

10
frontend/src/components/wiki-card-view/wiki-card-view.js
View File

@@ -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}