Skip to content

Commit

Permalink
fix: make frontend beautiful
Browse files Browse the repository at this point in the history
  • Loading branch information
stepan662 committed Dec 19, 2024
1 parent 3c2c5c1 commit 3c0951d
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 14 deletions.
14 changes: 11 additions & 3 deletions webapp/src/views/projects/translations/KeyCreateForm/FormBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
} from 'formik';
import { Box, Button, styled } from '@mui/material';
import { T, useTranslate } from '@tolgee/react';
import { useState } from 'react';
import clsx from 'clsx';

import { NamespaceSelector } from 'tg.component/NamespaceSelector/NamespaceSelector';
import { EditorWrapper } from 'tg.component/editor/EditorWrapper';
Expand All @@ -25,7 +27,6 @@ import { PluralEditor } from '../translationVisual/PluralEditor';
import type { ValuesCreateType } from './KeyCreateForm';
import { PluralFormCheckbox } from 'tg.component/common/form/PluralFormCheckbox';
import { ControlsEditorSmall } from '../cell/ControlsEditorSmall';
import { useState } from 'react';

const StyledContainer = styled('div')`
display: grid;
Expand All @@ -35,8 +36,13 @@ const StyledContainer = styled('div')`

const StyledKeyNsContainer = styled('div')`
display: grid;
grid-template-columns: 1fr 300px;
gap: 0px 16px;
grid-template-columns: 1fr;
&.useNamespaces {
grid-template-columns: 1fr 300px;
}
@media (max-width: 800px) {
grid-template-columns: 1fr;
}
Expand Down Expand Up @@ -84,7 +90,9 @@ export const FormBody: React.FC<Props> = ({ onCancel, autofocus }) => {
return (
<>
<StyledContainer>
<StyledKeyNsContainer>
<StyledKeyNsContainer
className={clsx({ useNamespaces: project.useNamespaces })}
>
<FastField name="name">
{({ field, form, meta }: FieldProps<any>) => {
return (
Expand Down
12 changes: 10 additions & 2 deletions webapp/src/views/projects/translations/KeyEdit/KeyGeneral.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,19 @@ import { RequiredField } from 'tg.component/common/form/RequiredField';
import { LabelHint } from 'tg.component/common/LabelHint';
import { PluralFormCheckbox } from 'tg.component/common/form/PluralFormCheckbox';
import { useProject } from 'tg.hooks/useProject';
import clsx from 'clsx';

const StyledSection = styled('div')``;

const StyledKeyNsContainer = styled('div')`
display: grid;
grid-template-columns: 1fr 300px;
gap: 0px 16px;
grid-template-columns: 1fr;
&.useNamespaces {
grid-template-columns: 1fr 300px;
}
@media (max-width: 800px) {
grid-template-columns: 1fr;
}
Expand Down Expand Up @@ -47,7 +53,9 @@ export const KeyGeneral = () => {

return (
<>
<StyledKeyNsContainer>
<StyledKeyNsContainer
className={clsx({ useNamespaces: project.useNamespaces })}
>
<StyledSection>
<FieldLabel>
<RequiredField>{t('translations_key_edit_label')}</RequiredField>
Expand Down
20 changes: 11 additions & 9 deletions webapp/src/views/projects/translations/KeySingle/KeyEditForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -190,15 +190,17 @@ export const KeyEditForm: React.FC = () => {
</StyledField>
</div>

<div>
<FieldLabel>
<T keyName="translation_single_label_namespace" />
</FieldLabel>
<NamespaceSelector
value={keyData.keyNamespace}
onChange={handleNamespaceChange}
/>
</div>
{project.useNamespaces && (
<div>
<FieldLabel>
<T keyName="translation_single_label_namespace" />
</FieldLabel>
<NamespaceSelector
value={keyData.keyNamespace}
onChange={handleNamespaceChange}
/>
</div>
)}

<div>
<FieldLabel>
Expand Down

0 comments on commit 3c0951d

Please sign in to comment.