Skip to content

Commit

Permalink
modify font color style in transaction view page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayswind
mayswind committed Apr 2, 2023
1 parent c069faa commit 1287c72
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 12 deletions.
10 changes: 10 additions & 0 deletions src/Mobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,16 @@ body {
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 **/
:root {
--f7-theme-color: #c67e48;
Expand Down
25 changes: 13 additions & 12 deletions src/views/mobile/transactions/Edit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</f7-nav-right>

<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('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>
Expand All @@ -25,11 +25,11 @@
style="font-size: 40px;"
header="Expense Amount" title="0.00">
</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 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 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" 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-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 header="Tags" link="#">
<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 :no-chevron="mode === 'view'" header="Tags" link="#">
<f7-block class="margin-top-half no-padding" slot="footer">
<f7-chip class="transaction-edit-tag" text="None"></f7-chip>
</f7-block>
Expand All @@ -41,7 +41,7 @@

<f7-card v-else-if="!loading">
<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
class="transaction-edit-amount"
link="#" no-chevron
Expand Down Expand Up @@ -77,7 +77,7 @@
<f7-list-item
class="list-item-with-header-and-title list-item-title-hide-overflow"
key="expenseCategorySelection"
link="#"
link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !hasAvailableExpenseCategories }"
:header="$t('Category')"
@click="showCategorySheet = true"
Expand All @@ -102,7 +102,7 @@
<f7-list-item
class="list-item-with-header-and-title list-item-title-hide-overflow"
key="incomeCategorySelection"
link="#"
link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !hasAvailableIncomeCategories }"
:header="$t('Category')"
@click="showCategorySheet = true"
Expand All @@ -127,7 +127,7 @@
<f7-list-item
class="list-item-with-header-and-title list-item-title-hide-overflow"
key="transferCategorySelection"
link="#"
link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !hasAvailableTransferCategories }"
:header="$t('Category')"
@click="showCategorySheet = true"
Expand All @@ -151,7 +151,7 @@

<f7-list-item
class="list-item-with-header-and-title"
link="#"
link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !allVisibleAccounts.length }"
:header="$t(sourceAccountName)"
:title="transaction.sourceAccountId | optionName(allAccounts, 'id', 'name')"
Expand All @@ -173,7 +173,7 @@

<f7-list-item
class="list-item-with-header-and-title"
link="#"
link="#" :no-chevron="mode === 'view'"
:class="{ 'disabled': !allVisibleAccounts.length }"
:header="$t('Destination Account')"
:title="transaction.destinationAccountId | optionName(allAccounts, 'id', 'name')"
Expand Down Expand Up @@ -215,6 +215,7 @@
</f7-list-input>

<f7-list-item
:no-chevron="mode === 'view'"
class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
: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 }">
Expand All @@ -230,7 +231,7 @@
</f7-list-item>

<f7-list-item
link="#"
link="#" :no-chevron="mode === 'view'"
:header="$t('Tags')"
@click="showTransactionTagSheet = true"
>
Expand Down

0 comments on commit 1287c72

Please sign in to comment.