Merged PR 225: Implement translations
Implement translations with useContext in React +Add events to allow changing the language in the app +Refactor AppEvents +Redesign vertical bars in elements
This commit is contained in:
Eric Nguyen
parent
60a3ead6aa
commit
505813d530
26 changed files with 527 additions and 160 deletions
|
|
@ -4,6 +4,7 @@ import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
|||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
|
||||
import { Text } from '../Text/Text';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
||||
import { Select } from '../Select/Select';
|
||||
|
|
@ -44,7 +45,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<div className='grid grid-cols-1 gap-y-4 items-center'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-displayedText`}
|
||||
labelText='Displayed text'
|
||||
labelText={Text({ textId: '@ContainerDisplayedText' })}
|
||||
inputKey='displayedText'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -54,7 +55,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<OrientationSelector
|
||||
id='orientation'
|
||||
name='Orientation'
|
||||
labelText='Orientation'
|
||||
labelText={Text({ textId: '@ContainerOrientation' })}
|
||||
value={props.properties.orientation}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
|
|
@ -62,14 +63,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<Category
|
||||
category={{
|
||||
Type: 'Properties',
|
||||
DisplayedText: 'Properties'
|
||||
DisplayedText: Text({ textId: '@ContainerProperties' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-1 gap-y-6 items-center prop-category-body'>
|
||||
<div>
|
||||
<InputGroup
|
||||
labelText='Name'
|
||||
labelText={Text({ textId: '@ContainerName' })}
|
||||
inputKey='id'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -79,7 +80,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
</div>
|
||||
<div>
|
||||
<InputGroup
|
||||
labelText='Parent name'
|
||||
labelText={Text({ textId: '@ContainerParentName' })}
|
||||
inputKey='parentId'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -89,7 +90,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
</div>
|
||||
<div>
|
||||
<InputGroup
|
||||
labelText='Type'
|
||||
labelText={Text({ textId: '@ContainerType' })}
|
||||
inputKey='type'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -102,7 +103,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
|
||||
<Category category={{
|
||||
Type: 'Position',
|
||||
DisplayedText: 'Position'
|
||||
DisplayedText: Text({ textId: '@ContainerPosition' })
|
||||
}}
|
||||
defaultIsOpen={true}
|
||||
heightClass={`${categoryHeight}`}
|
||||
|
|
@ -110,7 +111,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<div className='grid grid-cols-3 gap-y-2 items-center prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-x`}
|
||||
labelText='x'
|
||||
labelText={Text({ textId: '@ContainerX' })}
|
||||
inputKey='x'
|
||||
labelClassName=''
|
||||
inputClassName='col-span-2'
|
||||
|
|
@ -134,7 +135,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
)} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-y`}
|
||||
labelText='y'
|
||||
labelText={Text({ textId: '@ContainerY' })}
|
||||
inputKey='y'
|
||||
labelClassName=''
|
||||
inputClassName='col-span-2'
|
||||
|
|
@ -158,16 +159,17 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
</div>
|
||||
</Category>
|
||||
|
||||
<Category category={{
|
||||
Type: 'Size',
|
||||
DisplayedText: 'Size'
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
<Category
|
||||
category={{
|
||||
Type: 'Size',
|
||||
DisplayedText: Text({ textId: '@ContainerSize' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-5 gap-y-2 items-center prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-minWidth`}
|
||||
labelText='Minimum Width'
|
||||
labelText={Text({ textId: '@ContainerMinWidth' })}
|
||||
inputKey='minWidth'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
|
|
@ -177,7 +179,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
onChange={(value) => props.onChange('minWidth', Number(value))} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-width`}
|
||||
labelText='Width'
|
||||
labelText={Text({ textId: '@ContainerWidth' })}
|
||||
inputKey='width'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
|
|
@ -189,7 +191,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
isDisabled={props.properties.isFlex} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-maxWidth`}
|
||||
labelText='Maximum Width'
|
||||
labelText={Text({ textId: '@ContainerMaxWidth' })}
|
||||
inputKey='maxWidth'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
|
|
@ -200,7 +202,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<div className='col-span-5 p-3'></div>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-minHeight`}
|
||||
labelText='Minimum Height'
|
||||
labelText={Text({ textId: '@ContainerMinHeight' })}
|
||||
inputKey='minHeight'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
|
|
@ -210,7 +212,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
onChange={(value) => props.onChange('minHeight', Number(value))} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-height`}
|
||||
labelText='Height'
|
||||
labelText={Text({ textId: '@ContainerHeight' })}
|
||||
inputKey='height'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
|
|
@ -223,7 +225,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-maxHeight`}
|
||||
labelText='Maximum Height'
|
||||
labelText={Text({ textId: '@ContainerMaxHeight' })}
|
||||
inputKey='maxHeight'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
|
|
@ -236,14 +238,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
|
||||
<Category category={{
|
||||
Type: 'Margins',
|
||||
DisplayedText: 'Margins'
|
||||
DisplayedText: Text({ textId: '@ContainerMargins' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-ml`}
|
||||
labelText='Margin left'
|
||||
labelText={Text({ textId: '@ContainerMarginLeft' })}
|
||||
inputKey='left'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -253,7 +255,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-mb`}
|
||||
labelText='Margin bottom'
|
||||
labelText={Text({ textId: '@ContainerMarginBottom' })}
|
||||
inputKey='bottom'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -263,7 +265,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-mt`}
|
||||
labelText='Margin top'
|
||||
labelText={Text({ textId: '@ContainerMarginTop' })}
|
||||
inputKey='top'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -273,7 +275,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-mr`}
|
||||
labelText='Margin right'
|
||||
labelText={Text({ textId: '@ContainerMarginRight' })}
|
||||
inputKey='right'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
|
|
@ -286,13 +288,13 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
|
||||
<Category category={{
|
||||
Type: 'Behaviors',
|
||||
DisplayedText: 'Behaviors'
|
||||
DisplayedText: Text({ textId: '@ContainerBehaviors' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
|
||||
<ToggleButton
|
||||
labelText='Flex'
|
||||
labelText={Text({ textId: '@ContainerFlex' })}
|
||||
inputKey='isFlex'
|
||||
labelClassName=''
|
||||
inputClassName='ml-auto mr-auto block'
|
||||
|
|
@ -301,7 +303,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
onChange={(event) => props.onChange('isFlex', event.target.checked)}
|
||||
/>
|
||||
<ToggleButton
|
||||
labelText='Anchor'
|
||||
labelText={Text({ textId: '@ContainerAnchor' })}
|
||||
inputKey='isAnchor'
|
||||
labelClassName=''
|
||||
inputClassName='ml-auto mr-auto block'
|
||||
|
|
@ -313,7 +315,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
|
||||
<Category category={{
|
||||
Type: 'Alignment',
|
||||
DisplayedText: 'Alignment'
|
||||
DisplayedText: Text({ textId: '@ContainerAlignment' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
|
|
@ -321,14 +323,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<PositionReferenceSelector
|
||||
id='positionReference'
|
||||
name='PositionReference'
|
||||
labelText='Alignment'
|
||||
labelText={Text({ textId: '@ContainerAlignmentInput' })}
|
||||
value={props.properties.positionReference}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<div className='p-3'></div>
|
||||
<Select
|
||||
inputKey='linkedSymbolId'
|
||||
labelText='Align with symbol'
|
||||
labelText={Text({ textId: '@ContainerAlignWithSymbol' })}
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
inputs={[...props.symbols.values()].map(symbol => ({
|
||||
|
|
@ -343,7 +345,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
|
||||
<Category category={{
|
||||
Type: 'Dimensions',
|
||||
DisplayedText: 'Dimensions'
|
||||
DisplayedText: Text({ textId: '@ContainerDimensions' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
|
|
@ -354,7 +356,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<PositionCheckboxes
|
||||
id='showSelfDimensions'
|
||||
name='ShowSelfDimensions'
|
||||
labelText='Show dimension'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
value={props.properties.showSelfDimensions}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
|
|
@ -366,7 +368,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<PositionCheckboxes
|
||||
id='showChildrenDimensions'
|
||||
name='ShowChildrenDimensions'
|
||||
labelText='Show overall dimension of its children'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
value={props.properties.showChildrenDimensions}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
|
|
@ -374,33 +376,33 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
}
|
||||
{
|
||||
SHOW_BORROWER_DIMENSIONS &&
|
||||
<>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.markPosition}
|
||||
labelText='Mark the position'
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='showDimensionWithMarks'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText='Show dimension with marked children'
|
||||
value={props.properties.showDimensionWithMarks}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='showDimensionWithMarks'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
value={props.properties.showDimensionWithMarks}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
<Category category={{
|
||||
Type: 'Style',
|
||||
DisplayedText: 'Style'
|
||||
DisplayedText: Text({ textId: '@ContainerStyle' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue