Make source code modal fullscreen

ReCodEx · Oct 15, 2017 · e16fbe2 · e16fbe2
1 parent 956ab78
commit e16fbe2
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 58 deletions.
diff --git a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { canUseDOM } from 'exenv';
-import ClientOnly from '../ClientOnly';
 
 var AceEditor = null;
 if (canUseDOM) {
@@ -33,29 +32,27 @@ const getMode = ext => {
 };
 
 const SourceCodeViewer = (
-  { name, content = '', lineNumbers = true, lines = 20 },
+  { name, content = '', lineNumbers = true, height },
   { userSettings: { vimMode = false, darkTheme = false } }
 ) =>
-  <ClientOnly>
-    <AceEditor
-      value={content}
-      mode={getMode(name.split('.').pop())}
-      keyboardHandler={vimMode ? 'vim' : undefined}
-      theme={darkTheme ? 'monokai' : 'github'}
-      name="source-code-viewer"
-      width="100%"
-      height="100%"
-      minLines={10}
-      maxLines={50}
-      editorProps={{ $blockScrolling: true, $autoScrollEditorIntoView: true }}
-    />
-  </ClientOnly>;
+  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;
 
 SourceCodeViewer.propTypes = {
   name: PropTypes.string.isRequired,
   content: PropTypes.string,
   lineNumbers: PropTypes.bool,
-  lines: PropTypes.number
+  height: PropTypes.number
 };
 
 SourceCodeViewer.contextTypes = {

diff --git a/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js b/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js
@@ -16,6 +16,8 @@ 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) {
@@ -29,56 +31,110 @@ 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, code } = this.props;
+    const { height } = this.state;
     return (
       <ResourceRenderer
         loading={
-          <Modal show={show} onHide={onHide} dialogClassName={styles.modal}>
-            <Modal.Header closeButton>
-              <Modal.Title>
-                <LoadingIcon />{' '}
-                <FormattedMessage
-                  id="app.sourceCodeViewer.loading"
-                  defaultMessage="Loading ..."
-                />
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <SourceCodeViewer content="" name="" />
-            </Modal.Body>
-            <Modal.Footer>
-              <Button disabled>
-                <DownloadIcon />{' '}
-                <FormattedMessage
-                  id="app.sourceCodeViewer.downloadButton"
-                  defaultMessage="Download file"
-                />
-              </Button>
-            </Modal.Footer>
+          <Modal
+            show={show}
+            onHide={onHide}
+            dialogClassName={styles.modal}
+            onEntered={() => this.onModalEnteredWhileLoading()}
+          >
+            <div ref={header => (this.loadingHeaderRef = header)}>
+              <Modal.Header closeButton>
+                <Modal.Title>
+                  <LoadingIcon />{' '}
+                  <FormattedMessage
+                    id="app.sourceCodeViewer.loading"
+                    defaultMessage="Loading ..."
+                  />
+                </Modal.Title>
+              </Modal.Header>
+            </div>
+            <div ref={body => (this.loadingBodyRef = body)}>
+              <Modal.Body className={styles.modalBody}>
+                <SourceCodeViewer content="" name="" />
+              </Modal.Body>
+            </div>
+            <div ref={footer => (this.loadingFooterRef = footer)}>
+              <Modal.Footer>
+                <Button disabled>
+                  <DownloadIcon />{' '}
+                  <FormattedMessage
+                    id="app.sourceCodeViewer.downloadButton"
+                    defaultMessage="Download file"
+                  />
+                </Button>
+              </Modal.Footer>
+            </div>
           </Modal>
         }
         resource={[file, code]}
       >
-        {(file, code) => (
-          <Modal show={show} onHide={onHide} dialogClassName={styles.modal}>
-            <Modal.Header closeButton>
-              <Modal.Title>{file.name}</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <SourceCodeViewer content={code} name={file.name} />
-            </Modal.Body>
-            <Modal.Footer>
-              <Button onClick={() => download(file.id)}>
-                <DownloadIcon />{' '}
-                <FormattedMessage
-                  id="app.sourceCodeViewer.downloadButton"
-                  defaultMessage="Download file"
+        {(file, code) =>
+          <Modal
+            show={show}
+            onHide={onHide}
+            dialogClassName={styles.modal}
+            onEntered={() => this.onModalEntered()}
+          >
+            <div ref={header => (this.headerRef = header)}>
+              <Modal.Header closeButton>
+                <Modal.Title>
+                  {file.name}
+                </Modal.Title>
+              </Modal.Header>
+            </div>
+            <div ref={body => (this.bodyRef = body)}>
+              <Modal.Body className={styles.modalBody}>
+                <SourceCodeViewer
+                  content={code}
+                  name={file.name}
+                  height={height}
                 />
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        )}
+              </Modal.Body>
+            </div>
+            <div ref={footer => (this.footerRef = footer)}>
+              <Modal.Footer>
+                <Button onClick={() => download(file.id)}>
+                  <DownloadIcon />{' '}
+                  <FormattedMessage
+                    id="app.sourceCodeViewer.downloadButton"
+                    defaultMessage="Download file"
+                  />
+                </Button>
+              </Modal.Footer>
+            </div>
+          </Modal>}
       </ResourceRenderer>
     );
   }

diff --git a/src/containers/SourceCodeViewerContainer/sourceCode.less b/src/containers/SourceCodeViewerContainer/sourceCode.less
@@ -1,3 +1,12 @@
 .modal {
-  width: 90%;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+
+  & > :global(.modal-content) {
+    min-height: 100%;
+  }
+}
+
+.modalBody {
 }