haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 10:22:46 +00:00
Code Issues Releases Wiki Activity

fix left nav slide animation (#6058)

Browse Source
This commit is contained in:
Michael An
2024-05-08 13:11:12 +08:00
committed by GitHub
parent 1b1a6bbbd3
commit 143b087387
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/main-side-nav.js
View File

@@ -18,7 +18,7 @@ class MainSideNav extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
FilesNavUnfolded: false, filesNavUnfolded: false,
sharedExtended: false, sharedExtended: false,
closeSideBar:false, closeSideBar:false,
groupItems: [], groupItems: [],
@@ -26,6 +26,7 @@ class MainSideNav extends React.Component {
this.listHeight = 24; //for caculate tabheight this.listHeight = 24; //for caculate tabheight
this.adminHeight = 0; this.adminHeight = 0;
this.filesNavHeight = 0;
} }
shExtend = () => { shExtend = () => {
@@ -42,6 +43,8 @@ class MainSideNav extends React.Component {
return group; return group;
}); });
const groupItemHeight = 28;
this.filesNavHeight = (groupList.length + (canAddRepo ? 1 : 0) + (canViewOrg ? 1 : 0) + 1) * groupItemHeight;
_this.setState({ _this.setState({
groupItems: groupList.sort((a, b) => { groupItems: groupList.sort((a, b) => {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
@@ -72,18 +75,22 @@ class MainSideNav extends React.Component {
renderSharedGroups() { renderSharedGroups() {
return ( return (
<ul className={'nav sub-nav nav-pills flex-column grp-list'}> <>
{this.state.groupItems.map(item => { {this.state.groupItems.map(item => {
return ( return (
<li key={item.id} className="nav-item"> <li key={item.id} className="nav-item">
<Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={(e) => this.tabItemClick(e, item.name, item.id)}> <Link
to={siteRoot + 'group/' + item.id + '/'}
className={`nav-link ellipsis ${this.getActiveClass(item.name)}`}
onClick={(e) => this.tabItemClick(e, item.name, item.id)}
>
<span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span> <span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{item.name}</span> <span className="nav-text">{item.name}</span>
</Link> </Link>
</li> </li>
); );
})} })}
</ul> </>
); );
} }
@@ -157,9 +164,9 @@ class MainSideNav extends React.Component {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.setState({ this.setState({
FilesNavUnfolded: !this.state.FilesNavUnfolded filesNavUnfolded: !this.state.filesNavUnfolded
}, () => { }, () => {
if (this.state.FilesNavUnfolded) { if (this.state.filesNavUnfolded) {
this.loadGroups(); this.loadGroups();
} }
}); });
@@ -167,7 +174,7 @@ class MainSideNav extends React.Component {
render() { render() {
let showActivity = isDocs || isPro || !isDBSqlite3; let showActivity = isDocs || isPro || !isDBSqlite3;
const { FilesNavUnfolded } = this.state; const { filesNavUnfolded } = this.state;
return ( return (
<div className="side-nav"> <div className="side-nav">
<div className="side-nav-con"> <div className="side-nav-con">
@@ -176,9 +183,9 @@ class MainSideNav extends React.Component {
<Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}> <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
<span className="sf3-font-files sf3-font" aria-hidden="true"></span> <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Files')}</span> <span className="nav-text">{gettext('Files')}</span>
<span className={`toggle-icon fas ${FilesNavUnfolded ? 'fa-caret-down':'fa-caret-left'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span> <span className={`toggle-icon fas ${filesNavUnfolded ? 'fa-caret-down':'fa-caret-left'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
</Link> </Link>
<ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${FilesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`}> <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0}}>
{canAddRepo && ( {canAddRepo && (
<li className="nav-item"> <li className="nav-item">
<Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}> <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
@@ -201,9 +208,7 @@ class MainSideNav extends React.Component {
</Link> </Link>
</li> </li>
} }
<li className="nav-item flex-column" id="group-nav"> {this.renderSharedGroups()}
{this.renderSharedGroups()}
</li>
</ul> </ul>
</li> </li>