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

modify font color style in transaction view page

Browse Source
This commit is contained in:
MaysWind
2023-04-03 00:28:02 +08:00
parent c069faa6f4
commit 1287c729f2
2 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+10
View File
@@ -130,6 +130,16 @@ body {
font-size: 10px; font-size: 10px;
} }
.readonly {
pointer-events: none !important;
}
.segmented.readonly .button:not(.button-active) > span,
.list.readonly .item-content .item-title.item-label,
.list.readonly .item-content .item-title > .item-header {
opacity: 0.55 !important;
}
/** Replacing the default style of framework7 **/ /** Replacing the default style of framework7 **/
:root { :root {
--f7-theme-color: #c67e48; --f7-theme-color: #c67e48;
src/views/mobile/transactions/Edit.vue
+13 -12
View File
@@ -9,7 +9,7 @@
</f7-nav-right> </f7-nav-right>
<f7-subnavbar> <f7-subnavbar>
<f7-segmented strong :class="{ 'disabled': mode !== 'add' }"> <f7-segmented strong :class="{ 'readonly': mode !== 'add' }">
<f7-button :text="$t('Expense')" :active="transaction.type === $constants.transaction.allTransactionTypes.Expense" @click="transaction.type = $constants.transaction.allTransactionTypes.Expense"></f7-button> <f7-button :text="$t('Expense')" :active="transaction.type === $constants.transaction.allTransactionTypes.Expense" @click="transaction.type = $constants.transaction.allTransactionTypes.Expense"></f7-button>
<f7-button :text="$t('Income')" :active="transaction.type === $constants.transaction.allTransactionTypes.Income" @click="transaction.type = $constants.transaction.allTransactionTypes.Income"></f7-button> <f7-button :text="$t('Income')" :active="transaction.type === $constants.transaction.allTransactionTypes.Income" @click="transaction.type = $constants.transaction.allTransactionTypes.Income"></f7-button>
<f7-button :text="$t('Transfer')" :active="transaction.type === $constants.transaction.allTransactionTypes.Transfer" @click="transaction.type = $constants.transaction.allTransactionTypes.Transfer"></f7-button> <f7-button :text="$t('Transfer')" :active="transaction.type === $constants.transaction.allTransactionTypes.Transfer" @click="transaction.type = $constants.transaction.allTransactionTypes.Transfer"></f7-button>
@@ -25,11 +25,11 @@
style="font-size: 40px;" style="font-size: 40px;"
header="Expense Amount" title="0.00"> header="Expense Amount" title="0.00">
</f7-list-item> </f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Category" title="Category Names" link="#"></f7-list-item> <f7-list-item :no-chevron="mode === 'view'" class="list-item-with-header-and-title list-item-title-hide-overflow" header="Category" title="Category Names" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title" header="Account" title="Account Name" link="#"></f7-list-item> <f7-list-item :no-chevron="mode === 'view'" class="list-item-with-header-and-title" header="Account" title="Account Name" link="#"></f7-list-item>
<f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input> <f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input>
<f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Transaction Time Zone" title="(UTC XX:XX) System Default" link="#"></f7-list-item> <f7-list-item :no-chevron="mode === 'view'" class="list-item-with-header-and-title list-item-title-hide-overflow" header="Transaction Time Zone" title="(UTC XX:XX) System Default" link="#"></f7-list-item>
<f7-list-item header="Tags" link="#"> <f7-list-item :no-chevron="mode === 'view'" header="Tags" link="#">
<f7-block class="margin-top-half no-padding" slot="footer"> <f7-block class="margin-top-half no-padding" slot="footer">
<f7-chip class="transaction-edit-tag" text="None"></f7-chip> <f7-chip class="transaction-edit-tag" text="None"></f7-chip>
</f7-block> </f7-block>
@@ -41,7 +41,7 @@
<f7-card v-else-if="!loading"> <f7-card v-else-if="!loading">
<f7-card-content class="no-safe-areas" :padding="false"> <f7-card-content class="no-safe-areas" :padding="false">
<f7-list form :class="{ 'disabled': mode === 'view' }"> <f7-list form :class="{ 'readonly': mode === 'view' }">
<f7-list-item <f7-list-item
class="transaction-edit-amount" class="transaction-edit-amount"
link="#" no-chevron link="#" no-chevron
@@ -77,7 +77,7 @@
<f7-list-item <f7-list-item
class="list-item-with-header-and-title list-item-title-hide-overflow" class="list-item-with-header-and-title list-item-title-hide-overflow"
key="expenseCategorySelection" key="expenseCategorySelection"
link="#" link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !hasAvailableExpenseCategories }" :class="{ 'disabled': !hasAvailableExpenseCategories }"
:header="$t('Category')" :header="$t('Category')"
@click="showCategorySheet = true" @click="showCategorySheet = true"
@@ -102,7 +102,7 @@
<f7-list-item <f7-list-item
class="list-item-with-header-and-title list-item-title-hide-overflow" class="list-item-with-header-and-title list-item-title-hide-overflow"
key="incomeCategorySelection" key="incomeCategorySelection"
link="#" link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !hasAvailableIncomeCategories }" :class="{ 'disabled': !hasAvailableIncomeCategories }"
:header="$t('Category')" :header="$t('Category')"
@click="showCategorySheet = true" @click="showCategorySheet = true"
@@ -127,7 +127,7 @@
<f7-list-item <f7-list-item
class="list-item-with-header-and-title list-item-title-hide-overflow" class="list-item-with-header-and-title list-item-title-hide-overflow"
key="transferCategorySelection" key="transferCategorySelection"
link="#" link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !hasAvailableTransferCategories }" :class="{ 'disabled': !hasAvailableTransferCategories }"
:header="$t('Category')" :header="$t('Category')"
@click="showCategorySheet = true" @click="showCategorySheet = true"
@@ -151,7 +151,7 @@
<f7-list-item <f7-list-item
class="list-item-with-header-and-title" class="list-item-with-header-and-title"
link="#" link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !allVisibleAccounts.length }" :class="{ 'disabled': !allVisibleAccounts.length }"
:header="$t(sourceAccountName)" :header="$t(sourceAccountName)"
:title="transaction.sourceAccountId | optionName(allAccounts, 'id', 'name')" :title="transaction.sourceAccountId | optionName(allAccounts, 'id', 'name')"
@@ -173,7 +173,7 @@
<f7-list-item <f7-list-item
class="list-item-with-header-and-title" class="list-item-with-header-and-title"
link="#" link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !allVisibleAccounts.length }" :class="{ 'disabled': !allVisibleAccounts.length }"
:header="$t('Destination Account')" :header="$t('Destination Account')"
:title="transaction.destinationAccountId | optionName(allAccounts, 'id', 'name')" :title="transaction.destinationAccountId | optionName(allAccounts, 'id', 'name')"
@@ -215,6 +215,7 @@
</f7-list-input> </f7-list-input>
<f7-list-item <f7-list-item
:no-chevron="mode === 'view'"
class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after" class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
:header="$t('Transaction Time Zone')" :header="$t('Transaction Time Zone')"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Transaction Time Zone'), searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"> smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Transaction Time Zone'), searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
@@ -230,7 +231,7 @@
</f7-list-item> </f7-list-item>
<f7-list-item <f7-list-item
link="#" link="#" :no-chevron="mode === 'view'"
:header="$t('Tags')" :header="$t('Tags')"
@click="showTransactionTagSheet = true" @click="showTransactionTagSheet = true"
> >