f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-29 17:42:38 +00:00
Code Wiki Activity

Popup confirmation when switching between google and hb (#1155)

Browse Source 
* Popup confirmation when switching between google and hb

* Allow closing error popup.

* Up version.
This commit is contained in:
Trevor Buckner
2020-12-18 23:51:08 -05:00
committed by GitHub
parent f8f19efcaa
commit 3dba731dd7
5 changed files with 141 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -51,12 +51,13 @@ const EditPage = createClass({
return {
brew : this.props.brew,
isSaving : false,
isPending : false,
saveGoogle : this.props.brew.googleId ? true : false,
errors : null,
htmlErrors : Markdown.validate(this.props.brew.text),
url : ''
isSaving : false,
isPending : false,
saveGoogle : this.props.brew.googleId ? true : false,
confirmGoogleTransfer : false,
errors : null,
htmlErrors : Markdown.validate(this.props.brew.text),
url : ''
};
},
savedBrew : null,
@@ -135,12 +136,27 @@ const EditPage = createClass({
}
},
handleGoogleClick : function(){
this.setState((prevState)=>({
confirmGoogleTransfer : !prevState.confirmGoogleTransfer
}));
this.clearErrors();
},
toggleGoogleStorage : function(){
this.setState((prevState)=>({
saveGoogle : !prevState.saveGoogle,
isSaving : false,
errors : null
}), ()=>this.trySave());
}), ()=>this.save());
},
clearErrors : function(){
this.setState({
errors : null,
isSaving : false
});
},
save : async function(){
@@ -163,7 +179,7 @@ const EditPage = createClass({
console.log(err.status === 401
? 'Not signed in!'
: 'Error Saving to Google!');
this.setState({ errors: err });
this.setState({ errors: err, saveGoogle: false });
});
if(!res) { return; }
@@ -185,7 +201,7 @@ const EditPage = createClass({
console.log(err.status === 401
? 'Not signed in!'
: 'Error Saving to Google!');
this.setState({ errors: err });
this.setState({ errors: err, saveGoogle: false });
return;
});
@@ -236,15 +252,38 @@ const EditPage = createClass({
renderGoogleDriveIcon : function(){
if(this.state.saveGoogle) {
return <Nav.item className='googleDriveStorage' onClick={this.toggleGoogleStorage}>
return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
<img src={googleDriveActive} alt='googleDriveActive' />
{this.state.confirmGoogleTransfer &&
<div className='errorContainer'>
Would you like to transfer this brew from your Google Drive storage back to the Homebrewery?<br />
<div className='confirm' onClick={this.toggleGoogleStorage}>
Yes
</div>
<div className='deny'>
No
</div>
</div>
}
</Nav.item>;
} else {
return <Nav.item className='googleDriveStorage' onClick={this.toggleGoogleStorage}>
return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
<img src={googleDriveInactive} alt='googleDriveInactive' />
{this.state.confirmGoogleTransfer &&
<div className='errorContainer'>
Would you like to transfer this brew from the Homebrewery to your personal Google Drive storage?<br />
<div className='confirm' onClick={this.toggleGoogleStorage}>
Yes
</div>
<div className='deny'>
No
</div>
</div>
}
</Nav.item>;
}
},
renderSaveButton : function(){
@@ -258,12 +297,18 @@ const EditPage = createClass({
if(this.state.errors.status == '401'){
return <Nav.item className='save error' icon='fa-warning'>
Oops!
<div className='errorContainer'>
<div className='errorContainer' onClick={this.clearErrors}>
You must be signed in to a Google account
to save this to Google Drive!<br />
Sign in <a target='_blank' rel='noopener noreferrer'
to save this to<br />Google Drive!<br />
<a target='_blank' rel='noopener noreferrer'
href={`http://naturalcrit.com/login?redirect=${this.state.url}`}>
here</a>.
<div className='confirm' onClick={this.toggleGoogleStorage}>
Sign In
</div>
</a>
<div className='deny'>
Not Now
</div>
</div>
</Nav.item>;
}
@@ -273,7 +318,7 @@ const EditPage = createClass({
<div className='errorContainer'>
Looks like there was a problem saving. <br />
Report the issue <a target='_blank' rel='noopener noreferrer'
href={`https://github.com/stolksdorf/naturalcrit/issues/new?body=${encodeURIComponent(errMsg)}`}>
href={`https://github.com/naturalcrt/naturalcrit/issues/new?body=${encodeURIComponent(errMsg)}`}>
here
</a>.
</div>

81
client/homebrew/pages/editPage/editPage.less
View File

@@ -1,7 +1,7 @@
.editPage{
.navItem.save{
width : 105px;
width : 106px;
text-align : center;
&.saved{
cursor : initial;
@@ -10,23 +10,78 @@
&.error{
position : relative;
background-color : @red;
.errorContainer{
position : absolute;
top : 29px;
left : -20px;
z-index : 1000;
width : 135px;
padding : 6px;
background-color : #333;
a{
color : @teal;
}
}
}
}
.googleDriveStorage {
position : relative;
}
.googleDriveStorage img{
height : 20px;
padding : 0px;
margin : -5px;
}
.errorContainer{
position : absolute;
top : 100%;
left : 50%;
z-index : 1000;
width : 140px;
padding : 3px;
background-color : #333;
border : 3px solid #444;
border-radius : 5px;
transform : translate(-50% + 3px, 10px);
text-align : center;
a{
color : @teal;
}
&:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #444;
left: 53px;
top: -23px;
}
&:after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #333;
left: 53px;
top: -19px;
}
.deny {
width : 48%;
margin : 1px;
padding : 5px;
background-color : #333;
display : inline-block;
border-left : 1px solid #666;
.animate(background-color);
&:hover{
background-color : red;
}
}
.confirm {
width : 48%;
margin : 1px;
padding : 5px;
background-color : #333;
display : inline-block;
color : white;
.animate(background-color);
&:hover{
background-color : teal;
}
}
}
}