From d393ef25bc35aed5de2d14a2ccd12cc50cd77048 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 22 Jun 2021 05:52:47 -0400 Subject: [PATCH] Add notification center --- package-lock.json | 63 +++++++++++-------- package.json | 2 +- src/assets/styles/bootstrap/_variables.scss | 12 ++-- src/events/index.ts | 1 + .../NotificationCenterEvent.ts | 8 +++ src/events/notification-center/index.ts | 1 + src/index.scss | 1 + .../transitions/TransitionAnimation.tsx | 2 +- .../transitions/TransitionAnimation.types.ts | 1 + .../transitions/TransitionAnimationStyles.ts | 16 +++++ src/views/Styles.scss | 1 + src/views/main/MainView.tsx | 6 +- .../NotificationCenterView.scss | 13 ++++ .../NotificationCenterView.tsx | 40 ++++++++++++ .../NotificationCenterView.types.ts | 4 ++ src/views/purse/PurseView.scss | 1 + src/views/purse/PurseView.tsx | 13 +++- 17 files changed, 145 insertions(+), 40 deletions(-) create mode 100644 src/events/notification-center/NotificationCenterEvent.ts create mode 100644 src/events/notification-center/index.ts create mode 100644 src/views/notification-center/NotificationCenterView.scss create mode 100644 src/views/notification-center/NotificationCenterView.tsx create mode 100644 src/views/notification-center/NotificationCenterView.types.ts diff --git a/package-lock.json b/package-lock.json index ea21e458..66944ba0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1835,12 +1835,11 @@ "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" }, "@restart/hooks": { - "version": "0.3.26", - "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz", - "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==", + "version": "0.3.27", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", + "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==", "requires": { - "lodash": "^4.17.20", - "lodash-es": "^4.17.20" + "dequal": "^2.0.2" } }, "@rollup/plugin-node-resolve": { @@ -2223,14 +2222,6 @@ "@babel/types": "^7.3.0" } }, - "@types/classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==", - "requires": { - "classnames": "*" - } - }, "@types/eslint": { "version": "7.2.9", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz", @@ -5159,6 +5150,11 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" }, + "dequal": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz", + "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==" + }, "des.js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", @@ -10039,11 +10035,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "lodash-es": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" - }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -14780,28 +14771,46 @@ } }, "react-bootstrap": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz", - "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==", + "version": "2.0.0-beta.2", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-beta.2.tgz", + "integrity": "sha512-2WqlAj54LaSWtJ6rsNs/uKP8kzomNrELymaaekajkIE6jQXPRNFe9mSIKYP/MtqLQGc4MYPBB3rywZ7UIvbV/w==", "requires": { - "@babel/runtime": "^7.13.8", + "@babel/runtime": "^7.14.0", "@restart/context": "^2.1.4", "@restart/hooks": "^0.3.26", - "@types/classnames": "^2.2.10", "@types/invariant": "^2.2.33", "@types/prop-types": "^15.7.3", - "@types/react": ">=16.9.35", + "@types/react": ">=16.14.8", "@types/react-transition-group": "^4.4.1", "@types/warning": "^3.0.0", - "classnames": "^2.2.6", - "dom-helpers": "^5.1.2", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", "invariant": "^2.2.4", "prop-types": "^15.7.2", "prop-types-extra": "^1.1.0", - "react-overlays": "^5.0.0", + "react-overlays": "^5.0.1", "react-transition-group": "^4.4.1", "uncontrollable": "^7.2.1", "warning": "^4.0.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz", + "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + } } }, "react-dev-utils": { diff --git a/package.json b/package.json index f8aac660..82a862a6 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "nitro-renderer": "file:../nitro-renderer", "node-sass": "^5.0.0", "react": "^17.0.2", - "react-bootstrap": "^1.5.2", + "react-bootstrap": "^2.0.0-alpha.2", "react-dom": "^17.0.2", "react-draggable": "^4.4.3", "react-google-recaptcha": "^2.1.0", diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index fa6d432e..f5a607a6 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -40,10 +40,10 @@ $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; -$red: #dc3545 !default; +$red: #a81a12 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; -$green: #198754 !default; +$green: #00800b !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; $muted: #B6BEC5 !default; @@ -75,17 +75,15 @@ $secondary: #185D79 !default; $tertiary: #2DABC2 !default; $quaternary: #2B91A7 !default; -$success: #008026 !default; +$success: $green !default; $info: $cyan !default; $warning: $yellow !default; -$danger: #C23027 !default; +$danger: $red !default; $light: #DFDFDF !default; -$dark: #24211c !default; +$dark: #12191c !default; $light-dark: $gray-800 !default; - - // scss-docs-end theme-color-variables .bg-tertiary-split { diff --git a/src/events/index.ts b/src/events/index.ts index 70ffd6ca..9ec510a0 100644 --- a/src/events/index.ts +++ b/src/events/index.ts @@ -3,4 +3,5 @@ export * from './catalog'; export * from './friend-list'; export * from './inventory'; export * from './navigator'; +export * from './notification-center'; export * from './room-widgets'; diff --git a/src/events/notification-center/NotificationCenterEvent.ts b/src/events/notification-center/NotificationCenterEvent.ts new file mode 100644 index 00000000..a4b8d941 --- /dev/null +++ b/src/events/notification-center/NotificationCenterEvent.ts @@ -0,0 +1,8 @@ +import { NitroEvent } from 'nitro-renderer'; + +export class NotificationCenterEvent extends NitroEvent +{ + public static SHOW_NOTIFICATION_CENTER: string = 'NCE_SHOW_NOTIFICATION_CENTER'; + public static HIDE_NOTIFICATION_CENTER: string = 'NCE_HIDE_NOTIFICATION_CENTER'; + public static TOGGLE_NOTIFICATION_CENTER: string = 'NCE_TOGGLE_NOTIFICATION_CENTER'; +} diff --git a/src/events/notification-center/index.ts b/src/events/notification-center/index.ts new file mode 100644 index 00000000..2da1b15d --- /dev/null +++ b/src/events/notification-center/index.ts @@ -0,0 +1 @@ +export * from './NotificationCenterEvent'; diff --git a/src/index.scss b/src/index.scss index 7961231c..fa945676 100644 --- a/src/index.scss +++ b/src/index.scss @@ -21,6 +21,7 @@ $toolbar-me-zindex: 90; $chatinput-zindex: 80; $toolbar-zindex: 70; $rightside-zindex: 69; +$notification-center-zindex: 68; $toolbar-memenu-zindex: 60; $roomtools-zindex: 50; $context-menu-zindex: 40; diff --git a/src/layout/transitions/TransitionAnimation.tsx b/src/layout/transitions/TransitionAnimation.tsx index a965d6ed..2e5df886 100644 --- a/src/layout/transitions/TransitionAnimation.tsx +++ b/src/layout/transitions/TransitionAnimation.tsx @@ -35,7 +35,7 @@ export const TransitionAnimation: FC = props => return ( { state => ( -
+
{ isChildrenVisible && children }
)} diff --git a/src/layout/transitions/TransitionAnimation.types.ts b/src/layout/transitions/TransitionAnimation.types.ts index b7f1ed31..829215b2 100644 --- a/src/layout/transitions/TransitionAnimation.types.ts +++ b/src/layout/transitions/TransitionAnimation.types.ts @@ -10,6 +10,7 @@ export class TransitionAnimationTypes { public static BOUNCE: string = 'bounce'; public static SLIDE_LEFT: string = 'slideLeft'; + public static SLIDE_RIGHT: string = 'slideRight'; public static FLIP_X: string = 'flipX'; public static FADE_IN: string = 'fadeIn'; public static FADE_DOWN: string = 'fadeDown'; diff --git a/src/layout/transitions/TransitionAnimationStyles.ts b/src/layout/transitions/TransitionAnimationStyles.ts index afd3cadb..02fe336c 100644 --- a/src/layout/transitions/TransitionAnimationStyles.ts +++ b/src/layout/transitions/TransitionAnimationStyles.ts @@ -39,6 +39,22 @@ export function getTransitionAnimationStyle(type: string, transition: Transition animationDuration: `${ timeout }ms` } } + case TransitionAnimationTypes.SLIDE_RIGHT: + switch(transition) + { + default: + return {} + case ENTERING: + return { + animationName: `slideInRight`, + animationDuration: `${ timeout }ms` + } + case EXITING: + return { + animationName: `slideOutRight`, + animationDuration: `${ timeout }ms` + } + } case TransitionAnimationTypes.FLIP_X: switch(transition) { diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 657a17c8..060fc1e9 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -13,6 +13,7 @@ @import './loading/LoadingView'; @import './main/MainView'; @import './navigator/NavigatorView'; +@import './notification-center/NotificationCenterView'; @import './pet-image/PetImage'; @import './purse/PurseView'; @import './right-side/RightSideView'; diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index ecf77d91..b525f12c 100644 --- a/src/views/main/MainView.tsx +++ b/src/views/main/MainView.tsx @@ -1,5 +1,5 @@ import { Nitro, RoomSessionEvent } from 'nitro-renderer'; -import { useCallback, useEffect, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation'; import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types'; @@ -9,12 +9,13 @@ import { FriendListView } from '../friend-list/FriendListView'; import { HotelView } from '../hotel-view/HotelView'; import { InventoryView } from '../inventory/InventoryView'; import { NavigatorView } from '../navigator/NavigatorView'; +import { NotificationCenterView } from '../notification-center/NotificationCenterView'; import { RightSideView } from '../right-side/RightSideView'; import { RoomHostView } from '../room-host/RoomHostView'; import { ToolbarView } from '../toolbar/ToolbarView'; import { MainViewProps } from './MainView.types'; -export function MainView(props: MainViewProps): JSX.Element +export const MainView: FC = props => { const [ isReady, setIsReady ] = useState(false); const [ landingViewVisible, setLandingViewVisible ] = useState(true); @@ -55,6 +56,7 @@ export function MainView(props: MainViewProps): JSX.Element +
); } diff --git a/src/views/notification-center/NotificationCenterView.scss b/src/views/notification-center/NotificationCenterView.scss new file mode 100644 index 00000000..68bc505b --- /dev/null +++ b/src/views/notification-center/NotificationCenterView.scss @@ -0,0 +1,13 @@ +.nitro-notification-center-container { + position: absolute; + top: 0; + right: 0; + width: 300px; + height: calc(100% - #{$toolbar-height}); + z-index: $notification-center-zindex; + + .nitro-notification-center { + background-color: $dark; + height: 100%; + } +} diff --git a/src/views/notification-center/NotificationCenterView.tsx b/src/views/notification-center/NotificationCenterView.tsx new file mode 100644 index 00000000..677c86ce --- /dev/null +++ b/src/views/notification-center/NotificationCenterView.tsx @@ -0,0 +1,40 @@ +import { FC, useCallback, useState } from 'react'; +import { NotificationCenterEvent } from '../../events'; +import { useUiEvent } from '../../hooks/events'; +import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation'; +import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types'; +import { NotificationCenterViewProps } from './NotificationCenterView.types'; + +export const NotificationCenterView: FC = props => +{ + const [ isVisible, setIsVisible ] = useState(false); + + const onNotificationCenterEvent = useCallback((event: NotificationCenterEvent) => + { + switch(event.type) + { + case NotificationCenterEvent.SHOW_NOTIFICATION_CENTER: + setIsVisible(true); + return; + case NotificationCenterEvent.HIDE_NOTIFICATION_CENTER: + setIsVisible(false); + return; + case NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER: + setIsVisible(value => !value); + return; + } + }, []); + + useUiEvent(NotificationCenterEvent.SHOW_NOTIFICATION_CENTER, onNotificationCenterEvent); + useUiEvent(NotificationCenterEvent.HIDE_NOTIFICATION_CENTER, onNotificationCenterEvent); + useUiEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER, onNotificationCenterEvent); + + + return ( + +
+ test +
+ + ); +} diff --git a/src/views/notification-center/NotificationCenterView.types.ts b/src/views/notification-center/NotificationCenterView.types.ts new file mode 100644 index 00000000..042874fd --- /dev/null +++ b/src/views/notification-center/NotificationCenterView.types.ts @@ -0,0 +1,4 @@ +export interface NotificationCenterViewProps +{ + +} diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss index 9bcf83f7..a1afd740 100644 --- a/src/views/purse/PurseView.scss +++ b/src/views/purse/PurseView.scss @@ -8,6 +8,7 @@ color:lighten($dark,20); cursor: pointer; font-size: 0.9rem; + pointer-events: all; } } diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx index d7b9ee12..b768454f 100644 --- a/src/views/purse/PurseView.tsx +++ b/src/views/purse/PurseView.tsx @@ -1,5 +1,7 @@ import { UserCurrencyComposer } from 'nitro-renderer'; -import { FC, useEffect, useMemo, useReducer } from 'react'; +import { FC, useCallback, useEffect, useMemo, useReducer } from 'react'; +import { NotificationCenterEvent } from '../../events'; +import { dispatchUiEvent } from '../../hooks/events'; import { SendMessageHook } from '../../hooks/messages/message-event'; import { GetConfiguration } from '../../utils/GetConfiguration'; import { PurseContextProvider } from './context/PurseContext'; @@ -26,6 +28,11 @@ export const PurseView: FC = props => SetLastCurrencies(currencies); + const toggleNotificationCenter = useCallback(() => + { + dispatchUiEvent(new NotificationCenterEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER)); + }, []); + return ( @@ -36,7 +43,9 @@ export const PurseView: FC = props => return ; }) } -
+
+ +
);