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

Optimize/tabs animation (#7998)

Browse Source 
* activities tabs

* radio group

* optimize statistic router

* statistic tabs

* devices tabs

* libraries tabs

* users tabs

* optimize users

* optimize libraries related routers

* logs tab

* virus scan & admin logs

* optimize

* revert debug code

* optimize

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-07-07 15:27:21 +08:00
committed by GitHub
parent 2a0ab1be57
commit 7d04125d73
60 changed files with 1602 additions and 1204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/pages/sys-admin/users/user-nav.js
View File

@@ -20,20 +20,43 @@ class Nav extends React.Component {
{ name: 'links', urlPart: 'shared-links', text: gettext('Shared Links') },
{ name: 'groups', urlPart: 'groups', text: gettext('Groups') }
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.measureItems();
}
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
};
render() {
const { currentItem, email, userName } = this.props;
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 56;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
return (
<div>
<div className="cur-view-path">
<h3 className="sf-heading"><Link to={`${siteRoot}sys/users/`}>{gettext('Users')}</Link> / {userName}</h3>
</div>
<ul className="nav border-bottom mx-4">
<ul
className="nav nav-indicator-container position-relative mx-4"
style={{
'--indicator-width': `${indicatorWidth}px`,
'--indicator-offset': `${indicatorOffset}px`
}}
>
{this.navItems.map((item, index) => {
return (
<li className="nav-item mr-2" key={index}>
<Link to={`${siteRoot}sys/users/${encodeURIComponent(email)}/${item.urlPart}`} className={`nav-link ${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<li
className="nav-item"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/user/${encodeURIComponent(email)}/${item.urlPart}`} className={`nav-link mx-3 ${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}