From d3d1fdf4a0c49ab3f600a60a1c5e0c7c2fe0fedb Mon Sep 17 00:00:00 2001
From: Martin Krulis <krulis@ksi.mff.cuni.cz>
Date: Mon, 30 Oct 2017 17:55:36 +0100
Subject: [PATCH] Fixed source viewer dialog box to use flex CSS instead of
 broken JS height settings.

---
 .../SourceCodeViewer/SourceCodeViewer.js      | 27 +++----
 .../SourceCodeViewerContainer.js              | 73 +++++--------------
 .../SourceCodeViewerContainer/sourceCode.less | 30 +++++++-
 3 files changed, 58 insertions(+), 72 deletions(-)

diff --git a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js
index 386d93089..3dd20c8ee 100644
--- a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js
+++ b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js
@@ -32,27 +32,24 @@ const getMode = ext => {
 };
 
 const SourceCodeViewer = (
-  { name, content = '', lineNumbers = true, height },
+  { name, content = '', lineNumbers = true },
   { userSettings: { vimMode = false, darkTheme = false } }
 ) =>
-  height
-    ? <AceEditor
-        value={content}
-        mode={getMode(name.split('.').pop())}
-        keyboardHandler={vimMode ? 'vim' : undefined}
-        theme={darkTheme ? 'monokai' : 'github'}
-        name="source-code-viewer"
-        width="100%"
-        height={`${height}px`}
-        editorProps={{ $blockScrolling: true, $autoScrollEditorIntoView: true }}
-      />
-    : null;
+  <AceEditor
+    value={content}
+    mode={getMode(name.split('.').pop())}
+    keyboardHandler={vimMode ? 'vim' : undefined}
+    theme={darkTheme ? 'monokai' : 'github'}
+    name="source-code-viewer"
+    width="100%"
+    height="100%"
+    editorProps={{ $blockScrolling: true, $autoScrollEditorIntoView: true }}
+  />;
 
 SourceCodeViewer.propTypes = {
   name: PropTypes.string.isRequired,
   content: PropTypes.string,
-  lineNumbers: PropTypes.bool,
-  height: PropTypes.number
+  lineNumbers: PropTypes.bool
 };
 
 SourceCodeViewer.contextTypes = {
diff --git a/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js b/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js
index 69bcebb95..870cb6e47 100644
--- a/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js
+++ b/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js
@@ -16,8 +16,6 @@ import SourceCodeViewer from '../../components/helpers/SourceCodeViewer';
 import styles from './sourceCode.less';
 
 class SourceCodeViewerContainer extends Component {
-  state = { height: null };
-
   componentWillMount() {
     const { fileId, loadAsync } = this.props;
     if (fileId !== null) {
@@ -31,45 +29,13 @@ class SourceCodeViewerContainer extends Component {
     }
   }
 
-  onModalEntered() {
-    if (this.state.height === null) {
-      const { headerRef, bodyRef, footerRef } = this;
-      const height =
-        window.innerHeight -
-        headerRef.clientHeight -
-        bodyRef.clientHeight -
-        footerRef.clientHeight;
-      this.setState({ height });
-    }
-  }
-
-  onModalEnteredWhileLoading() {
-    if (this.state.height === null) {
-      const { loadingHeaderRef, loadingBodyRef, loadingFooterRef } = this;
-      const height =
-        window.innerHeight -
-        loadingHeaderRef.clientHeight -
-        loadingBodyRef.clientHeight -
-        loadingFooterRef.clientHeight;
-      this.setState({ height });
-    } else {
-      // console.log('already has height', this.state.height);
-    }
-  }
-
   render() {
     const { show, onHide, download, file, content } = this.props;
-    const { height } = this.state;
     return (
       <ResourceRenderer
         loading={
-          <Modal
-            show={show}
-            onHide={onHide}
-            dialogClassName={styles.modal}
-            onEntered={() => this.onModalEnteredWhileLoading()}
-          >
-            <div ref={header => (this.loadingHeaderRef = header)}>
+          <Modal show={show} onHide={onHide} dialogClassName={styles.modal}>
+            <div>
               <Modal.Header closeButton>
                 <Modal.Title>
                   <LoadingIcon />{' '}
@@ -80,12 +46,14 @@ class SourceCodeViewerContainer extends Component {
                 </Modal.Title>
               </Modal.Header>
             </div>
-            <div ref={body => (this.loadingBodyRef = body)}>
+            <div>
               <Modal.Body className={styles.modalBody}>
-                <SourceCodeViewer content="" name="" />
+                <div>
+                  <SourceCodeViewer content="" name="" />
+                </div>
               </Modal.Body>
             </div>
-            <div ref={footer => (this.loadingFooterRef = footer)}>
+            <div>
               <Modal.Footer>
                 <Button disabled>
                   <DownloadIcon />{' '}
@@ -101,23 +69,17 @@ class SourceCodeViewerContainer extends Component {
         resource={[file, content]}
       >
         {(file, content) =>
-          <Modal
-            show={show}
-            onHide={onHide}
-            dialogClassName={styles.modal}
-            onEntered={() => this.onModalEntered()}
-          >
-            <div ref={header => (this.headerRef = header)}>
+          <Modal show={show} onHide={onHide} dialogClassName={styles.modal}>
+            <div>
               <Modal.Header closeButton>
                 <Modal.Title>
                   {file.name}
                 </Modal.Title>
               </Modal.Header>
             </div>
-            <div ref={body => (this.bodyRef = body)}>
+            <div>
               <Modal.Body className={styles.modalBody}>
-                {content.malformedCharacters &&
-                  content.tooLarge &&
+                {(content.malformedCharacters || content.tooLarge) &&
                   <div className="callout callout-warning">
                     {content.malformedCharacters &&
                       <p>
@@ -134,14 +96,15 @@ class SourceCodeViewerContainer extends Component {
                         />
                       </p>}
                   </div>}
-                <SourceCodeViewer
-                  content={content.content}
-                  name={file.name}
-                  height={height}
-                />
+                <div>
+                  <SourceCodeViewer
+                    content={content.content}
+                    name={file.name}
+                  />
+                </div>
               </Modal.Body>
             </div>
-            <div ref={footer => (this.footerRef = footer)}>
+            <div>
               <Modal.Footer>
                 <Button onClick={() => download(file.id)}>
                   <DownloadIcon />{' '}
diff --git a/src/containers/SourceCodeViewerContainer/sourceCode.less b/src/containers/SourceCodeViewerContainer/sourceCode.less
index 3a3b74f20..50949cd75 100644
--- a/src/containers/SourceCodeViewerContainer/sourceCode.less
+++ b/src/containers/SourceCodeViewerContainer/sourceCode.less
@@ -1,12 +1,38 @@
 .modal {
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  width: auto;
+  height: auto;
+  top: 1vmax;
+  bottom: 1vmax;
+  left: 1vmax;
+  right: 1vmax;
   margin: 0;
 
   & > :global(.modal-content) {
     min-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & > div:nth-child(2) {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
 
 .modalBody {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  & > *:last-child {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      flex-grow: 1;
+    }
+  }
 }