mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 16:07:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

support setting app font size

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/AboutPage.vue
+1 -1
View File
@@ -79,6 +79,6 @@ export default {
}
.license-popup .subnavbar-title {
--f7-subnavbar-title-font-size: 30px;
--f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
}
</style>
src/views/mobile/ExchangeRatesPage.vue
+9 -12
View File
@@ -29,7 +29,7 @@
<f7-list-item
class="currency-base-amount"
link="#" no-chevron
:style="{ fontSize: baseAmountFontSize + 'px' }"
:class="baseAmountFontSizeClass"
:header="$t('Base Amount')"
:title="displayBaseAmount"
@click="showBaseAmountSheet = true"
@@ -145,8 +145,14 @@ export default {
displayBaseAmount() {
return this.$locale.getDisplayCurrency(this.baseAmount);
},
baseAmountFontSize() {
return this.getFontSizeByAmount(this.baseAmount);
baseAmountFontSizeClass() {
if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
return 'ebk-small-amount';
} else if (this.baseAmount >= 1000000 || this.baseAmount <= -1000000) {
return 'ebk-normal-amount';
} else {
return 'ebk-large-amount';
}
},
allowedMinAmount() {
return transactionConstants.minAmount;
@@ -247,15 +253,6 @@ export default {
this.baseCurrency = currency;
this.baseAmount = stringCurrencyToNumeric(amount.toString());
},
getFontSizeByAmount(amount) {
if (amount >= 100000000 || amount <= -100000000) {
return 32;
} else if (amount >= 1000000 || amount <= -1000000) {
return 36;
} else {
return 40;
}
}
}
}
src/views/mobile/HomePage.vue
+7 -7
View File
@@ -22,7 +22,7 @@
<span class="month-expense" v-if="loading">0.00 USD</span>
<span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span>
<f7-link class="margin-left-half" @click="toggleShowAmountInHomePage()">
<f7-icon :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
<f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
</f7-link>
</p>
<p class="no-margin">
@@ -432,7 +432,7 @@ export default {
.overview-transaction-list .overview-transaction-footer {
padding-top: 6px;
font-size: 13px;
font-size: var(--ebk-large-footer-font-size);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -453,13 +453,13 @@ export default {
}
.tabbar.main-tabbar .link i + span.tabbar-label {
margin-top: 2px;
margin-top: var(--ebk-icon-text-margin);
}
.tabbar.main-tabbar .link i.ebk-tarbar-big-icon {
font-size: 42px;
width: 42px;
height: 42px;
line-height: 42px;
font-size: var(--ebk-big-icon-button-size);
width: var(--ebk-big-icon-button-size);
height: var(--ebk-big-icon-button-size);
line-height: var(--ebk-big-icon-button-size);
}
</style>
src/views/mobile/LoginPage.vue
+1 -1
View File
@@ -71,7 +71,7 @@
>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px"><b>{{ $t('Two-Factor Authentication') }}</b></div>
<div class="ebk-sheet-title"><b>{{ $t('Two-Factor Authentication') }}</b></div>
</div>
<div class="padding-horizontal padding-bottom">
<f7-list strong class="no-margin">
src/views/mobile/SettingsPage.vue
+23
View File
@@ -26,6 +26,17 @@
</select>
</f7-list-item>
<f7-list-item
:key="currentLocale + '_fontSize'"
:title="$t('Font Size')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Font Size'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
<select v-model="fontSize">
<option value="default">{{ $t('Default') }}</option>
<option value="large">{{ $t('Large') }}</option>
<option value="extraLarge">{{ $t('Extra Large') }}</option>
</select>
</f7-list-item>
<f7-list-item
:key="currentLocale + '_timezone'"
:title="$t('Timezone')"
@@ -102,6 +113,7 @@ import { useUserStore } from '@/stores/user.js';
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
import currencyConstants from '@/consts/currency.js';
import { setAppFontSize } from '@/lib/ui.mobile.js';
export default {
props: [
@@ -135,6 +147,17 @@ export default {
}
}
},
fontSize: {
get: function () {
return this.$settings.getFontSize();
},
set: function (value) {
if (value !== this.$settings.getFontSize()) {
this.$settings.setFontSize(value);
setAppFontSize(value);
}
}
},
currentTimezone: {
get: function () {
return this.$locale.getTimezone();
src/views/mobile/accounts/ListPage.vue
+3 -3
View File
@@ -20,7 +20,7 @@
<span class="net-assets" v-if="loading">0.00 USD</span>
<span class="net-assets" v-else-if="!loading">{{ netAssets }}</span>
<f7-link class="margin-left-half" @click="toggleShowAccountBalance()">
<f7-icon :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
<f7-icon class="ebk-hide-icon" :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
</f7-link>
</p>
<p class="no-margin">
@@ -463,8 +463,8 @@ export default {
}
.account-list {
--f7-list-group-title-height: 36px;
--f7-list-item-footer-font-size: 13px;
--f7-list-group-title-height: var(--ebk-account-list-group-title-height);
--f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
}
.account-list .item-footer {
src/views/mobile/categories/ListPage.vue
+1 -1
View File
@@ -394,7 +394,7 @@ export default {
<style>
.category-list {
--f7-list-item-footer-font-size: 13px;
--f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
}
.category-list .item-footer {
src/views/mobile/transactions/EditPage.vue
+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) {
src/views/mobile/transactions/ListPage.vue
+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;
src/views/mobile/users/DataManagementPage.vue
+1 -1
View File
@@ -30,7 +30,7 @@
<div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px"><b>{{ $t('Are you sure you want to export all data to csv file?') }}</b></div>
<div class="ebk-sheet-title"><b>{{ $t('Are you sure you want to export all data to csv file?') }}</b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="no-margin-top margin-bottom-half">{{ $t('It may take a long time, please wait for a few minutes.') }}</p>