Skip to content

Commit

Permalink
Fixed source viewer dialog box to use flex CSS instead of broken JS h…
Browse files Browse the repository at this point in the history
…eight settings.
  • Loading branch information
Martin Krulis committed Oct 30, 2017
1 parent 3ee5f67 commit d3d1fdf
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 72 deletions.
27 changes: 12 additions & 15 deletions src/components/helpers/SourceCodeViewer/SourceCodeViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 />{' '}
Expand All @@ -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 />{' '}
Expand All @@ -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>
Expand All @@ -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 />{' '}
Expand Down
30 changes: 28 additions & 2 deletions src/containers/SourceCodeViewerContainer/sourceCode.less
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

0 comments on commit d3d1fdf

Please sign in to comment.