Skip to content

Commit

Permalink
02 add nav highlight
Browse files Browse the repository at this point in the history
  • Loading branch information
@Michael18811380328
Michael18811380328 committed Jun 19, 2024
1 parent b3f91b9 commit 12772b8
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 54 deletions.
42 changes: 21 additions & 21 deletions frontend/src/components/main-side-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ class MainSideNav extends React.Component {
<>
{this.state.groupItems.map(item => {
return (
<li key={item.id} className="nav-item">
<li key={item.id} className={`nav-item ${this.getActiveClass(item.name)}`}>
<Link
to={siteRoot + 'group/' + item.id + '/'}
className={`nav-link ellipsis ${this.getActiveClass(item.name)}`}
Expand All @@ -112,7 +112,7 @@ class MainSideNav extends React.Component {
})}
{canAddGroup && (
<>
<li className="nav-item" onClick={this.toggleCreateGroupDialog}>
<li className='nav-item' onClick={this.toggleCreateGroupDialog}>
<span className="nav-link" role="button">
<i className="sf2-icon-plus nav-icon" aria-hidden="true"></i>
{gettext('New Group')}
Expand Down Expand Up @@ -143,7 +143,7 @@ class MainSideNav extends React.Component {
let linksNavItem = null;
if (canGenerateShareLink) {
linksNavItem = (
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('share-admin-share-links')}`}>
<Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-share-links')}>
<span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Links')}</span>
Expand All @@ -152,7 +152,7 @@ class MainSideNav extends React.Component {
);
} else if (canGenerateUploadLink) {
linksNavItem = (
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('share-admin-upload-links')}`}>
<Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-upload-links')}>
<span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Links')}</span>
Expand All @@ -167,14 +167,14 @@ class MainSideNav extends React.Component {
style={style}
>
{canAddRepo && (
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('share-admin-libs')}`}>
<Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
<span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Libraries')}</span>
</Link>
</li>
)}
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('share-admin-folders')}`}>
<Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
<span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Folders')}</span>
Expand All @@ -189,7 +189,7 @@ class MainSideNav extends React.Component {
return (
customNavItems.map((item, idx) => {
return (
<li key={idx} className="nav-item">
<li key={idx} className='nav-item'>
<a href={item.link} className="nav-link ellipsis" title={item.desc}>
<span className={item.icon} aria-hidden="true"></span>
<span className="nav-text">{item.desc}</span>
Expand Down Expand Up @@ -220,29 +220,29 @@ class MainSideNav extends React.Component {
<div className="side-nav-con">
<h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2>
<ul className="nav nav-pills flex-column nav-container">
<li className="nav-item flex-column" id="files">
<li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
<Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
<span className="sf3-font-files sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Files')}</span>
<span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
<span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
</Link>
<ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0}}>
<ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0}}>
{canAddRepo && (
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('my-libs') || this.getActiveClass('deleted')}`}>
<Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
<span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{gettext('My Libraries')}</span>
</Link>
</li>
)}
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('shared-libs')}`}>
<Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
<span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{gettext('Shared with me')}</span>
</Link>
</li>
{canViewOrg &&
<li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
<li className={`nav-item ${this.getActiveClass('org')}`} onClick={(e) => this.tabItemClick(e, 'org')}>
<Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
<span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{gettext('Shared with all')}</span>
Expand All @@ -253,35 +253,35 @@ class MainSideNav extends React.Component {
</ul>
</li>

<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('starred')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
<span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Favorites')}</span>
</Link>
</li>
{showActivity &&
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('dashboard')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
<span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Activities')}</span>
</Link>
</li>
}
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('published')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
<span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Wikis')}</span>
</Link>
</li>
{canInvitePeople &&
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('invitations')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite Guest')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
<span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Invite Guest')}</span>
</Link>
</li>
}
<li className="nav-item flex-column" id="share-admin-nav">
<li id="share-admin-nav" className='nav-item flex-column'>
<a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
<span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Share Admin')}</span>
Expand All @@ -297,14 +297,14 @@ class MainSideNav extends React.Component {
<div className='side-nav-footer' dangerouslySetInnerHTML={{__html: sideNavFooterCustomHtml}}></div>
) : (
<ul className="nav nav-pills flex-column nav-container">
<li className="nav-item">
<li className='nav-item'>
<a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
<span className="sf3-font-help sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Help')}</span>
</a>
</li>
{enableTC &&
<li className="nav-item">
<li className='nav-item'>
<a href={`${siteRoot}terms/`} className="nav-link">
<span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Terms')}</span>
Expand All @@ -323,7 +323,7 @@ class MainSideNav extends React.Component {
})}
</>
)}
<li className="nav-item">
<li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link">
<span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Clients')}</span>
Expand Down
24 changes: 12 additions & 12 deletions frontend/src/pages/org-admin/side-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,76 +33,76 @@ class SidePanel extends React.Component {
<div className="side-nav-con">
<h3 className="sf-heading" style={{ 'color': '#f7941d' }}>{gettext('Admin')}</h3>
<ul className="nav nav-pills flex-column nav-container">
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('info')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('info')}`} to={siteRoot + 'org/info/'} onClick={() => this.tabItemClick('info')} >
<span className="sf2-icon-info"></span>
<span className="nav-text">{gettext('Info')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('statistics-admin')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('statistics-admin')}`} to={siteRoot + 'org/statistics-admin/file/'} onClick={() => this.tabItemClick('statistics-admin')} >
<span className="sf2-icon-histogram"></span>
<span className="nav-text">{gettext('Statistic')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('deviceadmin')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('deviceadmin')}`} to={siteRoot + 'org/deviceadmin/desktop-devices/'} onClick={() => this.tabItemClick('deviceadmin')} >
<span className="sf2-icon-monitor"></span>
<span className="nav-text">{gettext('Devices')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('web-settings')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('web-settings')}`} to={siteRoot + 'org/web-settings/'} onClick={() => this.tabItemClick('web-settings')} >
<span className="sf2-icon-cog2"></span>
<span className="nav-text">{gettext('Settings')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('repoadmin')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('repoadmin')}`} to={siteRoot + 'org/repoadmin/'} onClick={() => this.tabItemClick('repoadmin')} >
<span className="sf2-icon-library"></span>
<span className="nav-text">{gettext('Libraries')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('users')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('users') || this.getActiveClass('admins')}`} to={siteRoot + 'org/useradmin/'} onClick={() => this.tabItemClick('users')} >
<span className="sf2-icon-user"></span>
<span className="nav-text">{gettext('Users')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('groupadmin')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('groupadmin')}`} to={siteRoot + 'org/groupadmin/'} onClick={() => this.tabItemClick('groupadmin')}>
<span className="sf2-icon-group"></span>
<span className="nav-text">{gettext('Groups')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('departmentadmin')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('departmentadmin')}`} to={siteRoot + 'org/departmentadmin/'} onClick={() => this.tabItemClick('departmentadmin')} >
<span className="sf2-icon-organization"></span>
<span className="nav-text">{gettext('Departments')}</span>
</Link>
</li>
{enableSubscription &&
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('subscription')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('subscription')}`} to={siteRoot + 'org/subscription/'} onClick={() => this.tabItemClick('subscription')} >
<Icon symbol='currency' />
<span className="nav-text">{'付费管理'}</span>
</Link>
</li>
}
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('publinkadmin')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('publinkadmin')}`} to={siteRoot + 'org/publinkadmin/'} onClick={() => this.tabItemClick('publinkadmin')} >
<span className="sf2-icon-link"></span>
<span className="nav-text">{gettext('Links')}</span>
</Link>
</li>
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('logadmin') || this.getActiveClass('file-update') || this.getActiveClass('perm-audit')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('logadmin') || this.getActiveClass('file-update') || this.getActiveClass('perm-audit')}`} to={siteRoot + 'org/logadmin/'} onClick={() => this.tabItemClick('logadmin')} >
<span className="sf2-icon-clock"></span>
<span className="nav-text">{gettext('Logs')}</span>
</Link>
</li>
{enableMultiADFS &&
<li className="nav-item">
<li className={`nav-item ${this.getActiveClass('SAML config')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('SAML config')}`} to={siteRoot + 'org/samlconfig/'} onClick={() => this.tabItemClick('SAML config')} >
<span className="sf2-icon-cog2"></span>
<span className="nav-text">{gettext('SAML config')}</span>
Expand Down
Loading

0 comments on commit 12772b8

Please sign in to comment.