feature: localization for canvas commandbar items #319 (#323)

* feat: localization all canvas commandbar items * fix: labe in Layers - has to be plural * style: - extra line
microsoft · Jun 11, 2020 · 253b9c9 · 253b9c9
1 parent cbe9b0e
commit 253b9c9
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 13 deletions.
diff --git a/src/common/localization/en-us.ts b/src/common/localization/en-us.ts
@@ -316,6 +316,32 @@ export const english: IAppStrings = {
                 title: "Remove All Regions",
                 confirmation: "Are you sure you want to remove all regions?",
             },
+            canvasCommandBar: {
+                items: {
+                    layers: {
+                        text: "Layers",
+                        subMenuItems: {
+                            text: "Text",
+                            tables: "Tables",
+                            selectionMarks: "Selection Marks (Preview)",
+                            labels: "Labels"
+                        },
+                    }
+                },
+                farItems: {
+                    zoom: {
+                        zoomOut: "Zoom out",
+                        zoomIn: "Zoom in",
+                    },
+                    additionalActions: {
+                        text: "Additional actions",
+                        subIMenuItems: {
+                            runOcrOnCurrentDocument: "Run OCR on current document",
+                            runOcrOnAllDocuments: "Run OCR on all documents",
+                        }
+                    }
+                }
+            }
         },
         messages: {
             enforceTaggedRegions: {

diff --git a/src/common/localization/es-cl.ts b/src/common/localization/es-cl.ts
@@ -319,6 +319,32 @@ export const spanish: IAppStrings = {
                 title: "Borrar Regiones",
                 confirmation: "¿Está seguro que quiere borrar todas las regiones?",
             },
+            canvasCommandBar: {
+                items: {
+                    layers:{
+                        text: "Capas",
+                        subMenuItems: {
+                            text: "Texto",
+                            tables: "Tablas",
+                            selectionMarks: "Marcas de selección (vista previa)",
+                            labels: "Etiquetas"
+                        },
+                    }
+                },
+                farItems: {
+                    zoom: {
+                        zoomOut: "Alejar",
+                        zoomIn: "Acercarse",
+                    },
+                    additionalActions: {
+                        text: "Acciones adicionales",
+                        subIMenuItems: {
+                            runOcrOnCurrentDocument: "Ejecutar OCR en el documento actual",
+                            runOcrOnAllDocuments: "Ejecute OCR en todos los documentos",
+                        }
+                    }
+                }
+            }
         },
         messages: {
             enforceTaggedRegions: {

diff --git a/src/common/strings.ts b/src/common/strings.ts
@@ -313,6 +313,32 @@ export interface IAppStrings {
                 title: string;
                 confirmation: string;
             },
+            canvasCommandBar: {
+                items: {
+                    layers: {
+                        text: string,
+                        subMenuItems: {
+                            text: string,
+                            tables: string,
+                            selectionMarks: string;
+                            labels: string,
+                        }
+                    },
+                },
+                farItems: {
+                    zoom: {
+                        zoomOut: string,
+                        zoomIn: string,
+                    },
+                    additionalActions: {
+                        text: string,
+                        subIMenuItems: {
+                            runOcrOnCurrentDocument: string,
+                            runOcrOnAllDocuments: string,
+                        }
+                    }
+                }
+            },
         },
         messages: {
             enforceTaggedRegions: {

diff --git a/src/react/components/pages/editorPage/canvasCommandBar.tsx b/src/react/components/pages/editorPage/canvasCommandBar.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { CommandBar, ICommandBarItemProps } from "@fluentui/react/lib/CommandBar";
 import { ICustomizations, Customizer } from "@fluentui/react/lib/Utilities";
 import { getDarkGreyTheme } from "../../../../common/themes";
+import { strings } from '../../../../common/strings';
 
 interface ICanvasCommandBarProps {
     handleZoomIn: () => void;
@@ -23,37 +24,37 @@ export const CanvasCommandBar: React.FunctionComponent<ICanvasCommandBarProps> =
     const commandBarItems: ICommandBarItemProps[] = [
         {
           key: "layers",
-          text: "Layers",
+          text: strings.editorPage.canvas.canvasCommandBar.items.layers.text,
           iconProps: { iconName: "MapLayers" },
           subMenuProps: {
             items: [
               {
                 key: "text",
-                text: "Text",
+                text: strings.editorPage.canvas.canvasCommandBar.items.layers.subMenuItems.text,
                 canCheck: true,
                 iconProps: { iconName: "TextField" },
                 isChecked: props.layers["text"],
                 onClick: () => props.handleLayerChange("text"),
               },
               {
                 key: "table",
-                text: "Tables",
+                text: strings.editorPage.canvas.canvasCommandBar.items.layers.subMenuItems.tables,
                 canCheck: true,
                 iconProps: { iconName: "Table" },
                 isChecked: props.layers["tables"],
                 onClick: () => props.handleLayerChange("tables"),
               },
               {
                 key: "selectionMark",
-                text: "Selection Marks (Preview)",
+                text: strings.editorPage.canvas.canvasCommandBar.items.layers.subMenuItems.selectionMarks,
                 canCheck: true,
                 iconProps: { iconName: "CheckboxComposite" },
                 isChecked: props.layers["checkboxes"],
                 onClick: () => props.handleLayerChange("checkboxes"),
               },
               {
                 key: "Label",
-                text: "Label",
+                text: strings.editorPage.canvas.canvasCommandBar.items.layers.subMenuItems.labels,
                 canCheck: true,
                 iconProps: { iconName: "LabelComposite" },
                 isChecked: props.layers["label"],
@@ -67,39 +68,40 @@ export const CanvasCommandBar: React.FunctionComponent<ICanvasCommandBarProps> =
     const commandBarFarItems: ICommandBarItemProps[] = [
         {
             key: "zoomOut",
-            text: "Zoom out",
+            text: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomOut,
             // This needs an ariaLabel since it's icon-only
-            ariaLabel: "Zoom out",
+            ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomOut,
             iconOnly: true,
             iconProps: { iconName: "ZoomOut" },
             onClick: () => props.handleZoomOut(),
         },
         {
             key: "zoomIn",
-            text: "Zoom in",
+            text: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomIn,
             // This needs an ariaLabel since it's icon-only
-            ariaLabel: "Zoom in",
+            ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomIn,
             iconOnly: true,
             iconProps: { iconName: "ZoomIn" },
             onClick: () => props.handleZoomIn(),
         },
         {
             key: "additionalActions",
-            title: "Additional actions",
-            ariaLabel: "Additional actions",
+            title: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.text,
+            // This needs an ariaLabel since it's icon-only
+            ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.text,
             className: "additional-action-dropdown",
             iconProps: { iconName: "More" },
             subMenuProps: {
                 items: [
                     {
                         key: "runOcrForCurrentDocument",
-                        text: "Run OCR on current document",
+                        text: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.subIMenuItems.runOcrOnCurrentDocument,
                         iconProps: { iconName: "TextDocument" },
                         onClick: () => props.handleRunOcr(),
                     },
                     {
                         key: "runOcrForAllDocuments",
-                        text: "Run OCR for all documents",
+                        text: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.subIMenuItems.runOcrOnAllDocuments,
                         iconProps: { iconName: "Documentation" },
                         onClick: () => props.handleRunOcrForAllDocuments(),
                     },