diff --git a/src/components/GoalPage/GoalPage.tsx b/src/components/GoalPage/GoalPage.tsx
index 223db3436..64217c7b7 100644
--- a/src/components/GoalPage/GoalPage.tsx
+++ b/src/components/GoalPage/GoalPage.tsx
@@ -54,6 +54,7 @@ import { GoalDependencyAddForm } from '../GoalDependencyForm/GoalDependencyForm'
import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
import CommentCreateForm from '../CommentCreateForm/CommentCreateForm';
import { CommentView } from '../CommentView/CommentView';
+import { ModalContext } from '../ModalOnEvent';
import { tr } from './GoalPage.i18n';
@@ -61,6 +62,7 @@ const StateSwitch = dynamic(() => import('../StateSwitch'));
const Md = dynamic(() => import('../Md'));
const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
const GoalEditForm = dynamic(() => import('../GoalEditForm/GoalEditForm'));
+const ImageFullScreen = dynamic(() => import('../ImageFullScreen'));
const IssueHeader = styled(PageContent)`
display: grid;
@@ -518,6 +520,11 @@ export const GoalPage = ({ user, ssrTime, params: { id } }: ExternalPageProps<{
{nullable(goal._isEditable, () => (
))}
+
+
+ {(ctx) => }
+
+
);
};
diff --git a/src/components/GoalPreview/GoalPreview.tsx b/src/components/GoalPreview/GoalPreview.tsx
index 4963818c8..67cc3e7bd 100644
--- a/src/components/GoalPreview/GoalPreview.tsx
+++ b/src/components/GoalPreview/GoalPreview.tsx
@@ -44,6 +44,7 @@ import { State } from '../State';
import { GoalDependencyAddForm } from '../GoalDependencyForm/GoalDependencyForm';
import { GoalDependencyListByKind } from '../GoalDependencyList/GoalDependencyList';
import { CommentView } from '../CommentView/CommentView';
+import { ModalContext } from '../ModalOnEvent';
import { useGoalPreview } from './GoalPreviewProvider';
import { tr } from './GoalPreview.i18n';
@@ -53,6 +54,7 @@ const StateSwitch = dynamic(() => import('../StateSwitch'));
const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
const GoalEditForm = dynamic(() => import('../GoalEditForm/GoalEditForm'));
const CommentCreateForm = dynamic(() => import('../CommentCreateForm/CommentCreateForm'));
+const ImageFullScreen = dynamic(() => import('../ImageFullScreen'));
interface GoalPreviewProps {
shortId: string;
@@ -400,6 +402,12 @@ const GoalPreviewModal: React.FC = ({ shortId, goal, defaults,
>
)),
)}
+
+
+
+ {(ctx) => }
+
+
>
);
};
diff --git a/src/components/ImageFullScreen.tsx b/src/components/ImageFullScreen.tsx
index 5a9f450da..14f7fea07 100644
--- a/src/components/ImageFullScreen.tsx
+++ b/src/components/ImageFullScreen.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { ModalContent } from '@taskany/bricks';
+import React, { useRef } from 'react';
+import { KeyCode, ModalContent, useClickOutside, useKeyboard } from '@taskany/bricks';
import styled from 'styled-components';
import { ModalEvent, dispatchModalEvent } from '../utils/dispatchModal';
@@ -17,9 +17,20 @@ const StyledWrapperImage = styled.div`
justify-content: center;
`;
const ImageFullScreen: React.FC = ({ src = '', alt = '' }) => {
+ const wrapperRef = useRef(null);
+
+ useClickOutside(wrapperRef, () => {
+ dispatchModalEvent(ModalEvent.ImageFullScreen)();
+ });
+
+ const [onESC] = useKeyboard([KeyCode.Escape], () => {
+ console.log('123');
+ dispatchModalEvent(ModalEvent.ImageFullScreen)();
+ });
+
return (
-
-
+
+
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 22d1b824f..49db34c38 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -30,7 +30,6 @@ const HotkeysModal = dynamic(() => import('./HotkeysModal/HotkeysModal'));
const NotificationsHub = dynamic(() => import('./NotificationsHub/NotificationsHub'));
const FeedbackCreateForm = dynamic(() => import('./FeedbackCreateForm/FeedbackCreateForm'));
const WhatsNew = dynamic(() => import('./WhatsNew/WhatsNew'));
-const ImageFullScreen = dynamic(() => import('./ImageFullScreen'));
interface PageProps {
user: Session['user'];
@@ -118,12 +117,6 @@ export const Page: React.FC = ({ user, ssrTime, title = 'Untitled', c
-
-
- {(ctx) => }
-
-
-