mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-19 05:46:27 +01:00
Add trophy layout
This commit is contained in:
parent
de4e767ce5
commit
705569a5d1
@ -25,3 +25,4 @@
|
||||
@import './card/NitroCardView';
|
||||
@import './draggable-window/DraggableWindow';
|
||||
@import './loading-spinner/LoadingSpinnerView';
|
||||
@import './trophy/NitroLayoutTrophyView';
|
||||
|
@ -2,3 +2,4 @@ export * from './card';
|
||||
export * from './draggable-window';
|
||||
export * from './loading-spinner';
|
||||
export * from './transitions';
|
||||
export * from './trophy';
|
||||
|
@ -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
29
src/layout/trophy/NitroLayoutTrophyView.tsx
Normal 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
8
src/layout/trophy/NitroLayoutTrophyView.types.ts
Normal 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
2
src/layout/trophy/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './NitroLayoutTrophyView';
|
||||
export * from './NitroLayoutTrophyView.types';
|
@ -4,4 +4,3 @@
|
||||
@import './manipulation-menu/FurnitureManipulationMenuView';
|
||||
@import './mannequin/FurnitureMannequinView';
|
||||
@import './stickie/FurnitureStickieView';
|
||||
@import './trophy/FurnitureTrophyView';
|
||||
|
@ -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') } />;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user