mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-19 01:04:25 +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/MobileApp.vue
+200 -11
View File
@@ -13,7 +13,7 @@ import { mapStores } from 'pinia';
import { useTokensStore } from '@/stores/token.js'; import { useTokensStore } from '@/stores/token.js';
import { useExchangeRatesStore } from '@/stores/exchangeRates.js'; import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
import { isModalShowing } from '@/lib/ui.mobile.js'; import { isModalShowing, setAppFontSize } from '@/lib/ui.mobile.js';
export default { export default {
data() { data() {
@@ -110,6 +110,8 @@ export default {
} }
}, },
mounted() { mounted() {
setAppFontSize(this.$settings.getFontSize());
f7ready((f7) => { f7ready((f7) => {
this.isDarkMode = f7.darkMode; this.isDarkMode = f7.darkMode;
this.setThemeColorMeta(f7.darkMode); this.setThemeColorMeta(f7.darkMode);
@@ -215,7 +217,7 @@ body {
} }
.smaller { .smaller {
font-size: 10px; font-size: var(--ebk-smaller-font-size);
} }
.readonly { .readonly {
@@ -258,13 +260,204 @@ body {
} }
i.icon.la, i.icon.las, i.icon.lab { i.icon.la, i.icon.las, i.icon.lab {
font-size: 28px; font-size: var(--ebk-icon-font-size);
}
.ios .searchbar-disable-button {
font-size: var(--f7-searchbar-disable-button-font-size);
} }
.chip.chip-placeholder { .chip.chip-placeholder {
border: 0; border: 0;
} }
/** multiple font size **/
:root {
--ebk-icon-font-size: 28px;
--ebk-icon-text-margin: 2px;
--ebk-hide-icon-font-size: 18px;
--ebk-big-icon-button-size: 42px;
--ebk-right-bottom-icon-font-size: 13px;
--ebk-list-item-checked-icon-font-size: 20px;
--ebk-smaller-font-size: 10px;
--ebk-large-footer-font-size: 13px;
--ebk-sheet-title-font-size: 18px;
--ebk-numpad-value-height: 50px;
--ebk-numpad-value-small-font-size: 20px;
--ebk-numpad-value-normal-font-size: 22px;
--ebk-numpad-value-large-font-size: 24px;
--ebk-numpad-normal-button-font-size: 28px;
--ebk-numpad-confirm-button-font-size: 20px;
--ebk-amount-small-font-size: 32px;
--ebk-amount-normal-font-size: 36px;
--ebk-amount-large-font-size: 40px;
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 18px;
--ebk-pie-chart-toolbox-text-font-size: 16px;
--ebk-account-list-group-title-height: 36px;
--ebk-transaction-date-width: 25px;
--ebk-transaction-day-font-size: 16px;
--ebk-transaction-day-of-week-font-size: 12px;
--ebk-license-popup-title-font-size: 30px;
}
:root.font-large {
font-size: 17px;
--f7-font-size: 17px;
--f7-navbar-font-size: 20px;
--f7-searchbar-input-font-size: 20px;
--f7-searchbar-disable-button-font-size: 20px;
--f7-toolbar-font-size: 20px;
--f7-tabbar-icon-size: 30px;
--f7-toolbar-height: 60px;
--f7-tabbar-icons-height: 60px;
--f7-tabbar-label-font-size: 17px;
--f7-label-font-size: 16px;
--f7-input-font-size: 20px;
--f7-button-font-size: 18px;
--f7-button-small-font-size: 15px;
--f7-button-large-font-size: 20px;
--f7-chip-font-size: 16px;
--f7-block-title-font-size: 20px;
--f7-block-font-size: 20px;
--f7-block-footer-font-size: 15px;
--f7-card-header-font-size: 20px;
--f7-list-group-title-font-size: 22px;
--f7-list-item-header-font-size: 16px;
--f7-list-item-title-font-size: 20px;
--f7-list-item-text-font-size: 17px;
--f7-list-font-size: 20px;
--f7-list-item-after-font-size: 20px;
--f7-list-item-footer-font-size: 15px;
--f7-list-button-font-size: 20px;
--f7-treeview-label-font-size: 20px;
--f7-swipeout-button-font-size: 20px;
--f7-dialog-title-font-size: 20px;
--f7-dialog-font-size: 17px;
--f7-dialog-button-font-size: 20px;
--f7-actions-button-font-size: 22px;
--ebk-icon-font-size: 32px;
--ebk-icon-text-margin: 4px;
--ebk-hide-icon-font-size: 24px;
--ebk-big-icon-button-size: 52px;
--ebk-right-bottom-icon-font-size: 15px;
--ebk-list-item-checked-icon-font-size: 24px;
--ebk-smaller-font-size: 14px;
--ebk-large-footer-font-size: 16px;
--ebk-sheet-title-font-size: 22px;
--ebk-numpad-value-height: 60px;
--ebk-numpad-value-small-font-size: 22px;
--ebk-numpad-value-normal-font-size: 26px;
--ebk-numpad-value-large-font-size: 30px;
--ebk-numpad-normal-button-font-size: 32px;
--ebk-numpad-confirm-button-font-size: 22px;
--ebk-amount-small-font-size: 32px;
--ebk-amount-normal-font-size: 36px;
--ebk-amount-large-font-size: 40px;
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 22px;
--ebk-pie-chart-toolbox-text-font-size: 20px;
--ebk-account-list-group-title-height: 40px;
--ebk-transaction-date-width: 32px;
--ebk-transaction-day-font-size: 20px;
--ebk-transaction-day-of-week-font-size: 15px;
--ebk-license-popup-title-font-size: 36px;
}
:root.font-extra-large {
font-size: 21px;
--f7-font-size: 21px;
--f7-navbar-font-size: 24px;
--f7-searchbar-input-font-size: 24px;
--f7-searchbar-disable-button-font-size: 24px;
--f7-toolbar-font-size: 24px;
--f7-tabbar-icon-size: 30px;
--f7-toolbar-height: 66px;
--f7-tabbar-icons-height: 66px;
--f7-tabbar-label-font-size: 21px;
--f7-label-font-size: 20px;
--f7-label-height: 22px;
--f7-input-font-size: 24px;
--f7-input-height: 60px;
--f7-button-font-size: 22px;
--f7-button-small-font-size: 19px;
--f7-button-large-font-size: 24px;
--f7-button-height: 32px;
--f7-chip-font-size: 20px;
--f7-block-title-font-size: 24px;
--f7-block-title-line-height: 26px;
--f7-block-font-size: 24px;
--f7-block-footer-font-size: 19px;
--f7-card-header-font-size: 24px;
--f7-list-group-title-font-size: 26px;
--f7-list-group-title-height: 48px;
--f7-list-item-header-font-size: 20px;
--f7-list-item-title-font-size: 24px;
--f7-list-item-text-font-size: 21px;
--f7-list-font-size: 24px;
--f7-list-item-after-font-size: 24px;
--f7-list-item-footer-font-size: 19px;
--f7-list-button-font-size: 24px;
--f7-list-item-min-height: 54px;
--f7-treeview-label-font-size: 24px;
--f7-swipeout-button-font-size: 24px;
--f7-dialog-title-font-size: 24px;
--f7-dialog-font-size: 21px;
--f7-dialog-button-font-size: 24px;
--f7-actions-button-font-size: 26px;
--ebk-icon-font-size: 36px;
--ebk-icon-text-margin: 4px;
--ebk-hide-icon-font-size: 28px;
--ebk-big-icon-button-size: 58px;
--ebk-right-bottom-icon-font-size: 19px;
--ebk-list-item-checked-icon-font-size: 28px;
--ebk-smaller-font-size: 18px;
--ebk-large-footer-font-size: 20px;
--ebk-sheet-title-font-size: 26px;
--ebk-numpad-value-height: 60px;
--ebk-numpad-value-small-font-size: 26px;
--ebk-numpad-value-normal-font-size: 26px;
--ebk-numpad-value-large-font-size: 30px;
--ebk-numpad-normal-button-font-size: 32px;
--ebk-numpad-confirm-button-font-size: 26px;
--ebk-amount-small-font-size: 34px;
--ebk-amount-normal-font-size: 40px;
--ebk-amount-large-font-size: 44px;
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 26px;
--ebk-pie-chart-toolbox-text-font-size: 24px;
--ebk-account-list-group-title-height: 44px;
--ebk-transaction-date-width: 40px;
--ebk-transaction-day-font-size: 24px;
--ebk-transaction-day-of-week-font-size: 19px;
--ebk-license-popup-title-font-size: 40px;
}
/** custom class **/
.ebk-small-amount {
--f7-list-item-title-font-size: var(--ebk-amount-small-font-size) !important;
}
.ebk-normal-amount {
--f7-list-item-title-font-size: var(--ebk-amount-normal-font-size) !important;
}
.ebk-large-amount {
--f7-list-item-title-font-size: var(--ebk-amount-large-font-size) !important;
}
.ebk-list-item-error-info div.item-footer {
color: var(--f7-input-error-text-color)
}
.ebk-sheet-title {
font-size: var(--ebk-sheet-title-font-size);
}
.ebk-hide-icon {
font-size: var(--ebk-hide-icon-font-size);
}
/** Replacing the default style of @vuepic/vue-datepicker **/ /** Replacing the default style of @vuepic/vue-datepicker **/
.dp__theme_light { .dp__theme_light {
--dp-primary-color: #c67e48; --dp-primary-color: #c67e48;
@@ -426,7 +619,7 @@ i.icon.la, i.icon.las, i.icon.lab {
} }
.list .item-content .list-item-checked-icon { .list .item-content .list-item-checked-icon {
font-size: 20px; font-size: var(--ebk-list-item-checked-icon-font-size);
color: var(--f7-radio-active-color, var(--f7-theme-color)); color: var(--f7-radio-active-color, var(--f7-theme-color));
margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin)); margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
} }
@@ -439,10 +632,6 @@ i.icon.la, i.icon.las, i.icon.lab {
margin: 0; margin: 0;
} }
.ebk-list-item-error-info div.item-footer {
color: var(--f7-input-error-text-color)
}
.skeleton-text .list-item-toggle .item-after { .skeleton-text .list-item-toggle .item-after {
height: var(--f7-toggle-height); height: var(--f7-toggle-height);
} }
@@ -472,9 +661,9 @@ i.icon.la, i.icon.las, i.icon.lab {
} }
.badge.right-bottom-icon > .icon { .badge.right-bottom-icon > .icon {
font-size: 13px; font-size: var(--ebk-right-bottom-icon-font-size);
width: 13px; width: var(--ebk-right-bottom-icon-font-size);
height: 13px; height: var(--ebk-right-bottom-icon-font-size);
} }
/** Swipe handler **/ /** Swipe handler **/
src/components/mobile/DateRangeSelectionSheet.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="swipe-handler" style="z-index: 10"></div> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content> <f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center"> <div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div> <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
</div> </div>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<p class="no-margin-top" v-if="hint">{{ hint }}</p> <p class="no-margin-top" v-if="hint">{{ hint }}</p>
src/components/mobile/InformationSheet.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="swipe-handler" style="z-index: 10"></div> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top"> <f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center"> <div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div> <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
</div> </div>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<p class="no-margin-top margin-bottom-half" v-if="hint"> <p class="no-margin-top margin-bottom-half" v-if="hint">
src/components/mobile/MapSheet.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</f7-page-content> </f7-page-content>
<f7-page-content class="no-margin-top no-padding-top" v-else-if="!knownMapProvider"> <f7-page-content class="no-margin-top no-padding-top" v-else-if="!knownMapProvider">
<div class="display-flex padding justify-content-space-between align-items-center"> <div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px"><b>{{ $t('Unsupported Map Provider') }}</b></div> <div class="ebk-sheet-title"><b>{{ $t('Unsupported Map Provider') }}</b></div>
</div> </div>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<p class="no-margin">{{ $t('Please refresh the page and try again. If the error is still displayed, make sure that server map settings are set correctly.') }}</p> <p class="no-margin">{{ $t('Please refresh the page and try again. If the error is still displayed, make sure that server map settings are set correctly.') }}</p>
src/components/mobile/NumberPadSheet.vue
+20 -8
View File
@@ -4,7 +4,7 @@
<div class="swipe-handler" style="z-index: 10"></div> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top"> <f7-page-content class="margin-top no-padding-top">
<div class="numpad-values"> <div class="numpad-values">
<span class="numpad-value" :style="{ fontSize: currentDisplayFontSize + 'px' }">{{ currentDisplay }}</span> <span class="numpad-value" :class="currentDisplayNumClass">{{ currentDisplay }}</span>
</div> </div>
<div class="numpad-buttons"> <div class="numpad-buttons">
<f7-button class="numpad-button numpad-button-num" @click="inputNum(7)"> <f7-button class="numpad-button numpad-button-num" @click="inputNum(7)">
@@ -97,15 +97,15 @@ export default {
return currentValue; return currentValue;
} }
}, },
currentDisplayFontSize() { currentDisplayNumClass() {
const currentDisplay = this.currentDisplay || ''; const currentDisplay = this.currentDisplay || '';
if (currentDisplay.length >= 24) { if (currentDisplay.length >= 24) {
return 20; return 'numpad-value-small';
} else if (currentDisplay.length >= 16) { } else if (currentDisplay.length >= 16) {
return 22; return 'numpad-value-normal';
} else { } else {
return 24; return 'numpad-value-large';
} }
}, },
confirmText() { confirmText() {
@@ -333,12 +333,24 @@ export default {
position: relative; position: relative;
padding-left: 16px; padding-left: 16px;
line-height: 1; line-height: 1;
height: 50px; height: var(--ebk-numpad-value-height);
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
} }
.numpad-value-small {
font-size: var(--ebk-numpad-value-small-font-size);
}
.numpad-value-normal {
font-size: var(--ebk-numpad-value-normal-font-size);
}
.numpad-value-large {
font-size: var(--ebk-numpad-value-large-font-size);
}
.numpad-buttons { .numpad-buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -374,7 +386,7 @@ export default {
.numpad-button-text { .numpad-button-text {
display: block; display: block;
font-size: 28px; font-size: var(--ebk-numpad-normal-button-font-size);
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
} }
@@ -388,6 +400,6 @@ export default {
} }
.numpad-button-text-confirm { .numpad-button-text-confirm {
font-size: 20px; font-size: var(--ebk-numpad-confirm-button-font-size);
} }
</style> </style>
src/components/mobile/PasscodeInputSheet.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="swipe-handler" style="z-index: 10"></div> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top"> <f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center"> <div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div> <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
</div> </div>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<p class="no-margin" v-if="hint">{{ hint }}</p> <p class="no-margin" v-if="hint">{{ hint }}</p>
src/components/mobile/PasswordInputSheet.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="swipe-handler" style="z-index: 10"></div> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top"> <f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center"> <div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div> <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
</div> </div>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<p class="no-margin" v-if="hint">{{ hint }}</p> <p class="no-margin" v-if="hint">{{ hint }}</p>
src/components/mobile/PieChart.vue
+3 -3
View File
@@ -308,9 +308,9 @@ export default {
} }
.pie-chart-toolbox-info { .pie-chart-toolbox-info {
--f7-chip-height: 30px; --f7-chip-height: var(--ebk-pie-chart-toolbox-percentage-height);
--f7-chip-font-size: 18px; --f7-chip-font-size: var(--ebk-pie-chart-toolbox-percentage-font-size);
font-size: 16px; font-size: var(--ebk-pie-chart-toolbox-text-font-size);
align-self: center; align-self: center;
} }
src/components/mobile/PinCodeInputSheet.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="swipe-handler" style="z-index: 10"></div> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top"> <f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center"> <div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px"><b>{{ title }}</b></div> <div class="ebk-sheet-title"><b>{{ title }}</b></div>
</div> </div>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<p class="no-margin">{{ hint }}</p> <p class="no-margin">{{ hint }}</p>
src/lib/settings.js
+3
View File
@@ -8,6 +8,7 @@ const serverSettingsCookieKey = 'ebk_server_settings';
const defaultSettings = { const defaultSettings = {
theme: 'auto', theme: 'auto',
fontSize: 'default',
timeZone: '', timeZone: '',
debug: false, debug: false,
applicationLock: false, applicationLock: false,
@@ -126,6 +127,8 @@ export default {
isProduction: () => process.env.NODE_ENV === 'production', isProduction: () => process.env.NODE_ENV === 'production',
getTheme: () => getOption('theme'), getTheme: () => getOption('theme'),
setTheme: value => setOption('theme', value), setTheme: value => setOption('theme', value),
getFontSize: () => getOption('fontSize'),
setFontSize: value => setOption('fontSize', value),
getTimezone: () => getOption('timeZone'), getTimezone: () => getOption('timeZone'),
setTimezone: value => setOption('timeZone', value), setTimezone: value => setOption('timeZone', value),
isEnableDebug: () => getOption('debug'), isEnableDebug: () => getOption('debug'),
src/lib/ui.mobile.js
+16
View File
@@ -129,3 +129,19 @@ export function autoChangeTextareaSize(el) {
el.style.height = el.scrollHeight + 'px'; el.style.height = el.scrollHeight + 'px';
}); });
} }
export function setAppFontSize(value) {
let fontSizeClass = 'font-default';
if (value === 'extraLarge') {
fontSizeClass = 'font-extra-large';
} else if (value === 'large') {
fontSizeClass = 'font-large';
}
elements('html')
.removeClass('font-default')
.removeClass('font-large')
.removeClass('font-extra-large')
.addClass(fontSizeClass);
}
src/locales/en.js
+4
View File
@@ -937,6 +937,10 @@ export default {
'Theme': 'Theme', 'Theme': 'Theme',
'Light': 'Light', 'Light': 'Light',
'Dark': 'Dark', 'Dark': 'Dark',
'Font Size': 'Font Size',
'Default': 'Default',
'Large': 'Large',
'Extra Large': 'Extra Large',
'Timezone': 'Timezone', 'Timezone': 'Timezone',
'System Default': 'System Default', 'System Default': 'System Default',
'Language Default': 'Language Default', 'Language Default': 'Language Default',
src/locales/zh_Hans.js
+4
View File
@@ -937,6 +937,10 @@ export default {
'Theme': '主题', 'Theme': '主题',
'Light': '浅色', 'Light': '浅色',
'Dark': '深色', 'Dark': '深色',
'Font Size': '字体大小',
'Default': '默认',
'Large': '大',
'Extra Large': '最大',
'Timezone': '时区', 'Timezone': '时区',
'System Default': '系统默认', 'System Default': '系统默认',
'Language Default': '语言默认', 'Language Default': '语言默认',
src/views/mobile/AboutPage.vue
+1 -1
View File
@@ -79,6 +79,6 @@ export default {
} }
.license-popup .subnavbar-title { .license-popup .subnavbar-title {
--f7-subnavbar-title-font-size: 30px; --f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
} }
</style> </style>
src/views/mobile/ExchangeRatesPage.vue
+9 -12
View File
@@ -29,7 +29,7 @@
<f7-list-item <f7-list-item
class="currency-base-amount" class="currency-base-amount"
link="#" no-chevron link="#" no-chevron
:style="{ fontSize: baseAmountFontSize + 'px' }" :class="baseAmountFontSizeClass"
:header="$t('Base Amount')" :header="$t('Base Amount')"
:title="displayBaseAmount" :title="displayBaseAmount"
@click="showBaseAmountSheet = true" @click="showBaseAmountSheet = true"
@@ -145,8 +145,14 @@ export default {
displayBaseAmount() { displayBaseAmount() {
return this.$locale.getDisplayCurrency(this.baseAmount); return this.$locale.getDisplayCurrency(this.baseAmount);
}, },
baseAmountFontSize() { baseAmountFontSizeClass() {
return this.getFontSizeByAmount(this.baseAmount); 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() { allowedMinAmount() {
return transactionConstants.minAmount; return transactionConstants.minAmount;
@@ -247,15 +253,6 @@ export default {
this.baseCurrency = currency; this.baseCurrency = currency;
this.baseAmount = stringCurrencyToNumeric(amount.toString()); 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-if="loading">0.00 USD</span>
<span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span> <span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span>
<f7-link class="margin-left-half" @click="toggleShowAmountInHomePage()"> <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> </f7-link>
</p> </p>
<p class="no-margin"> <p class="no-margin">
@@ -432,7 +432,7 @@ export default {
.overview-transaction-list .overview-transaction-footer { .overview-transaction-list .overview-transaction-footer {
padding-top: 6px; padding-top: 6px;
font-size: 13px; font-size: var(--ebk-large-footer-font-size);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -453,13 +453,13 @@ export default {
} }
.tabbar.main-tabbar .link i + span.tabbar-label { .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 { .tabbar.main-tabbar .link i.ebk-tarbar-big-icon {
font-size: 42px; font-size: var(--ebk-big-icon-button-size);
width: 42px; width: var(--ebk-big-icon-button-size);
height: 42px; height: var(--ebk-big-icon-button-size);
line-height: 42px; line-height: var(--ebk-big-icon-button-size);
} }
</style> </style>
src/views/mobile/LoginPage.vue
+1 -1
View File
@@ -71,7 +71,7 @@
> >
<f7-page-content> <f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center"> <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>
<div class="padding-horizontal padding-bottom"> <div class="padding-horizontal padding-bottom">
<f7-list strong class="no-margin"> <f7-list strong class="no-margin">
src/views/mobile/SettingsPage.vue
+23
View File
@@ -26,6 +26,17 @@
</select> </select>
</f7-list-item> </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 <f7-list-item
:key="currentLocale + '_timezone'" :key="currentLocale + '_timezone'"
:title="$t('Timezone')" :title="$t('Timezone')"
@@ -102,6 +113,7 @@ import { useUserStore } from '@/stores/user.js';
import { useExchangeRatesStore } from '@/stores/exchangeRates.js'; import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
import currencyConstants from '@/consts/currency.js'; import currencyConstants from '@/consts/currency.js';
import { setAppFontSize } from '@/lib/ui.mobile.js';
export default { export default {
props: [ 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: { currentTimezone: {
get: function () { get: function () {
return this.$locale.getTimezone(); 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-if="loading">0.00 USD</span>
<span class="net-assets" v-else-if="!loading">{{ netAssets }}</span> <span class="net-assets" v-else-if="!loading">{{ netAssets }}</span>
<f7-link class="margin-left-half" @click="toggleShowAccountBalance()"> <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> </f7-link>
</p> </p>
<p class="no-margin"> <p class="no-margin">
@@ -463,8 +463,8 @@ export default {
} }
.account-list { .account-list {
--f7-list-group-title-height: 36px; --f7-list-group-title-height: var(--ebk-account-list-group-title-height);
--f7-list-item-footer-font-size: 13px; --f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
} }
.account-list .item-footer { .account-list .item-footer {
src/views/mobile/categories/ListPage.vue
+1 -1
View File
@@ -394,7 +394,7 @@ export default {
<style> <style>
.category-list { .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 { .category-list .item-footer {
src/views/mobile/transactions/EditPage.vue
+24 -12
View File
@@ -43,8 +43,7 @@
<f7-list-item <f7-list-item
class="transaction-edit-amount" class="transaction-edit-amount"
link="#" no-chevron link="#" no-chevron
:class="{ 'readonly': mode === 'view', 'color-teal': transaction.type === allTransactionTypes.Expense, 'color-red': transaction.type === allTransactionTypes.Income }" :class="sourceAmountClass"
:style="{ fontSize: sourceAmountFontSize + 'px' }"
:header="$t(sourceAmountName)" :header="$t(sourceAmountName)"
:title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)" :title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)"
@click="showSourceAmountSheet = true" @click="showSourceAmountSheet = true"
@@ -59,8 +58,7 @@
<f7-list-item <f7-list-item
class="transaction-edit-amount" class="transaction-edit-amount"
link="#" no-chevron link="#" no-chevron
:class="{ 'readonly': mode === 'view' }" :class="destinationAmountClass"
:style="{ fontSize: destinationAmountFontSize + 'px' }"
:header="$t('Transfer In Amount')" :header="$t('Transfer In Amount')"
:title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)" :title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)"
@click="showDestinationAmountSheet = true" @click="showDestinationAmountSheet = true"
@@ -608,11 +606,25 @@ export default {
transactionDisplayTimezoneName() { transactionDisplayTimezoneName() {
return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName'); return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
}, },
sourceAmountFontSize() { sourceAmountClass() {
return this.getFontSizeByAmount(this.transaction.sourceAmount); 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() { destinationAmountClass() {
return this.getFontSizeByAmount(this.transaction.destinationAmount); const classes = {
'readonly': this.mode === 'view'
};
classes[this.getFontClassByAmount(this.transaction.destinationAmount)] = true;
return classes;
}, },
geoLocationStatusInfo() { geoLocationStatusInfo() {
if (this.geoLocationStatus === 'success') { if (this.geoLocationStatus === 'success') {
@@ -1006,13 +1018,13 @@ export default {
} }
} }
}, },
getFontSizeByAmount(amount) { getFontClassByAmount(amount) {
if (amount >= 100000000 || amount <= -100000000) { if (amount >= 100000000 || amount <= -100000000) {
return 32; return 'ebk-small-amount';
} else if (amount >= 1000000 || amount <= -1000000) { } else if (amount >= 1000000 || amount <= -1000000) {
return 36; return 'ebk-normal-amount';
} else { } else {
return 40; return 'ebk-large-amount';
} }
}, },
getDisplayAmount(amount, hideAmount) { 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 { .list.transaction-info-list li.transaction-info .transaction-date {
width: 25px; width: var(--ebk-transaction-date-width);
margin-right: 6px; margin-right: 6px;
} }
.list.transaction-info-list li.transaction-info .transaction-day { .list.transaction-info-list li.transaction-info .transaction-day {
opacity: 0.6; opacity: 0.6;
font-size: 16px; font-size: var(--ebk-transaction-day-font-size);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
} }
.list.transaction-info-list li.transaction-info .transaction-day-of-week { .list.transaction-info-list li.transaction-info .transaction-day-of-week {
opacity: 0.6; 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 { .list.transaction-info-list li.transaction-info .transaction-comment {
font-size: 13px; font-size: var(--ebk-large-footer-font-size);
line-height: 20px; line-height: 20px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 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> <div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content class="margin-top no-padding-top"> <f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center"> <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>
<div class="padding-horizontal padding-bottom"> <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> <p class="no-margin-top margin-bottom-half">{{ $t('It may take a long time, please wait for a few minutes.') }}</p>