haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-13 05:39:59 +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

58
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 Group from '../models/group';
import toaster from './toast';
import { FOLDED_SIDE_NAV_FILES, FOLDED_SIDE_NAV } from '../constants/zIndexes';
import '../css/main-side-nav-folded.css';
@@ -94,26 +95,18 @@ class MainSideNavFolded extends React.Component {
let showActivity = isDocs || isPro || !isDBSqlite3;
const { groupItems, isFilesSubNavShown } = this.state;
return (
<div className="side-nav side-nav-folded">
<div className={'side-nav-con d-flex flex-column'}>
<ul className="nav nav-pills flex-column nav-container">
<li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
<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>
<div className='side-nav-folded-container h-100 position-relative'>
{/* FOLDED SIDE NAV FILES */}
<div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}>
<div className='side-nav-con p-0'>
<div className="nav nav-pills nav-container">
<ul
id="files-sub-nav"
className="sub-nav position-fixed rounded border shadow p-4 o-auto"
style={{
'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px',
'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2,
'opacity': isFilesSubNavShown ? 1 : 0.5,
'opacity': isFilesSubNavShown ? 1 : 0,
}}
ref={ref => this.filesSubNav = ref}
onMouseLeave={this.closeSubNav}
@@ -124,6 +117,22 @@ class MainSideNavFolded extends React.Component {
currentTab={this.props.currentTab}
/>
</ul>
</div>
</div>
</div>
{/* FOLDED SIDE NAVS */}
<div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}>
<div className='side-nav-con d-flex flex-column'>
<ul className="nav nav-pills flex-column nav-container">
<li className={`nav-item flex-column ${this.getActiveClass('libraries')}`} onClick={this.openSubNav}>
<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>
</li>
<li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}>
@@ -136,7 +145,11 @@ class MainSideNavFolded extends React.Component {
{showActivity &&
<>
<li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}>
<Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
<Link
className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`}
to={siteRoot + 'dashboard/'}
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>
@@ -145,7 +158,11 @@ class MainSideNavFolded extends React.Component {
}
<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')}>
<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>
@@ -153,7 +170,11 @@ class MainSideNavFolded extends React.Component {
{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')}>
<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>
@@ -178,7 +199,7 @@ class MainSideNavFolded extends React.Component {
:
<ul className="nav nav-pills flex-column nav-container">
<li className='nav-item'>
<a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
<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>
@@ -220,6 +241,7 @@ class MainSideNavFolded extends React.Component {
</div>
</div>
</div>
</div>
);
}
}

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

@@ -1,3 +1,7 @@
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;

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

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