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

support custom quick save button styles on the mobile transaction edit page

Browse Source
This commit is contained in:
MaysWind
2026-03-17 00:16:37 +08:00
parent 5ee93a5db1
commit 9772d9ca62
27 changed files with 215 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/transactions/EditPage.vue
+30 -4
View File
@@ -469,14 +469,20 @@
</f7-actions-group>
</f7-actions>
<template #fixed>
<f7-fab id="quick-save-fab" position="right-bottom" :class="{ 'disabled': inputIsEmpty || submitting }"
<template #fixed v-if="quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomLeftFloating.type || quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomCenterFloating.type || quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomRightFloating.type">
<f7-fab id="quick-save-button" :class="{ 'disabled': inputIsEmpty || submitting }" :position="quickSaveButtonFloatingPosition"
:text="tt(quickSaveButtonTitle)"
@click="quickSave" v-if="mode !== TransactionEditPageMode.View">
</f7-fab>
</template>
<f7-popover class="quick-save-popover" target-el="#quick-save-fab"
<f7-toolbar id="quick-save-button" tabbar bottom v-if="quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomFixed.type && mode !== TransactionEditPageMode.View">
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" @click="quickSave">
<span class="tabbar-primary-link">{{ tt(quickSaveButtonTitle) }}</span>
</f7-link>
</f7-toolbar>
<f7-popover class="quick-save-popover" target-el="#quick-save-button"
v-model:opened="showQuickSavePopover">
<f7-list>
<f7-list-item link="#" no-chevron popover-close
@@ -521,8 +527,14 @@ import { useTransactionsStore } from '@/stores/transaction.ts';
import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
import { CategoryType } from '@/core/category.ts';
import { TransactionType, TransactionEditScopeType, TransactionQuickAddButtonActionType } from '@/core/transaction.ts';
import {
TransactionType,
TransactionEditScopeType,
TransactionQuickSaveButtonStyle,
TransactionQuickAddButtonActionType
} from '@/core/transaction.ts';
import { ScheduledTemplateFrequencyType, TemplateType } from '@/core/template.ts';
import { TRANSACTION_MAX_AMOUNT, TRANSACTION_MIN_AMOUNT } from '@/consts/transaction.ts';
import { KnownErrorCode } from '@/consts/api.ts';
import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
@@ -650,6 +662,20 @@ const showTransactionPictures = ref<boolean>(pageTypeAndMode?.type === Transacti
&& (pageTypeAndMode?.mode === TransactionEditPageMode.Add || pageTypeAndMode?.mode === TransactionEditPageMode.Edit)
&& settingsStore.appSettings.alwaysShowTransactionPicturesInMobileTransactionEditPage);
const quickSaveButtonStyleType = computed<number>(() => settingsStore.appSettings.quickSaveButtonStyleInMobileTransactionListPage);
const quickSaveButtonFloatingPosition = computed<string>(() => {
switch (settingsStore.appSettings.quickSaveButtonStyleInMobileTransactionListPage) {
case TransactionQuickSaveButtonStyle.BottomLeftFloating.type:
return 'left-bottom';
case TransactionQuickSaveButtonStyle.BottomCenterFloating.type:
return 'center-bottom';
case TransactionQuickSaveButtonStyle.BottomRightFloating.type:
return 'right-bottom';
default:
return 'right-bottom';
}
});
const sourceAmountClass = computed<Record<string, boolean>>(() => {
const classes: Record<string, boolean> = {
'readonly': mode.value === TransactionEditPageMode.View,