modify style

This commit is contained in:
MaysWind
2023-08-21 23:25:15 +08:00
parent 9db9c382ab
commit e7f9eb6e06
2 changed files with 21 additions and 10 deletions
@@ -27,15 +27,18 @@
<div class="mb-4"> <div class="mb-4">
<v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': mode !== 'add' }" <v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': mode !== 'add' }"
:disabled="loading || submitting" v-model="transaction.type"> :disabled="loading || submitting" v-model="transaction.type">
<v-tab :value="allTransactionTypes.Expense"> <v-tab :value="allTransactionTypes.Expense" v-if="transaction.type !== allTransactionTypes.ModifyBalance">
<span>{{ $t('Expense') }}</span> <span>{{ $t('Expense') }}</span>
</v-tab> </v-tab>
<v-tab :value="allTransactionTypes.Income"> <v-tab :value="allTransactionTypes.Income" v-if="transaction.type !== allTransactionTypes.ModifyBalance">
<span>{{ $t('Income') }}</span> <span>{{ $t('Income') }}</span>
</v-tab> </v-tab>
<v-tab :value="allTransactionTypes.Transfer"> <v-tab :value="allTransactionTypes.Transfer" v-if="transaction.type !== allTransactionTypes.ModifyBalance">
<span>{{ $t('Transfer') }}</span> <span>{{ $t('Transfer') }}</span>
</v-tab> </v-tab>
<v-tab :value="allTransactionTypes.ModifyBalance" v-if="transaction.type === allTransactionTypes.ModifyBalance">
<span>{{ $t('Modify Balance') }}</span>
</v-tab>
</v-tabs> </v-tabs>
<v-divider class="my-2"/> <v-divider class="my-2"/>
<v-tabs direction="vertical" :disabled="loading || submitting" v-model="activeTab"> <v-tabs direction="vertical" :disabled="loading || submitting" v-model="activeTab">
+15 -7
View File
@@ -10,9 +10,17 @@
<f7-subnavbar> <f7-subnavbar>
<f7-segmented strong :class="{ 'readonly': mode !== 'add' }"> <f7-segmented strong :class="{ 'readonly': mode !== 'add' }">
<f7-button :text="$t('Expense')" :active="transaction.type === allTransactionTypes.Expense" @click="transaction.type = allTransactionTypes.Expense"></f7-button> <f7-button :text="$t('Expense')" :active="transaction.type === allTransactionTypes.Expense"
<f7-button :text="$t('Income')" :active="transaction.type === allTransactionTypes.Income" @click="transaction.type = allTransactionTypes.Income"></f7-button> v-if="transaction.type !== allTransactionTypes.ModifyBalance"
<f7-button :text="$t('Transfer')" :active="transaction.type === allTransactionTypes.Transfer" @click="transaction.type = allTransactionTypes.Transfer"></f7-button> @click="transaction.type = allTransactionTypes.Expense"></f7-button>
<f7-button :text="$t('Income')" :active="transaction.type === allTransactionTypes.Income"
v-if="transaction.type !== allTransactionTypes.ModifyBalance"
@click="transaction.type = allTransactionTypes.Income"></f7-button>
<f7-button :text="$t('Transfer')" :active="transaction.type === allTransactionTypes.Transfer"
v-if="transaction.type !== allTransactionTypes.ModifyBalance"
@click="transaction.type = allTransactionTypes.Transfer"></f7-button>
<f7-button :text="$t('Modify Balance')" :active="transaction.type === allTransactionTypes.ModifyBalance"
v-if="transaction.type === allTransactionTypes.ModifyBalance"></f7-button>
</f7-segmented> </f7-segmented>
</f7-subnavbar> </f7-subnavbar>
</f7-navbar> </f7-navbar>
@@ -55,7 +63,7 @@
</f7-list-item> </f7-list-item>
<f7-list-item <f7-list-item
class="transaction-edit-amount" class="transaction-edit-amount text-color-primary"
link="#" no-chevron link="#" no-chevron
:class="destinationAmountClass" :class="destinationAmountClass"
:header="$t('Transfer In Amount')" :header="$t('Transfer In Amount')"
@@ -519,8 +527,9 @@ export default {
sourceAmountClass() { sourceAmountClass() {
const classes = { const classes = {
'readonly': this.mode === 'view', 'readonly': this.mode === 'view',
'color-teal': this.transaction.type === this.allTransactionTypes.Expense, 'text-color-teal': this.transaction.type === this.allTransactionTypes.Expense,
'color-red': this.transaction.type === this.allTransactionTypes.Income, 'text-color-red': this.transaction.type === this.allTransactionTypes.Income,
'text-color-primary': this.transaction.type === this.allTransactionTypes.Transfer
}; };
classes[this.getFontClassByAmount(this.transaction.sourceAmount)] = true; classes[this.getFontClassByAmount(this.transaction.sourceAmount)] = true;
@@ -802,7 +811,6 @@ export default {
.transaction-edit-amount { .transaction-edit-amount {
line-height: 53px; line-height: 53px;
color: var(--f7-theme-color);
} }
.transaction-edit-amount .item-title { .transaction-edit-amount .item-title {