From b14157797e9f6d7a940e5a890ec143b22615aaa2 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Fri, 6 Dec 2019 23:17:24 -0500
Subject: [PATCH] New: Show relative file name when selecting movie in Manual
 Import

---
 .../Interactive/InteractiveImportRow.js       |  1 +
 .../Movie/SelectMovieModalContent.css         | 33 +++++++++++++++++++
 .../Movie/SelectMovieModalContent.js          | 17 +++++++---
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
index 4e32aa912..0bc39d616 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
@@ -253,6 +253,7 @@ class InteractiveImportRow extends Component {
         <SelectMovieModal
           isOpen={isSelectMovieModalOpen}
           ids={[id]}
+          relativePath={relativePath}
           onModalClose={this.onSelectMovieModalClose}
         />
 
diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css
index 54f67bb07..fd624f2a0 100644
--- a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css
+++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css
@@ -16,3 +16,36 @@
 .scroller {
   flex: 1 1 auto;
 }
+
+.footer {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.path {
+  margin-right: 20px;
+  color: $dimColor;
+}
+
+.buttons {
+  display: flex;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .footer {
+    display: block;
+  }
+
+  .path {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .buttons {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}
diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.js b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.js
index b0f834b53..a56588d5b 100644
--- a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.js
+++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.js
@@ -37,6 +37,7 @@ class SelectMovieModalContent extends Component {
   render() {
     const {
       items,
+      relativePath,
       onMovieSelect,
       onModalClose
     } = this.props;
@@ -46,7 +47,9 @@ class SelectMovieModalContent extends Component {
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Manual Import - Select Movie
+          <div className={styles.header}>
+            Manual Import - Select Movie
+          </div>
         </ModalHeader>
 
         <ModalBody
@@ -81,10 +84,13 @@ class SelectMovieModalContent extends Component {
           </Scroller>
         </ModalBody>
 
-        <ModalFooter>
-          <Button onPress={onModalClose}>
-            Cancel
-          </Button>
+        <ModalFooter className={styles.footer}>
+          <div className={styles.path}>{relativePath}</div>
+          <div className={styles.buttons}>
+            <Button onPress={onModalClose}>
+              Cancel
+            </Button>
+          </div>
         </ModalFooter>
       </ModalContent>
     );
@@ -93,6 +99,7 @@ class SelectMovieModalContent extends Component {
 
 SelectMovieModalContent.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  relativePath: PropTypes.string.isRequired,
   onMovieSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };