nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 10:22:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update messenger

Browse Source
This commit is contained in:
Bill 2022-03-11 23:01:23 -05:00
parent 6474a88000
commit 0f81a0f5ed
4 changed files with 68 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/layout/LayoutItemCountView.tsx
View File

@ -8,7 +8,7 @@ interface LayoutItemCountViewProps extends BaseProps<HTMLDivElement>
export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props => export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props =>
{ {
const { count = 0, position = 'aboslute', classNames = [], children = null, ...rest } = props; const { count = 0, position = 'absolute', classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {

2
src/components/toolbar/ToolbarView.tsx
View File

@ -223,7 +223,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<LayoutItemCountView count={ unseenFriendRequestCount } /> } <LayoutItemCountView count={ unseenFriendRequestCount } /> }
</Base> </Base>
{ ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) && { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
<Base pointer className={ `navigation-item icon icon-message ${ (chatIconType === CHAT_ICON_UNREAD) && 'is-unread' }` } onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) } /> } <Base pointer className={ `navigation-item icon icon-message ${ (chatIconType === CHAT_ICON_UNREAD) && 'is-unseen' }` } onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) } /> }
</Flex> </Flex>
<Base id="toolbar-friend-bar-container" className="d-none d-lg-block" /> <Base id="toolbar-friend-bar-container" className="d-none d-lg-block" />
</Flex> </Flex>

14
src/views/friends/views/messenger/FriendsMessengerView.scss
View File

@ -2,6 +2,20 @@
width: $messenger-width; width: $messenger-width;
height: $messenger-height; height: $messenger-height;
.layout-grid-item {
height: 50px;
}
.friend-head {
width: 50px;
height: 45px;
overflow: hidden;
.avatar-image {
margin-top: 90px;
}
}
.open-chat-entry { .open-chat-entry {
position: relative; position: relative;
border: 2px solid; border: 2px solid;

52
src/views/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -1,7 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer'; import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, 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, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../../../api';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } 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';
import { MessengerThread } from '../../common/MessengerThread'; import { MessengerThread } from '../../common/MessengerThread';
@ -253,55 +254,60 @@ export const FriendsMessengerView: FC<{}> = props =>
<NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" theme="primary-slim"> <NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" theme="primary-slim">
<NitroCardHeaderView headerText={LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [visibleThreads.length.toString()])} onCloseClick={event => setIsVisible(false)} /> <NitroCardHeaderView headerText={LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [visibleThreads.length.toString()])} onCloseClick={event => setIsVisible(false)} />
<NitroCardContentView> <NitroCardContentView>
<Grid> <Grid overflow="hidden">
<Column size={ 4 }> <Column size={ 4 }>
<Base className='text-black fw-bold fs-5'>{LocalizeText('toolbar.icon.label.messenger')}</Base> <Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
<Column className='h-100 overflow-auto'> <Column fullHeight overflow="auto">
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) => { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
{ {
const messageThreadIndex = messageThreads.indexOf(thread); const messageThreadIndex = messageThreads.indexOf(thread);
return ( return (
<Flex key={index} className={`open-chat-entry p-1 cursor-pointer rounded ${activeThreadIndex === messageThreadIndex ? 'active' : ''}`} onClick={event => setActiveThreadIndex(messageThreadIndex)}> <LayoutGridItem key={ index } itemActive={ (activeThreadIndex === messageThreadIndex) } onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
{ thread.unread && { thread.unread &&
<LayoutItemCountView count={ thread.unreadCount }/> <LayoutItemCountView count={ thread.unreadCount } /> }
} <Flex fullWidth alignItems="center" gap={ 1 }>
<div className="friend-head rounded flex-shrink-0"> <Flex alignItems="center" className="friend-head px-1">
{ (thread.participant.id > 0) &&
{thread.participant.id > 0 && <LayoutAvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />} <LayoutAvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } /> }
{thread.participant.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={thread.participant.figure} />} { (thread.participant.id <= 0) &&
<LayoutBadgeImageView isGroup={ true } badgeCode={ thread.participant.figure } /> }
</div>
<Base className='d-flex text-truncate text-black ms-1 align-items-center'>{thread.participant.name}</Base>
</Flex> </Flex>
<Text truncate grow>{ thread.participant.name }</Text>
</Flex>
</LayoutGridItem>
); );
})} })}
</Column> </Column>
</Column> </Column>
<Column size={ 8 }> <Column size={ 8 } overflow="hidden">
{ (activeThreadIndex >= 0) && { (activeThreadIndex >= 0) &&
<> <>
<Base className='mb-2 text-black text-center fw-bold fs-6'>{LocalizeText('messenger.window.separator', ['FRIEND_NAME'], [messageThreads[activeThreadIndex].participant.name])}</Base> <Text bold center>{ LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) }</Text>
<Flex className="mb-2" gap={2}> <Flex alignItems="center" justifyContent="between" gap={ 1 }>
<Flex gap={ 1 }>
<ButtonGroup> <ButtonGroup>
<Button variant="primary" onClick={ followFriend }> <Button onClick={ followFriend }>
<Base className="nitro-friends-spritesheet icon-follow" /> <Base className="nitro-friends-spritesheet icon-follow" />
</Button> </Button>
<Button variant="primary" onClick={ openProfile }> <Button onClick={ openProfile }>
<Base className="nitro-friends-spritesheet icon-profile-sm" /> <Base className="nitro-friends-spritesheet icon-profile-sm" />
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<Button variant="danger" onClick={ openProfile }> <Button variant="danger" onClick={ openProfile }>
{LocalizeText('messenger.window.button.report')} {LocalizeText('messenger.window.button.report')}
</Button> </Button>
<Button className="ms-auto" onClick={ event => closeThread(activeThreadIndex) }> </Flex>
<Base className="fas fa-times" /> <Button onClick={ event => closeThread(activeThreadIndex) }>
<FontAwesomeIcon icon="times" />
</Button> </Button>
</Flex> </Flex>
<Column innerRef={messagesBox} className="bg-muted p-2 rounded chat-messages mb-2 h-100 w-100"> <Column fit innerRef={ messagesBox } className="bg-muted p-2 rounded chat-messages">
<Column overflow="auto">
<FriendsMessengerThreadView thread={ messageThreads[activeThreadIndex] } /> <FriendsMessengerThreadView thread={ messageThreads[activeThreadIndex] } />
</Column> </Column>
<Flex gap={2}> </Column>
<Flex gap={ 1 }>
<input type="text" className="form-control form-control-sm" maxLength={ 255 } placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } /> <input type="text" className="form-control form-control-sm" maxLength={ 255 } placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
<Button variant="success" onClick={ sendMessage }> <Button variant="success" onClick={ sendMessage }>
{ LocalizeText('widgets.chatinput.say') } { LocalizeText('widgets.chatinput.say') }