Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 225: Implement translations

Browse source 
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 2022-11-04 10:58:06 +00:00
parent 60a3ead6aa
commit 505813d530
26 changed files with 527 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/Components/ElementsList/ElementsList.tsx
View file

@ -135,7 +135,6 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
}): JSX.Element {
const { container, depth } = containers[index];
const key = container.properties.id.toString();
const tabs = '|\t'.repeat(depth);
const text = container.properties.displayedText === key
? `${key}`
: `${container.properties.displayedText}`;
@ -144,29 +143,19 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
props.selectedContainer !== null &&
props.selectedContainer.properties.id === container.properties.id;
const selectedClass: string = isSelected
? 'border-l-4 bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
: 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
return (
<button type="button"
className={`transition-all w-full border-blue-500 hover:shadow-lg elements-sidebar-row whitespace-pre
text-left text-sm font-medium inline-flex ${container.properties.type} ${selectedClass}`}
id={key}
key={key}
style={style}
title={container.properties.warning}
onClick={() => props.selectContainer(container.properties.id)}
onDrop={(event) => HandleOnDrop(event, props.containers, props.mainContainer, props.addContainer)}
onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
onDragLeave={(event) => HandleDragLeave(event)}
>
{tabs}
{text}
{container.properties.warning.length > 0 &&
<ExclamationTriangleIcon className='w-8'/>
}
</button>
ElementsListRow(
key,
container,
depth,
isSelected,
style,
text,
props.containers,
props.mainContainer,
props.addContainer,
props.selectContainer
)
);
}
@ -193,3 +182,52 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
</div>
);
}
function ElementsListRow(
key: string,
container: IContainerModel,
depth: number,
isSelected: boolean,
style: React.CSSProperties,
text: string,
containers: Map<string, IContainerModel>,
mainContainer: IContainerModel,
addContainer: (index: number, type: string, parent: string) => void,
selectContainer: (containerId: string) => void
): JSX.Element {
const verticalBars: JSX.Element[] = [];
const verticalBarSelectedClass = isSelected
? 'border-l-blue-400 group-hover:border-l-blue-300'
: 'border-l-slate-400 group-hover:border-l-slate-300';
for (let i = 0; i < depth; i++) {
verticalBars.push(
<span
className={`h-full border-l-2 pr-2 ${verticalBarSelectedClass}`}
></span>
);
}
const buttonSelectedClass: string = isSelected
? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
: 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
return <button type="button"
className={`transition-all border-blue-500 hover:shadow-lg elements-sidebar-row whitespace-pre
text-left text-sm font-medium inline-flex group ${container.properties.type} ${buttonSelectedClass}`}
id={key}
key={key}
style={style}
title={container.properties.warning}
onClick={() => selectContainer(container.properties.id)}
onDrop={(event) => HandleOnDrop(event, containers, mainContainer, addContainer)}
onDragOver={(event) => HandleDragOver(event, mainContainer)}
onDragLeave={(event) => HandleDragLeave(event)}
>
{verticalBars}
<div className='pt-2 pb-2 inline-flex'>
{text}
{container.properties.warning.length > 0 &&
<ExclamationTriangleIcon className='pl-2 w-7' />}
</div>
</button>;
}