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

Break Dialog out of NotificationPopup, restore NotificationPopup to original position

Browse Source
This commit is contained in:
G.Ambatte
2024-06-04 16:26:51 +12:00
parent 930709223a
commit 8685c5cae4
5 changed files with 100 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/components/dialog.jsx Normal file
View File

@@ -0,0 +1,48 @@
// Modal as a separate component
const React = require('react');
const { useState, useRef, useEffect } = React;
function Modal({ dismissKey, blocking, children, ...rest }) {
const ref = useRef();
const [open, setOpen] = useState(false);
useEffect(()=>{
if(!window || !dismissKey) return;
if(!localStorage.getItem(dismissKey)){
setOpen(true);
}
}, []);
useEffect(()=>{
if(blocking) {
modal ? ref.current?.showModal() : ref.current?.show();
} else {
ref.current?.close();
}
}, [blocking]);
const dismiss = function(){
localStorage.setItem(dismissKey, true);
setOpen(false);
};
if(!open) return;
return (
<dialog
ref={ref}
onCancel={()=>dismiss()}
{...rest}
>
<button
className='dismiss'
onClick={()=>dismiss()}
>
Close
</button>
{children}
</dialog>
);
}
export default Modal;

80
client/components/notificationPopup/notificationPopup.jsx
View File

@@ -1,80 +0,0 @@
require('./notificationPopup.less');
const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
const DISMISS_KEY = 'dismiss_notification12-04-23';
const NotificationPopup = createClass({
displayName : 'NotificationPopup',
getInitialState : function() {
return {
notifications : {}
};
},
componentDidMount : function() {
this.checkNotifications();
window.addEventListener('resize', this.checkNotifications);
},
componentWillUnmount : function() {
window.removeEventListener('resize', this.checkNotifications);
},
notifications : {
psa : function(){
return (
<>
<li key='psa'>
<em>Don't store IMAGES in Google Drive</em><br />
Google Drive is not an image service, and will block images from being used
in brews if they get more views than expected. Google has confirmed they won't fix
this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
</li>
<li key='googleDriveFolder'>
<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
We have had several reports of users losing their brews, not realizing
that they had deleted the files on their Google Drive. If you have a Homebrewery folder
on your Google Drive with *.txt files inside, <em>do not delete it</em>!
We cannot help you recover files that you have deleted from your own
Google Drive.
</li>
<li key='faq'>
<em>Protect your work! </em> <br />
If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
See the FAQ
</a> to learn how to avoid losing your work!
</li>
</>
);
}
},
checkNotifications : function(){
const hideDismiss = localStorage.getItem(DISMISS_KEY);
if(hideDismiss) return this.setState({ notifications: {} });
this.setState({
notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); }) //Convert notification functions into their return text value
});
},
dismiss : function(){
localStorage.setItem(DISMISS_KEY, true);
this.checkNotifications();
},
render : function(){
if(_.isEmpty(this.state.notifications)) return null;
return <div className='notificationPopup'>
<i className='fas fa-times dismiss' onClick={this.dismiss}/>
<i className='fas fa-info-circle info' />
<div className='header'>
<h3>Notice</h3>
<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
</div>
<ul>{_.values(this.state.notifications)}</ul>
</div>;
}
});
module.exports = NotificationPopup;

13
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -10,7 +10,7 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
//TODO: move to the brew renderer
const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
const NotificationPopup = require('../../../client/components/notificationPopup/notificationPopup.jsx');
const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
const Frame = require('react-frame-component').default;
const dedent = require('dedent-tabs').default;
const { printCurrentBrew } = require('../../../shared/helpers.js');
@@ -203,6 +203,12 @@ const BrewRenderer = (props)=>{
</div>
: null}
<ErrorBar errors={props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
{/*render in iFrame so broken code doesn't crash the site.*/}
<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
style={{ width: '100%', height: '100%', visibility: state.visibility }}
@@ -215,11 +221,6 @@ const BrewRenderer = (props)=>{
tabIndex={-1}
style={{ height: state.height }}>
<ErrorBar errors={props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
<link href={`/themes/${rendererPath}/Blank/style.css`} type='text/css' rel='stylesheet'/>
{baseThemePath &&
<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>

43
client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx Normal file
View File

@@ -0,0 +1,43 @@
require('./notificationPopup.less');
const React = require('react');
const _ = require('lodash');
import Dialog from '../../../components/dialog.jsx';
const DISMISS_KEY = 'dismiss_notification12-04-23';
const NotificationPopup = (props)=>{
return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} blocking={false} {...props} >
<div className='header'>
<h3>Notice</h3>
<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
</div>
<ul>
<li key='psa'>
<em>Don't store IMAGES in Google Drive</em><br />
Google Drive is not an image service, and will block images from being used
in brews if they get more views than expected. Google has confirmed they won't fix
this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
</li>
<li key='googleDriveFolder'>
<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
We have had several reports of users losing their brews, not realizing
that they had deleted the files on their Google Drive. If you have a Homebrewery folder
on your Google Drive with *.txt files inside, <em>do not delete it</em>!
We cannot help you recover files that you have deleted from your own
Google Drive.
</li>
<li key='faq'>
<em>Protect your work! </em> <br />
If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
See the FAQ
</a> to learn how to avoid losing your work!
</li>
</ul>
</Dialog>;
};
module.exports = NotificationPopup;

3
client/components/notificationPopup/notificationPopup.less → client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
View File

@@ -15,6 +15,7 @@
padding-left : 25px;
background-color : @blue;
color : white;
border : none;
a{
color : #e0e5c1;
font-weight : 800;
@@ -26,7 +27,7 @@
opacity : 0.8;
font-size : 2.5em;
}
i.dismiss{
.dismiss{
position : absolute;
top : 10px;
right : 10px;