use system control to take photo or select an image

src/components/mobile/AIImageRecognitionSheet.vue

@@ -4,33 +4,23 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Choose from Library')" @click="showOpenImage"></f7-link>
+                <f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Cancel')" @click="cancel"></f7-link>
             </div>
             <div class="right">
-                <f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Take Photo')" @click="showCamera"></f7-link>
+                <f7-link :class="{ 'disabled': loading || recognizing || !imageFile }" :text="tt('Recognize')" @click="confirm"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content class="margin-top no-padding-top">
+        <f7-page-content>
-            <div class="padding-horizontal padding-bottom">
+            <div class="image-container display-flex justify-content-center"
-                <div class="image-container display-flex justify-content-center width-100 margin-bottom" style="height: 240px">
+                 style="height: 400px" @click="showOpenImage">
-                    <img height="240px" :src="imageSrc" v-if="imageSrc" />
+                <img height="400px" :src="imageSrc" v-if="imageSrc" />
-                    <div class="image-container-background display-flex justify-content-center align-items-center" v-if="!imageSrc">
+                <div class="image-container-background display-flex justify-content-center align-items-center" v-if="!imageSrc">
-                        <span>{{ tt('Please select a receipt or transaction image first') }}</span>
+                    <span>{{ tt('Click here to select a receipt or transaction image') }}</span>
-                    </div>
-                </div>
-                <f7-button large fill color="primary"
-                           :class="{ 'disabled': loading || recognizing || !imageFile }"
-                           :text="tt('Recognize')"
-                           @click="confirm">
-                </f7-button>
-                <div class="margin-top text-align-center">
-                    <f7-link :class="{ 'disabled': loading || recognizing }" @click="cancel" :text="tt('Cancel')"></f7-link>
                 </div>
             </div>
         </f7-page-content>
 
-        <input ref="imageInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" @change="openImage($event)" />
+        <input ref="imageInput" type="file" style="display: none" :accept="`${SUPPORTED_IMAGE_EXTENSIONS};capture=camera`" @change="openImage($event)" />
-        <input ref="cameraInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" capture="environment" @change="openImage($event)" />
     </f7-sheet>
 </template>
 
@@ -66,7 +56,6 @@ const { showToast } = useI18nUIComponents();
 const transactionsStore = useTransactionsStore();
 
 const imageInput = useTemplateRef<HTMLInputElement>('imageInput');
-const cameraInput = useTemplateRef<HTMLInputElement>('cameraInput');
 
 const loading = ref<boolean>(false);
 const recognizing = ref<boolean>(false);
@@ -93,14 +82,6 @@ function showOpenImage(): void {
     imageInput.value?.click();
 }
 
-function showCamera(): void {
-    if (loading.value || recognizing.value) {
-        return;
-    }
-
-    cameraInput.value?.click();
-}
-
 function openImage(event: Event): void {
     if (!event || !event.target) {
         return;
@@ -176,6 +157,9 @@ function onSheetClosed(): void {
 .image-container-background {
     width: 100%;
     height: 100%;
-    background-color: var(--f7-page-bg-color);
+
+    > span {
+        font-size: var(--f7-input-font-size);
+    }
 }
 </style>

src/locales/de.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
     "Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Kategorie",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/en.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
     "Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Category",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/es.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
     "Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categoría",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/it.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplica (con posizione geografica)",
     "Duplicate (With Time and Geographic Location)": "Duplica (con ora e posizione geografica)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categoria",
     "Secondary Category": "Categoria secondaria",
     "Expense Category": "Expense Category",

src/locales/ja.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "複製（地理座標を含む）",
     "Duplicate (With Time and Geographic Location)": "複製（時間と地理座標を含む）",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "カテゴリ",
     "Secondary Category": "二次カテゴリ",
     "Expense Category": "Expense Category",

src/locales/nl.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Dupliceren (met geografische locatie)",
     "Duplicate (With Time and Geographic Location)": "Dupliceren (met tijd en locatie)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categorie",
     "Secondary Category": "Secundaire categorie",
     "Expense Category": "Uitgavecategorie",

src/locales/pt_BR.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplicar (Com Localização Geográfica)",
     "Duplicate (With Time and Geographic Location)": "Duplicar (Com Tempo e Localização Geográfica)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categoria",
     "Secondary Category": "Categoria Secundária",
     "Expense Category": "Expense Category",

src/locales/ru.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
     "Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Категория",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/uk.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Дублювати (з геолокацією)",
     "Duplicate (With Time and Geographic Location)": "Дублювати (з часом і геолокацією)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Категорія",
     "Secondary Category": "Вторинна категорія",
     "Expense Category": "Expense Category",

src/locales/vi.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
     "Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
     "AI Image Recognition": "AI Image Recognition",
-    "Choose from Library": "Choose from Library",
-    "Take Photo": "Take Photo",
     "Unable to load image": "Unable to load image",
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
-    "Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
+    "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Danh mục",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/zh_Hans.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "复制 (含地理位置)",
     "Duplicate (With Time and Geographic Location)": "复制 (含时间和地理位置)",
     "AI Image Recognition": "AI识图",
-    "Choose from Library": "从图库选择",
-    "Take Photo": "拍照",
     "Unable to load image": "无法加载图片",
     "Unable to recognize image": "无法识别图片",
     "Drag and drop a receipt or transaction image here, or click to select one": "拖拽收据或交易图片到此处，或点击选择图片",
     "Release to load image": "释放以加载图片",
-    "Please select a receipt or transaction image first": "请先选择收据或交易图片",
+    "Click here to select a receipt or transaction image": "点击这里选择收据或交易图片",
     "Category": "分类",
     "Secondary Category": "二级分类",
     "Expense Category": "支出分类",

src/locales/zh_Hant.json

@@ -1725,13 +1725,11 @@
     "Duplicate (With Geographic Location)": "複製 (含地理位置)",
     "Duplicate (With Time and Geographic Location)": "複製 (含時間和地理位置)",
     "AI Image Recognition": "AI識圖",
-    "Choose from Library": "從相簿選擇",
-    "Take Photo": "拍照",
     "Unable to load image": "無法載入圖片",
     "Unable to recognize image": "無法識別圖片",
     "Drag and drop a receipt or transaction image here, or click to select one": "將收據或交易圖片拖放到此處，或點擊以選擇圖片",
     "Release to load image": "放開以載入圖片",
-    "Please select a receipt or transaction image first": "請先選擇收據或交易圖片",
+    "Click here to select a receipt or transaction image": "點擊這裡選擇收據或交易圖片",
     "Category": "分類",
     "Secondary Category": "次分類",
     "Expense Category": "支出分類",