fix: Finalize UI

tolgee · Dec 27, 2023 · da3b8a9 · da3b8a9
1 parent 0f259eb
commit da3b8a9
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/webapp/src/views/projects/import/ImportView.tsx b/webapp/src/views/projects/import/ImportView.tsx
@@ -74,6 +74,8 @@ export const ImportView: FunctionComponent = () => {
  const loading =
  dataHelper.addFilesMutation.isLoading || applyImportHelper.loading;
 
+ const [isProgressOverlayActive, setIsProgressOverlayActive] = useState(false);
+
  return (
  <BaseProjectView
  windowTitle={t('import_translations_title')}
@@ -110,6 +112,10 @@ export const ImportView: FunctionComponent = () => {
  dataHelper.addFilesMutation.reset();
  }}
  filesUploaded={dataHelper.addFilesMutation.isSuccess}
+ isProgressOverlayActive={isProgressOverlayActive}
+ onProgressOverlayActiveChange={(isActive) =>
+ setIsProgressOverlayActive(isActive)
+ }
  />
 
  {dataHelper.addFilesMutation.data?.errors?.map((e, idx) => (
@@ -120,7 +126,7 @@ export const ImportView: FunctionComponent = () => {
  />
  ))}
  <Box position="relative">
- <ImportResultLoadingOverlay loading={loading} />
+ <ImportResultLoadingOverlay loading={isProgressOverlayActive} />
  <ImportResult
  onResolveRow={setResolveRow}
  onLoadData={dataHelper.refetchData}

diff --git a/webapp/src/views/projects/import/component/ImportFileInput.tsx b/webapp/src/views/projects/import/component/ImportFileInput.tsx
@@ -36,6 +36,8 @@ type ImportFileInputProps = {
  importDone: boolean;
  onImportMore: () => void;
  filesUploaded?: boolean;
+ onProgressOverlayActiveChange: (isActive: boolean) => void;
+ isProgressOverlayActive: boolean;
 };
 
 export type ValidationResult = {
@@ -51,7 +53,6 @@ const StyledRoot = styled(Box)(({ theme }) => ({
  position: 'relative',
  backgroundColor: theme.palette.background.paper,
  marginTop: '16px',
- height: '240px',
 }));
 
 const messageActions = container.resolve(MessageActions);
@@ -158,12 +159,10 @@ const ImportFileInput: FunctionComponent<ImportFileInputProps> = (props) => {
  return { ...result, valid };
  };
 
- const [isProgressOverlayActive, setIsProgressOverlayActive] = useState(false);
-
  return (
  <ImportFileDropzone
  onNewFiles={onNewFiles}
- active={!isProgressOverlayActive}
+ active={!props.isProgressOverlayActive}
  >
  <QuickStartHighlight
  offset={10}
@@ -180,7 +179,7 @@ const ImportFileInput: FunctionComponent<ImportFileInputProps> = (props) => {
  filesUploaded={props.filesUploaded}
  operationStatus={props.operationStatus}
  onActiveChange={(isActive) =>
- setIsProgressOverlayActive(isActive)
+ props.onProgressOverlayActiveChange(isActive)
  }
  />
  <ImportInputAreaLayoutTop>

diff --git a/webapp/src/views/projects/import/component/ImportInputAreaLayout.tsx b/webapp/src/views/projects/import/component/ImportInputAreaLayout.tsx
@@ -6,30 +6,27 @@ export const ImportInputAreaLayout = styled(Box)`
  align-items: center;
  flex-direction: column;
  display: flex;
- padding-top: 20px;
- padding-bottom: 20px;
+ padding-top: 40px;
+ padding-bottom: 40px;
  height: 100%;
 `;
 
 export const ImportInputAreaLayoutCenter = styled(Box)`
- height: 50px;
+ height: 76px;
  width: 100%;
  display: flex;
  justify-content: center;
- margin-top: 8px;
- margin-bottom: 8px;
  align-items: center;
 `;
 
 export const ImportInputAreaLayoutTop = styled(Box)`
- height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
 `;
 
 export const ImportInputAreaLayoutBottom = styled(Box)`
- min-height: 40px;
+ min-height: 24px;
 `;
 
 export const ImportInputAreaLayoutTitle: FC<{

diff --git a/webapp/src/views/projects/import/component/ImportProgress.tsx b/webapp/src/views/projects/import/component/ImportProgress.tsx
@@ -45,14 +45,16 @@ export const ImportProgressBar = (props: {
  useEffect(() => {
  setTimeout(() => {
  setTransitionLoading(true);
- }, 100);
+ }, 10);
  }, []);
 
  const classes = clsx({
  loading: transitionLoading && props.loading,
  finish: props.loaded,
  });
 
+ console.table({ classes, ...props });
+
  return (
  <Box
  px={'200px'}

diff --git a/webapp/src/views/projects/import/component/ImportProgressOverlay.tsx b/webapp/src/views/projects/import/component/ImportProgressOverlay.tsx
@@ -83,6 +83,11 @@ export const ImportProgressOverlay = (props: {
  props.onActiveChange(visible);
  }, [visible]);
 
+ const showFilesUploaded =
+ filesUploaded || (props.filesUploaded && visible && !operation);
+
+ const showImportDone = props.importDone;
+
  return (
  <StyledRoot
  className={clsx({ visible })}
@@ -105,11 +110,7 @@ export const ImportProgressOverlay = (props: {
  <ImportInputAreaLayoutCenter>
  <ImportProgressBar
  loading={props.loading}
- loaded={
- filesUploaded ||
- (props.filesUploaded && visible && !operation) ||
- props.importDone
- }
+ loaded={showFilesUploaded || showImportDone}
  />
  </ImportInputAreaLayoutCenter>
  <ImportInputAreaLayoutBottom>