improve about dialog (#2928)

frontend/src/components/dialog/about-dialog.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { gettext, lang, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion } from '../../utils/constants';
+
+const propTypes = {
+  onCloseAboutDialog: PropTypes.func.isRequired,
+};
+
+class AboutDialog extends React.Component {
+
+  toggle = () => {
+    this.props.onCloseAboutDialog();
+  }
+
+  render() {
+    let href = lang === lang == 'zh-cn' ? 'http://seafile.com/about/' : 'http://seafile.com/en/about/';
+
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalBody>
+          <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
+          <div className="about-content">
+            <p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p>
+            <p>{gettext('Server Version: ')}{seafileVersion}<br />© 2019 {gettext('Seafile')}</p>
+            <p><a href={href} target="_blank">{gettext('About Us')}</a></p>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+AboutDialog.propTypes = propTypes;
+
+export default AboutDialog;

frontend/src/components/side-nav-footer.js

@@ -1,67 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { gettext, siteRoot } from '../utils/constants';
-import { Modal, ModalBody } from 'reactstrap';
+import ModalPortal from './modal-portal';
-import { gettext, lang, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion } from '../utils/constants';
+import AboutDialog from './dialog/about-dialog';
 
-const propTypes = {
+class SideNavFooter extends React.Component {
-  className: PropTypes.string, 
-};
 
-class About extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      modal: false
+      isAboutDialogShow: false,
     };
   }
 
-  toggle = () => {
+  onAboutDialogToggle = () => {
-    this.setState({
+    this.setState({isAboutDialogShow: !this.state.isAboutDialogShow});
-      modal: !this.state.modal
-    });
   }
 
-  aboutUrl = () => {
-    let url;
-    if (lang == 'zh-cn') {
-      url = 'http://seafile.com/about/';
-      return url; 
-    }
-    url = 'http://seafile.com/en/about/';
-    return url; 
-  }
-
-  render() {
-    return (
-      <div>
-        <a href="#" className="item" onClick={this.toggle}>{gettext('About')}</a>
-        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
-          <ModalBody>
-            <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
-            <div className="about-content">
-              <p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p>
-              <p>{gettext('Server Version: ')}{seafileVersion}<br />© 2019 {gettext('Seafile')}</p>
-              <p><a href={this.aboutUrl()} target="_blank">{gettext('About Us')}</a></p>
-            </div>
-          </ModalBody>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-About.propTypes = propTypes;
-
-class SideNavFooter extends React.Component {
   render() {
     return (
       <div className="side-nav-footer">
         <a href={siteRoot + 'help/'} target="_blank" rel="noopener noreferrer" className="item">{gettext('Help')}</a>
-        <About />
+        <a className="item" onClick={this.onAboutDialogToggle}>{gettext('About')}</a>
         <a href={siteRoot + 'download_client_program/'} className="item last-item">
           <span aria-hidden="true" className="sf2-icon-monitor vam"></span>{' '}
           <span className="vam">{gettext('Clients')}</span>
         </a>
+        {this.state.isAboutDialogShow &&
+          <ModalPortal>
+            <AboutDialog onCloseAboutDialog={this.onAboutDialogToggle} />
+          </ModalPortal>
+        }
       </div>
     );
   }

media/css/seahub_react.css

@@ -533,9 +533,13 @@ ul,ol,li {
 }
 
 .side-nav-footer .item {
-    color:#666;
+    color: #666 !important;
     font-weight: normal;
-    margin-right:10px;
+    margin-right: 10px;
+}
+
+.side-nav-footer .item:hover {
+    text-decoration: underline !important;
 }
 
 .side-nav-footer .last-item {