nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '@experimental/notification-sizes' into 'dev'

Browse Source 
different notifications n sizes

See merge request nitro/nitro-react!44
This commit is contained in:
Bill 2022-03-28 03:13:45 +00:00
commit cdb29044d4
10 changed files with 83 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/notification/NotificationAlertItem.ts
View File

@ -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;

1
src/api/notification/NotificationAlertType.ts
View File

@ -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';
}

2
src/api/notification/NotificationUtilities.ts
View File

@ -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

19
src/common/index.scss
View File

@ -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;

8
src/common/layout/LayoutNotificationAlertView.tsx
View File

@ -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<LayoutNotificationAlertViewProps> = 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'];
newClassNames.push('nitro-alert-' + type);
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ classNames ]);
}, [ classNames, type ]);
return (
<NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>

4
src/components/catalog/CatalogView.tsx
View File

@ -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);

38
src/components/notification-center/NotificationCenterView.scss
View File

@ -14,8 +14,46 @@
}
}
.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;
}
}

31
src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
View File

@ -20,30 +20,35 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
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 (
<LayoutNotificationAlertView title={title} close={close} {...rest}>
<Flex fullHeight overflow="auto" gap={2}>
<LayoutNotificationAlertView title={title} close={close} {...rest} type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
<Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
{hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
{item.imageUrl && !imageFailed && <img src={item.imageUrl} alt={ item.title } onError={() => { setImageFailed(true) } } /> }
{item.imageUrl && !imageFailed && <img src={item.imageUrl} alt={item.title} onError={() => { setImageFailed(true) }} className="align-self-baseline" />}
<Base classNames={['notification-text overflow-y-auto d-flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-content-center' : '']}>
{ (item.messages.length > 0) && item.messages.map((message, index) =>
{
const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
return <Base grow fullHeight overflow="auto" key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
return <Base key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
})}
{item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
<hr className="my-2 w-100" />
<Button onClick={visitUrl} className="align-self-center px-3">{LocalizeText(item.clickUrlText)}</Button>
</>}
</Base>
</Flex>
<hr className="my-2"/>
<Column alignItems="center" center gap={ 1 }>
{ !isAction && !item.clickUrl &&
{ (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
<Column alignItems="center" center gap={0}>
<hr className="my-2 w-100" />
{ !item.clickUrl &&
<Button onClick={close}>{LocalizeText('generic.close')}</Button>}
{ item.clickUrl && (item.clickUrl.length > 0) &&
<Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
{ item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={visitUrl}>{LocalizeText(item.clickUrlText)}</Button> }
</Column>
</> }
</LayoutNotificationAlertView>
);
}

4
src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx
View File

@ -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<NotificationDefaultConfirmViewPr
}
return (
<LayoutNotificationAlertView title={ title } close={ close } { ...rest }>
<LayoutNotificationAlertView title={title} close={close} {...rest} type={ NotificationAlertType.ALERT }>
<Flex grow center>
<Text>{ message }</Text>
</Flex>