modify UI interaction for mode switching

src/locales/de.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Konto kann nicht gelöscht werden",
     "Unable to delete this sub-account": "Unable to delete this sub-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Transaktion",

src/locales/en.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Unable to delete this account",
     "Unable to delete this sub-account": "Unable to delete this sub-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Transaction",

src/locales/es.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "No se puede eliminar esta cuenta",
     "Unable to delete this sub-account": "Unable to delete this sub-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Transacción",

src/locales/it.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Impossibile eliminare questo account",
     "Unable to delete this sub-account": "Impossibile eliminare questo sotto-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Transazione",

src/locales/ja.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "この口座を削除できません",
     "Unable to delete this sub-account": "Unable to delete this sub-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "取引",

src/locales/pt_BR.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Não foi possível deletar esta conta",
     "Unable to delete this sub-account": "Não foi possível deletar esta subconta",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Transação",

src/locales/ru.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Не удалось удалить этот счет",
     "Unable to delete this sub-account": "Unable to delete this sub-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Транзакция",

src/locales/uk.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Не вдалося видалити цей рахунок",
     "Unable to delete this sub-account": "Не вдалося видалити цей субрахунок",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Транзакція",

src/locales/vi.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "Không thể xóa tài khoản này",
     "Unable to delete this sub-account": "Unable to delete this sub-account",
     "Reconciliation Statement": "Reconciliation Statement",
-    "Show Account Balance Trends": "Show Account Balance Trends",
+    "Account Balance Trends": "Account Balance Trends",
-    "Show Transaction List": "Show Transaction List",
     "Update Closing Balance": "Update Closing Balance",
     "Please enter the new closing balance for the account": "Please enter the new closing balance for the account",
     "Transaction": "Giao dịch",

src/locales/zh_Hans.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "无法删除该账户",
     "Unable to delete this sub-account": "无法删除该子账户",
     "Reconciliation Statement": "对账单",
-    "Show Account Balance Trends": "显示账户余额趋势",
+    "Account Balance Trends": "账户余额趋势",
-    "Show Transaction List": "显示交易列表",
     "Update Closing Balance": "更新期末余额",
     "Please enter the new closing balance for the account": "请输入账户的新期末余额",
     "Transaction": "交易",

src/locales/zh_Hant.json

@@ -1642,8 +1642,7 @@
     "Unable to delete this account": "無法刪除此帳戶",
     "Unable to delete this sub-account": "無法刪除此子帳戶",
     "Reconciliation Statement": "對帳單",
-    "Show Account Balance Trends": "顯示帳戶餘額趨勢",
+    "Account Balance Trends": "帳戶餘額趨勢",
-    "Show Transaction List": "顯示交易清單",
     "Update Closing Balance": "更新期末餘額",
     "Please enter the new closing balance for the account": "請輸入帳戶的新期末餘額",
     "Transaction": "交易",

src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue

@@ -54,15 +54,6 @@
                                              :title="tt('Update Closing Balance')"
                                              @click="updateClosingBalance()"></v-list-item>
                                 <v-divider class="my-2"/>
-                                <v-list-item :prepend-icon="mdiChartBoxOutline"
-                                             :title="tt('Show Account Balance Trends')"
-                                             @click="showAccountBalanceTrendsCharts = true"
-                                             v-if="!showAccountBalanceTrendsCharts"></v-list-item>
-                                <v-list-item :prepend-icon="mdiListBoxOutline"
-                                             :title="tt('Show Transaction List')"
-                                             @click="showAccountBalanceTrendsCharts = false"
-                                             v-if="showAccountBalanceTrendsCharts"></v-list-item>
-                                <v-divider class="my-2"/>
                                 <v-list-item :prepend-icon="mdiComma"
                                              :disabled="!reconciliationStatements || !reconciliationStatements.transactions || reconciliationStatements.transactions.length < 1"
                                              @click="exportReconciliationStatements(KnownFileType.CSV)">
@@ -90,6 +81,17 @@
                 </div>
             </template>
 
+            <v-card-text class="py-0 w-100 d-flex justify-center mt-n4">
+                <v-switch class="bidirectional-switch" color="secondary"
+                          :label="tt('Account Balance Trends')"
+                          v-model="showAccountBalanceTrendsCharts"
+                          @click="showAccountBalanceTrendsCharts = !showAccountBalanceTrendsCharts">
+                    <template #prepend>
+                        <span>{{ tt('Transaction List') }}</span>
+                    </template>
+                </v-switch>
+            </v-card-text>
+
             <div class="d-flex align-center mb-4">
                 <div class="d-flex align-center text-body-1">
                     <span class="ml-2">{{ tt('Opening Balance') }}</span>
@@ -291,8 +293,6 @@ import {
     mdiTuneVertical,
     mdiDotsVertical,
     mdiCheck,
-    mdiChartBoxOutline,
-    mdiListBoxOutline,
     mdiChartBar,
     mdiChartAreasplineVariant,
     mdiCalendarTodayOutline,

src/views/mobile/accounts/ReconciliationStatementPage.vue

@@ -2,15 +2,39 @@
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
-            <f7-nav-title :title="tt('Reconciliation Statement')"></f7-nav-title>
+            <f7-nav-title>
+                <span style="color: var(--f7-text-color)" v-if="!finishQuery">{{ tt('Reconciliation Statement') }}</span>
+                <f7-link popover-open=".display-mode-popover-menu" v-if="finishQuery">
+                    <span style="color: var(--f7-text-color)">{{ tt('Reconciliation Statement') }}</span>
+                    <f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
+                </f7-link>
+            </f7-nav-title>
             <f7-nav-right>
-                <f7-link icon-f7="" v-if="!finishQuery"></f7-link>
                 <f7-link :class="{ 'disabled': !validQuery }" :text="tt('Next')" @click="reload(false)" v-if="!finishQuery"></f7-link>
-                <f7-link style="color: transparent" :text="tt('Next')" v-if="finishQuery"></f7-link>
                 <f7-link :class="{ 'disabled': loading }" icon-f7="ellipsis" v-if="finishQuery" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
+        <f7-popover class="display-mode-popover-menu"
+                    v-model:opened="showDisplayModePopover">
+            <f7-list dividers>
+                <f7-list-item :title="tt('Transaction List')"
+                              :class="{ 'list-item-selected': !showAccountBalanceTrendsCharts }"
+                              @click="showAccountBalanceTrendsCharts = false; showDisplayModePopover = false">
+                    <template #after>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!showAccountBalanceTrendsCharts"></f7-icon>
+                    </template>
+                </f7-list-item>
+                <f7-list-item :title="tt('Account Balance Trends')"
+                              :class="{ 'list-item-selected': showAccountBalanceTrendsCharts }"
+                              @click="showAccountBalanceTrendsCharts = true; showDisplayModePopover = false">
+                    <template #after>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="showAccountBalanceTrendsCharts"></f7-icon>
+                    </template>
+                </f7-list-item>
+            </f7-list>
+        </f7-popover>
+
         <f7-list form strong inset dividers class="margin-vertical" v-if="!finishQuery">
             <f7-list-item group-title>
                 <small>{{ tt('Date Range') }}</small>
@@ -298,8 +322,6 @@
             </f7-actions-group>
             <f7-actions-group>
                 <f7-actions-button :class="{ 'disabled': loading }" @click="reload(true)">{{ tt('Refresh') }}</f7-actions-button>
-                <f7-actions-button :class="{ 'disabled': loading }" @click="showAccountBalanceTrendsCharts = true" v-if="!showAccountBalanceTrendsCharts">{{ tt('Show Account Balance Trends') }}</f7-actions-button>
-                <f7-actions-button :class="{ 'disabled': loading }" @click="showAccountBalanceTrendsCharts = false" v-if="showAccountBalanceTrendsCharts">{{ tt('Show Transaction List') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
                 <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
@@ -407,6 +429,7 @@ const showAccountBalanceTrendsCharts = ref<boolean>(false);
 const chartDataDateAggregationType = ref<number | undefined>(undefined);
 const transactionToDelete = ref<TransactionReconciliationStatementResponseItem | null>(null);
 const newClosingBalance = ref<number>(0);
+const showDisplayModePopover = ref<boolean>(false);
 const showCustomDateRangeSheet = ref<boolean>(false);
 const showNewClosingBalanceSheet = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);