From 963ec282d3b1054293d18dd6da24fe8c0955e379 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 29 Mar 2024 20:06:16 +1300 Subject: [PATCH 01/44] Initial functionality pass --- client/homebrew/pages/editPage/editPage.jsx | 49 +++++++++++-------- .../lockNotification/lockNotification.jsx | 22 +++++++++ .../lockNotification/lockNotification.less | 17 +++++++ 3 files changed, 67 insertions(+), 21 deletions(-) create mode 100644 client/homebrew/pages/editPage/lockNotification/lockNotification.jsx create mode 100644 client/homebrew/pages/editPage/lockNotification/lockNotification.less diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index d5af310b5..a18c7f1e9 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -20,6 +20,8 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx'); const Editor = require('../../editor/editor.jsx'); const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); +const LockNotification = require('./lockNotification/lockNotification.jsx'); + const Markdown = require('naturalcrit/markdown.js'); const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js'); @@ -51,7 +53,8 @@ const EditPage = createClass({ autoSave : true, autoSaveWarning : false, unsavedTime : new Date(), - currentEditorPage : 0 + currentEditorPage : 0, + displayLockMessage : this.props.brew.lock || false }; }, savedBrew : null, @@ -390,26 +393,30 @@ const EditPage = createClass({ {this.renderNavbar()}
- - - - + {this.state.displayLockMessage ? + this.setState({ displayLockMessage: false })}/> + : + + + + + }
; } diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx new file mode 100644 index 000000000..73617e932 --- /dev/null +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -0,0 +1,22 @@ +require('./lockNotification.less'); +const React = require('react'); +const createClass = require('create-react-class'); + +const LockNotification = createClass({ + displayName : 'LockNotification', + getInitialState : function() { + return { + disableLock : ()=>{} + }; + }, + + render : function(){ + return
+

BREW LOCKED

+

{this.props.message || 'Unable to retrieve Lock Message'}

+ +
; + } +}); + +module.exports = LockNotification; diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.less b/client/homebrew/pages/editPage/lockNotification/lockNotification.less new file mode 100644 index 000000000..dac15f063 --- /dev/null +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.less @@ -0,0 +1,17 @@ +.lockNotification { + background-color: #ccc; + color: black; + padding: 10px; + margin: 25px 100px; + text-align: center; + + button { + background-color: #333; + color: white; + margin-top: 10px; + + &:hover { + background-color: #777; + } + } +} \ No newline at end of file From 4bc07ceb4e3cde81c586ea153db7529124c5e335 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 20 Apr 2024 13:49:36 +1200 Subject: [PATCH 02/44] Nudge line and button spacing --- .../pages/editPage/lockNotification/lockNotification.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.less b/client/homebrew/pages/editPage/lockNotification/lockNotification.less index dac15f063..60919aab8 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.less +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.less @@ -4,11 +4,12 @@ padding: 10px; margin: 25px 100px; text-align: center; + line-height: 1.5em; button { background-color: #333; color: white; - margin-top: 10px; + margin: 10px; &:hover { background-color: #777; From b4b4fbe3754efe1a0cac0d50648b7c3238c1e2bc Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 20 Apr 2024 13:50:10 +1200 Subject: [PATCH 03/44] Update fixed text and add REMOVAL button (NYI) --- .../editPage/lockNotification/lockNotification.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index 73617e932..810b433ec 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -10,11 +10,19 @@ const LockNotification = createClass({ }; }, + removeLock : function() { + alert('Not yet implented'); + }, + render : function(){ return

BREW LOCKED

+

This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.

+
+

LOCK MESSAGE:

{this.props.message || 'Unable to retrieve Lock Message'}

- + +
; } }); From 4c6953a4e0a3d204e46f254381d90c5db2eb3857 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 20 Apr 2024 13:57:33 +1200 Subject: [PATCH 04/44] Differentiate between Edit and Share messages --- client/homebrew/pages/editPage/editPage.jsx | 2 +- server/homebrew.api.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index a18c7f1e9..66ffbe12a 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -394,7 +394,7 @@ const EditPage = createClass({
{this.state.displayLockMessage ? - this.setState({ displayLockMessage: false })}/> + this.setState({ displayLockMessage: false })}/> : Date: Sat, 20 Apr 2024 14:02:46 +1200 Subject: [PATCH 05/44] Fix test --- server/homebrew.api.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/homebrew.api.spec.js b/server/homebrew.api.spec.js index 8a4748e38..c8539bf63 100644 --- a/server/homebrew.api.spec.js +++ b/server/homebrew.api.spec.js @@ -300,7 +300,7 @@ describe('Tests for api', ()=>{ }); it('access is denied to a locked brew', async()=>{ - const lockBrew = { title: 'test brew', shareId: '1', lock: { locked: true, code: 404, message: 'brew locked' } }; + const lockBrew = { title: 'test brew', shareId: '1', lock: { locked: true, code: 404, shareMessage: 'brew locked' } }; model.get = jest.fn(()=>toBrewPromise(lockBrew)); api.getId = jest.fn(()=>({ id: '1', googleId: undefined })); From 9f31a2c8a289ee4ca89dd36bcab83fad88f11bae Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 20 Apr 2024 14:06:33 +1200 Subject: [PATCH 06/44] I can spell, honest --- .../pages/editPage/lockNotification/lockNotification.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index 810b433ec..7477ba789 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -11,7 +11,7 @@ const LockNotification = createClass({ }, removeLock : function() { - alert('Not yet implented'); + alert('Not yet implemented'); }, render : function(){ From 10a7f34abb578604209707b97d5497c5450745ed Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 10 May 2024 07:45:04 +1200 Subject: [PATCH 07/44] Update lock message --- .../editPage/lockNotification/lockNotification.jsx | 7 +++++-- .../editPage/lockNotification/lockNotification.less | 11 +++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index 7477ba789..fbb30a0a6 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -19,9 +19,12 @@ const LockNotification = createClass({

BREW LOCKED

This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.

-

LOCK MESSAGE:

+

LOCK REASON

{this.props.message || 'Unable to retrieve Lock Message'}

- +
+

Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.

+

Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.

+
; } diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.less b/client/homebrew/pages/editPage/lockNotification/lockNotification.less index 60919aab8..18dec07e3 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.less +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.less @@ -15,4 +15,15 @@ background-color: #777; } } + + h1, h3 { + font-family: 'Open Sans', sans-serif; + font-weight: 800; + } + h1 { + font-size: 24px; + } + h3 { + font-size: 18px; + } } \ No newline at end of file From f6daeb4acd739071c40cabe24587d983516120b6 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 10 May 2024 08:05:09 +1200 Subject: [PATCH 08/44] Update error message --- client/homebrew/pages/errorPage/errors/errorIndex.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/errorPage/errors/errorIndex.js b/client/homebrew/pages/errorPage/errors/errorIndex.js index f9d52c109..58725fe3f 100644 --- a/client/homebrew/pages/errorPage/errors/errorIndex.js +++ b/client/homebrew/pages/errorPage/errors/errorIndex.js @@ -95,7 +95,7 @@ const errorIndex = (props)=>{ **Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'} [Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`, - + // Brew load error '05' : dedent` @@ -140,7 +140,7 @@ const errorIndex = (props)=>{ '100' : dedent` ## This brew has been locked. - Please contact the Administrators to unlock this document. + Only an author may request that this lock is removed. : From bf38f95d25950b0a93ce337cf254f60c15cc0aa4 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 10 May 2024 08:05:29 +1200 Subject: [PATCH 09/44] Pass ID to Lock Notification --- client/homebrew/pages/editPage/editPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 66ffbe12a..a6c5e4d24 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -394,7 +394,7 @@ const EditPage = createClass({
{this.state.displayLockMessage ? - this.setState({ displayLockMessage: false })}/> + this.setState({ displayLockMessage: false })}/> : Date: Fri, 10 May 2024 08:17:09 +1200 Subject: [PATCH 10/44] Add Share ID to lock notification --- .../editPage/lockNotification/lockNotification.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index fbb30a0a6..c697d8804 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -3,7 +3,14 @@ const React = require('react'); const createClass = require('create-react-class'); const LockNotification = createClass({ - displayName : 'LockNotification', + displayName : 'LockNotification', + + getDefaultProps : function() { + return { + shareId : 0 + }; + }, + getInitialState : function() { return { disableLock : ()=>{} @@ -11,7 +18,7 @@ const LockNotification = createClass({ }, removeLock : function() { - alert('Not yet implemented'); + alert(`Not yet implemented - ID ${this.props.shareId}`); }, render : function(){ From a6ce36689c75db97e4d47b56951d1949cf71e147 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 1 Jun 2024 12:38:01 +1200 Subject: [PATCH 11/44] Shift NotificationPopup to shared components & update BrewRenderer ref --- .../notificationPopup/notificationPopup.jsx | 0 .../notificationPopup/notificationPopup.less | 0 client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename client/{homebrew/brewRenderer => components}/notificationPopup/notificationPopup.jsx (100%) rename client/{homebrew/brewRenderer => components}/notificationPopup/notificationPopup.less (100%) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/components/notificationPopup/notificationPopup.jsx similarity index 100% rename from client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx rename to client/components/notificationPopup/notificationPopup.jsx diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/components/notificationPopup/notificationPopup.less similarity index 100% rename from client/homebrew/brewRenderer/notificationPopup/notificationPopup.less rename to client/components/notificationPopup/notificationPopup.less diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 6a4040b4d..9bfd17aec 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -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('./notificationPopup/notificationPopup.jsx'); +const NotificationPopup = require('../../../client/components/notificationPopup/notificationPopup.jsx'); const Frame = require('react-frame-component').default; const dedent = require('dedent-tabs').default; const { printCurrentBrew } = require('../../../shared/helpers.js'); From 930709223a910ce35660952561795d8c9fdfca41 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 1 Jun 2024 12:42:40 +1200 Subject: [PATCH 12/44] Lint fix --- client/homebrew/pages/editPage/editPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index fdd19b648..01269ec7d 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -418,7 +418,7 @@ const EditPage = createClass({ lang={this.state.brew.lang} currentEditorPage={this.state.currentEditorPage} allowPrint={true} - /> + /> }
From 8685c5cae47b95d6277d57a688b3c62a0d37cca8 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 16:26:51 +1200 Subject: [PATCH 13/44] Break Dialog out of NotificationPopup, restore NotificationPopup to original position --- client/components/dialog.jsx | 48 +++++++++++ .../notificationPopup/notificationPopup.jsx | 80 ------------------- client/homebrew/brewRenderer/brewRenderer.jsx | 13 +-- .../notificationPopup/notificationPopup.jsx | 43 ++++++++++ .../notificationPopup/notificationPopup.less | 3 +- 5 files changed, 100 insertions(+), 87 deletions(-) create mode 100644 client/components/dialog.jsx delete mode 100644 client/components/notificationPopup/notificationPopup.jsx create mode 100644 client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx rename client/{components => homebrew/brewRenderer}/notificationPopup/notificationPopup.less (96%) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx new file mode 100644 index 000000000..9e17be2f9 --- /dev/null +++ b/client/components/dialog.jsx @@ -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 ( + dismiss()} + {...rest} + > + + {children} + + ); +} + +export default Modal; \ No newline at end of file diff --git a/client/components/notificationPopup/notificationPopup.jsx b/client/components/notificationPopup/notificationPopup.jsx deleted file mode 100644 index 6872d6c3e..000000000 --- a/client/components/notificationPopup/notificationPopup.jsx +++ /dev/null @@ -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 ( - <> -
  • - Don't store IMAGES in Google Drive
    - 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. -
    • - -
  • - Don't delete your Homebrewery folder on Google Drive!
    - 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, do not delete it! - We cannot help you recover files that you have deleted from your own - Google Drive. -
    • - -
  • - Protect your work!
    - 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!  - - See the FAQ - to learn how to avoid losing your work! -
    • - - ); - } - }, - 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
    - - -
    -

    Notice

    - This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind: -
    -
      {_.values(this.state.notifications)}
    -
    ; - } -}); - -module.exports = NotificationPopup; diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 9bfd17aec..8168f9933 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -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)=>{ : null} + +
    + + +
    + {/*render in iFrame so broken code doesn't crash the site.*/} { tabIndex={-1} style={{ height: state.height }}> - -
    - - -
    {baseThemePath && diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx new file mode 100644 index 000000000..1b6a60093 --- /dev/null +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -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 +
    +

    Notice

    + This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind: +
    +
      +
    • + Don't store IMAGES in Google Drive
      + 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. +
      • + +
    • + Don't delete your Homebrewery folder on Google Drive!
      + 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, do not delete it! + We cannot help you recover files that you have deleted from your own + Google Drive. +
      • + +
    • + Protect your work!
      + 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!  + + See the FAQ + to learn how to avoid losing your work! +
      • +
    +     ; +}; + +module.exports = NotificationPopup; diff --git a/client/components/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less similarity index 96% rename from client/components/notificationPopup/notificationPopup.less rename to client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index dfd3c6c63..2fde67b83 100644 --- a/client/components/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -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; From f3b01bc75cc36a04de1b752cae5ff9f9d66b5818 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 16:51:43 +1200 Subject: [PATCH 14/44] Fix for modals --- client/components/dialog.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 9e17be2f9..86816b062 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -15,12 +15,12 @@ function Modal({ dismissKey, blocking, children, ...rest }) { }, []); useEffect(()=>{ - if(blocking) { - modal ? ref.current?.showModal() : ref.current?.show(); + if(open) { + blocking ? ref.current?.showModal() : ref.current?.show(); } else { ref.current?.close(); } - }, [blocking]); + }, [open]); const dismiss = function(){ localStorage.setItem(dismissKey, true); From 1111d8275c0d1ab377050003392f7774be2594c1 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 17:27:45 +1200 Subject: [PATCH 15/44] Tweak dismiss button styling --- .../brewRenderer/notificationPopup/notificationPopup.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index 2fde67b83..f09556a29 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -27,14 +27,15 @@ opacity : 0.8; font-size : 2.5em; } - .dismiss{ + button.dismiss{ position : absolute; top : 10px; right : 10px; cursor : pointer; - opacity : 0.6; + background-color: transparent; &:hover{ opacity : 1; + background-color: #333; } } .header { From e7735e242a20b4be7cad074f7ace2f0bcde7067c Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 17:28:29 +1200 Subject: [PATCH 16/44] Add closeText prop --- client/components/dialog.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 86816b062..1f8c30887 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -2,7 +2,7 @@ const React = require('react'); const { useState, useRef, useEffect } = React; -function Modal({ dismissKey, blocking, children, ...rest }) { +function Modal({ dismissKey, blocking, children, closeText = 'Close', ...rest }) { const ref = useRef(); const [open, setOpen] = useState(false); @@ -38,7 +38,7 @@ function Modal({ dismissKey, blocking, children, ...rest }) { className='dismiss' onClick={()=>dismiss()} > - Close + {closeText} {children} From 05ba7b41d153aae46e9a72c52c21954c80a09ee4 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 17:29:34 +1200 Subject: [PATCH 17/44] Tweak NotificationPopup --- .../brewRenderer/notificationPopup/notificationPopup.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx index 1b6a60093..f767fe985 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -6,8 +6,8 @@ import Dialog from '../../../components/dialog.jsx'; const DISMISS_KEY = 'dismiss_notification12-04-23'; -const NotificationPopup = (props)=>{ - return +const NotificationPopup = ()=>{ + return

    Notice

    This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind: From 865c5678bc5bd84c469af9d7d358a7dcef3f136f Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 17:34:26 +1200 Subject: [PATCH 18/44] Change all Modal references to Dialog --- client/components/dialog.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 1f8c30887..36df4efc3 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,8 +1,8 @@ -// Modal as a separate component +// Dialog as a separate component const React = require('react'); const { useState, useRef, useEffect } = React; -function Modal({ dismissKey, blocking, children, closeText = 'Close', ...rest }) { +function Dialog({ dismissKey, closeText = 'Close', blocking = false, children, ...rest }) { const ref = useRef(); const [open, setOpen] = useState(false); @@ -45,4 +45,4 @@ function Modal({ dismissKey, blocking, children, closeText = 'Close', ...rest }) ); } -export default Modal; \ No newline at end of file +export default Dialog; \ No newline at end of file From 5f6d5f53cc974ccd172d1b2951092b05db78bd4e Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 17:38:06 +1200 Subject: [PATCH 19/44] Change dismiss button to use fa-dismiss --- .../brewRenderer/notificationPopup/notificationPopup.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx index f767fe985..888704359 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -6,8 +6,10 @@ import Dialog from '../../../components/dialog.jsx'; const DISMISS_KEY = 'dismiss_notification12-04-23'; +const DISMISS_BUTTON = ; + const NotificationPopup = ()=>{ - return + return

    Notice

    This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind: From 24e67e22708ba98570f92fed57ce657c819210bf Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 4 Jun 2024 17:47:17 +1200 Subject: [PATCH 20/44] Restore Info Circle to notification --- .../brewRenderer/notificationPopup/notificationPopup.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx index 888704359..1c0382129 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -11,6 +11,7 @@ const DISMISS_BUTTON = ; const NotificationPopup = ()=>{ return
    +

    Notice

    This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:
    From 491b38c3301044bb248e93045b4dafd6e269da47 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 4 Jun 2024 12:29:13 -0400 Subject: [PATCH 21/44] Small cleanup of Dialog component Reduce number of `useEffects` needed --- client/components/dialog.jsx | 35 ++++++++++------------------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 36df4efc3..dc18b8e77 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -2,45 +2,30 @@ const React = require('react'); const { useState, useRef, useEffect } = React; -function Dialog({ dismissKey, closeText = 'Close', blocking = false, children, ...rest }) { - const ref = useRef(); - +function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { + const dialogRef = useRef(); const [open, setOpen] = useState(false); useEffect(()=>{ - if(!window || !dismissKey) return; - if(!localStorage.getItem(dismissKey)){ + if(dismissKey && !localStorage.getItem(dismissKey)) { + blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); setOpen(true); } }, []); - useEffect(()=>{ - if(open) { - blocking ? ref.current?.showModal() : ref.current?.show(); - } else { - ref.current?.close(); - } - }, [open]); - - const dismiss = function(){ + const dismiss = ()=>{ localStorage.setItem(dismissKey, true); + dialogRef.current?.close(); setOpen(false); }; - if(!open) return; + if(!open) return null; return ( - dismiss()} - {...rest} - > - - {children} + {rest.children} ); } From 99ff7fdf144753268852795be229892e96b5472b Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 4 Jun 2024 12:32:21 -0400 Subject: [PATCH 22/44] linting --- .../brewRenderer/notificationPopup/notificationPopup.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx index 1c0382129..cca60bbec 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -5,7 +5,6 @@ const _ = require('lodash'); import Dialog from '../../../components/dialog.jsx'; const DISMISS_KEY = 'dismiss_notification12-04-23'; - const DISMISS_BUTTON = ; const NotificationPopup = ()=>{ From 727254472442074b20308b288a7e66fd9cc99658 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 4 Jun 2024 14:53:19 -0400 Subject: [PATCH 23/44] Convert LockNotification.jsx to functional component --- .../lockNotification/lockNotification.jsx | 57 ++++++++----------- 1 file changed, 23 insertions(+), 34 deletions(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index c697d8804..7252a710f 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -1,40 +1,29 @@ require('./lockNotification.less'); const React = require('react'); -const createClass = require('create-react-class'); -const LockNotification = createClass({ - displayName : 'LockNotification', - - getDefaultProps : function() { - return { - shareId : 0 - }; - }, - - getInitialState : function() { - return { - disableLock : ()=>{} - }; - }, - - removeLock : function() { - alert(`Not yet implemented - ID ${this.props.shareId}`); - }, - - render : function(){ - return
    -

    BREW LOCKED

    -

    This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.

    -
    -

    LOCK REASON

    -

    {this.props.message || 'Unable to retrieve Lock Message'}

    -
    -

    Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.

    -

    Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.

    - - -
    ; +function LockNotification(props) { + props = { + shareId : 0, + disableLock : ()=>{}, + ...props } -}); + + const removeLock = () => { + alert(`Not yet implemented - ID ${props.shareId}`); + }; + + return
    +

    BREW LOCKED

    +

    This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.

    +
    +

    LOCK REASON

    +

    {props.message || 'Unable to retrieve Lock Message'}

    +
    +

    Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.

    +

    Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.

    + + +
    ; +}; module.exports = LockNotification; From ec514cdb51c4162fb7e9408a36843bbf6f614e2b Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 5 Jun 2024 07:49:29 +1200 Subject: [PATCH 24/44] Set local storage only if dismissKey prop exists --- client/components/dialog.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index dc18b8e77..eb21b56e2 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -14,7 +14,7 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) }, []); const dismiss = ()=>{ - localStorage.setItem(dismissKey, true); + dismissKey && localStorage.setItem(dismissKey, true); dialogRef.current?.close(); setOpen(false); }; From 31b6e0c4f652f8a225e45301b6635287f5e804fc Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 5 Jun 2024 12:33:13 +1200 Subject: [PATCH 25/44] Show dialog when dismissKey prop is not specified --- client/components/dialog.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index eb21b56e2..90d51753c 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -7,7 +7,7 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) const [open, setOpen] = useState(false); useEffect(()=>{ - if(dismissKey && !localStorage.getItem(dismissKey)) { + if(!dismissKey || !localStorage.getItem(dismissKey)) { blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); setOpen(true); } From 0efcd5d2588ff2276b91189a766fda467cdb92fa Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 5 Jun 2024 13:03:26 +1200 Subject: [PATCH 26/44] Shift LockNotification to use Dialog --- .../pages/editPage/lockNotification/lockNotification.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index 7252a710f..ac64b6bd7 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -1,5 +1,6 @@ require('./lockNotification.less'); const React = require('react'); +const Dialog = require('../../../../components/dialog.jsx'); function LockNotification(props) { props = { @@ -12,7 +13,7 @@ function LockNotification(props) { alert(`Not yet implemented - ID ${props.shareId}`); }; - return
    + return

    BREW LOCKED

    This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.

    @@ -23,7 +24,7 @@ function LockNotification(props) {

    Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.

    -
    ; +     ; }; module.exports = LockNotification; From 556ded9b0839f6df46602b1b6218ee4ab7cf2b4f Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 12:01:55 +1200 Subject: [PATCH 27/44] Tweak Dialog to work with showModal and show LockNotifications --- client/components/dialog.jsx | 12 +++-- client/homebrew/pages/editPage/editPage.jsx | 47 +++++++++---------- .../lockNotification/lockNotification.jsx | 10 ++-- 3 files changed, 36 insertions(+), 33 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 90d51753c..7bd4e5795 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -8,18 +8,24 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) useEffect(()=>{ if(!dismissKey || !localStorage.getItem(dismissKey)) { - blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); - setOpen(true); + !open && setOpen(true); } }, []); + useEffect(()=>{ + if(open && !dialogRef.current?.open){ + blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); + } else { + dialogRef.current?.close(); + } + }, [open]); + const dismiss = ()=>{ dismissKey && localStorage.setItem(dismissKey, true); dialogRef.current?.close(); setOpen(false); }; - if(!open) return null; return (
    ; } diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx index ac64b6bd7..c5eeaee47 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx @@ -1,19 +1,20 @@ require('./lockNotification.less'); const React = require('react'); -const Dialog = require('../../../../components/dialog.jsx'); +import Dialog from '../../../../components/dialog.jsx'; function LockNotification(props) { props = { shareId : 0, disableLock : ()=>{}, + message : '', ...props - } + }; - const removeLock = () => { + const removeLock = ()=>{ alert(`Not yet implemented - ID ${props.shareId}`); }; - return + return

    BREW LOCKED

    This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.

    @@ -22,7 +23,6 @@ function LockNotification(props) {

    Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.

    Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.

    -     ; }; From 4f4cef0f6c2d7984d4cddc3216992d54658858df Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 12:02:07 +1200 Subject: [PATCH 28/44] Tweak LockNotification styling --- .../pages/editPage/lockNotification/lockNotification.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.less b/client/homebrew/pages/editPage/lockNotification/lockNotification.less index 18dec07e3..f8bf72d0a 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.less +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.less @@ -2,9 +2,11 @@ background-color: #ccc; color: black; padding: 10px; - margin: 25px 100px; + margin: 5% 10%; + width: 80%; text-align: center; line-height: 1.5em; + z-index: 1; button { background-color: #333; From 9e041d26bd18fc236d7735afa5c58838c4797aea Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 21:40:54 +1200 Subject: [PATCH 29/44] Fix display property on dialog causing close() to not work --- .../brewRenderer/notificationPopup/notificationPopup.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index f09556a29..d09787c6d 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -8,7 +8,6 @@ .notificationPopup{ position : relative; - display : inline-block; width : 100%; padding : 15px; padding-bottom : 10px; @@ -16,6 +15,10 @@ background-color : @blue; color : white; border : none; + &[open]{ + // Do NOT set a display property on a dialog! Set it on dialog[open] instead + display: block; + } a{ color : #e0e5c1; font-weight : 800; From fa7b3ea2a0b75ca88366941d6675be6cc0057453 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 21:41:33 +1200 Subject: [PATCH 30/44] Shift dismiss button, tweak local storage check --- client/components/dialog.jsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 7bd4e5795..c37ed649c 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -3,11 +3,11 @@ const React = require('react'); const { useState, useRef, useEffect } = React; function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { - const dialogRef = useRef(); + const dialogRef = useRef(null); const [open, setOpen] = useState(false); useEffect(()=>{ - if(!dismissKey || !localStorage.getItem(dismissKey)) { + if(!localStorage.getItem(dismissKey)) { !open && setOpen(true); } }, []); @@ -22,18 +22,16 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) const dismiss = ()=>{ dismissKey && localStorage.setItem(dismissKey, true); - dialogRef.current?.close(); setOpen(false); }; - return ( - - - {rest.children} - - ); -} + return + {rest.children} + + + ; +}; export default Dialog; \ No newline at end of file From 38fc6474956922b566aacbd24f9812e7c8ce70a5 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 21:46:34 +1200 Subject: [PATCH 31/44] Change NotificationPopup to inline-block from block --- .../brewRenderer/notificationPopup/notificationPopup.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index d09787c6d..8fdfaeff3 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -17,7 +17,7 @@ border : none; &[open]{ // Do NOT set a display property on a dialog! Set it on dialog[open] instead - display: block; + display: inline-block; } a{ color : #e0e5c1; From ed39852a8f7cd77179c75c698892c07888e00f87 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 22:00:28 +1200 Subject: [PATCH 32/44] Move dialog[open] to Dialog component styling --- client/components/dialog.jsx | 1 + client/components/dialog.less | 6 ++++++ .../brewRenderer/notificationPopup/notificationPopup.less | 4 ---- 3 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 client/components/dialog.less diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index c37ed649c..8f298d571 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,4 +1,5 @@ // Dialog as a separate component +require('./dialog.less'); const React = require('react'); const { useState, useRef, useEffect } = React; diff --git a/client/components/dialog.less b/client/components/dialog.less new file mode 100644 index 000000000..bbfb40393 --- /dev/null +++ b/client/components/dialog.less @@ -0,0 +1,6 @@ +dialog{ + &[open]{ + // Do NOT set a display property on a dialog! Set it on dialog[open] instead + display: inline-block; + } +} \ No newline at end of file diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index 8fdfaeff3..fe5e1c540 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -15,10 +15,6 @@ background-color : @blue; color : white; border : none; - &[open]{ - // Do NOT set a display property on a dialog! Set it on dialog[open] instead - display: inline-block; - } a{ color : #e0e5c1; font-weight : 800; From 866548deec0da12baa32cfef5d0830093ebc1f31 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 22:12:13 +1200 Subject: [PATCH 33/44] Move renderWarnings to use Dialog --- .../renderWarnings/renderWarnings.jsx | 17 ++++++----------- .../renderWarnings/renderWarnings.less | 5 +++-- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/shared/homebrewery/renderWarnings/renderWarnings.jsx b/shared/homebrewery/renderWarnings/renderWarnings.jsx index 6028f1708..e9c5f6f57 100644 --- a/shared/homebrewery/renderWarnings/renderWarnings.jsx +++ b/shared/homebrewery/renderWarnings/renderWarnings.jsx @@ -3,7 +3,7 @@ const React = require('react'); const createClass = require('create-react-class'); const _ = require('lodash'); -const DISMISS_KEY = 'dismiss_render_warning'; +import Dialog from '../../../client/components/dialog.jsx'; const RenderWarnings = createClass({ displayName : 'RenderWarnings', @@ -34,9 +34,6 @@ const RenderWarnings = createClass({ }, }, checkWarnings : function(){ - const hideDismiss = localStorage.getItem(DISMISS_KEY); - if(hideDismiss) return this.setState({ warnings: {} }); - this.setState({ warnings : _.reduce(this.warnings, (r, fn, type)=>{ const element = fn(); @@ -45,20 +42,18 @@ const RenderWarnings = createClass({ }, {}) }); }, - dismiss : function(){ - localStorage.setItem(DISMISS_KEY, true); - this.checkWarnings(); - }, render : function(){ if(_.isEmpty(this.state.warnings)) return null; - return
    - + const DISMISS_KEY = 'dismiss_render_warning'; + const DISMISS_TEXT = ; + + return

    Render Warnings

    If this homebrew is rendering badly if might be because of the following:
      {_.values(this.state.warnings)}
    -
    ; +     ; } }); diff --git a/shared/homebrewery/renderWarnings/renderWarnings.less b/shared/homebrewery/renderWarnings/renderWarnings.less index 4b038a11a..8524b5451 100644 --- a/shared/homebrewery/renderWarnings/renderWarnings.less +++ b/shared/homebrewery/renderWarnings/renderWarnings.less @@ -1,7 +1,6 @@ .renderWarnings{ position : relative; float : right; - display : inline-block; width : 350px; padding : 20px; padding-bottom : 10px; @@ -9,6 +8,7 @@ margin-bottom : 10px; background-color : @yellow; color : white; + border : none; a{ font-weight : 800; } @@ -19,12 +19,13 @@ opacity : 0.8; font-size : 2.5em; } - i.dismiss{ + button.dismiss{ position : absolute; top : 10px; right : 10px; cursor : pointer; opacity : 0.6; + background-color: transparent; &:hover{ opacity : 1; } From 359a64968cddccda1025e1414eec659634bb0d3f Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 22:31:05 +1200 Subject: [PATCH 34/44] Nudge popups left --- .../brewRenderer/notificationPopup/notificationPopup.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index fe5e1c540..6091a1bd8 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -1,7 +1,7 @@ .popups{ position : fixed; top : @navbarHeight; - right : 15px; + right : 24px; z-index : 10001; width : 450px; } From 8c315980e9caa14b2ba81114d8df94c9a9e8c3ff Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 6 Jun 2024 22:37:01 +1200 Subject: [PATCH 35/44] Revert dismiss styling to opacity change on hover --- .../brewRenderer/notificationPopup/notificationPopup.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index 6091a1bd8..9505d4ffb 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -31,10 +31,10 @@ top : 10px; right : 10px; cursor : pointer; + opacity : 0.6; background-color: transparent; &:hover{ opacity : 1; - background-color: #333; } } .header { From 7bb92bc790efe757a75863d4e4f710fe8c7021b5 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 6 Jun 2024 18:10:04 -0400 Subject: [PATCH 36/44] Refactor slightly --- client/components/dialog.jsx | 15 +++------------ client/components/dialog.less | 6 ------ 2 files changed, 3 insertions(+), 18 deletions(-) delete mode 100644 client/components/dialog.less diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 8f298d571..97884fe5a 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -5,25 +5,16 @@ const { useState, useRef, useEffect } = React; function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { const dialogRef = useRef(null); - const [open, setOpen] = useState(false); useEffect(()=>{ - if(!localStorage.getItem(dismissKey)) { - !open && setOpen(true); + if(!dismissKey || !localStorage.getItem(dismissKey)) { + blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); } }, []); - useEffect(()=>{ - if(open && !dialogRef.current?.open){ - blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); - } else { - dialogRef.current?.close(); - } - }, [open]); - const dismiss = ()=>{ dismissKey && localStorage.setItem(dismissKey, true); - setOpen(false); + dialogRef.current?.close(); }; return diff --git a/client/components/dialog.less b/client/components/dialog.less deleted file mode 100644 index bbfb40393..000000000 --- a/client/components/dialog.less +++ /dev/null @@ -1,6 +0,0 @@ -dialog{ - &[open]{ - // Do NOT set a display property on a dialog! Set it on dialog[open] instead - display: inline-block; - } -} \ No newline at end of file From 54ec1b88271dc923a4ec25ed42bed836b397acd3 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 7 Jun 2024 10:50:57 +1200 Subject: [PATCH 37/44] Comment out dialog.less reference --- client/components/dialog.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 97884fe5a..4d772630f 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,5 +1,5 @@ // Dialog as a separate component -require('./dialog.less'); +// require('./dialog.less'); const React = require('react'); const { useState, useRef, useEffect } = React; @@ -26,4 +26,4 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) ; }; -export default Dialog; \ No newline at end of file +export default Dialog; From 476002ae4d9f26ac009a0403cc14f4025259eb8e Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 7 Jun 2024 11:01:47 +1200 Subject: [PATCH 38/44] Tweak notificationPopup.less Stop the notification from covering the renderWarning when both are present --- .../brewRenderer/notificationPopup/notificationPopup.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index 9505d4ffb..c0a47b4b5 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -15,6 +15,9 @@ background-color : @blue; color : white; border : none; + &[open]{ + display : inline-block; + } a{ color : #e0e5c1; font-weight : 800; From 8bbf2e1ce4897af516b4c885ebe9f8106df78921 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 7 Jun 2024 11:25:34 +1200 Subject: [PATCH 39/44] Dim background while Modal displayed --- .../pages/editPage/lockNotification/lockNotification.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.less b/client/homebrew/pages/editPage/lockNotification/lockNotification.less index f8bf72d0a..02bee738e 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.less +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.less @@ -8,6 +8,10 @@ line-height: 1.5em; z-index: 1; + &::backdrop { + background-color: #000a; + } + button { background-color: #333; color: white; @@ -28,4 +32,4 @@ h3 { font-size: 18px; } -} \ No newline at end of file +} From 33c2bee8735a931922e9f63663eb456e6392ed5b Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 7 Jun 2024 16:05:14 +1200 Subject: [PATCH 40/44] Remove unused useState --- client/components/dialog.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 4d772630f..c426bc80a 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,7 +1,7 @@ // Dialog as a separate component // require('./dialog.less'); const React = require('react'); -const { useState, useRef, useEffect } = React; +const { useRef, useEffect } = React; function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { const dialogRef = useRef(null); From 08b61a6bb423c7bd879aa1e168f236c415a84eb2 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 7 Jun 2024 11:26:47 -0400 Subject: [PATCH 41/44] Cleanup comments. Fix Indentation. --- client/components/dialog.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index c426bc80a..2057ecb87 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,5 +1,4 @@ -// Dialog as a separate component -// require('./dialog.less'); +// Dialog box, for popups and modal blocking messages const React = require('react'); const { useRef, useEffect } = React; @@ -17,13 +16,14 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) dialogRef.current?.close(); }; - return - {rest.children} - - - ; + return ( + + {rest.children} + + + ); }; export default Dialog; From fdf6acd80ad5e01701f5d07ec2f7a8e70ec06413 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 7 Jun 2024 11:27:51 -0400 Subject: [PATCH 42/44] Lint notificationPopup.less --- .../notificationPopup/notificationPopup.less | 56 ++++++++----------- 1 file changed, 24 insertions(+), 32 deletions(-) diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index c0a47b4b5..26d764aff 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -1,4 +1,4 @@ -.popups{ +.popups { position : fixed; top : @navbarHeight; right : 24px; @@ -6,63 +6,55 @@ width : 450px; } -.notificationPopup{ +.notificationPopup { position : relative; width : 100%; padding : 15px; padding-bottom : 10px; padding-left : 25px; - background-color : @blue; color : white; + background-color : @blue; border : none; - &[open]{ - display : inline-block; - } - a{ - color : #e0e5c1; + &[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; } - button.dismiss{ - position : absolute; - top : 10px; - right : 10px; - cursor : pointer; - opacity : 0.6; - background-color: transparent; - &:hover{ - opacity : 1; - } + button.dismiss { + position : absolute; + top : 10px; + right : 10px; + cursor : pointer; + background-color : transparent; + opacity : 0.6; + &:hover { opacity : 1; } } - .header { - padding-left : 50px; - } - 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; } } } } From 65770782c206e12b904c762513df1b05a81d06fb Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 7 Jun 2024 11:28:30 -0400 Subject: [PATCH 43/44] Lint lockNotification.less --- .../lockNotification/lockNotification.less | 42 ++++++++----------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.less b/client/homebrew/pages/editPage/lockNotification/lockNotification.less index 02bee738e..54f1a9569 100644 --- a/client/homebrew/pages/editPage/lockNotification/lockNotification.less +++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.less @@ -1,35 +1,27 @@ .lockNotification { - background-color: #ccc; - color: black; - padding: 10px; - margin: 5% 10%; - width: 80%; - text-align: center; - line-height: 1.5em; - z-index: 1; + 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: #000a; - } + &::backdrop { background-color : #000000AA; } button { - background-color: #333; - color: white; - margin: 10px; + margin : 10px; + color : white; + background-color : #333333; - &:hover { - background-color: #777; - } + &:hover { background-color : #777777; } } h1, h3 { - font-family: 'Open Sans', sans-serif; - font-weight: 800; - } - h1 { - font-size: 24px; - } - h3 { - font-size: 18px; + font-family : 'Open Sans', sans-serif; + font-weight : 800; } + h1 { font-size : 24px; } + h3 { font-size : 18px; } } From 66fdf808a64fdbd9da6d31daaa3d12dc5cf72ef5 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 7 Jun 2024 11:29:02 -0400 Subject: [PATCH 44/44] Lint renderWarnings.less --- .../renderWarnings/renderWarnings.less | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/shared/homebrewery/renderWarnings/renderWarnings.less b/shared/homebrewery/renderWarnings/renderWarnings.less index 8524b5451..70799092a 100644 --- a/shared/homebrewery/renderWarnings/renderWarnings.less +++ b/shared/homebrewery/renderWarnings/renderWarnings.less @@ -1,54 +1,48 @@ -.renderWarnings{ - position : relative; - float : right; +.renderWarnings { + position : relative; + float : right; width : 350px; padding : 20px; padding-bottom : 10px; padding-left : 85px; margin-bottom : 10px; - background-color : @yellow; color : white; + background-color : @yellow; border : none; - a{ - font-weight : 800; - } - i.ohno{ + a { font-weight : 800; } + i.ohno { position : absolute; top : 24px; left : 24px; - opacity : 0.8; font-size : 2.5em; + opacity : 0.8; } - button.dismiss{ - position : absolute; - top : 10px; - right : 10px; - cursor : pointer; - opacity : 0.6; - background-color: transparent; - &:hover{ - opacity : 1; - } + button.dismiss { + position : absolute; + top : 10px; + right : 10px; + cursor : pointer; + background-color : transparent; + opacity : 0.6; + &:hover { opacity : 1; } } - small{ - opacity : 0.7; + 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 { font-size : 0.8em; line-height : 1.6em; - em{ - font-weight : 800; - } + em { font-weight : 800; } } } } \ No newline at end of file