haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 01:41:39 +00:00
Code Issues Releases Wiki Activity

add About dialog (#6972)

Browse Source 
* add About dialog

* lint fix
This commit is contained in:
lian
2024-10-31 17:24:15 +08:00
committed by GitHub
parent 6b2dfdc31d
commit b57fc52066
2 changed files with 208 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
frontend/src/components/main-side-nav-folded.js
View File

@@ -1,11 +1,13 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ModalPortal from './modal-portal';
import { Link } from '@gatsbyjs/reach-router'; import { Link } from '@gatsbyjs/reach-router';
import { gettext, siteRoot, canInvitePeople, enableTC, sideNavFooterCustomHtml, import { gettext, siteRoot, canInvitePeople, enableTC, sideNavFooterCustomHtml,
isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl, curNoteMsg } from '../utils/constants'; isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl, curNoteMsg } from '../utils/constants';
import { SIDE_PANEL_FOLDED_WIDTH, SUB_NAV_ITEM_HEIGHT } from '../constants'; import { SIDE_PANEL_FOLDED_WIDTH, SUB_NAV_ITEM_HEIGHT } from '../constants';
import Tip from './side-nav-icon-tip'; import Tip from './side-nav-icon-tip';
import FilesSubNav from '../components/files-sub-nav'; import FilesSubNav from '../components/files-sub-nav';
import AboutDialog from './dialog/about-dialog';
import { seafileAPI } from '../utils/seafile-api'; import { seafileAPI } from '../utils/seafile-api';
import { Utils } from '../utils/utils'; import { Utils } from '../utils/utils';
import Group from '../models/group'; import Group from '../models/group';
@@ -28,7 +30,8 @@ class MainSideNavFolded extends React.Component {
super(props); super(props);
this.state = { this.state = {
groupItems: [], groupItems: [],
isFilesSubNavShown: false isFilesSubNavShown: false,
isAboutDialogShow: false,
}; };
} }
@@ -92,58 +95,64 @@ class MainSideNavFolded extends React.Component {
return this.props.currentTab === tab ? 'active' : ''; return this.props.currentTab === tab ? 'active' : '';
}; };
toggleAboutDialog = (e) => {
e.preventDefault();
this.setState({ isAboutDialogShow: !this.state.isAboutDialogShow });
};
render() { render() {
let showActivity = isDocs || isPro || !isDBSqlite3; let showActivity = isDocs || isPro || !isDBSqlite3;
const { groupItems, isFilesSubNavShown } = this.state; const { groupItems, isFilesSubNavShown } = this.state;
return ( return (
<div className='side-nav-folded-container h-100 position-relative'> <Fragment>
{/* FOLDED SIDE NAV FILES */} <div className='side-nav-folded-container h-100 position-relative'>
<div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}> {/* FOLDED SIDE NAV FILES */}
<div className='side-nav-con p-0'> <div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}>
<div className="nav nav-pills nav-container"> <div className='side-nav-con p-0'>
<ul <div className="nav nav-pills nav-container">
id="files-sub-nav" <ul
className="sub-nav position-fixed rounded border shadow p-4 o-auto" id="files-sub-nav"
style={{ className="sub-nav position-fixed rounded border shadow p-4 o-auto"
'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px', style={{
'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2, 'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px',
'opacity': isFilesSubNavShown ? 1 : 0, 'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2,
}} 'opacity': isFilesSubNavShown ? 1 : 0,
ref={ref => this.filesSubNav = ref} }}
onMouseLeave={this.closeSubNav} ref={ref => this.filesSubNav = ref}
> onMouseLeave={this.closeSubNav}
<FilesSubNav >
groupItems={groupItems} <FilesSubNav
tabItemClick={this.tabItemClick} groupItems={groupItems}
currentTab={this.props.currentTab} tabItemClick={this.tabItemClick}
/> currentTab={this.props.currentTab}
</ul> />
</ul>
</div>
</div> </div>
</div> </div>
</div> {/* FOLDED SIDE NAVS */}
{/* FOLDED SIDE NAVS */} <div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}>
<div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}> <div className='side-nav-con d-flex flex-column'>
<div className='side-nav-con d-flex flex-column'> <ul className="nav nav-pills flex-column nav-container">
<ul className="nav nav-pills flex-column nav-container"> <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
<li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}> <Link
<Link to={ siteRoot + 'libraries/' }
to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} onClick={(e) => this.tabItemClick(e, 'libraries')}
onClick={(e) => this.tabItemClick(e, 'libraries')} onMouseEnter={this.openSubNav}
onMouseEnter={this.openSubNav} >
> <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
<span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span> </Link>
</Link> </li>
</li>
<li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}> <li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}>
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}> <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
<span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span> <span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span>
<Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} /> <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
</Link> </Link>
</li> </li>
{showActivity && {showActivity &&
<> <>
<li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}> <li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}>
<Link <Link
@@ -156,20 +165,20 @@ class MainSideNavFolded extends React.Component {
</Link> </Link>
</li> </li>
</> </>
} }
<li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}> <li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}>
<Link <Link
className={`nav-link ellipsis ${this.getActiveClass('published')}`} className={`nav-link ellipsis ${this.getActiveClass('published')}`}
to={siteRoot + 'published/'} to={siteRoot + 'published/'}
onClick={(e) => this.tabItemClick(e, 'published')} onClick={(e) => this.tabItemClick(e, 'published')}
> >
<span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span> <span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
<Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} /> <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
</Link> </Link>
</li> </li>
{canInvitePeople && {canInvitePeople &&
<li className={`nav-item ${this.getActiveClass('invitations')}`} onMouseEnter={this.closeSubNav}> <li className={`nav-item ${this.getActiveClass('invitations')}`} onMouseEnter={this.closeSubNav}>
<Link <Link
className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} className={`nav-link ellipsis ${this.getActiveClass('invitations')}`}
@@ -180,9 +189,9 @@ class MainSideNavFolded extends React.Component {
<Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} /> <Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
</Link> </Link>
</li> </li>
} }
{customNavItems && {customNavItems &&
customNavItems.map((item, idx) => { customNavItems.map((item, idx) => {
return ( return (
<li key={idx} className='nav-item'> <li key={idx} className='nav-item'>
@@ -192,20 +201,20 @@ class MainSideNavFolded extends React.Component {
</li> </li>
); );
}) })
} }
</ul> </ul>
{sideNavFooterCustomHtml ? {sideNavFooterCustomHtml ?
<div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div> <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
: :
<ul className="nav nav-pills flex-column nav-container"> <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')}> <a className='nav-link' href={siteRoot + 'help/'} title={gettext('Help')}>
<span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span> <span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
<Tip target="main-side-nav-folded-help" text={gettext('Help')} /> <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
</a> </a>
</li> </li>
{enableTC && {enableTC &&
<> <>
<li className='nav-item'> <li className='nav-item'>
<a href={`${siteRoot}terms/`} className="nav-link"> <a href={`${siteRoot}terms/`} className="nav-link">
@@ -214,24 +223,36 @@ class MainSideNavFolded extends React.Component {
</a> </a>
</li> </li>
</> </>
} }
<li className='nav-item'> <li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link"> <a href={siteRoot + 'download_client_program/'} className="nav-link">
<span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span> <span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
<Tip target="main-side-nav-folded-clients" text={gettext('Clients')} /> <Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
</a> </a>
</li> </li>
</ul> <li className='nav-item'>
} <a href="#" className="nav-link" onClick={this.toggleAboutDialog}>
<div <span className="sf3-font-about sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-about"></span>
className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" <Tip target="main-side-nav-folded-about" text={gettext('About')} />
onClick={this.props.toggleFoldSideNav} </a>
> </li>
<img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} /> </ul>
}
<div
className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center"
onClick={this.props.toggleFoldSideNav}
>
<img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> {this.state.isAboutDialogShow && (
<ModalPortal>
<AboutDialog onCloseAboutDialog={this.toggleAboutDialog} />
</ModalPortal>
)}
</Fragment>
); );
} }
} }

179
frontend/src/components/main-side-nav.js
View File

@@ -1,5 +1,6 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ModalPortal from './modal-portal';
import { Link } from '@gatsbyjs/reach-router'; import { Link } from '@gatsbyjs/reach-router';
import { import {
gettext, siteRoot, canAddGroup, canAddRepo, canShareRepo, gettext, siteRoot, canAddGroup, canAddRepo, canShareRepo,
@@ -12,6 +13,7 @@ import { Utils } from '../utils/utils';
import Group from '../models/group'; import Group from '../models/group';
import toaster from './toast'; import toaster from './toast';
import CreateGroupDialog from '../components/dialog/create-group-dialog'; import CreateGroupDialog from '../components/dialog/create-group-dialog';
import AboutDialog from './dialog/about-dialog';
import FilesSubNav from '../components/files-sub-nav'; import FilesSubNav from '../components/files-sub-nav';
import { SUB_NAV_ITEM_HEIGHT } from '../constants'; import { SUB_NAV_ITEM_HEIGHT } from '../constants';
@@ -27,6 +29,7 @@ class MainSideNav extends React.Component {
this.state = { this.state = {
filesNavUnfolded: false, filesNavUnfolded: false,
isAboutDialogShow: false,
sharedExtended: false, sharedExtended: false,
groupItems: [], groupItems: [],
isCreateGroupDialogOpen: false, isCreateGroupDialogOpen: false,
@@ -200,105 +203,121 @@ class MainSideNav extends React.Component {
}); });
}; };
toggleAboutDialog = (e) => {
e.preventDefault();
this.setState({ isAboutDialogShow: !this.state.isAboutDialogShow });
};
render() { render() {
let showActivity = isDocs || isPro || !isDBSqlite3; let showActivity = isDocs || isPro || !isDBSqlite3;
const { filesNavUnfolded, groupItems } = this.state; const { filesNavUnfolded, groupItems } = this.state;
return ( return (
<div className="side-nav"> <Fragment>
<div className={'side-nav-con d-flex flex-column'}> <div className="side-nav">
<h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2> <div className={'side-nav-con d-flex flex-column'}>
<ul className="nav nav-pills flex-column nav-container"> <h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2>
<li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}> <ul className="nav nav-pills flex-column nav-container">
<Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}> <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
<span className="sf3-font-files sf3-font" aria-hidden="true"></span> <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
<span className="nav-text">{gettext('Files')}</span> <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
<span className={`toggle-icon sf3-font sf3-font-down ${filesNavUnfolded ? '' : 'rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span> <span className="nav-text">{gettext('Files')}</span>
</Link> <span className={`toggle-icon sf3-font sf3-font-down ${filesNavUnfolded ? '' : 'rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
<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 }}> </Link>
<FilesSubNav <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 }}>
groupItems={groupItems} <FilesSubNav
tabItemClick={this.tabItemClick} groupItems={groupItems}
currentTab={this.props.currentTab} tabItemClick={this.tabItemClick}
/> currentTab={this.props.currentTab}
{this.renderAddGroup()} />
</ul> {this.renderAddGroup()}
</li> </ul>
</li>
<li className={`nav-item ${this.getActiveClass('starred')}`}> <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')}> <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="sf3-font-starred sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Favorites')}</span> <span className="nav-text">{gettext('Favorites')}</span>
</Link> </Link>
</li> </li>
{showActivity && {showActivity &&
<li className={`nav-item ${this.getActiveClass('dashboard')}`}> <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')}> <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="sf3-font-activities sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Activities')}</span> <span className="nav-text">{gettext('Activities')}</span>
</Link> </Link>
</li> </li>
} }
<li className={`nav-item ${this.getActiveClass('published')}`}> <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')}> <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="sf3-font-wiki sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Wikis')}</span> <span className="nav-text">{gettext('Wikis')}</span>
</Link> </Link>
</li>
{canInvitePeople &&
<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 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>
<span className={`toggle-icon sf3-font sf3-font-down ${this.state.sharedExtended ? '' : 'rotate-90'}`} aria-hidden="true"></span>
</a>
{this.renderSharedAdmin()}
</li>
{customNavItems && this.renderCustomNavItems()}
</ul>
<h2 className="mb-2 pt-1 px-2 font-weight-normal heading">{gettext('Help and resources')}</h2>
{sideNavFooterCustomHtml ? (
<div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
) : (
<ul className="nav nav-pills flex-column nav-container">
<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> </li>
{enableTC && {canInvitePeople &&
<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 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>
<span className={`toggle-icon sf3-font sf3-font-down ${this.state.sharedExtended ? '' : 'rotate-90'}`} aria-hidden="true"></span>
</a>
{this.renderSharedAdmin()}
</li>
{customNavItems && this.renderCustomNavItems()}
</ul>
<h2 className="mb-2 pt-1 px-2 font-weight-normal heading">{gettext('Help and resources')}</h2>
{sideNavFooterCustomHtml ? (
<div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
) : (
<ul className="nav nav-pills flex-column nav-container">
<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"> <a href={`${siteRoot}terms/`} className="nav-link">
<span className="sf3-font-terms sf3-font" aria-hidden="true"></span> <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Terms')}</span> <span className="nav-text">{gettext('Terms')}</span>
</a> </a>
</li> </li>
} }
<li className='nav-item'> <li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link"> <a href={siteRoot + 'download_client_program/'} className="nav-link">
<span className="sf3-font-devices sf3-font" aria-hidden="true"></span> <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('Clients')}</span> <span className="nav-text">{gettext('Clients')}</span>
</a> </a>
</li> </li>
</ul> <li className='nav-item'>
) <a href="#" className="nav-link" onClick={this.toggleAboutDialog}>
} <span className="sf3-font-about sf3-font" aria-hidden="true"></span>
<span className="nav-text">{gettext('About')}</span>
<div className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" onClick={this.props.toggleFoldSideNav}> </a>
<img className="mr-2" src={`${mediaUrl}img/close-sidebar.svg`} width="20" alt="" /> </li>
<span>{gettext('Fold the sidebar')}</span> </ul>
)
}
<div className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" onClick={this.props.toggleFoldSideNav}>
<img className="mr-2" src={`${mediaUrl}img/close-sidebar.svg`} width="20" alt="" />
<span>{gettext('Fold the sidebar')}</span>
</div>
</div> </div>
</div> </div>
</div> {this.state.isAboutDialogShow && (
<ModalPortal>
<AboutDialog onCloseAboutDialog={this.toggleAboutDialog} />
</ModalPortal>
)}
</Fragment>
); );
} }
} }