diff --git a/packages/ui/src/KeyDialog/KeyForm.tsx b/packages/ui/src/KeyDialog/KeyForm.tsx index b38ce52165..3519511233 100644 --- a/packages/ui/src/KeyDialog/KeyForm.tsx +++ b/packages/ui/src/KeyDialog/KeyForm.tsx @@ -114,8 +114,6 @@ export const KeyForm = () => { id="_tolgee_platform_link" > { {error && {error}} { const onKeyDown = (e) => { if (e.key === 'Escape') { - onExit(); + dispatch({ type: 'ON_CLOSE' }); } }; @@ -78,6 +78,10 @@ export const NewWindow: FC = (props) => { } }, [container]); + useEffect(() => { + popup?.focus(); + }); + const styleCache = React.useMemo(() => { // styles insertion point in popup head const head = popup?.document.head; diff --git a/packages/ui/src/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx b/packages/ui/src/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx index 24bd49ca92..eee94e4b20 100644 --- a/packages/ui/src/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx +++ b/packages/ui/src/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx @@ -7,7 +7,6 @@ import { ScreenshotThumbnail } from './ScreenshotThumbnail'; import { MAX_FILE_COUNT } from './utils'; import { DEVTOOLS_Z_INDEX } from '../../constants'; import { - ScreenshotInterface, useDialogContext, useDialogDispatch, } from '../TranslationDialogContextProvider'; @@ -54,10 +53,10 @@ const ALLOWED_UPLOAD_TYPES = ['image/png', 'image/jpeg', 'image/gif']; export const ScreenshotGallery: React.FC = () => { const fileRef = useRef(null); - const [detail, setDetail] = useState(null); const dispatch = useDialogDispatch(); const screenshots = useDialogContext((c) => c.screenshots); + const screenshotDetails = useDialogContext((c) => c.screenshotDetail); const pluginAvailable = useDialogContext((c) => c.pluginAvailable); const dependencies = useDialogContext((c) => c.dependencies); const formDisabled = useDialogContext((c) => c.formDisabled); @@ -193,7 +192,9 @@ export const ScreenshotGallery: React.FC = () => { setDetail(ss)} + onClick={() => + dispatch({ type: 'OPEN_SCREENSHOT_DETAIL', payload: ss }) + } onDelete={ deleteEnabled || ss.justUploaded ? removeScreenshot @@ -224,8 +225,11 @@ export const ScreenshotGallery: React.FC = () => { )} - {detail && ( - setDetail(null)} /> + {screenshotDetails && ( + dispatch({ type: 'CLOSE_SCREENSHOT_DETAIL' })} + /> )} {extensionPrompt && ( setExtensionPrompt(false)} /> diff --git a/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx b/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx index 80752c9b19..e41da402c9 100644 --- a/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx +++ b/packages/ui/src/KeyDialog/TranslationDialogContextProvider.tsx @@ -58,7 +58,10 @@ type State = | { type: 'ON_SAVE' } | { type: 'ON_CLOSE' } | { type: 'SET_USE_BROWSER_WINDOW'; payload: boolean } - | { type: 'SET_CONTAINER'; payload: Element }; + | { type: 'SET_CONTAINER'; payload: Element } + | { type: 'OPEN_SCREENSHOT_DETAIL'; payload: ScreenshotInterface } + | { type: 'CLOSE_SCREENSHOT_DETAIL' } + | { type: 'ON_ESCAPE' }; export const [DialogProvider, useDialogDispatch, useDialogContext] = createProvider((props: DialogProps) => { @@ -88,6 +91,8 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] = const [useBrowserWindow, setUseBrowserWindow] = useState(false); const [screenshots, setScreenshots] = useState([]); const [screenshotsUploading, setScreenshotsUploading] = useState(false); + const [screenshotDetail, setScreenshotDetail] = + useState(null); const dispatch = async (action: State) => { switch (action.type) { @@ -196,10 +201,16 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] = screenshotUploadedImageIds: getJustUploadedScreenshots(), }); } - setSuccess(true); await sleep(200); + setSuccess(true); setError(null); - props.onClose(); + if (useBrowserWindow) { + setSaving(false); + await sleep(2000); + setSuccess(false); + } else { + props.onClose(); + } } catch (e) { setError('Unexpected error occurred :('); // eslint-disable-next-line no-console @@ -211,13 +222,17 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] = } case 'ON_CLOSE': { - props.onClose(); - setUseBrowserWindow(false); - const uploadedScreenshots = getJustUploadedScreenshots(); - if (uploadedScreenshots.length) { - screenshotService.deleteImages(uploadedScreenshots); + if (screenshotDetail) { + setScreenshotDetail(null); + } else { + props.onClose(); + setUseBrowserWindow(false); + const uploadedScreenshots = getJustUploadedScreenshots(); + if (uploadedScreenshots.length) { + screenshotService.deleteImages(uploadedScreenshots); + } + setScreenshots([]); } - setScreenshots([]); break; } @@ -241,13 +256,21 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] = case 'SET_USE_BROWSER_WINDOW': setUseBrowserWindow(action.payload); break; + + case 'OPEN_SCREENSHOT_DETAIL': + setScreenshotDetail(action.payload); + break; + + case 'CLOSE_SCREENSHOT_DETAIL': + setScreenshotDetail(null); + break; } }; useEffect(() => { const onKeyDown = (e) => { if (e.key === 'Escape') { - dispatch({ type: 'ON_CLOSE' }); + dispatch({ type: 'ON_ESCAPE' }); } }; if (!useBrowserWindow) { @@ -367,6 +390,7 @@ export const [DialogProvider, useDialogDispatch, useDialogContext] = takingScreenshot, screenshotsUploading, screenshots, + screenshotDetail, linkToPlatform, }; diff --git a/packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx b/packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx index 4942fd89e2..7df8b846df 100644 --- a/packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx +++ b/packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx @@ -21,9 +21,7 @@ export const TranslationDialogWrapper: React.FC = ({ children }) => { return ( <> {useBrowserWindow ? ( - open ? ( - {children} - ) : null + {children} ) : ( !takingScreenshot && (