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

Fix mini-camera layout

Browse Source
This commit is contained in:
Bill 2021-08-16 13:18:55 -04:00
parent ca18bf2f30
commit 909fbc1715
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layout/Layout.scss
View File

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

12
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -1,4 +1,4 @@
import { FC } from 'react'; import { FC, MouseEvent, useCallback } from 'react';
import { useNitroCardContext } from '../context/NitroCardContext'; import { useNitroCardContext } from '../context/NitroCardContext';
import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types'; import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
@ -7,6 +7,12 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
const { headerText = null, onCloseClick = null } = props; const { headerText = null, onCloseClick = null } = props;
const { simple = false } = useNitroCardContext(); const { simple = false } = useNitroCardContext();
const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
{
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
}, []);
if(simple) if(simple)
{ {
return ( return (
@ -14,7 +20,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
<div className="row nitro-card-header simple-header"> <div className="row nitro-card-header simple-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative"> <div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div> <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div>
<div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }> <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<i className="fas fa-times" /> <i className="fas fa-times" />
</div> </div>
</div> </div>
@ -28,7 +34,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
<div className="row nitro-card-header"> <div className="row nitro-card-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative"> <div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h4 text-white text-shadow header-text">{ headerText }</div> <div className="h4 text-white text-shadow header-text">{ headerText }</div>
<div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }> <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<i className="fas fa-times" /> <i className="fas fa-times" />
</div> </div>
</div> </div>

13
src/layout/mini-camera/NitroLayoutMiniCameraView.scss Normal file
View File

@ -0,0 +1,13 @@
.nitro-room-thumbnail-camera {
width: 132px;
height: 192px;
background-image: url('../../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
.camera-frame {
position: absolute;
width: 110px;
height: 110px;
margin-top: 38px;
margin-left: 3px;
}
}