nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Bill 2021-11-22 19:10:11 -05:00
parent b51ef0bbcc
commit f69a274cd8
9 changed files with 28 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.scss
View File

@ -50,6 +50,9 @@ $chat-history-height: 300px;
$friends-list-width: 250px;
$friends-list-height: 300px;
$help-width: 275px;
$help-height: 450px;
.nitro-app {
width: 100%;
height: 100%;

2
src/assets/styles/bootstrap/_variables.scss
View File

@ -478,7 +478,7 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !d
//
// Style anchor elements.
$link-color: $primary !default;
$link-color: $body-color !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;

6
src/layout/user-profile-icon/UserProfileIconView.tsx
View File

@ -5,9 +5,7 @@ import { UserProfileIconViewProps } from './UserProfileIconView.types';
export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
{
const { userId = 0, userName = null } = props;
const { className = '', children = null, ...rest } = props;
const { userId = 0, userName = null, className = '', children = null, ...rest } = props;
const getClassName = useMemo(() =>
{
@ -19,7 +17,7 @@ export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
}, [ className ]);
return (
<NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) }>
<NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) } { ... rest }>
{ children }
</NitroLayoutBase>
);

7
src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
View File

@ -9,7 +9,7 @@ import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types';
export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
{
const { friend = null } = props;
const { friend = null, selected = false, children = null, ...rest } = props;
const [ isExpanded, setIsExpanded ] = useState<boolean>(false);
@ -50,7 +50,7 @@ export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
if(!friend) return null;
return (
<div className="px-2 py-1 d-flex gap-1 align-items-center">
<NitroLayoutFlex className="px-2 py-1 align-items-center" gap={ 1 } { ...rest }>
<UserProfileIconView userId={ friend.id } />
<div>{ friend.name }</div>
<NitroLayoutFlex className="ms-auto align-items-center" gap={ 1 }>
@ -70,6 +70,7 @@ export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
<NitroLayoutBase className="nitro-friends-spritesheet icon-none cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_NONE) } />
</> }
</NitroLayoutFlex>
</div>
{ children }
</NitroLayoutFlex>
);
}

4
src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
View File

@ -1,6 +1,8 @@
import { NitroLayoutFlexProps } from '../../../../layout';
import { MessengerFriend } from '../../common/MessengerFriend';
export interface FriendsGroupItemViewProps
export interface FriendsGroupItemViewProps extends NitroLayoutFlexProps
{
friend: MessengerFriend;
selected?: boolean;
}

10
src/views/friends/views/friends-list/FriendsListView.tsx
View File

@ -1,6 +1,7 @@
import { FC, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
import { MessengerFriend } from '../../common/MessengerFriend';
import { FriendsGroupView } from '../friends-group/FriendsGroupView';
import { FriendsRequestView } from '../friends-request/FriendsRequestView';
import { FriendsSearchView } from '../friends-search/FriendsSearchView';
@ -11,10 +12,15 @@ const MODE_SEARCH: number = 1;
export const FriendsListView: FC<FriendsListViewProps> = props =>
{
const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props;
const [ selectedFriends, setSelectedFriends ] = useState<MessengerFriend[]>([]);
const [ mode, setMode ] = useState<number>(0);
useEffect(() =>
{
setSelectedFriends([]);
}, [ onlineFriends, offlineFriends ]);
return (
<NitroCardView className="nitro-friends" uniqueKey="nitro-friends">
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ onCloseClick } />

37
src/views/friends/views/request-item/FriendsRequestItemView.tsx
View File

@ -1,37 +0,0 @@
import { AcceptFriendMessageComposer, DeclineFriendMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { SendMessageHook } from '../../../../hooks';
import { UserProfileIconView } from '../../../../layout';
import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
{
const { request = null } = props;
const accept = useCallback(() =>
{
if(!request) return;
SendMessageHook(new AcceptFriendMessageComposer(request.id));
}, [ request ]);
const decline = useCallback(() =>
{
if(!request) return;
SendMessageHook(new DeclineFriendMessageComposer(false, request.id));
}, [ request ]);
if(!request) return null;
return (
<div className="px-2 py-1 d-flex gap-1 align-items-center">
<UserProfileIconView userId={ request.id } />
<div>{ request.name }</div>
<div className="ms-auto d-flex align-items-center gap-1">
<i className="icon icon-accept cursor-pointer" onClick={ accept } />
<i className="icon icon-deny cursor-pointer" onClick={ decline } />
</div>
</div>
);
};

5
src/views/friends/views/request-item/FriendsRequestItemView.types.ts
View File

@ -1,5 +0,0 @@
import { MessengerRequest } from './../../common/MessengerRequest';
export interface FriendsRequestItemViewProps
{
request: MessengerRequest;
}

14
src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
View File

@ -4,7 +4,7 @@ import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from
import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
import { UserProfileIconView } from '../../../../../../layout';
import { NitroLayoutFlex, UserProfileIconView } from '../../../../../../layout';
import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView';
@ -55,7 +55,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
CreateEventDispatcherHook(RoomSessionUserBadgesEvent.RSUBE_BADGES, eventDispatcher, onRoomSessionUserBadgesEvent);
const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
const onUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
{
const parser = event.getParser();
@ -63,7 +63,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
setUserRelationships(parser);
}, [userData]);
CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent);
CreateMessageHook(RelationshipStatusInfoEvent, onUserRelationshipsEvent);
useEffect(() =>
{
@ -73,7 +73,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
SendMessageHook(new UserRelationshipsComposer(userData.webID));
return () =>
{
{
setBadges([]);
setUserRelationships(null);
}
@ -85,10 +85,10 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<div className="d-flex flex-column nitro-card nitro-infostand rounded">
<div className="container-fluid content-area overflow-visible">
<div className="d-flex justify-content-between align-items-center">
<div className="small text-wrap">
<NitroLayoutFlex className="align-items-center">
<UserProfileIconView userId={ userData.webID } />
{ userData.name }
</div>
<span className="small text-wrap">{ userData.name }</span>
</NitroLayoutFlex>
<i className="fas fa-times cursor-pointer" onClick={ close }></i>
</div>
<hr className="m-0 my-1" />