From 03d176b53a7c4eecd305a7e1fba88bc25f1d08be Mon Sep 17 00:00:00 2001 From: Layne Date: Mon, 28 Mar 2022 03:13:44 +0000 Subject: [PATCH] different notifications n sizes --- src/api/notification/NotificationAlertItem.ts | 5 ++ src/api/notification/NotificationAlertType.ts | 1 + src/api/notification/NotificationUtilities.ts | 2 +- src/common/index.scss | 19 -------- .../layout/LayoutNotificationAlertView.tsx | 10 ++-- src/components/catalog/CatalogView.tsx | 4 +- .../NotificationCenterView.scss | 46 +++++++++++++++++-- .../views/alert-layouts/GetAlertLayout.tsx | 2 +- .../NotificationDefaultAlertView.tsx | 39 +++++++++------- .../NotificationDefaultConfirmView.tsx | 4 +- 10 files changed, 83 insertions(+), 49 deletions(-) diff --git a/src/api/notification/NotificationAlertItem.ts b/src/api/notification/NotificationAlertItem.ts index cbbf8f4a..2d7702c7 100644 --- a/src/api/notification/NotificationAlertItem.ts +++ b/src/api/notification/NotificationAlertItem.ts @@ -35,6 +35,11 @@ export class NotificationAlertItem return this._messages; } + public set alertType(alertType: string) + { + this._alertType = alertType; + } + public get alertType(): string { return this._alertType; diff --git a/src/api/notification/NotificationAlertType.ts b/src/api/notification/NotificationAlertType.ts index 6732c598..ad804e80 100644 --- a/src/api/notification/NotificationAlertType.ts +++ b/src/api/notification/NotificationAlertType.ts @@ -6,4 +6,5 @@ export class NotificationAlertType public static EVENT: string = 'event'; public static NITRO: string = 'nitro'; public static SEARCH: string = 'search'; + public static ALERT: string = 'alert'; } diff --git a/src/api/notification/NotificationUtilities.ts b/src/api/notification/NotificationUtilities.ts index 48c3082f..d4de7aee 100644 --- a/src/api/notification/NotificationUtilities.ts +++ b/src/api/notification/NotificationUtilities.ts @@ -137,7 +137,7 @@ export class NotificationUtilities public static showModeratorMessage(message: string, url: string = null, showHabboWay: boolean = true): void { - this.simpleAlert(message, NotificationAlertType.MODERATION, url, LocalizeText('mod.alert.link'), LocalizeText('mod.alert.title')); + this.simpleAlert(message, NotificationAlertType.DEFAULT, url, LocalizeText('mod.alert.link'), LocalizeText('mod.alert.title')); } public static handleModeratorCaution(message: string, url: string = null): void diff --git a/src/common/index.scss b/src/common/index.scss index 983d207d..ef37725e 100644 --- a/src/common/index.scss +++ b/src/common/index.scss @@ -190,25 +190,6 @@ background-color: rgba($black, .125); } -.nitro-alert { - min-width: 350px; - min-height: 150px; - max-height: 350px; -} - -.nitro-notification-bubble { - pointer-events: all; - padding: 6px 5px; - background-color: rgba($dark,.95); - box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); - font-size: $font-size-sm; - - .bubble-image-container { - width: 50px; - height: 50px; - } -} - #draggable-windows-container { position: absolute; top: 0; diff --git a/src/common/layout/LayoutNotificationAlertView.tsx b/src/common/layout/LayoutNotificationAlertView.tsx index 4f1a11a0..a4e0f52c 100644 --- a/src/common/layout/LayoutNotificationAlertView.tsx +++ b/src/common/layout/LayoutNotificationAlertView.tsx @@ -1,24 +1,28 @@ import { FC, useMemo } from 'react'; +import { NotificationAlertType } from '../../api'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card'; export interface LayoutNotificationAlertViewProps extends NitroCardViewProps { title?: string; + type?: string; close: () => void; } export const LayoutNotificationAlertView: FC = props => { - const { title = '', close = null, classNames = [], children = null, ...rest } = props; + const { title = '', close = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, ...rest } = props; const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'nitro-alert' ]; + const newClassNames: string[] = ['nitro-alert']; + + newClassNames.push('nitro-alert-' + type); if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ classNames ]); + }, [ classNames, type ]); return ( diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx index 97d86efa..58c8aa2b 100644 --- a/src/components/catalog/CatalogView.tsx +++ b/src/components/catalog/CatalogView.tsx @@ -1,6 +1,6 @@ import { CatalogPublishedMessageEvent, FrontPageItem, GetCatalogIndexComposer, GetCatalogPageComposer, GetClubGiftInfo, GetGiftWrappingConfigurationComposer, ILinkEventTracker, RoomPreviewer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; -import { AddEventLinkTracker, GetRoomEngine, LocalizeText, NotificationUtilities, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../api'; +import { AddEventLinkTracker, GetRoomEngine, LocalizeText, NotificationAlertType, NotificationUtilities, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../api'; import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; import { CatalogPurchasedEvent } from '../../events'; import { BatchUpdates, UseMessageEventHook, UseUiEvent } from '../../hooks'; @@ -65,7 +65,7 @@ export const CatalogView: FC<{}> = props => resetState(); - if(wasVisible) NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.published.description'), null, null, null, LocalizeText('catalog.alert.published.title')); + if(wasVisible) NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.published.description'), NotificationAlertType.ALERT, null, null, LocalizeText('catalog.alert.published.title')); }, [ isVisible, resetState ]); UseMessageEventHook(CatalogPublishedMessageEvent, onCatalogPublishedMessageEvent); diff --git a/src/components/notification-center/NotificationCenterView.scss b/src/components/notification-center/NotificationCenterView.scss index 1c765f73..528a3498 100644 --- a/src/components/notification-center/NotificationCenterView.scss +++ b/src/components/notification-center/NotificationCenterView.scss @@ -14,8 +14,46 @@ } } -.notification-frank { - background-image: url('../../assets/images/notifications/frank.gif'); - width:47px; - height: 85px; +.nitro-alert { + min-height: 150px; + max-height: 350px; + + .notification-frank { + background-image: url('../../assets/images/notifications/frank.gif'); + width:47px; + height: 85px; + } + + .notification-text { + min-width: 250px; + } + + &.nitro-alert-default, + &.nitro-alert-motd { + width: 350px; + .notification-text { + min-width: auto; + } + } + + &.nitro-alert-moderation, + &.nitro-alert-alert { + width: 250px; + .notification-text { + min-width: 225px; + } + } +} + +.nitro-notification-bubble { + pointer-events: all; + padding: 6px 5px; + background-color: rgba($dark,.95); + box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); + font-size: $font-size-sm; + + .bubble-image-container { + width: 50px; + height: 50px; + } } diff --git a/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx b/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx index 129852cc..3d64bfbc 100644 --- a/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx +++ b/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx @@ -14,7 +14,7 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) = case NotificationAlertType.NITRO: return case NotificationAlertType.SEARCH: - return + return default: return } diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx index de740652..8ca93f72 100644 --- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx +++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx @@ -18,32 +18,37 @@ export const NotificationDefaultAlertView: FC NotificationUtilities.openUrl(item.clickUrl); close(); - }, [ item, close ]); + }, [item, close]); - - const isAction = (item.clickUrl && item.clickUrl.startsWith('event:')); - - const hasFrank = item.alertType === NotificationAlertType.DEFAULT || item.alertType === NotificationAlertType.MODERATION; + const hasFrank = item.alertType === NotificationAlertType.DEFAULT; return ( - - - {hasFrank && !item.imageUrl && } - {item.imageUrl && !imageFailed && { { setImageFailed(true) } } /> } + + + {hasFrank && !item.imageUrl && } + {item.imageUrl && !imageFailed && {item.title} { setImageFailed(true) }} className="align-self-baseline" />} + { (item.messages.length > 0) && item.messages.map((message, index) => { const htmlText = message.replace(/\r\n|\r|\n/g, '
'); - return ; + return ; })} + {item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <> +
+ + } + -
- - { !isAction && !item.clickUrl && - } - { item.clickUrl && (item.clickUrl.length > 0) && - } - + { (!item.imageUrl || (item.imageUrl && imageFailed)) && <> + +
+ { !item.clickUrl && + } + { item.clickUrl && (item.clickUrl.length > 0) && } + + } ); + } diff --git a/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx b/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx index 043bfcfa..8e8a34c5 100644 --- a/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx +++ b/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { NotificationConfirmItem } from '../../../../api'; +import { NotificationAlertType, NotificationConfirmItem } from '../../../../api'; import { Button, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common'; export interface NotificationDefaultConfirmViewProps extends LayoutNotificationAlertViewProps @@ -27,7 +27,7 @@ export const NotificationDefaultConfirmView: FC + { message }