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

fix messenger invite styling

Browse Source
This commit is contained in:
dank074 2022-03-25 21:35:10 -05:00
parent 48c9eae0e4
commit 60ed7087a1
4 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/friends/messenger_notification_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 B

5
src/components/friends/FriendsView.scss
View File

@ -82,6 +82,11 @@
} }
} }
.messenger-notification-icon {
background: url('../../assets/images/friends/messenger_notification_icon.png') transparent no-repeat;
width: 25px; height: 25px;
}
.nitro-friends { .nitro-friends {
width: $friends-list-width; width: $friends-list-width;
height: $friends-list-height; height: $friends-list-height;

27
src/components/friends/views/messenger/FriendsMessengerThreadGroup.tsx
View File

@ -1,5 +1,5 @@
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { GetSessionDataManager } from '../../../../api'; import { GetSessionDataManager, LocalizeText } from '../../../../api';
import { Base, Flex, LayoutAvatarImageView } from '../../../../common'; import { Base, Flex, LayoutAvatarImageView } from '../../../../common';
import { GroupType } from '../../common/GroupType'; import { GroupType } from '../../common/GroupType';
import { MessengerThread } from '../../common/MessengerThread'; import { MessengerThread } from '../../common/MessengerThread';
@ -33,20 +33,27 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
if(!group.userId) if(!group.userId)
{ {
return ( return (
<div className="d-flex gap-2 w-100 justify-content-start"> <>
{ group.chats.map((chat, index) => { group.chats.map((chat, index) =>
{ {
return ( return (
<Base key={ index } className="text-break"> <div className="d-flex gap-2 w-100 justify-content-start">
{ chat.type === MessengerThreadChat.SECURITY_NOTIFICATION && <Base key={ index } className="w-100 text-break">
<Base className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-muted align-items-center"> { chat.type === MessengerThreadChat.SECURITY_NOTIFICATION &&
<Base className="nitro-friends-spritesheet icon-warning flex-shrink-0" /> <Base className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-muted align-items-center">
<Base>{ chat.message }</Base> <Base className="nitro-friends-spritesheet icon-warning flex-shrink-0" />
</Base> } <Base>{ chat.message }</Base>
</Base> </Base> }
{ chat.type === MessengerThreadChat.ROOM_INVITE &&
<Base className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-black align-items-center">
<Base className="messenger-notification-icon flex-shrink-0" />
<Base>{(LocalizeText('messenger.invitation') + ' ') }{ chat.message }</Base>
</Base> }
</Base>
</div>
); );
}) } }) }
</div> </>
); );
} }

16
src/components/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -1,7 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer'; import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteErrorEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../../../api'; import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, NotificationAlertType, NotificationUtilities, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../../../api';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { FriendsMessengerIconEvent } from '../../../../events'; import { FriendsMessengerIconEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks'; import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
@ -109,13 +109,23 @@ export const FriendsMessengerView: FC<{}> = props =>
if((threadIndex === -1) || !thread) return; if((threadIndex === -1) || !thread) return;
thread.addMessage(parser.senderId, parser.messageText, 0, null, MessengerThreadChat.ROOM_INVITE); thread.addMessage(null, parser.messageText, 0, null, MessengerThreadChat.ROOM_INVITE);
setMessageThreads(prevValue => [...prevValue]); setMessageThreads(prevValue => [...prevValue]);
}, [getMessageThreadWithIndex]); }, [getMessageThreadWithIndex]);
UseMessageEventHook(RoomInviteEvent, onRoomInviteEvent); UseMessageEventHook(RoomInviteEvent, onRoomInviteEvent);
const onRoomInviteErrorEvent = useCallback((event: RoomInviteErrorEvent) =>
{
const parser = event.getParser();
const message = ((('Received room invite error: errorCode: ' + parser.errorCode) + ', recipients: ') + parser.failedRecipients);
NotificationUtilities.simpleAlert(message, NotificationAlertType.DEFAULT, null, null, LocalizeText('friendlist.alert.title'));
}, []);
UseMessageEventHook(RoomInviteErrorEvent, onRoomInviteErrorEvent);
const sendMessage = useCallback(() => const sendMessage = useCallback(() =>
{ {
if(!messageText || !messageText.length) return; if(!messageText || !messageText.length) return;