1
0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-23 06:31:58 +00:00

Save button now will display an error box with a custom link to an github issue

This commit is contained in:
Scott Tolksdorf
2016-05-19 08:49:55 -04:00
parent 52ff2e41e6
commit 68fc0f95d1
2 changed files with 23 additions and 20 deletions

View File

@@ -134,18 +134,24 @@ var EditPage = React.createClass({
}, },
renderSaveButton : function(){ renderSaveButton : function(){
//if(this.state.errors){ if(this.state.errors){
var errMsg = '';
try{
errMsg += this.state.errors.toString() + '\n\n';
errMsg += '```\n' + JSON.stringify(this.state.errors.response.error, null, ' ') + '\n```';
}catch(e){}
return <Nav.item className='save error' icon="fa-warning"> return <Nav.item className='save error' icon="fa-warning">
Oops! Oops!
<div className='errorContainer'> <div className='errorContainer'>
Looks like there was a problem saving. <br /> Looks like there was a problem saving. <br />
Report the issue <a target='_blank' href={'https://github.com/stolksdorf/naturalcrit/issues/new?body='+ Report the issue <a target='_blank' href={'https://github.com/stolksdorf/naturalcrit/issues/new?body='+ encodeURIComponent(errMsg)}>
encodeURIComponent(JSON.stringify(this.state.errors, null, ' '))}>
here here
</a>. </a>.
</div> </div>
</Nav.item> </Nav.item>
//} }
if(this.state.isSaving){ if(this.state.isSaving){
return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item> return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item>

View File

@@ -1,30 +1,27 @@
.editPage{ .editPage{
.navItem.save{ .navItem.save{
width : 75px; width : 75px;
text-align: center; text-align : center;
&.saved{ &.saved{
color : #666;
cursor : initial; cursor : initial;
color : #666;
} }
&.error{ &.error{
position: relative; position : relative;
background-color: @red; background-color : @red;
.errorContainer{ .errorContainer{
position: absolute; position : absolute;
top: 29px; top : 29px;
background-color: #333; left : -20px;
padding: 8px; z-index : 1000;
width: 120px; width : 120px;
left: -20px; padding : 8px;
z-index: 1000; background-color : #333;
a{ a{
color : @teal; color : @teal;
} }
} }
} }
} }
} }