Skip to content

Commit

Permalink
Add multi-language support
Browse files Browse the repository at this point in the history
  • Loading branch information
@Miroito
Miroito committed Aug 13, 2022
1 parent 20c9781 commit 8e82e38
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 25 deletions.
2 changes: 1 addition & 1 deletion frontend/components/Domain/Recipe/RecipeActionMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export default defineComponent({
if (props.showOcrButton) {
editorButtons.splice(2, 0, {
text: "OCR editor",
text: i18n.t("ocr-editor.ocr-editor"),
icon: $globals.icons.eye,
event: OCR_EVENT,
color: "accent",
Expand Down
30 changes: 30 additions & 0 deletions frontend/lang/messages/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -625,5 +625,35 @@
"default-30-days": "Default 30 Days",
"expires-at": "Expires At",
"recipe-link-copied-message": "Recipe link copied to clipboard"
},
"ocr-editor": {
"ocr-editor": "Ocr editor",
"selection-mode": "Selection mode",
"pan-and-zoom-picture": "Pan and zoom picture",
"split-text": "Split text",
"preserve-line-breaks": "Preserve original line breaks",
"split-by-block": "Split by text block",
"flatten": "Flatten regardless of original formating",
"help": "Click here for help on how to use this feature!",
"help-dialog": {
"selection-mode": "Selection Mode (default)",
"selection-mode-desc": "The selection mode is the main mode that can be used to enter data:",
"selection-mode-steps": {
"draw" :"Draw a rectangle on the text you want to select.",
"click": "Click on any field on the right and then click back on the rectangle above the image.",
"result": "The selected text will appear inside the previously selected field."
},
"pan-and-zoom-mode": "Pan and Zoom Mode",
"pan-and-zoom-desc": "Select pan and zoom by clicking the icon. This mode allows to zoom inside the image and move around to make using big images easier.",
"split-text-mode": "Split Text modes",
"split-modes": {
"line-mode": "Line mode (default)",
"line-mode-desc": "In line mode, the text will be propagated by keeping the original line breaks. This mode is useful when using bulk add on a list of ingredients where one ingredient is one line.",
"block-mode": "Block mode",
"block-mode-desc": "In block mode, the text will be split in blocks. This mode is useful when bulk adding instructions that are usually written in paragraphs.",
"flat-mode": "Flat mode",
"flat-mode-desc": "In flat mode, the text will be added to the selected recipe field with no line breaks."
}
}
}
}
45 changes: 21 additions & 24 deletions frontend/pages/recipe/_slug/ocr-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
</v-icon>
</v-btn>
</template>
<span>Selection mode</span>
<span>{{ $t("ocr-editor.selection-mode") }}</span>
</v-tooltip>
<v-tooltip v-if="!isImageSmallerThanCanvas" bottom>
<template #activator="{ on, attrs }">
Expand All @@ -40,10 +40,10 @@
</v-icon>
</v-btn>
</template>
<span>Pan and zoom picture</span>
<span>{{ $t("ocr-editor.pan-and-zoom-picture") }}</span>
</v-tooltip>
<v-divider vertical class="mx-2" />
<v-toolbar-title>Split text </v-toolbar-title>
<v-toolbar-title>{{ $t("ocr-editor.split-text") }}</v-toolbar-title>
<v-tooltip bottom>
<template #activator="{ on, attrs }">
<v-btn icon>
Expand All @@ -57,7 +57,7 @@
</v-icon>
</v-btn>
</template>
<span>Preserve original line breaks</span>
<span>{{ $t("ocr-editor.preserve-line-breaks") }}</span>
</v-tooltip>
<v-tooltip bottom>
<template #activator="{ on, attrs }">
Expand All @@ -72,7 +72,7 @@
</v-icon>
</v-btn>
</template>
<span>Split by text block</span>
<span>{{ $t("ocr-editor.split-by-block") }}</span>
</v-tooltip>
<v-tooltip bottom>
<template #activator="{ on, attrs }">
Expand All @@ -87,7 +87,7 @@
</v-icon>
</v-btn>
</template>
<span>Flatten regardless of original formating</span>
<span>{{ $t("ocr-editor.flatten") }}</span>
</v-tooltip>

<v-spacer></v-spacer>
Expand All @@ -103,7 +103,7 @@
<v-icon v-bind="attrs" v-on="on" @click="showHelp = !showHelp"> {{ $globals.icons.help }} </v-icon>
</v-btn>
</template>
<span>Click here for help on how to use this feature!</span>
<span>{{ $t("ocr-editor.help") }}</span>
</v-tooltip>
</v-toolbar>
<canvas
Expand Down Expand Up @@ -241,39 +241,36 @@
<h1>Mouse modes</h1>
<v-divider class="mb-2 mt-1" />
<h2 class="my-2">
<v-icon> {{ $globals.icons.selectMode }} </v-icon>Selection Mode (default)
<v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help-dialog.selection-mode") }}
</h2>
<p class="my-1">The selection mode is the main mode that can be used to enter data:</p>
<p class="my-1">{{ $t("ocr-editor.help-dialog.selection-mode") }}</p>
<ol>
<li>Draw a rectangle on the text you want to select.</li>
<li>Click on any field on the right and then click back on the rectangle above the image.</li>
<li>The selected text will appear inside the previously selected field.</li>
<li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.draw") }}</li>
<li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.click") }}</li>
<li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.result") }}</li>
</ol>
<h2 class="my-2">
<v-icon> {{ $globals.icons.panAndZoom }} </v-icon>Pan and Zoom Mode
<v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help-dialog.pan-and-zoom-mode") }}
</h2>
Select pan and zoom by clicking the icon. This mode allows to zoom inside the image and move around to make
using big images easier.
<h1 class="mt-5">Split Text modes</h1>
{{ $t("ocr-editor.help-dialog.pan-and-zoom-desc") }}
<h1 class="mt-5">{{ $t("ocr-editor.help-dialog.split-text-mode") }}</h1>
<v-divider class="mb-2 mt-1" />
<h2 class="my-2">
<v-icon> {{ $globals.icons.preserveLines }} </v-icon> Line mode (default)
<v-icon> {{ $globals.icons.preserveLines }} </v-icon>{{ $t("ocr-editor.help-dialog.split-modes.line-mode") }}
</h2>
<p>
In line mode, the text will be propagated by keeping the original line breaks. This mode is useful when
using bulk add on a list of ingredients where one ingredient is one line.
{{ $t("ocr-editor.help-dialog.split-modes.line-mode-desc") }}
</p>
<h2 class="my-2">
<v-icon> {{ $globals.icons.preserveBlocks }} </v-icon> Block mode
<v-icon> {{ $globals.icons.preserveBlocks }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.block-mode") }}
</h2>
<p>
In block mode, the text will be split in blocks. This mode is useful when bulk adding instructions that are
usually written in paragraphs.
{{ $t("ocr-editor.help-dialog.split-modes.block-mode-desc") }}
</p>
<h2 class="my-2">
<v-icon> {{ $globals.icons.flatten }} </v-icon> Flat mode
<v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.flat-mode") }}
</h2>
<p>In flat mode, the text will be added to the selected recipe field with no line breaks.</p>
<p>{{ $t("ocr-editor.help-dialog.split-modes.flat-mode-desc") }}</p>
</v-card-text>
</v-card>
</v-dialog>
Expand Down

0 comments on commit 8e82e38

Please sign in to comment.