From cfc6f2221f8067dacec9964d7ba6ecb43bb3efce Mon Sep 17 00:00:00 2001
From: Michael An <37589122+Michael18811380328@users.noreply.github.com>
Date: Sat, 29 Dec 2018 18:02:10 +0800
Subject: [PATCH] fix-style (#2737)

---
 frontend/src/components/dialog/add-related-file-dialog.js | 5 +++++
 frontend/src/components/dirent-detail/detail-list-view.js | 1 +
 frontend/src/css/dirent-detail.css                        | 4 ++++
 frontend/src/css/file-chooser.css                         | 1 +
 4 files changed, 11 insertions(+)

diff --git a/frontend/src/components/dialog/add-related-file-dialog.js b/frontend/src/components/dialog/add-related-file-dialog.js
index 7266589f9d..93b4b321cb 100644
--- a/frontend/src/components/dialog/add-related-file-dialog.js
+++ b/frontend/src/components/dialog/add-related-file-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
@@ -10,6 +11,7 @@ const propTypes = {
   filePath: PropTypes.string.isRequired,
   toggleCancel: PropTypes.func.isRequired,
   onRelatedFileChange: PropTypes.func.isRequired,
+  dirent: PropTypes.object.isRequired,
 };
 
 class AddRelatedFileDialog extends React.Component {
@@ -73,10 +75,13 @@ class AddRelatedFileDialog extends React.Component {
   }
 
   render() {
+    let subtitle = gettext('Select related file for {placeholder}');
+    subtitle = subtitle.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     return (
       <Modal isOpen={true} className="sf-add-related-file">
         <ModalHeader toggle={this.toggle}>{gettext('Select File')}</ModalHeader>
         <ModalBody>
+          <div className="related-file-subtitle" dangerouslySetInnerHTML={{__html: subtitle}}></div>
           <FileChooser
             isShowFile={this.state.isShowFile}
             repoID={this.props.repoID}
diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js
index 1d003b269b..3e5df92880 100644
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -143,6 +143,7 @@ class DetailListView extends React.Component {
               repoID={this.props.repoID}
               toggleCancel={this.onAddRelatedFileToggle}
               onRelatedFileChange={this.props.onRelatedFileChange}
+              dirent={this.props.dirent}
             />
           }
           {
diff --git a/frontend/src/css/dirent-detail.css b/frontend/src/css/dirent-detail.css
index 94a2d9fbac..1854dd1bd4 100644
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -148,4 +148,8 @@
 
 .sf-add-related-file .alert {
   margin: 0.5rem;
+}
+
+.sf-add-related-file .related-file-subtitle {
+  margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/frontend/src/css/file-chooser.css b/frontend/src/css/file-chooser.css
index b8b67af58f..514741b692 100644
--- a/frontend/src/css/file-chooser.css
+++ b/frontend/src/css/file-chooser.css
@@ -46,6 +46,7 @@
   display: inline-block;
   height: 1.5rem;
   cursor: pointer;
+  padding: 0 5px;
 }
 
 .file-chooser-item .item-info:hover {