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

Merge branch 'main' of https://github.com/billsonnn/nitro-react

Browse Source
This commit is contained in:
Bill 2021-04-21 22:06:37 -04:00
commit dca8e954ae
15 changed files with 110 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/navigator/NavigatorView.tsx
View File

@ -140,7 +140,7 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
</button>
</div>
<NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
<TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 300 }>
<TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 200 }>
<NavigatorResultListsView resultLists={ searchResults } />
</TransitionAnimation>
</div>

4
src/views/navigator/lock/NavigatorLockView.tsx
View File

@ -15,7 +15,6 @@ export function NavigatorLockView(props: NavigatorLockViewProps): JSX.Element
}
return (
<>
<DraggableWindow handle=".drag-handler">
<div className="nitro-navigator-lock d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
<div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
@ -32,7 +31,6 @@ export function NavigatorLockView(props: NavigatorLockViewProps): JSX.Element
</> }
</div>
</div>
</DraggableWindow>
</>
</DraggableWindow>
);
}

44
src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'classnames';
import { RoomDataParser } from 'nitro-renderer';
import React from 'react';
import React, { useContext } from 'react';
import { NavigatorContext } from '../../../NavigatorView';
import { NavigatorResultViewProps } from './NavigatorResultView.types';
@ -8,6 +8,8 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
{
const { result = null } = props;
const navigatorContext = useContext(NavigatorContext);
function getUserCounterColor(): string
{
const num: number = (100 * (result.userCount / result.maxUserCount));
@ -37,28 +39,24 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
}
return (
<NavigatorContext.Consumer>
{ navigatorContext => {
return <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
<div className="d-flex justify-content-between w-100 px-2 py-1">
<div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
<div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }>
<i className="fas fa-user mr-1 small"></i> { result.userCount }
</div>
<div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
<span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span>
</div>
</div>
<div className="d-flex flex-row-reverse align-items-center">
<i className="fas fa-info-circle small" onClick={ openInfo }></i>
{ result.habboGroupId > 0 && <i className="fas fa-users mr-2 small"></i> }
{ result.doorMode !== RoomDataParser.OPEN_STATE &&
<i className={ "mr-2 fas small" + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
}
</div>
</div>
<div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
<div className="d-flex justify-content-between w-100 px-2 py-1">
<div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
<div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }>
<i className="fas fa-user mr-1 small"></i> { result.userCount }
</div>
}}
</NavigatorContext.Consumer>
<div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
<span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span>
</div>
</div>
<div className="d-flex flex-row-reverse align-items-center">
<i className="fas fa-info-circle small" onClick={ openInfo }></i>
{ result.habboGroupId > 0 && <i className="fas fa-users mr-2 small"></i> }
{ result.doorMode !== RoomDataParser.OPEN_STATE &&
<i className={ 'mr-2 fas small ' + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
}
</div>
</div>
</div>
);
}

6
src/views/room/RoomView.tsx
View File

@ -6,6 +6,7 @@ import { WindowResizeEvent } from '../../api/nitro/room/DispatchResizeEvent';
import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
import { RoomViewProps } from './RoomView.types';
import { ChatWidgetsView } from './widgets/chat/ChatWidgetsView';
import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView';
export function RoomView(props: RoomViewProps): JSX.Element
@ -85,7 +86,10 @@ export function RoomView(props: RoomViewProps): JSX.Element
{ roomSession && <div id="room-view" className="nitro-room-container"></div> }
{ roomSession && events && roomCanvas &&
createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) &&
<FurnitureWidgetsView events={ events } /> }
<>
<FurnitureWidgetsView events={ events } />
<ChatWidgetsView />
</> }
</div>
);
}

1
src/views/room/widgets/Widgets.scss
View File

@ -1 +1,2 @@
@import './chat/ChatWidgetsView';
@import './furniture/FurnitureWidgets';

5
src/views/room/widgets/chat/ChatWidgetsView.scss Normal file
View File

@ -0,0 +1,5 @@
.nitro-chat-widget {
pointer-events: none;
}
@import './form/ChatFormWidgetView';

15
src/views/room/widgets/chat/ChatWidgetsView.tsx Normal file
View File

@ -0,0 +1,15 @@
import { ChatWidgetsViewProps } from './ChatWidgetsView.types';
import { ChatFormWidgetView } from './form/ChatFormWidgetView';
import { ChatMessagesWidgetView } from './messages/ChatMessagesWidgetView';
export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
{
const {} = props;
return (
<div className="nitro-chat-widget">
<ChatMessagesWidgetView />
<ChatFormWidgetView />
</div>
);
}

3
src/views/room/widgets/chat/ChatWidgetsView.types.ts Normal file
View File

@ -0,0 +1,3 @@
export interface ChatWidgetsViewProps
{}

17
src/views/room/widgets/chat/form/ChatFormWidgetView.scss Normal file
View File

@ -0,0 +1,17 @@
.nitro-chat-form-input {
display: inline-grid;
vertical-align: top;
align-items: center;
position: relative;
height: 100%;
padding: 0 10px;
pointer-events: all;
input {
width: auto;
height: 45px;
border-radius: 10px;
border: 1px solid rgb(0, 0, 0);
background: #EDEDED;
}
}

15
src/views/room/widgets/chat/form/ChatFormWidgetView.tsx Normal file
View File

@ -0,0 +1,15 @@
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { ChatFormWidgetViewProps } from './ChatFormWidgetView.types';
export function ChatFormWidgetView(props: ChatFormWidgetViewProps): JSX.Element
{
const {} = props;
return (
<div className="nitro-chat-form fixed-bottom mb-4 d-flex justify-content-center">
<div className="nitro-chat-form-input">
<input type="text" className="form-control" placeholder={ LocalizeText('widgets.chatinput.default') } />
</div>
</div>
);
}

2
src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx Normal file
View File

@ -0,0 +1,2 @@
export interface ChatFormWidgetViewProps
{}

10
src/views/room/widgets/chat/messages/ChatMessagesWidgetView.tsx Normal file
View File

@ -0,0 +1,10 @@
import { ChatMessagesWidgetViewProps } from './ChatMessagesWidgetView.types';
export function ChatMessagesWidgetView(props: ChatMessagesWidgetViewProps): JSX.Element
{
const {} = props;
return (
<></>
);
}

2
src/views/room/widgets/chat/messages/ChatMessagesWidgetView.types.ts Normal file
View File

@ -0,0 +1,2 @@
export interface ChatMessagesWidgetViewProps
{}

10
src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.tsx Normal file
View File

@ -0,0 +1,10 @@
import { ChatMessageWidgetViewProps } from './ChatMessageWidgetView.types';
export function ChatMessageWidgetView(props: ChatMessageWidgetViewProps): JSX.Element
{
const {} = props;
return (
<></>
);
}

2
src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.types.ts Normal file
View File

@ -0,0 +1,2 @@
export interface ChatMessageWidgetViewProps
{}