From 63a1ff454f895358671a03d2dab2871fa08746be Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 11 Jan 2019 16:26:03 -0500 Subject: [PATCH] Added a notification popup similar to the "YOU ARE NOT USING CHROME" message. Can be used to notify users of current known issues, updates, etc. Currently just reminds users to back up documents with a link to the Reddit FAQ. --- client/homebrew/brewRenderer/brewRenderer.jsx | 6 +- .../notificationPopup/notificationPopup.jsx | 58 ++++++++++++++++++ .../notificationPopup/notificationPopup.less | 61 +++++++++++++++++++ .../renderWarnings/renderWarnings.jsx | 2 +- .../renderWarnings/renderWarnings.less | 11 ++-- 5 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx create mode 100644 client/homebrew/brewRenderer/notificationPopup/notificationPopup.less diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 667a1f41f..8f26e3cd6 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -8,6 +8,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 PAGE_HEIGHT = 1056; const PPR_THRESHOLD = 50; @@ -132,7 +133,10 @@ const BrewRenderer = createClass({ style={{ height: this.state.height }}> - +
+ + +
{this.renderPages()} diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx new file mode 100644 index 000000000..64b15d98d --- /dev/null +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -0,0 +1,58 @@ + +const React = require('react'); +const createClass = require('create-react-class'); +const _ = require('lodash'); +const cx = require('classnames'); //Unused variable + +const DISMISS_KEY = 'dismiss_notification'; + +const NotificationPopup = createClass({ + getInitialState : function() { + return { + notifications : {} + }; + }, + componentDidMount : function() { + this.checkNotifications(); + window.addEventListener('resize', this.checkNotifications); + }, + componentWillUnmount : function() { + window.removeEventListener('resize', this.checkNotifications); + }, + notifications : { + faq : function(){ + return
  • + Protect your work!
    + At the moment we do not save a history of your projects, so 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/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less new file mode 100644 index 000000000..7d14e8655 --- /dev/null +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -0,0 +1,61 @@ +.popups{ + position : fixed; + top : @navbarHeight; + right : 15px; + z-index : 10001; + width : 350px; +} + +.notificationPopup{ + position : relative; + float : right; + display : inline-block; + width : 350px; + padding : 20px; + padding-bottom : 10px; + padding-left : 85px; + background-color : @blue; + color : white; + a{ + color : @steel; + font-weight : 800; + } + i.info{ + position : absolute; + top : 24px; + left : 24px; + opacity : 0.8; + font-size : 2.5em; + } + i.dismiss{ + position : absolute; + top : 10px; + right : 10px; + cursor : pointer; + opacity : 0.6; + &:hover{ + opacity : 1; + } + } + small{ + opacity : 0.7; + font-size : 0.6em; + } + h3{ + font-size : 1.1em; + font-weight : 800; + } + ul{ + margin-top : 15px; + font-size : 0.8em; + list-style-position : outside; + list-style-type : disc; + li{ + font-size : 0.8em; + line-height : 1.6em; + em{ + font-weight : 800; + } + } + } +} \ No newline at end of file diff --git a/shared/homebrewery/renderWarnings/renderWarnings.jsx b/shared/homebrewery/renderWarnings/renderWarnings.jsx index f7c081874..fcfb6d0c7 100644 --- a/shared/homebrewery/renderWarnings/renderWarnings.jsx +++ b/shared/homebrewery/renderWarnings/renderWarnings.jsx @@ -25,7 +25,7 @@ const RenderWarnings = createClass({ if(!isChrome){ return
  • Built for Chrome
    - Other browsers do not support + Other browsers do not support   key features this site uses. diff --git a/shared/homebrewery/renderWarnings/renderWarnings.less b/shared/homebrewery/renderWarnings/renderWarnings.less index 407effb88..4b038a11a 100644 --- a/shared/homebrewery/renderWarnings/renderWarnings.less +++ b/shared/homebrewery/renderWarnings/renderWarnings.less @@ -1,16 +1,17 @@ - .renderWarnings{ - position : fixed; + position : relative; + float : right; display : inline-block; - top : @navbarHeight; - right : 15px; - z-index : 10001; width : 350px; padding : 20px; padding-bottom : 10px; padding-left : 85px; + margin-bottom : 10px; background-color : @yellow; color : white; + a{ + font-weight : 800; + } i.ohno{ position : absolute; top : 24px;