From c625dd2eac57ede3f3cb5cc4e078c3f9ab9fb3f5 Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Thu, 28 Dec 2023 23:34:24 +0300
Subject: [PATCH] fix: styling

---
 locales/en-US.yml                             |  1 +
 locales/index.d.ts                            |  1 +
 locales/ja-JP.yml                             |  1 +
 .../components/MkFileCaptionEditWindow.vue    | 20 ++++++++++++-------
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 4d25b8e523..d889889583 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -2474,6 +2474,7 @@ _dataSaver:
     description: "If code highlighting notations are used in MFM, etc., they will not load until tapped. Syntax highlighting requires downloading the highlight definition files for each programming language. Therefore, disabling the automatic loading of these files is expected to reduce the amount of communication data."
 
 _ocr:
+  header: OCR
   button: OCR
   existingWarning: Existing caption will be overwritten
   dataWarning: OCR may require additional downloads
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 4f7999fd57..16f77fb3a5 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -2649,6 +2649,7 @@ export interface Locale {
         };
     };
     "_ocr": {
+        "header": string;
         "button": string;
         "existingWarning": string;
         "dataWarning": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5baf5b2e0e..82accc2a34 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2532,6 +2532,7 @@ _dataSaver:
     description: "MFMなどでコードハイライト記法が使われている場合、タップするまで読み込まれなくなります。コードハイライトではハイライトする言語ごとにその定義ファイルを読み込む必要がありますが、それらが自動で読み込まれなくなるため、通信量の削減が見込めます。"
 
 _ocr:
+  header: OCR
   button: OCR
   existingWarning: 既存のキャプションは上書きされる
   dataWarning: OCRは追加ダウンロードが必要な場合があります。
diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.vue b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
index 647386bf85..0333d3bcfe 100644
--- a/packages/frontend/src/components/MkFileCaptionEditWindow.vue
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
@@ -20,12 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
 			<template #label>{{ i18n.ts.caption }}</template>
 		</MkTextarea>
-		<span :class="$style.ocrHeader">{{ i18n.ts._ocr.button }}</span>
 		<div v-if="file.type.startsWith('image/')" :class="$style.ocr">
-			<MkSelect v-model="ocrLanguage">
-				<option v-for="language in ocrLanguages" :key="language" :value="language">{{ i18n.ts._ocr.languages[language] ?? language }}</option>
-			</MkSelect>
-			<MkButton small @click="onOCR">{{ i18n.ts._ocr.button }}</MkButton>
+			<span :class="$style.ocrHeader">{{ i18n.ts._ocr.header }}</span>
+			<div :class="$style.ocrForm">
+				<MkSelect v-model="ocrLanguage">
+					<option v-for="language in ocrLanguages" :key="language" :value="language">{{ i18n.ts._ocr.languages[language] ?? language }}</option>
+				</MkSelect>
+				<MkButton @click="onOCR">{{ i18n.ts._ocr.button }}</MkButton>
+			</div>
 		</div>
 	</MkSpacer>
 </MkModalWindow>
@@ -85,6 +87,7 @@ async function onOCR() {
 	await os.promiseDialog((async () => {
 		const tesseract = await import('tesseract.js');
 		const worker = await tesseract.createWorker(ocrLanguage.value, undefined, {
+			// future improvement: it should be possible to use this logger function to provide a progress bar (via the m.progress property)
 			logger(m) { console.log('[OCR]', m); },
 			workerPath: '/assets/tesseract/worker.min.js',
 			corePath: '/assets/tesseract/core',
@@ -101,15 +104,18 @@ async function onOCR() {
 </script>
 
 <style lang="scss" module>
+.ocr {
+	margin-top: 8px;
+}
+
 .ocrHeader {
 	display: block;
-	margin-top: 8px;
 	margin-bottom: 2px;
 	font-size: 0.85em;
 	user-select: none;
 }
 
-.ocr {
+.ocrForm {
 	display: flex;
 	gap: 8px;