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

fix activities nav tabs indicator

Browse Source
This commit is contained in:
zhouwenxuan
2025-07-07 17:17:16 +08:00
parent f356efd25a
commit 432472f721
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/css/files-activities.css
View File

@@ -73,25 +73,7 @@
font-size: 14px; font-size: 14px;
} }
.nav.activities-nav-indicator-container .nav-item .nav-link { .nav.nav-indicator-container .nav-item .nav-link {
border: none; border: none;
} margin: 0;
.activities-nav-indicator-container::before {
content: '';
position: absolute;
bottom: 0;
height: 2px;
width: 80px;
background: #ED7109;
border-radius: 2px;
transition: transform 0.3s ease;
}
.activities-nav-indicator-container[data-active="all"]::before {
transform: translateX(0%);
}
.activities-nav-indicator-container[data-active="mine"]::before {
transform: translateX(108px);
} }

30
frontend/src/pages/dashboard/files-activities.js
View File

@@ -33,6 +33,8 @@ class FilesActivities extends Component {
this.curPathList = []; this.curPathList = [];
this.oldPathList = []; this.oldPathList = [];
this.availableUserEmails = new Set(); this.availableUserEmails = new Set();
this.itemRefs = [];
this.itemWidths = [];
} }
componentDidMount() { componentDidMount() {
@@ -77,12 +79,25 @@ class FilesActivities extends Component {
const isMyActivities = location.pathname.includes('my-activities'); const isMyActivities = location.pathname.includes('my-activities');
this.setState({ onlyMine: isMyActivities }); this.setState({ onlyMine: isMyActivities });
}); });
this.measureItems();
}
componentDidUpdate(prevProps, prevState) {
if (this.state.onlyMine !== prevState.onlyMine) {
this.measureItems();
}
} }
componentWillUnmount() { componentWillUnmount() {
this.unlisten && this.unlisten(); this.unlisten && this.unlisten();
} }
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
this.forceUpdate();
};
mergePublishEvents = (events) => { mergePublishEvents = (events) => {
events.forEach((item) => { events.forEach((item) => {
if (item.op_type === 'publish') { if (item.op_type === 'publish') {
@@ -239,15 +254,24 @@ class FilesActivities extends Component {
render() { render() {
const { targetUsers, availableUsers, onlyMine } = this.state; const { targetUsers, availableUsers, onlyMine } = this.state;
const activeIndex = onlyMine ? 1 : 0;
const indicatorWidth = this.itemWidths[activeIndex] || 78;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
return ( return (
<div className="main-panel-center"> <div className="main-panel-center">
<div className="cur-view-container" id="activities"> <div className="cur-view-container" id="activities">
<div className="cur-view-path"> <div className="cur-view-path">
<ul className="nav activities-nav-indicator-container position-relative" data-active={onlyMine ? 'mine' : 'all'}> <ul
<li className="nav-item"> className="nav nav-indicator-container position-relative"
style={{
'--indicator-width': `${indicatorWidth}px`,
'--indicator-offset': `${indicatorOffset}px`
}}
>
<li className="nav-item px-4" ref={el => this.itemRefs[0] = el}>
<Link to={`${siteRoot}dashboard/`} className={`nav-link${onlyMine ? '' : ' active'}`}>{gettext('All Activities')}</Link> <Link to={`${siteRoot}dashboard/`} className={`nav-link${onlyMine ? '' : ' active'}`}>{gettext('All Activities')}</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item px-4" ref={el => this.itemRefs[1] = el}>
<Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active' : ''}`}>{gettext('My Activities')}</Link> <Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active' : ''}`}>{gettext('My Activities')}</Link>
</li> </li>
</ul> </ul>