From 5ea295f857952d80d2423be78618e5e3841fdec7 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 22 May 2020 20:27:45 -0700 Subject: styling fixes --- frontend/src/components/NewPaste.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) (limited to 'frontend/src/components/NewPaste.js') diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index 6e1b507..e13e7df 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -43,22 +43,26 @@ class NewPaste extends React.Component { handleSubmit(event) { event.preventDefault(); - PostNewPaste(this.state) - .then((response) => { - // on success, redir - this.setState({ hash: response.data.hash }) - }).catch((error) => { - const resp = error.response - // some weird err - if (resp !== undefined) { - const errTxt = `${resp.statusText}: ${resp.data}` - this.ErrorLabel.current.showMessage(errTxt) - } else { - // some weird err (e.g. network) - this.ErrorLabel.current.showMessage(error) - } - }); + // prevent resubmission + if (!this.state.hash) { + PostNewPaste(this.state) + .then((response) => { + // on success, redir + this.setState({ hash: response.data.hash }) + }).catch((error) => { + const resp = error.response + + // some weird err + if (resp !== undefined) { + const errTxt = `${resp.statusText}: ${resp.data}` + this.ErrorLabel.current.showMessage(errTxt) + } else { + // some weird err (e.g. network) + this.ErrorLabel.current.showMessage(error) + } + }); + } } render() { -- cgit v1.2.3 From cdf8e036ff56281e9052fff7a688c6f32121428f Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 22 May 2020 23:39:35 -0700 Subject: add preview panel --- frontend/src/components/NewPaste.js | 75 ++++++++++++++++++++++++++++++++++--- 1 file changed, 69 insertions(+), 6 deletions(-) (limited to 'frontend/src/components/NewPaste.js') diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index e13e7df..e1075c4 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -5,6 +5,29 @@ import Error from './Err' import { PostNewPaste } from '../helpers/httpHelper' import PasteModal from './modals/PasteModal' import { LANGS } from './renderers/Code' +import styled from 'styled-components' +import CodeRenderer from './renderers/Code' + +const Button = styled.button` + margin-right: 0 !important; + margin-left: 2em !important; + height: calc(16px + 1.6em + 2px); +` + +const Flex = styled.div` + display: flex; + flex-direction: row; +` + +const FlexLeft = styled.div` + flex: 0 0 50%; +` + +const FlexRight = styled.div` + flex: 0 0 50%; + max-width: calc(50% - 1em + 2px); + margin-left: 2em; +` class NewPaste extends React.Component { constructor(props) { @@ -17,10 +40,13 @@ class NewPaste extends React.Component { expiry: '', hash: '', error: '', + preview: false, }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); + this.togglePreview = this.togglePreview.bind(this); + this.renderPreview = this.renderPreview.bind(this); this.ErrorLabel = React.createRef(); } @@ -41,6 +67,11 @@ class NewPaste extends React.Component { }); } + togglePreview() { + const state = this.state.preview + this.setState({ preview: !state }) + } + handleSubmit(event) { event.preventDefault(); @@ -65,26 +96,58 @@ class NewPaste extends React.Component { } } + renderPreview() { + const pasteInput = + + const preview = + + if (this.state.preview) { + return ( + + + {pasteInput} + + + {preview} + + + ); + } else { + return ( + pasteInput + ); + } + } + render() { return (
- - + {this.renderPreview()} + ); -- cgit v1.2.3 From 418fbb8817dc22c6235811d256137139c70023b6 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 22 May 2020 23:53:55 -0700 Subject: latex live preview --- frontend/src/components/NewPaste.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) (limited to 'frontend/src/components/NewPaste.js') diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index e1075c4..615dc2a 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -7,6 +7,7 @@ import PasteModal from './modals/PasteModal' import { LANGS } from './renderers/Code' import styled from 'styled-components' import CodeRenderer from './renderers/Code' +import Latex from './renderers/Latex' const Button = styled.button` margin-right: 0 !important; @@ -29,6 +30,11 @@ const FlexRight = styled.div` margin-left: 2em; ` +const LatexWrapper = styled.div` + margin-top: 2em; + margin-bottom: 2em; +` + class NewPaste extends React.Component { constructor(props) { super(props); @@ -103,10 +109,22 @@ class NewPaste extends React.Component { maxLength="100000" id="pasteInput" /> - const preview = + var preview + switch (this.state.language) { + case 'latex': + preview = + + + + break + default: + preview = + + } if (this.state.preview) { return ( -- cgit v1.2.3 From ff10e4ad18854bc675a58621e069ca13726e951b Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 23 May 2020 00:39:56 -0700 Subject: inline splitting --- frontend/src/components/NewPaste.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'frontend/src/components/NewPaste.js') diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index 615dc2a..8012b99 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -31,8 +31,7 @@ const FlexRight = styled.div` ` const LatexWrapper = styled.div` - margin-top: 2em; - margin-bottom: 2em; + margin: 2em; ` class NewPaste extends React.Component { -- cgit v1.2.3