mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
Update toolbar
This commit is contained in:
Bill
parent
3effb407ce
commit
d508b9e2c1
124
package-lock.json
generated
124
package-lock.json
generated
@ -1824,6 +1824,25 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
|
||||
},
|
||||
"@restart/context": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
|
||||
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
|
||||
},
|
||||
"@restart/hooks": {
|
||||
"version": "0.3.26",
|
||||
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
|
||||
"integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.20",
|
||||
"lodash-es": "^4.17.20"
|
||||
}
|
||||
},
|
||||
"@rollup/plugin-node-resolve": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
|
||||
@ -2204,6 +2223,14 @@
|
||||
"@babel/types": "^7.3.0"
|
||||
}
|
||||
},
|
||||
"@types/classnames": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
|
||||
"integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
|
||||
"requires": {
|
||||
"classnames": "*"
|
||||
}
|
||||
},
|
||||
"@types/eslint": {
|
||||
"version": "7.2.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
|
||||
@ -2249,6 +2276,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
|
||||
"integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
|
||||
},
|
||||
"@types/invariant": {
|
||||
"version": "2.2.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
|
||||
"integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
|
||||
},
|
||||
"@types/istanbul-lib-coverage": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
|
||||
@ -2357,7 +2389,6 @@
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
"integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
@ -2413,6 +2444,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@types/warning": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
|
||||
"integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
|
||||
},
|
||||
"@types/webpack": {
|
||||
"version": "4.41.27",
|
||||
"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.27.tgz",
|
||||
@ -7854,6 +7890,14 @@
|
||||
"side-channel": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"ip": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||
@ -9995,6 +10039,11 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
@ -14529,6 +14578,15 @@
|
||||
"react-is": "^16.8.1"
|
||||
}
|
||||
},
|
||||
"prop-types-extra": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
|
||||
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2",
|
||||
"warning": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"proxy-addr": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
|
||||
@ -14712,6 +14770,31 @@
|
||||
"whatwg-fetch": "^3.4.1"
|
||||
}
|
||||
},
|
||||
"react-bootstrap": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
|
||||
"integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.8",
|
||||
"@restart/context": "^2.1.4",
|
||||
"@restart/hooks": "^0.3.26",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/invariant": "^2.2.33",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": ">=16.9.35",
|
||||
"@types/react-transition-group": "^4.4.1",
|
||||
"@types/warning": "^3.0.0",
|
||||
"classnames": "^2.2.6",
|
||||
"dom-helpers": "^5.1.2",
|
||||
"invariant": "^2.2.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"prop-types-extra": "^1.1.0",
|
||||
"react-overlays": "^5.0.0",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"uncontrollable": "^7.2.1",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
|
||||
@ -14847,6 +14930,26 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-overlays": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.1.tgz",
|
||||
"integrity": "sha512-plwUJieTBbLSrgvQ4OkkbTD/deXgxiJdNuKzo6n1RWE3OVnQIU5hffCGS/nvIuu6LpXFs2majbzaXY8rcUVdWA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.8",
|
||||
"@popperjs/core": "^2.8.6",
|
||||
"@restart/hooks": "^0.3.26",
|
||||
"@types/warning": "^3.0.0",
|
||||
"dom-helpers": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"uncontrollable": "^7.2.1",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "7.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.3.tgz",
|
||||
@ -17383,6 +17486,17 @@
|
||||
"which-boxed-primitive": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"uncontrollable": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
|
||||
"integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.6.3",
|
||||
"@types/react": ">=16.9.11",
|
||||
"invariant": "^2.2.4",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"unicode-canonical-property-names-ecmascript": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
|
||||
@ -17705,6 +17819,14 @@
|
||||
"makeerror": "1.0.x"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"nitro-renderer": "file:../nitro-renderer",
|
||||
"node-sass": "^5.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^1.5.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-redux": "^7.2.3",
|
||||
|
||||
@ -7,6 +7,7 @@ let clickCount = 0;
|
||||
|
||||
export function DispatchTouchEvent(roomId: number, canvasId: number, event: TouchEvent)
|
||||
{
|
||||
console.log(event);
|
||||
let eventType = event.type;
|
||||
|
||||
if(eventType === TouchEventType.TOUCH_END && !didMouseMove)
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { RoomSessionEvent } from 'nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { InventoryEvent } from '../../events';
|
||||
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
|
||||
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
||||
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
||||
import { LocalizeText } from '../../utils/LocalizeText';
|
||||
import { InventoryMessageHandler } from './InventoryMessageHandler';
|
||||
@ -26,6 +28,22 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
||||
useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
|
||||
useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
|
||||
|
||||
const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
|
||||
{
|
||||
switch(event.type)
|
||||
{
|
||||
case RoomSessionEvent.CREATED:
|
||||
//
|
||||
return;
|
||||
case RoomSessionEvent.ENDED:
|
||||
setIsVisible(false);
|
||||
return;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
|
||||
useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
|
||||
|
||||
function hideInventory(): void
|
||||
{
|
||||
setIsVisible(false);
|
||||
|
||||
@ -2,6 +2,7 @@ import { Nitro, RoomSessionEvent } from 'nitro-renderer';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
||||
import { TransitionAnimation } from '../../transitions/TransitionAnimation';
|
||||
import { TransitionAnimationTypes } from '../../transitions/TransitionAnimation.types';
|
||||
import { CatalogView } from '../catalog/CatalogView';
|
||||
import { HotelView } from '../hotel-view/HotelView';
|
||||
import { InventoryView } from '../inventory/InventoryView';
|
||||
@ -43,7 +44,7 @@ export function MainView(props: MainViewProps): JSX.Element
|
||||
<div className="nitro-main">
|
||||
{ landingViewVisible && <HotelView /> }
|
||||
<RoomHostView />
|
||||
<TransitionAnimation className="nitro-toolbar" type={ 'fadeUp' } inProp={ isReady } timeout={ 300 }>
|
||||
<TransitionAnimation className="nitro-toolbar" type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isReady } timeout={ 300 }>
|
||||
<ToolbarView isInRoom={ !landingViewVisible } />
|
||||
</TransitionAnimation>
|
||||
<NavigatorView />
|
||||
|
||||
@ -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 { ChatInputView } from './widgets/chat-input/ChatInputView';
|
||||
import { ChatWidgetsView } from './widgets/chat/ChatWidgetsView';
|
||||
import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView';
|
||||
|
||||
@ -87,6 +88,7 @@ export function RoomView(props: RoomViewProps): JSX.Element
|
||||
{ roomSession && events && roomCanvas &&
|
||||
createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) &&
|
||||
<>
|
||||
<ChatInputView />
|
||||
<FurnitureWidgetsView events={ events } />
|
||||
<ChatWidgetsView />
|
||||
</> }
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
@import './chat/ChatWidgetsView';
|
||||
@import './chat-input/ChatInputView';
|
||||
@import './furniture/FurnitureWidgets';
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { LocalizeText } from '../../../../../utils/LocalizeText';
|
||||
import { ChatFormWidgetViewProps } from './ChatFormWidgetView.types';
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../../utils/LocalizeText';
|
||||
import { ChatInputViewProps } from './ChatInputView.types';
|
||||
|
||||
export function ChatFormWidgetView(props: ChatFormWidgetViewProps): JSX.Element
|
||||
export const ChatInputView: FC<ChatInputViewProps> = props =>
|
||||
{
|
||||
const {} = props;
|
||||
|
||||
return (
|
||||
<div className="nitro-chat-form fixed-bottom mb-4 d-flex justify-content-center">
|
||||
<div className="nitro-chat-form-input">
|
||||
4
src/views/room/widgets/chat-input/ChatInputView.types.ts
Normal file
4
src/views/room/widgets/chat-input/ChatInputView.types.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export interface ChatInputViewProps
|
||||
{
|
||||
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
.nitro-chat-widget {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@import './form/ChatFormWidgetView';
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { ChatWidgetsViewProps } from './ChatWidgetsView.types';
|
||||
import { ChatFormWidgetView } from './form/ChatFormWidgetView';
|
||||
import { ChatMessagesWidgetView } from './messages/ChatMessagesWidgetView';
|
||||
|
||||
export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
|
||||
@ -9,7 +8,6 @@ export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
|
||||
return (
|
||||
<div className="nitro-chat-widget">
|
||||
<ChatMessagesWidgetView />
|
||||
<ChatFormWidgetView />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export interface ChatFormWidgetViewProps
|
||||
{}
|
||||
@ -1,7 +1,8 @@
|
||||
.nitro-toolbar {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
z-index: $toolbar-zindex;
|
||||
pointer-events: all;
|
||||
|
||||
@ -19,7 +20,6 @@
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
margin: 0 5px;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
-webkit-transform: translate(0, 1px);
|
||||
@ -28,7 +28,6 @@
|
||||
|
||||
.avatar-image {
|
||||
top: 20px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.icon,
|
||||
@ -37,6 +36,10 @@
|
||||
filter: drop-shadow(0px 2px 0px black);
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
.count {
|
||||
top: 0rem;
|
||||
right: 5px;
|
||||
|
||||
@ -46,8 +46,8 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="card p-0 overflow-hidden">
|
||||
<ul className="list-group list-group-horizontal p-1">
|
||||
<div className="d-flex flex-column bg-primary rounded shadow border border-black p-0 h-100">
|
||||
<ul className="flex-grow-1 list-group p-1">
|
||||
{ isInRoom && (
|
||||
<li className="list-group-item">
|
||||
<i className="icon icon-hotelview icon-nitro-light"></i>
|
||||
@ -72,7 +72,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
|
||||
{ (unseenFriendListCount > 0) && (
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
</ul>
|
||||
<ul className="list-group p-1">
|
||||
<li className="position-relative list-group-item">
|
||||
{ userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } headOnly={ true } /> }
|
||||
{ (unseenAchievementsCount > 0) && (
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user