zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reduce dialog margins and make the action buttons always at the bottom of the dialog

Browse Source
This commit is contained in:
MaysWind
2025-12-13 21:04:43 +08:00
parent e9c3001c28
commit b2fab42170
26 changed files with 657 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
+10 -12
View File
@@ -1,20 +1,18 @@
<template>
<v-dialog width="800" :persistent="loading || recognizing || !!imageFile" v-model="showState" @paste="onPaste">
<v-card class="pa-2 pa-sm-4 pa-md-4">
<v-card class="pa-sm-1 pa-md-2">
<template #title>
<div class="d-flex align-center justify-center">
<h4 class="text-h4">{{ tt('AI Image Recognition') }}</h4>
</div>
<h4 class="text-h4">{{ tt('AI Image Recognition') }}</h4>
</template>
<v-card-text class="d-flex justify-center w-100 my-md-4 pt-0">
<div class="w-100 border position-relative"
<v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto" style="height: 480px">
<div class="w-100 h-100 border position-relative"
@dragenter.prevent="onDragEnter"
@dragover.prevent
@dragleave.prevent="onDragLeave"
@drop.prevent="onDrop">
<div class="d-flex w-100 fill-height justify-center align-center justify-content-center text-center px-4"
:class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
<div class="d-flex w-100 h-100 justify-center align-center justify-content-center text-center px-4"
:class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }">
<div class="d-inline-flex flex-column" v-if="!loading && !imageFile && !isDragOver">
<h3 :class="{ 'pa-2': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }">{{ tt('You can drag and drop, paste or click to select a receipt or transaction image') }}</h3>
<span :class="{ 'pa-2': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }">{{ tt('Uploaded image and personal data will be sent to the large language model, please be aware of potential privacy risks.') }}</span>
@@ -23,17 +21,17 @@
<h3 class="pa-2" v-else-if="loading">{{ tt('Loading image...') }}</h3>
<h3 :class="{ 'pa-2': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }" v-else-if="recognizing">{{ tt('AI can make mistakes. Check important info.') }}</h3>
</div>
<v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
<v-img :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver, 'h-100': true }"
:src="imageSrc" @click="showOpenImageDialog">
<template #placeholder>
<div :class="{ 'w-100 fill-height': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }"></div>
<div :class="{ 'w-100 h-100': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }"></div>
</template>
</v-img>
</div>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
<v-card-text>
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
<v-btn :disabled="loading || recognizing || !imageFile" @click="recognize">
{{ tt('Recognize') }}
<v-progress-circular indeterminate size="22" class="ms-2" v-if="recognizing"></v-progress-circular>
src/views/desktop/transactions/list/dialogs/EditDialog.vue
+13 -24
View File
@@ -1,12 +1,13 @@
<template>
<v-dialog width="1000" :persistent="isTransactionModified" v-model="showState">
<v-card class="pa-2 pa-sm-4 pa-md-8">
<v-card class="pa-sm-1 pa-md-2">
<template #title>
<div class="d-flex align-center justify-center">
<div class="d-flex w-100 align-center justify-center">
<div class="d-flex align-center">
<h4 class="text-h4">{{ tt(title) }}</h4>
<v-progress-circular indeterminate size="22" class="ms-2" v-if="loading"></v-progress-circular>
</div>
<v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ms-2" :icon="true"
:disabled="loading || submitting" v-if="mode !== TransactionEditPageMode.View && (activeTab === 'basicInfo' || (activeTab === 'map' && isSupportGetGeoLocationByClick()))">
<v-icon :icon="mdiDotsVertical" />
@@ -49,7 +50,7 @@
</v-btn>
</div>
</template>
<v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
<v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
<div class="mb-4">
<v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }"
:disabled="loading || submitting" v-model="transaction.type">
@@ -448,8 +449,8 @@
</v-window-item>
</v-window>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center flex-wrap mt-2 mt-sm-4 mt-md-6 gap-4">
<v-card-text>
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
<v-tooltip :disabled="!inputIsEmpty" :text="inputEmptyProblemMessage ? tt(inputEmptyProblemMessage) : ''">
<template v-slot:activator="{ props }">
<div v-bind="props" class="d-inline-block">
@@ -1260,48 +1261,36 @@ defineExpose({
@media (min-height: 630px) {
.transaction-edit-map-view {
height: 300px;
height: 390px;
}
@media (min-width: 960px) {
.transaction-pictures {
min-height: 300px;
min-height: 414px;
}
}
}
@media (min-height: 700px) {
.transaction-edit-map-view {
height: 350px;
height: 460px;
}
@media (min-width: 960px) {
.transaction-pictures {
min-height: 350px;
min-height: 484px;
}
}
}
@media (min-height: 800px) {
@media (min-height: 780px) {
.transaction-edit-map-view {
height: 450px;
height: 538px;
}
@media (min-width: 960px) {
.transaction-pictures {
min-height: 450px;
}
}
}
@media (min-height: 900px) {
.transaction-edit-map-view {
height: 550px;
}
@media (min-width: 960px) {
.transaction-pictures {
min-height: 550px;
min-height: 562px;
}
}
}