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

pkg/models/user_app_cloud_setting.go

@@ -29,6 +29,7 @@ var ALL_ALLOWED_CLOUD_SYNC_APP_SETTING_KEY_TYPES = map[string]UserApplicationClo
 	"showTotalAmountInTransactionListPage": USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
 	"showTagInTransactionListPage":         USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
 	// Transaction Edit Page
+	"quickSaveButtonStyleInMobileTransactionListPage":          USER_APPLICATION_CLOUD_SETTING_TYPE_NUMBER,
 	"quickAddButtonActionInMobileTransactionEditPage":          USER_APPLICATION_CLOUD_SETTING_TYPE_NUMBER,
 	"autoSaveTransactionDraft":                                 USER_APPLICATION_CLOUD_SETTING_TYPE_STRING,
 	"autoGetCurrentGeoLocation":                                USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,

src/core/setting.ts

@@ -1,7 +1,10 @@
 import { type WeekDayValue, WeekDay } from './datetime.ts';
 import { TimezoneTypeForStatistics } from './timezone.ts';
 import { CurrencySortingType } from './currency.ts';
-import { TransactionQuickAddButtonActionType } from './transaction.ts';
+import {
+    TransactionQuickSaveButtonStyle,
+    TransactionQuickAddButtonActionType
+} from './transaction.ts';
 import {
     CategoricalChartType,
     TrendChartType,
@@ -44,6 +47,7 @@ export interface ApplicationSettings extends BaseApplicationSetting {
     overviewAccountFilterInHomePage: Record<string, boolean>;
     overviewTransactionCategoryFilterInHomePage: Record<string, boolean>;
     // Transaction List Page
+    quickSaveButtonStyleInMobileTransactionListPage: number;
     quickAddButtonActionInMobileTransactionEditPage: number;
     itemsCountInTransactionListPage: number;
     showTotalAmountInTransactionListPage: boolean;
@@ -125,6 +129,7 @@ export const ALL_ALLOWED_CLOUD_SYNC_APP_SETTING_KEY_TYPES: Record<string, UserAp
     'showTotalAmountInTransactionListPage': UserApplicationCloudSettingType.Boolean,
     'showTagInTransactionListPage': UserApplicationCloudSettingType.Boolean,
     // Transaction Edit Page
+    'quickSaveButtonStyleInMobileTransactionListPage': UserApplicationCloudSettingType.Number,
     'quickAddButtonActionInMobileTransactionEditPage': UserApplicationCloudSettingType.Number,
     'autoSaveTransactionDraft': UserApplicationCloudSettingType.String,
     'autoGetCurrentGeoLocation': UserApplicationCloudSettingType.Boolean,
@@ -184,6 +189,7 @@ export const DEFAULT_APPLICATION_SETTINGS: ApplicationSettings = {
     showTotalAmountInTransactionListPage: true,
     showTagInTransactionListPage: true,
     // Transaction Edit Page
+    quickSaveButtonStyleInMobileTransactionListPage: TransactionQuickSaveButtonStyle.Default.type,
     quickAddButtonActionInMobileTransactionEditPage: TransactionQuickAddButtonActionType.Default.type,
     autoSaveTransactionDraft: 'disabled',
     autoGetCurrentGeoLocation: false,

src/core/transaction.ts

@@ -67,6 +67,38 @@ export class TransactionTagFilterType implements TypeAndName {
     }
 }
 
+export class TransactionQuickSaveButtonStyle implements TypeAndName {
+    private static readonly allInstances: TransactionQuickSaveButtonStyle[] = [];
+    private static readonly allInstancesByType: Record<number, TransactionQuickSaveButtonStyle> = {};
+
+    public static readonly Disabled = new TransactionQuickSaveButtonStyle(0, 'Disabled');
+    public static readonly BottomFixed = new TransactionQuickSaveButtonStyle(1, 'Bottom Fixed');
+    public static readonly BottomLeftFloating = new TransactionQuickSaveButtonStyle(2, 'Bottom Left Floating');
+    public static readonly BottomCenterFloating = new TransactionQuickSaveButtonStyle(3, 'Bottom Center Floating');
+    public static readonly BottomRightFloating = new TransactionQuickSaveButtonStyle(4, 'Bottom Right Floating');
+
+    public static readonly Default = TransactionQuickSaveButtonStyle.BottomRightFloating;
+
+    public readonly type: number;
+    public readonly name: string;
+
+    private constructor(type: number, name: string) {
+        this.type = type;
+        this.name = name;
+
+        TransactionQuickSaveButtonStyle.allInstances.push(this);
+        TransactionQuickSaveButtonStyle.allInstancesByType[type] = this;
+    }
+
+    public static values(): TransactionQuickSaveButtonStyle[] {
+        return TransactionQuickSaveButtonStyle.allInstances;
+    }
+
+    public static valueOf(type: number): TransactionQuickSaveButtonStyle | undefined {
+        return TransactionQuickSaveButtonStyle.allInstancesByType[type];
+    }
+}
+
 export class TransactionQuickAddButtonActionType implements TypeAndName {
     private static readonly allInstances: TransactionQuickAddButtonActionType[] = [];
     private static readonly allInstancesByType: Record<number, TransactionQuickAddButtonActionType> = {};

src/locales/de.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Monatlichen Gesamtbetrag anzeigen",
     "Show Transaction Tags": "Transaktions-Tag anzeigen",
     "Transaction Edit Page": "Transaktionsbearbeitungsseite",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Entwurf automatisch speichern",
     "Always Show Confirmation": "Bestätigung jedes mal anzeigen",

src/locales/en.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Show Monthly Total Amount",
     "Show Transaction Tags": "Show Transaction Tags",
     "Transaction Edit Page": "Transaction Edit Page",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Automatically Save Draft",
     "Always Show Confirmation": "Always Show Confirmation",

src/locales/es.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Mostrar Importe Total Mensual",
     "Show Transaction Tags": "Mostrar Etiqueta de Transacción",
     "Transaction Edit Page": "Página de Edición de Transacciones",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Guardar Borrador Automáticamente",
     "Always Show Confirmation": "Mostrar Confirmación Cada Vez",

src/locales/fr.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Afficher le montant total mensuel",
     "Show Transaction Tags": "Afficher l'étiquette de transaction",
     "Transaction Edit Page": "Page de modification de transaction",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Enregistrer automatiquement le brouillon",
     "Always Show Confirmation": "Afficher la confirmation à chaque fois",

src/locales/helpers.ts

@@ -129,6 +129,7 @@ import {
 
 import {
     TransactionEditScopeType,
+    TransactionQuickSaveButtonStyle,
     TransactionQuickAddButtonActionType
 } from '@/core/transaction.ts';
 
@@ -2434,6 +2435,7 @@ export function useI18n() {
         getAllStatisticsDateAggregationTypes: (analysisType: StatisticsAnalysisType) => getLocalizedChartDateAggregationTypeAndDisplayName(analysisType, true),
         getAllStatisticsDateAggregationTypesWithShortName: (analysisType: StatisticsAnalysisType) => getLocalizedChartDateAggregationTypeAndDisplayName(analysisType, false),
         getAllTransactionEditScopeTypes: () => getLocalizedDisplayNameAndType(TransactionEditScopeType.values()),
+        getAllTransactionQuickSaveButtonStyles: () => getLocalizedDisplayNameAndType(TransactionQuickSaveButtonStyle.values()),
         getAllTransactionQuickAddButtonActionTypes: () => getLocalizedDisplayNameAndType(TransactionQuickAddButtonActionType.values()),
         getAllTransactionScheduledFrequencyTypes: () => getLocalizedDisplayNameAndType(ScheduledTemplateFrequencyType.values()),
         getAllImportTransactionColumnTypes: () => getLocalizedDisplayNameAndType(ImportTransactionColumnType.values()),

src/locales/it.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Mostra importo totale mensile",
     "Show Transaction Tags": "Mostra tag transazione",
     "Transaction Edit Page": "Pagina modifica transazione",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Salva automaticamente bozza",
     "Always Show Confirmation": "Mostra conferma ogni volta",

src/locales/ja.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "毎月の合計金額を表示",
     "Show Transaction Tags": "取引タグを表示",
     "Transaction Edit Page": "取引編集ページ",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "下書きの自動保存",
     "Always Show Confirmation": "確認を毎回表示",

src/locales/kn.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "ಮಾಸಿಕ ಒಟ್ಟು ಮೊತ್ತ ತೋರಿಸಿ",
     "Show Transaction Tags": "ವಹಿವಾಟು ಟ್ಯಾಗ್ ತೋರಿಸಿ",
     "Transaction Edit Page": "ವಹಿವಾಟು ಸಂಪಾದನೆ ಪುಟ",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "ಕರಡು ಸ್ವಯಂ ಉಳಿಸಿ",
     "Always Show Confirmation": "ಪ್ರತಿ ಬಾರಿ ದೃಢೀಕರಣ ತೋರಿಸಿ",

src/locales/ko.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "월별 총 금액 표시",
     "Show Transaction Tags": "거래 태그 표시",
     "Transaction Edit Page": "거래 편집 페이지",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "초안 자동 저장",
     "Always Show Confirmation": "매번 확인 표시",

src/locales/nl.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Maandelijks totaalbedrag tonen",
     "Show Transaction Tags": "Transactietag tonen",
     "Transaction Edit Page": "Transactiebewerkingspagina",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Concept automatisch opslaan",
     "Always Show Confirmation": "Elke keer bevestiging tonen",

src/locales/pt_BR.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Mostrar Valor Total Mensal",
     "Show Transaction Tags": "Mostrar Tag da Transação",
     "Transaction Edit Page": "Página de Edição de Transação",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Ação do Botão de Adição Rápida",
     "Automatically Save Draft": "Salvar Rascunho Automaticamente",
     "Always Show Confirmation": "Mostrar Confirmação Toda Vez",

src/locales/ru.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Показать общую сумму за месяц",
     "Show Transaction Tags": "Показать тег транзакции",
     "Transaction Edit Page": "Страница редактирования транзакции",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Действие кнопки быстрого добавления",
     "Automatically Save Draft": "Автоматически сохранять черновик",
     "Always Show Confirmation": "Показывать подтверждение каждый раз",

src/locales/sl.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Prikaži mesečni skupni znesek",
     "Show Transaction Tags": "Prikaži oznako transakcije",
     "Transaction Edit Page": "Stran za urejanje transakcij",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Samodejno shrani osnutek",
     "Always Show Confirmation": "Vsakič prikaži potrditev",

src/locales/ta.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "மாதாந்திர மொத்தம் தொகை காட்டு",
     "Show Transaction Tags": "பரிவர்த்தனை குறிச்சொல் காட்டு",
     "Transaction Edit Page": "பரிவர்த்தனை திருத்தம் பக்கம்",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "வரைவு தானியங்கி சேமி",
     "Always Show Confirmation": "ஒவ்வொரு முறை அங்கீகாரம் காட்டு",

src/locales/th.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "แสดงจำนวนเงินรวมรายเดือน",
     "Show Transaction Tags": "แสดงแท็กรายการ",
     "Transaction Edit Page": "หน้าการแก้ไขรายการ",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "บันทึกร่างอัตโนมัติ",
     "Always Show Confirmation": "แสดงการยืนยันทุกครั้ง",

src/locales/tr.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Aylık Toplam Tutarı Göster",
     "Show Transaction Tags": "İşlem Etiketini Göster",
     "Transaction Edit Page": "İşlem Düzenleme Sayfası",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Taslağı Otomatik Kaydet",
     "Always Show Confirmation": "Her Seferinde Onay Göster",

src/locales/uk.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Показати місячну загальну суму",
     "Show Transaction Tags": "Показати тег транзакції",
     "Transaction Edit Page": "Сторінка редагування транзакції",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Автоматично зберігати чернетку",
     "Always Show Confirmation": "Показувати підтвердження щоразу",

src/locales/vi.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "Hiển thị tổng số tiền hàng tháng",
     "Show Transaction Tags": "Hiển thị thẻ giao dịch",
     "Transaction Edit Page": "Trang chỉnh sửa giao dịch",
+    "Quick Save Button Style": "Quick Save Button Style",
+    "Bottom Left Floating": "Bottom Left Floating",
+    "Bottom Center Floating": "Bottom Center Floating",
+    "Bottom Right Floating": "Bottom Right Floating",
+    "Bottom Fixed": "Bottom Fixed",
     "Quick Add Button Action": "Quick Add Button Action",
     "Automatically Save Draft": "Tự động lưu bản nháp",
     "Always Show Confirmation": "Hiển thị xác nhận mỗi lần",

src/locales/zh_Hans.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "显示月度总金额",
     "Show Transaction Tags": "显示交易标签",
     "Transaction Edit Page": "交易编辑页面",
+    "Quick Save Button Style": "快速保存按钮样式",
+    "Bottom Left Floating": "左下角悬浮",
+    "Bottom Center Floating": "底部居中悬浮",
+    "Bottom Right Floating": "右下角悬浮",
+    "Bottom Fixed": "底部固定",
     "Quick Add Button Action": "快速添加按钮操作",
     "Automatically Save Draft": "自动保存草稿",
     "Always Show Confirmation": "每次提示确认",

src/locales/zh_Hant.json

@@ -2255,6 +2255,11 @@
     "Show Monthly Total Amount": "顯示月度總金額",
     "Show Transaction Tags": "顯示交易標籤",
     "Transaction Edit Page": "交易編輯頁面",
+    "Quick Save Button Style": "快速儲存按鈕樣式",
+    "Bottom Left Floating": "左下角浮動",
+    "Bottom Center Floating": "底部中央浮動",
+    "Bottom Right Floating": "右下浮動",
+    "Bottom Fixed": "底部固定",
     "Quick Add Button Action": "快速新增按鈕動作",
     "Automatically Save Draft": "自動儲存草稿",
     "Always Show Confirmation": "每次提示確認",

src/stores/setting.ts

@@ -234,6 +234,12 @@ export const useSettingsStore = defineStore('settings', () => {
     }
 
     // Transaction Edit Page
+    function setQuickSaveButtonStyleInMobileTransactionListPage(value: number): void {
+        updateApplicationSettingsValue('quickSaveButtonStyleInMobileTransactionListPage', value);
+        appSettings.value.quickSaveButtonStyleInMobileTransactionListPage = value;
+        updateUserApplicationCloudSettingValue('quickSaveButtonStyleInMobileTransactionListPage', value);
+    }
+
     function setQuickAddButtonActionInMobileTransactionEditPage(value: number): void {
         updateApplicationSettingsValue('quickAddButtonActionInMobileTransactionEditPage', value);
         appSettings.value.quickAddButtonActionInMobileTransactionEditPage = value;
@@ -537,6 +543,7 @@ export const useSettingsStore = defineStore('settings', () => {
         setShowTotalAmountInTransactionListPage,
         setShowTagInTransactionListPage,
         // -- Transaction Edit Page
+        setQuickSaveButtonStyleInMobileTransactionListPage,
         setQuickAddButtonActionInMobileTransactionEditPage,
         setAutoSaveTransactionDraft,
         setAutoGetCurrentGeoLocation,

src/views/base/settings/AppCloudSyncPageBase.ts

@@ -53,6 +53,7 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
     {
         categoryName: 'Transaction Edit Page',
         items: [
+            { settingKey: 'quickSaveButtonStyleInMobileTransactionListPage', settingName: 'Quick Save Button Style', mobile: true, desktop: false },
             { settingKey: 'quickAddButtonActionInMobileTransactionEditPage', settingName: 'Quick Add Button Action', mobile: true, desktop: false },
             { settingKey: 'autoSaveTransactionDraft', settingName: 'Automatically Save Draft', mobile: true, desktop: true },
             { settingKey: 'autoGetCurrentGeoLocation', settingName: 'Automatically Add Geolocation', mobile: true, desktop: true },

src/views/mobile/settings/PageSettingsPage.vue

@@ -95,6 +95,33 @@
             <f7-list-item
                 class="item-truncate-after-text"
                 link="#"
+                @click="showQuickSaveButtonStyleInMobileTransactionListPagePopup = true"
+            >
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Quick Save Button Style') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    {{ findDisplayNameByType(allTransactionQuickSaveButtonStyles, quickSaveButtonStyleInMobileTransactionListPage) }}
+                </template>
+                <list-item-selection-popup value-type="item"
+                                           key-field="type" value-field="type"
+                                           title-field="displayName"
+                                           :title="tt('Quick Save Button Style')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Quick Save Button Style')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTransactionQuickSaveButtonStyles"
+                                           v-model:show="showQuickSaveButtonStyleInMobileTransactionListPagePopup"
+                                           v-model="quickSaveButtonStyleInMobileTransactionListPage">
+                </list-item-selection-popup>
+            </f7-list-item>
+
+            <f7-list-item
+                class="item-truncate-after-text"
+                link="#"
+                :disabled="quickSaveButtonStyleInMobileTransactionListPage === TransactionQuickSaveButtonStyle.Disabled.type"
                 @click="showQuickAddButtonActionInMobileTransactionEditPagePopup = true"
             >
                 <template #after-title>
@@ -237,10 +264,15 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import { CategoryType } from '@/core/category.ts';
+import { TransactionQuickSaveButtonStyle } from '@/core/transaction.ts';
 
 import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
 
-const { tt, getAllTransactionQuickAddButtonActionTypes } = useI18n();
+const {
+    tt,
+    getAllTransactionQuickSaveButtonStyles,
+    getAllTransactionQuickAddButtonActionTypes
+} = useI18n();
 const { showToast } = useI18nUIComponents();
 const {
     loadingAccounts,
@@ -269,12 +301,19 @@ const accountsStore = useAccountsStore();
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
 const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
+const showQuickSaveButtonStyleInMobileTransactionListPagePopup = ref<boolean>(false);
 const showQuickAddButtonActionInMobileTransactionEditPagePopup = ref<boolean>(false);
 const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
 const showCurrencySortByInExchangeRatesPagePopup = ref<boolean>(false);
 
+const allTransactionQuickSaveButtonStyles = computed<TypeAndDisplayName[]>(() => getAllTransactionQuickSaveButtonStyles());
 const allTransactionQuickAddButtonActionTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionQuickAddButtonActionTypes());
 
+const quickSaveButtonStyleInMobileTransactionListPage = computed<number>({
+    get: () => settingsStore.appSettings.quickSaveButtonStyleInMobileTransactionListPage,
+    set: (value) => settingsStore.setQuickSaveButtonStyleInMobileTransactionListPage(value)
+});
+
 const quickAddButtonActionInMobileTransactionEditPage = computed<number>({
     get: () => settingsStore.appSettings.quickAddButtonActionInMobileTransactionEditPage,
     set: (value) => settingsStore.setQuickAddButtonActionInMobileTransactionEditPage(value)

src/views/mobile/transactions/EditPage.vue

@@ -469,14 +469,20 @@
             </f7-actions-group>
         </f7-actions>
 
-        <template #fixed>
+        <template #fixed v-if="quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomLeftFloating.type || quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomCenterFloating.type || quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomRightFloating.type">
-            <f7-fab id="quick-save-fab" position="right-bottom" :class="{ 'disabled': inputIsEmpty || submitting }"
+            <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,