haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 02:42:47 +00:00
Code Issues Releases Wiki Activity

change side nav folded animation (#6627)

Browse Source
This commit is contained in:
Michael An
2024-08-23 17:52:21 +08:00
committed by GitHub
parent 500b1dbb6b
commit d6a589a09b
3 changed files with 126 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { seafileAPI } from '../utils/seafile-api';
import { Utils } from '../utils/utils'; import { Utils } from '../utils/utils';
import Group from '../models/group'; import Group from '../models/group';
import toaster from './toast'; import toaster from './toast';
import { FOLDED_SIDE_NAV_FILES, FOLDED_SIDE_NAV } from '../constants/zIndexes';
import '../css/main-side-nav-folded.css'; import '../css/main-side-nav-folded.css';
@@ -94,26 +95,18 @@ class MainSideNavFolded extends React.Component {
let showActivity = isDocs || isPro || !isDBSqlite3; let showActivity = isDocs || isPro || !isDBSqlite3;
const { groupItems, isFilesSubNavShown } = this.state; const { groupItems, isFilesSubNavShown } = this.state;
return ( return (
<div className="side-nav side-nav-folded"> <div className='side-nav-folded-container h-100 position-relative'>
<div className={'side-nav-con d-flex flex-column'}> {/* FOLDED SIDE NAV FILES */}
<ul className="nav nav-pills flex-column nav-container"> <div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}>
<div className='side-nav-con p-0'>
<li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}> <div className="nav nav-pills nav-container">
<Link
to={ siteRoot + 'libraries/' }
className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
onClick={(e) => this.tabItemClick(e, 'libraries')}
onMouseOver={this.openSubNav}
>
<span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
</Link>
<ul <ul
id="files-sub-nav" id="files-sub-nav"
className="sub-nav position-fixed rounded border shadow p-4 o-auto" className="sub-nav position-fixed rounded border shadow p-4 o-auto"
style={{ style={{
'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px', 'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px',
'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2, 'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2,
'opacity': isFilesSubNavShown ? 1 : 0.5, 'opacity': isFilesSubNavShown ? 1 : 0,
}} }}
ref={ref => this.filesSubNav = ref} ref={ref => this.filesSubNav = ref}
onMouseLeave={this.closeSubNav} onMouseLeave={this.closeSubNav}
@@ -124,99 +117,128 @@ class MainSideNavFolded extends React.Component {
currentTab={this.props.currentTab} currentTab={this.props.currentTab}
/> />
</ul> </ul>
</li> </div>
</div>
<li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}> </div>
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}> {/* FOLDED SIDE NAVS */}
<span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span> <div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}>
<Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} /> <div className='side-nav-con d-flex flex-column'>
</Link> <ul className="nav nav-pills flex-column nav-container">
</li> <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`} onClick={this.openSubNav}>
<Link
{showActivity && to={ siteRoot + 'libraries/' }
<> className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
<li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}> onClick={(e) => this.tabItemClick(e, 'libraries')}
<Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} onClick={(e) => this.tabItemClick(e, 'dashboard')}> onMouseOver={this.openSubNav}
<span className="sf3-font-activities sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-dashboard"></span> >
<Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} /> <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
</Link>
</li>
</>
}
<li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}>
<Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} onClick={(e) => this.tabItemClick(e, 'published')}>
<span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
<Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
</Link>
</li>
{canInvitePeople &&
<li className={`nav-item ${this.getActiveClass('invitations')}`} onMouseEnter={this.closeSubNav}>
<Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, 'invitations')}>
<span className="sf3-font-invite-visitors sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-invitations"></span>
<Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
</Link> </Link>
</li> </li>
}
{customNavItems && <li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}>
customNavItems.map((item, idx) => { <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
return ( <span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span>
<li key={idx} className='nav-item'> <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
<a href={item.link} className="nav-link ellipsis" title={item.desc}> </Link>
<span className={item.icon} aria-hidden="true" title={item.desc}></span>
</a>
</li>
);
})
}
</ul>
{sideNavFooterCustomHtml ?
<div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
:
<ul className="nav nav-pills flex-column nav-container">
<li className='nav-item'>
<a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
<span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
<Tip target="main-side-nav-folded-help" text={gettext('Help')} />
</a>
</li> </li>
{enableTC &&
{showActivity &&
<> <>
<li className='nav-item'> <li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}>
<a href={`${siteRoot}terms/`} className="nav-link"> <Link
<span className="sf3-font-terms sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-terms"></span> className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`}
<Tip target="main-side-nav-folded-terms" text={gettext('Terms')} /> to={siteRoot + 'dashboard/'}
</a> onClick={(e) => this.tabItemClick(e, 'dashboard')}
>
<span className="sf3-font-activities sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-dashboard"></span>
<Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
</Link>
</li> </li>
</> </>
} }
{additionalAppBottomLinks && (
<> <li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}>
{Object.keys(additionalAppBottomLinks).map((key, index) => { <Link
return ( className={`nav-link ellipsis ${this.getActiveClass('published')}`}
<a className="nav-link" href={additionalAppBottomLinks[key]}> to={siteRoot + 'published/'}
<span className="sf3-font-terms sf3-font mr-0" aria-hidden="true"></span> onClick={(e) => this.tabItemClick(e, 'published')}
</a> >
); <span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
})} <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
</> </Link>
)}
<li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link">
<span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
<Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
</a>
</li> </li>
{canInvitePeople &&
<li className={`nav-item ${this.getActiveClass('invitations')}`} onMouseEnter={this.closeSubNav}>
<Link
className={`nav-link ellipsis ${this.getActiveClass('invitations')}`}
to={siteRoot + 'invitations/'}
onClick={(e) => this.tabItemClick(e, 'invitations')}
>
<span className="sf3-font-invite-visitors sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-invitations"></span>
<Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
</Link>
</li>
}
{customNavItems &&
customNavItems.map((item, idx) => {
return (
<li key={idx} className='nav-item'>
<a href={item.link} className="nav-link ellipsis" title={item.desc}>
<span className={item.icon} aria-hidden="true" title={item.desc}></span>
</a>
</li>
);
})
}
</ul> </ul>
}
<div {sideNavFooterCustomHtml ?
className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
onClick={this.props.toggleFoldSideNav} :
> <ul className="nav nav-pills flex-column nav-container">
<img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} /> <li className='nav-item'>
<a className='nav-link' href={siteRoot + 'help/'} title={gettext('Help')}>
<span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
<Tip target="main-side-nav-folded-help" text={gettext('Help')} />
</a>
</li>
{enableTC &&
<>
<li className='nav-item'>
<a href={`${siteRoot}terms/`} className="nav-link">
<span className="sf3-font-terms sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-terms"></span>
<Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
</a>
</li>
</>
}
{additionalAppBottomLinks && (
<>
{Object.keys(additionalAppBottomLinks).map((key, index) => {
return (
<a className="nav-link" href={additionalAppBottomLinks[key]}>
<span className="sf3-font-terms sf3-font mr-0" aria-hidden="true"></span>
</a>
);
})}
</>
)}
<li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link">
<span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
<Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
</a>
</li>
</ul>
}
<div
className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center"
onClick={this.props.toggleFoldSideNav}
>
<img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} />
</div>
</div> </div>
</div> </div>
</div> </div>

4
frontend/src/constants/zIndexes.js
View File

@@ -1,3 +1,7 @@
export const RESIZE_BAR = 2; export const RESIZE_BAR = 2;
export const FOLDED_SIDE_NAV_FILES = 2;
export const FOLDED_SIDE_NAV = 3;
export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048; export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;

4
frontend/src/css/main-side-nav-folded.css
View File

@@ -1,9 +1,11 @@
.side-panel .side-nav-folded { .side-panel .side-nav-folded {
overflow: visible; overflow: visible;
background-color: #fff;
} }
.side-panel .side-nav-folded .side-nav-con { .side-panel .side-nav-folded .side-nav-con {
overflow: visible; overflow: visible;
background-color: #fff;
} }
.side-panel .side-nav-folded .nav-item { .side-panel .side-nav-folded .nav-item {
@@ -17,6 +19,6 @@
.side-nav-folded #files-sub-nav { .side-nav-folded #files-sub-nav {
width: 240px; width: 240px;
background: #fff; background: #fff;
z-index: 2; top: 60px;
transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1); transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
} }