diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx index 416a0167..6805427a 100644 --- a/src/common/card/NitroCardHeaderView.tsx +++ b/src/common/card/NitroCardHeaderView.tsx @@ -5,13 +5,15 @@ import { Base, Column, ColumnProps, Flex } from '..'; interface NitroCardHeaderViewProps extends ColumnProps { headerText: string; + isGalleryPhoto?: boolean; noCloseButton?: boolean; + onReportPhoto?: (event: MouseEvent) => void; onCloseClick: (event: MouseEvent) => void; } export const NitroCardHeaderView: FC = props => { - const { headerText = null, noCloseButton = false, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props; + const { headerText = null, isGalleryPhoto = false, noCloseButton = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props; const getClassNames = useMemo(() => { @@ -32,6 +34,11 @@ export const NitroCardHeaderView: FC = props => { headerText } + { isGalleryPhoto && + + + + } diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss index e942d516..b5e7f21b 100644 --- a/src/common/card/NitroCardView.scss +++ b/src/common/card/NitroCardView.scss @@ -36,11 +36,34 @@ $nitro-card-tabs-height: 33px; rgba(194, 48, 39, 1) 50%, rgba(194, 48, 39, 1) 100% ); - + &:hover { filter: brightness(1.2); } - + + &:active { + filter: brightness(0.8); + } + } + + .nitro-card-header-report-camera { + cursor: pointer; + padding: 1px 3px; + line-height: 1; + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + + &:hover { + filter: brightness(1.2); + } + &:active { filter: brightness(0.8); } @@ -101,7 +124,7 @@ $nitro-card-tabs-height: 33px; width: 100%; margin: 0; padding-top:2px; - + &:before { position: absolute; content: " "; @@ -137,7 +160,32 @@ $nitro-card-tabs-height: 33px; &:hover { filter: brightness(1.2); } - + + &:active { + filter: brightness(0.8); + } + } + + .nitro-card-header-report-camera { + cursor: pointer; + padding: 0px 2px; + margin-right: 4px; + line-height: 1; + @include font-size($h7-font-size); + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + + &:hover { + filter: brightness(1.2); + } + &:active { filter: brightness(0.8); } diff --git a/src/components/help/views/ReportSummaryView.tsx b/src/components/help/views/ReportSummaryView.tsx index 1aa04031..ad07d3e4 100644 --- a/src/components/help/views/ReportSummaryView.tsx +++ b/src/components/help/views/ReportSummaryView.tsx @@ -1,6 +1,6 @@ -import { CallForHelpFromForumMessageMessageComposer, CallForHelpFromForumThreadMessageComposer, CallForHelpFromIMMessageComposer, CallForHelpFromPhotoMessageComposer, CallForHelpMessageComposer } from '@nitrots/nitro-renderer'; +import { CallForHelpFromForumMessageMessageComposer, CallForHelpFromForumThreadMessageComposer, CallForHelpFromIMMessageComposer, CallForHelpMessageComposer } from '@nitrots/nitro-renderer'; import { FC } from 'react'; -import { GetSessionDataManager, LocalizeText, ReportType, SendMessageComposer } from '../../../api'; +import { LocalizeText, ReportType, SendMessageComposer } from '../../../api'; import { Button, Column, Text } from '../../../common'; import { useHelp } from '../../../hooks'; @@ -16,7 +16,8 @@ export const ReportSummaryView: FC<{}> = props => { case ReportType.BULLY: case ReportType.EMERGENCY: - case ReportType.ROOM: { + case ReportType.ROOM: + case ReportType.PHOTO: { const reportedRoomId = ((activeReport.roomId <= 0) ? activeReport.reportedChats[0].roomId : activeReport.roomId); activeReport.reportedChats.forEach(entry => chats.push(entry.webId, entry.message)); @@ -35,9 +36,6 @@ export const ReportSummaryView: FC<{}> = props => case ReportType.MESSAGE: SendMessageComposer(new CallForHelpFromForumMessageMessageComposer(activeReport.groupId, activeReport.threadId, activeReport.messageId, activeReport.cfhTopic, activeReport.message)); break; - case ReportType.PHOTO: - SendMessageComposer(new CallForHelpFromPhotoMessageComposer(activeReport.extraData, activeReport.cfhTopic, activeReport.roomId, GetSessionDataManager().userId, activeReport.roomObjectId)); - break; } setActiveReport(null); diff --git a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx index 301aac3f..722031a5 100644 --- a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx +++ b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx @@ -1,17 +1,20 @@ +import { GetSessionDataManager, ReportType } from 'api'; import { FC } from 'react'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; -import { useFurnitureExternalImageWidget } from '../../../../hooks'; +import { useFurnitureExternalImageWidget, useHelp, useNavigator } from '../../../../hooks'; import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView'; export const FurnitureExternalImageView: FC<{}> = props => { const { objectId = -1, currentPhotoIndex = -1, currentPhotos = null, onClose = null } = useFurnitureExternalImageWidget(); + const { navigatorData = null } = useNavigator(); + const { report = null } = useHelp(); if((objectId === -1) || (currentPhotoIndex === -1)) return null; return ( - + report(ReportType.PHOTO, { reportedUserId: GetSessionDataManager().userId, roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName }) } onCloseClick={ onClose } /> diff --git a/src/hooks/help/useHelp.ts b/src/hooks/help/useHelp.ts index 9a67fb7f..fd3b790a 100644 --- a/src/hooks/help/useHelp.ts +++ b/src/hooks/help/useHelp.ts @@ -39,6 +39,7 @@ const useHelpState = () => newReport.currentStep = ReportState.SELECT_CHATS; break; case ReportType.ROOM: + case ReportType.PHOTO: newReport.roomId = options.roomId; newReport.roomName = options.roomName; newReport.currentStep = ReportState.SELECT_TOPICS; @@ -54,8 +55,6 @@ const useHelpState = () => newReport.messageId = options.messageId; newReport.currentStep = ReportState.SELECT_TOPICS; break; - case ReportType.PHOTO: - break; case ReportType.GUIDE: break; }