From 6d922f80d4ec94ce78e96612fc3c026b5aae67cf Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Tue, 5 Mar 2019 11:49:24 +0800
Subject: [PATCH] style (#3043)

---
 .../dialog/list-related-file-dialog.js        | 54 +++++++++----------
 frontend/src/css/list-related-file-dialog.css | 18 +++++++
 2 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/css/list-related-file-dialog.css

diff --git a/frontend/src/components/dialog/list-related-file-dialog.js b/frontend/src/components/dialog/list-related-file-dialog.js
index 05f52b18db..be921c5a16 100644
--- a/frontend/src/components/dialog/list-related-file-dialog.js
+++ b/frontend/src/components/dialog/list-related-file-dialog.js
@@ -5,6 +5,7 @@ import Dirent from '../../models/dirent';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
+import '../../css/list-related-file-dialog.css';
 
 const propTypes = {
   relatedFiles: PropTypes.array.isRequired,
@@ -71,40 +72,35 @@ class ListRelatedFileDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle} size={this.state.direntList.length > 0 ? 'lg' : 'sm'}>
+      <Modal isOpen={true} toggle={this.toggle} size='lg'>
         <ModalHeader toggle={this.toggle}>{gettext('Related Files')}</ModalHeader>
         <ModalBody className={this.state.direntList.length > 0 ? 'list-related-file-body' : ''}>
-          {
-            this.state.direntList.length > 0 ?
-              <Table hover size="sm" className="list-related-file-table">
-                <thead>
-                  <tr>
-                    <th width='50%'>{gettext('Name')}</th>
-                    <th width='15%'>{gettext('Library Name')}</th>
-                    <th width='15%'>{gettext('Size')}</th>
-                    <th width='15%'>{gettext('Last Update')}</th>
-                    <th width='5%'></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {
-                    this.state.direntList.map((relatedFile, index) => {
-                      return (
-                        <React.Fragment key={index}>
-                          <RelatedFile relatedFile={relatedFile} onDeleteRelatedFile={this.onDeleteRelatedFile}/>
-                        </React.Fragment>
-                      );
-                    })
-                  }
-                </tbody>
-              </Table>
-              :
-              <div className="no-related-file">{gettext('No related file yet.')}</div>
-          }
+          <Table hover size="sm" className="list-related-file-table">
+            <thead>
+              <tr>
+                <th width='50%'>{gettext('Name')}</th>
+                <th width='15%'>{gettext('Library Name')}</th>
+                <th width='15%'>{gettext('Size')}</th>
+                <th width='15%'>{gettext('Last Update')}</th>
+                <th width='5%'></th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.state.direntList.map((relatedFile, index) => {
+                  return (
+                    <React.Fragment key={index}>
+                      <RelatedFile relatedFile={relatedFile} onDeleteRelatedFile={this.onDeleteRelatedFile}/>
+                    </React.Fragment>
+                  );
+                })
+              }
+            </tbody>
+          </Table>
+          <a href="#" className="add-related-file-link" onClick={this.props.addRelatedFileToggle}>{gettext('Add File')}</a>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
-          <Button color="primary" onClick={this.props.addRelatedFileToggle}>{gettext('Add File')}</Button>
         </ModalFooter>
       </Modal>
     );
diff --git a/frontend/src/css/list-related-file-dialog.css b/frontend/src/css/list-related-file-dialog.css
new file mode 100644
index 0000000000..594d4dfc60
--- /dev/null
+++ b/frontend/src/css/list-related-file-dialog.css
@@ -0,0 +1,18 @@
+.add-related-file-link {
+  display: block;
+  color: #666;
+  padding: 10px;
+  text-decoration: underline;
+}
+
+.add-related-file-link:hover {
+  color: #444;
+}
+
+.list-related-file-table {
+  margin-bottom: 0;
+}
+
+.list-related-file-table td, .list-related-file-table th {
+  padding: 10px;
+}
\ No newline at end of file