haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 07:27:04 +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

6
frontend/src/app.js
View File

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

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}

10
frontend/src/pages/wikis/wikis.js
View File

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