0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-14 06:22:40 +00:00

Error bar added to edit page

This commit is contained in:
Scott Tolksdorf
2016-09-15 09:13:42 -04:00
parent 2a0c06cd3d
commit 9f05556bc5
4 changed files with 16 additions and 5 deletions

View File

@@ -62,6 +62,7 @@ var ErrorBar = React.createClass({
return <div className='errorBar'> return <div className='errorBar'>
<i className='fa fa-exclamation-triangle' /> <i className='fa fa-exclamation-triangle' />
<h3> There are HTML errors in your markup</h3> <h3> There are HTML errors in your markup</h3>
<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
{this.renderErrors()} {this.renderErrors()}
<hr /> <hr />
{this.renderProtip()} {this.renderProtip()}

View File

@@ -39,6 +39,10 @@
background-color : darken(@red, 8%); background-color : darken(@red, 8%);
border : none; border : none;
} }
small{
font-size: 0.6em;
opacity: 0.7;
}
.protips{ .protips{
margin-left : -80px; margin-left : -80px;
font-size : 0.6em; font-size : 0.6em;

View File

@@ -17,7 +17,7 @@ var Editor = require('../../editor/editor.jsx');
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
var HijackPrint = require('../hijackPrint.js'); var HijackPrint = require('../hijackPrint.js');
var Markdown = require('naturalcrit/markdown.js');
const SAVE_TIMEOUT = 3000; const SAVE_TIMEOUT = 3000;
@@ -47,6 +47,7 @@ var EditPage = React.createClass({
isSaving : false, isSaving : false,
isPending : false, isPending : false,
errors : null, errors : null,
htmlErrors : [],
lastUpdated : this.props.brew.updatedAt lastUpdated : this.props.brew.updatedAt
}; };
}, },
@@ -60,6 +61,10 @@ var EditPage = React.createClass({
} }
}; };
this.setState({
htmlErrors : Markdown.validate(this.state.text)
})
document.onkeydown = HijackPrint(this.props.brew.shareId); document.onkeydown = HijackPrint(this.props.brew.shareId);
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
@@ -115,7 +120,8 @@ var EditPage = React.createClass({
this.debounceSave.cancel(); this.debounceSave.cancel();
this.setState({ this.setState({
isSaving : true, isSaving : true,
errors : null errors : null,
htmlErrors : Markdown.validate(this.state.text)
}); });
request request
@@ -196,7 +202,7 @@ var EditPage = React.createClass({
<div className='content'> <div className='content'>
<SplitPane onDragFinish={this.handleSplitMove} ref='pane'> <SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/> <Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
<BrewRenderer text={this.state.text} /> <BrewRenderer text={this.state.text} errors={this.state.htmlErrors} />
</SplitPane> </SplitPane>
</div> </div>
</div> </div>

View File

@@ -3,12 +3,13 @@ var _ = require('lodash');
var cx = require('classnames'); var cx = require('classnames');
var request = require("superagent"); var request = require("superagent");
var Markdown = require('naturalcrit/markdown.js');
var Nav = require('naturalcrit/nav/nav.jsx'); var Nav = require('naturalcrit/nav/nav.jsx');
var Navbar = require('../../navbar/navbar.jsx'); var Navbar = require('../../navbar/navbar.jsx');
var EditTitle = require('../../navbar/editTitle.navitem.jsx'); var EditTitle = require('../../navbar/editTitle.navitem.jsx');
var IssueNavItem = require('../../navbar/issue.navitem.jsx'); var IssueNavItem = require('../../navbar/issue.navitem.jsx');
var Markdown = require('naturalcrit/markdown.js');
var SplitPane = require('naturalcrit/splitPane/splitPane.jsx'); var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
var Editor = require('../../editor/editor.jsx'); var Editor = require('../../editor/editor.jsx');
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -115,7 +116,6 @@ var NewPage = React.createClass({
}, },
render : function(){ render : function(){
console.log(this.state.errors);
return <div className='newPage page'> return <div className='newPage page'>
{this.renderNavbar()} {this.renderNavbar()}
<div className='content'> <div className='content'>