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

src/Translations/Translations.ts

@@ -0,0 +1,14 @@
+import en from './translation.en.json';
+import fr from './translation.fr.json';
+
+export const translations: Record<string, Record<string, string>> = {
+  en,
+  fr
+};
+
+// Use languageOptions to restrict existing dictionary
+// and create a select input
+export const languageOptions: Record<string, string> = {
+  en: 'English',
+  fr: 'French'
+};

src/Translations/translation.en.json

@@ -0,0 +1,70 @@
+{
+  "@StartFromScratch": "Start from scratch",
+  "@LoadConfigFile": "Load a configuration file",
+  "@GoBack": "Go back",
+
+  "@Components": "Components",
+  "@Elements": "Elements",
+  "@Symbols": "Symbols",
+  "@SymbolsLeft": "Symbols",
+  "@SymbolsRight": "Symbols",
+  "@Timeline": "Timeline",
+  "@Messages": "Messages",
+  "@Settings": "Settings",
+
+  "@Undo": "Undo",
+  "@UndoTitle": "Undo last action",
+  "@Redo": "Redo",
+  "@RedoTitle": "Redo last action",
+  "@DeleteContainer": "Delete",
+  "@DeleteContainerTitle": "Delete the container",
+  "@DeleteSymbol": "Delete",
+  "@DeleteSymbolTitle": "Delete the container",
+
+  "@ExportAsJSON": "Export as JSON",
+  "@ExportAsSVG": "Export as SVG",
+  
+  "@HideDisabledComponents": "Hide disabled components",
+  "@ShowDisabledComponents": "Show disabled components",
+
+  "@ClearAllMessages": "Clear all messages",
+
+  "@ContainerDisplayedText": "Displayed text",
+  "@ContainerOrientation": "Orientation",
+  "@ContainerProperties": "Properties",
+  "@ContainerName": "Name",
+  "@ContainerParentName": "Parent name",
+  "@ContainerType": "Type",
+  "@ContainerPosition": "Position",
+  "@ContainerX": "x",
+  "@ContainerY": "y",
+  "@ContainerSize": "Size",
+  "@ContainerMinWidth": "Minimum Width",
+  "@ContainerWidth": "Width",
+  "@ContainerMaxWidth": "Maximum Width",
+  "@ContainerMinHeight": "Minimum Height",
+  "@ContainerHeight": "Height",
+  "@ContainerMaxHeight": "Maximum Height",
+  "@ContainerMargins": "Margins",
+  "@ContainerMarginLeft": "Margin Left",
+  "@ContainerMarginBottom": "Margin Bottom",
+  "@ContainerMarginTop": "Margin Top",
+  "@ContainerMarginRight": "Margin Right",
+  "@ContainerBehaviors": "Behaviors",
+  "@ContainerFlex": "Flex",
+  "@ContainerAnchor": "Lock position and size",
+  "@ContainerAlignment": "Alignment",
+  "@ContainerAlignmentInput": "Alignment",
+  "@ContainerAlignWithSymbol": "Align to symbol",
+  "@ContainerDimensions": "Dimensions",
+  "@ContainerShowDimension": "Show Dimension",
+  "@ContainerShowChildrenDimension": "Show surrounding dimension of children",
+  "@ContainerMarkPosition": "Mark the position for the parents",
+  "@ContainerShowDimensionWithMarks": "Show dimension with marked children",
+  "@ContainerStyle": "Style",
+
+  "@SymbolName": "Name",
+  "@SymbolX": "x",
+  "@SymbolHeight": "Height",
+  "@SymbolWidth": "Width"
+}

src/Translations/translation.fr.json

@@ -0,0 +1,70 @@
+{
+  "@StartFromScratch": "Partir de zéro",
+  "@LoadConfigFile": "Charger un fichier de configuration",
+  "@GoBack": "Revenir",
+
+  "@Components": "Composants",
+  "@Elements": "Éléments",
+  "@Symbols": "Symboles",
+  "@SymbolsLeft": "Symboles",
+  "@SymbolsRight": "Symboles",
+  "@Timeline": "Chronologie",
+  "@Messages": "Messages",
+  "@Settings": "Paramètres",
+
+  "@Undo": "Annuler",
+  "@UndoTitle": "Annuler la dernière action",
+  "@Redo": "Refaire",
+  "@RedoTitle": "Refaire la dernière action",
+  "@DeleteContainer": "Supprimer",
+  "@DeleteContainerTitle": "Supprimer le conteneur",
+  "@DeleteSymbol": "Supprimer",
+  "@DeleteSymbolTitle": "Supprimer le symbole",
+
+  "@ExportAsJSON": "Exporter en JSON",
+  "@ExportAsSVG": "Exporter en SVG",
+  
+  "@HideDisabledComponents": "Cacher les composants désactivés",
+  "@ShowDisabledComponents": "Montrer les composants activés",
+
+  "@ClearAllMessages": "Effacer tous les messages",
+
+  "@ContainerDisplayedText": "Texte affiché",
+  "@ContainerOrientation": "Orientation",
+  "@ContainerProperties": "Propriétés",
+  "@ContainerName": "Nom",
+  "@ContainerParentName": "Nom du parent",
+  "@ContainerType": "Type",
+  "@ContainerPosition": "Position",
+  "@ContainerX": "x",
+  "@ContainerY": "y",
+  "@ContainerSize": "Taille",
+  "@ContainerMinWidth": "Largeur minimale",
+  "@ContainerWidth": "Largeur",
+  "@ContainerMaxWidth": "Largeur maximale",
+  "@ContainerMinHeight": "Hauteur minimale",
+  "@ContainerHeight": "Hauteur",
+  "@ContainerMaxHeight": "Hauteur maximale",
+  "@ContainerMargins": "Marges",
+  "@ContainerMarginLeft": "Marge gauche",
+  "@ContainerMarginBottom": "Marge inférieure",
+  "@ContainerMarginTop": "Marge supérieure",
+  "@ContainerMarginRight": "Marge droite",
+  "@ContainerBehaviors": "Comportements",
+  "@ContainerFlex": "Flexible",
+  "@ContainerAnchor": "Verrouiller la position et la taille",
+  "@ContainerAlignment": "Alignement",
+  "@ContainerAlignmentInput": "Alignement",
+  "@ContainerAlignWithSymbol": "Aligner au symbole",
+  "@ContainerDimensions": "Cotations",
+  "@ContainerShowDimension": "Afficher les cotations",
+  "@ContainerShowChildrenDimension": "Afficher les cotations englobante des enfants",
+  "@ContainerMarkPosition": "Marquer la position pour les parents",
+  "@ContainerShowDimensionWithMarks": "Afficher les cotations avec les enfants marqués",
+  "@ContainerStyle": "Style",
+
+  "@SymbolName": "Nom",
+  "@SymbolX": "x",
+  "@SymbolHeight": "Hauteur",
+  "@SymbolWidth": "Largeur"
+}