haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 14:50:29 +00:00
Code Issues Releases Wiki Activity

fix nav tabs margin and indicator, animate notification tabs (#8024)

Browse Source 
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-07-09 15:30:02 +08:00
committed by GitHub
parent f9a9a45ec4
commit 382213eda2
14 changed files with 114 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/common/notification-popover/index.css
View File

@@ -198,6 +198,10 @@
color: #ED7109;
}
.notification-container .nav-indicator-container::before {
bottom: 0px;
}
@media (max-width: 768px) {
.notification-container {
right: -60px;

36
frontend/src/components/common/notification-popover/index.js
View File

@@ -3,13 +3,20 @@ import PropTypes from 'prop-types';
import { Popover } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import SeahubModalCloseIcon from '../seahub-modal-close';
import { NAV_ITEM_MARGIN } from '../../../constants';
import './index.css';
class NotificationPopover extends React.Component {
constructor(props) {
super(props);
this.itemRefs = [];
}
componentDidMount() {
document.addEventListener('mousedown', this.handleOutsideClick, true);
this.forceUpdate();
}
componentWillUnmount() {
@@ -39,6 +46,11 @@ class NotificationPopover extends React.Component {
render() {
const { headerText = '', bodyText = '', footerText = '', currentTab, generalNoticeListUnseen, discussionNoticeListUnseen } = this.props;
const activeIndex = currentTab === 'general' ? 0 : 1;
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<Popover
className="notification-wrapper"
@@ -55,15 +67,29 @@ class NotificationPopover extends React.Component {
</div>
<div className="notification-body">
<div className="mark-notifications">
<ul className="nav">
<li className="nav-item" onClick={() => this.tabItemClick('general')}>
<span className={`nav-link ${currentTab === 'general' ? 'active' : ''}`}>
<ul
className="nav nav-indicator-container position-relative"
style={{
'--indicator-width': `${indicatorWidth}px`,
'--indicator-offset': `${indicatorOffset}px`
}}
>
<li
className="nav-item mx-3"
ref={el => this.itemRefs[0] = el}
onClick={() => this.tabItemClick('general')}
>
<span className={`m-0 nav-link ${currentTab === 'general' ? 'active' : ''}`}>
{gettext('General')}
{generalNoticeListUnseen > 0 && <span>({generalNoticeListUnseen})</span>}
</span>
</li>
<li className="nav-item" onClick={() => this.tabItemClick('discussion')}>
<span className={`nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
<li
className="nav-item mx-3"
ref={el => this.itemRefs[1] = el}
onClick={() => this.tabItemClick('discussion')}
>
<span className={`m-0 nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
{gettext('Discussion')}
{discussionNoticeListUnseen > 0 && <span>({discussionNoticeListUnseen})</span>}
</span>

2
frontend/src/constants/index.js
View File

@@ -75,3 +75,5 @@ export const SEARCH_FILTER_BY_DATE_TYPE_KEY = {
};
export const SEARCH_FILTERS_SHOW_KEY = 'search_filters_show';
export const NAV_ITEM_MARGIN = 12;

7
frontend/src/css/layout.css
View File

@@ -356,14 +356,19 @@ img[src=""],img:not([src]) { /* for first loading img*/
color: #666;
}
.nav-indicator-container .nav-item {
min-width: fit-content;
}
.nav-indicator-container .nav-item .nav-link {
border: none;
min-width: fit-content;
}
.nav-indicator-container::before {
content: '';
position: absolute;
bottom: 0;
bottom: -2px;
height: 2px;
width: var(--indicator-width);
background: #ED7109;

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

@@ -13,6 +13,8 @@ import '../../css/files-activities.css';
dayjs.locale(window.app.config.lang);
const NAV_ITEM_MARGIN = 16;
class FilesActivities extends Component {
constructor(props) {
@@ -34,7 +36,6 @@ class FilesActivities extends Component {
this.oldPathList = [];
this.availableUserEmails = new Set();
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
@@ -80,24 +81,13 @@ class FilesActivities extends Component {
this.setState({ onlyMine: isMyActivities });
});
this.measureItems();
}
componentDidUpdate(prevProps, prevState) {
if (this.state.onlyMine !== prevState.onlyMine) {
this.measureItems();
}
this.forceUpdate();
}
componentWillUnmount() {
this.unlisten && this.unlisten();
}
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
this.forceUpdate();
};
mergePublishEvents = (events) => {
events.forEach((item) => {
if (item.op_type === 'publish') {
@@ -255,8 +245,9 @@ class FilesActivities extends Component {
render() {
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);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="main-panel-center">
<div className="cur-view-container" id="activities">
@@ -268,10 +259,10 @@ class FilesActivities extends Component {
'--indicator-offset': `${indicatorOffset}px`
}}
>
<li className="nav-item px-4" ref={el => this.itemRefs[0] = el}>
<li className="nav-item mx-4" ref={el => this.itemRefs[0] = el}>
<Link to={`${siteRoot}dashboard/`} className={`nav-link${onlyMine ? '' : ' active'}`}>{gettext('All Activities')}</Link>
</li>
<li className="nav-item px-4" ref={el => this.itemRefs[1] = el}>
<li className="nav-item mx-4" ref={el => this.itemRefs[1] = el}>
<Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active' : ''}`}>{gettext('My Activities')}</Link>
</li>
</ul>

13
frontend/src/pages/sys-admin/admin-logs/logs-nav.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired
@@ -16,18 +17,18 @@ class LogsNav extends React.Component {
{ name: 'login', urlPart: 'admin-logs/login', text: gettext('Admin Login Logs') },
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 0);
this.forceUpdate();
}
render() {
const { currentItem } = this.props;
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 167;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
<ul
@@ -40,11 +41,11 @@ class LogsNav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

17
frontend/src/pages/sys-admin/devices/devices-nav.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext, isPro } from '../../../utils/constants';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired
@@ -19,22 +20,18 @@ class Nav extends React.Component {
this.navItems.push({ name: 'errors', urlPart: 'errors', text: gettext('Errors') });
}
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.measureItems();
this.forceUpdate();
}
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
};
render() {
const { currentItem } = this.props;
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 77;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
@@ -48,11 +45,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/devices/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/devices/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

13
frontend/src/pages/sys-admin/links/links-nav.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import SortMenu from '../../../components/sort-menu';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired,
@@ -27,11 +28,10 @@ class Nav extends React.Component {
{ value: 'view_cnt-desc', text: gettext('Descending by visit count') }
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 98);
this.forceUpdate();
}
onSelectSortOption = (item) => {
@@ -43,8 +43,9 @@ class Nav extends React.Component {
const { currentItem, sortBy, sortOrder } = this.props;
const showSortIcon = currentItem == 'shareLinks';
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 98;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
<ul
@@ -57,11 +58,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

13
frontend/src/pages/sys-admin/logs-page/logs-nav.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired
@@ -20,18 +21,18 @@ class Nav extends React.Component {
{ name: 'groupMember', urlPart: 'logs/group-member-audit', text: gettext('Group Member') },
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth) || 59;
this.forceUpdate();
}
render() {
const { currentItem } = this.props;
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 59;
const leftOffset = this.itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const leftOffset = itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
<ul
@@ -44,11 +45,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

24
frontend/src/pages/sys-admin/repos/repos-nav.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import SortMenu from '../../../components/sort-menu';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired,
@@ -25,17 +26,10 @@ class Nav extends React.Component {
{ 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();
}
this.forceUpdate();
}
onSelectSortOption = (item) => {
@@ -43,17 +37,13 @@ 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-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);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
@@ -67,11 +57,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

17
frontend/src/pages/sys-admin/statistic/statistic-nav.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired
@@ -20,22 +21,18 @@ class Nav extends React.Component {
{ name: 'metricsStatistic', urlPart: 'statistics/metrics', text: gettext('Metrics') },
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.measureItems();
this.forceUpdate();
}
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 0);
};
render() {
const { currentItem } = this.props;
const activeIndex = this.navItems.findIndex(item => item.name === currentItem);
const indicatorWidth = this.itemWidths[activeIndex] || 56;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
@@ -49,11 +46,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

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

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
email: PropTypes.string,
@@ -21,22 +22,18 @@ class Nav extends React.Component {
{ name: 'groups', urlPart: 'groups', text: gettext('Groups') }
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.measureItems();
this.forceUpdate();
}
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);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div>
<div className="cur-view-path">
@@ -52,11 +49,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
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>
<Link to={`${siteRoot}sys/user/${encodeURIComponent(email)}/${item.urlPart}`} className={`nav-link m-0 ${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext, haveLDAP, isDefaultAdmin } from '../../../utils/constants';
import SortMenu from '../../../components/sort-menu';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired,
@@ -35,11 +36,10 @@ class Nav extends React.Component {
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.measureItems();
this.forceUpdate();
}
onSelectSortOption = (item) => {
@@ -47,16 +47,13 @@ class Nav extends React.Component {
this.props.sortItems(sortBy, sortOrder);
};
measureItems = () => {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
};
render() {
const { currentItem, sortBy, sortOrder } = this.props;
const showSortIcon = currentItem == 'database' || currentItem == 'ldap-imported';
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 85;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
@@ -70,11 +67,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}

13
frontend/src/pages/sys-admin/virus-scan/nav.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { siteRoot, gettext } from '../../../utils/constants';
import { NAV_ITEM_MARGIN } from '../../../constants';
const propTypes = {
currentItem: PropTypes.string.isRequired
@@ -16,18 +17,18 @@ class Nav extends React.Component {
{ name: 'unhandled', urlPart: 'unhandled', text: gettext('Unhandled') }
];
this.itemRefs = [];
this.itemWidths = [];
}
componentDidMount() {
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth) || 59;
this.forceUpdate();
}
render() {
const { currentItem } = this.props;
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
const indicatorWidth = this.itemWidths[activeIndex] || 59;
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0);
const itemWidths = this.itemRefs.map(ref => ref?.offsetWidth);
const indicatorWidth = itemWidths[activeIndex];
const indicatorOffset = itemWidths.slice(0, activeIndex).reduce((prev, cur) => prev + cur, 0) + (2 * activeIndex + 1) * NAV_ITEM_MARGIN;
return (
<div className="cur-view-path tab-nav-container">
<ul
@@ -40,11 +41,11 @@ class Nav extends React.Component {
{this.navItems.map((item, index) => {
return (
<li
className="nav-item"
className="nav-item mx-3"
key={index}
ref={el => this.itemRefs[index] = el}
>
<Link to={`${siteRoot}sys/virus-files/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
<Link to={`${siteRoot}sys/virus-files/${item.urlPart}/`} className={`m-0 nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
</li>
);
})}