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

Add trophy layout

Browse Source
This commit is contained in:
Bill 2021-07-27 03:28:26 -04:00
parent de4e767ce5
commit 705569a5d1
8 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layout/Layout.scss
View File

@ -25,3 +25,4 @@
@import './card/NitroCardView';
@import './draggable-window/DraggableWindow';
@import './loading-spinner/LoadingSpinnerView';
@import './trophy/NitroLayoutTrophyView';

1
src/layout/index.ts
View File

@ -2,3 +2,4 @@ export * from './card';
export * from './draggable-window';
export * from './loading-spinner';
export * from './transitions';
export * from './trophy';

4
src/views/room/widgets/furniture/trophy/FurnitureTrophyView.scss → src/layout/trophy/NitroLayoutTrophyView.scss
View File

@ -1,4 +1,4 @@
.nitro-trophy {
.nitro-layout-trophy {
position: relative;
width: 340px;
height: 173px;
@ -7,7 +7,7 @@
color: black;
background-position: 0px 0px;
background-image: url('../../../../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
background-image: url('../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
&.trophy-2 {
background-position: 0px 173px;

29
src/layout/trophy/NitroLayoutTrophyView.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FC } from 'react';
import { LocalizeText } from '../../utils/LocalizeText';
import { DraggableWindow } from '../draggable-window';
import { NitroLayoutTrophyViewProps } from './NitroLayoutTrophyView.types';
export const NitroLayoutTrophyView: FC<NitroLayoutTrophyViewProps> = props =>
{
const { color = '', message = '', date = '', senderName = '', onCloseClick = null } = props;
return (
<DraggableWindow handle=".drag-handler">
<div className={ `nitro-layout-trophy trophy-${ color }` }>
<div className="trophy-header drag-handler">
<div className="float-end trophy-close" onClick={ onCloseClick }></div>
<div className="trophy-title fw-bold text-center">
{ LocalizeText('widget.furni.trophy.title') }
</div>
</div>
<div className="trophy-content">
{ message }
</div>
<div className="trophy-footer d-flex justify-content-between fw-bold">
<div>{ date }</div>
<div>{ senderName }</div>
</div>
</div>
</DraggableWindow>
);
}

8
src/layout/trophy/NitroLayoutTrophyView.types.ts Normal file
View File

@ -0,0 +1,8 @@
export interface NitroLayoutTrophyViewProps
{
color: string;
message: string;
date: string;
senderName: string;
onCloseClick: () => void;
}

2
src/layout/trophy/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './NitroLayoutTrophyView';
export * from './NitroLayoutTrophyView.types';

1
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -4,4 +4,3 @@
@import './manipulation-menu/FurnitureManipulationMenuView';
@import './mannequin/FurnitureMannequinView';
@import './stickie/FurnitureStickieView';
@import './trophy/FurnitureTrophyView';

23
src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
View File

@ -3,8 +3,7 @@ import { FC, useCallback, useState } from 'react';
import { GetRoomEngine } from '../../../../../api';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { DraggableWindow } from '../../../../../layout/draggable-window/DraggableWindow';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { NitroLayoutTrophyView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { FurnitureTrophyData } from './FurnitureTrophyData';
@ -70,23 +69,5 @@ export const FurnitureTrophyView: FC<{}> = props =>
if(!trophyData) return null;
return (
<DraggableWindow handle=".drag-handler">
<div className={ "nitro-trophy trophy-" + trophyData.color }>
<div className="trophy-header drag-handler">
<div className="float-end trophy-close" onClick={ event => processAction('close') }></div>
<div className="trophy-title fw-bold text-center">
{ LocalizeText('widget.furni.trophy.title') }
</div>
</div>
<div className="trophy-content">
{ trophyData.message }
</div>
<div className="trophy-footer d-flex justify-content-between fw-bold">
<div>{ trophyData.date }</div>
<div>{ trophyData.ownerName }</div>
</div>
</div>
</DraggableWindow>
);
return <NitroLayoutTrophyView color={ trophyData.color } message={ trophyData.message } date={ trophyData.date } senderName={ trophyData.ownerName } onCloseClick={ () => processAction('close') } />;
}