-
Notifications
You must be signed in to change notification settings - Fork 329
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3382 from G-Ambatte/addLockNotification-#3326
Add blocking notification to EditPage
- Loading branch information
Showing
12 changed files
with
189 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| // Dialog box, for popups and modal blocking messages | ||
| const React = require('react'); | ||
| const { useRef, useEffect } = React; | ||
|
|
||
| function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { | ||
| const dialogRef = useRef(null); | ||
|
|
||
| useEffect(()=>{ | ||
| if(!dismissKey || !localStorage.getItem(dismissKey)) { | ||
| blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); | ||
| } | ||
| }, []); | ||
|
|
||
| const dismiss = ()=>{ | ||
| dismissKey && localStorage.setItem(dismissKey, true); | ||
| dialogRef.current?.close(); | ||
| }; | ||
|
|
||
| return ( | ||
| <dialog ref={dialogRef} onCancel={dismiss} {...rest}> | ||
| {rest.children} | ||
| <button className='dismiss' onClick={dismiss}> | ||
| {closeText} | ||
| </button> | ||
| </dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default Dialog; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 35 additions & 70 deletions
105
client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,45 @@ | ||
| 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> | ||
| import Dialog from '../../../components/dialog.jsx'; | ||
|
|
||
| <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> | ||
| const DISMISS_KEY = 'dismiss_notification12-04-23'; | ||
| const DISMISS_BUTTON = <i className='fas fa-times dismiss' />; | ||
|
|
||
| <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! | ||
| <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: {} }); | ||
| const NotificationPopup = ()=>{ | ||
| return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} closeText={DISMISS_BUTTON} > | ||
| <div className='header'> | ||
| <i className='fas fa-info-circle info'></i> | ||
| <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> | ||
|
|
||
| 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; | ||
| <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> | ||
|
|
||
| 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>; | ||
| } | ||
| }); | ||
| <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! | ||
| <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; |
56 changes: 26 additions & 30 deletions
56
client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,60 @@ | ||
| .popups{ | ||
| .popups { | ||
| position : fixed; | ||
| top : @navbarHeight; | ||
| right : 15px; | ||
| right : 24px; | ||
| z-index : 10001; | ||
| width : 450px; | ||
| } | ||
|
|
||
| .notificationPopup{ | ||
| .notificationPopup { | ||
| position : relative; | ||
| display : inline-block; | ||
| width : 100%; | ||
| padding : 15px; | ||
| padding-bottom : 10px; | ||
| padding-left : 25px; | ||
| background-color : @blue; | ||
| color : white; | ||
| a{ | ||
| color : #e0e5c1; | ||
| background-color : @blue; | ||
| border : none; | ||
| &[open] { display : inline-block; } | ||
| a { | ||
| font-weight : 800; | ||
| color : #E0E5C1; | ||
| } | ||
| i.info{ | ||
| i.info { | ||
| position : absolute; | ||
| top : 12px; | ||
| left : 12px; | ||
| opacity : 0.8; | ||
| font-size : 2.5em; | ||
| opacity : 0.8; | ||
| } | ||
| i.dismiss{ | ||
| position : absolute; | ||
| top : 10px; | ||
| right : 10px; | ||
| cursor : pointer; | ||
| opacity : 0.6; | ||
| &:hover{ | ||
| opacity : 1; | ||
| } | ||
| } | ||
| .header { | ||
| padding-left : 50px; | ||
| button.dismiss { | ||
| position : absolute; | ||
| top : 10px; | ||
| right : 10px; | ||
| cursor : pointer; | ||
| background-color : transparent; | ||
| opacity : 0.6; | ||
| &:hover { opacity : 1; } | ||
| } | ||
| small{ | ||
| opacity : 0.7; | ||
| .header { padding-left : 50px; } | ||
| small { | ||
| font-size : 0.6em; | ||
| opacity : 0.7; | ||
| } | ||
| h3{ | ||
| h3 { | ||
| font-size : 1.1em; | ||
| font-weight : 800; | ||
| } | ||
| ul{ | ||
| ul { | ||
| margin-top : 15px; | ||
| font-size : 0.8em; | ||
| list-style-position : outside; | ||
| list-style-type : disc; | ||
| li{ | ||
| li { | ||
| margin-top : 1.4em; | ||
| font-size : 0.8em; | ||
| line-height : 1.4em; | ||
| margin-top : 1.4em; | ||
| em{ | ||
| font-weight : 800; | ||
| } | ||
| em { font-weight : 800; } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| require('./lockNotification.less'); | ||
| const React = require('react'); | ||
| import Dialog from '../../../../components/dialog.jsx'; | ||
|
|
||
| function LockNotification(props) { | ||
| props = { | ||
| shareId : 0, | ||
| disableLock : ()=>{}, | ||
| message : '', | ||
| ...props | ||
| }; | ||
|
|
||
| const removeLock = ()=>{ | ||
| alert(`Not yet implemented - ID ${props.shareId}`); | ||
| }; | ||
|
|
||
| return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' > | ||
| <h1>BREW LOCKED</h1> | ||
| <p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p> | ||
| <hr /> | ||
| <h3>LOCK REASON</h3> | ||
| <p>{props.message || 'Unable to retrieve Lock Message'}</p> | ||
| <hr /> | ||
| <p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p> | ||
| <p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p> | ||
| <button onClick={removeLock}>REQUEST LOCK REMOVAL</button> | ||
| </Dialog>; | ||
| }; | ||
|
|
||
| module.exports = LockNotification; |
27 changes: 27 additions & 0 deletions
27
client/homebrew/pages/editPage/lockNotification/lockNotification.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| .lockNotification { | ||
| z-index : 1; | ||
| width : 80%; | ||
| padding : 10px; | ||
| margin : 5% 10%; | ||
| line-height : 1.5em; | ||
| color : black; | ||
| text-align : center; | ||
| background-color : #CCCCCC; | ||
|
|
||
| &::backdrop { background-color : #000000AA; } | ||
|
|
||
| button { | ||
| margin : 10px; | ||
| color : white; | ||
| background-color : #333333; | ||
|
|
||
| &:hover { background-color : #777777; } | ||
| } | ||
|
|
||
| h1, h3 { | ||
| font-family : 'Open Sans', sans-serif; | ||
| font-weight : 800; | ||
| } | ||
| h1 { font-size : 24px; } | ||
| h3 { font-size : 18px; } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.