1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 23:02:26 +00:00

Optimize/tabs animation (#7998)

* 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

View File

@@ -15,15 +15,27 @@ class Nav extends React.Component {
constructor(props) {
super(props);
this.navItems = [
{ name: 'all', urlPart: 'all-libraries', text: gettext('All') },
{ name: 'wikis', urlPart: 'all-wikis', text: gettext('Wikis') },
{ name: 'system', urlPart: 'system-library', text: gettext('System') },
{ name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash') }
{ name: 'all-libraries', urlPart: 'all-libraries', text: gettext('All') },
{ name: 'all-wikis', urlPart: 'all-wikis', text: gettext('Wikis') },
{ name: 'system-library', urlPart: 'system-library', text: gettext('System') },
{ name: 'trash-libraries', urlPart: 'trash-libraries', text: gettext('Trash') }
];
this.sortOptions = [
{ value: 'file_count-desc', text: gettext('Descending by files') },
{ value: 'size-desc', text: gettext('Descending by size') }
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.measureItems();
}
componentDidUpdate(prevProps) {
if (this.props.currentItem !== prevProps.currentItem) {
this.measureItems();
}
}
onSelectSortOption = (item) => {
@@ -31,15 +43,34 @@ class Nav extends React.Component {
this.props.sortItems(sortBy);
};
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
this.forceUpdate();
};
render() {
const { currentItem, sortBy, sortOrder = 'desc' } = this.props;
const showSortIcon = currentItem == 'all' || currentItem == 'wikis';
const showSortIcon = currentItem == 'all-libraries' || currentItem == 'all-wikis';
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 className="cur-view-path tab-nav-container">
<ul className="nav">
<ul
className="nav nav-indicator-container position-relative"
style={{
'--indicator-width': `${indicatorWidth}px`,
'--indicator-offset': `${indicatorOffset}px`
}}
>
{this.navItems.map((item, index) => {
return (
<li className="nav-item" key={index}>
<li
className="nav-item"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);