disable buttons in navigation bar during initial page load

This commit is contained in:
MaysWind
2026-01-17 20:45:51 +08:00
parent 9664bac47f
commit 543cc5f656
22 changed files with 55 additions and 52 deletions
+3 -3
View File
@@ -1,15 +1,15 @@
<template>
<f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons" v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
<f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }" v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block class="no-margin-top margin-bottom">
<f7-block :class="{ 'no-margin-top margin-bottom': true, 'disabled': loading }">
<f7-segmented strong round :class="{ 'readonly': pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }">
<f7-button round :text="tt('Expense')" :active="transaction.type === TransactionType.Expense"
:disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Expense"
+7 -7
View File
@@ -8,14 +8,14 @@
@page:afterin="onPageAfterIn"
@infinite="loadMore(true)">
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title>
<f7-link popover-open=".chart-data-type-popover-menu">
<f7-link popover-open=".chart-data-type-popover-menu" :class="{ 'disabled': loading }">
<span style="color: var(--f7-text-color)">{{ displayPageTypeName }}</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 class="navbar-compact-icons">
<f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
<f7-link icon-f7="search" @click="toggleSearchbar"></f7-link>
<f7-link icon-f7="plus" :class="{ 'disabled': !canAddTransaction }" @click="add"></f7-link>
</f7-nav-right>
@@ -52,19 +52,19 @@
<f7-link :class="{ 'disabled': loading || query.dateType === DateRange.All.type }" @click="shiftDateRange(query.minTime, query.maxTime, -1)">
<f7-icon class="icon-with-direction" f7="arrow_left_square"></f7-icon>
</f7-link>
<f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading }" popover-open=".date-popover-menu">
<f7-link popover-open=".date-popover-menu" :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading }">
<span :class="{ 'tabbar-item-changed': query.dateType !== DateRange.All.type }">{{ queryDateRangeName }}</span>
</f7-link>
<f7-link :class="{ 'disabled': loading || query.dateType === DateRange.All.type }" @click="shiftDateRange(query.minTime, query.maxTime, 1)">
<f7-icon class="icon-with-direction" f7="arrow_right_square"></f7-icon>
</f7-link>
<f7-link class="tabbar-text-with-ellipsis" popover-open=".category-popover-menu" :class="{ 'disabled': query.type === 1 }">
<f7-link popover-open=".category-popover-menu" :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading || query.type === 1 }">
<span :class="{ 'tabbar-item-changed': query.categoryIds }">{{ queryCategoryName }}</span>
</f7-link>
<f7-link class="tabbar-text-with-ellipsis" popover-open=".account-popover-menu">
<f7-link popover-open=".account-popover-menu" :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading }">
<span :class="{ 'tabbar-item-changed': query.accountIds }">{{ queryAccountName }}</span>
</f7-link>
<f7-link popover-open=".more-popover-menu">
<f7-link popover-open=".more-popover-menu" :class="{ 'disabled': loading }">
<f7-icon f7="ellipsis_vertical" :class="{ 'tabbar-item-changed': query.type > 0 || query.amountFilter || query.tagFilter }"></f7-icon>
</f7-link>
</f7-toolbar>