From 6dd338f3c3bce268e154e12dcb3d139622640f5e Mon Sep 17 00:00:00 2001 From: Layne Date: Tue, 15 Mar 2022 05:11:11 -0400 Subject: [PATCH] new load screen, mod tool pos, slim header button --- .vscode/settings.json | 1 - src/App.tsx | 26 ++++++++++++---- src/common/card/NitroCardView.scss | 3 +- .../draggable-window/DraggableWindow.tsx | 4 +++ .../DraggableWindowPosition.ts | 1 + .../chat-history/ChatHistoryView.tsx | 2 +- src/components/loading/LoadingView.scss | 30 ++++++++++++++++++- src/components/loading/LoadingView.tsx | 27 +++++++++++++---- src/components/mod-tools/ModToolsView.tsx | 4 +-- .../views/tickets/CfhChatlogView.tsx | 1 + .../NavigatorSearchResultView.tsx | 2 +- .../FurnitureExternalImageView.tsx | 2 +- 12 files changed, 85 insertions(+), 18 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 55370fd0..095d157e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,7 +9,6 @@ "source.fixAll.sortJSON": false, "source.organizeImports": true }, - "emmet.showExpandedAbbreviation": "never", "git.ignoreLimitWarning": true, "files.eol": "\n", "files.insertFinalNewline": true, diff --git a/src/App.tsx b/src/App.tsx index 8a507fd0..9d3fd026 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,8 @@ export const App: FC<{}> = props => { const [ isReady, setIsReady ] = useState(false); const [ isError, setIsError ] = useState(false); - const [ message, setMessage ] = useState('Getting Ready'); + const [message, setMessage] = useState('Getting Ready'); + const [percent, setPercent] = useState(0); //@ts-ignore if(!NitroConfig) throw new Error('NitroConfig is not defined!'); @@ -34,12 +35,18 @@ export const App: FC<{}> = props => return urls; }, []); + const loadPercent = useCallback(() => + { + setPercent(percent + 16.66); + }, [setPercent,percent]); + const handler = useCallback((event: NitroEvent) => { switch(event.type) { case ConfigurationEvent.LOADED: GetNitroInstance().localization.init(); + loadPercent(); return; case ConfigurationEvent.FAILED: setIsError(true); @@ -55,7 +62,8 @@ export const App: FC<{}> = props => setTimeout(() => window.location.reload(), 1500); return; - case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING: + case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING: + loadPercent(); return; case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED: setIsError(true); @@ -63,6 +71,7 @@ export const App: FC<{}> = props => return; case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED: setMessage('Finishing Up'); + loadPercent(); GetAvatarRenderManager().init(); @@ -82,9 +91,14 @@ export const App: FC<{}> = props => return; case AvatarRenderEvent.AVATAR_RENDER_READY: GetNitroInstance().init(); + loadPercent(); return; case RoomEngineEvent.ENGINE_INITIALIZED: - setIsReady(true); + loadPercent(); + setTimeout(() => + { + setIsReady(true); + }, 200) return; case NitroLocalizationEvent.LOADED: GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) => @@ -94,6 +108,8 @@ export const App: FC<{}> = props => setMessage('Connecting'); GetCommunication().init(); + + loadPercent(); } else { @@ -103,7 +119,7 @@ export const App: FC<{}> = props => }); return; } - }, [ getPreloadAssetUrls ]); + }, [ getPreloadAssetUrls,loadPercent ]); UseMainEvent(Nitro.WEBGL_UNAVAILABLE, handler); UseMainEvent(Nitro.WEBGL_CONTEXT_LOST, handler); @@ -130,7 +146,7 @@ export const App: FC<{}> = props => return ( { (!isReady || isError) && - } + } diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss index f1a85fac..7ad94c1c 100644 --- a/src/common/card/NitroCardView.scss +++ b/src/common/card/NitroCardView.scss @@ -83,11 +83,12 @@ $nitro-card-tabs-height: 33px; color: $white; text-shadow: 0px 4px 4px rgba($black, 0.25); @include font-size($h5-font-size); + min-height: 21px; } .nitro-card-header-close { cursor: pointer; - padding: 0px 1px; + padding: 0px 2px; line-height: 1; @include font-size($h7-font-size); border-radius: $border-radius; diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx index 4bb08c74..65cb8224 100644 --- a/src/common/draggable-window/DraggableWindow.tsx +++ b/src/common/draggable-window/DraggableWindow.tsx @@ -182,6 +182,10 @@ export const DraggableWindow: FC = props => element.style.top = `calc(50vh - ${ (element.offsetHeight / 2) }px)`; element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`; break; + case DraggableWindowPosition.TOP_LEFT: + element.style.top = '50px'; + element.style.left = '50px'; + break; } if(uniqueKey !== null) diff --git a/src/common/draggable-window/DraggableWindowPosition.ts b/src/common/draggable-window/DraggableWindowPosition.ts index a8cbea31..476a37ec 100644 --- a/src/common/draggable-window/DraggableWindowPosition.ts +++ b/src/common/draggable-window/DraggableWindowPosition.ts @@ -2,5 +2,6 @@ export class DraggableWindowPosition { public static CENTER: string = 'DWP_CENTER'; public static TOP_CENTER: string = 'DWP_TOP_CENTER'; + public static TOP_LEFT: string = 'DWP_TOP_LEFT'; public static NOTHING: string = 'DWP_NOTHING'; } diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx index 2b8b9e65..76e868eb 100644 --- a/src/components/chat-history/ChatHistoryView.tsx +++ b/src/components/chat-history/ChatHistoryView.tsx @@ -127,7 +127,7 @@ export const ChatHistoryView: FC<{}> = props => { isVisible && - + setIsVisible(false) }/> diff --git a/src/components/loading/LoadingView.scss b/src/components/loading/LoadingView.scss index fb98e94a..27b5a4b6 100644 --- a/src/components/loading/LoadingView.scss +++ b/src/components/loading/LoadingView.scss @@ -1,6 +1,6 @@ .nitro-loading { position: relative; - background: linear-gradient(to bottom, $white, 15%, $primary); + background: $primary; .connecting-duck { position: absolute; @@ -66,6 +66,34 @@ background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center; z-index: -1; } + + .nitro-loading-bar { + border:1px solid white; + padding:3px; + height:30px; + border-radius: 8px; + position: relative; + display: flex; + flex-direction: column; + + &::before { + content:''; + position: absolute; + inset: 0; + margin:3px; + border-radius: 4px; + background:darken($primary,15); + z-index: 0; + } + + .nitro-loading-bar-inner { + height:100%; + z-index: 4; + border-radius: 4px; + transition: all 1s; + background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%); + } + } } @keyframes connecting-duck { diff --git a/src/components/loading/LoadingView.tsx b/src/components/loading/LoadingView.tsx index bb3f953f..2f4a815e 100644 --- a/src/components/loading/LoadingView.tsx +++ b/src/components/loading/LoadingView.tsx @@ -6,11 +6,12 @@ interface LoadingViewProps { isError: boolean; message: string; + percent: number; } export const LoadingView: FC = props => { - const { isError = false, message = '' } = props; + const { isError = false, message = '', percent = 0 } = props; const [ loadingShowing, setLoadingShowing ] = useState(false); useEffect(() => @@ -28,10 +29,26 @@ export const LoadingView: FC = props => }, []); return ( - - - { isError && (message && message.length) && - { message } } + +
+
+ +
+ { isError && (message && message.length) ? + {message} + : + <> + {percent.toFixed()}% +
+
+
+ + } + +
+
+
+ ); } diff --git a/src/components/mod-tools/ModToolsView.tsx b/src/components/mod-tools/ModToolsView.tsx index 142f6e27..36ffea99 100644 --- a/src/components/mod-tools/ModToolsView.tsx +++ b/src/components/mod-tools/ModToolsView.tsx @@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer'; import { FC, useCallback, useReducer, useState } from 'react'; import { GetRoomSession } from '../../api'; -import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; +import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; import { ModToolsEvent, ModToolsOpenRoomChatlogEvent, ModToolsOpenRoomInfoEvent, ModToolsOpenUserInfoEvent } from '../../events'; import { DispatchUiEvent, UseRoomEngineEvent, UseUiEvent } from '../../hooks'; import { ISelectedUser } from './common/ISelectedUser'; @@ -185,7 +185,7 @@ export const ModToolsView: FC<{}> = props => { isVisible && - + setIsVisible(false) } />