support setting app font size

This commit is contained in:
MaysWind
2023-06-12 00:18:58 +08:00
parent 702c095544
commit dfb885f38d
23 changed files with 330 additions and 70 deletions
+24 -12
View File
@@ -43,8 +43,7 @@
<f7-list-item
class="transaction-edit-amount"
link="#" no-chevron
:class="{ 'readonly': mode === 'view', 'color-teal': transaction.type === allTransactionTypes.Expense, 'color-red': transaction.type === allTransactionTypes.Income }"
:style="{ fontSize: sourceAmountFontSize + 'px' }"
:class="sourceAmountClass"
:header="$t(sourceAmountName)"
:title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)"
@click="showSourceAmountSheet = true"
@@ -59,8 +58,7 @@
<f7-list-item
class="transaction-edit-amount"
link="#" no-chevron
:class="{ 'readonly': mode === 'view' }"
:style="{ fontSize: destinationAmountFontSize + 'px' }"
:class="destinationAmountClass"
:header="$t('Transfer In Amount')"
:title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)"
@click="showDestinationAmountSheet = true"
@@ -608,11 +606,25 @@ export default {
transactionDisplayTimezoneName() {
return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
},
sourceAmountFontSize() {
return this.getFontSizeByAmount(this.transaction.sourceAmount);
sourceAmountClass() {
const classes = {
'readonly': this.mode === 'view',
'color-teal': this.transaction.type === this.allTransactionTypes.Expense,
'color-red': this.transaction.type === this.allTransactionTypes.Income,
};
classes[this.getFontClassByAmount(this.transaction.sourceAmount)] = true;
return classes;
},
destinationAmountFontSize() {
return this.getFontSizeByAmount(this.transaction.destinationAmount);
destinationAmountClass() {
const classes = {
'readonly': this.mode === 'view'
};
classes[this.getFontClassByAmount(this.transaction.destinationAmount)] = true;
return classes;
},
geoLocationStatusInfo() {
if (this.geoLocationStatus === 'success') {
@@ -1006,13 +1018,13 @@ export default {
}
}
},
getFontSizeByAmount(amount) {
getFontClassByAmount(amount) {
if (amount >= 100000000 || amount <= -100000000) {
return 32;
return 'ebk-small-amount';
} else if (amount >= 1000000 || amount <= -1000000) {
return 36;
return 'ebk-normal-amount';
} else {
return 40;
return 'ebk-large-amount';
}
},
getDisplayAmount(amount, hideAmount) {
+4 -4
View File
@@ -906,24 +906,24 @@ export default {
}
.list.transaction-info-list li.transaction-info .transaction-date {
width: 25px;
width: var(--ebk-transaction-date-width);
margin-right: 6px;
}
.list.transaction-info-list li.transaction-info .transaction-day {
opacity: 0.6;
font-size: 16px;
font-size: var(--ebk-transaction-day-font-size);
font-weight: bold;
text-align: left;
}
.list.transaction-info-list li.transaction-info .transaction-day-of-week {
opacity: 0.6;
font-size: 12px;
font-size: var(--ebk-transaction-day-of-week-font-size);
}
.list.transaction-info-list li.transaction-info .transaction-comment {
font-size: 13px;
font-size: var(--ebk-large-footer-font-size);
line-height: 20px;
padding-top: 2px;
padding-bottom: 2px;